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

feat(theme): add Theme (#741)

Browse source 
* feat(theme): add Theme

* fix(theme): fix broken type test

* docs(theme): add examples

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

* docs: pre-wrap type code snippet [ci skip]
This commit is contained in:
Eric Liu 2021-07-10 16:00:03 -07:00 • committed by GitHub
commit fac78ee4aa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 475 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

35
COMPONENT_INDEX.md
View file

@ -1,6 +1,6 @@
# Component Index
> 171 components exported from carbon-components-svelte@0.39.0.
> 172 components exported from carbon-components-svelte@0.39.0.
## Components
@ -153,6 +153,7 @@
- [`TextAreaSkeleton`](#textareaskeleton)
- [`TextInput`](#textinput)
- [`TextInputSkeleton`](#textinputskeleton)
- [`Theme`](#theme)
- [`Tile`](#tile)
- [`TileGroup`](#tilegroup)
- [`TimePicker`](#timepicker)
@ -4201,6 +4202,38 @@ None.
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
## `Theme`
### Types
```ts
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#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
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :------------------------------------ | :------- |
| -- | Yes | <code>{ theme: CarbonTheme; } </code> | -- |
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :----------------------------------- |
| update | dispatched | <code>{ theme: CarbonTheme; }</code> |
## `Tile`
### Props