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

fix(theme): Theme correctly imports toggle, select props (#2019)

Browse source 
Fixes #2018
This commit is contained in:
Eric Liu 2024-10-25 14:56:59 -07:00 • committed by GitHub
commit 49b5def815
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 17 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

18
COMPONENT_INDEX.md
View file

@ -4193,15 +4193,15 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :--------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| theme | No | <code>let</code> | Yes | <code>CarbonTheme</code> | <code>"white"</code> | Set the current Carbon theme |
| tokens | No | <code>let</code> | No | <code>{ [token: string]: any; }</code> | <code>{}</code> | Customize a theme with your own tokens<br />@see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme |
| persist | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the theme using window.localStorage |
| persistKey | No | <code>let</code> | No | <code>string</code> | <code>"theme"</code> | Specify the local storage key |
| render | No | <code>let</code> | No | <code>"toggle" &#124; "select"</code> | <code>undefined</code> | Render a toggle or select dropdown to control the theme |
| toggle | No | <code>let</code> | No | <code>import("../Toggle/Toggle").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }</code> | <code>{ themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, }</code> | Override the default toggle props |
| select | No | <code>let</code> | No | <code>import("../Select/Select").SelectProps & { themes?: CarbonTheme[]; }</code> | <code>{ themes: themeKeys, labelText: "Themes", hideLabel: false, }</code> | Override the default select props |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :--------- | :------- | :--------------- | :------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| theme | No | <code>let</code> | Yes | <code>CarbonTheme</code> | <code>"white"</code> | Set the current Carbon theme |
| tokens | No | <code>let</code> | No | <code>{ [token: string]: any; }</code> | <code>{}</code> | Customize a theme with your own tokens<br />@see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme |
| persist | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the theme using window.localStorage |
| persistKey | No | <code>let</code> | No | <code>string</code> | <code>"theme"</code> | Specify the local storage key |
| render | No | <code>let</code> | No | <code>"toggle" &#124; "select"</code> | <code>undefined</code> | Render a toggle or select dropdown to control the theme |
| toggle | No | <code>let</code> | No | <code>import("../Toggle/Toggle.svelte").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }</code> | <code>{ themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, }</code> | Override the default toggle props |
| select | No | <code>let</code> | No | <code>import("../Select/Select.svelte").SelectProps & { themes?: CarbonTheme[]; }</code> | <code>{ themes: themeKeys, labelText: "Themes", hideLabel: false, }</code> | Override the default select props |
### Slots

4
docs/src/COMPONENT_API.json
View file

@ -13198,7 +13198,7 @@
"name": "toggle",
"kind": "let",
"description": "Override the default toggle props",
"type": "import(\"../Toggle/Toggle\").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }",
"type": "import(\"../Toggle/Toggle.svelte\").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }",
"value": "{ themes: [\"white\", \"g100\"], labelA: \"\", labelB: \"\", labelText: \"Dark mode\", hideLabel: false, }",
"isFunction": false,
"isFunctionDeclaration": false,
@ -13210,7 +13210,7 @@
"name": "select",
"kind": "let",
"description": "Override the default select props",
"type": "import(\"../Select/Select\").SelectProps & { themes?: CarbonTheme[]; }",
"type": "import(\"../Select/Select.svelte\").SelectProps & { themes?: CarbonTheme[]; }",
"value": "{ themes: themeKeys, labelText: \"Themes\", hideLabel: false, }",
"isFunction": false,
"isFunctionDeclaration": false,

4
src/Theme/Theme.svelte
View file

@ -37,7 +37,7 @@
/**
* Override the default toggle props
* @type {import("../Toggle/Toggle").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }}
* @type {import("../Toggle/Toggle.svelte").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }}
*/
export let toggle = {
themes: ["white", "g100"],
@ -61,7 +61,7 @@
/**
* Override the default select props
* @type {import("../Select/Select").SelectProps & { themes?: CarbonTheme[]; }}
* @type {import("../Select/Select.svelte").SelectProps & { themes?: CarbonTheme[]; }}
*/
export let select = {
themes: themeKeys,

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

@ -38,7 +38,7 @@ export interface ThemeProps {
* Override the default toggle props
* @default { themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, }
*/
toggle?: import("../Toggle/Toggle").ToggleProps & {
toggle?: import("../Toggle/Toggle.svelte").ToggleProps & {
themes?: [labelA: CarbonTheme, labelB: CarbonTheme];
};
@ -46,7 +46,9 @@ export interface ThemeProps {
* Override the default select props
* @default { themes: themeKeys, labelText: "Themes", hideLabel: false, }
*/
select?: import("../Select/Select").SelectProps & { themes?: CarbonTheme[] };
select?: import("../Select/Select.svelte").SelectProps & {
themes?: CarbonTheme[];
};
}
export default class Theme extends SvelteComponentTyped<