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

36
COMPONENT_INDEX.md
View file

@ -304,9 +304,9 @@ None.
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :------------------------------------------------------------------------ | :------- | | :-------- | :------ | :------------------------------------------------------------------------- | :------- |
| -- | Yes | <code>{props?: { ["aria-current"]?: string; class: "bx--link"; }} </code> | -- | | -- | Yes | <code>{props?: { ["aria-current"]?: string; class: "cds--link"; }} </code> | -- |
### Events ### Events
@ -2621,10 +2621,10 @@ None.
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| -- | Yes | -- | -- | | -- | 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> | | 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 ### Events
@ -2655,9 +2655,9 @@ None.
### Slots ### Slots
| Slot name | Default | Props | Fallback | | 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> | | -- | Yes | -- | <code>&lt;div class:cds--overflow-menu-options\_\_option-content="{true}"&gt;<br /> {text}<br /> &lt;/div&gt;</code> |
### Events ### Events
@ -2933,9 +2933,9 @@ None.
### Slots ### Slots
| Slot name | Default | Props | Fallback | | 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> | | -- | Yes | <code>{ props: { class: 'cds--progress-label' } } </code> | <code>&lt;p class:cds--progress-label="{true}"&gt;{label}&lt;/p&gt;</code> |
### Events ### Events
@ -4022,10 +4022,10 @@ None.
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :----------------------------------------------------- | :---------------------------------------------------- | | :-------- | :------ | :------------------------------------------------------ | :---------------------------------------------------- |
| -- | Yes | <code>{ props: { class: 'bx--tag\_\_label' } } </code> | -- | | -- | Yes | <code>{ props: { class: 'cds--tag\_\_label' } } </code> | -- |
| icon | No | -- | <code>&lt;svelte:component this="{icon}" /&gt;</code> | | icon | No | -- | <code>&lt;svelte:component this="{icon}" /&gt;</code> |
### Events ### Events
@ -4197,7 +4197,7 @@ None.
### Types ### Types
```ts ```ts
export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100"; export type CarbonTheme = "white" | "g10" | "g90" | "g100";
``` ```
### Props ### Props

9
README.md
View file

@ -45,11 +45,10 @@ pnpm i -D carbon-components-svelte
### Styling ### 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) - **white.css**: Default Carbon theme (light)
- **g10.css**: Gray 10 theme (light) - **g10.css**: Gray 10 theme (light)
- **g80.css**: Gray 80 theme (dark)
- **g90.css**: Gray 90 theme (dark) - **g90.css**: Gray 90 theme (dark)
- **g100.css**: Gray 100 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) - **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/white.scss](css/white.scss)
- [css/g10.scss](css/g10.scss) - [css/g10.scss](css/g10.scss)
- [css/g80.scss](css/g80.scss)
- [css/g90.scss](css/g90.scss) - [css/g90.scss](css/g90.scss)
- [css/g100.scss](css/g100.scss) - [css/g100.scss](css/g100.scss)
- [css/all.scss](css/all.scss) - [css/all.scss](css/all.scss)
@ -74,9 +72,6 @@ import "carbon-components-svelte/css/white.css";
// Gray 10 theme // Gray 10 theme
import "carbon-components-svelte/css/g10.css"; import "carbon-components-svelte/css/g10.css";
// Gray 80 theme
import "carbon-components-svelte/css/g80.css";
// Gray 90 theme // Gray 90 theme
import "carbon-components-svelte/css/g90.css"; 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 ```html
<script> <script>
let theme = "white"; // "white" | "g10" | "g80" | "g90" | "g100" let theme = "white"; // "white" | "g10" | "g90" | "g100"
$: document.documentElement.setAttribute("theme", theme); $: document.documentElement.setAttribute("theme", theme);
</script> </script>

2
docs/index.html
View file

@ -9,7 +9,7 @@
try { try {
const theme = localStorage.getItem("theme"); 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.setAttribute("theme", theme);
document.documentElement.style.setProperty("color-scheme", ["white", "g10"].includes(theme) ? "light" : "dark"); document.documentElement.style.setProperty("color-scheme", ["white", "g10"].includes(theme) ? "light" : "dark");
} }

4
docs/src/COMPONENT_API.json
View file

@ -13074,9 +13074,9 @@
], ],
"typedefs": [ "typedefs": [
{ {
"type": "\"white\" | \"g10\" | \"g80\" | \"g90\" | \"g100\"", "type": "\"white\" | \"g10\" | \"g90\" | \"g100\"",
"name": "CarbonTheme", "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 searchParams = new URLSearchParams(window.location.search);
const current_theme = searchParams.get("theme"); 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); theme.set(current_theme);
} }
}); });
@ -87,7 +87,6 @@
> >
<SelectItem value="white" text="White" /> <SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" /> <SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" /> <SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" /> <SelectItem value="g100" text="Gray 100" />
</Select> </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)}> <Select labelText="Carbon theme" on:change={e => console.log("value", e.target.value)}>
<SelectItem value="white" /> <SelectItem value="white" />
<SelectItem value="g10" /> <SelectItem value="g10" />
<SelectItem value="g80" />
<SelectItem value="g90" /> <SelectItem value="g90" />
<SelectItem value="g100" /> <SelectItem value="g100" />
</Select> </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)}> <Select labelText="Carbon theme" on:change={e => console.log("value", e.target.value)}>
<SelectItem value="white" text="White" /> <SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" /> <SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" /> <SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" /> <SelectItem value="g100" text="Gray 100" />
</Select> </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)}> <Select labelText="Carbon theme" selected="g10" on:change={e => console.log("value", e.target.value)}>
<SelectItem value="white" text="White" /> <SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" /> <SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" /> <SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" /> <SelectItem value="g100" text="Gray 100" />
</Select> </Select>
@ -51,10 +48,9 @@ The `selected` prop is reactive and supports two-way binding.
## Helper text ## 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="white" text="White" />
<SelectItem value="g10" text="Gray 10" /> <SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" /> <SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" /> <SelectItem value="g100" text="Gray 100" />
</Select> </Select>
@ -64,7 +60,6 @@ The `selected` prop is reactive and supports two-way binding.
<Select hideLabel labelText="Carbon theme" selected="g10" > <Select hideLabel labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" /> <SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" /> <SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" /> <SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" /> <SelectItem value="g100" text="Gray 100" />
</Select> </Select>
@ -78,7 +73,6 @@ The `selected` prop is reactive and supports two-way binding.
<SelectItem value="g10" text="Gray 10" /> <SelectItem value="g10" text="Gray 10" />
</SelectItemGroup> </SelectItemGroup>
<SelectItemGroup label="Dark theme"> <SelectItemGroup label="Dark theme">
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" /> <SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" /> <SelectItem value="g100" text="Gray 100" />
</SelectItemGroup> </SelectItemGroup>
@ -89,7 +83,6 @@ The `selected` prop is reactive and supports two-way binding.
<Select light labelText="Carbon theme" selected="g10" > <Select light labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" /> <SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" /> <SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" /> <SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" /> <SelectItem value="g100" text="Gray 100" />
</Select> </Select>
@ -99,7 +92,6 @@ The `selected` prop is reactive and supports two-way binding.
<Select inline labelText="Carbon theme" selected="g10" > <Select inline labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" /> <SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" /> <SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" /> <SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" /> <SelectItem value="g100" text="Gray 100" />
</Select> </Select>
@ -109,7 +101,6 @@ The `selected` prop is reactive and supports two-way binding.
<Select size="lg" labelText="Carbon theme" selected="g10" > <Select size="lg" labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" /> <SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" /> <SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" /> <SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" /> <SelectItem value="g100" text="Gray 100" />
</Select> </Select>
@ -119,7 +110,6 @@ The `selected` prop is reactive and supports two-way binding.
<Select size="sm" labelText="Carbon theme" selected="g10" > <Select size="sm" labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" /> <SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" /> <SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" /> <SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" /> <SelectItem value="g100" text="Gray 100" />
</Select> </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" > <Select invalid invalidText="Theme must be a dark variant" labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" /> <SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" /> <SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" /> <SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" /> <SelectItem value="g100" text="Gray 100" />
</Select> </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" > <Select warn warnText="The selected theme will not be persisted" labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" /> <SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" /> <SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" /> <SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" /> <SelectItem value="g100" text="Gray 100" />
</Select> </Select>
@ -149,7 +137,6 @@ The `selected` prop is reactive and supports two-way binding.
<Select disabled labelText="Carbon theme" selected="g10" > <Select disabled labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" /> <SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" /> <SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" /> <SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" /> <SelectItem value="g100" text="Gray 100" />
</Select> </Select>

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

@ -7,7 +7,6 @@
<Select labelText="Carbon theme" bind:selected="{selected}"> <Select labelText="Carbon theme" bind:selected="{selected}">
<SelectItem value="white" text="White" /> <SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" /> <SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" /> <SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" /> <SelectItem value="g100" text="Gray 100" />
</Select> </Select>

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

@ -11,7 +11,7 @@
<Theme bind:theme /> <Theme bind:theme />
<RadioButtonGroup legendText="Carbon theme" bind:selected="{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}" /> <RadioButton labelText="{value}" value="{value}" />
{/each} {/each}
</RadioButtonGroup> </RadioButtonGroup>

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

@ -8,10 +8,10 @@
let theme = "g90"; let theme = "g90";
</script> </script>
<Theme bind:theme persist persistKey="__carbon-theme" /> <Theme bind:theme="{theme}" persist persistKey="__carbon-theme" />
<RadioButtonGroup legendText="Carbon theme" bind:selected="{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}" /> <RadioButton labelText="{value}" value="{value}" />
{/each} {/each}
</RadioButtonGroup> </RadioButtonGroup>

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

@ -5,7 +5,7 @@
<Theme <Theme
render="toggle" render="toggle"
toggle="{{ toggle="{{
themes: ['g10', 'g80'], themes: ['g10', 'g90'],
labelA: 'Enable dark mode', labelA: 'Enable dark mode',
labelB: 'Enable dark mode', labelB: 'Enable dark mode',
hideLabel: true, 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 // NOTE: we *do not* want to persist the theme as this can
// conflict with how the iframe is displayed in the docs. // conflict with how the iframe is displayed in the docs.
// Instead, we want the theme to be overridden in the standalone page. // 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.setAttribute("theme", current_theme);
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
"color-scheme", "color-scheme",

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

@ -27,7 +27,6 @@
const themes = { const themes = {
white: "White", white: "White",
g10: "Gray 10", g10: "Gray 10",
g80: "Gray 80",
g90: "Gray 90", g90: "Gray 90",
g100: "Gray 100", g100: "Gray 100",
all: "All", all: "All",
@ -35,7 +34,7 @@
const cssImportAll = `import "carbon-components-svelte/css/all.css";`; const cssImportAll = `import "carbon-components-svelte/css/all.css";`;
const cssThemeToggle = `<script> const cssThemeToggle = `<script>
let theme = "${$theme}"; // "white" | "g10" | "g80" | "g90" | "g100" let theme = "${$theme}"; // "white" | "g10" | "g90" | "g100"
$: document.documentElement.setAttribute("theme", theme); $: document.documentElement.setAttribute("theme", theme);
<\/script> <\/script>

7
src/Theme/Theme.svelte
View file

@ -5,7 +5,7 @@
*/ */
/** /**
* @typedef {"white" | "g10" | "g80" | "g90" | "g100"} CarbonTheme * @typedef {"white" | "g10" | "g90" | "g100"} CarbonTheme
* @event {{ theme: CarbonTheme; }} update * @event {{ theme: CarbonTheme; }} update
* @slot {{ theme: CarbonTheme; }} * @slot {{ theme: CarbonTheme; }}
*/ */
@ -51,7 +51,6 @@
const themes = { const themes = {
white: "White", white: "White",
g10: "Gray 10", g10: "Gray 10",
g80: "Gray 80",
g90: "Gray 90", g90: "Gray 90",
g100: "Gray 100", g100: "Gray 100",
}; };
@ -79,11 +78,11 @@
$: if (typeof window !== "undefined") { $: if (typeof window !== "undefined") {
Object.entries(tokens).forEach(([token, value]) => { Object.entries(tokens).forEach(([token, value]) => {
document.documentElement.style.setProperty(`--bx-${token}`, value); document.documentElement.style.setProperty(`--cds-${token}`, value);
}); });
if (theme in themes) { if (theme in themes) {
document.documentElement.setAttribute("theme", theme); document.documentElement.setAttribute("data-carbon-theme", theme);
dispatch("update", { theme }); dispatch("update", { theme });
} else { } else {
console.warn( console.warn(

2
types/Breadcrumb/BreadcrumbItem.svelte.d.ts vendored
View file

@ -27,5 +27,5 @@ export default class BreadcrumbItem extends SvelteComponentTyped<
mouseenter: WindowEventMap["mouseenter"]; mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"]; mouseleave: WindowEventMap["mouseleave"];
}, },
{ default: { props?: { ["aria-current"]?: string; class: "bx--link" } } } { default: { props?: { ["aria-current"]?: string; class: "cds--link" } } }
> {} > {}

2
types/ProgressIndicator/ProgressStep.svelte.d.ts vendored
View file

@ -64,5 +64,5 @@ export default class ProgressStep extends SvelteComponentTyped<
mouseleave: WindowEventMap["mouseleave"]; mouseleave: WindowEventMap["mouseleave"];
keydown: WindowEventMap["keydown"]; keydown: WindowEventMap["keydown"];
}, },
{ default: { props: { class: "bx--progress-label" } } } { default: { props: { class: "cds--progress-label" } } }
> {} > {}

2
types/Tag/Tag.svelte.d.ts vendored
View file

@ -81,5 +81,5 @@ export default class Tag extends SvelteComponentTyped<
mouseleave: WindowEventMap["mouseleave"]; mouseleave: WindowEventMap["mouseleave"];
close: CustomEvent<null>; close: CustomEvent<null>;
}, },
{ default: { props: { class: "bx--tag__label" } }; icon: {} } { default: { props: { class: "cds--tag__label" } }; icon: {} }
> {} > {}

2
types/Theme/Theme.svelte.d.ts vendored
View file

@ -1,6 +1,6 @@
import type { SvelteComponentTyped } from "svelte"; import type { SvelteComponentTyped } from "svelte";
export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100"; export type CarbonTheme = "white" | "g10" | "g90" | "g100";
export interface ThemeProps { export interface ThemeProps {
/** /**