Skip to content

Commit

Permalink
chore: v11 Theme
Browse files Browse the repository at this point in the history
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)
  • Loading branch information
gregorw committed Jan 20, 2024
1 parent 82f582c commit f74c03a
Show file tree
Hide file tree
Showing 34 changed files with 114,303 additions and 61 deletions.
2 changes: 1 addition & 1 deletion COMPONENT_INDEX.md
Original file line number Diff line number Diff line change
Expand Up @@ -4200,7 +4200,7 @@ None.
### Types

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

### Props
Expand Down
7 changes: 1 addition & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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)
Expand All @@ -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";

Expand Down Expand Up @@ -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>
Expand Down
23,848 changes: 23,847 additions & 1 deletion css/all.css

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions css/all.css.map

Large diffs are not rendered by default.

23 changes: 23 additions & 0 deletions css/all.scss
Original file line number Diff line number Diff line change
@@ -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);
}
22,594 changes: 22,593 additions & 1 deletion css/g10.css

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions css/g10.css.map

Large diffs are not rendered by default.

10 changes: 10 additions & 0 deletions css/g10.scss
Original file line number Diff line number Diff line change
@@ -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);
}
22,594 changes: 22,593 additions & 1 deletion css/g100.css

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions css/g100.css.map

Large diffs are not rendered by default.

10 changes: 10 additions & 0 deletions css/g100.scss
Original file line number Diff line number Diff line change
@@ -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);
}
1 change: 0 additions & 1 deletion css/g80.css

This file was deleted.

22,594 changes: 22,593 additions & 1 deletion css/g90.css

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions css/g90.css.map

Large diffs are not rendered by default.

10 changes: 10 additions & 0 deletions css/g90.scss
Original file line number Diff line number Diff line change
@@ -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);
}
22,594 changes: 22,593 additions & 1 deletion css/white.css

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions css/white.css.map

Large diffs are not rendered by default.

10 changes: 10 additions & 0 deletions css/white.scss
Original file line number Diff line number Diff line change
@@ -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);
}
2 changes: 1 addition & 1 deletion docs/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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");
}
Expand Down
1 change: 0 additions & 1 deletion docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": "../",
Expand Down
4 changes: 2 additions & 2 deletions docs/src/COMPONENT_API.json
Original file line number Diff line number Diff line change
Expand Up @@ -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\""
}
]
},
Expand Down
11 changes: 0 additions & 11 deletions docs/src/carbon.scss

This file was deleted.

2 changes: 1 addition & 1 deletion docs/src/index.js
Original file line number Diff line number Diff line change
@@ -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 });
Expand Down
3 changes: 1 addition & 2 deletions docs/src/layouts/ComponentLayout.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
});
Expand Down Expand Up @@ -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>
Expand Down
13 changes: 0 additions & 13 deletions docs/src/pages/components/Select.svx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
1 change: 0 additions & 1 deletion docs/src/pages/framed/Select/SelectReactive.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/framed/Theme/Theme.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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>
2 changes: 1 addition & 1 deletion docs/src/pages/framed/Theme/ThemePersist.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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>
2 changes: 1 addition & 1 deletion docs/src/pages/framed/Theme/ThemeToggleCustom.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<Theme
render="toggle"
toggle="{{
themes: ['g10', 'g80'],
themes: ['g10', 'g90'],
labelA: 'Enable dark mode',
labelB: 'Enable dark mode',
hideLabel: true,
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/framed/_reset.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
5 changes: 2 additions & 3 deletions docs/src/pages/index.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
7 changes: 1 addition & 6 deletions docs/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"

Expand Down
3 changes: 1 addition & 2 deletions src/Theme/Theme.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
*/
/**
* @typedef {"white" | "g10" | "g80" | "g90" | "g100"} CarbonTheme
* @typedef {"white" | "g10" | "g90" | "g100"} CarbonTheme
* @event {{ theme: CarbonTheme; }} update
* @slot {{ theme: CarbonTheme; }}
*/
Expand Down Expand Up @@ -51,7 +51,6 @@
const themes = {
white: "White",
g10: "Gray 10",
g80: "Gray 80",
g90: "Gray 90",
g100: "Gray 100",
};
Expand Down
2 changes: 1 addition & 1 deletion types/Theme/Theme.svelte.d.ts
Original file line number Diff line number Diff line change
@@ -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 {
/**
Expand Down

0 comments on commit f74c03a

Please sign in to comment.