diff --git a/css/all.scss b/css/all.scss index faa17656..07f58fd6 100644 --- a/css/all.scss +++ b/css/all.scss @@ -1,4 +1,8 @@ +// This is a recipe for dynamic, client-side theming +// All Carbon themes are included (White, Gray 10, Gray 90, Gray 100) + $feature-flags: ( + // Custom CSS properties must be enabled to dynamically switch themes enable-css-custom-properties: true, ui-shell: true, grid-columns-16: true @@ -15,14 +19,30 @@ $css--plex: true; // Use all Carbon themes @import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss"; +// The default theme is "white" (White) :root { @include carbon--theme($carbon--theme--white, true); } + +// Set the theme attribute to "g10" to use the Gray 10 theme +// :root[theme="g10"] { @include carbon--theme($carbon--theme--g10, true); } + +// Set the theme attribute to "g90" to use the Gray 90 theme +// :root[theme="g90"] { @include carbon--theme($carbon--theme--g90, true); } + +// Set the theme attribute to "g100" to use the Gray 100 theme +// :root[theme="g100"] { @include carbon--theme($carbon--theme--g100, true); } -@import "carbon-components/scss/globals/scss/_css--reset.scss"; -@import "carbon-components/scss/globals/scss/_css--font-face.scss"; -@import "carbon-components/scss/globals/scss/_css--helpers.scss"; -@import "carbon-components/scss/globals/scss/_css--body.scss"; -@import "carbon-components/scss/globals/grid/_grid.scss"; -@import "carbon-components/scss/globals/scss/styles.scss"; \ No newline at end of file +// Programmatically update the theme in JavaScript: +// document.documentElement.setAttribute("theme", "g90"); + +@import "carbon-components/scss/globals/scss/_css--reset"; +@import "carbon-components/scss/globals/scss/_css--font-face"; +@import "carbon-components/scss/globals/scss/_css--helpers"; +@import "carbon-components/scss/globals/scss/_css--body"; +@import "carbon-components/scss/globals/grid/grid"; + +// Import all component styles +@import "carbon-components/scss/globals/scss/styles"; + diff --git a/css/g10.scss b/css/g10.scss index 452ad7a2..ebc3970d 100644 --- a/css/g10.scss +++ b/css/g10.scss @@ -17,9 +17,12 @@ $css--plex: true; $carbon--theme: $carbon--theme--g10; @include carbon--theme(); -@import "carbon-components/scss/globals/scss/_css--reset.scss"; -@import "carbon-components/scss/globals/scss/_css--font-face.scss"; -@import "carbon-components/scss/globals/scss/_css--helpers.scss"; -@import "carbon-components/scss/globals/scss/_css--body.scss"; -@import "carbon-components/scss/globals/grid/_grid.scss"; -@import "carbon-components/scss/globals/scss/styles.scss"; \ No newline at end of file +@import "carbon-components/scss/globals/scss/_css--reset"; +@import "carbon-components/scss/globals/scss/_css--font-face"; +@import "carbon-components/scss/globals/scss/_css--helpers"; +@import "carbon-components/scss/globals/scss/_css--body"; +@import "carbon-components/scss/globals/grid/grid"; + +// Import all component styles +@import "carbon-components/scss/globals/scss/styles"; + diff --git a/css/g100.scss b/css/g100.scss index 9eb38fea..0c148822 100644 --- a/css/g100.scss +++ b/css/g100.scss @@ -17,9 +17,11 @@ $css--plex: true; $carbon--theme: $carbon--theme--g100; @include carbon--theme(); -@import "carbon-components/scss/globals/scss/_css--reset.scss"; -@import "carbon-components/scss/globals/scss/_css--font-face.scss"; -@import "carbon-components/scss/globals/scss/_css--helpers.scss"; -@import "carbon-components/scss/globals/scss/_css--body.scss"; -@import "carbon-components/scss/globals/grid/_grid.scss"; -@import "carbon-components/scss/globals/scss/styles.scss"; \ No newline at end of file +@import "carbon-components/scss/globals/scss/_css--reset"; +@import "carbon-components/scss/globals/scss/_css--font-face"; +@import "carbon-components/scss/globals/scss/_css--helpers"; +@import "carbon-components/scss/globals/scss/_css--body"; +@import "carbon-components/scss/globals/grid/grid"; + +// Import all component styles +@import "carbon-components/scss/globals/scss/styles"; \ No newline at end of file diff --git a/css/g90.scss b/css/g90.scss index 5a28dbcc..7efb4c28 100644 --- a/css/g90.scss +++ b/css/g90.scss @@ -17,9 +17,11 @@ $css--plex: true; $carbon--theme: $carbon--theme--g90; @include carbon--theme(); -@import "carbon-components/scss/globals/scss/_css--reset.scss"; -@import "carbon-components/scss/globals/scss/_css--font-face.scss"; -@import "carbon-components/scss/globals/scss/_css--helpers.scss"; -@import "carbon-components/scss/globals/scss/_css--body.scss"; -@import "carbon-components/scss/globals/grid/_grid.scss"; -@import "carbon-components/scss/globals/scss/styles.scss"; \ No newline at end of file +@import "carbon-components/scss/globals/scss/_css--reset"; +@import "carbon-components/scss/globals/scss/_css--font-face"; +@import "carbon-components/scss/globals/scss/_css--helpers"; +@import "carbon-components/scss/globals/scss/_css--body"; +@import "carbon-components/scss/globals/grid/grid"; + +// Import all component styles +@import "carbon-components/scss/globals/scss/styles"; \ No newline at end of file diff --git a/css/white.scss b/css/white.scss index 2b1a12a5..a4e01a14 100644 --- a/css/white.scss +++ b/css/white.scss @@ -17,9 +17,11 @@ $css--plex: true; $carbon--theme: $carbon--theme--white; @include carbon--theme(); -@import "carbon-components/scss/globals/scss/_css--reset.scss"; -@import "carbon-components/scss/globals/scss/_css--font-face.scss"; -@import "carbon-components/scss/globals/scss/_css--helpers.scss"; -@import "carbon-components/scss/globals/scss/_css--body.scss"; -@import "carbon-components/scss/globals/grid/_grid.scss"; -@import "carbon-components/scss/globals/scss/styles.scss"; \ No newline at end of file +@import "carbon-components/scss/globals/scss/_css--reset"; +@import "carbon-components/scss/globals/scss/_css--font-face"; +@import "carbon-components/scss/globals/scss/_css--helpers"; +@import "carbon-components/scss/globals/scss/_css--body"; +@import "carbon-components/scss/globals/grid/grid"; + +// Import all component styles +@import "carbon-components/scss/globals/scss/styles"; \ No newline at end of file diff --git a/docs/src/App.svelte b/docs/src/App.svelte index 235e35fc..f465829f 100644 --- a/docs/src/App.svelte +++ b/docs/src/App.svelte @@ -6,7 +6,11 @@