chore: v11 Theme

This fixes the current `Theme` component. Note that the canonical implementation uses `GlobalTheme` for the same concept. See carbon-design-system#1702.

Static CSS files are updated to use @carbon/styles including fonts via CDN.

(cherry picked from commit 50f24b8)

COMPONENT_INDEX.md

@@ -4200,7 +4200,7 @@ None.
 ### Types
 
 ```ts
-export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
+export type CarbonTheme = "white" | "g10" | "g90" | "g100";
 ```
 
 ### Props

README.md

@@ -49,7 +49,6 @@ Before importing components, you will need to first apply Carbon component style
 
 - **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>

css/all.scss

@@ -0,0 +1,23 @@
+// Use all Carbon themes
+@use '@carbon/styles/scss/config' with (
+  $use-akamai-cdn: true,
+  $use-flexbox-grid: true,
+  $prefix: 'bx'
+);
+@use "@carbon/styles" as styles;
+
+:root {
+  @include styles.theme(styles.$white);
+}
+
+[theme='g10'] {
+  @include styles.theme(styles.$g10);
+}
+
+[theme='g90'] {
+  @include styles.theme(styles.$g90);
+}
+
+[theme='g100'] {
+  @include styles.theme(styles.$g100);
+}

css/g10.scss

@@ -0,0 +1,10 @@
+@use '@carbon/styles/scss/config' with (
+  $use-akamai-cdn: true,
+  $use-flexbox-grid: true,
+  $prefix: 'bx'
+);
+@use "@carbon/styles" as styles;
+
+:root {
+  @include styles.theme(styles.$g10);
+}

css/g100.scss

@@ -0,0 +1,10 @@
+@use '@carbon/styles/scss/config' with (
+  $use-akamai-cdn: true,
+  $use-flexbox-grid: true,
+  $prefix: 'bx'
+);
+@use "@carbon/styles" as styles;
+
+:root {
+  @include styles.theme(styles.$g100);
+}

css/g90.scss

@@ -0,0 +1,10 @@
+@use '@carbon/styles/scss/config' with (
+  $use-akamai-cdn: true,
+  $use-flexbox-grid: true,
+  $prefix: 'bx'
+);
+@use "@carbon/styles" as styles;
+
+:root {
+  @include styles.theme(styles.$g90);
+}

css/white.scss

@@ -0,0 +1,10 @@
+@use '@carbon/styles/scss/config' with (
+  $use-akamai-cdn: true,
+  $use-flexbox-grid: true,
+  $prefix: 'bx'
+);
+@use "@carbon/styles" as styles;
+
+:root {
+  @include styles.theme(styles.$white);
+}

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");
         }

docs/package.json

@@ -10,7 +10,6 @@
     "build:svite": "vite build"
   },
   "devDependencies": {
-    "@ibm/plex": "^6.1.1",
     "@sveltech/routify": "^1.9.10",
     "@sveltejs/vite-plugin-svelte": "^3.0.1",
     "carbon-components-svelte": "../",

docs/src/COMPONENT_API.json

@@ -13075,9 +13075,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\""
         }
       ]
     },

docs/src/index.js

@@ -1,5 +1,5 @@
 import App from "./App.svelte";
-import "./carbon.scss";
+import "../../css/all.css";
 import "./global.css";
 
 const app = new App({ target: document.body });

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>

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>
@@ -54,7 +51,6 @@ The `selected` prop is reactive and supports two-way binding.
 <Select helperText="Carbon offers 4 themes (2 light, 3 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>

docs/src/pages/framed/Select/SelectReactive.svelte

@@ -7,7 +7,6 @@
 <Select labelText="Carbon theme" bind: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>

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>

docs/src/pages/framed/Theme/ThemePersist.svelte

@@ -11,7 +11,7 @@
 <Theme bind: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>

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,

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",

docs/src/pages/index.svelte

@@ -27,15 +27,14 @@
   const themes = {
     white: "White",
     g10: "Gray 10",
-    g80: "Gray 80",
     g90: "Gray 90",
     g100: "Gray 100",
     all: "All",
   };
 
   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>
@@ -130,7 +129,7 @@
           legendText="Carbon themes"
           bind:selected="{$theme}"
         >
-          {#each ["white", "g10", "g80", "g90", "g100"] as value}
+          {#each ["white", "g10", "g90", "g100"] as value}
             <RadioButton labelText="{themes[value]}" value="{value}" />
           {/each}
         </RadioButtonGroup>

docs/yarn.lock

@@ -120,11 +120,6 @@
   resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.19.9.tgz#b2da6219b603e3fa371a78f53f5361260d0c5585"
   integrity sha512-oxoQgglOP7RH6iasDrhY+R/3cHrfwIDvRlT4CGChflq6twk8iENeVvMJjmvBb94Ik1Z+93iGO27err7w6l54GQ==
 
-"@ibm/plex@^6.1.1":
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/@ibm/plex/-/plex-6.1.1.tgz#eddfd98fe86ecafc74bc8ec7595e7615bb88eb34"
-  integrity sha512-b2z/Gsc8KHOVrYo/yPauRvRDNMwF6zhEZZsvogs1rCmmyfVXBTY9uUkf6TyplhQs/L4UcjBus8R/RDp7yASTBA==
-
 "@jridgewell/gen-mapping@^0.3.0":
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz#7e02e6eb5df901aaedb08514203b096614024098"
@@ -404,7 +399,7 @@ bufferutil@^4.0.1:
     node-gyp-build "~3.7.0"
 
 carbon-components-svelte@../:
-  version "0.82.5"
+  version "0.82.8"
   dependencies:
     flatpickr "4.6.9"
 

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",
   };

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 {
   /**