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.
2025-09-19 11:59:34 +00:00 · 2023-03-24 22:20:50 +01:00 · 2023-03-24 22:20:50 +01:00 · 67271b94e7
commit 67271b94e7
parent c0ff8ff76a
15 changed files with 170 additions and 170 deletions
--- 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",
--- 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 {
--- a/docs/src/pages/framed/GlobalTheme/GlobalTheme.svelte
+++ b/docs/src/pages/framed/GlobalTheme/GlobalTheme.svelte
@ -1,6 +1,6 @@
 <script>
  import {
-    Theme,
+    GlobalTheme,
    RadioButtonGroup,
    RadioButton,
  } from "carbon-components-svelte";
@ -8,7 +8,7 @@
  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}
--- a/docs/src/pages/framed/GlobalTheme/GlobalThemePersist.svelte
+++ b/docs/src/pages/framed/GlobalTheme/GlobalThemePersist.svelte
@ -1,6 +1,6 @@
 <script>
  import {
-    Theme,
+    GlobalTheme,
    RadioButtonGroup,
    RadioButton,
  } from "carbon-components-svelte";
@ -8,7 +8,7 @@
  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}
--- 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" />
--- a/docs/src/pages/framed/GlobalTheme/GlobalThemeSelectCustom.svelte
+++ b/docs/src/pages/framed/GlobalTheme/GlobalThemeSelectCustom.svelte
@ -1,8 +1,8 @@
 <script>
-  import { Theme } from "carbon-components-svelte";
+  import { GlobalTheme } from "carbon-components-svelte";
 </script>

-<Theme
+<GlobalTheme
  render="select"
  select="{{
    themes: ['white', 'g90', 'g100'],
--- a/docs/src/pages/framed/GlobalTheme/GlobalThemeToggle.svelte
+++ b/docs/src/pages/framed/GlobalTheme/GlobalThemeToggle.svelte
@ -1,5 +1,5 @@
 <script>
-  import { Theme } from "carbon-components-svelte";
+  import { GlobalTheme } from "carbon-components-svelte";
 </script>

-<Theme render="toggle" />
+<GlobalTheme render="toggle" />
--- a/docs/src/pages/framed/GlobalTheme/GlobalThemeToggleCustom.svelte
+++ b/docs/src/pages/framed/GlobalTheme/GlobalThemeToggleCustom.svelte
@ -1,8 +1,8 @@
 <script>
-  import { Theme } from "carbon-components-svelte";
+  import { GlobalTheme } from "carbon-components-svelte";
 </script>

-<Theme
+<GlobalTheme
  render="toggle"
  toggle="{{
    themes: ['g10', 'g80'],
--- a/docs/src/pages/framed/GlobalTheme/GlobalThemeTokens.svelte
+++ b/docs/src/pages/framed/GlobalTheme/GlobalThemeTokens.svelte
@ -1,8 +1,8 @@
 <script>
-  import { Theme, Button } from "carbon-components-svelte";
+  import { GlobalTheme, Button } from "carbon-components-svelte";
 </script>

-<Theme
+<GlobalTheme
  theme="g90"
  tokens="{{
    'interactive-01': '#d02670',