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

docs(theme): add description, update carbon theme link [ci skip]

Browse source
This commit is contained in:
Eric Y Liu 2021-07-10 15:42:09 -07:00
commit 7457edf60d
6 changed files with 19 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

18
COMPONENT_INDEX.md
View file

@ -4212,15 +4212,15 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :--------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| theme | <code>let</code> | Yes | <code>CarbonTheme</code> | <code>"white"</code> | Set the current Carbon theme |
| tokens | <code>let</code> | No | <code>{ [token: string]: any; }</code> | <code>{}</code> | Customize a theme with your own tokens<br />https://carbondesignsystem.com/guidelines/themes/overview#tokens |
| persist | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the theme using window.localStorage |
| persistKey | <code>let</code> | No | <code>string</code> | <code>"theme"</code> | Specify the local storage key |
| render | <code>let</code> | No | <code>"toggle" &#124; "select"</code> | -- | Render a toggle or select dropdown to control the theme |
| toggle | <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 | <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 | Kind | Reactive | Type | Default value | Description |
| :--------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| theme | <code>let</code> | Yes | <code>CarbonTheme</code> | <code>"white"</code> | Set the current Carbon theme |
| tokens | <code>let</code> | No | <code>{ [token: string]: any; }</code> | <code>{}</code> | Customize a theme with your own tokens<br />https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme |
| persist | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the theme using window.localStorage |
| persistKey | <code>let</code> | No | <code>string</code> | <code>"theme"</code> | Specify the local storage key |
| render | <code>let</code> | No | <code>"toggle" &#124; "select"</code> | -- | Render a toggle or select dropdown to control the theme |
| toggle | <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 | <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 |
### Slots

2
docs/src/COMPONENT_API.json
View file

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

5
docs/src/components/ComponentApi.svelte
View file

@ -105,7 +105,10 @@
{:else if type.startsWith("(")}
<code>{type}</code>
{:else}
<InlineSnippet code="{type}" />
<InlineSnippet
code="{type}"
style="white-space: pre-wrap"
/>
{/if}
</div>
{/each}

4
docs/src/pages/components/Theme.svx
View file

@ -3,6 +3,8 @@
import Preview from "../../components/Preview.svelte";
</script>
This utility component dynamically updates the Carbon theme on the client-side using CSS variables.
### Default
<FileSource src="/framed/Theme/Theme" />
@ -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.
<FileSource src="/framed/Theme/ThemeTokens" />

2
src/Theme/Theme.svelte
View file

@ -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 = {};

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

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