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)

Author: gregorw

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.css

@@ -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/all.css.map

@@ -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);
+}