From c0ff8ff76ae8cca5ba6555a0024233159fe85a84 Mon Sep 17 00:00:00 2001 From: Gregor Wassmann Date: Fri, 24 Mar 2023 21:49:11 +0100 Subject: [PATCH 1/2] chore: Move Theme to GlobalTheme MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The reason for this is that Theme is a new v11 component that allows for inline theming. That’s a different purpose than this component has. In the standard Carbon implementation a GlobalTheme is used that matches the purpose of what this Svelte component used to do. The idea is to stick to the same name as the standard implementation. --- .../components/{Theme.svx => GlobalTheme.svx} | 18 +++++++++--------- .../GlobalTheme.svelte} | 0 .../GlobalThemePersist.svelte} | 0 .../GlobalThemeSelect.svelte} | 0 .../GlobalThemeSelectCustom.svelte} | 0 .../GlobalThemeToggle.svelte} | 0 .../GlobalThemeToggleCustom.svelte} | 0 .../GlobalThemeTokens.svelte} | 0 .../GlobalTheme.svelte} | 0 src/{Theme => GlobalTheme}/index.js | 0 ...eme.test.svelte => GlobalTheme.test.svelte} | 0 .../GlobalTheme.svelte.d.ts} | 0 12 files changed, 9 insertions(+), 9 deletions(-) rename docs/src/pages/components/{Theme.svx => GlobalTheme.svx} (66%) rename docs/src/pages/framed/{Theme/Theme.svelte => GlobalTheme/GlobalTheme.svelte} (100%) rename docs/src/pages/framed/{Theme/ThemePersist.svelte => GlobalTheme/GlobalThemePersist.svelte} (100%) rename docs/src/pages/framed/{Theme/ThemeSelect.svelte => GlobalTheme/GlobalThemeSelect.svelte} (100%) rename docs/src/pages/framed/{Theme/ThemeSelectCustom.svelte => GlobalTheme/GlobalThemeSelectCustom.svelte} (100%) rename docs/src/pages/framed/{Theme/ThemeToggle.svelte => GlobalTheme/GlobalThemeToggle.svelte} (100%) rename docs/src/pages/framed/{Theme/ThemeToggleCustom.svelte => GlobalTheme/GlobalThemeToggleCustom.svelte} (100%) rename docs/src/pages/framed/{Theme/ThemeTokens.svelte => GlobalTheme/GlobalThemeTokens.svelte} (100%) rename src/{Theme/Theme.svelte => GlobalTheme/GlobalTheme.svelte} (100%) rename src/{Theme => GlobalTheme}/index.js (100%) rename tests/{Theme.test.svelte => GlobalTheme.test.svelte} (100%) rename types/{Theme/Theme.svelte.d.ts => GlobalTheme/GlobalTheme.svelte.d.ts} (100%) diff --git a/docs/src/pages/components/Theme.svx b/docs/src/pages/components/GlobalTheme.svx similarity index 66% rename from docs/src/pages/components/Theme.svx rename to docs/src/pages/components/GlobalTheme.svx index 9a5cab2f72..74261695f4 100644 --- a/docs/src/pages/components/Theme.svx +++ b/docs/src/pages/components/GlobalTheme.svx @@ -5,10 +5,10 @@ let code = `import "carbon-components-svelte/css/all.css";`; -The `Theme` component can dyanmically update the Carbon theme on the client-side. It can persist the theme locally using [window.localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). +The `GlobalTheme` component can dyanmically update the Carbon theme on the client-side. It can persist the theme locally using [window.localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). -
You must use the "all.css" StyleSheet with the Theme component.
+
You must use the "all.css" StyleSheet with the GlobalTheme component.
 The `all.css` StyleSheet uses [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) for dynamic theming. @@ -17,40 +17,40 @@ The `all.css` StyleSheet uses [CSS variables](https://developer.mozilla.org/en-U ## Default - + ## Persist locally Set `persist` to `true` to persist the theme locally using the [Window.localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). - + ## Custom theme Define keys and values in the `tokens` prop that override default Carbon theme tokens. Refer to the [Carbon website](https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme) for guidance on customizing a theme using token values. - + ## Theme toggle Set `render` to `"toggle"` to render a toggle switch to control the theme. - + ## Theme toggle (custom) Customize the toggle using the `toggle` prop. - + ## Theme select Set `render` to `"select"` to render a select dropdown to control the theme. - + ## Theme select (custom) Customize the select using the `select` prop. - \ No newline at end of file + \ No newline at end of file diff --git a/docs/src/pages/framed/Theme/Theme.svelte b/docs/src/pages/framed/GlobalTheme/GlobalTheme.svelte similarity index 100% rename from docs/src/pages/framed/Theme/Theme.svelte rename to docs/src/pages/framed/GlobalTheme/GlobalTheme.svelte diff --git a/docs/src/pages/framed/Theme/ThemePersist.svelte b/docs/src/pages/framed/GlobalTheme/GlobalThemePersist.svelte similarity index 100% rename from docs/src/pages/framed/Theme/ThemePersist.svelte rename to docs/src/pages/framed/GlobalTheme/GlobalThemePersist.svelte diff --git a/docs/src/pages/framed/Theme/ThemeSelect.svelte b/docs/src/pages/framed/GlobalTheme/GlobalThemeSelect.svelte similarity index 100% rename from docs/src/pages/framed/Theme/ThemeSelect.svelte rename to docs/src/pages/framed/GlobalTheme/GlobalThemeSelect.svelte diff --git a/docs/src/pages/framed/Theme/ThemeSelectCustom.svelte b/docs/src/pages/framed/GlobalTheme/GlobalThemeSelectCustom.svelte similarity index 100% rename from docs/src/pages/framed/Theme/ThemeSelectCustom.svelte rename to docs/src/pages/framed/GlobalTheme/GlobalThemeSelectCustom.svelte diff --git a/docs/src/pages/framed/Theme/ThemeToggle.svelte b/docs/src/pages/framed/GlobalTheme/GlobalThemeToggle.svelte similarity index 100% rename from docs/src/pages/framed/Theme/ThemeToggle.svelte rename to docs/src/pages/framed/GlobalTheme/GlobalThemeToggle.svelte diff --git a/docs/src/pages/framed/Theme/ThemeToggleCustom.svelte b/docs/src/pages/framed/GlobalTheme/GlobalThemeToggleCustom.svelte similarity index 100% rename from docs/src/pages/framed/Theme/ThemeToggleCustom.svelte rename to docs/src/pages/framed/GlobalTheme/GlobalThemeToggleCustom.svelte diff --git a/docs/src/pages/framed/Theme/ThemeTokens.svelte b/docs/src/pages/framed/GlobalTheme/GlobalThemeTokens.svelte similarity index 100% rename from docs/src/pages/framed/Theme/ThemeTokens.svelte rename to docs/src/pages/framed/GlobalTheme/GlobalThemeTokens.svelte diff --git a/src/Theme/Theme.svelte b/src/GlobalTheme/GlobalTheme.svelte similarity index 100% rename from src/Theme/Theme.svelte rename to src/GlobalTheme/GlobalTheme.svelte diff --git a/src/Theme/index.js b/src/GlobalTheme/index.js similarity index 100% rename from src/Theme/index.js rename to src/GlobalTheme/index.js diff --git a/tests/Theme.test.svelte b/tests/GlobalTheme.test.svelte similarity index 100% rename from tests/Theme.test.svelte rename to tests/GlobalTheme.test.svelte diff --git a/types/Theme/Theme.svelte.d.ts b/types/GlobalTheme/GlobalTheme.svelte.d.ts similarity index 100% rename from types/Theme/Theme.svelte.d.ts rename to types/GlobalTheme/GlobalTheme.svelte.d.ts From 67271b94e7cf2274b2c145467162558211e03c90 Mon Sep 17 00:00:00 2001 From: Gregor Wassmann Date: Fri, 24 Mar 2023 22:20:50 +0100 Subject: [PATCH 2/2] chore: rename `Theme` to `GlobalTheme` Carbon Design System provides the idea of [inline theming](https://carbondesignsystem.com/guidelines/color/implementation/#how-inline-theming-works). As was mentioned in #1648 the Carbon standard implementation is [documented here](https://react.carbondesignsystem.com/?path=/docs/components-theme--playground). It says: > The `GlobalTheme` and `Theme` components allow you to specify the theme for a page, or for a part of a page, respectively. `Theme` is most often used to implement inline theming where you can style a portion of your page with a particular theme. What this means for `carbon-components-svelte` is that we should rename the existing `Theme` component to `GlobalTheme`. This leads us a tiny bit closer to [feature parity with Carbon v11](https://github.com/carbon-design-system/carbon-components-svelte/discussions/1614) and gives room for a new component dedicated to v11 inline theming. --- COMPONENT_INDEX.md | 66 +++--- docs/src/COMPONENT_API.json | 222 +++++++++--------- docs/src/pages/_layout.svelte | 6 +- .../framed/GlobalTheme/GlobalTheme.svelte | 4 +- .../GlobalTheme/GlobalThemePersist.svelte | 4 +- .../GlobalTheme/GlobalThemeSelect.svelte | 4 +- .../GlobalThemeSelectCustom.svelte | 4 +- .../GlobalTheme/GlobalThemeToggle.svelte | 4 +- .../GlobalThemeToggleCustom.svelte | 4 +- .../GlobalTheme/GlobalThemeTokens.svelte | 4 +- src/GlobalTheme/index.js | 2 +- src/index.js | 2 +- tests/GlobalTheme.test.svelte | 6 +- types/GlobalTheme/GlobalTheme.svelte.d.ts | 6 +- types/index.d.ts | 2 +- 15 files changed, 170 insertions(+), 170 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index f572789659..236a213a1c 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -50,6 +50,7 @@ - [`FormGroup`](#formgroup) - [`FormItem`](#formitem) - [`FormLabel`](#formlabel) +- [`GlobalTheme`](#globaltheme) - [`Grid`](#grid) - [`Header`](#header) - [`HeaderAction`](#headeraction) @@ -148,7 +149,6 @@ - [`TextAreaSkeleton`](#textareaskeleton) - [`TextInput`](#textinput) - [`TextInputSkeleton`](#textinputskeleton) -- [`Theme`](#theme) - [`Tile`](#tile) - [`TileGroup`](#tilegroup) - [`TimePicker`](#timepicker) @@ -1538,6 +1538,38 @@ None. | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | +## `GlobalTheme` + +### Types + +```ts +export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100"; +``` + +### Props + +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | +| theme | No | let | Yes | CarbonTheme | "white" | Set the current Carbon theme | +| tokens | No | let | No | { [token: string]: any; } | {} | Customize a theme with your own tokens
@see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme | +| persist | No | let | No | boolean | false | Set to `true` to persist the theme using window.localStorage | +| persistKey | No | let | No | string | "theme" | Specify the local storage key | +| render | No | let | No | "toggle" | "select" | undefined | Render a toggle or select dropdown to control the theme | +| toggle | No | let | No | import("../Toggle/Toggle").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; } | { themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, } | Override the default toggle props | +| select | No | let | No | import("../Select/Select").SelectProps & { themes?: CarbonTheme[]; } | { themes: themeKeys, labelText: "Themes", hideLabel: false, } | Override the default select props | + +### Slots + +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :------------------------------------ | :------- | +| -- | Yes | { theme: CarbonTheme; } | -- | + +### Events + +| Event name | Type | Detail | +| :--------- | :--------- | :----------------------------------- | +| update | dispatched | { theme: CarbonTheme; } | + ## `Grid` ### Props @@ -4159,38 +4191,6 @@ None. | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | -## `Theme` - -### Types - -```ts -export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100"; -``` - -### Props - -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :--------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | -| theme | No | let | Yes | CarbonTheme | "white" | Set the current Carbon theme | -| tokens | No | let | No | { [token: string]: any; } | {} | Customize a theme with your own tokens
@see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme | -| persist | No | let | No | boolean | false | Set to `true` to persist the theme using window.localStorage | -| persistKey | No | let | No | string | "theme" | Specify the local storage key | -| render | No | let | No | "toggle" | "select" | undefined | Render a toggle or select dropdown to control the theme | -| toggle | No | let | No | import("../Toggle/Toggle").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; } | { themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, } | Override the default toggle props | -| select | No | let | No | import("../Select/Select").SelectProps & { themes?: CarbonTheme[]; } | { themes: themeKeys, labelText: "Themes", hideLabel: false, } | Override the default select props | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :------------------------------------ | :------- | -| -- | Yes | { theme: CarbonTheme; } | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :--------- | :----------------------------------- | -| update | dispatched | { theme: CarbonTheme; } | - ## `Tile` ### Props diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 578a31d6e8..346fdfe102 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -4579,6 +4579,117 @@ "typedefs": [], "rest_props": { "type": "Element", "name": "label" } }, + { + "moduleName": "GlobalTheme", + "filePath": "src/GlobalTheme/GlobalTheme.svelte", + "props": [ + { + "name": "theme", + "kind": "let", + "description": "Set the current Carbon theme", + "type": "CarbonTheme", + "value": "\"white\"", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": true + }, + { + "name": "tokens", + "kind": "let", + "description": "Customize a theme with your own tokens\n@see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme", + "type": "{ [token: string]: any; }", + "value": "{}", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "persist", + "kind": "let", + "description": "Set to `true` to persist the theme using window.localStorage", + "type": "boolean", + "value": "false", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "persistKey", + "kind": "let", + "description": "Specify the local storage key", + "type": "string", + "value": "\"theme\"", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "render", + "kind": "let", + "description": "Render a toggle or select dropdown to control the theme", + "type": "\"toggle\" | \"select\"", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "toggle", + "kind": "let", + "description": "Override the default toggle props", + "type": "import(\"../Toggle/Toggle\").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }", + "value": "{ themes: [\"white\", \"g100\"], labelA: \"\", labelB: \"\", labelText: \"Dark mode\", hideLabel: false, }", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "select", + "kind": "let", + "description": "Override the default select props", + "type": "import(\"../Select/Select\").SelectProps & { themes?: CarbonTheme[]; }", + "value": "{ themes: themeKeys, labelText: \"Themes\", hideLabel: false, }", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + } + ], + "moduleExports": [], + "slots": [ + { + "name": "__default__", + "default": true, + "slot_props": "{ theme: CarbonTheme; }" + } + ], + "events": [ + { + "type": "dispatched", + "name": "update", + "detail": "{ theme: CarbonTheme; }" + } + ], + "typedefs": [ + { + "type": "\"white\" | \"g10\" | \"g80\" | \"g90\" | \"g100\"", + "name": "CarbonTheme", + "ts": "type CarbonTheme = \"white\" | \"g10\" | \"g80\" | \"g90\" | \"g100\"" + } + ] + }, { "moduleName": "Grid", "filePath": "src/Grid/Grid.svelte", @@ -12837,117 +12948,6 @@ "typedefs": [], "rest_props": { "type": "Element", "name": "div" } }, - { - "moduleName": "Theme", - "filePath": "src/Theme/Theme.svelte", - "props": [ - { - "name": "theme", - "kind": "let", - "description": "Set the current Carbon theme", - "type": "CarbonTheme", - "value": "\"white\"", - "isFunction": false, - "isFunctionDeclaration": false, - "isRequired": false, - "constant": false, - "reactive": true - }, - { - "name": "tokens", - "kind": "let", - "description": "Customize a theme with your own tokens\n@see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme", - "type": "{ [token: string]: any; }", - "value": "{}", - "isFunction": false, - "isFunctionDeclaration": false, - "isRequired": false, - "constant": false, - "reactive": false - }, - { - "name": "persist", - "kind": "let", - "description": "Set to `true` to persist the theme using window.localStorage", - "type": "boolean", - "value": "false", - "isFunction": false, - "isFunctionDeclaration": false, - "isRequired": false, - "constant": false, - "reactive": false - }, - { - "name": "persistKey", - "kind": "let", - "description": "Specify the local storage key", - "type": "string", - "value": "\"theme\"", - "isFunction": false, - "isFunctionDeclaration": false, - "isRequired": false, - "constant": false, - "reactive": false - }, - { - "name": "render", - "kind": "let", - "description": "Render a toggle or select dropdown to control the theme", - "type": "\"toggle\" | \"select\"", - "isFunction": false, - "isFunctionDeclaration": false, - "isRequired": false, - "constant": false, - "reactive": false - }, - { - "name": "toggle", - "kind": "let", - "description": "Override the default toggle props", - "type": "import(\"../Toggle/Toggle\").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }", - "value": "{ themes: [\"white\", \"g100\"], labelA: \"\", labelB: \"\", labelText: \"Dark mode\", hideLabel: false, }", - "isFunction": false, - "isFunctionDeclaration": false, - "isRequired": false, - "constant": false, - "reactive": false - }, - { - "name": "select", - "kind": "let", - "description": "Override the default select props", - "type": "import(\"../Select/Select\").SelectProps & { themes?: CarbonTheme[]; }", - "value": "{ themes: themeKeys, labelText: \"Themes\", hideLabel: false, }", - "isFunction": false, - "isFunctionDeclaration": false, - "isRequired": false, - "constant": false, - "reactive": false - } - ], - "moduleExports": [], - "slots": [ - { - "name": "__default__", - "default": true, - "slot_props": "{ theme: CarbonTheme; }" - } - ], - "events": [ - { - "type": "dispatched", - "name": "update", - "detail": "{ theme: CarbonTheme; }" - } - ], - "typedefs": [ - { - "type": "\"white\" | \"g10\" | \"g80\" | \"g90\" | \"g100\"", - "name": "CarbonTheme", - "ts": "type CarbonTheme = \"white\" | \"g10\" | \"g80\" | \"g90\" | \"g100\"" - } - ] - }, { "moduleName": "Tile", "filePath": "src/Tile/Tile.svelte", diff --git a/docs/src/pages/_layout.svelte b/docs/src/pages/_layout.svelte index b506dea72e..9abaa8d4d0 100644 --- a/docs/src/pages/_layout.svelte +++ b/docs/src/pages/_layout.svelte @@ -12,7 +12,7 @@ SideNav, SideNavItems, SideNavMenuItem, - Theme, + GlobalTheme, Tag, } from "carbon-components-svelte"; import LogoGithub from "carbon-icons-svelte/lib/LogoGithub.svelte"; @@ -39,7 +39,7 @@ - +
- +