mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-19 03:49:34 +00:00
f9909827d0* feat(theme): add g80 theme * docs(data-table): use link with icon variant * feat(search): support expandable variant * fix(file-uploaded): use semantic p element instead of strong * feat(side-nav): dispatch open, close, click:overlay events * refactor(ui-shell): remove usage of deprecated Icon component * feat(ui-shell): allow custom hamburger menu icons * feat(button): support xl size * fix(code-snippet): wrap code element with pre * refactor(button): use button specific tooltip class for icon-only variant * feat(password-input): support warning, inline props * feat(data-table): support medium size
89 lines
2.9 KiB
Svelte
89 lines
2.9 KiB
Svelte
<script>
|
|
import { Router } from "@sveltech/routify";
|
|
import { routes } from "../.routify/routes";
|
|
</script>
|
|
|
|
<Router routes="{routes}" />
|
|
|
|
<style lang="scss" global>
|
|
// 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
|
|
);
|
|
|
|
$css--font-face: true;
|
|
$css--helpers: true;
|
|
$css--body: true;
|
|
$css--use-layer: true;
|
|
$css--reset: true;
|
|
$css--default-type: true;
|
|
$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) {
|
|
@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 emit-component-tokens($tag-colors);
|
|
@include emit-component-tokens($notification-colors);
|
|
}
|
|
}
|
|
|
|
// Set the <html> theme attribute to "g80" to use the Gray 90 theme
|
|
// <html theme="g80">
|
|
:root[theme="g80"] {
|
|
@include carbon--theme($carbon--theme--g80, 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 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 emit-component-tokens($tag-colors);
|
|
@include emit-component-tokens($notification-colors);
|
|
}
|
|
}
|
|
|
|
// 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";
|
|
</style>
|