mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
Alignment with Carbon version 10.29 (#529)
* chore: patch prettier-plugin-svelte * docs(tag): add filterable small tag example * feat(ui-shell): add SideNavDivider * feat(combo-box): support warning state * docs(combo-box): add invalid state example * fix(progress-step): add title to warning icon * docs(progress-indicator): add invalid step example * docs(progress-indicator): add disabled steps example * feat(truncate): add text truncation component and action * docs(radio-tile): fix light variant example * fix(side-effects): add pre-compiled CSS to library side effects * refactor(css): use shorthand scss imports, add comments * refactor(truncate): rename "direction" prop to "clamp" * chore(deps-dev): bump carbon-components to v10.29.0 * feat(combo-box): add direction prop * feat(dropdown): add direction prop * feat(multi-select): add direction prop
This commit is contained in:
parent
827a9822e7
commit
14e714fa61
48 changed files with 729 additions and 277 deletions
32
css/all.scss
32
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 <html> theme attribute to "g10" to use the Gray 10 theme
|
||||
// <html theme="g10">
|
||||
:root[theme="g10"] { @include carbon--theme($carbon--theme--g10, true); }
|
||||
|
||||
// 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); }
|
||||
|
||||
// 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); }
|
||||
|
||||
@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";
|
||||
// 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";
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue