diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts index c1cc08f24..661fe8327 100644 --- a/docs/.vitepress/config.mts +++ b/docs/.vitepress/config.mts @@ -15,7 +15,6 @@ const componentNavItems = components.map((component) => { // https://vitepress.dev/reference/site-config export default withMermaid({ ignoreDeadLinks: [/^https?:\/\/localhost/, './../wrappers/set-attributes'], - appearance: false, head: [['link', { rel: 'icon', href: 'favicon.ico' }]], title: 'Web Components', description: 'Component Library following the SIX Style Guide', @@ -64,6 +63,7 @@ export default withMermaid({ items: [ { text: 'Tables', link: '/guide/styling/tables' }, { text: 'Colors', link: '/guide/styling/colors' }, + { text: 'Dark Mode', link: '/guide/styling/dark-mode' }, { text: 'Spacing', link: '/guide/styling/spacing' }, { text: 'Typography', link: '/guide/styling/typography' }, { text: 'Shadows', link: '/guide/styling/shadows' }, diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts index b1b5a4d11..982ce826c 100644 --- a/docs/.vitepress/theme/index.ts +++ b/docs/.vitepress/theme/index.ts @@ -4,6 +4,8 @@ import DefaultTheme from 'vitepress/theme'; import './style.css'; import { defineCustomElements } from '@six-group/ui-library/loader'; import { Theme } from 'vitepress'; +import { onMounted, watch } from 'vue'; +import { useData, useRouter } from 'vitepress'; // @ts-ignore const modules = import.meta.glob('../../examples/**/*.vue', { eager: true }); @@ -11,6 +13,23 @@ const exampleComponents = []; for (const path in modules) { exampleComponents.push(modules[path].default); } + +// Sync VitePress theme with the SIX theme attribute +function syncSixTheme(isDark: boolean) { + document.documentElement.setAttribute('data-six-theme', isDark ? 'dark' : 'light'); +} + +// Initialize theme class immediately on load (before Vue mounts) +if (typeof window !== 'undefined') { + // Drop any theme persisted by the six-root demo so it doesn't survive a reload + localStorage.removeItem('six-theme'); + const savedTheme = localStorage.getItem('vitepress-theme-appearance'); + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + const isDark = + savedTheme === 'dark' || (savedTheme === 'auto' && prefersDark) || (!savedTheme && prefersDark); + syncSixTheme(isDark); +} + export default { extends: DefaultTheme, Layout: () => { @@ -27,4 +46,27 @@ export default { app.component(component.name, component); }); }, + setup() { + const { isDark } = useData(); + const router = useRouter(); + + // Set initial theme on mount + onMounted(() => { + syncSixTheme(isDark.value); + }); + + // Watch for theme changes and update the attribute + watch(isDark, (newIsDark) => { + syncSixTheme(newIsDark); + }); + + // Demos (e.g. six-root with six-theme-switcher) can switch the SIX theme + // globally; reset it when navigating so it doesn't leak to other pages + const prevAfterRouteChanged = router.onAfterRouteChanged; + router.onAfterRouteChanged = async (to) => { + await prevAfterRouteChanged?.(to); + localStorage.removeItem('six-theme'); + syncSixTheme(isDark.value); + }; + }, } satisfies Theme; diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css index 58205c614..917431692 100644 --- a/docs/.vitepress/theme/style.css +++ b/docs/.vitepress/theme/style.css @@ -6,20 +6,59 @@ */ /** - * Colors - --vp-code-block-color + * Colors - Light Theme * -------------------------------------------------------------------------- */ :root { + /* Brand colors */ --vp-c-brand-1: #de3919; --vp-c-brand-2: #e83c1a; --vp-c-brand-3: #f23f1b; --vp-c-brand-soft: #f7401b; + + /* Text colors */ + --vp-c-text-1: unset; + + /* Layout */ --vp-nav-logo-height: 14px; + + /* Search */ --vp-local-search-highlight-bg: none; --vp-local-search-highlight-text: var(--vp-c-brand-1); + + /* Code blocks - Light theme */ --vp-code-block-bg: #f6f6f7; --vp-code-bg: #f6f6f7; + --vp-code-color: #383a42; +} + +/** + * Colors - Dark Theme + * -------------------------------------------------------------------------- */ +.dark, +[data-six-theme='dark'] { + /* Code blocks - Dark theme */ + --vp-code-block-bg: #1e1e1e; + --vp-code-bg: #1e1e1e; + --vp-code-color: #abb2bf; + + /* Background colors */ + --vp-c-bg: var(--six-color-web-rock-900); + --vp-c-bg-soft: #242424; + --vp-c-bg-mute: #2c2c2c; + --vp-c-bg-alt: #151515; + + /* Divider colors */ + --vp-c-divider: #2e2e2e; + --vp-c-gutter: #1a1a1a; + + /* Text colors */ + --vp-c-text-1: rgba(255, 255, 245, 0.86); + --vp-c-text-2: rgba(235, 235, 245, 0.6); + --vp-c-text-3: rgba(235, 235, 245, 0.38); + + /* Sidebar */ + --vp-sidebar-bg-color: #232323; } /** @@ -46,6 +85,28 @@ /* overwrite to match color of vitepress code background */ code { background: var(--vp-code-bg); + color: var(--vp-code-color); +} + +/* Code blocks styling */ +.vp-doc div[class*='language-'] { + background-color: var(--vp-code-block-bg); +} + +.vp-doc div[class*='language-'] code { + color: var(--vp-code-color); +} + +/* Improve code block header visibility in dark mode */ +.dark .vp-doc div[class*='language-'] .lang, +[data-six-theme='dark'] .vp-doc div[class*='language-'] .lang { + color: rgba(235, 235, 245, 0.6); +} + +/* Improve line numbers visibility */ +.dark .vp-doc .line-numbers-wrapper, +[data-six-theme='dark'] .vp-doc .line-numbers-wrapper { + color: rgba(235, 235, 245, 0.3); } /* @@ -55,3 +116,47 @@ code { .content-container { max-width: 1400px !important; } + +/* + Page scrollbars follow the VitePress theme (.dark) instead of the SIX theme tokens, + which demos (e.g. the six-root example) can toggle at runtime. + */ +html { + scrollbar-color: var(--six-color-web-rock-500) var(--six-color-web-rock-300); +} + +html::-webkit-scrollbar-track { + background: var(--six-color-web-rock-300); +} + +html::-webkit-scrollbar-thumb { + background: var(--six-color-web-rock-500); +} + +html::-webkit-scrollbar-thumb:hover { + background: var(--six-color-web-rock-600); +} + +html.dark { + scrollbar-color: var(--six-color-web-rock-700) var(--six-color-web-rock-900); +} + +html.dark::-webkit-scrollbar-track { + background: var(--six-color-web-rock-900); +} + +html.dark::-webkit-scrollbar-thumb { + background: var(--six-color-web-rock-700); +} + +html.dark::-webkit-scrollbar-thumb:hover { + background: var(--six-color-web-rock-600); +} + +/* + Inside the six-root demo, scrollbars follow the SIX theme tokens again + (scrollbar-color is inherited, so the pinned page value would leak in here) + */ +.six-root-wrapper { + scrollbar-color: var(--six-scrollbar-thumb-color) var(--six-scrollbar-background-color); +} diff --git a/docs/changelog.md b/docs/changelog.md index 9cf2492dd..21617a4d3 100644 --- a/docs/changelog.md +++ b/docs/changelog.md @@ -6,6 +6,16 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). ## Upcoming +### Added + +- Dark mode: activated via the `data-six-theme="dark"` attribute on the root element, or + automatically via the OS preference (`prefers-color-scheme`) when no attribute is set. Dark token + overrides now live in `dark-theme.css` and follow the SIX dark mode design guidelines. See the + [Dark Mode guide](./guide/styling/dark-mode.md). `six-root` and `six-theme-switcher` manage the + attribute automatically (the previous `.theme-dark`/`.theme-light` classes are no longer used). + `six-theme-switcher` now also works standalone — without a `six-root` it toggles the + `data-six-theme` attribute directly and stays in sync with attribute and OS preference changes. + ## 5.5.0 - 2026-07-03 - `six-breadcrumbs` new style aligned with design guidelines. Added `size` interface property. diff --git a/docs/components/component.tags.mts b/docs/components/component.tags.mts index 089c9281b..deb247a69 100644 --- a/docs/components/component.tags.mts +++ b/docs/components/component.tags.mts @@ -1 +1 @@ -export const components = ["six-alert","six-avatar","six-badge","six-breadcrumbs","six-breadcrumbs-item","six-button","six-card","six-checkbox","six-date","six-datepicker","six-details","six-dialog","six-drawer","six-dropdown","six-error","six-error-page","six-file-list","six-file-list-item","six-file-upload","six-footer","six-group-label","six-header","six-header-dropdown-item","six-header-item","six-header-menu-button","six-icon","six-icon-button","six-input","six-item-picker","six-language-switcher","six-layout-grid","six-logo","six-main-container","six-menu","six-menu-divider","six-menu-item","six-menu-label","six-paginator","six-picto","six-progress-bar","six-progress-ring","six-radio","six-range","six-rating","six-root","six-search-field","six-select","six-sidebar","six-sidebar-item","six-sidebar-item-group","six-spinner","six-stage-indicator","six-switch","six-tab","six-tab-group","six-tab-panel","six-tag","six-textarea","six-tile","six-timepicker","six-tooltip"]; \ No newline at end of file +export const components = ["six-alert","six-avatar","six-badge","six-breadcrumbs","six-breadcrumbs-item","six-button","six-card","six-checkbox","six-date","six-datepicker","six-details","six-dialog","six-drawer","six-dropdown","six-error","six-error-page","six-file-list","six-file-list-item","six-file-upload","six-footer","six-group-label","six-header","six-header-dropdown-item","six-header-item","six-header-menu-button","six-icon","six-icon-button","six-input","six-item-picker","six-language-switcher","six-layout-grid","six-logo","six-main-container","six-menu","six-menu-divider","six-menu-item","six-menu-label","six-paginator","six-picto","six-progress-bar","six-progress-ring","six-radio","six-range","six-rating","six-root","six-search-field","six-select","six-sidebar","six-sidebar-item","six-sidebar-item-group","six-spinner","six-stage-indicator","six-switch","six-tab","six-tab-group","six-tab-panel","six-tag","six-textarea","six-theme-switcher","six-tile","six-timepicker","six-tooltip"]; \ No newline at end of file diff --git a/docs/components/six-icon-button.md b/docs/components/six-icon-button.md index 5be57d61b..bbd419dae 100644 --- a/docs/components/six-icon-button.md +++ b/docs/components/six-icon-button.md @@ -203,6 +203,7 @@ Often icon buttons are combined with badges to signal new entries. For this simp - [six-tab](six-tab.html) - [six-tab-group](six-tab-group.html) - [six-tag](six-tag.html) + - [six-theme-switcher](six-theme-switcher.html) - [six-tile](six-tile.html) ### Depends on @@ -222,6 +223,7 @@ graph TD; six-tab --> six-icon-button six-tab-group --> six-icon-button six-tag --> six-icon-button + six-theme-switcher --> six-icon-button six-tile --> six-icon-button style six-icon-button fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/docs/components/six-root.md b/docs/components/six-root.md index c557b7e2c..cf7d11566 100644 --- a/docs/components/six-root.md +++ b/docs/components/six-root.md @@ -11,11 +11,15 @@ You can remove the content padding by adding `padded="false"` to `six-root`. You can provide a stage indicator by adding `stage="DEV"` to `six-root` as well as provide version information by adding `version="DEV-1.1.2"`to `six-root`. Providing nothing or `PROD` will disable stage indication +## Theme Support + +`six-root` includes built-in theme management. Set the `theme` attribute to `light`, `dark`, or `auto` (follows system preference). Use `six-theme-switcher` to toggle themes. + ```html
- + @@ -35,6 +39,11 @@ You can provide a stage indicator by adding `stage="DEV"` to `six-root` as well + + + + +
-

Content

+ +
+ +
+ Primary Button + Secondary Button +

+ + info + This is an info alert. Toggle the theme using the switcher in the header to see how components adapt. + + +

Content

Show some tasks... Toggle some text... @@ -225,6 +246,7 @@ You can provide a stage indicator by adding `stage="DEV"` to `six-root` as well ); const Select = getElements({ + root: '#app-root', header: 'six-header', leftSidebar: 'six-sidebar[slot="left-sidebar"]', tasksButton: '#show-tasks', @@ -280,11 +302,51 @@ You can provide a stage indicator by adding `stage="DEV"` to `six-root` as well ## Properties -| Property | Attribute | Description | Type | Default | -| --------- | --------- | ---------------------------------------------------- | ---------------------------------------------------------------------- | ------- | -| `padded` | `padded` | Defines whether the content section should be padded | `boolean` | `true` | -| `stage` | `stage` | Defines the stage of the application | `"ACCEPTANCE" \| "DEV" \| "ETU" \| "ITU" \| "LOCAL" \| "PROD" \| null` | `null` | -| `version` | `version` | Defines the version of the application | `string` | `''` | +| Property | Attribute | Description | Type | Default | +| --------- | --------- | ---------------------------------------------------- | ---------------------------------------------------------------------- | --------- | +| `padded` | `padded` | Defines whether the content section should be padded | `boolean` | `true` | +| `stage` | `stage` | Defines the stage of the application | `"ACCEPTANCE" \| "DEV" \| "ETU" \| "ITU" \| "LOCAL" \| "PROD" \| null` | `null` | +| `theme` | `theme` | Defines the theme | `"auto" \| "dark" \| "light"` | `'light'` | +| `version` | `version` | Defines the version of the application | `string` | `''` | + + +## Methods + +### `getTheme() => Promise<{ theme: SixTheme; appliedTheme: "light" | "dark"; }>` + +Gets the current theme and applied theme. + +#### Returns + +Type: `Promise<{ theme: SixTheme; appliedTheme: "light" | "dark"; }>` + + + +### `setTheme(theme: SixTheme) => Promise` + +Sets the theme. + +#### Parameters + +| Name | Type | Description | +| ------- | ----------------------------- | ----------- | +| `theme` | `"auto" \| "light" \| "dark"` | | + +#### Returns + +Type: `Promise` + + + +### `toggleTheme() => Promise` + +Toggles between light and dark theme. + +#### Returns + +Type: `Promise` + + ## Slots diff --git a/docs/components/six-theme-switcher.md b/docs/components/six-theme-switcher.md new file mode 100644 index 000000000..75c8c75ca --- /dev/null +++ b/docs/components/six-theme-switcher.md @@ -0,0 +1,151 @@ +# Theme Switcher + +A simple icon button that toggles between light and dark themes. Syncs with six-root's theme management system when present, and toggles the data-six-theme attribute directly otherwise. + + +## Theme Switcher + +The `six-theme-switcher` is a simple icon button that toggles between light and dark themes. When a `six-root` is present it syncs with its theme management system (including persistence); without `six-root` it toggles the `data-six-theme` attribute on the root element directly. + + + +```html +
+ +
+``` + + +## Sizes + +Theme switchers inherit the same size options as icon buttons. + + + +```html +
+ + + + + +
+``` + + +## Disabled + +Set the `disabled` attribute to disable the theme switcher. + + + +```html +
+ +
+``` + + +## Custom Label + +Provide a custom label for screen readers using the `label` attribute. This improves accessibility. + + + +```html +
+ +
+``` + + +## With Tooltip + +Wrap a tooltip around the theme switcher to provide contextual information to the user. + + + +```html +
+ + + +
+``` + + +## In Header + +The theme switcher is commonly used in application headers. + + + +```html +
+ + + + + + + + + + + + + + + + + + + +
+``` + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| ---------- | ---------- | ----------------------------------------------- | ----------------------------------------------------------------------------------- | ---------------- | +| `disabled` | `disabled` | Set to true to disable the theme switcher. | `boolean` | `false` | +| `label` | `label` | A description that gets read by screen readers. | `string` | `'Toggle theme'` | +| `size` | `size` | The icon button's size. | `"large" \| "medium" \| "small" \| "xLarge" \| "xSmall" \| "xxLarge" \| "xxxLarge"` | `'medium'` | + + +## Events + +| Event | Description | Type | +| --------------------------- | ---------------------------------- | ------------------------ | +| `six-theme-switcher-change` | Emitted when the theme is changed. | `CustomEvent` | + + +## Shadow Parts + +| Part | Description | +| -------- | ----------------------------- | +| `"base"` | The component's base wrapper. | + + +## Dependencies + +### Depends on + +- [six-icon-button](six-icon-button.html) + +### Graph +```mermaid +graph TD; + six-theme-switcher --> six-icon-button + six-icon-button --> six-icon + style six-theme-switcher fill:#f9f,stroke:#333,stroke-width:4px +``` + +---------------------------------------------- + +Copyright © 2021-present SIX-Group diff --git a/docs/examples/docs-demo-six-root-0.vue b/docs/examples/docs-demo-six-root-0.vue index 472a683c0..010ddbbd4 100644 --- a/docs/examples/docs-demo-six-root-0.vue +++ b/docs/examples/docs-demo-six-root-0.vue @@ -2,7 +2,7 @@
- + @@ -22,6 +22,11 @@ + + + + +
-

Content

+ +
+ +
+ Primary Button + Secondary Button +

+ + info + This is an info alert. Toggle the theme using the switcher in the header to see how components adapt. + + +

Content

Show some tasks... Toggle some text... @@ -234,6 +251,7 @@ export default { ); const Select = getElements({ + root: '#app-root', header: 'six-header', leftSidebar: 'six-sidebar[slot="left-sidebar"]', tasksButton: '#show-tasks', diff --git a/docs/examples/docs-demo-six-theme-switcher-0.vue b/docs/examples/docs-demo-six-theme-switcher-0.vue new file mode 100644 index 000000000..16ac93dc8 --- /dev/null +++ b/docs/examples/docs-demo-six-theme-switcher-0.vue @@ -0,0 +1,18 @@ + + + \ No newline at end of file diff --git a/docs/examples/docs-demo-six-theme-switcher-1.vue b/docs/examples/docs-demo-six-theme-switcher-1.vue new file mode 100644 index 000000000..1dfa4204b --- /dev/null +++ b/docs/examples/docs-demo-six-theme-switcher-1.vue @@ -0,0 +1,22 @@ + + + \ No newline at end of file diff --git a/docs/examples/docs-demo-six-theme-switcher-2.vue b/docs/examples/docs-demo-six-theme-switcher-2.vue new file mode 100644 index 000000000..fc9b34f9f --- /dev/null +++ b/docs/examples/docs-demo-six-theme-switcher-2.vue @@ -0,0 +1,18 @@ + + + \ No newline at end of file diff --git a/docs/examples/docs-demo-six-theme-switcher-3.vue b/docs/examples/docs-demo-six-theme-switcher-3.vue new file mode 100644 index 000000000..e99f65d02 --- /dev/null +++ b/docs/examples/docs-demo-six-theme-switcher-3.vue @@ -0,0 +1,18 @@ + + + \ No newline at end of file diff --git a/docs/examples/docs-demo-six-theme-switcher-4.vue b/docs/examples/docs-demo-six-theme-switcher-4.vue new file mode 100644 index 000000000..d7ac583b9 --- /dev/null +++ b/docs/examples/docs-demo-six-theme-switcher-4.vue @@ -0,0 +1,20 @@ + + + \ No newline at end of file diff --git a/docs/examples/docs-demo-six-theme-switcher-5.vue b/docs/examples/docs-demo-six-theme-switcher-5.vue new file mode 100644 index 000000000..c9233f980 --- /dev/null +++ b/docs/examples/docs-demo-six-theme-switcher-5.vue @@ -0,0 +1,36 @@ + + + \ No newline at end of file diff --git a/docs/guide/styling/colors.md b/docs/guide/styling/colors.md index 8ce901596..23bc9fc58 100644 --- a/docs/guide/styling/colors.md +++ b/docs/guide/styling/colors.md @@ -3,6 +3,10 @@ The Six Webcomponents library uses a comprehensive color system that includes brand colors, semantic status colors, and neutral tones. +The palette tokens documented on this page resolve to the same values in light and dark mode. Dark +mode works by remapping the semantic component tokens to different palette shades — see the +[Dark Mode guide](./dark-mode.md). + ## Brand Colors
@@ -101,11 +105,51 @@ status colors, and neutral tones.
+
+
+
900
+
#5f574f
+
+
+
+
800
+
#6f665d
+
+
+
+
700
+
#7e756c
+
+
+
+
600
+
#8e847b
+
+
+
+
500
+
#9e9389
+
+
+
+
400
+
#aea297
+
+
+
+
300
+
#beb1a6
+
200
#ada398
+
+
+
100
+
#d6d1cd
+
50
@@ -125,6 +169,21 @@ status colors, and neutral tones.
+
+
+
900
+
#1045a1
+
+
+
+
800
+
#1764c0
+
+
+
+
700
+
#1a75d2
+
600
@@ -136,9 +195,29 @@ status colors, and neutral tones.
#2196f3
-
-
Light
-
#a8d0f5
+
+
400
+
#42a4f5
+
+
+
+
300
+
#63b4f6
+
+
+
+
200
+
#90c9f9
+
+
+
+
100
+
#bbdefb
+
+
+
+
50
+
#e3f2fd
@@ -165,9 +244,44 @@ status colors, and neutral tones.
#de3919
-
-
Light
-
#f58c78
+
+
700
+
#ec411d
+
+
+
+
600
+
#fa4823
+
+
+
+
500
+
#ff4e27
+
+
+
+
400
+
#ff6b46
+
+
+
+
300
+
#ff8767
+
+
+
+
200
+
#ffa992
+
+
+
+
100
+
#ffcbbd
+
+
+
+
50
+
#fce9e7
@@ -183,6 +297,11 @@ status colors, and neutral tones.
+
+
+
900
+
#ea7719
+
800
@@ -194,9 +313,39 @@ status colors, and neutral tones.
#f2b72c
-
-
Light
-
#f9deb4
+
+
600
+
#f5ce33
+
+
+
+
500
+
#f5df36
+
+
+
+
400
+
#f7e454
+
+
+
+
300
+
#f9e973
+
+
+
+
200
+
#fbef9a
+
+
+
+
100
+
#fdf5c2
+
+
+
+
50
+
#fefce6
@@ -212,6 +361,21 @@ status colors, and neutral tones.
+
+
+
900
+
#008600
+
+
+
+
800
+
#09a800
+
+
+
+
700
+
#3abd00
+
600
@@ -223,9 +387,221 @@ status colors, and neutral tones.
#6ae300
-
-
Light
-
#aaff6c
+
+
400
+
#85e845
+
+
+
+
300
+
#a0ee6e
+
+
+
+
200
+
#bef39b
+
+
+
+
100
+
#d9f8c3
+
+
+
+
50
+
#f0fde7
+
+
+
+
+
+
+ + Marine + +
+ + --six-color-marine-{n} + +
+
+
+
+
900
+
#002c5f
+
+
+
+
800
+
#19416f
+
+
+
+
700
+
#33567e
+
+
+
+
600
+
#4c6b8f
+
+
+
+
500
+
#66809f
+
+
+
+
400
+
#7f95af
+
+
+
+
300
+
#99aabe
+
+
+
+
200
+
#b2bfcf
+
+
+
+
100
+
#ccd4df
+
+
+
+
50
+
#e5e9ef
+
+
+
+
+
+
+ + Horizon + +
+ + --six-color-horizon-{n} + +
+
+
+
+
900
+
#88c1e4
+
+
+
+
800
+
#94c7e7
+
+
+
+
700
+
#9fcde9
+
+
+
+
600
+
#abd3ec
+
+
+
+
500
+
#b7d9ee
+
+
+
+
400
+
#c3e0f1
+
+
+
+
300
+
#cfe6f4
+
+
+
+
200
+
#dbecf7
+
+
+
+
100
+
#e7f2f9
+
+
+
+
50
+
#f3f9fc
+
+
+
+
+
+
+ + Indigo + +
+ + --six-color-indigo-{n} + +
+
+
+
+
900
+
#5c1bb8
+
+
+
+
800
+
#6c32bf
+
+
+
+
700
+
#7d49c6
+
+
+
+
600
+
#8d5fcd
+
+
+
+
500
+
#9d76d4
+
+
+
+
400
+
#ae8ddc
+
+
+
+
300
+
#bea4e3
+
+
+
+
200
+
#cebbea
+
+
+
+
100
+
#ded1f1
+
+
+
+
50
+
#efe8f8
diff --git a/docs/guide/styling/dark-mode.md b/docs/guide/styling/dark-mode.md new file mode 100644 index 000000000..145e696f1 --- /dev/null +++ b/docs/guide/styling/dark-mode.md @@ -0,0 +1,156 @@ +# Dark Mode + +The SIX UI Library supports dark mode out of the box. All components automatically adapt their +appearance when dark mode is active — no component-level changes required. + +## Enabling dark mode + +### Option A — HTML attribute (recommended) + +Set the `data-six-theme` attribute on the root element: + +```html + +``` + +This is the preferred approach. It gives you explicit control and works regardless of the user's OS +setting. + +### Option B — System preference (automatic) + +If no `data-six-theme` attribute is set, the library automatically responds to the user's OS +preference via `@media (prefers-color-scheme: dark)`. No code changes needed — it just works. + +The attribute always takes priority. If `data-six-theme="light"` is set, the OS dark mode is +ignored. + +## How it works + +The dark theme is implemented in `dark-theme.css`, which is imported between `colors.css` and +`typography.css` in `base.css`: + +```css +@import 'base/colors.css'; +@import 'base/dark-theme.css'; +@import 'base/typography.css'; +``` + +The palette tokens (`--six-color-web-rock-900`, `--six-color-danger-500`, etc.) stay the same in +both themes. Dark mode works by overriding the semantic component tokens to point to different +palette shades that work better on dark backgrounds. + +## Tokens overridden in dark mode + +### Inputs + +| Token | Light | Dark | +| --------------------------------------- | -------------- | -------------- | +| `--six-input-background-color` | `white` | `web-rock-800` | +| `--six-input-background-color-hover` | `white` | `web-rock-700` | +| `--six-input-background-color-disabled` | `web-rock-100` | `web-rock-900` | +| `--six-input-border-color` | `web-rock-400` | `web-rock-600` | +| `--six-input-border-color-hover` | `web-rock-600` | `web-rock-400` | +| `--six-input-border-color-focus` | `action-600` | `action-400` | +| `--six-input-border-color-danger` | `danger-800` | `danger-500` | +| `--six-input-color` | `web-rock-900` | `web-rock-50` | +| `--six-input-color-disabled` | `web-rock-600` | `web-rock-500` | +| `--six-input-icon-color` | `web-rock-900` | `web-rock-100` | +| `--six-input-label-color` | `web-rock-900` | `web-rock-100` | +| `--six-input-help-text-color` | `web-rock-600` | `web-rock-400` | + +### Panels & overlays + +| Token | Light | Dark | +| -------------------------------- | -------------- | -------------- | +| `--six-panel-background-color` | `white` | `web-rock-800` | +| `--six-panel-border-color` | `clay-50` | `web-rock-700` | +| `--six-overlay-background-color` | `web-rock-900` | `web-rock-900` | +| `--six-tooltip-background-color` | `web-rock-900` | `web-rock-200` | +| `--six-tooltip-color` | `white` | `web-rock-900` | + +### Navigation & layout + +| Token | Light | Dark | +| -------------------------------- | -------------- | -------------- | +| `--six-header-background-color` | `white` | `web-rock-900` | +| `--six-header-border-color` | `web-rock-300` | `web-rock-700` | +| `--six-sidebar-background-color` | `white` | `web-rock-900` | +| `--six-sidebar-color` | `web-rock-900` | `web-rock-100` | +| `--six-drawer-background-color` | `clay-50` | `web-rock-900` | +| `--six-drawer-color` | `web-rock-900` | `web-rock-100` | +| `--six-footer-background-color` | `white` | `web-rock-900` | + +### Other components + +| Token | Light | Dark | +| ---------------------------------- | -------------- | -------------- | +| `--six-avatar-background-color` | `web-rock-300` | `web-rock-700` | +| `--six-details-color` | `web-rock-900` | `web-rock-100` | +| `--six-menu-item-background-color` | `clay-50` | `web-rock-800` | +| `--six-menu-divider-color` | `clay-50` | `web-rock-700` | +| `--six-progress-indicator-color` | `danger-800` | `danger-600` | +| `--six-progress-label-color` | `white` | `web-rock-50` | +| `--six-selection-control-color` | `action-500` | `action-400` | +| `--six-search-color` | `action-600` | `action-400` | +| `--six-rating-color-active` | `success-600` | `success-500` | +| `--six-focus-ring-color` | `action-600` | `action-400` | + +### Shadows + +Shadow intensity is increased in dark mode for better visibility against dark backgrounds: + +| Token | Light | Dark | +| --------------------- | -------------- | ------------- | +| `--six-shadow-small` | `0.1` opacity | `0.3` opacity | +| `--six-shadow-medium` | `0.1` opacity | `0.3` opacity | +| `--six-shadow-large` | `0.25` opacity | `0.5` opacity | + +### Tabs + +| Token | Light | Dark | +| ------------------------------- | -------------- | -------------- | +| `--six-tab-color` | `web-rock-900` | `web-rock-100` | +| `--six-tab-color-active` | `web-rock-900` | `web-rock-50` | +| `--six-tab-color-hover` | `web-rock-700` | `web-rock-200` | +| `--six-tab-color-disabled` | `web-rock-400` | `web-rock-600` | +| `--six-tab-border-color` | `white` | `web-rock-900` | +| `--six-tab-border-color-active` | `web-rock-900` | `web-rock-50` | + +## Toggling at runtime + +```js +// Enable dark theme +document.documentElement.setAttribute('data-six-theme', 'dark'); + +// Enable light theme +document.documentElement.setAttribute('data-six-theme', 'light'); + +// Follow system preference (remove override) +document.documentElement.removeAttribute('data-six-theme'); +``` + +Alternatively, use [`six-root`](/components/six-root#theme-support) with the `theme` property +(`light`, `dark`, or `auto`) together with `six-theme-switcher` — `six-root` manages the +`data-six-theme` attribute for you and persists the user's choice. + +## Using dark mode in custom components + +When building custom components, always use the semantic tokens (`--six-input-*`, `--six-panel-*`, +`--six-header-*`, etc.) instead of hardcoding palette values. These tokens automatically resolve to +the correct shade for the active theme. + +If you need to reference the palette directly, be aware that palette tokens like +`--six-color-web-rock-900` always resolve to the same hex value (`#262626`) in both themes. Choose +shades that provide sufficient contrast on both light and dark backgrounds, or use the semantic +tokens instead. + +Example: + +```css +.my-component { + /* Good — adapts automatically */ + background: var(--six-panel-background-color); + color: var(--six-input-color); + border: 1px solid var(--six-input-border-color); +} +``` diff --git a/docs/guide/styling/shadows.md b/docs/guide/styling/shadows.md index 021588a08..5856d688e 100644 --- a/docs/guide/styling/shadows.md +++ b/docs/guide/styling/shadows.md @@ -10,6 +10,12 @@ interface. | `--six-shadow-medium-top` | 0 -10px 15px -3px rgb(0 0 0 / 0.1), 0 -4px 6px -4px rgb(0 0 0 / 0.1) |
| | `--six-shadow-large` | 0 25px 50px -12px rgb(0 0 0 / 0.25) |
| +## Dark Mode + +In [dark mode](./dark-mode.md) the shadow tokens are overridden with higher opacities for better +visibility against dark backgrounds: `--six-shadow-small` and `--six-shadow-medium` use `0.3` +opacity (instead of `0.1`), and `--six-shadow-large` uses `0.5` (instead of `0.25`). + ## Example Usage ```css diff --git a/examples/angular/src/app/header/header.html b/examples/angular/src/app/header/header.html index e03940c8e..d914152b2 100644 --- a/examples/angular/src/app/header/header.html +++ b/examples/angular/src/app/header/header.html @@ -29,6 +29,10 @@ + + + + diff --git a/examples/react/src/components/header/header.tsx b/examples/react/src/components/header/header.tsx index e1277d245..991e6be3f 100644 --- a/examples/react/src/components/header/header.tsx +++ b/examples/react/src/components/header/header.tsx @@ -12,6 +12,7 @@ import { SixMenu, SixMenuItem, SixSearchField, + SixThemeSwitcher, } from '@six-group/ui-library-react'; import styles from './header.module.css'; import { SixLanguageSwitcherCustomEvent } from '@six-group/ui-library'; @@ -69,6 +70,10 @@ export function Header({ leftSidebar, toggleRightSidebar }: HeaderProps) { + + + + {currentApp} diff --git a/examples/react/src/components/rightSidebar/rightSidebar.module.css b/examples/react/src/components/rightSidebar/rightSidebar.module.css index cd5868256..9b8b73088 100644 --- a/examples/react/src/components/rightSidebar/rightSidebar.module.css +++ b/examples/react/src/components/rightSidebar/rightSidebar.module.css @@ -1,8 +1,3 @@ -.right-sidebar { - background: var(--six-color-web-rock-100); -} - .task-card { width: 100%; - background-color: var(--six-color-white); } diff --git a/examples/react/src/routes/form/form.module.css b/examples/react/src/routes/form/form.module.css index f4b4dcccb..011d507ce 100644 --- a/examples/react/src/routes/form/form.module.css +++ b/examples/react/src/routes/form/form.module.css @@ -1,5 +1,4 @@ .pre { - background-color: var(--six-color-web-rock-100); padding: var(--six-spacing-medium); } diff --git a/examples/react/src/routes/tabGroup/tabGroup.module.css b/examples/react/src/routes/tabGroup/tabGroup.module.css index 898d1015d..e69de29bb 100644 --- a/examples/react/src/routes/tabGroup/tabGroup.module.css +++ b/examples/react/src/routes/tabGroup/tabGroup.module.css @@ -1,3 +0,0 @@ -.tab-panel { - background-color: var(--six-color-web-rock-100); -} diff --git a/examples/vue/src/App.vue b/examples/vue/src/App.vue index aea3efee0..61eeef7fc 100644 --- a/examples/vue/src/App.vue +++ b/examples/vue/src/App.vue @@ -46,6 +46,10 @@ const searchActive = ref(false); + + + + diff --git a/libraries/ui-library-angular/src/lib/stencil-generated/components.ts b/libraries/ui-library-angular/src/lib/stencil-generated/components.ts index 5eb6897e7..54392a485 100644 --- a/libraries/ui-library-angular/src/lib/stencil-generated/components.ts +++ b/libraries/ui-library-angular/src/lib/stencil-generated/components.ts @@ -17,7 +17,7 @@ import { Components } from '@six-group/ui-library'; template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property inputs: ['closable', 'duration', 'open', 'type'], - outputs: ['sixAlertShow:six-alert-show', 'sixAlertAfterShow:six-alert-after-show', 'sixAlertHide:six-alert-hide', 'sixAlertAfterHide:six-alert-after-hide'], + outputs: ['six-alert-show', 'six-alert-after-show', 'six-alert-hide', 'six-alert-after-hide'], standalone: false }) export class SixAlert { @@ -157,7 +157,7 @@ export declare interface SixBreadcrumbsItem extends Components.SixBreadcrumbsIte template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property inputs: ['caret', 'circle', 'disabled', 'download', 'href', 'loading', 'name', 'pill', 'reset', 'size', 'submit', 'target', 'type', 'value'], - outputs: ['sixButtonBlur:six-button-blur', 'sixButtonFocus:six-button-focus'], + outputs: ['six-button-blur', 'six-button-focus'], standalone: false }) export class SixButton { @@ -217,7 +217,7 @@ export declare interface SixCard extends Components.SixCard {} template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property inputs: ['checked', 'disabled', 'errorText', 'errorTextCount', 'indeterminate', 'invalid', 'label', 'name', 'required', 'value'], - outputs: ['sixCheckboxBlur:six-checkbox-blur', 'sixCheckboxChange:six-checkbox-change', 'sixCheckboxFocus:six-checkbox-focus'], + outputs: ['six-checkbox-blur', 'six-checkbox-change', 'six-checkbox-focus'], standalone: false }) export class SixCheckbox { @@ -260,7 +260,7 @@ export declare interface SixCheckbox extends Components.SixCheckbox { template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property inputs: ['allowedDates', 'clearable', 'dateFormat', 'disabled', 'errorText', 'errorTextCount', 'helpText', 'invalid', 'label', 'language', 'max', 'min', 'name', 'placeholder', 'readonly', 'required', 'size', 'value'], - outputs: ['sixChange:six-change', 'sixBlur:six-blur'], + outputs: ['six-change', 'six-blur'], standalone: false }) export class SixDate { @@ -298,7 +298,7 @@ Does not contain event details. template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property inputs: ['allowedDates', 'clearable', 'closeOnSelect', 'containingElement', 'dateFormat', 'debounce', 'defaultDate', 'disabled', 'errorText', 'errorTextCount', 'hoist', 'iconPosition', 'inline', 'invalid', 'label', 'locale', 'max', 'min', 'name', 'open', 'placeholder', 'placement', 'readonly', 'required', 'size', 'type', 'value'], - outputs: ['sixDatepickerSelect:six-datepicker-select', 'sixDatepickerClear:six-datepicker-clear', 'sixDatepickerBlur:six-datepicker-blur'], + outputs: ['six-datepicker-select', 'six-datepicker-clear', 'six-datepicker-blur'], standalone: false }) export class SixDatepicker { @@ -342,7 +342,7 @@ export declare interface SixDatepicker extends Components.SixDatepicker { template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property inputs: ['disabled', 'hasContent', 'inline', 'open', 'selectableEmpty', 'summary', 'summaryIcon', 'summaryIconSize'], - outputs: ['sixDetailsShow:six-details-show', 'sixDetailsAfterShow:six-details-after-show', 'sixDetailsHide:six-details-hide', 'sixDetailsAfterHide:six-details-after-hide'], + outputs: ['six-details-show', 'six-details-after-show', 'six-details-hide', 'six-details-after-hide'], standalone: false }) export class SixDetails { @@ -390,7 +390,7 @@ export declare interface SixDetails extends Components.SixDetails { template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property inputs: ['label', 'noHeader', 'open'], - outputs: ['sixDialogShow:six-dialog-show', 'sixDialogAfterShow:six-dialog-after-show', 'sixDialogHide:six-dialog-hide', 'sixDialogAfterHide:six-dialog-after-hide', 'sixDialogInitialFocus:six-dialog-initial-focus', 'sixDialogRequestClose:six-dialog-request-close'], + outputs: ['six-dialog-show', 'six-dialog-after-show', 'six-dialog-hide', 'six-dialog-after-hide', 'six-dialog-initial-focus', 'six-dialog-request-close'], standalone: false }) export class SixDialog { @@ -452,7 +452,7 @@ the drawer will result in destructive behavior such as data loss. template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property inputs: ['contained', 'label', 'noHeader', 'open', 'placement'], - outputs: ['sixDrawerShow:six-drawer-show', 'sixDrawerAfterShow:six-drawer-after-show', 'sixDrawerHide:six-drawer-hide', 'sixDrawerAfterHide:six-drawer-after-hide', 'sixDrawerInitialFocus:six-drawer-initial-focus', 'sixDrawerRequestClose:six-drawer-request-close'], + outputs: ['six-drawer-show', 'six-drawer-after-show', 'six-drawer-hide', 'six-drawer-after-hide', 'six-drawer-initial-focus', 'six-drawer-request-close'], standalone: false }) export class SixDrawer { @@ -514,7 +514,7 @@ the drawer will result in destructive behavior such as data loss. template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property inputs: ['asyncFilter', 'autofocusFilter', 'closeOnSelect', 'containingElement', 'disableHideOnEnterAndSpace', 'disableTypeToSelect', 'distance', 'filter', 'filterDebounce', 'filterPlaceholder', 'hoist', 'matchTriggerWidth', 'noScroll', 'open', 'options', 'placement', 'skidding', 'virtualScroll'], - outputs: ['sixDropdownShow:six-dropdown-show', 'sixDropdownAfterShow:six-dropdown-after-show', 'sixDropdownHide:six-dropdown-hide', 'sixDropdownAfterHide:six-dropdown-after-hide', 'sixDropdownAutoFilterFired:six-dropdown-auto-filter-fired', 'sixAsyncFilterFired:six-async-filter-fired', 'sixDropdownScroll:six-dropdown-scroll'], + outputs: ['six-dropdown-show', 'six-dropdown-after-show', 'six-dropdown-hide', 'six-dropdown-after-hide', 'six-dropdown-auto-filter-fired', 'six-async-filter-fired', 'six-dropdown-scroll'], standalone: false }) export class SixDropdown { @@ -646,7 +646,7 @@ export declare interface SixFileList extends Components.SixFileList {} template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property inputs: ['date', 'identifier', 'name', 'nodelete', 'nodownload', 'size'], - outputs: ['sixFileListItemDownload:six-file-list-item-download', 'sixFileListItemRemove:six-file-list-item-remove'], + outputs: ['six-file-list-item-download', 'six-file-list-item-remove'], standalone: false }) export class SixFileListItem { @@ -684,7 +684,7 @@ export declare interface SixFileListItem extends Components.SixFileListItem { template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property inputs: ['accept', 'compact', 'disabled', 'errorText', 'invalid', 'label', 'maxFileSize', 'multiple', 'uploading'], - outputs: ['sixFileUploadSuccess:six-file-upload-success', 'sixFileUploadFailure:six-file-upload-failure'], + outputs: ['six-file-upload-success', 'six-file-upload-failure'], standalone: false }) export class SixFileUpload { @@ -906,7 +906,7 @@ export declare interface SixIconButton extends Components.SixIconButton {} template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property inputs: ['autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearable', 'disabled', 'dropdownSearch', 'errorText', 'errorTextCount', 'helpText', 'inputmode', 'invalid', 'label', 'line', 'max', 'maxlength', 'min', 'minlength', 'name', 'pattern', 'pill', 'placeholder', 'readonly', 'required', 'size', 'spellcheck', 'step', 'togglePassword', 'type', 'value'], - outputs: ['sixInputChange:six-input-change', 'sixInputClear:six-input-clear', 'sixInputInput:six-input-input', 'sixInputFocus:six-input-focus', 'sixInputBlur:six-input-blur'], + outputs: ['six-input-change', 'six-input-clear', 'six-input-input', 'six-input-focus', 'six-input-blur'], standalone: false }) export class SixInput { @@ -958,7 +958,7 @@ export declare interface SixInput extends Components.SixInput { template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property inputs: ['debounce', 'interval', 'items', 'max', 'min', 'padded', 'paddingChar', 'paddingDirection', 'paddingLength', 'roundtrip', 'step', 'timeout', 'type', 'value'], - outputs: ['sixItemPickerChange:six-item-picker-change', 'sixItemPickerChangeDebounced:six-item-picker-change-debounced'], + outputs: ['six-item-picker-change', 'six-item-picker-change-debounced'], standalone: false }) export class SixItemPicker { @@ -995,7 +995,7 @@ export declare interface SixItemPicker extends Components.SixItemPicker { template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property inputs: ['languages', 'selected'], - outputs: ['sixLanguageSwitcherChange:six-language-switcher-change'], + outputs: ['six-language-switcher-change'], standalone: false }) export class SixLanguageSwitcher { @@ -1097,7 +1097,7 @@ export declare interface SixMainContainer extends Components.SixMainContainer {} template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property inputs: ['disableKeyboardHandling', 'itemSize', 'items', 'itemsShown', 'removeBoxShadow', 'scrollingDebounce', 'virtualScroll'], - outputs: ['sixMenuItemSelected:six-menu-item-selected'], + outputs: ['six-menu-item-selected'], standalone: false }) export class SixMenu { @@ -1197,7 +1197,7 @@ export declare interface SixMenuLabel extends Components.SixMenuLabel {} template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property inputs: ['clamp', 'currentPage', 'disabled', 'length', 'resultsPerPage', 'resultsPerPageOptions', { name: 'totalPages', required: true }, { name: 'totalResults', required: true }], - outputs: ['sixPaginatorResultsPerPageChanged:six-paginator-results-per-page-changed', 'sixPaginatorPageChanged:six-paginator-page-changed'], + outputs: ['six-paginator-results-per-page-changed', 'six-paginator-page-changed'], standalone: false }) export class SixPaginator { @@ -1305,7 +1305,7 @@ export declare interface SixProgressRing extends Components.SixProgressRing {} template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property inputs: ['checked', 'disabled', 'invalid', 'name', 'value'], - outputs: ['sixRadioBlur:six-radio-blur', 'sixRadioChange:six-radio-change', 'sixRadioFocus:six-radio-focus'], + outputs: ['six-radio-blur', 'six-radio-change', 'six-radio-focus'], standalone: false }) export class SixRadio { @@ -1348,7 +1348,7 @@ export declare interface SixRadio extends Components.SixRadio { template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property inputs: ['disabled', 'errorText', 'errorTextCount', 'helpText', 'invalid', 'label', 'max', 'min', 'name', 'required', 'step', 'tooltip', 'tooltipFormatter', 'value'], - outputs: ['sixRangeChange:six-range-change', 'sixRangeBlur:six-range-blur', 'sixRangeFocus:six-range-focus'], + outputs: ['six-range-change', 'six-range-blur', 'six-range-focus'], standalone: false }) export class SixRange { @@ -1390,7 +1390,7 @@ export declare interface SixRange extends Components.SixRange { template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property inputs: ['disabled', 'errorText', 'errorTextCount', 'helpText', 'invalid', 'label', 'max', 'name', 'readonly', 'required', 'size', 'value'], - outputs: ['sixRatingBlur:six-rating-blur', 'sixRatingChange:six-rating-change', 'sixRatingFocus:six-rating-focus'], + outputs: ['six-rating-blur', 'six-rating-change', 'six-rating-focus'], standalone: false }) export class SixRating { @@ -1424,14 +1424,15 @@ export declare interface SixRating extends Components.SixRating { @ProxyCmp({ - inputs: ['padded', 'stage', 'version'] + inputs: ['padded', 'stage', 'theme', 'version'], + methods: ['setTheme', 'getTheme', 'toggleTheme'] }) @Component({ selector: 'six-root', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['padded', 'stage', 'version'], + inputs: ['padded', 'stage', 'theme', 'version'], standalone: false }) export class SixRoot { @@ -1455,7 +1456,7 @@ export declare interface SixRoot extends Components.SixRoot {} template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property inputs: ['clearable', 'debounce', 'disabled', 'placeholder', 'value'], - outputs: ['sixSearchFieldChange:six-search-field-change'], + outputs: ['six-search-field-change'], standalone: false }) export class SixSearchField { @@ -1488,7 +1489,7 @@ export declare interface SixSearchField extends Components.SixSearchField { template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property inputs: ['asyncFilter', 'autocomplete', 'clearable', 'disabled', 'errorText', 'errorTextCount', 'filter', 'filterDebounce', 'filterPlaceholder', 'helpText', 'hoist', 'inputDebounce', 'invalid', 'label', 'line', 'multiple', 'name', 'options', 'pill', 'placeholder', 'required', 'selectAllButton', 'selectAllText', 'size', 'value', 'virtualScroll'], - outputs: ['sixSelectChange:six-select-change', 'sixSelectFocus:six-select-focus', 'sixSelectBlur:six-select-blur'], + outputs: ['six-select-change', 'six-select-focus', 'six-select-blur'], standalone: false }) export class SixSelect { @@ -1532,7 +1533,7 @@ export declare interface SixSelect extends Components.SixSelect { template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property inputs: ['open', 'position', 'toggled', 'width'], - outputs: ['sixSidebarShow:six-sidebar-show', 'sixSidebarAfterShow:six-sidebar-after-show', 'sixSidebarHide:six-sidebar-hide', 'sixSidebarAfterHide:six-sidebar-after-hide', 'sixSidebarInitialFocus:six-sidebar-initial-focus'], + outputs: ['six-sidebar-show', 'six-sidebar-after-show', 'six-sidebar-hide', 'six-sidebar-after-hide', 'six-sidebar-initial-focus'], standalone: false }) export class SixSidebar { @@ -1678,7 +1679,7 @@ export declare interface SixStageIndicator extends Components.SixStageIndicator template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property inputs: ['checked', 'disabled', 'errorText', 'errorTextCount', 'invalid', 'label', 'name', 'required', 'value'], - outputs: ['sixSwitchBlur:six-switch-blur', 'sixSwitchChange:six-switch-change', 'sixSwitchFocus:six-switch-focus'], + outputs: ['six-switch-blur', 'six-switch-change', 'six-switch-focus'], standalone: false }) export class SixSwitch { @@ -1721,7 +1722,7 @@ export declare interface SixSwitch extends Components.SixSwitch { template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property inputs: ['active', 'closable', 'disabled', 'hoverContent', 'panel'], - outputs: ['sixTabClose:six-tab-close'], + outputs: ['six-tab-close'], standalone: false }) export class SixTab { @@ -1754,7 +1755,7 @@ export declare interface SixTab extends Components.SixTab { template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property inputs: ['noScrollControls', 'placement'], - outputs: ['sixTabShow:six-tab-show', 'sixTabHide:six-tab-hide'], + outputs: ['six-tab-show', 'six-tab-hide'], standalone: false }) export class SixTabGroup { @@ -1815,7 +1816,7 @@ export declare interface SixTabPanel extends Components.SixTabPanel {} template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property inputs: ['clearable', 'pill', 'size', 'type'], - outputs: ['sixTagClear:six-tag-clear'], + outputs: ['six-tag-clear'], standalone: false }) export class SixTag { @@ -1848,7 +1849,7 @@ export declare interface SixTag extends Components.SixTag { template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property inputs: ['autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'disabled', 'errorText', 'errorTextCount', 'helpText', 'inputmode', 'invalid', 'label', 'maxlength', 'minlength', 'name', 'placeholder', 'readonly', 'required', 'resize', 'rows', 'size', 'spellcheck', 'value'], - outputs: ['sixTextareaChange:six-textarea-change', 'sixTextareaInput:six-textarea-input', 'sixTextareaFocus:six-textarea-focus', 'sixTextareaBlur:six-textarea-blur'], + outputs: ['six-textarea-change', 'six-textarea-input', 'six-textarea-focus', 'six-textarea-blur'], standalone: false }) export class SixTextarea { @@ -1886,6 +1887,38 @@ export declare interface SixTextarea extends Components.SixTextarea { } +@ProxyCmp({ + inputs: ['disabled', 'label', 'size'] +}) +@Component({ + selector: 'six-theme-switcher', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property + inputs: ['disabled', 'label', 'size'], + outputs: ['six-theme-switcher-change'], + standalone: false +}) +export class SixThemeSwitcher { + protected el: HTMLSixThemeSwitcherElement; + @Output() sixThemeSwitcherChange = new EventEmitter>(); + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + + +import type { EmptyPayload as ISixThemeSwitcherEmptyPayload } from '@six-group/ui-library'; + +export declare interface SixThemeSwitcher extends Components.SixThemeSwitcher { + /** + * Emitted when the theme is changed. + */ + 'six-theme-switcher-change': EventEmitter>; +} + + @ProxyCmp({ inputs: ['closeable', 'disableTooltip', 'disabled', 'elevated', 'iconName', 'label', 'library', 'size'], methods: ['hide', 'show'] @@ -1896,7 +1929,7 @@ export declare interface SixTextarea extends Components.SixTextarea { template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property inputs: ['closeable', 'disableTooltip', 'disabled', 'elevated', 'iconName', 'label', 'library', 'size'], - outputs: ['sixTileClosed:six-tile-closed', 'sixTileSelected:six-tile-selected'], + outputs: ['six-tile-closed', 'six-tile-selected'], standalone: false }) export class SixTile { @@ -1934,7 +1967,7 @@ export declare interface SixTile extends Components.SixTile { template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property inputs: ['clearable', 'debounce', 'defaultTime', 'disabled', 'errorText', 'errorTextCount', 'format', 'hoist', 'iconPosition', 'inline', 'interval', 'invalid', 'label', 'name', 'open', 'placeholder', 'placement', 'readonly', 'required', 'separator', 'size', 'timeout', 'value'], - outputs: ['sixTimepickerChange:six-timepicker-change', 'sixTimepickerChangeDebounced:six-timepicker-change-debounced', 'sixTimepickerClear:six-timepicker-clear'], + outputs: ['six-timepicker-change', 'six-timepicker-change-debounced', 'six-timepicker-clear'], standalone: false }) export class SixTimepicker { @@ -1978,7 +2011,7 @@ export declare interface SixTimepicker extends Components.SixTimepicker { template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property inputs: ['content', 'disabled', 'distance', 'open', 'placement', 'skidding', 'trigger'], - outputs: ['sixTooltipShow:six-tooltip-show', 'sixTooltipAfterShow:six-tooltip-after-show', 'sixTooltipHide:six-tooltip-hide', 'sixTooltipAfterHide:six-tooltip-after-hide'], + outputs: ['six-tooltip-show', 'six-tooltip-after-show', 'six-tooltip-hide', 'six-tooltip-after-hide'], standalone: false }) export class SixTooltip { diff --git a/libraries/ui-library-angular/src/lib/stencil-generated/index.ts b/libraries/ui-library-angular/src/lib/stencil-generated/index.ts index 49f8ee234..8fc3f26fa 100644 --- a/libraries/ui-library-angular/src/lib/stencil-generated/index.ts +++ b/libraries/ui-library-angular/src/lib/stencil-generated/index.ts @@ -60,6 +60,7 @@ export const DIRECTIVES = [ d.SixTabPanel, d.SixTag, d.SixTextarea, + d.SixThemeSwitcher, d.SixTile, d.SixTimepicker, d.SixTooltip diff --git a/libraries/ui-library-react/src/lib/stencil-generated/components.ts b/libraries/ui-library-react/src/lib/stencil-generated/components.ts index f6f4ad032..50cdd829a 100644 --- a/libraries/ui-library-react/src/lib/stencil-generated/components.ts +++ b/libraries/ui-library-react/src/lib/stencil-generated/components.ts @@ -7,7 +7,7 @@ /* eslint-disable */ -import { type EmptyPayload, type SixAlertCustomEvent, type SixButtonCustomEvent, type SixCheckboxCustomEvent, type SixDateCustomEvent, type SixDatepickerCustomEvent, type SixDatepickerSelectPayload, type SixDetailsCustomEvent, type SixDialogCustomEvent, type SixDialogRequestClose, type SixDrawerCustomEvent, type SixDrawerRequestClose, type SixDropdownAsyncFilterPayload, type SixDropdownAutoFilterPayload, type SixDropdownCustomEvent, type SixDropdownScrollPayload, type SixFileListDownloadPayload, type SixFileListItemCustomEvent, type SixFileListRemovePayload, type SixFileUploadCustomEvent, type SixFileUploadFailurePayload, type SixFileUploadSuccessPayload, type SixInputCustomEvent, type SixItemPickerChangePayload, type SixItemPickerCustomEvent, type SixLanguageSwitcherChangePayload, type SixLanguageSwitcherCustomEvent, type SixMenuCustomEvent, type SixMenuItemSelectedPayload, type SixPaginatorCustomEvent, type SixPaginatorPageChangedPayload, type SixPaginatorResultsPerPageChangedPayload, type SixRadioCustomEvent, type SixRangeCustomEvent, type SixRatingCustomEvent, type SixSearchFieldChangePayload, type SixSearchFieldCustomEvent, type SixSelectChangePayload, type SixSelectCustomEvent, type SixSidebarCustomEvent, type SixSwitchCustomEvent, type SixTabCustomEvent, type SixTabGroupCustomEvent, type SixTabHidePayload, type SixTabShowPayload, type SixTagCustomEvent, type SixTextareaCustomEvent, type SixTileCustomEvent, type SixTimepickerChange, type SixTimepickerCustomEvent, type SixTooltipCustomEvent } from "@six-group/ui-library"; +import { type EmptyPayload, type SixAlertCustomEvent, type SixButtonCustomEvent, type SixCheckboxCustomEvent, type SixDateCustomEvent, type SixDatepickerCustomEvent, type SixDatepickerSelectPayload, type SixDetailsCustomEvent, type SixDialogCustomEvent, type SixDialogRequestClose, type SixDrawerCustomEvent, type SixDrawerRequestClose, type SixDropdownAsyncFilterPayload, type SixDropdownAutoFilterPayload, type SixDropdownCustomEvent, type SixDropdownScrollPayload, type SixFileListDownloadPayload, type SixFileListItemCustomEvent, type SixFileListRemovePayload, type SixFileUploadCustomEvent, type SixFileUploadFailurePayload, type SixFileUploadSuccessPayload, type SixInputCustomEvent, type SixItemPickerChangePayload, type SixItemPickerCustomEvent, type SixLanguageSwitcherChangePayload, type SixLanguageSwitcherCustomEvent, type SixMenuCustomEvent, type SixMenuItemSelectedPayload, type SixPaginatorCustomEvent, type SixPaginatorPageChangedPayload, type SixPaginatorResultsPerPageChangedPayload, type SixRadioCustomEvent, type SixRangeCustomEvent, type SixRatingCustomEvent, type SixSearchFieldChangePayload, type SixSearchFieldCustomEvent, type SixSelectChangePayload, type SixSelectCustomEvent, type SixSidebarCustomEvent, type SixSwitchCustomEvent, type SixTabCustomEvent, type SixTabGroupCustomEvent, type SixTabHidePayload, type SixTabShowPayload, type SixTagCustomEvent, type SixTextareaCustomEvent, type SixThemeSwitcherCustomEvent, type SixTileCustomEvent, type SixTimepickerChange, type SixTimepickerCustomEvent, type SixTooltipCustomEvent } from "@six-group/ui-library"; import { SixAlert as SixAlertElement, defineCustomElement as defineSixAlert } from "@six-group/ui-library/dist/components/six-alert.js"; import { SixAvatar as SixAvatarElement, defineCustomElement as defineSixAvatar } from "@six-group/ui-library/dist/components/six-avatar.js"; import { SixBadge as SixBadgeElement, defineCustomElement as defineSixBadge } from "@six-group/ui-library/dist/components/six-badge.js"; @@ -66,6 +66,7 @@ import { SixTabPanel as SixTabPanelElement, defineCustomElement as defineSixTabP import { SixTab as SixTabElement, defineCustomElement as defineSixTab } from "@six-group/ui-library/dist/components/six-tab.js"; import { SixTag as SixTagElement, defineCustomElement as defineSixTag } from "@six-group/ui-library/dist/components/six-tag.js"; import { SixTextarea as SixTextareaElement, defineCustomElement as defineSixTextarea } from "@six-group/ui-library/dist/components/six-textarea.js"; +import { SixThemeSwitcher as SixThemeSwitcherElement, defineCustomElement as defineSixThemeSwitcher } from "@six-group/ui-library/dist/components/six-theme-switcher.js"; import { SixTile as SixTileElement, defineCustomElement as defineSixTile } from "@six-group/ui-library/dist/components/six-tile.js"; import { SixTimepicker as SixTimepickerElement, defineCustomElement as defineSixTimepicker } from "@six-group/ui-library/dist/components/six-timepicker.js"; import { SixTooltip as SixTooltipElement, defineCustomElement as defineSixTooltip } from "@six-group/ui-library/dist/components/six-tooltip.js"; @@ -907,6 +908,17 @@ export const SixTextarea: StencilReactComponent> }; + +export const SixThemeSwitcher: StencilReactComponent = /*@__PURE__*/ createComponent({ + tagName: 'six-theme-switcher', + elementClass: SixThemeSwitcherElement, + // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project. + react: React, + events: { onSixThemeSwitcherChange: 'six-theme-switcher-change' } as SixThemeSwitcherEvents, + defineCustomElement: defineSixThemeSwitcher +}); + export type SixTileEvents = { onSixTileClosed: EventName>, onSixTileSelected: EventName> diff --git a/libraries/ui-library-vue/src/lib/stencil-generated/components.ts b/libraries/ui-library-vue/src/lib/stencil-generated/components.ts index 4a1bb0ccc..d388255d2 100644 --- a/libraries/ui-library-vue/src/lib/stencil-generated/components.ts +++ b/libraries/ui-library-vue/src/lib/stencil-generated/components.ts @@ -602,7 +602,8 @@ export const SixRating: StencilVueComponent = /*@__PURE__*/ defin export const SixRoot: StencilVueComponent = /*@__PURE__*/ defineContainer('six-root', undefined, [ 'padded', 'stage', - 'version' + 'version', + 'theme' ]); @@ -802,6 +803,16 @@ export const SixTextarea: StencilVueComponent = /*@__PURE__*/ defineContainer('six-theme-switcher', undefined, [ + 'size', + 'disabled', + 'label', + 'six-theme-switcher-change' +], [ + 'six-theme-switcher-change' +]); + + export const SixTile: StencilVueComponent = /*@__PURE__*/ defineContainer('six-tile', undefined, [ 'label', 'iconName', diff --git a/libraries/ui-library/src/components.d.ts b/libraries/ui-library/src/components.d.ts index 7417c3b9e..a74d26d99 100644 --- a/libraries/ui-library/src/components.d.ts +++ b/libraries/ui-library/src/components.d.ts @@ -24,6 +24,7 @@ import { SixLanguageSwitcherChangePayload, SixLanguageSwitcherInput } from "./co import { SixMenuItemData as SixMenuItemData1, SixMenuItemSelectedPayload } from "./components/six-menu/six-menu"; import { SixPaginatorPageChangedPayload, SixPaginatorResultsPerPageChangedPayload } from "./components/six-paginator/six-paginator"; import { StageType } from "./components/six-stage-indicator/six-stage-indicator"; +import { SixTheme } from "./components/six-root/six-root"; import { SixSearchFieldChangePayload } from "./components/six-search-field/six-search-field"; import { SixSelectChangePayload } from "./components/six-select/six-select"; import { StageType as StageType1 } from "./components/six-stage-indicator/six-stage-indicator"; @@ -49,6 +50,7 @@ export { SixLanguageSwitcherChangePayload, SixLanguageSwitcherInput } from "./co export { SixMenuItemData as SixMenuItemData1, SixMenuItemSelectedPayload } from "./components/six-menu/six-menu"; export { SixPaginatorPageChangedPayload, SixPaginatorResultsPerPageChangedPayload } from "./components/six-paginator/six-paginator"; export { StageType } from "./components/six-stage-indicator/six-stage-indicator"; +export { SixTheme } from "./components/six-root/six-root"; export { SixSearchFieldChangePayload } from "./components/six-search-field/six-search-field"; export { SixSelectChangePayload } from "./components/six-select/six-select"; export { StageType as StageType1 } from "./components/six-stage-indicator/six-stage-indicator"; @@ -1814,16 +1816,33 @@ export namespace Components { * @status stable */ interface SixRoot { + /** + * Gets the current theme and applied theme. + */ + "getTheme": () => Promise<{ theme: SixTheme; appliedTheme: "light" | "dark"; }>; /** * Defines whether the content section should be padded * @default true */ "padded": boolean; + /** + * Sets the theme. + */ + "setTheme": (theme: SixTheme) => Promise; /** * Defines the stage of the application * @default null */ "stage": StageType; + /** + * Defines the theme + * @default 'light' + */ + "theme": SixTheme; + /** + * Toggles between light and dark theme. + */ + "toggleTheme": () => Promise; /** * Defines the version of the application * @default '' @@ -2424,6 +2443,27 @@ export namespace Components { */ "value": string; } + /** + * @since 5.0 + * @status stable + */ + interface SixThemeSwitcher { + /** + * Set to true to disable the theme switcher. + * @default false + */ + "disabled": boolean; + /** + * A description that gets read by screen readers. + * @default 'Toggle theme' + */ + "label": string; + /** + * The icon button's size. + * @default 'medium' + */ + "size": 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge'; + } /** * @since 1.0 * @status stable @@ -2767,6 +2807,10 @@ export interface SixTextareaCustomEvent extends CustomEvent { detail: T; target: HTMLSixTextareaElement; } +export interface SixThemeSwitcherCustomEvent extends CustomEvent { + detail: T; + target: HTMLSixThemeSwitcherElement; +} export interface SixTileCustomEvent extends CustomEvent { detail: T; target: HTMLSixTileElement; @@ -3732,6 +3776,27 @@ declare global { prototype: HTMLSixTextareaElement; new (): HTMLSixTextareaElement; }; + interface HTMLSixThemeSwitcherElementEventMap { + "six-theme-switcher-change": EmptyPayload; + } + /** + * @since 5.0 + * @status stable + */ + interface HTMLSixThemeSwitcherElement extends Components.SixThemeSwitcher, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLSixThemeSwitcherElement, ev: SixThemeSwitcherCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLSixThemeSwitcherElement, ev: SixThemeSwitcherCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLSixThemeSwitcherElement: { + prototype: HTMLSixThemeSwitcherElement; + new (): HTMLSixThemeSwitcherElement; + }; interface HTMLSixTileElementEventMap { "six-tile-closed": EmptyPayload; "six-tile-selected": EmptyPayload; @@ -3861,14 +3926,13 @@ declare global { "six-tab-panel": HTMLSixTabPanelElement; "six-tag": HTMLSixTagElement; "six-textarea": HTMLSixTextareaElement; + "six-theme-switcher": HTMLSixThemeSwitcherElement; "six-tile": HTMLSixTileElement; "six-timepicker": HTMLSixTimepickerElement; "six-tooltip": HTMLSixTooltipElement; } } declare namespace LocalJSX { - type OneOf = { [P in K]: PropT } & { [P in `attr:${K}` | `prop:${K}`]?: never } | { [P in `attr:${K}`]: AttrT } & { [P in K | `prop:${K}`]?: never } | { [P in `prop:${K}`]: PropT } & { [P in K | `attr:${K}`]?: never }; - /** * @since 1.0 * @status stable @@ -5752,6 +5816,11 @@ declare namespace LocalJSX { * @default null */ "stage"?: StageType; + /** + * Defines the theme + * @default 'light' + */ + "theme"?: SixTheme; /** * Defines the version of the application * @default '' @@ -6368,6 +6437,31 @@ declare namespace LocalJSX { */ "value"?: string; } + /** + * @since 5.0 + * @status stable + */ + interface SixThemeSwitcher { + /** + * Set to true to disable the theme switcher. + * @default false + */ + "disabled"?: boolean; + /** + * A description that gets read by screen readers. + * @default 'Toggle theme' + */ + "label"?: string; + /** + * Emitted when the theme is changed. + */ + "onSix-theme-switcher-change"?: (event: SixThemeSwitcherCustomEvent) => void; + /** + * The icon button's size. + * @default 'medium' + */ + "size"?: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge'; + } /** * @since 1.0 * @status stable @@ -6618,616 +6712,69 @@ declare namespace LocalJSX { */ "trigger"?: string; } - - interface SixAlertAttributes { - "open": boolean; - "closable": boolean; - "type": AlertType; - "duration": number; - } - interface SixAvatarAttributes { - "image": string; - "alt": string; - "initials": string; - "shape": 'circle' | 'square' | 'rounded'; - } - interface SixBadgeAttributes { - "type": 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'action'; - "pill": boolean; - "pulse": boolean; - } - interface SixBreadcrumbsAttributes { - "size": 'small' | 'medium' | 'large'; - "separatorIcon": string; - } - interface SixBreadcrumbsItemAttributes { - "href": string; - "target": '_blank' | '_parent' | '_self' | '_top'; - "readonly": boolean; - } - interface SixButtonAttributes { - "type": | 'secondary' - | 'primary' - | 'link' - | 'success' - | 'warning' - | 'danger' - | 'action' - | 'action-outline'; - "size": 'small' | 'medium' | 'large'; - "caret": boolean; - "disabled": boolean; - "loading": boolean; - "pill": boolean; - "circle": boolean; - "submit": boolean; - "reset": boolean; - "name": string; - "value": string; - "href": string; - "target": '_blank' | '_parent' | '_self' | '_top'; - "download": string; - } - interface SixCheckboxAttributes { - "name": string; - "value": string; - "disabled": boolean; - "required": boolean; - "label": string; - "errorText": string | string[]; - "errorTextCount": number; - "invalid": boolean; - "checked": boolean; - "indeterminate": boolean; - } - interface SixDateAttributes { - "language": Language; - "readonly": boolean; - "disabled": boolean; - "min": string; - "max": string; - "size": 'small' | 'medium' | 'large'; - "required": boolean; - "placeholder": string; - "value": string | ''; - "dateFormat": string; - "label": string; - "helpText": string; - "errorText": string | string[]; - "errorTextCount": number; - "invalid": boolean; - "name": string; - "clearable": boolean; - } - interface SixDatepickerAttributes { - "type": 'date' | 'date-time'; - "locale": 'en' | 'de' | 'fr' | 'it' | 'es'; - "open": boolean; - "inline": boolean; - "readonly": boolean; - "disabled": boolean; - "closeOnSelect": boolean; - "placement": 'top' | 'bottom'; - "size": 'small' | 'medium' | 'large'; - "required": boolean; - "defaultDate": string; - "placeholder": string; - "label": string; - "errorText": string | string[]; - "errorTextCount": number; - "invalid": boolean; - "dateFormat": SixDateFormats; - "debounce": number; - "name": string; - "clearable": boolean; - "iconPosition": 'left' | 'right'; - "hoist": boolean; - } - interface SixDetailsAttributes { - "open": boolean; - "summary": string; - "summaryIcon": string; - "summaryIconSize": | 'inherit' - | 'xSmall' - | 'small' - | 'medium' - | 'large' - | 'xLarge' - | 'xxLarge' - | 'xxxLarge'; - "disabled": boolean; - "inline": boolean; - "selectableEmpty": boolean; - "hasContent": boolean; - } - interface SixDialogAttributes { - "open": boolean; - "label": string; - "noHeader": boolean; - } - interface SixDrawerAttributes { - "open": boolean; - "label": string; - "placement": 'top' | 'right' | 'bottom' | 'left'; - "contained": boolean; - "noHeader": boolean; - } - interface SixDropdownAttributes { - "open": boolean; - "placement": | 'top' - | 'top-start' - | 'top-end' - | 'bottom' - | 'bottom-start' - | 'bottom-end' - | 'right' - | 'right-start' - | 'right-end' - | 'left' - | 'left-start' - | 'left-end'; - "closeOnSelect": boolean; - "distance": number; - "skidding": number; - "hoist": boolean; - "filter": boolean; - "noScroll": boolean; - "asyncFilter": boolean; - "filterPlaceholder": string; - "autofocusFilter": boolean; - "filterDebounce": number; - "disableHideOnEnterAndSpace": boolean; - "disableTypeToSelect": boolean; - "virtualScroll": boolean; - "matchTriggerWidth": boolean; - } - interface SixErrorPageAttributes { - "errorCode": 404 | 403 | 500; - "language": 'en' | 'de'; - "customTitle": string; - "customIcon": string; - } - interface SixFileListItemAttributes { - "identifier": string; - "name": string; - "date": string; - "size": number; - "nodownload": boolean; - "nodelete": boolean; - } - interface SixFileUploadAttributes { - "compact": boolean; - "label": string; - "disabled": false; - "accept": string; - "multiple": false; - "maxFileSize": number; - "uploading": boolean; - "errorText": string | string[]; - "invalid": boolean; - } - interface SixGroupLabelAttributes { - "size": 'small' | 'medium' | 'large'; - "label": string; - "helpText": string; - "disabled": boolean; - "required": boolean; - } - interface SixHeaderAttributes { - "shiftContent": boolean; - "openSearch": boolean; - } - interface SixHeaderDropdownItemAttributes { - "filter": boolean; - "filterPlaceholder": string; - } - interface SixHeaderItemAttributes { - "active": boolean; - } - interface SixHeaderMenuButtonAttributes { - "caret": boolean; - "disabled": boolean; - "loading": boolean; - "submit": boolean; - "reset": boolean; - } - interface SixIconAttributes { - "name": string; - "src": string; - "inlineSvg": boolean; - "size": | 'inherit' - | 'xSmall' - | 'small' - | 'medium' - | 'large' - | 'xLarge' - | 'xxLarge' - | 'xxxLarge'; - "filled": boolean; - "library": IconLibrary; - } - interface SixIconButtonAttributes { - "name": string; - "size": 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge'; - "label": string; - "disabled": boolean; - "html": string; - "href": string; - "target": '_blank' | '_parent' | '_self' | '_top'; - "download": string; - "library": IconLibrary; - } - interface SixInputAttributes { - "type": 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url'; - "size": 'small' | 'medium' | 'large'; - "name": string; - "value": string; - "pill": boolean; - "helpText": string; - "placeholder": string; - "disabled": boolean; - "readonly": boolean; - "minlength": number; - "maxlength": number; - "min": number; - "max": number; - "step": number; - "pattern": string; - "dropdownSearch": boolean; - "required": boolean; - "autocapitalize": string; - "autocorrect": boolean; - "autocomplete": string; - "autofocus": boolean; - "spellcheck": boolean; - "label": string; - "errorText": string | string[]; - "errorTextCount": number; - "invalid": boolean; - "clearable": boolean; - "togglePassword": boolean; - "inputmode": 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'; - "line": boolean; - } - interface SixItemPickerAttributes { - "value": string; - "type": ItemPickerType; - "min": string; - "max": string; - "roundtrip": boolean; - "step": number; - "padded": boolean; - "paddingLength": number; - "paddingChar": string; - "paddingDirection": ItemPickerPaddingDirection; - "timeout": number; - "interval": number; - "debounce": number; - } - interface SixLanguageSwitcherAttributes { - "selected": string; - } - interface SixLayoutGridAttributes { - "columns": number; - } - interface SixLogoAttributes { - "brand": 'six' | 'bme'; - } - interface SixMainContainerAttributes { - "padded": boolean; - } - interface SixMenuAttributes { - "removeBoxShadow": boolean; - "itemsShown": number; - "virtualScroll": boolean; - "itemSize": number; - "scrollingDebounce": number; - "disableKeyboardHandling": boolean; - } - interface SixMenuItemAttributes { - "checkType": 'checkbox' | 'check'; - "checked": boolean; - "value": string; - "disabled": boolean; - } - interface SixPaginatorAttributes { - "currentPage": number; - "totalPages": number; - "totalResults": number; - "resultsPerPage": number; - "length": number; - "clamp": boolean; - "disabled": boolean; - } - interface SixPictoAttributes { - "size": 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' | '4xl'; - } - interface SixProgressBarAttributes { - "percentage": number; - "indeterminate": boolean; - } - interface SixProgressRingAttributes { - "size": number; - "strokeWidth": number; - "percentage": number; - } - interface SixRadioAttributes { - "name": string; - "value": string; - "disabled": boolean; - "checked": boolean; - "invalid": boolean; - } - interface SixRangeAttributes { - "name": string; - "value": number; - "required": boolean; - "helpText": string; - "disabled": boolean; - "label": string; - "errorText": string | string[]; - "errorTextCount": number; - "invalid": boolean; - "min": number; - "max": number; - "step": number; - "tooltip": 'top' | 'bottom' | 'none'; - } - interface SixRatingAttributes { - "name": string; - "value": number; - "disabled": boolean; - "required": boolean; - "label": string; - "errorText": string | string[]; - "errorTextCount": number; - "invalid": boolean; - "max": number; - "size": 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge'; - "readonly": boolean; - "helpText": string; - } - interface SixRootAttributes { - "padded": boolean; - "stage": StageType; - "version": string; - } - interface SixSearchFieldAttributes { - "placeholder": string; - "debounce": number; - "disabled": boolean; - "value": string; - "clearable": boolean; - } - interface SixSelectAttributes { - "multiple": boolean; - "selectAllButton": boolean; - "selectAllText": string; - "disabled": boolean; - "name": string; - "placeholder": string; - "filterPlaceholder": string; - "filterDebounce": number; - "size": 'small' | 'medium' | 'large'; - "hoist": boolean; - "value": string | string[]; - "pill": boolean; - "helpText": string; - "required": boolean; - "clearable": boolean; - "label": string; - "errorText": string | string[]; - "errorTextCount": number; - "invalid": boolean; - "line": boolean; - "filter": boolean; - "asyncFilter": boolean; - "autocomplete": boolean; - "inputDebounce": number; - "virtualScroll": boolean; - } - interface SixSidebarAttributes { - "position": 'left' | 'right'; - "open": boolean; - "width": string; - "toggled": boolean; - } - interface SixSidebarItemAttributes { - "value": string; - "selected": boolean; - "disabled": boolean; - "icon": string; - "href": string | undefined; - } - interface SixSidebarItemGroupAttributes { - "name": string; - "icon": string; - "value": string; - "open": boolean; - "summaryIcon": string; - "href": string | undefined; - } - interface SixSpinnerAttributes { - "logo": 'six' | 'bme'; - "six": boolean; - } - interface SixStageIndicatorAttributes { - "stage": StageType; - } - interface SixSwitchAttributes { - "name": string; - "value": string; - "disabled": boolean; - "required": boolean; - "checked": boolean; - "label": string; - "errorText": string | string[]; - "errorTextCount": number; - "invalid": boolean; - } - interface SixTabAttributes { - "panel": string; - "active": boolean; - "closable": boolean; - "hoverContent": string; - "disabled": boolean; - } - interface SixTabGroupAttributes { - "placement": 'top' | 'bottom' | 'left' | 'right'; - "noScrollControls": boolean; - } - interface SixTabPanelAttributes { - "name": string; - "active": boolean; - } - interface SixTagAttributes { - "type": 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'action' | 'text'; - "size": 'small' | 'medium' | 'large'; - "pill": boolean; - "clearable": boolean; - } - interface SixTextareaAttributes { - "size": 'small' | 'medium' | 'large'; - "name": string; - "value": string; - "helpText": string; - "placeholder": string; - "rows": number; - "resize": 'none' | 'vertical' | 'auto'; - "disabled": boolean; - "readonly": boolean; - "minlength": number; - "maxlength": number; - "required": boolean; - "label": string; - "errorText": string | string[]; - "errorTextCount": number; - "invalid": boolean; - "autocapitalize": string; - "autocorrect": boolean; - "autocomplete": string; - "autofocus": boolean; - "spellcheck": boolean; - "inputmode": 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'; - } - interface SixTileAttributes { - "label": string; - "iconName": string; - "closeable": boolean; - "elevated": boolean; - "disableTooltip": boolean; - "disabled": boolean; - "size": 'small' | 'medium' | 'large'; - "library": IconLibrary; - } - interface SixTimepickerAttributes { - "format": TimeFormat; - "separator": string; - "value": string; - "open": boolean; - "inline": boolean; - "readonly": boolean; - "disabled": boolean; - "placement": 'top' | 'bottom'; - "size": 'small' | 'medium' | 'large'; - "required": boolean; - "placeholder": string; - "errorText": string | string[]; - "errorTextCount": number; - "label": string; - "invalid": boolean; - "name": string; - "clearable": boolean; - "iconPosition": 'left' | 'right'; - "hoist": boolean; - "timeout": number; - "interval": number; - "defaultTime": string; - "debounce": number; - } - interface SixTooltipAttributes { - "content": string; - "placement": | 'top' - | 'top-start' - | 'top-end' - | 'right' - | 'right-start' - | 'right-end' - | 'bottom' - | 'bottom-start' - | 'bottom-end' - | 'left' - | 'left-start' - | 'left-end'; - "disabled": boolean; - "distance": number; - "open": boolean; - "skidding": number; - "trigger": string; - } - interface IntrinsicElements { - "six-alert": Omit & { [K in keyof SixAlert & keyof SixAlertAttributes]?: SixAlert[K] } & { [K in keyof SixAlert & keyof SixAlertAttributes as `attr:${K}`]?: SixAlertAttributes[K] } & { [K in keyof SixAlert & keyof SixAlertAttributes as `prop:${K}`]?: SixAlert[K] }; - "six-avatar": Omit & { [K in keyof SixAvatar & keyof SixAvatarAttributes]?: SixAvatar[K] } & { [K in keyof SixAvatar & keyof SixAvatarAttributes as `attr:${K}`]?: SixAvatarAttributes[K] } & { [K in keyof SixAvatar & keyof SixAvatarAttributes as `prop:${K}`]?: SixAvatar[K] }; - "six-badge": Omit & { [K in keyof SixBadge & keyof SixBadgeAttributes]?: SixBadge[K] } & { [K in keyof SixBadge & keyof SixBadgeAttributes as `attr:${K}`]?: SixBadgeAttributes[K] } & { [K in keyof SixBadge & keyof SixBadgeAttributes as `prop:${K}`]?: SixBadge[K] }; - "six-breadcrumbs": Omit & { [K in keyof SixBreadcrumbs & keyof SixBreadcrumbsAttributes]?: SixBreadcrumbs[K] } & { [K in keyof SixBreadcrumbs & keyof SixBreadcrumbsAttributes as `attr:${K}`]?: SixBreadcrumbsAttributes[K] } & { [K in keyof SixBreadcrumbs & keyof SixBreadcrumbsAttributes as `prop:${K}`]?: SixBreadcrumbs[K] }; - "six-breadcrumbs-item": Omit & { [K in keyof SixBreadcrumbsItem & keyof SixBreadcrumbsItemAttributes]?: SixBreadcrumbsItem[K] } & { [K in keyof SixBreadcrumbsItem & keyof SixBreadcrumbsItemAttributes as `attr:${K}`]?: SixBreadcrumbsItemAttributes[K] } & { [K in keyof SixBreadcrumbsItem & keyof SixBreadcrumbsItemAttributes as `prop:${K}`]?: SixBreadcrumbsItem[K] }; - "six-button": Omit & { [K in keyof SixButton & keyof SixButtonAttributes]?: SixButton[K] } & { [K in keyof SixButton & keyof SixButtonAttributes as `attr:${K}`]?: SixButtonAttributes[K] } & { [K in keyof SixButton & keyof SixButtonAttributes as `prop:${K}`]?: SixButton[K] }; + "six-alert": SixAlert; + "six-avatar": SixAvatar; + "six-badge": SixBadge; + "six-breadcrumbs": SixBreadcrumbs; + "six-breadcrumbs-item": SixBreadcrumbsItem; + "six-button": SixButton; "six-card": SixCard; - "six-checkbox": Omit & { [K in keyof SixCheckbox & keyof SixCheckboxAttributes]?: SixCheckbox[K] } & { [K in keyof SixCheckbox & keyof SixCheckboxAttributes as `attr:${K}`]?: SixCheckboxAttributes[K] } & { [K in keyof SixCheckbox & keyof SixCheckboxAttributes as `prop:${K}`]?: SixCheckbox[K] }; - "six-date": Omit & { [K in keyof SixDate & keyof SixDateAttributes]?: SixDate[K] } & { [K in keyof SixDate & keyof SixDateAttributes as `attr:${K}`]?: SixDateAttributes[K] } & { [K in keyof SixDate & keyof SixDateAttributes as `prop:${K}`]?: SixDate[K] }; - "six-datepicker": Omit & { [K in keyof SixDatepicker & keyof SixDatepickerAttributes]?: SixDatepicker[K] } & { [K in keyof SixDatepicker & keyof SixDatepickerAttributes as `attr:${K}`]?: SixDatepickerAttributes[K] } & { [K in keyof SixDatepicker & keyof SixDatepickerAttributes as `prop:${K}`]?: SixDatepicker[K] }; - "six-details": Omit & { [K in keyof SixDetails & keyof SixDetailsAttributes]?: SixDetails[K] } & { [K in keyof SixDetails & keyof SixDetailsAttributes as `attr:${K}`]?: SixDetailsAttributes[K] } & { [K in keyof SixDetails & keyof SixDetailsAttributes as `prop:${K}`]?: SixDetails[K] }; - "six-dialog": Omit & { [K in keyof SixDialog & keyof SixDialogAttributes]?: SixDialog[K] } & { [K in keyof SixDialog & keyof SixDialogAttributes as `attr:${K}`]?: SixDialogAttributes[K] } & { [K in keyof SixDialog & keyof SixDialogAttributes as `prop:${K}`]?: SixDialog[K] }; - "six-drawer": Omit & { [K in keyof SixDrawer & keyof SixDrawerAttributes]?: SixDrawer[K] } & { [K in keyof SixDrawer & keyof SixDrawerAttributes as `attr:${K}`]?: SixDrawerAttributes[K] } & { [K in keyof SixDrawer & keyof SixDrawerAttributes as `prop:${K}`]?: SixDrawer[K] }; - "six-dropdown": Omit & { [K in keyof SixDropdown & keyof SixDropdownAttributes]?: SixDropdown[K] } & { [K in keyof SixDropdown & keyof SixDropdownAttributes as `attr:${K}`]?: SixDropdownAttributes[K] } & { [K in keyof SixDropdown & keyof SixDropdownAttributes as `prop:${K}`]?: SixDropdown[K] }; + "six-checkbox": SixCheckbox; + "six-date": SixDate; + "six-datepicker": SixDatepicker; + "six-details": SixDetails; + "six-dialog": SixDialog; + "six-drawer": SixDrawer; + "six-dropdown": SixDropdown; "six-error": SixError; - "six-error-page": Omit & { [K in keyof SixErrorPage & keyof SixErrorPageAttributes]?: SixErrorPage[K] } & { [K in keyof SixErrorPage & keyof SixErrorPageAttributes as `attr:${K}`]?: SixErrorPageAttributes[K] } & { [K in keyof SixErrorPage & keyof SixErrorPageAttributes as `prop:${K}`]?: SixErrorPage[K] }; + "six-error-page": SixErrorPage; "six-file-list": SixFileList; - "six-file-list-item": Omit & { [K in keyof SixFileListItem & keyof SixFileListItemAttributes]?: SixFileListItem[K] } & { [K in keyof SixFileListItem & keyof SixFileListItemAttributes as `attr:${K}`]?: SixFileListItemAttributes[K] } & { [K in keyof SixFileListItem & keyof SixFileListItemAttributes as `prop:${K}`]?: SixFileListItem[K] }; - "six-file-upload": Omit & { [K in keyof SixFileUpload & keyof SixFileUploadAttributes]?: SixFileUpload[K] } & { [K in keyof SixFileUpload & keyof SixFileUploadAttributes as `attr:${K}`]?: SixFileUploadAttributes[K] } & { [K in keyof SixFileUpload & keyof SixFileUploadAttributes as `prop:${K}`]?: SixFileUpload[K] }; + "six-file-list-item": SixFileListItem; + "six-file-upload": SixFileUpload; "six-footer": SixFooter; - "six-group-label": Omit & { [K in keyof SixGroupLabel & keyof SixGroupLabelAttributes]?: SixGroupLabel[K] } & { [K in keyof SixGroupLabel & keyof SixGroupLabelAttributes as `attr:${K}`]?: SixGroupLabelAttributes[K] } & { [K in keyof SixGroupLabel & keyof SixGroupLabelAttributes as `prop:${K}`]?: SixGroupLabel[K] }; - "six-header": Omit & { [K in keyof SixHeader & keyof SixHeaderAttributes]?: SixHeader[K] } & { [K in keyof SixHeader & keyof SixHeaderAttributes as `attr:${K}`]?: SixHeaderAttributes[K] } & { [K in keyof SixHeader & keyof SixHeaderAttributes as `prop:${K}`]?: SixHeader[K] }; - "six-header-dropdown-item": Omit & { [K in keyof SixHeaderDropdownItem & keyof SixHeaderDropdownItemAttributes]?: SixHeaderDropdownItem[K] } & { [K in keyof SixHeaderDropdownItem & keyof SixHeaderDropdownItemAttributes as `attr:${K}`]?: SixHeaderDropdownItemAttributes[K] } & { [K in keyof SixHeaderDropdownItem & keyof SixHeaderDropdownItemAttributes as `prop:${K}`]?: SixHeaderDropdownItem[K] }; - "six-header-item": Omit & { [K in keyof SixHeaderItem & keyof SixHeaderItemAttributes]?: SixHeaderItem[K] } & { [K in keyof SixHeaderItem & keyof SixHeaderItemAttributes as `attr:${K}`]?: SixHeaderItemAttributes[K] } & { [K in keyof SixHeaderItem & keyof SixHeaderItemAttributes as `prop:${K}`]?: SixHeaderItem[K] }; - "six-header-menu-button": Omit & { [K in keyof SixHeaderMenuButton & keyof SixHeaderMenuButtonAttributes]?: SixHeaderMenuButton[K] } & { [K in keyof SixHeaderMenuButton & keyof SixHeaderMenuButtonAttributes as `attr:${K}`]?: SixHeaderMenuButtonAttributes[K] } & { [K in keyof SixHeaderMenuButton & keyof SixHeaderMenuButtonAttributes as `prop:${K}`]?: SixHeaderMenuButton[K] }; - "six-icon": Omit & { [K in keyof SixIcon & keyof SixIconAttributes]?: SixIcon[K] } & { [K in keyof SixIcon & keyof SixIconAttributes as `attr:${K}`]?: SixIconAttributes[K] } & { [K in keyof SixIcon & keyof SixIconAttributes as `prop:${K}`]?: SixIcon[K] }; - "six-icon-button": Omit & { [K in keyof SixIconButton & keyof SixIconButtonAttributes]?: SixIconButton[K] } & { [K in keyof SixIconButton & keyof SixIconButtonAttributes as `attr:${K}`]?: SixIconButtonAttributes[K] } & { [K in keyof SixIconButton & keyof SixIconButtonAttributes as `prop:${K}`]?: SixIconButton[K] }; - "six-input": Omit & { [K in keyof SixInput & keyof SixInputAttributes]?: SixInput[K] } & { [K in keyof SixInput & keyof SixInputAttributes as `attr:${K}`]?: SixInputAttributes[K] } & { [K in keyof SixInput & keyof SixInputAttributes as `prop:${K}`]?: SixInput[K] }; - "six-item-picker": Omit & { [K in keyof SixItemPicker & keyof SixItemPickerAttributes]?: SixItemPicker[K] } & { [K in keyof SixItemPicker & keyof SixItemPickerAttributes as `attr:${K}`]?: SixItemPickerAttributes[K] } & { [K in keyof SixItemPicker & keyof SixItemPickerAttributes as `prop:${K}`]?: SixItemPicker[K] }; - "six-language-switcher": Omit & { [K in keyof SixLanguageSwitcher & keyof SixLanguageSwitcherAttributes]?: SixLanguageSwitcher[K] } & { [K in keyof SixLanguageSwitcher & keyof SixLanguageSwitcherAttributes as `attr:${K}`]?: SixLanguageSwitcherAttributes[K] } & { [K in keyof SixLanguageSwitcher & keyof SixLanguageSwitcherAttributes as `prop:${K}`]?: SixLanguageSwitcher[K] }; - "six-layout-grid": Omit & { [K in keyof SixLayoutGrid & keyof SixLayoutGridAttributes]?: SixLayoutGrid[K] } & { [K in keyof SixLayoutGrid & keyof SixLayoutGridAttributes as `attr:${K}`]?: SixLayoutGridAttributes[K] } & { [K in keyof SixLayoutGrid & keyof SixLayoutGridAttributes as `prop:${K}`]?: SixLayoutGrid[K] }; - "six-logo": Omit & { [K in keyof SixLogo & keyof SixLogoAttributes]?: SixLogo[K] } & { [K in keyof SixLogo & keyof SixLogoAttributes as `attr:${K}`]?: SixLogoAttributes[K] } & { [K in keyof SixLogo & keyof SixLogoAttributes as `prop:${K}`]?: SixLogo[K] }; - "six-main-container": Omit & { [K in keyof SixMainContainer & keyof SixMainContainerAttributes]?: SixMainContainer[K] } & { [K in keyof SixMainContainer & keyof SixMainContainerAttributes as `attr:${K}`]?: SixMainContainerAttributes[K] } & { [K in keyof SixMainContainer & keyof SixMainContainerAttributes as `prop:${K}`]?: SixMainContainer[K] }; - "six-menu": Omit & { [K in keyof SixMenu & keyof SixMenuAttributes]?: SixMenu[K] } & { [K in keyof SixMenu & keyof SixMenuAttributes as `attr:${K}`]?: SixMenuAttributes[K] } & { [K in keyof SixMenu & keyof SixMenuAttributes as `prop:${K}`]?: SixMenu[K] }; + "six-group-label": SixGroupLabel; + "six-header": SixHeader; + "six-header-dropdown-item": SixHeaderDropdownItem; + "six-header-item": SixHeaderItem; + "six-header-menu-button": SixHeaderMenuButton; + "six-icon": SixIcon; + "six-icon-button": SixIconButton; + "six-input": SixInput; + "six-item-picker": SixItemPicker; + "six-language-switcher": SixLanguageSwitcher; + "six-layout-grid": SixLayoutGrid; + "six-logo": SixLogo; + "six-main-container": SixMainContainer; + "six-menu": SixMenu; "six-menu-divider": SixMenuDivider; - "six-menu-item": Omit & { [K in keyof SixMenuItem & keyof SixMenuItemAttributes]?: SixMenuItem[K] } & { [K in keyof SixMenuItem & keyof SixMenuItemAttributes as `attr:${K}`]?: SixMenuItemAttributes[K] } & { [K in keyof SixMenuItem & keyof SixMenuItemAttributes as `prop:${K}`]?: SixMenuItem[K] }; + "six-menu-item": SixMenuItem; "six-menu-label": SixMenuLabel; - "six-paginator": Omit & { [K in keyof SixPaginator & keyof SixPaginatorAttributes]?: SixPaginator[K] } & { [K in keyof SixPaginator & keyof SixPaginatorAttributes as `attr:${K}`]?: SixPaginatorAttributes[K] } & { [K in keyof SixPaginator & keyof SixPaginatorAttributes as `prop:${K}`]?: SixPaginator[K] } & OneOf<"totalPages", SixPaginator["totalPages"], SixPaginatorAttributes["totalPages"]> & OneOf<"totalResults", SixPaginator["totalResults"], SixPaginatorAttributes["totalResults"]>; - "six-picto": Omit & { [K in keyof SixPicto & keyof SixPictoAttributes]?: SixPicto[K] } & { [K in keyof SixPicto & keyof SixPictoAttributes as `attr:${K}`]?: SixPictoAttributes[K] } & { [K in keyof SixPicto & keyof SixPictoAttributes as `prop:${K}`]?: SixPicto[K] }; - "six-progress-bar": Omit & { [K in keyof SixProgressBar & keyof SixProgressBarAttributes]?: SixProgressBar[K] } & { [K in keyof SixProgressBar & keyof SixProgressBarAttributes as `attr:${K}`]?: SixProgressBarAttributes[K] } & { [K in keyof SixProgressBar & keyof SixProgressBarAttributes as `prop:${K}`]?: SixProgressBar[K] }; - "six-progress-ring": Omit & { [K in keyof SixProgressRing & keyof SixProgressRingAttributes]?: SixProgressRing[K] } & { [K in keyof SixProgressRing & keyof SixProgressRingAttributes as `attr:${K}`]?: SixProgressRingAttributes[K] } & { [K in keyof SixProgressRing & keyof SixProgressRingAttributes as `prop:${K}`]?: SixProgressRing[K] }; - "six-radio": Omit & { [K in keyof SixRadio & keyof SixRadioAttributes]?: SixRadio[K] } & { [K in keyof SixRadio & keyof SixRadioAttributes as `attr:${K}`]?: SixRadioAttributes[K] } & { [K in keyof SixRadio & keyof SixRadioAttributes as `prop:${K}`]?: SixRadio[K] }; - "six-range": Omit & { [K in keyof SixRange & keyof SixRangeAttributes]?: SixRange[K] } & { [K in keyof SixRange & keyof SixRangeAttributes as `attr:${K}`]?: SixRangeAttributes[K] } & { [K in keyof SixRange & keyof SixRangeAttributes as `prop:${K}`]?: SixRange[K] }; - "six-rating": Omit & { [K in keyof SixRating & keyof SixRatingAttributes]?: SixRating[K] } & { [K in keyof SixRating & keyof SixRatingAttributes as `attr:${K}`]?: SixRatingAttributes[K] } & { [K in keyof SixRating & keyof SixRatingAttributes as `prop:${K}`]?: SixRating[K] }; - "six-root": Omit & { [K in keyof SixRoot & keyof SixRootAttributes]?: SixRoot[K] } & { [K in keyof SixRoot & keyof SixRootAttributes as `attr:${K}`]?: SixRootAttributes[K] } & { [K in keyof SixRoot & keyof SixRootAttributes as `prop:${K}`]?: SixRoot[K] }; - "six-search-field": Omit & { [K in keyof SixSearchField & keyof SixSearchFieldAttributes]?: SixSearchField[K] } & { [K in keyof SixSearchField & keyof SixSearchFieldAttributes as `attr:${K}`]?: SixSearchFieldAttributes[K] } & { [K in keyof SixSearchField & keyof SixSearchFieldAttributes as `prop:${K}`]?: SixSearchField[K] }; - "six-select": Omit & { [K in keyof SixSelect & keyof SixSelectAttributes]?: SixSelect[K] } & { [K in keyof SixSelect & keyof SixSelectAttributes as `attr:${K}`]?: SixSelectAttributes[K] } & { [K in keyof SixSelect & keyof SixSelectAttributes as `prop:${K}`]?: SixSelect[K] }; - "six-sidebar": Omit & { [K in keyof SixSidebar & keyof SixSidebarAttributes]?: SixSidebar[K] } & { [K in keyof SixSidebar & keyof SixSidebarAttributes as `attr:${K}`]?: SixSidebarAttributes[K] } & { [K in keyof SixSidebar & keyof SixSidebarAttributes as `prop:${K}`]?: SixSidebar[K] }; - "six-sidebar-item": Omit & { [K in keyof SixSidebarItem & keyof SixSidebarItemAttributes]?: SixSidebarItem[K] } & { [K in keyof SixSidebarItem & keyof SixSidebarItemAttributes as `attr:${K}`]?: SixSidebarItemAttributes[K] } & { [K in keyof SixSidebarItem & keyof SixSidebarItemAttributes as `prop:${K}`]?: SixSidebarItem[K] }; - "six-sidebar-item-group": Omit & { [K in keyof SixSidebarItemGroup & keyof SixSidebarItemGroupAttributes]?: SixSidebarItemGroup[K] } & { [K in keyof SixSidebarItemGroup & keyof SixSidebarItemGroupAttributes as `attr:${K}`]?: SixSidebarItemGroupAttributes[K] } & { [K in keyof SixSidebarItemGroup & keyof SixSidebarItemGroupAttributes as `prop:${K}`]?: SixSidebarItemGroup[K] }; - "six-spinner": Omit & { [K in keyof SixSpinner & keyof SixSpinnerAttributes]?: SixSpinner[K] } & { [K in keyof SixSpinner & keyof SixSpinnerAttributes as `attr:${K}`]?: SixSpinnerAttributes[K] } & { [K in keyof SixSpinner & keyof SixSpinnerAttributes as `prop:${K}`]?: SixSpinner[K] }; - "six-stage-indicator": Omit & { [K in keyof SixStageIndicator & keyof SixStageIndicatorAttributes]?: SixStageIndicator[K] } & { [K in keyof SixStageIndicator & keyof SixStageIndicatorAttributes as `attr:${K}`]?: SixStageIndicatorAttributes[K] } & { [K in keyof SixStageIndicator & keyof SixStageIndicatorAttributes as `prop:${K}`]?: SixStageIndicator[K] }; - "six-switch": Omit & { [K in keyof SixSwitch & keyof SixSwitchAttributes]?: SixSwitch[K] } & { [K in keyof SixSwitch & keyof SixSwitchAttributes as `attr:${K}`]?: SixSwitchAttributes[K] } & { [K in keyof SixSwitch & keyof SixSwitchAttributes as `prop:${K}`]?: SixSwitch[K] }; - "six-tab": Omit & { [K in keyof SixTab & keyof SixTabAttributes]?: SixTab[K] } & { [K in keyof SixTab & keyof SixTabAttributes as `attr:${K}`]?: SixTabAttributes[K] } & { [K in keyof SixTab & keyof SixTabAttributes as `prop:${K}`]?: SixTab[K] }; - "six-tab-group": Omit & { [K in keyof SixTabGroup & keyof SixTabGroupAttributes]?: SixTabGroup[K] } & { [K in keyof SixTabGroup & keyof SixTabGroupAttributes as `attr:${K}`]?: SixTabGroupAttributes[K] } & { [K in keyof SixTabGroup & keyof SixTabGroupAttributes as `prop:${K}`]?: SixTabGroup[K] }; - "six-tab-panel": Omit & { [K in keyof SixTabPanel & keyof SixTabPanelAttributes]?: SixTabPanel[K] } & { [K in keyof SixTabPanel & keyof SixTabPanelAttributes as `attr:${K}`]?: SixTabPanelAttributes[K] } & { [K in keyof SixTabPanel & keyof SixTabPanelAttributes as `prop:${K}`]?: SixTabPanel[K] }; - "six-tag": Omit & { [K in keyof SixTag & keyof SixTagAttributes]?: SixTag[K] } & { [K in keyof SixTag & keyof SixTagAttributes as `attr:${K}`]?: SixTagAttributes[K] } & { [K in keyof SixTag & keyof SixTagAttributes as `prop:${K}`]?: SixTag[K] }; - "six-textarea": Omit & { [K in keyof SixTextarea & keyof SixTextareaAttributes]?: SixTextarea[K] } & { [K in keyof SixTextarea & keyof SixTextareaAttributes as `attr:${K}`]?: SixTextareaAttributes[K] } & { [K in keyof SixTextarea & keyof SixTextareaAttributes as `prop:${K}`]?: SixTextarea[K] }; - "six-tile": Omit & { [K in keyof SixTile & keyof SixTileAttributes]?: SixTile[K] } & { [K in keyof SixTile & keyof SixTileAttributes as `attr:${K}`]?: SixTileAttributes[K] } & { [K in keyof SixTile & keyof SixTileAttributes as `prop:${K}`]?: SixTile[K] }; - "six-timepicker": Omit & { [K in keyof SixTimepicker & keyof SixTimepickerAttributes]?: SixTimepicker[K] } & { [K in keyof SixTimepicker & keyof SixTimepickerAttributes as `attr:${K}`]?: SixTimepickerAttributes[K] } & { [K in keyof SixTimepicker & keyof SixTimepickerAttributes as `prop:${K}`]?: SixTimepicker[K] }; - "six-tooltip": Omit & { [K in keyof SixTooltip & keyof SixTooltipAttributes]?: SixTooltip[K] } & { [K in keyof SixTooltip & keyof SixTooltipAttributes as `attr:${K}`]?: SixTooltipAttributes[K] } & { [K in keyof SixTooltip & keyof SixTooltipAttributes as `prop:${K}`]?: SixTooltip[K] }; + "six-paginator": SixPaginator; + "six-picto": SixPicto; + "six-progress-bar": SixProgressBar; + "six-progress-ring": SixProgressRing; + "six-radio": SixRadio; + "six-range": SixRange; + "six-rating": SixRating; + "six-root": SixRoot; + "six-search-field": SixSearchField; + "six-select": SixSelect; + "six-sidebar": SixSidebar; + "six-sidebar-item": SixSidebarItem; + "six-sidebar-item-group": SixSidebarItemGroup; + "six-spinner": SixSpinner; + "six-stage-indicator": SixStageIndicator; + "six-switch": SixSwitch; + "six-tab": SixTab; + "six-tab-group": SixTabGroup; + "six-tab-panel": SixTabPanel; + "six-tag": SixTag; + "six-textarea": SixTextarea; + "six-theme-switcher": SixThemeSwitcher; + "six-tile": SixTile; + "six-timepicker": SixTimepicker; + "six-tooltip": SixTooltip; } } export { LocalJSX as JSX }; @@ -7239,134 +6786,134 @@ declare module "@stencil/core" { * @status stable * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27. */ - "six-alert": LocalJSX.IntrinsicElements["six-alert"] & JSXBase.HTMLAttributes; + "six-alert": LocalJSX.SixAlert & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27. */ - "six-avatar": LocalJSX.IntrinsicElements["six-avatar"] & JSXBase.HTMLAttributes; + "six-avatar": LocalJSX.SixAvatar & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27. */ - "six-badge": LocalJSX.IntrinsicElements["six-badge"] & JSXBase.HTMLAttributes; + "six-badge": LocalJSX.SixBadge & JSXBase.HTMLAttributes; /** * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy. * @since 5.0 * @status beta */ - "six-breadcrumbs": LocalJSX.IntrinsicElements["six-breadcrumbs"] & JSXBase.HTMLAttributes; + "six-breadcrumbs": LocalJSX.SixBreadcrumbs & JSXBase.HTMLAttributes; /** * Breadcrumb items are used inside breadcrumbs to represent different links. * @since 5.0 * @status beta */ - "six-breadcrumbs-item": LocalJSX.IntrinsicElements["six-breadcrumbs-item"] & JSXBase.HTMLAttributes; + "six-breadcrumbs-item": LocalJSX.SixBreadcrumbsItem & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27. */ - "six-button": LocalJSX.IntrinsicElements["six-button"] & JSXBase.HTMLAttributes; + "six-button": LocalJSX.SixButton & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable */ - "six-card": LocalJSX.IntrinsicElements["six-card"] & JSXBase.HTMLAttributes; + "six-card": LocalJSX.SixCard & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27. */ - "six-checkbox": LocalJSX.IntrinsicElements["six-checkbox"] & JSXBase.HTMLAttributes; + "six-checkbox": LocalJSX.SixCheckbox & JSXBase.HTMLAttributes; /** * A date picker component that allows users to select dates via a calendar popup or direct input. * @since 5.0 * @status beta */ - "six-date": LocalJSX.IntrinsicElements["six-date"] & JSXBase.HTMLAttributes; + "six-date": LocalJSX.SixDate & JSXBase.HTMLAttributes; /** * @since 1.0 * @status deprecated. Use six-date instead. */ - "six-datepicker": LocalJSX.IntrinsicElements["six-datepicker"] & JSXBase.HTMLAttributes; + "six-datepicker": LocalJSX.SixDatepicker & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27. */ - "six-details": LocalJSX.IntrinsicElements["six-details"] & JSXBase.HTMLAttributes; + "six-details": LocalJSX.SixDetails & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27. */ - "six-dialog": LocalJSX.IntrinsicElements["six-dialog"] & JSXBase.HTMLAttributes; + "six-dialog": LocalJSX.SixDialog & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27. */ - "six-drawer": LocalJSX.IntrinsicElements["six-drawer"] & JSXBase.HTMLAttributes; + "six-drawer": LocalJSX.SixDrawer & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27. */ - "six-dropdown": LocalJSX.IntrinsicElements["six-dropdown"] & JSXBase.HTMLAttributes; + "six-dropdown": LocalJSX.SixDropdown & JSXBase.HTMLAttributes; /** * @since 4.0 * @status beta */ - "six-error": LocalJSX.IntrinsicElements["six-error"] & JSXBase.HTMLAttributes; - "six-error-page": LocalJSX.IntrinsicElements["six-error-page"] & JSXBase.HTMLAttributes; + "six-error": LocalJSX.SixError & JSXBase.HTMLAttributes; + "six-error-page": LocalJSX.SixErrorPage & JSXBase.HTMLAttributes; /** * @since 2.0.0 * @status experimental */ - "six-file-list": LocalJSX.IntrinsicElements["six-file-list"] & JSXBase.HTMLAttributes; + "six-file-list": LocalJSX.SixFileList & JSXBase.HTMLAttributes; /** * @since 2.0.0 * @status experimental */ - "six-file-list-item": LocalJSX.IntrinsicElements["six-file-list-item"] & JSXBase.HTMLAttributes; + "six-file-list-item": LocalJSX.SixFileListItem & JSXBase.HTMLAttributes; /** * @since 2.0.0 * @status experimental */ - "six-file-upload": LocalJSX.IntrinsicElements["six-file-upload"] & JSXBase.HTMLAttributes; + "six-file-upload": LocalJSX.SixFileUpload & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable */ - "six-footer": LocalJSX.IntrinsicElements["six-footer"] & JSXBase.HTMLAttributes; + "six-footer": LocalJSX.SixFooter & JSXBase.HTMLAttributes; /** * @since 1.1 * @status stable */ - "six-group-label": LocalJSX.IntrinsicElements["six-group-label"] & JSXBase.HTMLAttributes; + "six-group-label": LocalJSX.SixGroupLabel & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable */ - "six-header": LocalJSX.IntrinsicElements["six-header"] & JSXBase.HTMLAttributes; + "six-header": LocalJSX.SixHeader & JSXBase.HTMLAttributes; /** * @since 4.2.7 * @status stable */ - "six-header-dropdown-item": LocalJSX.IntrinsicElements["six-header-dropdown-item"] & JSXBase.HTMLAttributes; + "six-header-dropdown-item": LocalJSX.SixHeaderDropdownItem & JSXBase.HTMLAttributes; /** * @since 4.2.7 * @status stable */ - "six-header-item": LocalJSX.IntrinsicElements["six-header-item"] & JSXBase.HTMLAttributes; + "six-header-item": LocalJSX.SixHeaderItem & JSXBase.HTMLAttributes; /** * @since 4.2.7 * @status stable */ - "six-header-menu-button": LocalJSX.IntrinsicElements["six-header-menu-button"] & JSXBase.HTMLAttributes; + "six-header-menu-button": LocalJSX.SixHeaderMenuButton & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable @@ -7382,185 +6929,190 @@ declare module "@stencil/core" { * @prop {'material-icons' | 'material-symbols'} [library] * Icon library to use when rendering ligature-based Material icons. Defaults to the globally configured library. */ - "six-icon": LocalJSX.IntrinsicElements["six-icon"] & JSXBase.HTMLAttributes; + "six-icon": LocalJSX.SixIcon & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27. */ - "six-icon-button": LocalJSX.IntrinsicElements["six-icon-button"] & JSXBase.HTMLAttributes; + "six-icon-button": LocalJSX.SixIconButton & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27. */ - "six-input": LocalJSX.IntrinsicElements["six-input"] & JSXBase.HTMLAttributes; + "six-input": LocalJSX.SixInput & JSXBase.HTMLAttributes; /** * @since 2.0.0 * @status experimental */ - "six-item-picker": LocalJSX.IntrinsicElements["six-item-picker"] & JSXBase.HTMLAttributes; - "six-language-switcher": LocalJSX.IntrinsicElements["six-language-switcher"] & JSXBase.HTMLAttributes; + "six-item-picker": LocalJSX.SixItemPicker & JSXBase.HTMLAttributes; + "six-language-switcher": LocalJSX.SixLanguageSwitcher & JSXBase.HTMLAttributes; /** * @since 1.01 * @status stable */ - "six-layout-grid": LocalJSX.IntrinsicElements["six-layout-grid"] & JSXBase.HTMLAttributes; + "six-layout-grid": LocalJSX.SixLayoutGrid & JSXBase.HTMLAttributes; /** * @since 4.2.7 * @status beta */ - "six-logo": LocalJSX.IntrinsicElements["six-logo"] & JSXBase.HTMLAttributes; + "six-logo": LocalJSX.SixLogo & JSXBase.HTMLAttributes; /** * @since 1.01 * @status stable */ - "six-main-container": LocalJSX.IntrinsicElements["six-main-container"] & JSXBase.HTMLAttributes; + "six-main-container": LocalJSX.SixMainContainer & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27. */ - "six-menu": LocalJSX.IntrinsicElements["six-menu"] & JSXBase.HTMLAttributes; + "six-menu": LocalJSX.SixMenu & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27. */ - "six-menu-divider": LocalJSX.IntrinsicElements["six-menu-divider"] & JSXBase.HTMLAttributes; + "six-menu-divider": LocalJSX.SixMenuDivider & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27. */ - "six-menu-item": LocalJSX.IntrinsicElements["six-menu-item"] & JSXBase.HTMLAttributes; + "six-menu-item": LocalJSX.SixMenuItem & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27. */ - "six-menu-label": LocalJSX.IntrinsicElements["six-menu-label"] & JSXBase.HTMLAttributes; - "six-paginator": LocalJSX.IntrinsicElements["six-paginator"] & JSXBase.HTMLAttributes; + "six-menu-label": LocalJSX.SixMenuLabel & JSXBase.HTMLAttributes; + "six-paginator": LocalJSX.SixPaginator & JSXBase.HTMLAttributes; /** * @since 1.1 * @status stable */ - "six-picto": LocalJSX.IntrinsicElements["six-picto"] & JSXBase.HTMLAttributes; + "six-picto": LocalJSX.SixPicto & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27. */ - "six-progress-bar": LocalJSX.IntrinsicElements["six-progress-bar"] & JSXBase.HTMLAttributes; + "six-progress-bar": LocalJSX.SixProgressBar & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27. */ - "six-progress-ring": LocalJSX.IntrinsicElements["six-progress-ring"] & JSXBase.HTMLAttributes; + "six-progress-ring": LocalJSX.SixProgressRing & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27. */ - "six-radio": LocalJSX.IntrinsicElements["six-radio"] & JSXBase.HTMLAttributes; + "six-radio": LocalJSX.SixRadio & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27. */ - "six-range": LocalJSX.IntrinsicElements["six-range"] & JSXBase.HTMLAttributes; - "six-rating": LocalJSX.IntrinsicElements["six-rating"] & JSXBase.HTMLAttributes; + "six-range": LocalJSX.SixRange & JSXBase.HTMLAttributes; + "six-rating": LocalJSX.SixRating & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable */ - "six-root": LocalJSX.IntrinsicElements["six-root"] & JSXBase.HTMLAttributes; + "six-root": LocalJSX.SixRoot & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable */ - "six-search-field": LocalJSX.IntrinsicElements["six-search-field"] & JSXBase.HTMLAttributes; + "six-search-field": LocalJSX.SixSearchField & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27. */ - "six-select": LocalJSX.IntrinsicElements["six-select"] & JSXBase.HTMLAttributes; + "six-select": LocalJSX.SixSelect & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable */ - "six-sidebar": LocalJSX.IntrinsicElements["six-sidebar"] & JSXBase.HTMLAttributes; + "six-sidebar": LocalJSX.SixSidebar & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable */ - "six-sidebar-item": LocalJSX.IntrinsicElements["six-sidebar-item"] & JSXBase.HTMLAttributes; + "six-sidebar-item": LocalJSX.SixSidebarItem & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable */ - "six-sidebar-item-group": LocalJSX.IntrinsicElements["six-sidebar-item-group"] & JSXBase.HTMLAttributes; + "six-sidebar-item-group": LocalJSX.SixSidebarItemGroup & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27. */ - "six-spinner": LocalJSX.IntrinsicElements["six-spinner"] & JSXBase.HTMLAttributes; - "six-stage-indicator": LocalJSX.IntrinsicElements["six-stage-indicator"] & JSXBase.HTMLAttributes; + "six-spinner": LocalJSX.SixSpinner & JSXBase.HTMLAttributes; + "six-stage-indicator": LocalJSX.SixStageIndicator & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27. */ - "six-switch": LocalJSX.IntrinsicElements["six-switch"] & JSXBase.HTMLAttributes; + "six-switch": LocalJSX.SixSwitch & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27. */ - "six-tab": LocalJSX.IntrinsicElements["six-tab"] & JSXBase.HTMLAttributes; + "six-tab": LocalJSX.SixTab & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27. */ - "six-tab-group": LocalJSX.IntrinsicElements["six-tab-group"] & JSXBase.HTMLAttributes; + "six-tab-group": LocalJSX.SixTabGroup & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27. */ - "six-tab-panel": LocalJSX.IntrinsicElements["six-tab-panel"] & JSXBase.HTMLAttributes; + "six-tab-panel": LocalJSX.SixTabPanel & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27. */ - "six-tag": LocalJSX.IntrinsicElements["six-tag"] & JSXBase.HTMLAttributes; + "six-tag": LocalJSX.SixTag & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27. */ - "six-textarea": LocalJSX.IntrinsicElements["six-textarea"] & JSXBase.HTMLAttributes; + "six-textarea": LocalJSX.SixTextarea & JSXBase.HTMLAttributes; + /** + * @since 5.0 + * @status stable + */ + "six-theme-switcher": LocalJSX.SixThemeSwitcher & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable */ - "six-tile": LocalJSX.IntrinsicElements["six-tile"] & JSXBase.HTMLAttributes; + "six-tile": LocalJSX.SixTile & JSXBase.HTMLAttributes; /** * @since 2.0.0 * @status experimental */ - "six-timepicker": LocalJSX.IntrinsicElements["six-timepicker"] & JSXBase.HTMLAttributes; + "six-timepicker": LocalJSX.SixTimepicker & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27. */ - "six-tooltip": LocalJSX.IntrinsicElements["six-tooltip"] & JSXBase.HTMLAttributes; + "six-tooltip": LocalJSX.SixTooltip & JSXBase.HTMLAttributes; } } } diff --git a/libraries/ui-library/src/components/six-alert/six-alert.scss b/libraries/ui-library/src/components/six-alert/six-alert.scss index 920f00792..37409b49b 100644 --- a/libraries/ui-library/src/components/six-alert/six-alert.scss +++ b/libraries/ui-library/src/components/six-alert/six-alert.scss @@ -15,8 +15,8 @@ position: relative; display: flex; align-items: stretch; - background-color: var(--six-color-white); - border: solid 1px var(--six-color-web-rock-200); + background-color: var(--six-alert-background-color); + border: solid 1px var(--six-alert-border-color); border-top-width: 3px; border-radius: var(--six-border-radius-medium); box-shadow: var(--box-shadow); @@ -24,7 +24,7 @@ font-size: var(--six-font-size-small); font-weight: var(--six-font-weight-normal); line-height: 1.6; - color: var(--six-color-web-rock-700); + color: var(--six-alert-color); opacity: 0; transform: scale(0.9); transition: @@ -58,10 +58,10 @@ } .alert--primary { - border-top-color: var(--six-color-web-rock-900); + border-top-color: var(--six-alert-primary-color); .alert__icon { - color: var(--six-color-web-rock-900); + color: var(--six-alert-primary-color); } } diff --git a/libraries/ui-library/src/components/six-button/six-button.scss b/libraries/ui-library/src/components/six-button/six-button.scss index 25a40ff57..3e282379c 100644 --- a/libraries/ui-library/src/components/six-button/six-button.scss +++ b/libraries/ui-library/src/components/six-button/six-button.scss @@ -70,47 +70,40 @@ outline-offset: var(--six-focus-ring-offset); } - &.button--secondary { - background-color: var(--six-color-white); - border-color: var(--six-color-web-rock-900); - color: var(--six-color-web-rock-900); + &.button--disabled:not(.button--link) { + background-color: var(--six-button-background-color-disabled); + border-color: var(--six-button-border-color-disabled); + color: var(--six-button-color-disabled); + } - &.button--disabled { - background-color: var(--six-color-web-rock-400); - border-color: var(--six-color-web-rock-400); - color: var(--six-color-web-rock-700); - } + &.button--secondary { + background-color: transparent; + border-color: var(--six-button-secondary-border-color); + color: var(--six-button-secondary-color); &:hover:not(.button--disabled) { - background-color: var(--six-color-web-rock-100); + background-color: var(--six-button-transparent-background-color-hover); } &:active:not(.button--disabled) { - background-color: var(--six-color-web-rock-300); - border-color: var(--six-color-web-rock-900); + opacity: 70%; border-width: 1px; } } &.button--primary { - background-color: var(--six-color-web-rock-900); - border-color: var(--six-color-web-rock-900); - color: var(--six-color-white); - - &.button--disabled { - background-color: var(--six-color-web-rock-400); - border-color: var(--six-color-web-rock-400); - color: var(--six-color-web-rock-700); - } + background-color: var(--six-button-primary-background-color); + border-color: var(--six-button-primary-background-color); + color: var(--six-button-primary-color); &:hover:not(.button--disabled) { - background-color: var(--six-color-web-rock-800); - border-color: var(--six-color-web-rock-800); + background-color: var(--six-button-primary-background-color-hover); + border-color: var(--six-button-primary-background-color-hover); } &:active:not(.button--disabled) { - background-color: var(--six-color-web-rock-900); - border-color: var(--six-color-web-rock-900); + background-color: var(--six-button-primary-background-color-active); + border-color: var(--six-button-primary-background-color-active); opacity: 70%; } } @@ -129,7 +122,7 @@ } &:active:not(.button--disabled) { - color: var(--six-color-action-light-to-be-defined); + color: var(--six-color-action-200); } } @@ -138,12 +131,6 @@ border-color: var(--six-color-danger-800); color: var(--six-color-white); - &.button--disabled { - background-color: var(--six-color-web-rock-400); - border-color: var(--six-color-web-rock-400); - color: var(--six-color-web-rock-700); - } - &:hover:not(.button--disabled) { background-color: var(--six-color-danger-900); border-color: var(--six-color-danger-900); @@ -161,12 +148,6 @@ border-color: var(--six-color-warning-700); color: var(--six-color-web-rock-900); - &.button--disabled { - background-color: var(--six-color-web-rock-400); - border-color: var(--six-color-web-rock-400); - color: var(--six-color-web-rock-700); - } - &:hover:not(.button--disabled) { background-color: var(--six-color-warning-800); border-color: var(--six-color-warning-800); @@ -184,12 +165,6 @@ border-color: var(--six-color-success-500); color: var(--six-color-web-rock-900); - &.button--disabled { - background-color: var(--six-color-web-rock-400); - border-color: var(--six-color-web-rock-400); - color: var(--six-color-web-rock-700); - } - &:hover:not(.button--disabled) { background-color: var(--six-color-success-600); border-color: var(--six-color-success-600); @@ -207,12 +182,6 @@ border-color: var(--six-color-action-500); color: var(--six-color-white); - &.button--disabled { - background-color: var(--six-color-web-rock-400); - border-color: var(--six-color-web-rock-400); - color: var(--six-color-web-rock-700); - } - &:hover:not(.button--disabled) { background-color: var(--six-color-action-600); border-color: var(--six-color-action-600); @@ -227,17 +196,11 @@ &.button--action-outline { border-color: var(--six-color-action-500); - background-color: var(--six-color-white); + background-color: transparent; color: var(--six-color-action-500); - &.button--disabled { - background-color: var(--six-color-web-rock-400); - border-color: var(--six-color-web-rock-400); - color: var(--six-color-web-rock-700); - } - &:hover:not(.button--disabled) { - background-color: var(--six-color-web-rock-100); + background-color: var(--six-button-transparent-background-color-hover); } &:active:not(.button--disabled) { diff --git a/libraries/ui-library/src/components/six-card/six-card.scss b/libraries/ui-library/src/components/six-card/six-card.scss index bdc910d1a..feda0e646 100644 --- a/libraries/ui-library/src/components/six-card/six-card.scss +++ b/libraries/ui-library/src/components/six-card/six-card.scss @@ -3,6 +3,6 @@ :host { display: inline-block; box-shadow: var(--six-shadow-medium); - border: 1px solid var(--six-color-web-rock-100); + border: 1px solid var(--six-card-border-color); padding: var(--six-spacing-medium); } diff --git a/libraries/ui-library/src/components/six-date/six-date.scss b/libraries/ui-library/src/components/six-date/six-date.scss index 603c2ee06..b2c3d60c6 100644 --- a/libraries/ui-library/src/components/six-date/six-date.scss +++ b/libraries/ui-library/src/components/six-date/six-date.scss @@ -23,9 +23,9 @@ pointer-events: none; padding: var(--six-spacing-small); padding-bottom: var(--six-spacing-x-large); - border: 1px solid var(--six-color-web-rock-300); + border: 1px solid var(--six-date-panel-border-color); box-shadow: var(--six-shadow-small); - background-color: var(--six-color-white); + background-color: var(--six-date-panel-background-color); // animation opacity: 0; @@ -68,7 +68,7 @@ header { padding: var(--six-spacing-x-small); &:hover { - background-color: var(--six-color-web-rock-100); + background-color: var(--six-date-selector-background-color-hover); } } } @@ -82,7 +82,7 @@ header { padding: var(--six-spacing-x-small); &:hover { - background-color: var(--six-color-web-rock-200); + background-color: var(--six-date-cell-background-color-hover); } } @@ -94,7 +94,7 @@ header { .cell--today .label { padding: var(--six-spacing-xxx-small); - border-bottom: 2px solid var(--six-color-web-rock-900); + border-bottom: 2px solid var(--six-date-cell-today-border-color); } .cell--selected.cell--today .label { @@ -128,7 +128,7 @@ header { } .cell--outdated { - color: var(--six-color-web-rock-400); + color: var(--six-date-cell-outdated-color); } .cell--today.cell--disabled .label { diff --git a/libraries/ui-library/src/components/six-details/six-details.scss b/libraries/ui-library/src/components/six-details/six-details.scss index 898b40a25..613e725ac 100644 --- a/libraries/ui-library/src/components/six-details/six-details.scss +++ b/libraries/ui-library/src/components/six-details/six-details.scss @@ -38,7 +38,7 @@ } &.details--open { - background-color: var(--six-color-web-rock-50); + background-color: var(--six-details-body-background-color); &:hover { border: none; diff --git a/libraries/ui-library/src/components/six-dialog/six-dialog.scss b/libraries/ui-library/src/components/six-dialog/six-dialog.scss index 951e7d104..c9f174651 100644 --- a/libraries/ui-library/src/components/six-dialog/six-dialog.scss +++ b/libraries/ui-library/src/components/six-dialog/six-dialog.scss @@ -20,7 +20,7 @@ bottom: 0; left: 0; z-index: var(--six-z-index-dialog); - color: var(--six-color-web-rock-900); + color: var(--six-dialog-color); &:not(.dialog--visible) { @include hidden; diff --git a/libraries/ui-library/src/components/six-dropdown/six-dropdown.scss b/libraries/ui-library/src/components/six-dropdown/six-dropdown.scss index ff4317c00..421345f95 100644 --- a/libraries/ui-library/src/components/six-dropdown/six-dropdown.scss +++ b/libraries/ui-library/src/components/six-dropdown/six-dropdown.scss @@ -27,9 +27,9 @@ font-size: var(--six-font-size-small); font-weight: var(--six-font-weight-normal); color: var(--color); - background-color: var(--six-panel-background-color); + background-color: var(--six-dropdown-background-color); border-radius: var(--six-border-radius-medium); - border: 1px solid var(--six-color-web-rock-300); + border: 1px solid var(--six-dropdown-border-color); box-shadow: var(--six-shadow-small); opacity: 0; pointer-events: none; diff --git a/libraries/ui-library/src/components/six-file-list-item/six-file-list-item.scss b/libraries/ui-library/src/components/six-file-list-item/six-file-list-item.scss index b0e2a0b49..74fd452dd 100644 --- a/libraries/ui-library/src/components/six-file-list-item/six-file-list-item.scss +++ b/libraries/ui-library/src/components/six-file-list-item/six-file-list-item.scss @@ -38,7 +38,7 @@ } &:hover:not(&--disabled) { - color: var(--six-color-web-rock-900); + color: var(--six-file-list-item-icon-color-hover); } } } diff --git a/libraries/ui-library/src/components/six-file-upload/six-file-upload.scss b/libraries/ui-library/src/components/six-file-upload/six-file-upload.scss index 8d211857e..5254079ff 100644 --- a/libraries/ui-library/src/components/six-file-upload/six-file-upload.scss +++ b/libraries/ui-library/src/components/six-file-upload/six-file-upload.scss @@ -1,6 +1,5 @@ @use 'src/global/component'; -$over-color: var(--six-color-action-light-to-be-defined); $disabled-color: var(--six-color-inactive); $transition: 0.3s; $margin: 1rem; @@ -69,7 +68,7 @@ $margin: 1rem; &:not(.six-file-upload--disabled) &__drop-zone:hover, &__drop-zone--hover { - background-color: $over-color; + background-color: var(--six-file-upload-drop-zone-hover-background-color); &.six-file-upload__drop-zone--compact { background-color: inherit; diff --git a/libraries/ui-library/src/components/six-footer/six-footer.scss b/libraries/ui-library/src/components/six-footer/six-footer.scss index 15b903a8f..50dd0ca20 100644 --- a/libraries/ui-library/src/components/six-footer/six-footer.scss +++ b/libraries/ui-library/src/components/six-footer/six-footer.scss @@ -5,7 +5,7 @@ } .six-footer { - color: var(--six-color-web-rock-900); + color: var(--six-footer-color); padding: var(--six-spacing-x-small) 0; text-align: center; width: 100%; diff --git a/libraries/ui-library/src/components/six-icon-button/readme.md b/libraries/ui-library/src/components/six-icon-button/readme.md index 66a7deeab..b51aba629 100644 --- a/libraries/ui-library/src/components/six-icon-button/readme.md +++ b/libraries/ui-library/src/components/six-icon-button/readme.md @@ -42,6 +42,7 @@ Icons buttons are simple, icon-only buttons that can be used for actions and in - [six-tab](../six-tab) - [six-tab-group](../six-tab-group) - [six-tag](../six-tag) + - [six-theme-switcher](../six-theme-switcher) - [six-tile](../six-tile) ### Depends on @@ -61,6 +62,7 @@ graph TD; six-tab --> six-icon-button six-tab-group --> six-icon-button six-tag --> six-icon-button + six-theme-switcher --> six-icon-button six-tile --> six-icon-button style six-icon-button fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/libraries/ui-library/src/components/six-item-picker/six-item-picker.scss b/libraries/ui-library/src/components/six-item-picker/six-item-picker.scss index bfc941dbd..571c4f544 100644 --- a/libraries/ui-library/src/components/six-item-picker/six-item-picker.scss +++ b/libraries/ui-library/src/components/six-item-picker/six-item-picker.scss @@ -30,7 +30,7 @@ color: var(--six-color-web-rock-500); &:hover { - background-color: var(--six-color-web-rock-100); + background-color: var(--six-item-picker-background-color-hover); border-radius: 100%; } @@ -39,7 +39,7 @@ } &--disabled { - color: var(--six-color-web-rock-300); + color: var(--six-item-picker-color-disabled); cursor: not-allowed; &:hover { @@ -47,7 +47,7 @@ } &:active { - color: var(--six-color-web-rock-300); + color: var(--six-item-picker-color-disabled); } } diff --git a/libraries/ui-library/src/components/six-language-switcher/six-language-switcher.scss b/libraries/ui-library/src/components/six-language-switcher/six-language-switcher.scss index 2d133122d..577d276d0 100644 --- a/libraries/ui-library/src/components/six-language-switcher/six-language-switcher.scss +++ b/libraries/ui-library/src/components/six-language-switcher/six-language-switcher.scss @@ -11,7 +11,7 @@ cursor: pointer; &:hover { - color: var(--six-color-web-rock-600); + color: var(--six-language-switcher-color-hover); } &:focus-visible { @@ -20,7 +20,7 @@ } &--selected { - color: var(--six-color-black); + color: var(--six-language-switcher-color-selected); text-decoration: underline; } } diff --git a/libraries/ui-library/src/components/six-menu-item/six-menu-item.scss b/libraries/ui-library/src/components/six-menu-item/six-menu-item.scss index e39ee9ae9..63cd589d2 100644 --- a/libraries/ui-library/src/components/six-menu-item/six-menu-item.scss +++ b/libraries/ui-library/src/components/six-menu-item/six-menu-item.scss @@ -1,6 +1,6 @@ @use 'src/global/component'; -:host { +:hst { display: block; } diff --git a/libraries/ui-library/src/components/six-picto/six-picto.scss b/libraries/ui-library/src/components/six-picto/six-picto.scss index ed7cbaef0..3e17e7f02 100644 --- a/libraries/ui-library/src/components/six-picto/six-picto.scss +++ b/libraries/ui-library/src/components/six-picto/six-picto.scss @@ -3,7 +3,7 @@ height: 24px; width: 24px; display: inline-block; - background-color: var(--six-color-black); + background-color: var(--six-picto-background-color); background-size: cover; background-repeat: no-repeat; } diff --git a/libraries/ui-library/src/components/six-range/six-range.scss b/libraries/ui-library/src/components/six-range/six-range.scss index bb554201f..4e1a47985 100644 --- a/libraries/ui-library/src/components/six-range/six-range.scss +++ b/libraries/ui-library/src/components/six-range/six-range.scss @@ -4,8 +4,8 @@ :host { --thumb-size: 14px; --tooltip-offset-y: 10px; - --track-color: var(--six-color-web-rock-900); - --thumb-color: var(--six-color-web-rock-900); + --track-color: var(--six-range-track-color); + --thumb-color: var(--six-range-thumb-color); --track-height: 3px; display: block; @@ -67,7 +67,7 @@ &::-moz-range-track { width: 100%; height: var(--track-height); - background-color: var(--six-progress-track-color); + background-color: red; border-radius: 3px; border: none; } @@ -115,16 +115,16 @@ &:disabled { &::-webkit-slider-thumb { cursor: not-allowed; - color: var(--six-color-web-rock-300); - border-color: var(--six-color-web-rock-300); - background-color: var(--six-color-web-rock-300); + color: var(--six-range-color-disabled); + border-color: var(--six-range-color-disabled); + background-color: var(--six-range-color-disabled); } &::-moz-range-thumb { cursor: not-allowed; - color: var(--six-color-web-rock-300); - border-color: var(--six-color-web-rock-300); - background-color: var(--six-color-web-rock-300); + color: var(--six-range-color-disabled); + border-color: var(--six-range-color-disabled); + background-color: var(--six-range-color-disabled); } } } diff --git a/libraries/ui-library/src/components/six-range/six-range.tsx b/libraries/ui-library/src/components/six-range/six-range.tsx index 01692f59b..c256ad27b 100644 --- a/libraries/ui-library/src/components/six-range/six-range.tsx +++ b/libraries/ui-library/src/components/six-range/six-range.tsx @@ -252,7 +252,7 @@ export class SixRange { this.nativeInput.style.background = '-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) ' + percent + - '%, var(--six-color-web-rock-300) ' + + '%, var(--six-range-track-color-disabled) ' + percent + '%)'; } diff --git a/libraries/ui-library/src/components/six-range/test/six-range.spec.tsx b/libraries/ui-library/src/components/six-range/test/six-range.spec.tsx new file mode 100644 index 000000000..f56305739 --- /dev/null +++ b/libraries/ui-library/src/components/six-range/test/six-range.spec.tsx @@ -0,0 +1,35 @@ +import { newSpecPage } from '@stencil/core/testing'; +import { SixRange } from '../six-range'; + +describe('six-range', () => { + it('renders', async () => { + global.ResizeObserver = jest.fn(); + + const page = await newSpecPage({ + components: [SixRange], + html: ``, + }); + expect(page.root).toEqualHtml(` + + +
+ +
+
+ +
+
+ + +
+ + + `); + }); +}); diff --git a/libraries/ui-library/src/components/six-rating/six-rating.scss b/libraries/ui-library/src/components/six-rating/six-rating.scss index b6cf0625f..61322c40c 100644 --- a/libraries/ui-library/src/components/six-rating/six-rating.scss +++ b/libraries/ui-library/src/components/six-rating/six-rating.scss @@ -2,8 +2,6 @@ @use '../../functional-components/form-control/form-control'; :host { - --six-rating-color: var(--six-color-web-rock-500); - --six-rating-color-active: var(--six-color-warning-700); --six-rating-color-disabled-opacity: 0.4; display: block; diff --git a/libraries/ui-library/src/components/six-root/index.html b/libraries/ui-library/src/components/six-root/index.html index e6cf684ee..f7bdddb94 100644 --- a/libraries/ui-library/src/components/six-root/index.html +++ b/libraries/ui-library/src/components/six-root/index.html @@ -22,9 +22,16 @@

Basic Layout with all elements

PROD will disable stage indication

+

Theme Support

+

+ six-root includes built-in theme management. Set the theme attribute to + light, dark, or auto (follows system preference). Use + six-theme-switcher to toggle themes. +

+
- + @@ -43,6 +50,11 @@

Basic Layout with all elements

 + + + + + @@ -113,7 +125,19 @@

Basic Layout with all elements

-

Content

+ +
+ +
+ Primary Button + Secondary Button +

+ + info + This is an info alert. Toggle the theme using the switcher in the header to see how components adapt. + + +

Content

Show some tasks... Toggle some text... @@ -235,6 +259,7 @@

Task

); const Select = getElements({ + root: '#app-root', header: 'six-header', leftSidebar: 'six-sidebar[slot="left-sidebar"]', tasksButton: '#show-tasks', diff --git a/libraries/ui-library/src/components/six-root/readme.md b/libraries/ui-library/src/components/six-root/readme.md index e0a879c58..fd385f3e9 100644 --- a/libraries/ui-library/src/components/six-root/readme.md +++ b/libraries/ui-library/src/components/six-root/readme.md @@ -9,11 +9,51 @@ Six root gives you a [basic layout]( Promise<{ theme: SixTheme; appliedTheme: "light" | "dark"; }>` + +Gets the current theme and applied theme. + +#### Returns + +Type: `Promise<{ theme: SixTheme; appliedTheme: "light" | "dark"; }>` + + + +### `setTheme(theme: SixTheme) => Promise` + +Sets the theme. + +#### Parameters + +| Name | Type | Description | +| ------- | ----------------------------- | ----------- | +| `theme` | `"auto" \| "light" \| "dark"` | | + +#### Returns + +Type: `Promise` + + + +### `toggleTheme() => Promise` + +Toggles between light and dark theme. + +#### Returns + +Type: `Promise` + + ## Slots diff --git a/libraries/ui-library/src/components/six-root/six-root.scss b/libraries/ui-library/src/components/six-root/six-root.scss index 91aaeeb6a..d11fe495d 100644 --- a/libraries/ui-library/src/components/six-root/six-root.scss +++ b/libraries/ui-library/src/components/six-root/six-root.scss @@ -18,12 +18,14 @@ } &__left-sidebar { + background: var(--six-root-main-background-color); height: 100%; overflow: scroll; grid-column: 1 / 2; } &__right-sidebar { + background: var(--six-root-main-background-color); height: 100%; overflow: scroll; grid-column: 3 / 4; @@ -39,17 +41,14 @@ header { position: sticky; top: 0; z-index: var(--six-z-index-header); - // border fix - margin-right: 2px; } main { height: 100%; - display: flex; flex-direction: column; justify-content: space-between; - + background: var(--six-root-main-background-color); grid-column: 2 / 3; overflow: auto; } diff --git a/libraries/ui-library/src/components/six-root/six-root.tsx b/libraries/ui-library/src/components/six-root/six-root.tsx index c5b2b81f0..1b098e773 100644 --- a/libraries/ui-library/src/components/six-root/six-root.tsx +++ b/libraries/ui-library/src/components/six-root/six-root.tsx @@ -1,6 +1,8 @@ -import { Component, Element, h, Prop } from '@stencil/core'; +import { Component, Element, h, Prop, Watch, Method } from '@stencil/core'; import { StageType } from '../six-stage-indicator/six-stage-indicator'; +export type SixTheme = 'light' | 'dark' | 'auto'; + /** * @since 1.0 * @status stable @@ -18,6 +20,9 @@ import { StageType } from '../six-stage-indicator/six-stage-indicator'; shadow: true, }) export class SixRoot { + private mediaQuery?: MediaQueryList; + private mediaQueryHandler?: (e: MediaQueryListEvent) => void; + @Element() host!: HTMLSixRootElement; /** Defines whether the content section should be padded */ @@ -30,6 +35,155 @@ export class SixRoot { /** Defines the version of the application*/ @Prop() version = ''; + /** Defines the theme */ + @Prop({ mutable: true, reflect: true }) theme: SixTheme = 'light'; + + @Watch('theme') + handleThemeChange() { + this.applyTheme(); + } + + connectedCallback() { + this.setupSystemPreferenceDetection(); + this.loadSavedTheme(); + this.applyTheme(); + this.exposeGlobalAPI(); + } + + disconnectedCallback() { + this.cleanupSystemPreferenceDetection(); + this.cleanupGlobalAPI(); + } + + componentDidLoad() { + this.applyTheme(); + } + + /** Sets the theme. */ + @Method() + async setTheme(theme: SixTheme) { + if (!['light', 'dark', 'auto'].includes(theme)) { + console.warn(`[six-root] Invalid theme: ${theme}. Using 'light' as fallback.`); + theme = 'light'; + } + + this.theme = theme; + this.saveTheme(theme); + this.applyTheme(); + } + + /** Gets the current theme and applied theme. */ + @Method() + async getTheme(): Promise<{ theme: SixTheme; appliedTheme: 'light' | 'dark' }> { + return { + theme: this.theme, + appliedTheme: this.getAppliedTheme(), + }; + } + + /** Toggles between light and dark theme. */ + @Method() + async toggleTheme() { + const currentApplied = this.getAppliedTheme(); + const newTheme = currentApplied === 'dark' ? 'light' : 'dark'; + await this.setTheme(newTheme); + } + + private setupSystemPreferenceDetection() { + this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); + this.mediaQueryHandler = () => { + if (this.theme === 'auto') { + this.applyTheme(); + } + }; + this.mediaQuery.addEventListener('change', this.mediaQueryHandler); + } + + private cleanupSystemPreferenceDetection() { + if (this.mediaQuery && this.mediaQueryHandler) { + this.mediaQuery.removeEventListener('change', this.mediaQueryHandler); + } + } + + private getSystemPreference(): 'light' | 'dark' { + if (this.mediaQuery && this.mediaQuery.matches) { + return 'dark'; + } + return 'light'; + } + + private getAppliedTheme(): 'light' | 'dark' { + if (this.theme === 'auto') { + return this.getSystemPreference(); + } + return this.theme as 'light' | 'dark'; + } + + private applyTheme() { + const root = document.documentElement; + const appliedTheme = this.getAppliedTheme(); + + if (this.theme === 'auto') { + // No attribute means the stylesheet follows the OS preference (prefers-color-scheme) + root.removeAttribute('data-six-theme'); + } else { + root.setAttribute('data-six-theme', this.theme); + } + + this.updateMetaThemeColor(appliedTheme); + + // Notify listeners like six-theme-switcher so they can update their state + document.dispatchEvent(new CustomEvent('six-root-theme-change', { detail: { theme: this.theme, appliedTheme } })); + } + + private updateMetaThemeColor(theme: 'light' | 'dark') { + let metaThemeColor = document.querySelector('meta[name="theme-color"]'); + + if (!metaThemeColor) { + metaThemeColor = document.createElement('meta'); + metaThemeColor.setAttribute('name', 'theme-color'); + document.head.appendChild(metaThemeColor); + } + + const colors = { + light: '#ffffff', + dark: '#262626', // --six-color-web-rock-900, the dark page background + }; + + metaThemeColor.setAttribute('content', colors[theme] || colors.light); + } + + private loadSavedTheme() { + const savedTheme = localStorage.getItem('six-theme') as SixTheme | null; + if (savedTheme && ['light', 'dark', 'auto'].includes(savedTheme)) { + this.theme = savedTheme; + } + } + + private saveTheme(theme: SixTheme) { + try { + localStorage.setItem('six-theme', theme); + } catch (e) { + console.warn('[six-root] Failed to save theme to localStorage:', e); + } + } + + private exposeGlobalAPI() { + if (!window.SixTheme) { + window.SixTheme = { + setTheme: (theme: SixTheme) => this.setTheme(theme), + getTheme: () => this.getTheme(), + toggle: () => this.toggleTheme(), + }; + } + } + + private cleanupGlobalAPI() { + if (window.SixTheme) { + delete window.SixTheme; + } + } + render() { return ( @@ -55,3 +209,13 @@ export class SixRoot { ); } } + +declare global { + interface Window { + SixTheme?: { + setTheme: (theme: SixTheme) => Promise; + getTheme: () => Promise<{ theme: SixTheme; appliedTheme: 'light' | 'dark' }>; + toggle: () => Promise; + }; + } +} diff --git a/libraries/ui-library/src/components/six-root/test/six-root.spec.tsx b/libraries/ui-library/src/components/six-root/test/six-root.spec.tsx new file mode 100644 index 000000000..82651341e --- /dev/null +++ b/libraries/ui-library/src/components/six-root/test/six-root.spec.tsx @@ -0,0 +1,72 @@ +import { newSpecPage } from '@stencil/core/testing'; +import { SixRoot } from '../six-root'; + +describe('six-root', () => { + it('renders', async () => { + const page = await newSpecPage({ + components: [SixRoot], + html: ``, + }); + + expect(page.root).toEqualHtml(` + + + +
+ +
+ +
+
+ +
+
+ +
+
+ + + + + `); + }); + + it('applies theme correctly', async () => { + const page = await newSpecPage({ + components: [SixRoot], + html: ``, + }); + + expect(page.root?.getAttribute('theme')).toBe('dark'); + }); + + it('can toggle theme', async () => { + const page = await newSpecPage({ + components: [SixRoot], + html: ``, + }); + + const root = page.rootInstance as SixRoot; + await root.toggleTheme(); + + const theme = await root.getTheme(); + expect(theme.theme).toBe('dark'); + }); + + it('can set theme programmatically', async () => { + const page = await newSpecPage({ + components: [SixRoot], + html: ``, + }); + + const root = page.rootInstance as SixRoot; + await root.setTheme('dark'); + + const theme = await root.getTheme(); + expect(theme.theme).toBe('dark'); + }); +}); diff --git a/libraries/ui-library/src/components/six-sidebar-item/six-sidebar-item.scss b/libraries/ui-library/src/components/six-sidebar-item/six-sidebar-item.scss index b226bfb33..2758ad473 100644 --- a/libraries/ui-library/src/components/six-sidebar-item/six-sidebar-item.scss +++ b/libraries/ui-library/src/components/six-sidebar-item/six-sidebar-item.scss @@ -17,7 +17,7 @@ a { align-items: center; &:hover:not(.sidebar-item--disabled) { - color: var(--six-color-web-rock-600); + color: var(--six-sidebar-item-color-hover); } &.sidebar-item--disabled { diff --git a/libraries/ui-library/src/components/six-sidebar/six-sidebar.scss b/libraries/ui-library/src/components/six-sidebar/six-sidebar.scss index 576bc3adb..2d4858df2 100644 --- a/libraries/ui-library/src/components/six-sidebar/six-sidebar.scss +++ b/libraries/ui-library/src/components/six-sidebar/six-sidebar.scss @@ -14,7 +14,7 @@ overflow: auto; &.sidebar--open { - border-right: 1px solid var(--six-color-web-rock-300); + border-right: 1px solid var(--six-sidebar-border-color); } &:not(.sidebar--visible) { diff --git a/libraries/ui-library/src/components/six-spinner/six-spinner.tsx b/libraries/ui-library/src/components/six-spinner/six-spinner.tsx index 49ff0762b..36021836d 100644 --- a/libraries/ui-library/src/components/six-spinner/six-spinner.tsx +++ b/libraries/ui-library/src/components/six-spinner/six-spinner.tsx @@ -61,21 +61,21 @@ export class SixSpinner { + + + + + + + + six-theme-switcher + + +
+

Theme Switcher

+ +

+ The six-theme-switcher is a simple icon button that toggles between light and dark themes. When a + six-root is present it syncs with its theme management system (including persistence); without + six-root it toggles the data-six-theme attribute on the root element directly. +

+ +
+
+ +
+
+ +

Sizes

+ +

Theme switchers inherit the same size options as icon buttons.

+ +
+
+ + + + + +
+
+ +

Disabled

+ +

Set the disabled attribute to disable the theme switcher.

+ +
+
+ +
+
+ +

Custom Label

+ +

+ Provide a custom label for screen readers using the label attribute. This improves accessibility. +

+ +
+
+ +
+
+ +

With Tooltip

+ +

Wrap a tooltip around the theme switcher to provide contextual information to the user.

+ +
+
+ + + +
+
+ +

In Header

+ +

The theme switcher is commonly used in application headers.

+ +
+
+ + + + + + + + + + + + + + + + + + + +
+
+
+ + diff --git a/libraries/ui-library/src/components/six-theme-switcher/readme.md b/libraries/ui-library/src/components/six-theme-switcher/readme.md new file mode 100644 index 000000000..6ee5d88eb --- /dev/null +++ b/libraries/ui-library/src/components/six-theme-switcher/readme.md @@ -0,0 +1,49 @@ +# six-theme-switcher + +A simple icon button that toggles between light and dark themes. Syncs with six-root's theme management system when present, and toggles the data-six-theme attribute directly otherwise. + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| ---------- | ---------- | ----------------------------------------------- | ----------------------------------------------------------------------------------- | ---------------- | +| `disabled` | `disabled` | Set to true to disable the theme switcher. | `boolean` | `false` | +| `label` | `label` | A description that gets read by screen readers. | `string` | `'Toggle theme'` | +| `size` | `size` | The icon button's size. | `"large" \| "medium" \| "small" \| "xLarge" \| "xSmall" \| "xxLarge" \| "xxxLarge"` | `'medium'` | + + +## Events + +| Event | Description | Type | +| --------------------------- | ---------------------------------- | ------------------------ | +| `six-theme-switcher-change` | Emitted when the theme is changed. | `CustomEvent` | + + +## Shadow Parts + +| Part | Description | +| -------- | ----------------------------- | +| `"base"` | The component's base wrapper. | + + +## Dependencies + +### Depends on + +- [six-icon-button](../six-icon-button) + +### Graph +```mermaid +graph TD; + six-theme-switcher --> six-icon-button + six-icon-button --> six-icon + style six-theme-switcher fill:#f9f,stroke:#333,stroke-width:4px +``` + +---------------------------------------------- + +Copyright © 2021-present SIX-Group diff --git a/libraries/ui-library/src/components/six-theme-switcher/six-theme-switcher.scss b/libraries/ui-library/src/components/six-theme-switcher/six-theme-switcher.scss new file mode 100644 index 000000000..39b43a9a6 --- /dev/null +++ b/libraries/ui-library/src/components/six-theme-switcher/six-theme-switcher.scss @@ -0,0 +1,5 @@ +@import 'src/global/component'; + +:host { + display: inline-block; +} diff --git a/libraries/ui-library/src/components/six-theme-switcher/six-theme-switcher.tsx b/libraries/ui-library/src/components/six-theme-switcher/six-theme-switcher.tsx new file mode 100644 index 000000000..c1a372dce --- /dev/null +++ b/libraries/ui-library/src/components/six-theme-switcher/six-theme-switcher.tsx @@ -0,0 +1,145 @@ +import { Component, Event, EventEmitter, h, Prop, State } from '@stencil/core'; +import { EmptyPayload } from '../../utils/types'; + +export type SixTheme = 'light' | 'dark' | 'auto'; + +/** + * @since 5.0 + * @status stable + * + * @part base - The component's base wrapper. + */ + +@Component({ + tag: 'six-theme-switcher', + styleUrl: 'six-theme-switcher.scss', + shadow: true, +}) +export class SixThemeSwitcher { + private attributeObserver?: MutationObserver; + private mediaQuery?: MediaQueryList; + + @State() currentTheme: SixTheme = 'light'; + @State() appliedTheme: 'light' | 'dark' = 'light'; + + /** The icon button's size. */ + @Prop({ reflect: true }) size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' = 'medium'; + + /** Set to true to disable the theme switcher. */ + @Prop({ reflect: true }) disabled = false; + + /** A description that gets read by screen readers. */ + @Prop({ reflect: true }) label = 'Toggle theme'; + + /** Emitted when the theme is changed. */ + @Event({ eventName: 'six-theme-switcher-change' }) sixThemeChange!: EventEmitter; + + async connectedCallback() { + await this.updateThemeState(); + this.setupThemeListener(); + } + + disconnectedCallback() { + this.cleanupThemeListener(); + } + + componentDidLoad() { + this.updateThemeState(); + } + + private setupThemeListener() { + document.addEventListener('six-root-theme-change', this.handleThemeChange); + + // Keep in sync when data-six-theme is toggled directly on the root element + if (typeof MutationObserver !== 'undefined') { + this.attributeObserver = new MutationObserver(this.handleThemeChange); + this.attributeObserver.observe(document.documentElement, { + attributes: true, + attributeFilter: ['data-six-theme'], + }); + } + + // Keep in sync when the OS preference changes while no explicit theme is set + this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); + this.mediaQuery.addEventListener('change', this.handleThemeChange); + } + + private cleanupThemeListener() { + document.removeEventListener('six-root-theme-change', this.handleThemeChange); + this.attributeObserver?.disconnect(); + this.mediaQuery?.removeEventListener('change', this.handleThemeChange); + } + + private handleThemeChange = async () => { + await this.updateThemeState(); + }; + + /** + * Reads the theme from the data-six-theme attribute / OS preference. + * Used when no six-root is present to provide the SixTheme API. + */ + private getThemeFromDocument(): { theme: SixTheme; appliedTheme: 'light' | 'dark' } { + const attribute = document.documentElement.getAttribute('data-six-theme'); + if (attribute === 'dark' || attribute === 'light') { + return { theme: attribute, appliedTheme: attribute }; + } + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + return { theme: 'auto', appliedTheme: prefersDark ? 'dark' : 'light' }; + } + + private async updateThemeState() { + if (window.SixTheme) { + try { + const { theme, appliedTheme } = await window.SixTheme.getTheme(); + this.currentTheme = theme; + this.appliedTheme = appliedTheme; + return; + } catch (e) { + console.warn('[six-theme-switcher] Failed to get theme:', e); + } + } + + const { theme, appliedTheme } = this.getThemeFromDocument(); + this.currentTheme = theme; + this.appliedTheme = appliedTheme; + } + + private handleClick = async () => { + if (this.disabled) { + return; + } + + if (window.SixTheme) { + try { + await window.SixTheme.toggle(); + } catch (e) { + console.warn('[six-theme-switcher] Failed to toggle theme:', e); + return; + } + } else { + // No six-root present — toggle the data-six-theme attribute directly + const { appliedTheme } = this.getThemeFromDocument(); + document.documentElement.setAttribute('data-six-theme', appliedTheme === 'dark' ? 'light' : 'dark'); + } + + await this.updateThemeState(); + this.sixThemeChange.emit(); + }; + + private getIconName(): string { + return this.appliedTheme === 'dark' ? 'light_mode' : 'dark_mode'; + } + + render() { + return ( + + ); + } +} diff --git a/libraries/ui-library/src/components/six-theme-switcher/test/six-theme-switcher.spec.tsx b/libraries/ui-library/src/components/six-theme-switcher/test/six-theme-switcher.spec.tsx new file mode 100644 index 000000000..b7970a253 --- /dev/null +++ b/libraries/ui-library/src/components/six-theme-switcher/test/six-theme-switcher.spec.tsx @@ -0,0 +1,67 @@ +import { newSpecPage } from '@stencil/core/testing'; +import { SixThemeSwitcher } from '../six-theme-switcher'; + +describe('six-theme-switcher', () => { + it('renders', async () => { + const page = await newSpecPage({ + components: [SixThemeSwitcher], + html: ``, + }); + + // Note: the part="base" attribute is not rendered by Stencil's mock DOM (it is in real browsers) + expect(page.root).toEqualHtml(` + + + + + + `); + }); + + it('renders with custom size', async () => { + const page = await newSpecPage({ + components: [SixThemeSwitcher], + html: ``, + }); + + const iconButton = page.root?.shadowRoot?.querySelector('six-icon-button'); + expect(iconButton?.getAttribute('size')).toBe('large'); + }); + + it('renders with disabled state', async () => { + const page = await newSpecPage({ + components: [SixThemeSwitcher], + html: ``, + }); + + const iconButton = page.root?.shadowRoot?.querySelector('six-icon-button'); + expect(iconButton?.hasAttribute('disabled')).toBe(true); + }); + + it('renders with custom label', async () => { + const page = await newSpecPage({ + components: [SixThemeSwitcher], + html: ``, + }); + + const iconButton = page.root?.shadowRoot?.querySelector('six-icon-button'); + expect(iconButton?.getAttribute('label')).toBe('Custom label'); + }); + + it('toggles the data-six-theme attribute directly when no six-root is present', async () => { + const page = await newSpecPage({ + components: [SixThemeSwitcher], + html: ``, + }); + + const instance = page.rootInstance as SixThemeSwitcher; + + await instance['handleClick'](); + await page.waitForChanges(); + expect(page.doc.documentElement.getAttribute('data-six-theme')).toBe('dark'); + + await instance['handleClick'](); + await page.waitForChanges(); + expect(page.doc.documentElement.getAttribute('data-six-theme')).toBe('light'); + }); +}); diff --git a/libraries/ui-library/src/components/six-tile/six-tile.scss b/libraries/ui-library/src/components/six-tile/six-tile.scss index 2221ef84e..1122681a3 100644 --- a/libraries/ui-library/src/components/six-tile/six-tile.scss +++ b/libraries/ui-library/src/components/six-tile/six-tile.scss @@ -23,7 +23,7 @@ min-height: var(--tile-size); width: var(--tile-size); - background-color: var(--six-color-clay-50); + background-color: var(--six-tile-background-color); display: inline-grid; grid-template-columns: 100%; @@ -101,7 +101,7 @@ justify-content: center; cursor: pointer; font-weight: var(--six-font-weight-normal); - color: var(--six-color-web-rock-900); + color: var(--six-tile-footer-color); &--small { @extend .tile__footer; diff --git a/libraries/ui-library/src/components/six-timepicker/six-timepicker.scss b/libraries/ui-library/src/components/six-timepicker/six-timepicker.scss index f1d9829b7..9238702e5 100644 --- a/libraries/ui-library/src/components/six-timepicker/six-timepicker.scss +++ b/libraries/ui-library/src/components/six-timepicker/six-timepicker.scss @@ -44,12 +44,9 @@ display: flex; justify-content: center; min-width: min-content; - background-color: white; + background-color: var(--six-timepicker-background-color); padding: 0.5em; - box-shadow: - 0 2px 4px -1px rgb(0 0 0 / 20%), - 0 4px 5px 0 rgb(0 0 0 / 14%), - 0 1px 10px 0 rgb(0 0 0 / 12%); + box-shadow: var(--six-shadow-medium); user-select: none; position: absolute; z-index: var(--six-z-index-dropdown); diff --git a/libraries/ui-library/src/global/base.css b/libraries/ui-library/src/global/base.css index 80a48b231..b1f787012 100644 --- a/libraries/ui-library/src/global/base.css +++ b/libraries/ui-library/src/global/base.css @@ -9,6 +9,7 @@ @import '~@fontsource/noto-sans/latin.css'; @import 'base/colors.css'; +@import 'base/dark-theme.css'; @import 'base/typography.css'; body > div.container { @@ -97,15 +98,6 @@ body > div.container { --six-focus-shadow: 0 0 0 var(--six-focus-offset-input); --six-input-focus-shadow: var(--six-focus-shadow) var(--six-input-border-color-focus); - --six-input-background-color: var(--six-color-white); - --six-input-background-color-hover: var(--six-color-white); - --six-input-background-color-focus: var(--six-color-white); - --six-input-background-color-disabled: var(--six-color-web-rock-100); - --six-input-border-color: var(--six-color-web-rock-400); - --six-input-border-color-hover: var(--six-color-web-rock-600); - --six-input-border-color-focus: var(--six-color-action-600); - --six-input-border-color-danger: var(--six-color-danger-800); - --six-input-border-color-disabled: var(--six-color-web-rock-400); --six-input-border-radius-small: var(--six-border-radius-medium); --six-input-border-radius-medium: var(--six-border-radius-medium); --six-input-border-radius-large: var(--six-border-radius-medium); @@ -114,15 +106,6 @@ body > div.container { --six-input-font-size-medium: var(--six-font-size-small); --six-input-font-size-large: var(--six-font-size-medium); --six-input-letter-spacing: var(--six-letter-spacing-normal); - --six-input-color: var(--six-color-web-rock-900); - --six-input-color-hover: var(--six-color-web-rock-900); - --six-input-color-focus: var(--six-color-web-rock-900); - --six-input-color-disabled: var(--six-color-web-rock-600); - --six-input-icon-color: var(--six-color-web-rock-900); - --six-input-icon-color-hover: var(--six-color-web-rock-600); - --six-input-icon-color-focus: var(--six-color-web-rock-900); - --six-input-placeholder-color: var(--six-color-web-rock-500); - --six-input-placeholder-color-disabled: var(--six-color-web-rock-500); --six-input-spacing-small: var(--six-spacing-small); --six-input-spacing-medium: var(--six-spacing-medium); --six-input-spacing-large: var(--six-spacing-large); @@ -132,76 +115,24 @@ body > div.container { --six-input-label-font-size-small: var(--six-font-size-xx-small); --six-input-label-font-size-medium: var(--six-font-size-x-small); --six-input-label-font-size-large: var(--six-font-size-small); - --six-input-label-color: var(--six-color-web-rock-900); - --six-input-label-color-disabled: var(--six-color-web-rock-600); --six-input-help-text-font-size-small: var(--six-font-size-xx-small); --six-input-help-text-font-size-medium: var(--six-font-size-x-small); --six-input-help-text-font-size-large: var(--six-font-size-small); - --six-input-help-text-color: var(--six-color-web-rock-600); - --six-input-help-text-color-disabled: var(--six-color-web-rock-600); - --six-overlay-background-color: var(--six-color-web-rock-900); - - --six-panel-background-color: var(--six-color-white); - --six-panel-border-color: var(--six-color-clay-50); - - --six-progress-track-color: var(--six-color-web-rock-300); - --six-progress-indicator-color: var(--six-color-danger-800); - --six-progress-label-color: var(--six-color-white); - - /* add component specific variables here (used for a dedicated component) */ - --six-tooltip-background-color: var(--six-color-web-rock-900); - --six-tooltip-color: var(--six-color-white); --six-tooltip-arrow-size: 5px; --six-tooltip-arrow-start-end-offset: 8px; --six-tooltip-font-size: var(--six-font-size-small); --six-tooltip-font-weight: var(--six-font-weight-normal); --six-tooltip-line-height: var(--six-line-height-dense); - --six-avatar-color: var(--six-color-white); - --six-avatar-background-color: var(--six-color-web-rock-300); - - --six-checkbox-color: var(--six-color-white); - --six-selection-control-color: var(--six-color-action-500); - --six-selection-control-color-disabled: var(--six-color-web-rock-400); --six-selection-control-toggle-size: 1rem; - --six-details-color: var(--six-color-web-rock-900); - - --six-drawer-color: var(--six-color-web-rock-900); - --six-drawer-background-color: var(--six-color-clay-50); - - --six-footer-background-color: var(--six-color-white); - - --six-header-background-color: var(--six-color-white); - --six-header-border-color: var(--six-color-web-rock-300); - --six-header-border-color-open: var(--six-color-web-rock-900); --six-header-border-with: 1px; - --six-header-selected-app-color-hover: var(--six-color-web-rock-600); --six-header-height: 3.75rem; --six-header-border-height: var(--six-spacing-xx-small); - --six-menu-divider-color: var(--six-color-clay-50); - --six-menu-item-background-color: var(--six-color-clay-50); - - --six-search-color: var(--six-color-action-600); - - --six-sidebar-color: var(--six-color-web-rock-900); - --six-sidebar-background-color: var(--six-color-white); - --six-sidebar-hover-background-color: var(--six-color-clay-50); - --six-sidebar-header-background-color: var(--six-color-clay-50); - --six-sidebar-item-background-color: var(--six-color-web-rock-50); - - --six-tab-color: var(--six-color-web-rock-900); - --six-tab-color-active: var(--six-color-web-rock-900); - --six-tab-color-hover: var(--six-color-web-rock-700); - --six-tab-color-disabled: var(--six-color-web-rock-400); - --six-tab-border-color: var(--six-color-white); --six-tab-border-width: 3px; - --six-tab-border-color-active: var(--six-color-web-rock-900); - --six-rating-color: var(--six-color-web-rock-500); - --six-rating-color-active: var(--six-color-success-600); --six-rating-color-disabled-opacity: 0.4; } diff --git a/libraries/ui-library/src/global/base/colors.css b/libraries/ui-library/src/global/base/colors.css index c8cf4cff9..b14f2d847 100644 --- a/libraries/ui-library/src/global/base/colors.css +++ b/libraries/ui-library/src/global/base/colors.css @@ -1,3 +1,17 @@ +/* ============================================ + DYNAMIC THEME COLOR SYSTEM + ============================================ + Light theme is default. + Dark mode is activated via the data-six-theme="dark" + attribute on , or automatically via the OS + preference when no attribute is set — see + dark-theme.css for the dark overrides. + + The palette tokens defined in :root below are identical + in both themes; only the semantic component tokens are + remapped in dark mode. +============================================ */ + :root { --six-color-red: #de3919; --six-color-black: #000; @@ -16,26 +30,254 @@ --six-color-web-rock-100: #f6f6f6; --six-color-web-rock-50: #fbfbfb; + --six-color-clay-900: #5f574f; + --six-color-clay-800: #6f665d; + --six-color-clay-700: #7e756c; + --six-color-clay-600: #8e847b; + --six-color-clay-500: #9e9389; + --six-color-clay-400: #aea297; + --six-color-clay-300: #beb1a6; --six-color-clay-200: #ada398; + --six-color-clay-100: #d6d1cd; --six-color-clay-50: #ebe8e7; --six-color-danger-900: #c52c0f; --six-color-danger-800: #de3919; - --six-color-danger-light-to-be-defined: #f58c78; + --six-color-danger-700: #ec411d; + --six-color-danger-600: #fa4823; + --six-color-danger-500: #ff4e27; + --six-color-danger-400: #ff6b46; + --six-color-danger-300: #ff8767; + --six-color-danger-200: #ffa992; + --six-color-danger-100: #ffcbbd; + --six-color-danger-50: #fce9e7; + --six-color-warning-900: #ea7719; --six-color-warning-800: #ef9f25; --six-color-warning-700: #f2b72c; - --six-color-warning-light-to-be-defined: #f9deb4; + --six-color-warning-600: #f5ce33; + --six-color-warning-500: #f5df36; + --six-color-warning-400: #f7e454; + --six-color-warning-300: #f9e973; + --six-color-warning-200: #fbef9a; + --six-color-warning-100: #fdf5c2; + --six-color-warning-50: #fefce6; + --six-color-success-900: #008600; + --six-color-success-800: #09a800; + --six-color-success-700: #3abd00; --six-color-success-600: #58d200; --six-color-success-500: #6ae300; - --six-color-success-light-to-be-defined: #aaff6c; + --six-color-success-400: #85e845; + --six-color-success-300: #a0ee6e; + --six-color-success-200: #bef39b; + --six-color-success-100: #d9f8c3; + --six-color-success-50: #f0fde7; + --six-color-action-900: #1045a1; + --six-color-action-800: #1764c0; + --six-color-action-700: #1a75d2; --six-color-action-600: #1f87e5; --six-color-action-500: #2196f3; - --six-color-action-light-to-be-defined: #a8d0f5; + --six-color-action-400: #42a4f5; + --six-color-action-300: #63b4f6; + --six-color-action-200: #90c9f9; + --six-color-action-100: #bbdefb; + --six-color-action-50: #e3f2fd; + + --six-color-marine-900: #002c5f; + --six-color-marine-800: #19416f; + --six-color-marine-700: #33567e; + --six-color-marine-600: #4c6b8f; + --six-color-marine-500: #66809f; + --six-color-marine-400: #7f95af; + --six-color-marine-300: #99aabe; + --six-color-marine-200: #b2bfcf; + --six-color-marine-100: #ccd4df; + --six-color-marine-50: #e5e9ef; + + --six-color-horizon-900: #88c1e4; + --six-color-horizon-800: #94c7e7; + --six-color-horizon-700: #9fcde9; + --six-color-horizon-600: #abd3ec; + --six-color-horizon-500: #b7d9ee; + --six-color-horizon-400: #c3e0f1; + --six-color-horizon-300: #cfe6f4; + --six-color-horizon-200: #dbecf7; + --six-color-horizon-100: #e7f2f9; + --six-color-horizon-50: #f3f9fc; + + --six-color-indigo-900: #5c1bb8; + --six-color-indigo-800: #6c32bf; + --six-color-indigo-700: #7d49c6; + --six-color-indigo-600: #8d5fcd; + --six-color-indigo-500: #9d76d4; + --six-color-indigo-400: #ae8ddc; + --six-color-indigo-300: #bea4e3; + --six-color-indigo-200: #cebbea; + --six-color-indigo-100: #ded1f1; + --six-color-indigo-50: #efe8f8; --six-color-inactive: #c3c3c3; --six-focus-ring-color: var(--six-color-action-600); } + +html { + color: black; + + --six-alert-background-color: var(--six-color-white); + --six-alert-border-color: var(--six-color-web-rock-200); + --six-alert-color: var(--six-color-web-rock-700); + --six-alert-primary-color: var(--six-color-web-rock-900); + + --six-card-border-color: var(--six-color-web-rock-100); + + --six-file-upload-drop-zone-hover-background-color: var(--six-color-action-200); + + --six-picto-background-color: var(--six-color-black); + + --six-item-picker-color-disabled: var(--six-color-web-rock-300); + --six-item-picker-background-color-hover: var(--six-color-web-rock-100); + + --six-file-list-item-icon-color-hover: var(--six-color-web-rock-900); + + --six-dropdown-border-color: var(--six-color-web-rock-300); + --six-dropdown-background-color: var(--six-color-white); + + --six-date-panel-background-color: var(--six-color-white); + --six-date-panel-border-color: var(--six-color-web-rock-300); + --six-date-cell-background-color-hover: var(--six-color-web-rock-200); + --six-date-cell-today-border-color: var(--six-color-web-rock-900); + --six-date-selector-background-color-hover: var(--six-color-web-rock-100); + --six-date-cell-outdated-color: var(--six-color-web-rock-400); + + --six-dialog-color: var(--six-color-web-rock-900); + + --six-logo-bme-color: var(--six-color-web-rock-900); + + --six-language-switcher-color-hover: var(--six-color-web-rock-600); + --six-language-switcher-color-selected: var(--six-color-black); + + --six-button-transparent-background-color-hover: var(--six-color-web-rock-100); + --six-button-secondary-border-color: var(--six-color-web-rock-900); + --six-button-secondary-color: var(--six-color-web-rock-900); + --six-button-primary-background-color: var(--six-color-web-rock-900); + --six-button-primary-background-color-hover: var(--six-color-web-rock-800); + --six-button-primary-background-color-active: var(--six-color-web-rock-900); + --six-button-primary-color: var(--six-color-white); + --six-button-background-color-disabled: var(--six-color-web-rock-400); + --six-button-border-color-disabled: var(--six-color-web-rock-400); + --six-button-color-disabled: var(--six-color-web-rock-700); + + --six-input-background-color: var(--six-color-white); + --six-input-background-color-hover: var(--six-color-white); + --six-input-background-color-focus: var(--six-color-white); + --six-input-background-color-disabled: var(--six-color-web-rock-100); + --six-input-border-color: var(--six-color-web-rock-400); + --six-input-border-color-hover: var(--six-color-web-rock-600); + --six-input-border-color-focus: var(--six-color-action-600); + --six-input-border-color-danger: var(--six-color-danger-800); + --six-input-border-color-disabled: var(--six-color-web-rock-400); + --six-input-color: var(--six-color-web-rock-900); + --six-input-color-hover: var(--six-color-web-rock-900); + --six-input-color-focus: var(--six-color-web-rock-900); + --six-input-color-disabled: var(--six-color-web-rock-600); + --six-input-icon-color: var(--six-color-web-rock-900); + --six-input-icon-color-hover: var(--six-color-web-rock-600); + --six-input-icon-color-focus: var(--six-color-web-rock-900); + --six-input-placeholder-color: var(--six-color-web-rock-500); + --six-input-placeholder-color-disabled: var(--six-color-web-rock-500); + --six-input-label-color: var(--six-color-web-rock-900); + --six-input-label-color-disabled: var(--six-color-web-rock-600); + --six-input-help-text-color: var(--six-color-web-rock-600); + --six-input-help-text-color-disabled: var(--six-color-web-rock-600); + + --six-overlay-background-color: var(--six-color-web-rock-900); + + --six-panel-background-color: var(--six-color-white); + --six-panel-border-color: var(--six-color-clay-50); + + --six-progress-track-color: var(--six-color-web-rock-300); + --six-progress-indicator-color: var(--six-color-danger-800); + --six-progress-label-color: var(--six-color-white); + + --six-range-track-color: var(--six-color-web-rock-900); + --six-range-thumb-color: var(--six-color-web-rock-900); + --six-range-color-disabled: var(--six-color-web-rock-300); + --six-range-track-color-disabled: var(--six-color-web-rock-300); + + --six-tile-background-color: var(--six-color-clay-50); + --six-tile-footer-color: var(--six-color-web-rock-900); + + --six-timepicker-background-color: var(--six-color-white); + + --six-tooltip-background-color: var(--six-color-web-rock-900); + --six-tooltip-color: var(--six-color-white); + + --six-avatar-color: var(--six-color-web-rock-700); + --six-avatar-background-color: var(--six-color-web-rock-300); + + --six-checkbox-color: var(--six-color-white); + + --six-selection-control-color: var(--six-color-action-500); + --six-selection-control-color-disabled: var(--six-color-web-rock-400); + + --six-details-color: var(--six-color-web-rock-900); + --six-details-body-background-color: var(--six-color-web-rock-50); + + --six-drawer-color: var(--six-color-web-rock-900); + --six-drawer-background-color: var(--six-color-clay-50); + + --six-footer-background-color: var(--six-color-white); + --six-footer-color: var(--six-color-web-rock-900); + + --six-header-background-color: var(--six-color-white); + --six-header-border-color: var(--six-color-web-rock-300); + --six-header-border-color-open: var(--six-color-web-rock-900); + --six-header-selected-app-color-hover: var(--six-color-web-rock-600); + + --six-menu-divider-color: var(--six-color-clay-50); + --six-menu-item-background-color: var(--six-color-clay-50); + + --six-search-color: var(--six-color-action-600); + + --six-sidebar-color: var(--six-color-web-rock-900); + --six-sidebar-background-color: var(--six-color-white); + --six-sidebar-hover-background-color: var(--six-color-clay-50); + --six-sidebar-header-background-color: var(--six-color-clay-50); + --six-sidebar-border-color: var(--six-color-web-rock-300); + --six-sidebar-item-color-hover: var(--six-color-web-rock-600); + + --six-tab-color: var(--six-color-web-rock-900); + --six-tab-color-active: var(--six-color-web-rock-900); + --six-tab-color-hover: var(--six-color-web-rock-700); + --six-tab-color-disabled: var(--six-color-web-rock-400); + --six-tab-border-color: var(--six-color-white); + --six-tab-border-color-active: var(--six-color-web-rock-900); + + --six-rating-color: var(--six-color-web-rock-500); + --six-rating-color-active: var(--six-color-success-600); + + --six-root-main-background-color: var(--six-color-white); + + --six-scrollbar-background-color: var(--six-color-web-rock-300); + --six-scrollbar-thumb-color: var(--six-color-web-rock-500); + --six-scrollbar-thumb-hover-color: var(--six-color-web-rock-600); + + /* Firefox, Chrome, Safari, Edge, Opera */ + scrollbar-color: var(--six-scrollbar-thumb-color) var(--six-scrollbar-background-color); + + /* Safari */ + &::-webkit-scrollbar-track { + background: var(--six-scrollbar-background-color); + } + + &::-webkit-scrollbar-thumb { + background: var(--six-scrollbar-thumb-color); + } + + &::-webkit-scrollbar-thumb:hover { + background: var(--six-scrollbar-thumb-hover-color); + } +} diff --git a/libraries/ui-library/src/global/base/dark-theme.css b/libraries/ui-library/src/global/base/dark-theme.css new file mode 100644 index 000000000..55beaae9f --- /dev/null +++ b/libraries/ui-library/src/global/base/dark-theme.css @@ -0,0 +1,329 @@ +/* ============================================ + DARK THEME + ============================================ + Dark mode is activated in one of two ways: + + 1. Explicitly, via the data-six-theme attribute on the + root element: + The attribute always takes priority — data-six-theme="light" + ignores the OS dark mode. + + 2. Automatically, via the user's OS preference + (prefers-color-scheme: dark) when no data-six-theme + attribute is set. + + The palette tokens (--six-color-web-rock-900 etc.) stay the + same in both themes. Dark mode works by overriding the + semantic component tokens to point to different palette + shades that work better on dark backgrounds. + + NOTE: The two blocks below must be kept in sync — plain CSS + offers no way to share declarations between an attribute + selector and a media query. +============================================ */ + +:root[data-six-theme='dark'] { + color: white; + background-color: var(--six-color-web-rock-900); + + --six-focus-ring-color: var(--six-color-action-400); + + /* Shadow intensity is increased in dark mode for better visibility against dark backgrounds */ + --six-shadow-small: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3); + --six-shadow-medium: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3); + --six-shadow-medium-top: 0 -10px 15px -3px rgb(0 0 0 / 0.3), 0 -4px 6px -4px rgb(0 0 0 / 0.3); + --six-shadow-large: 0 25px 50px -12px rgb(0 0 0 / 0.5); + + --six-alert-background-color: var(--six-color-web-rock-800); + --six-alert-border-color: var(--six-color-web-rock-700); + --six-alert-color: var(--six-color-web-rock-400); + --six-alert-primary-color: var(--six-color-web-rock-100); + + --six-card-border-color: var(--six-color-web-rock-700); + + --six-file-upload-drop-zone-hover-background-color: var(--six-color-action-800); + + --six-picto-background-color: var(--six-color-white); + + --six-item-picker-color-disabled: var(--six-color-web-rock-600); + --six-item-picker-background-color-hover: var(--six-color-web-rock-800); + + --six-file-list-item-icon-color-hover: var(--six-color-web-rock-300); + + --six-dropdown-border-color: var(--six-color-web-rock-700); + --six-dropdown-background-color: var(--six-color-web-rock-800); + + --six-date-panel-background-color: var(--six-color-web-rock-800); + --six-date-panel-border-color: var(--six-color-web-rock-700); + --six-date-cell-background-color-hover: var(--six-color-web-rock-700); + --six-date-cell-today-border-color: var(--six-color-web-rock-400); + --six-date-selector-background-color-hover: var(--six-color-web-rock-700); + --six-date-cell-outdated-color: var(--six-color-web-rock-500); + + --six-dialog-color: var(--six-color-web-rock-200); + + --six-logo-bme-color: var(--six-color-web-rock-600); + + --six-language-switcher-color-hover: var(--six-color-web-rock-400); + --six-language-switcher-color-selected: var(--six-color-white); + + --six-button-transparent-background-color-hover: var(--six-color-web-rock-800); + --six-button-secondary-border-color: var(--six-color-web-rock-100); + --six-button-secondary-color: var(--six-color-web-rock-100); + --six-button-primary-background-color: var(--six-color-web-rock-50); + --six-button-primary-background-color-hover: var(--six-color-web-rock-300); + --six-button-primary-background-color-active: var(--six-color-web-rock-400); + --six-button-primary-color: var(--six-color-black); + --six-button-background-color-disabled: var(--six-color-web-rock-600); + --six-button-border-color-disabled: var(--six-color-web-rock-600); + --six-button-color-disabled: var(--six-color-web-rock-400); + + --six-input-background-color: var(--six-color-web-rock-800); + --six-input-background-color-hover: var(--six-color-web-rock-700); + --six-input-background-color-focus: var(--six-color-web-rock-800); + --six-input-background-color-disabled: var(--six-color-web-rock-900); + --six-input-border-color: var(--six-color-web-rock-600); + --six-input-border-color-hover: var(--six-color-web-rock-400); + --six-input-border-color-focus: var(--six-color-action-400); + --six-input-border-color-danger: var(--six-color-danger-500); + --six-input-border-color-disabled: var(--six-color-web-rock-600); + --six-input-color: var(--six-color-web-rock-50); + --six-input-color-hover: var(--six-color-web-rock-50); + --six-input-color-focus: var(--six-color-web-rock-50); + --six-input-color-disabled: var(--six-color-web-rock-500); + --six-input-icon-color: var(--six-color-web-rock-100); + --six-input-icon-color-hover: var(--six-color-web-rock-500); + --six-input-icon-color-focus: var(--six-color-web-rock-100); + --six-input-placeholder-color: var(--six-color-web-rock-400); + --six-input-placeholder-color-disabled: var(--six-color-web-rock-400); + --six-input-label-color: var(--six-color-web-rock-100); + --six-input-label-color-disabled: var(--six-color-web-rock-500); + --six-input-help-text-color: var(--six-color-web-rock-400); + --six-input-help-text-color-disabled: var(--six-color-web-rock-600); + + --six-overlay-background-color: var(--six-color-web-rock-900); + + --six-panel-background-color: var(--six-color-web-rock-800); + --six-panel-border-color: var(--six-color-web-rock-700); + + --six-progress-track-color: var(--six-color-web-rock-700); + --six-progress-indicator-color: var(--six-color-danger-600); + --six-progress-label-color: var(--six-color-web-rock-50); + + --six-range-track-color: var(--six-color-web-rock-400); + --six-range-thumb-color: var(--six-color-web-rock-400); + --six-range-color-disabled: var(--six-color-web-rock-700); + --six-range-track-color-disabled: var(--six-color-web-rock-700); + + --six-tile-background-color: var(--six-color-web-rock-800); + --six-tile-footer-color: var(--six-color-web-rock-100); + + --six-timepicker-background-color: var(--six-color-web-rock-800); + + --six-tooltip-background-color: var(--six-color-web-rock-200); + --six-tooltip-color: var(--six-color-web-rock-900); + + --six-avatar-color: var(--six-color-white); + --six-avatar-background-color: var(--six-color-web-rock-700); + + --six-checkbox-color: var(--six-color-white); + + --six-selection-control-color: var(--six-color-action-400); + --six-selection-control-color-disabled: var(--six-color-web-rock-600); + + --six-details-color: var(--six-color-web-rock-100); + --six-details-body-background-color: var(--six-color-web-rock-800); + + --six-drawer-color: var(--six-color-web-rock-100); + --six-drawer-background-color: var(--six-color-web-rock-900); + + --six-footer-background-color: var(--six-color-web-rock-900); + --six-footer-color: var(--six-color-web-rock-400); + + --six-header-background-color: var(--six-color-web-rock-900); + --six-header-border-color: var(--six-color-web-rock-700); + --six-header-border-color-open: var(--six-color-web-rock-100); + --six-header-selected-app-color-hover: var(--six-color-web-rock-500); + + --six-menu-divider-color: var(--six-color-web-rock-700); + --six-menu-item-background-color: var(--six-color-web-rock-800); + + --six-search-color: var(--six-color-action-400); + + --six-sidebar-color: var(--six-color-web-rock-100); + --six-sidebar-background-color: var(--six-color-web-rock-900); + --six-sidebar-hover-background-color: var(--six-color-web-rock-800); + --six-sidebar-header-background-color: var(--six-color-web-rock-800); + --six-sidebar-border-color: var(--six-color-web-rock-700); + --six-sidebar-item-color-hover: var(--six-color-web-rock-400); + + --six-tab-color: var(--six-color-web-rock-100); + --six-tab-color-active: var(--six-color-web-rock-50); + --six-tab-color-hover: var(--six-color-web-rock-200); + --six-tab-color-disabled: var(--six-color-web-rock-600); + --six-tab-border-color: var(--six-color-web-rock-900); + --six-tab-border-color-active: var(--six-color-web-rock-50); + + --six-rating-color: var(--six-color-web-rock-600); + --six-rating-color-active: var(--six-color-success-500); + + --six-root-main-background-color: var(--six-color-web-rock-900); + + --six-scrollbar-background-color: var(--six-color-web-rock-900); + --six-scrollbar-thumb-color: var(--six-color-web-rock-700); + --six-scrollbar-thumb-hover-color: var(--six-color-web-rock-600); +} + +@media (prefers-color-scheme: dark) { + :root:not([data-six-theme]) { + color: white; + background-color: var(--six-color-web-rock-900); + + --six-focus-ring-color: var(--six-color-action-400); + + /* Shadow intensity is increased in dark mode for better visibility against dark backgrounds */ + --six-shadow-small: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3); + --six-shadow-medium: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3); + --six-shadow-medium-top: 0 -10px 15px -3px rgb(0 0 0 / 0.3), 0 -4px 6px -4px rgb(0 0 0 / 0.3); + --six-shadow-large: 0 25px 50px -12px rgb(0 0 0 / 0.5); + + --six-alert-background-color: var(--six-color-web-rock-800); + --six-alert-border-color: var(--six-color-web-rock-700); + --six-alert-color: var(--six-color-web-rock-400); + --six-alert-primary-color: var(--six-color-web-rock-100); + + --six-card-border-color: var(--six-color-web-rock-700); + + --six-file-upload-drop-zone-hover-background-color: var(--six-color-action-800); + + --six-picto-background-color: var(--six-color-white); + + --six-item-picker-color-disabled: var(--six-color-web-rock-600); + --six-item-picker-background-color-hover: var(--six-color-web-rock-800); + + --six-file-list-item-icon-color-hover: var(--six-color-web-rock-300); + + --six-dropdown-border-color: var(--six-color-web-rock-700); + --six-dropdown-background-color: var(--six-color-web-rock-800); + + --six-date-panel-background-color: var(--six-color-web-rock-800); + --six-date-panel-border-color: var(--six-color-web-rock-700); + --six-date-cell-background-color-hover: var(--six-color-web-rock-700); + --six-date-cell-today-border-color: var(--six-color-web-rock-400); + --six-date-selector-background-color-hover: var(--six-color-web-rock-700); + --six-date-cell-outdated-color: var(--six-color-web-rock-500); + + --six-dialog-color: var(--six-color-web-rock-200); + + --six-logo-bme-color: var(--six-color-web-rock-600); + + --six-language-switcher-color-hover: var(--six-color-web-rock-400); + --six-language-switcher-color-selected: var(--six-color-white); + + --six-button-transparent-background-color-hover: var(--six-color-web-rock-800); + --six-button-secondary-border-color: var(--six-color-web-rock-100); + --six-button-secondary-color: var(--six-color-web-rock-100); + --six-button-primary-background-color: var(--six-color-web-rock-50); + --six-button-primary-background-color-hover: var(--six-color-web-rock-300); + --six-button-primary-background-color-active: var(--six-color-web-rock-400); + --six-button-primary-color: var(--six-color-black); + --six-button-background-color-disabled: var(--six-color-web-rock-600); + --six-button-border-color-disabled: var(--six-color-web-rock-600); + --six-button-color-disabled: var(--six-color-web-rock-400); + + --six-input-background-color: var(--six-color-web-rock-800); + --six-input-background-color-hover: var(--six-color-web-rock-700); + --six-input-background-color-focus: var(--six-color-web-rock-800); + --six-input-background-color-disabled: var(--six-color-web-rock-900); + --six-input-border-color: var(--six-color-web-rock-600); + --six-input-border-color-hover: var(--six-color-web-rock-400); + --six-input-border-color-focus: var(--six-color-action-400); + --six-input-border-color-danger: var(--six-color-danger-500); + --six-input-border-color-disabled: var(--six-color-web-rock-600); + --six-input-color: var(--six-color-web-rock-50); + --six-input-color-hover: var(--six-color-web-rock-50); + --six-input-color-focus: var(--six-color-web-rock-50); + --six-input-color-disabled: var(--six-color-web-rock-500); + --six-input-icon-color: var(--six-color-web-rock-100); + --six-input-icon-color-hover: var(--six-color-web-rock-500); + --six-input-icon-color-focus: var(--six-color-web-rock-100); + --six-input-placeholder-color: var(--six-color-web-rock-400); + --six-input-placeholder-color-disabled: var(--six-color-web-rock-400); + --six-input-label-color: var(--six-color-web-rock-100); + --six-input-label-color-disabled: var(--six-color-web-rock-500); + --six-input-help-text-color: var(--six-color-web-rock-400); + --six-input-help-text-color-disabled: var(--six-color-web-rock-600); + + --six-overlay-background-color: var(--six-color-web-rock-900); + + --six-panel-background-color: var(--six-color-web-rock-800); + --six-panel-border-color: var(--six-color-web-rock-700); + + --six-progress-track-color: var(--six-color-web-rock-700); + --six-progress-indicator-color: var(--six-color-danger-600); + --six-progress-label-color: var(--six-color-web-rock-50); + + --six-range-track-color: var(--six-color-web-rock-400); + --six-range-thumb-color: var(--six-color-web-rock-400); + --six-range-color-disabled: var(--six-color-web-rock-700); + --six-range-track-color-disabled: var(--six-color-web-rock-700); + + --six-tile-background-color: var(--six-color-web-rock-800); + --six-tile-footer-color: var(--six-color-web-rock-100); + + --six-timepicker-background-color: var(--six-color-web-rock-800); + + --six-tooltip-background-color: var(--six-color-web-rock-200); + --six-tooltip-color: var(--six-color-web-rock-900); + + --six-avatar-color: var(--six-color-white); + --six-avatar-background-color: var(--six-color-web-rock-700); + + --six-checkbox-color: var(--six-color-white); + + --six-selection-control-color: var(--six-color-action-400); + --six-selection-control-color-disabled: var(--six-color-web-rock-600); + + --six-details-color: var(--six-color-web-rock-100); + --six-details-body-background-color: var(--six-color-web-rock-800); + + --six-drawer-color: var(--six-color-web-rock-100); + --six-drawer-background-color: var(--six-color-web-rock-900); + + --six-footer-background-color: var(--six-color-web-rock-900); + --six-footer-color: var(--six-color-web-rock-400); + + --six-header-background-color: var(--six-color-web-rock-900); + --six-header-border-color: var(--six-color-web-rock-700); + --six-header-border-color-open: var(--six-color-web-rock-100); + --six-header-selected-app-color-hover: var(--six-color-web-rock-500); + + --six-menu-divider-color: var(--six-color-web-rock-700); + --six-menu-item-background-color: var(--six-color-web-rock-800); + + --six-search-color: var(--six-color-action-400); + + --six-sidebar-color: var(--six-color-web-rock-100); + --six-sidebar-background-color: var(--six-color-web-rock-900); + --six-sidebar-hover-background-color: var(--six-color-web-rock-800); + --six-sidebar-header-background-color: var(--six-color-web-rock-800); + --six-sidebar-border-color: var(--six-color-web-rock-700); + --six-sidebar-item-color-hover: var(--six-color-web-rock-400); + + --six-tab-color: var(--six-color-web-rock-100); + --six-tab-color-active: var(--six-color-web-rock-50); + --six-tab-color-hover: var(--six-color-web-rock-200); + --six-tab-color-disabled: var(--six-color-web-rock-600); + --six-tab-border-color: var(--six-color-web-rock-900); + --six-tab-border-color-active: var(--six-color-web-rock-50); + + --six-rating-color: var(--six-color-web-rock-600); + --six-rating-color-active: var(--six-color-success-500); + + --six-root-main-background-color: var(--six-color-web-rock-900); + + --six-scrollbar-background-color: var(--six-color-web-rock-900); + --six-scrollbar-thumb-color: var(--six-color-web-rock-700); + --six-scrollbar-thumb-hover-color: var(--six-color-web-rock-600); + } +} diff --git a/package-lock.json b/package-lock.json index 49e82f931..5ee631b97 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8063,6 +8063,7 @@ "os": [ "android" ], + "peer": true, "engines": { "node": "^20.19.0 || >=22.12.0" } @@ -8079,6 +8080,7 @@ "os": [ "darwin" ], + "peer": true, "engines": { "node": "^20.19.0 || >=22.12.0" } @@ -8095,6 +8097,7 @@ "os": [ "darwin" ], + "peer": true, "engines": { "node": "^20.19.0 || >=22.12.0" } @@ -8111,6 +8114,7 @@ "os": [ "freebsd" ], + "peer": true, "engines": { "node": "^20.19.0 || >=22.12.0" } @@ -8127,6 +8131,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": "^20.19.0 || >=22.12.0" } @@ -8143,6 +8148,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": "^20.19.0 || >=22.12.0" } @@ -8159,6 +8165,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": "^20.19.0 || >=22.12.0" } @@ -8175,6 +8182,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": "^20.19.0 || >=22.12.0" } @@ -8191,6 +8199,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": "^20.19.0 || >=22.12.0" } @@ -8207,6 +8216,7 @@ "os": [ "openharmony" ], + "peer": true, "engines": { "node": "^20.19.0 || >=22.12.0" } @@ -8220,6 +8230,7 @@ ], "license": "MIT", "optional": true, + "peer": true, "dependencies": { "@napi-rs/wasm-runtime": "^1.1.1" }, @@ -8239,6 +8250,7 @@ "os": [ "win32" ], + "peer": true, "engines": { "node": "^20.19.0 || >=22.12.0" } @@ -8255,6 +8267,7 @@ "os": [ "win32" ], + "peer": true, "engines": { "node": "^20.19.0 || >=22.12.0" } @@ -14627,8 +14640,10 @@ "version": "0.1.8", "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz", "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==", + "dev": true, "license": "MIT", "optional": true, + "peer": true, "dependencies": { "prr": "~1.0.1" }, @@ -16767,8 +16782,10 @@ "version": "0.5.5", "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz", "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==", + "dev": true, "license": "MIT", "optional": true, + "peer": true, "bin": { "image-size": "bin/image-size.js" }, @@ -18685,8 +18702,10 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz", "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==", + "dev": true, "license": "MIT", "optional": true, + "peer": true, "dependencies": { "pify": "^4.0.1", "semver": "^5.6.0" @@ -18699,8 +18718,10 @@ "version": "5.7.2", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz", "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", + "dev": true, "license": "ISC", "optional": true, + "peer": true, "bin": { "semver": "bin/semver" } @@ -19614,8 +19635,10 @@ "version": "1.6.0", "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", + "dev": true, "license": "MIT", "optional": true, + "peer": true, "bin": { "mime": "cli.js" }, @@ -19972,8 +19995,10 @@ "version": "3.5.0", "resolved": "https://registry.npmjs.org/needle/-/needle-3.5.0.tgz", "integrity": "sha512-jaQyPKKk2YokHrEg+vFDYxXIHTCBgiZwSHOoVx/8V3GIBS8/VN6NdVRmg8q1ERtPkMvmOvebsgga4sAj5hls/w==", + "dev": true, "license": "MIT", "optional": true, + "peer": true, "dependencies": { "iconv-lite": "^0.6.3", "sax": "^1.2.4" @@ -19989,8 +20014,10 @@ "version": "0.6.3", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", + "dev": true, "license": "MIT", "optional": true, + "peer": true, "dependencies": { "safer-buffer": ">= 2.1.2 < 3.0.0" }, @@ -21973,8 +22000,10 @@ "version": "4.0.1", "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==", + "dev": true, "license": "MIT", "optional": true, + "peer": true, "engines": { "node": ">=6" } @@ -22875,8 +22904,10 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz", "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==", + "dev": true, "license": "MIT", - "optional": true + "optional": true, + "peer": true }, "node_modules/pump": { "version": "3.0.4", @@ -24223,7 +24254,7 @@ "version": "2.1.2", "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", - "devOptional": true, + "dev": true, "license": "MIT" }, "node_modules/sass": { @@ -24299,8 +24330,10 @@ "!riscv64", "!x64" ], + "dev": true, "license": "MIT", "optional": true, + "peer": true, "dependencies": { "sass": "1.98.0" } @@ -24312,11 +24345,13 @@ "cpu": [ "arm" ], + "dev": true, "license": "MIT", "optional": true, "os": [ "android" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -24328,11 +24363,13 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ "android" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -24344,11 +24381,13 @@ "cpu": [ "riscv64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ "android" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -24360,11 +24399,13 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ "android" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -24376,11 +24417,13 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ "darwin" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -24392,11 +24435,13 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ "darwin" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -24408,11 +24453,13 @@ "cpu": [ "arm" ], + "dev": true, "license": "MIT", "optional": true, "os": [ "linux" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -24424,11 +24471,13 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ "linux" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -24440,11 +24489,13 @@ "cpu": [ "arm" ], + "dev": true, "license": "MIT", "optional": true, "os": [ "linux" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -24456,11 +24507,13 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ "linux" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -24472,11 +24525,13 @@ "cpu": [ "riscv64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ "linux" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -24488,11 +24543,13 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ "linux" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -24504,11 +24561,13 @@ "cpu": [ "riscv64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ "linux" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -24520,11 +24579,13 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ "linux" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -24533,6 +24594,7 @@ "version": "1.98.0", "resolved": "https://registry.npmjs.org/sass-embedded-unknown-all/-/sass-embedded-unknown-all-1.98.0.tgz", "integrity": "sha512-C4MMzcAo3oEDQnW7L8SBgB9F2Fq5qHPnaYTZRMOH3Mp/7kM4OooBInXpCiiFjLnjY95hzP4KyctVx0uYR6MYlQ==", + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -24541,6 +24603,7 @@ "!linux", "!win32" ], + "peer": true, "dependencies": { "sass": "1.98.0" } @@ -24552,11 +24615,13 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ "win32" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -24568,11 +24633,13 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ "win32" ], + "peer": true, "engines": { "node": ">=14.0.0" }