feat: migrate Theme component to v11

- remove g80 theme option everywhere - utilize new `data-carbon-theme` attribute when applying theme - use cds instead of bx in places
2025-09-18 11:36:36 +00:00 · 2024-01-10 16:12:19 -05:00 · 2024-01-10 16:12:19 -05:00 · 3ae53de629
commit 3ae53de629
parent 21847da207
17 changed files with 38 additions and 60 deletions
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@ -304,9 +304,9 @@ None.

 ### Slots

-| Slot name | Default | Props                                                                     | Fallback |
-| :-------- | :------ | :------------------------------------------------------------------------ | :------- |
-| --        | Yes     | <code>{props?: { ["aria-current"]?: string; class: "bx--link"; }} </code> | --       |
+| Slot name | Default | Props                                                                      | Fallback |
+| :-------- | :------ | :------------------------------------------------------------------------- | :------- |
+| --        | Yes     | <code>{props?: { ["aria-current"]?: string; class: "cds--link"; }} </code> | --       |

 ### Events

@ -2621,10 +2621,10 @@ None.

 ### Slots

-| Slot name | Default | Props | Fallback                                                                                                                                                                                   |
-| :-------- | :------ | :---- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| --        | Yes     | --    | --                                                                                                                                                                                         |
-| menu      | No      | --    | <code>&lt;svelte:component<br /> this="{icon}"<br /> aria-label="{iconDescription}"<br /> title="{iconDescription}"<br /> class="bx--overflow-menu\_\_icon {iconClass}"<br /> /&gt;</code> |
+| Slot name | Default | Props | Fallback                                                                                                                                                                                    |
+| :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| --        | Yes     | --    | --                                                                                                                                                                                          |
+| menu      | No      | --    | <code>&lt;svelte:component<br /> this="{icon}"<br /> aria-label="{iconDescription}"<br /> title="{iconDescription}"<br /> class="cds--overflow-menu\_\_icon {iconClass}"<br /> /&gt;</code> |

 ### Events

@ -2655,9 +2655,9 @@ None.

 ### Slots

-| Slot name | Default | Props | Fallback                                                                                                            |
-| :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------------------------ |
-| --        | Yes     | --    | <code>&lt;div class:bx--overflow-menu-options\_\_option-content="{true}"&gt;<br /> {text}<br /> &lt;/div&gt;</code> |
+| Slot name | Default | Props | Fallback                                                                                                             |
+| :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------------------------- |
+| --        | Yes     | --    | <code>&lt;div class:cds--overflow-menu-options\_\_option-content="{true}"&gt;<br /> {text}<br /> &lt;/div&gt;</code> |

 ### Events

@ -2933,9 +2933,9 @@ None.

 ### Slots

-| Slot name | Default | Props                                                    | Fallback                                                                  |
-| :-------- | :------ | :------------------------------------------------------- | :------------------------------------------------------------------------ |
-| --        | Yes     | <code>{ props: { class: 'bx--progress-label' } } </code> | <code>&lt;p class:bx--progress-label="{true}"&gt;{label}&lt;/p&gt;</code> |
+| Slot name | Default | Props                                                     | Fallback                                                                   |
+| :-------- | :------ | :-------------------------------------------------------- | :------------------------------------------------------------------------- |
+| --        | Yes     | <code>{ props: { class: 'cds--progress-label' } } </code> | <code>&lt;p class:cds--progress-label="{true}"&gt;{label}&lt;/p&gt;</code> |

 ### Events

@ -4022,10 +4022,10 @@ None.

 ### Slots

-| Slot name | Default | Props                                                  | Fallback                                              |
-| :-------- | :------ | :----------------------------------------------------- | :---------------------------------------------------- |
-| --        | Yes     | <code>{ props: { class: 'bx--tag\_\_label' } } </code> | --                                                    |
-| icon      | No      | --                                                     | <code>&lt;svelte:component this="{icon}" /&gt;</code> |
+| Slot name | Default | Props                                                   | Fallback                                              |
+| :-------- | :------ | :------------------------------------------------------ | :---------------------------------------------------- |
+| --        | Yes     | <code>{ props: { class: 'cds--tag\_\_label' } } </code> | --                                                    |
+| icon      | No      | --                                                      | <code>&lt;svelte:component this="{icon}" /&gt;</code> |

 ### Events

@ -4197,7 +4197,7 @@ None.
 ### Types

 ```ts
-export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
+export type CarbonTheme = "white" | "g10" | "g90" | "g100";
 ```

 ### Props
--- a/README.md
+++ b/README.md
@ -45,11 +45,10 @@ pnpm i -D carbon-components-svelte

 ### Styling

-Before importing components, you will need to first apply Carbon component styles. The Carbon Design System supports five themes (2 light, 3 dark).
+Before importing components, you will need to first apply Carbon component styles. The Carbon Design System supports four themes (2 light, 2 dark).

 - **white.css**: Default Carbon theme (light)
 - **g10.css**: Gray 10 theme (light)
- **g80.css**: Gray 80 theme (dark)
 - **g90.css**: Gray 90 theme (dark)
 - **g100.css**: Gray 100 theme (dark)
 - **all.css**: All themes (White, Gray 10, Gray 90, Gray 100) using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
@ -60,7 +59,6 @@ The compiled CSS is generated from the following `.scss` files:

 - [css/white.scss](css/white.scss)
 - [css/g10.scss](css/g10.scss)
- [css/g80.scss](css/g80.scss)
 - [css/g90.scss](css/g90.scss)
 - [css/g100.scss](css/g100.scss)
 - [css/all.scss](css/all.scss)
@ -74,9 +72,6 @@ import "carbon-components-svelte/css/white.css";
 // Gray 10 theme
 import "carbon-components-svelte/css/g10.css";

-// Gray 80 theme
-import "carbon-components-svelte/css/g80.css";
-
 // Gray 90 theme
 import "carbon-components-svelte/css/g90.css";

@ -147,7 +142,7 @@ Programmatically switch between each of the five Carbon themes by setting the "t

 ```html
 <script>
-  let theme = "white"; // "white" | "g10" | "g80" | "g90" | "g100"
+  let theme = "white"; // "white" | "g10" | "g90" | "g100"

  $: document.documentElement.setAttribute("theme", theme);
 </script>
--- a/docs/index.html
+++ b/docs/index.html
@ -9,7 +9,7 @@
      try {
        const theme = localStorage.getItem("theme");

-        if (["white", "g10", "g80", "g90", "g100"].includes(theme)) {
+        if (["white", "g10", "g90", "g100"].includes(theme)) {
          document.documentElement.setAttribute("theme", theme);
          document.documentElement.style.setProperty("color-scheme", ["white", "g10"].includes(theme) ? "light" : "dark");
        }
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@ -13074,9 +13074,9 @@
      ],
      "typedefs": [
        {
-          "type": "\"white\" | \"g10\" | \"g80\" | \"g90\" | \"g100\"",
+          "type": "\"white\" | \"g10\" | \"g90\" | \"g100\"",
          "name": "CarbonTheme",
-          "ts": "type CarbonTheme = \"white\" | \"g10\" | \"g80\" | \"g90\" | \"g100\""
+          "ts": "type CarbonTheme = \"white\" | \"g10\" | \"g90\" | \"g100\""
        }
      ]
    },
--- a/docs/src/layouts/ComponentLayout.svelte
+++ b/docs/src/layouts/ComponentLayout.svelte
@ -37,7 +37,7 @@
    const searchParams = new URLSearchParams(window.location.search);
    const current_theme = searchParams.get("theme");

-    if (["white", "g10", "g80", "g90", "g100"].includes(current_theme)) {
+    if (["white", "g10", "g90", "g100"].includes(current_theme)) {
      theme.set(current_theme);
    }
  });
@ -87,7 +87,6 @@
          >
            <SelectItem value="white" text="White" />
            <SelectItem value="g10" text="Gray 10" />
-            <SelectItem value="g80" text="Gray 80" />
            <SelectItem value="g90" text="Gray 90" />
            <SelectItem value="g100" text="Gray 100" />
          </Select>
--- a/docs/src/pages/components/Select.svx
+++ b/docs/src/pages/components/Select.svx
@ -14,7 +14,6 @@ If the `selected` prop is not set, the value of the first `SelectItem` will be u
 <Select labelText="Carbon theme" on:change={e => console.log("value", e.target.value)}>
  <SelectItem value="white" />
  <SelectItem value="g10" />
-  <SelectItem value="g80" />
  <SelectItem value="g90" />
  <SelectItem value="g100" />
 </Select>
@ -26,7 +25,6 @@ Use the `text` prop on `SelectItem` to customize the display value.
 <Select labelText="Carbon theme" on:change={e => console.log("value", e.target.value)}>
  <SelectItem value="white" text="White" />
  <SelectItem value="g10" text="Gray 10" />
-  <SelectItem value="g80" text="Gray 80" />
  <SelectItem value="g90" text="Gray 90" />
  <SelectItem value="g100" text="Gray 100" />
 </Select>
@ -38,7 +36,6 @@ Use the `selected` prop to specify an initial value.
 <Select labelText="Carbon theme" selected="g10" on:change={e => console.log("value", e.target.value)}>
  <SelectItem value="white" text="White" />
  <SelectItem value="g10" text="Gray 10" />
-  <SelectItem value="g80" text="Gray 80" />
  <SelectItem value="g90" text="Gray 90" />
  <SelectItem value="g100" text="Gray 100" />
 </Select>
@ -51,10 +48,9 @@ The `selected` prop is reactive and supports two-way binding.

 ## Helper text

-<Select helperText="Carbon offers 4 themes (2 light, 3 dark)" labelText="Carbon theme" selected="g10" >
+<Select helperText="Carbon offers 4 themes (2 light, 2 dark)" labelText="Carbon theme" selected="g10" >
  <SelectItem value="white" text="White" />
  <SelectItem value="g10" text="Gray 10" />
-  <SelectItem value="g80" text="Gray 80" />
  <SelectItem value="g90" text="Gray 90" />
  <SelectItem value="g100" text="Gray 100" />
 </Select>
@ -64,7 +60,6 @@ The `selected` prop is reactive and supports two-way binding.
 <Select hideLabel labelText="Carbon theme" selected="g10" >
  <SelectItem value="white" text="White" />
  <SelectItem value="g10" text="Gray 10" />
-  <SelectItem value="g80" text="Gray 80" />
  <SelectItem value="g90" text="Gray 90" />
  <SelectItem value="g100" text="Gray 100" />
 </Select>
@ -78,7 +73,6 @@ The `selected` prop is reactive and supports two-way binding.
    <SelectItem value="g10" text="Gray 10" />
  </SelectItemGroup>
  <SelectItemGroup label="Dark theme">
-    <SelectItem value="g80" text="Gray 80" />
    <SelectItem value="g90" text="Gray 90" />
    <SelectItem value="g100" text="Gray 100" />
  </SelectItemGroup>
@ -89,7 +83,6 @@ The `selected` prop is reactive and supports two-way binding.
 <Select light labelText="Carbon theme" selected="g10" >
  <SelectItem value="white" text="White" />
  <SelectItem value="g10" text="Gray 10" />
-  <SelectItem value="g80" text="Gray 80" />
  <SelectItem value="g90" text="Gray 90" />
  <SelectItem value="g100" text="Gray 100" />
 </Select>
@ -99,7 +92,6 @@ The `selected` prop is reactive and supports two-way binding.
 <Select inline labelText="Carbon theme" selected="g10" >
  <SelectItem value="white" text="White" />
  <SelectItem value="g10" text="Gray 10" />
-  <SelectItem value="g80" text="Gray 80" />
  <SelectItem value="g90" text="Gray 90" />
  <SelectItem value="g100" text="Gray 100" />
 </Select>
@ -109,7 +101,6 @@ The `selected` prop is reactive and supports two-way binding.
 <Select size="lg" labelText="Carbon theme" selected="g10" >
  <SelectItem value="white" text="White" />
  <SelectItem value="g10" text="Gray 10" />
-  <SelectItem value="g80" text="Gray 80" />
  <SelectItem value="g90" text="Gray 90" />
  <SelectItem value="g100" text="Gray 100" />
 </Select>
@ -119,7 +110,6 @@ The `selected` prop is reactive and supports two-way binding.
 <Select size="sm" labelText="Carbon theme" selected="g10" >
  <SelectItem value="white" text="White" />
  <SelectItem value="g10" text="Gray 10" />
-  <SelectItem value="g80" text="Gray 80" />
  <SelectItem value="g90" text="Gray 90" />
  <SelectItem value="g100" text="Gray 100" />
 </Select>
@ -129,7 +119,6 @@ The `selected` prop is reactive and supports two-way binding.
 <Select invalid invalidText="Theme must be a dark variant" labelText="Carbon theme" selected="g10" >
  <SelectItem value="white" text="White" />
  <SelectItem value="g10" text="Gray 10" />
-  <SelectItem value="g80" text="Gray 80" />
  <SelectItem value="g90" text="Gray 90" />
  <SelectItem value="g100" text="Gray 100" />
 </Select>
@ -139,7 +128,6 @@ The `selected` prop is reactive and supports two-way binding.
 <Select warn warnText="The selected theme will not be persisted" labelText="Carbon theme" selected="g10" >
  <SelectItem value="white" text="White" />
  <SelectItem value="g10" text="Gray 10" />
-  <SelectItem value="g80" text="Gray 80" />
  <SelectItem value="g90" text="Gray 90" />
  <SelectItem value="g100" text="Gray 100" />
 </Select>
@ -149,7 +137,6 @@ The `selected` prop is reactive and supports two-way binding.
 <Select disabled labelText="Carbon theme" selected="g10" >
  <SelectItem value="white" text="White" />
  <SelectItem value="g10" text="Gray 10" />
-  <SelectItem value="g80" text="Gray 80" />
  <SelectItem value="g90" text="Gray 90" />
  <SelectItem value="g100" text="Gray 100" />
 </Select>
--- a/docs/src/pages/framed/Select/SelectReactive.svelte
+++ b/docs/src/pages/framed/Select/SelectReactive.svelte
@ -7,7 +7,6 @@
 <Select labelText="Carbon theme" bind:selected="{selected}">
  <SelectItem value="white" text="White" />
  <SelectItem value="g10" text="Gray 10" />
-  <SelectItem value="g80" text="Gray 80" />
  <SelectItem value="g90" text="Gray 90" />
  <SelectItem value="g100" text="Gray 100" />
 </Select>
--- a/docs/src/pages/framed/Theme/Theme.svelte
+++ b/docs/src/pages/framed/Theme/Theme.svelte
@ -11,7 +11,7 @@
 <Theme bind:theme />

 <RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}">
-  {#each ["white", "g10", "g80", "g90", "g100"] as value}
+  {#each ["white", "g10", "g90", "g100"] as value}
    <RadioButton labelText="{value}" value="{value}" />
  {/each}
 </RadioButtonGroup>
--- a/docs/src/pages/framed/Theme/ThemePersist.svelte
+++ b/docs/src/pages/framed/Theme/ThemePersist.svelte
@ -8,10 +8,10 @@
  let theme = "g90";
 </script>

-<Theme bind:theme persist persistKey="__carbon-theme" />
+<Theme bind:theme="{theme}" persist persistKey="__carbon-theme" />

 <RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}">
-  {#each ["white", "g10", "g80", "g90", "g100"] as value}
+  {#each ["white", "g10", "g90", "g100"] as value}
    <RadioButton labelText="{value}" value="{value}" />
  {/each}
 </RadioButtonGroup>
--- a/docs/src/pages/framed/Theme/ThemeToggleCustom.svelte
+++ b/docs/src/pages/framed/Theme/ThemeToggleCustom.svelte
@ -5,7 +5,7 @@
 <Theme
  render="toggle"
  toggle="{{
-    themes: ['g10', 'g80'],
+    themes: ['g10', 'g90'],
    labelA: 'Enable dark mode',
    labelB: 'Enable dark mode',
    hideLabel: true,
--- a/docs/src/pages/framed/_reset.svelte
+++ b/docs/src/pages/framed/_reset.svelte
@ -15,7 +15,7 @@
    // NOTE: we *do not* want to persist the theme as this can
    // conflict with how the iframe is displayed in the docs.
    // Instead, we want the theme to be overridden in the standalone page.
-    if (["white", "g10", "g80", "g90", "g100"].includes(current_theme)) {
+    if (["white", "g10", "g90", "g100"].includes(current_theme)) {
      document.documentElement.setAttribute("theme", current_theme);
      document.documentElement.style.setProperty(
        "color-scheme",
--- a/docs/src/pages/index.svelte
+++ b/docs/src/pages/index.svelte
@ -27,7 +27,6 @@
  const themes = {
    white: "White",
    g10: "Gray 10",
-    g80: "Gray 80",
    g90: "Gray 90",
    g100: "Gray 100",
    all: "All",
@ -35,7 +34,7 @@

  const cssImportAll = `import "carbon-components-svelte/css/all.css";`;
  const cssThemeToggle = `<script>
-  let theme = "${$theme}"; // "white" | "g10" | "g80" | "g90" | "g100"
+  let theme = "${$theme}"; // "white" | "g10" | "g90" | "g100"

  $: document.documentElement.setAttribute("theme", theme);
 <\/script>
--- a/src/Theme/Theme.svelte
+++ b/src/Theme/Theme.svelte
@ -5,7 +5,7 @@
   */

  /**
-   * @typedef {"white" | "g10" | "g80" | "g90" | "g100"} CarbonTheme
+   * @typedef {"white" | "g10" | "g90" | "g100"} CarbonTheme
   * @event {{ theme: CarbonTheme; }} update
   * @slot {{ theme: CarbonTheme; }}
   */
@ -51,7 +51,6 @@
  const themes = {
    white: "White",
    g10: "Gray 10",
-    g80: "Gray 80",
    g90: "Gray 90",
    g100: "Gray 100",
  };
@ -79,11 +78,11 @@

  $: if (typeof window !== "undefined") {
    Object.entries(tokens).forEach(([token, value]) => {
-      document.documentElement.style.setProperty(`--bx-${token}`, value);
+      document.documentElement.style.setProperty(`--cds-${token}`, value);
    });

    if (theme in themes) {
-      document.documentElement.setAttribute("theme", theme);
+      document.documentElement.setAttribute("data-carbon-theme", theme);
      dispatch("update", { theme });
    } else {
      console.warn(
--- a/types/Breadcrumb/BreadcrumbItem.svelte.d.ts
+++ b/types/Breadcrumb/BreadcrumbItem.svelte.d.ts
@ -27,5 +27,5 @@ export default class BreadcrumbItem extends SvelteComponentTyped<
    mouseenter: WindowEventMap["mouseenter"];
    mouseleave: WindowEventMap["mouseleave"];
  },
-  { default: { props?: { ["aria-current"]?: string; class: "bx--link" } } }
+  { default: { props?: { ["aria-current"]?: string; class: "cds--link" } } }
 > {}
--- a/types/ProgressIndicator/ProgressStep.svelte.d.ts
+++ b/types/ProgressIndicator/ProgressStep.svelte.d.ts
@ -64,5 +64,5 @@ export default class ProgressStep extends SvelteComponentTyped<
    mouseleave: WindowEventMap["mouseleave"];
    keydown: WindowEventMap["keydown"];
  },
-  { default: { props: { class: "bx--progress-label" } } }
+  { default: { props: { class: "cds--progress-label" } } }
 > {}
--- a/types/Tag/Tag.svelte.d.ts
+++ b/types/Tag/Tag.svelte.d.ts
@ -81,5 +81,5 @@ export default class Tag extends SvelteComponentTyped<
    mouseleave: WindowEventMap["mouseleave"];
    close: CustomEvent<null>;
  },
-  { default: { props: { class: "bx--tag__label" } }; icon: {} }
+  { default: { props: { class: "cds--tag__label" } }; icon: {} }
 > {}
--- a/types/Theme/Theme.svelte.d.ts
+++ b/types/Theme/Theme.svelte.d.ts
@ -1,6 +1,6 @@
 import type { SvelteComponentTyped } from "svelte";

-export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
+export type CarbonTheme = "white" | "g10" | "g90" | "g100";

 export interface ThemeProps {
  /**