diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index f572789659..236a213a1c 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -50,6 +50,7 @@ - [`FormGroup`](#formgroup) - [`FormItem`](#formitem) - [`FormLabel`](#formlabel) +- [`GlobalTheme`](#globaltheme) - [`Grid`](#grid) - [`Header`](#header) - [`HeaderAction`](#headeraction) @@ -148,7 +149,6 @@ - [`TextAreaSkeleton`](#textareaskeleton) - [`TextInput`](#textinput) - [`TextInputSkeleton`](#textinputskeleton) -- [`Theme`](#theme) - [`Tile`](#tile) - [`TileGroup`](#tilegroup) - [`TimePicker`](#timepicker) @@ -1538,6 +1538,38 @@ None. | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | +## `GlobalTheme` + +### Types + +```ts +export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100"; +``` + +### Props + +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | +| theme | No | let | Yes | CarbonTheme | "white" | Set the current Carbon theme | +| tokens | No | let | No | { [token: string]: any; } | {} | Customize a theme with your own tokens
@see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme | +| persist | No | let | No | boolean | false | Set to `true` to persist the theme using window.localStorage | +| persistKey | No | let | No | string | "theme" | Specify the local storage key | +| render | No | let | No | "toggle" | "select" | undefined | Render a toggle or select dropdown to control the theme | +| toggle | No | let | No | import("../Toggle/Toggle").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; } | { themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, } | Override the default toggle props | +| select | No | let | No | import("../Select/Select").SelectProps & { themes?: CarbonTheme[]; } | { themes: themeKeys, labelText: "Themes", hideLabel: false, } | Override the default select props | + +### Slots + +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :------------------------------------ | :------- | +| -- | Yes | { theme: CarbonTheme; } | -- | + +### Events + +| Event name | Type | Detail | +| :--------- | :--------- | :----------------------------------- | +| update | dispatched | { theme: CarbonTheme; } | + ## `Grid` ### Props @@ -4159,38 +4191,6 @@ None. | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | -## `Theme` - -### Types - -```ts -export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100"; -``` - -### Props - -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :--------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | -| theme | No | let | Yes | CarbonTheme | "white" | Set the current Carbon theme | -| tokens | No | let | No | { [token: string]: any; } | {} | Customize a theme with your own tokens
@see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme | -| persist | No | let | No | boolean | false | Set to `true` to persist the theme using window.localStorage | -| persistKey | No | let | No | string | "theme" | Specify the local storage key | -| render | No | let | No | "toggle" | "select" | undefined | Render a toggle or select dropdown to control the theme | -| toggle | No | let | No | import("../Toggle/Toggle").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; } | { themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, } | Override the default toggle props | -| select | No | let | No | import("../Select/Select").SelectProps & { themes?: CarbonTheme[]; } | { themes: themeKeys, labelText: "Themes", hideLabel: false, } | Override the default select props | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :------------------------------------ | :------- | -| -- | Yes | { theme: CarbonTheme; } | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :--------- | :----------------------------------- | -| update | dispatched | { theme: CarbonTheme; } | - ## `Tile` ### Props diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 578a31d6e8..346fdfe102 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -4579,6 +4579,117 @@ "typedefs": [], "rest_props": { "type": "Element", "name": "label" } }, + { + "moduleName": "GlobalTheme", + "filePath": "src/GlobalTheme/GlobalTheme.svelte", + "props": [ + { + "name": "theme", + "kind": "let", + "description": "Set the current Carbon theme", + "type": "CarbonTheme", + "value": "\"white\"", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": true + }, + { + "name": "tokens", + "kind": "let", + "description": "Customize a theme with your own tokens\n@see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme", + "type": "{ [token: string]: any; }", + "value": "{}", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "persist", + "kind": "let", + "description": "Set to `true` to persist the theme using window.localStorage", + "type": "boolean", + "value": "false", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "persistKey", + "kind": "let", + "description": "Specify the local storage key", + "type": "string", + "value": "\"theme\"", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "render", + "kind": "let", + "description": "Render a toggle or select dropdown to control the theme", + "type": "\"toggle\" | \"select\"", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "toggle", + "kind": "let", + "description": "Override the default toggle props", + "type": "import(\"../Toggle/Toggle\").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }", + "value": "{ themes: [\"white\", \"g100\"], labelA: \"\", labelB: \"\", labelText: \"Dark mode\", hideLabel: false, }", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "select", + "kind": "let", + "description": "Override the default select props", + "type": "import(\"../Select/Select\").SelectProps & { themes?: CarbonTheme[]; }", + "value": "{ themes: themeKeys, labelText: \"Themes\", hideLabel: false, }", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + } + ], + "moduleExports": [], + "slots": [ + { + "name": "__default__", + "default": true, + "slot_props": "{ theme: CarbonTheme; }" + } + ], + "events": [ + { + "type": "dispatched", + "name": "update", + "detail": "{ theme: CarbonTheme; }" + } + ], + "typedefs": [ + { + "type": "\"white\" | \"g10\" | \"g80\" | \"g90\" | \"g100\"", + "name": "CarbonTheme", + "ts": "type CarbonTheme = \"white\" | \"g10\" | \"g80\" | \"g90\" | \"g100\"" + } + ] + }, { "moduleName": "Grid", "filePath": "src/Grid/Grid.svelte", @@ -12837,117 +12948,6 @@ "typedefs": [], "rest_props": { "type": "Element", "name": "div" } }, - { - "moduleName": "Theme", - "filePath": "src/Theme/Theme.svelte", - "props": [ - { - "name": "theme", - "kind": "let", - "description": "Set the current Carbon theme", - "type": "CarbonTheme", - "value": "\"white\"", - "isFunction": false, - "isFunctionDeclaration": false, - "isRequired": false, - "constant": false, - "reactive": true - }, - { - "name": "tokens", - "kind": "let", - "description": "Customize a theme with your own tokens\n@see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme", - "type": "{ [token: string]: any; }", - "value": "{}", - "isFunction": false, - "isFunctionDeclaration": false, - "isRequired": false, - "constant": false, - "reactive": false - }, - { - "name": "persist", - "kind": "let", - "description": "Set to `true` to persist the theme using window.localStorage", - "type": "boolean", - "value": "false", - "isFunction": false, - "isFunctionDeclaration": false, - "isRequired": false, - "constant": false, - "reactive": false - }, - { - "name": "persistKey", - "kind": "let", - "description": "Specify the local storage key", - "type": "string", - "value": "\"theme\"", - "isFunction": false, - "isFunctionDeclaration": false, - "isRequired": false, - "constant": false, - "reactive": false - }, - { - "name": "render", - "kind": "let", - "description": "Render a toggle or select dropdown to control the theme", - "type": "\"toggle\" | \"select\"", - "isFunction": false, - "isFunctionDeclaration": false, - "isRequired": false, - "constant": false, - "reactive": false - }, - { - "name": "toggle", - "kind": "let", - "description": "Override the default toggle props", - "type": "import(\"../Toggle/Toggle\").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }", - "value": "{ themes: [\"white\", \"g100\"], labelA: \"\", labelB: \"\", labelText: \"Dark mode\", hideLabel: false, }", - "isFunction": false, - "isFunctionDeclaration": false, - "isRequired": false, - "constant": false, - "reactive": false - }, - { - "name": "select", - "kind": "let", - "description": "Override the default select props", - "type": "import(\"../Select/Select\").SelectProps & { themes?: CarbonTheme[]; }", - "value": "{ themes: themeKeys, labelText: \"Themes\", hideLabel: false, }", - "isFunction": false, - "isFunctionDeclaration": false, - "isRequired": false, - "constant": false, - "reactive": false - } - ], - "moduleExports": [], - "slots": [ - { - "name": "__default__", - "default": true, - "slot_props": "{ theme: CarbonTheme; }" - } - ], - "events": [ - { - "type": "dispatched", - "name": "update", - "detail": "{ theme: CarbonTheme; }" - } - ], - "typedefs": [ - { - "type": "\"white\" | \"g10\" | \"g80\" | \"g90\" | \"g100\"", - "name": "CarbonTheme", - "ts": "type CarbonTheme = \"white\" | \"g10\" | \"g80\" | \"g90\" | \"g100\"" - } - ] - }, { "moduleName": "Tile", "filePath": "src/Tile/Tile.svelte", diff --git a/docs/src/pages/framed/GlobalTheme/GlobalTheme.svelte b/docs/src/pages/framed/GlobalTheme/GlobalTheme.svelte index b99cb54071..04b4e5412c 100644 --- a/docs/src/pages/framed/GlobalTheme/GlobalTheme.svelte +++ b/docs/src/pages/framed/GlobalTheme/GlobalTheme.svelte @@ -1,6 +1,6 @@ - + {#each ["white", "g10", "g80", "g90", "g100"] as value} diff --git a/docs/src/pages/framed/GlobalTheme/GlobalThemePersist.svelte b/docs/src/pages/framed/GlobalTheme/GlobalThemePersist.svelte index bd43a91a08..1726e7e318 100644 --- a/docs/src/pages/framed/GlobalTheme/GlobalThemePersist.svelte +++ b/docs/src/pages/framed/GlobalTheme/GlobalThemePersist.svelte @@ -1,6 +1,6 @@ - + {#each ["white", "g10", "g80", "g90", "g100"] as value} diff --git a/docs/src/pages/framed/GlobalTheme/GlobalThemeSelect.svelte b/docs/src/pages/framed/GlobalTheme/GlobalThemeSelect.svelte index 3d96752660..4c005d9595 100644 --- a/docs/src/pages/framed/GlobalTheme/GlobalThemeSelect.svelte +++ b/docs/src/pages/framed/GlobalTheme/GlobalThemeSelect.svelte @@ -1,5 +1,5 @@ - + diff --git a/docs/src/pages/framed/GlobalTheme/GlobalThemeSelectCustom.svelte b/docs/src/pages/framed/GlobalTheme/GlobalThemeSelectCustom.svelte index 0a8ad4b13e..b9f15c10f2 100644 --- a/docs/src/pages/framed/GlobalTheme/GlobalThemeSelectCustom.svelte +++ b/docs/src/pages/framed/GlobalTheme/GlobalThemeSelectCustom.svelte @@ -1,8 +1,8 @@ - - + diff --git a/docs/src/pages/framed/GlobalTheme/GlobalThemeToggleCustom.svelte b/docs/src/pages/framed/GlobalTheme/GlobalThemeToggleCustom.svelte index 635bd7b340..7e222ec589 100644 --- a/docs/src/pages/framed/GlobalTheme/GlobalThemeToggleCustom.svelte +++ b/docs/src/pages/framed/GlobalTheme/GlobalThemeToggleCustom.svelte @@ -1,8 +1,8 @@ - - - import { Theme } from "../types"; - import type { CarbonTheme } from "../types/Theme/Theme.svelte"; + import { GlobalTheme } from "../types"; + import type { CarbonTheme } from "../types/GlobalTheme/GlobalTheme.svelte"; let theme: CarbonTheme = "g10"; - }, { default: { theme: CarbonTheme } } > {} diff --git a/types/index.d.ts b/types/index.d.ts index 1174ce26c1..bb045cfa42 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -127,7 +127,7 @@ export { default as TextAreaSkeleton } from "./TextArea/TextAreaSkeleton.svelte" export { default as TextInput } from "./TextInput/TextInput.svelte"; export { default as TextInputSkeleton } from "./TextInput/TextInputSkeleton.svelte"; export { default as PasswordInput } from "./TextInput/PasswordInput.svelte"; -export { default as Theme } from "./Theme/Theme.svelte"; +export { default as GlobalTheme } from "./GlobalTheme/GlobalTheme.svelte"; export { default as Tile } from "./Tile/Tile.svelte"; export { default as ClickableTile } from "./Tile/ClickableTile.svelte"; export { default as ExpandableTile } from "./Tile/ExpandableTile.svelte";