mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 19:46:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: migrate Theme component to v11

Browse source 
- remove g80 theme option everywhere
- utilize new `data-carbon-theme` attribute when applying theme
- use cds instead of bx in places
This commit is contained in:
Enrico Sacchetti 2024-01-10 16:12:19 -05:00
commit 3ae53de629
17 changed files with 38 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

4
docs/src/COMPONENT_API.json
View file

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

3
docs/src/layouts/ComponentLayout.svelte
View file

@ -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>

15
docs/src/pages/components/Select.svx
View file

@ -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>

1
docs/src/pages/framed/Select/SelectReactive.svelte
View file

@ -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>

2
docs/src/pages/framed/Theme/Theme.svelte
View file

@ -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>

4
docs/src/pages/framed/Theme/ThemePersist.svelte
View file

@ -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>

2
docs/src/pages/framed/Theme/ThemeToggleCustom.svelte
View file

@ -5,7 +5,7 @@
<Theme
render="toggle"
toggle="{{
themes: ['g10', 'g80'],
themes: ['g10', 'g90'],
labelA: 'Enable dark mode',
labelB: 'Enable dark mode',
hideLabel: true,

2
docs/src/pages/framed/_reset.svelte
View file

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

3
docs/src/pages/index.svelte
View file

@ -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>