mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 19:46:36 +00:00
Merge 67271b94e7 into 778b2c357f
This commit is contained in:
Gregor Wassmann
GitHub
commit
2354095624
20 changed files with 185 additions and 185 deletions
|
|
@ -50,6 +50,7 @@
|
||||||
- [`FormGroup`](#formgroup)
|
- [`FormGroup`](#formgroup)
|
||||||
- [`FormItem`](#formitem)
|
- [`FormItem`](#formitem)
|
||||||
- [`FormLabel`](#formlabel)
|
- [`FormLabel`](#formlabel)
|
||||||
|
- [`GlobalTheme`](#globaltheme)
|
||||||
- [`Grid`](#grid)
|
- [`Grid`](#grid)
|
||||||
- [`Header`](#header)
|
- [`Header`](#header)
|
||||||
- [`HeaderAction`](#headeraction)
|
- [`HeaderAction`](#headeraction)
|
||||||
|
|
@ -148,7 +149,6 @@
|
||||||
- [`TextAreaSkeleton`](#textareaskeleton)
|
- [`TextAreaSkeleton`](#textareaskeleton)
|
||||||
- [`TextInput`](#textinput)
|
- [`TextInput`](#textinput)
|
||||||
- [`TextInputSkeleton`](#textinputskeleton)
|
- [`TextInputSkeleton`](#textinputskeleton)
|
||||||
- [`Theme`](#theme)
|
|
||||||
- [`Tile`](#tile)
|
- [`Tile`](#tile)
|
||||||
- [`TileGroup`](#tilegroup)
|
- [`TileGroup`](#tilegroup)
|
||||||
- [`TimePicker`](#timepicker)
|
- [`TimePicker`](#timepicker)
|
||||||
|
|
@ -1539,6 +1539,38 @@ None.
|
||||||
| mouseenter | forwarded | -- |
|
| mouseenter | forwarded | -- |
|
||||||
| mouseleave | 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 | <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" | "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 |
|
||||||
|
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
| Slot name | Default | Props | Fallback |
|
||||||
|
| :-------- | :------ | :------------------------------------ | :------- |
|
||||||
|
| -- | Yes | <code>{ theme: CarbonTheme; } </code> | -- |
|
||||||
|
|
||||||
|
### Events
|
||||||
|
|
||||||
|
| Event name | Type | Detail |
|
||||||
|
| :--------- | :--------- | :----------------------------------- |
|
||||||
|
| update | dispatched | <code>{ theme: CarbonTheme; }</code> |
|
||||||
|
|
||||||
## `Grid`
|
## `Grid`
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
@ -4166,38 +4198,6 @@ None.
|
||||||
| mouseenter | forwarded | -- |
|
| mouseenter | forwarded | -- |
|
||||||
| mouseleave | 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 | <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" | "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 |
|
|
||||||
|
|
||||||
### Slots
|
|
||||||
|
|
||||||
| Slot name | Default | Props | Fallback |
|
|
||||||
| :-------- | :------ | :------------------------------------ | :------- |
|
|
||||||
| -- | Yes | <code>{ theme: CarbonTheme; } </code> | -- |
|
|
||||||
|
|
||||||
### Events
|
|
||||||
|
|
||||||
| Event name | Type | Detail |
|
|
||||||
| :--------- | :--------- | :----------------------------------- |
|
|
||||||
| update | dispatched | <code>{ theme: CarbonTheme; }</code> |
|
|
||||||
|
|
||||||
## `Tile`
|
## `Tile`
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
|
||||||
|
|
@ -4585,6 +4585,117 @@
|
||||||
"typedefs": [],
|
"typedefs": [],
|
||||||
"rest_props": { "type": "Element", "name": "label" }
|
"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",
|
"moduleName": "Grid",
|
||||||
"filePath": "src/Grid/Grid.svelte",
|
"filePath": "src/Grid/Grid.svelte",
|
||||||
|
|
@ -12886,117 +12997,6 @@
|
||||||
"typedefs": [],
|
"typedefs": [],
|
||||||
"rest_props": { "type": "Element", "name": "div" }
|
"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",
|
"moduleName": "Tile",
|
||||||
"filePath": "src/Tile/Tile.svelte",
|
"filePath": "src/Tile/Tile.svelte",
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
SideNav,
|
SideNav,
|
||||||
SideNavItems,
|
SideNavItems,
|
||||||
SideNavMenuItem,
|
SideNavMenuItem,
|
||||||
Theme,
|
GlobalTheme,
|
||||||
Tag,
|
Tag,
|
||||||
} from "carbon-components-svelte";
|
} from "carbon-components-svelte";
|
||||||
import LogoGithub from "carbon-icons-svelte/lib/LogoGithub.svelte";
|
import LogoGithub from "carbon-icons-svelte/lib/LogoGithub.svelte";
|
||||||
|
|
@ -39,7 +39,7 @@
|
||||||
<!-- routify:options bundle=true -->
|
<!-- routify:options bundle=true -->
|
||||||
<svelte:window bind:innerWidth />
|
<svelte:window bind:innerWidth />
|
||||||
|
|
||||||
<Theme persist bind:theme="{$theme}">
|
<GlobalTheme persist bind:theme="{$theme}">
|
||||||
<Header
|
<Header
|
||||||
aria-label="Navigation"
|
aria-label="Navigation"
|
||||||
href="{$url('/')}"
|
href="{$url('/')}"
|
||||||
|
|
@ -129,7 +129,7 @@
|
||||||
</SideNavItems>
|
</SideNavItems>
|
||||||
</SideNav>
|
</SideNav>
|
||||||
<slot />
|
<slot />
|
||||||
</Theme>
|
</GlobalTheme>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.platform-name {
|
.platform-name {
|
||||||
|
|
|
||||||
|
|
@ -5,10 +5,10 @@
|
||||||
let code = `import "carbon-components-svelte/css/all.css";`;
|
let code = `import "carbon-components-svelte/css/all.css";`;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
The `Theme` component can dyanmically update the Carbon theme on the client-side. It can persist the theme locally using [window.localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).
|
The `GlobalTheme` component can dyanmically update the Carbon theme on the client-side. It can persist the theme locally using [window.localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).
|
||||||
|
|
||||||
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
||||||
<div class="body-short-01">You must use the "all.css" StyleSheet with the <code>Theme</code> component.</div>
|
<div class="body-short-01">You must use the "all.css" StyleSheet with the <code>GlobalTheme</code> component.</div>
|
||||||
</InlineNotification>
|
</InlineNotification>
|
||||||
|
|
||||||
The `all.css` StyleSheet uses [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) for dynamic theming.
|
The `all.css` StyleSheet uses [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) for dynamic theming.
|
||||||
|
|
@ -17,40 +17,40 @@ The `all.css` StyleSheet uses [CSS variables](https://developer.mozilla.org/en-U
|
||||||
|
|
||||||
## Default
|
## Default
|
||||||
|
|
||||||
<FileSource src="/framed/Theme/Theme" />
|
<FileSource src="/framed/GlobalTheme/GlobalTheme" />
|
||||||
|
|
||||||
## Persist locally
|
## Persist locally
|
||||||
|
|
||||||
Set `persist` to `true` to persist the theme locally using the [Window.localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).
|
Set `persist` to `true` to persist the theme locally using the [Window.localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).
|
||||||
|
|
||||||
<FileSource src="/framed/Theme/ThemePersist" />
|
<FileSource src="/framed/GlobalTheme/GlobalThemePersist" />
|
||||||
|
|
||||||
## Custom theme
|
## Custom theme
|
||||||
|
|
||||||
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.
|
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" />
|
<FileSource src="/framed/GlobalTheme/GlobalThemeTokens" />
|
||||||
|
|
||||||
## Theme toggle
|
## Theme toggle
|
||||||
|
|
||||||
Set `render` to `"toggle"` to render a toggle switch to control the theme.
|
Set `render` to `"toggle"` to render a toggle switch to control the theme.
|
||||||
|
|
||||||
<FileSource src="/framed/Theme/ThemeToggle" />
|
<FileSource src="/framed/GlobalTheme/GlobalThemeToggle" />
|
||||||
|
|
||||||
## Theme toggle (custom)
|
## Theme toggle (custom)
|
||||||
|
|
||||||
Customize the toggle using the `toggle` prop.
|
Customize the toggle using the `toggle` prop.
|
||||||
|
|
||||||
<FileSource src="/framed/Theme/ThemeToggleCustom" />
|
<FileSource src="/framed/GlobalTheme/GlobalThemeToggleCustom" />
|
||||||
|
|
||||||
## Theme select
|
## Theme select
|
||||||
|
|
||||||
Set `render` to `"select"` to render a select dropdown to control the theme.
|
Set `render` to `"select"` to render a select dropdown to control the theme.
|
||||||
|
|
||||||
<FileSource src="/framed/Theme/ThemeSelect" />
|
<FileSource src="/framed/GlobalTheme/GlobalThemeSelect" />
|
||||||
|
|
||||||
## Theme select (custom)
|
## Theme select (custom)
|
||||||
|
|
||||||
Customize the select using the `select` prop.
|
Customize the select using the `select` prop.
|
||||||
|
|
||||||
<FileSource src="/framed/Theme/ThemeSelectCustom" />
|
<FileSource src="/framed/GlobalTheme/GlobalThemeSelectCustom" />
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import {
|
import {
|
||||||
Theme,
|
GlobalTheme,
|
||||||
RadioButtonGroup,
|
RadioButtonGroup,
|
||||||
RadioButton,
|
RadioButton,
|
||||||
} from "carbon-components-svelte";
|
} from "carbon-components-svelte";
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
let theme = "g90";
|
let theme = "g90";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Theme bind:theme />
|
<GlobalTheme bind:theme />
|
||||||
|
|
||||||
<RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}">
|
<RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}">
|
||||||
{#each ["white", "g10", "g80", "g90", "g100"] as value}
|
{#each ["white", "g10", "g80", "g90", "g100"] as value}
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import {
|
import {
|
||||||
Theme,
|
GlobalTheme,
|
||||||
RadioButtonGroup,
|
RadioButtonGroup,
|
||||||
RadioButton,
|
RadioButton,
|
||||||
} from "carbon-components-svelte";
|
} from "carbon-components-svelte";
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
let theme = "g90";
|
let theme = "g90";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Theme bind:theme persist persistKey="__carbon-theme" />
|
<GlobalTheme bind:theme persist persistKey="__carbon-theme" />
|
||||||
|
|
||||||
<RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}">
|
<RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}">
|
||||||
{#each ["white", "g10", "g80", "g90", "g100"] as value}
|
{#each ["white", "g10", "g80", "g90", "g100"] as value}
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
<script>
|
||||||
|
import { GlobalTheme } from "carbon-components-svelte";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<GlobalTheme render="select" />
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
<script>
|
<script>
|
||||||
import { Theme } from "carbon-components-svelte";
|
import { GlobalTheme } from "carbon-components-svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Theme
|
<GlobalTheme
|
||||||
render="select"
|
render="select"
|
||||||
select="{{
|
select="{{
|
||||||
themes: ['white', 'g90', 'g100'],
|
themes: ['white', 'g90', 'g100'],
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
<script>
|
||||||
|
import { GlobalTheme } from "carbon-components-svelte";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<GlobalTheme render="toggle" />
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
<script>
|
<script>
|
||||||
import { Theme } from "carbon-components-svelte";
|
import { GlobalTheme } from "carbon-components-svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Theme
|
<GlobalTheme
|
||||||
render="toggle"
|
render="toggle"
|
||||||
toggle="{{
|
toggle="{{
|
||||||
themes: ['g10', 'g80'],
|
themes: ['g10', 'g80'],
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
<script>
|
<script>
|
||||||
import { Theme, Button } from "carbon-components-svelte";
|
import { GlobalTheme, Button } from "carbon-components-svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Theme
|
<GlobalTheme
|
||||||
theme="g90"
|
theme="g90"
|
||||||
tokens="{{
|
tokens="{{
|
||||||
'interactive-01': '#d02670',
|
'interactive-01': '#d02670',
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
<script>
|
|
||||||
import { Theme } from "carbon-components-svelte";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<Theme render="select" />
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
<script>
|
|
||||||
import { Theme } from "carbon-components-svelte";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<Theme render="toggle" />
|
|
||||||
1
src/GlobalTheme/index.js
Normal file
1
src/GlobalTheme/index.js
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export { default as GlobalTheme } from "./GlobalTheme.svelte";
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export { default as Theme } from "./Theme.svelte";
|
|
||||||
|
|
@ -112,7 +112,7 @@ export { Tabs, Tab, TabContent, TabsSkeleton } from "./Tabs";
|
||||||
export { Tag, TagSkeleton } from "./Tag";
|
export { Tag, TagSkeleton } from "./Tag";
|
||||||
export { TextArea, TextAreaSkeleton } from "./TextArea";
|
export { TextArea, TextAreaSkeleton } from "./TextArea";
|
||||||
export { TextInput, TextInputSkeleton, PasswordInput } from "./TextInput";
|
export { TextInput, TextInputSkeleton, PasswordInput } from "./TextInput";
|
||||||
export { Theme } from "./Theme";
|
export { GlobalTheme } from "./GlobalTheme";
|
||||||
export {
|
export {
|
||||||
Tile,
|
Tile,
|
||||||
ClickableTile,
|
ClickableTile,
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Theme } from "../types";
|
import { GlobalTheme } from "../types";
|
||||||
import type { CarbonTheme } from "../types/Theme/Theme.svelte";
|
import type { CarbonTheme } from "../types/GlobalTheme/GlobalTheme.svelte";
|
||||||
|
|
||||||
let theme: CarbonTheme = "g10";
|
let theme: CarbonTheme = "g10";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Theme
|
<GlobalTheme
|
||||||
bind:theme
|
bind:theme
|
||||||
persist
|
persist
|
||||||
persistKey="carbon-theme"
|
persistKey="carbon-theme"
|
||||||
|
|
@ -3,7 +3,7 @@ import type { SvelteComponentTyped } from "svelte";
|
||||||
|
|
||||||
export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
|
export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
|
||||||
|
|
||||||
export interface ThemeProps {
|
export interface GlobalThemeProps {
|
||||||
/**
|
/**
|
||||||
* Set the current Carbon theme
|
* Set the current Carbon theme
|
||||||
* @default "white"
|
* @default "white"
|
||||||
|
|
@ -50,8 +50,8 @@ export interface ThemeProps {
|
||||||
select?: import("../Select/Select").SelectProps & { themes?: CarbonTheme[] };
|
select?: import("../Select/Select").SelectProps & { themes?: CarbonTheme[] };
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class Theme extends SvelteComponentTyped<
|
export default class GlobalTheme extends SvelteComponentTyped<
|
||||||
ThemeProps,
|
GlobalThemeProps,
|
||||||
{ update: CustomEvent<{ theme: CarbonTheme }> },
|
{ update: CustomEvent<{ theme: CarbonTheme }> },
|
||||||
{ default: { theme: CarbonTheme } }
|
{ default: { theme: CarbonTheme } }
|
||||||
> {}
|
> {}
|
||||||
2
types/index.d.ts
vendored
2
types/index.d.ts
vendored
|
|
@ -127,7 +127,7 @@ export { default as TextAreaSkeleton } from "./TextArea/TextAreaSkeleton.svelte"
|
||||||
export { default as TextInput } from "./TextInput/TextInput.svelte";
|
export { default as TextInput } from "./TextInput/TextInput.svelte";
|
||||||
export { default as TextInputSkeleton } from "./TextInput/TextInputSkeleton.svelte";
|
export { default as TextInputSkeleton } from "./TextInput/TextInputSkeleton.svelte";
|
||||||
export { default as PasswordInput } from "./TextInput/PasswordInput.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 Tile } from "./Tile/Tile.svelte";
|
||||||
export { default as ClickableTile } from "./Tile/ClickableTile.svelte";
|
export { default as ClickableTile } from "./Tile/ClickableTile.svelte";
|
||||||
export { default as ExpandableTile } from "./Tile/ExpandableTile.svelte";
|
export { default as ExpandableTile } from "./Tile/ExpandableTile.svelte";
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue