From 7457edf60d502593391d43d4296dea96bbf5058d Mon Sep 17 00:00:00 2001 From: Eric Y Liu Date: Sat, 10 Jul 2021 15:42:09 -0700 Subject: [PATCH] docs(theme): add description, update carbon theme link [ci skip] --- COMPONENT_INDEX.md | 18 +++++++++--------- docs/src/COMPONENT_API.json | 2 +- docs/src/components/ComponentApi.svelte | 5 ++++- docs/src/pages/components/Theme.svx | 4 +++- src/Theme/Theme.svelte | 2 +- types/Theme/Theme.d.ts | 2 +- 6 files changed, 19 insertions(+), 14 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 301b70a8..ff123def 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -4212,15 +4212,15 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100"; ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | -| theme | let | Yes | CarbonTheme | "white" | Set the current Carbon theme | -| tokens | let | No | { [token: string]: any; } | {} | Customize a theme with your own tokens
https://carbondesignsystem.com/guidelines/themes/overview#tokens | -| persist | let | No | boolean | false | Set to `true` to persist the theme using window.localStorage | -| persistKey | let | No | string | "theme" | Specify the local storage key | -| render | let | No | "toggle" | "select" | -- | Render a toggle or select dropdown to control the theme | -| toggle | 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 | let | No | import("../Select/Select").SelectProps & { themes?: CarbonTheme[]; } | { themes: themeKeys, labelText: "Themes", hideLabel: false, } | Override the default select props | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :--------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | +| theme | let | Yes | CarbonTheme | "white" | Set the current Carbon theme | +| tokens | let | No | { [token: string]: any; } | {} | Customize a theme with your own tokens
https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme | +| persist | let | No | boolean | false | Set to `true` to persist the theme using window.localStorage | +| persistKey | let | No | string | "theme" | Specify the local storage key | +| render | let | No | "toggle" | "select" | -- | Render a toggle or select dropdown to control the theme | +| toggle | 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 | let | No | import("../Select/Select").SelectProps & { themes?: CarbonTheme[]; } | { themes: themeKeys, labelText: "Themes", hideLabel: false, } | Override the default select props | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index efc4c507..9ccebf74 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -11591,7 +11591,7 @@ { "name": "tokens", "kind": "let", - "description": "Customize a theme with your own tokens\nhttps://carbondesignsystem.com/guidelines/themes/overview#tokens", + "description": "Customize a theme with your own tokens\nhttps://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme", "type": "{ [token: string]: any; }", "value": "{}", "isFunction": false, diff --git a/docs/src/components/ComponentApi.svelte b/docs/src/components/ComponentApi.svelte index 495690b2..1cda3901 100644 --- a/docs/src/components/ComponentApi.svelte +++ b/docs/src/components/ComponentApi.svelte @@ -105,7 +105,10 @@ {:else if type.startsWith("(")} {type} {:else} - + {/if} {/each} diff --git a/docs/src/pages/components/Theme.svx b/docs/src/pages/components/Theme.svx index 87732a3b..395e077f 100644 --- a/docs/src/pages/components/Theme.svx +++ b/docs/src/pages/components/Theme.svx @@ -3,6 +3,8 @@ import Preview from "../../components/Preview.svelte"; +This utility component dynamically updates the Carbon theme on the client-side using CSS variables. + ### Default @@ -15,7 +17,7 @@ Set `persist` to `true` to persist the theme locally using the [Window.localStor ### Custom theme -Define keys and values in the `tokens` prop that override default Carbon theme tokens. +Define keys and values in the `tokens` prop that override default Carbon theme tokens. Refer to the [Carbon website](https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme) for guidance on customizing a theme using token values. diff --git a/src/Theme/Theme.svelte b/src/Theme/Theme.svelte index b2400805..97af924b 100644 --- a/src/Theme/Theme.svelte +++ b/src/Theme/Theme.svelte @@ -18,7 +18,7 @@ /** * Customize a theme with your own tokens - * https://carbondesignsystem.com/guidelines/themes/overview#tokens + * https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme * @type {{ [token: string]: any; }} */ export let tokens = {}; diff --git a/types/Theme/Theme.d.ts b/types/Theme/Theme.d.ts index f250a95d..16d10f38 100644 --- a/types/Theme/Theme.d.ts +++ b/types/Theme/Theme.d.ts @@ -12,7 +12,7 @@ export interface ThemeProps { /** * Customize a theme with your own tokens - * https://carbondesignsystem.com/guidelines/themes/overview#tokens + * https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme * @default {} */ tokens?: { [token: string]: any };