From 66a3fd10c20d7d74313f5cad3aa0868d21eaf0c8 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Tue, 23 Feb 2021 13:18:41 -0800 Subject: [PATCH] fix(scss): use new component tokens to render low contrast notifications (#533) --- css/all.scss | 35 +++++++++++++++++++++++++++++------ css/g10.scss | 4 ++++ css/g100.scss | 4 ++++ css/g90.scss | 4 ++++ css/white.scss | 4 ++++ docs/src/App.svelte | 24 ++++++++++++++++++++---- 6 files changed, 65 insertions(+), 10 deletions(-) diff --git a/css/all.scss b/css/all.scss index 07f58fd6..afcfd90c 100644 --- a/css/all.scss +++ b/css/all.scss @@ -18,21 +18,45 @@ $css--plex: true; // Use all Carbon themes @import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss"; +@import "carbon-components/scss/globals/scss/component-tokens"; +@import "carbon-components/src/components/tag/tag"; +@import "carbon-components/src/components/notification/inline-notification"; +@import "carbon-components/src/components/notification/toast-notification"; // The default theme is "white" (White) -:root { @include carbon--theme($carbon--theme--white, true); } +:root { + @include carbon--theme($carbon--theme--white, true) { + @include emit-component-tokens($tag-colors); + @include emit-component-tokens($notification-colors); + } +} // Set the theme attribute to "g10" to use the Gray 10 theme // -:root[theme="g10"] { @include carbon--theme($carbon--theme--g10, true); } +:root[theme="g10"] { + @include carbon--theme($carbon--theme--g10, true) { + @include emit-component-tokens($tag-colors); + @include emit-component-tokens($notification-colors); + } +} // Set the theme attribute to "g90" to use the Gray 90 theme // -:root[theme="g90"] { @include carbon--theme($carbon--theme--g90, true); } +:root[theme="g90"] { + @include carbon--theme($carbon--theme--g90, true) { + @include emit-component-tokens($tag-colors); + @include emit-component-tokens($notification-colors); + } +} // Set the theme attribute to "g100" to use the Gray 100 theme // -:root[theme="g100"] { @include carbon--theme($carbon--theme--g100, true); } +:root[theme="g100"] { + @include carbon--theme($carbon--theme--g100, true) { + @include emit-component-tokens($tag-colors); + @include emit-component-tokens($notification-colors); + } +} // Programmatically update the theme in JavaScript: // document.documentElement.setAttribute("theme", "g90"); @@ -44,5 +68,4 @@ $css--plex: true; @import "carbon-components/scss/globals/grid/grid"; // Import all component styles -@import "carbon-components/scss/globals/scss/styles"; - +@import "carbon-components/scss/globals/scss/styles"; \ No newline at end of file diff --git a/css/g10.scss b/css/g10.scss index ebc3970d..e97cdb84 100644 --- a/css/g10.scss +++ b/css/g10.scss @@ -13,6 +13,10 @@ $css--plex: true; // Use the "g10" (Gray 10) Carbon theme @import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss"; +@import "carbon-components/scss/globals/scss/component-tokens"; +@import "carbon-components/src/components/tag/tag"; +@import "carbon-components/src/components/notification/inline-notification"; +@import "carbon-components/src/components/notification/toast-notification"; $carbon--theme: $carbon--theme--g10; @include carbon--theme(); diff --git a/css/g100.scss b/css/g100.scss index 0c148822..6828061d 100644 --- a/css/g100.scss +++ b/css/g100.scss @@ -13,6 +13,10 @@ $css--plex: true; // Use the "g100" (Gray 100) Carbon theme @import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss"; +@import "carbon-components/scss/globals/scss/component-tokens"; +@import "carbon-components/src/components/tag/tag"; +@import "carbon-components/src/components/notification/inline-notification"; +@import "carbon-components/src/components/notification/toast-notification"; $carbon--theme: $carbon--theme--g100; @include carbon--theme(); diff --git a/css/g90.scss b/css/g90.scss index 7efb4c28..abf54fa0 100644 --- a/css/g90.scss +++ b/css/g90.scss @@ -13,6 +13,10 @@ $css--plex: true; // Use the "g90" (Gray 90) Carbon theme @import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss"; +@import "carbon-components/scss/globals/scss/component-tokens"; +@import "carbon-components/src/components/tag/tag"; +@import "carbon-components/src/components/notification/inline-notification"; +@import "carbon-components/src/components/notification/toast-notification"; $carbon--theme: $carbon--theme--g90; @include carbon--theme(); diff --git a/css/white.scss b/css/white.scss index a4e01a14..9b4bd827 100644 --- a/css/white.scss +++ b/css/white.scss @@ -13,6 +13,10 @@ $css--plex: true; // Use the "white" (White) Carbon theme @import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss"; +@import "carbon-components/scss/globals/scss/component-tokens"; +@import "carbon-components/src/components/tag/tag"; +@import "carbon-components/src/components/notification/inline-notification"; +@import "carbon-components/src/components/notification/toast-notification"; $carbon--theme: $carbon--theme--white; @include carbon--theme(); diff --git a/docs/src/App.svelte b/docs/src/App.svelte index f465829f..e3b4ea4b 100644 --- a/docs/src/App.svelte +++ b/docs/src/App.svelte @@ -26,28 +26,44 @@ // Use all Carbon themes @import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss"; + @import "carbon-components/scss/globals/scss/component-tokens"; + @import "carbon-components/src/components/tag/tag"; + @import "carbon-components/src/components/notification/inline-notification"; + @import "carbon-components/src/components/notification/toast-notification"; // The default theme is "white" (White) :root { - @include carbon--theme($carbon--theme--white, true); + @include carbon--theme($carbon--theme--white, true) { + @include emit-component-tokens($tag-colors); + @include emit-component-tokens($notification-colors); + } } // Set the theme attribute to "g10" to use the Gray 10 theme // :root[theme="g10"] { - @include carbon--theme($carbon--theme--g10, true); + @include carbon--theme($carbon--theme--g10, true) { + @include emit-component-tokens($tag-colors); + @include emit-component-tokens($notification-colors); + } } // Set the theme attribute to "g90" to use the Gray 90 theme // :root[theme="g90"] { - @include carbon--theme($carbon--theme--g90, true); + @include carbon--theme($carbon--theme--g90, true) { + @include emit-component-tokens($tag-colors); + @include emit-component-tokens($notification-colors); + } } // Set the theme attribute to "g100" to use the Gray 100 theme // :root[theme="g100"] { - @include carbon--theme($carbon--theme--g100, true); + @include carbon--theme($carbon--theme--g100, true) { + @include emit-component-tokens($tag-colors); + @include emit-component-tokens($notification-colors); + } } // Programmatically update the theme in JavaScript: