mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(scss): use new component tokens to render low contrast notifications (#533)

Browse source
This commit is contained in:
Eric Liu 2021-02-23 13:18:41 -08:00 • committed by GitHub
commit 66a3fd10c2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 65 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

35
css/all.scss
View file

@ -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 <html> theme attribute to "g10" to use the Gray 10 theme
// <html theme="g10">
: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 <html> theme attribute to "g90" to use the Gray 90 theme
// <html theme="g90">
: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 <html> theme attribute to "g100" to use the Gray 100 theme
// <html theme="g100">
: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";

4
css/g10.scss
View file

@ -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();

4
css/g100.scss
View file

@ -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();

4
css/g90.scss
View file

@ -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();

4
css/white.scss
View file

@ -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();

24
docs/src/App.svelte
View file

@ -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 <html> theme attribute to "g10" to use the Gray 10 theme
// <html theme="g10">
: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 <html> theme attribute to "g90" to use the Gray 90 theme
// <html theme="g90">
: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 <html> theme attribute to "g100" to use the Gray 100 theme
// <html theme="g100">
: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: