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 carbon-design-system#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](carbon-design-system#1614) and gives room for a new component dedicated to v11 inline theming.
gregorw · Mar 26, 2023 · 67271b9 · 67271b9
1 parent c0ff8ff
commit 67271b9
Show file tree

Hide file tree

Showing 15 changed files with 170 additions and 170 deletions.
diff --git 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       | <code>let</code> | Yes      | <code>CarbonTheme</code>                                                                                       | <code>"white"</code>                                                                                          | Set the current Carbon theme                                                                                                   |
+| tokens     | No       | <code>let</code> | No       | <code>{ [token: string]: any; }</code>                                                                         | <code>{}</code>                                                                                               | Customize a theme with your own tokens<br />@see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme |
+| persist    | No       | <code>let</code> | No       | <code>boolean</code>                                                                                           | <code>false</code>                                                                                            | Set to `true` to persist the theme using window.localStorage                                                                   |
+| persistKey | No       | <code>let</code> | No       | <code>string</code>                                                                                            | <code>"theme"</code>                                                                                          | Specify the local storage key                                                                                                  |
+| render     | No       | <code>let</code> | No       | <code>"toggle" &#124; "select"</code>                                                                          | <code>undefined</code>                                                                                        | Render a toggle or select dropdown to control the theme                                                                        |
+| toggle     | No       | <code>let</code> | No       | <code>import("../Toggle/Toggle").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }</code> | <code>{ themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, }</code> | Override the default toggle props                                                                                              |
+| select     | No       | <code>let</code> | No       | <code>import("../Select/Select").SelectProps & { themes?: CarbonTheme[]; }</code>                              | <code>{ themes: themeKeys, labelText: "Themes", hideLabel: false, }</code>                                    | Override the default select props                                                                                              |
+
+### Slots
+
+| Slot name | Default | Props                                 | Fallback |
+| :-------- | :------ | :------------------------------------ | :------- |
+| --        | Yes     | <code>{ theme: CarbonTheme; } </code> | --       |
+
+### Events
+
+| Event name | Type       | Detail                               |
+| :--------- | :--------- | :----------------------------------- |
+| update     | dispatched | <code>{ theme: CarbonTheme; }</code> |
+
 ## `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       | <code>let</code> | Yes      | <code>CarbonTheme</code>                                                                                       | <code>"white"</code>                                                                                          | Set the current Carbon theme                                                                                                   |
-| tokens     | No       | <code>let</code> | No       | <code>{ [token: string]: any; }</code>                                                                         | <code>{}</code>                                                                                               | Customize a theme with your own tokens<br />@see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme |
-| persist    | No       | <code>let</code> | No       | <code>boolean</code>                                                                                           | <code>false</code>                                                                                            | Set to `true` to persist the theme using window.localStorage                                                                   |
-| persistKey | No       | <code>let</code> | No       | <code>string</code>                                                                                            | <code>"theme"</code>                                                                                          | Specify the local storage key                                                                                                  |
-| render     | No       | <code>let</code> | No       | <code>"toggle" &#124; "select"</code>                                                                          | <code>undefined</code>                                                                                        | Render a toggle or select dropdown to control the theme                                                                        |
-| toggle     | No       | <code>let</code> | No       | <code>import("../Toggle/Toggle").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }</code> | <code>{ themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, }</code> | Override the default toggle props                                                                                              |
-| select     | No       | <code>let</code> | No       | <code>import("../Select/Select").SelectProps & { themes?: CarbonTheme[]; }</code>                              | <code>{ themes: themeKeys, labelText: "Themes", hideLabel: false, }</code>                                    | Override the default select props                                                                                              |
-
-### Slots
-
-| Slot name | Default | Props                                 | Fallback |
-| :-------- | :------ | :------------------------------------ | :------- |
-| --        | Yes     | <code>{ theme: CarbonTheme; } </code> | --       |
-
-### Events
-
-| Event name | Type       | Detail                               |
-| :--------- | :--------- | :----------------------------------- |
-| update     | dispatched | <code>{ theme: CarbonTheme; }</code> |
-
 ## `Tile`
 
 ### Props

diff --git 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
@@ -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 @@
 <!-- routify:options bundle=true -->
 <svelte:window bind:innerWidth />
 
-<Theme persist bind:theme="{$theme}">
+<GlobalTheme persist bind:theme="{$theme}">
   <Header
     aria-label="Navigation"
     href="{$url('/')}"
@@ -129,7 +129,7 @@
     </SideNavItems>
   </SideNav>
   <slot />
-</Theme>
+</GlobalTheme>
 
 <style>
   .platform-name {

diff --git a/docs/src/pages/framed/GlobalTheme/GlobalTheme.svelte b/docs/src/pages/framed/GlobalTheme/GlobalTheme.svelte
@@ -1,14 +1,14 @@
 <script>
   import {
-    Theme,
+    GlobalTheme,
     RadioButtonGroup,
     RadioButton,
   } from "carbon-components-svelte";
 
   let theme = "g90";
 </script>
 
-<Theme bind:theme />
+<GlobalTheme bind:theme />
 
 <RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}">
   {#each ["white", "g10", "g80", "g90", "g100"] as value}

diff --git a/docs/src/pages/framed/GlobalTheme/GlobalThemePersist.svelte b/docs/src/pages/framed/GlobalTheme/GlobalThemePersist.svelte
@@ -1,14 +1,14 @@
 <script>
   import {
-    Theme,
+    GlobalTheme,
     RadioButtonGroup,
     RadioButton,
   } from "carbon-components-svelte";
 
   let theme = "g90";
 </script>
 
-<Theme bind:theme persist persistKey="__carbon-theme" />
+<GlobalTheme bind:theme persist persistKey="__carbon-theme" />
 
 <RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}">
   {#each ["white", "g10", "g80", "g90", "g100"] as value}

diff --git a/docs/src/pages/framed/GlobalTheme/GlobalThemeSelect.svelte b/docs/src/pages/framed/GlobalTheme/GlobalThemeSelect.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Theme } from "carbon-components-svelte";
+  import { GlobalTheme } from "carbon-components-svelte";
 </script>
 
-<Theme render="select" />
+<GlobalTheme render="select" />