mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-20 12:23:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge 67271b94e7 into 778b2c357f

Browse source
This commit is contained in:
Gregor Wassmann 2023-07-13 17:59:50 +00:00 • committed by GitHub
commit 2354095624
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 185 additions and 185 deletions
Download patch file Download diff file Expand all files Collapse all files

222
docs/src/COMPONENT_API.json
View file

@ -4585,6 +4585,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",
@ -12886,117 +12997,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",

6
docs/src/pages/_layout.svelte
View file

@ -12,7 +12,7 @@
SideNav,
SideNavItems,
SideNavMenuItem,
Theme,
GlobalTheme,
Tag,
} from "carbon-components-svelte";
import LogoGithub from "carbon-icons-svelte/lib/LogoGithub.svelte";
@ -39,7 +39,7 @@
<!-- routify:options bundle=true -->
<svelte:window bind:innerWidth />
<Theme persist bind:theme="{$theme}">
<GlobalTheme persist bind:theme="{$theme}">
<Header
aria-label="Navigation"
href="{$url('/')}"
@ -129,7 +129,7 @@
</SideNavItems>
</SideNav>
<slot />
</Theme>
</GlobalTheme>
<style>
.platform-name {

18
docs/src/pages/components/Theme.svx → docs/src/pages/components/GlobalTheme.svx
View file

@ -5,10 +5,10 @@
let code = `import "carbon-components-svelte/css/all.css";`;
</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>
<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>
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
<FileSource src="/framed/Theme/Theme" />
<FileSource src="/framed/GlobalTheme/GlobalTheme" />
## 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).
<FileSource src="/framed/Theme/ThemePersist" />
<FileSource src="/framed/GlobalTheme/GlobalThemePersist" />
## 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.
<FileSource src="/framed/Theme/ThemeTokens" />
<FileSource src="/framed/GlobalTheme/GlobalThemeTokens" />
## Theme toggle
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)
Customize the toggle using the `toggle` prop.
<FileSource src="/framed/Theme/ThemeToggleCustom" />
<FileSource src="/framed/GlobalTheme/GlobalThemeToggleCustom" />
## Theme select
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)
Customize the select using the `select` prop.
<FileSource src="/framed/Theme/ThemeSelectCustom" />
<FileSource src="/framed/GlobalTheme/GlobalThemeSelectCustom" />

4
docs/src/pages/framed/Theme/Theme.svelte → docs/src/pages/framed/GlobalTheme/GlobalTheme.svelte
View file

@ -1,6 +1,6 @@
<script>
import {
Theme,
GlobalTheme,
RadioButtonGroup,
RadioButton,
} from "carbon-components-svelte";
@ -8,7 +8,7 @@
let theme = "g90";
</script>
<Theme bind:theme />
<GlobalTheme bind:theme />
<RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}">
{#each ["white", "g10", "g80", "g90", "g100"] as value}

4
docs/src/pages/framed/Theme/ThemePersist.svelte → docs/src/pages/framed/GlobalTheme/GlobalThemePersist.svelte
View file

@ -1,6 +1,6 @@
<script>
import {
Theme,
GlobalTheme,
RadioButtonGroup,
RadioButton,
} from "carbon-components-svelte";
@ -8,7 +8,7 @@
let theme = "g90";
</script>
<Theme bind:theme persist persistKey="__carbon-theme" />
<GlobalTheme bind:theme persist persistKey="__carbon-theme" />
<RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}">
{#each ["white", "g10", "g80", "g90", "g100"] as value}

5
docs/src/pages/framed/GlobalTheme/GlobalThemeSelect.svelte Normal file
View file

@ -0,0 +1,5 @@
<script>
import { GlobalTheme } from "carbon-components-svelte";
</script>
<GlobalTheme render="select" />

4
docs/src/pages/framed/Theme/ThemeSelectCustom.svelte → docs/src/pages/framed/GlobalTheme/GlobalThemeSelectCustom.svelte
View file

@ -1,8 +1,8 @@
<script>
import { Theme } from "carbon-components-svelte";
import { GlobalTheme } from "carbon-components-svelte";
</script>
<Theme
<GlobalTheme
render="select"
select="{{
themes: ['white', 'g90', 'g100'],

5
docs/src/pages/framed/GlobalTheme/GlobalThemeToggle.svelte Normal file
View file

@ -0,0 +1,5 @@
<script>
import { GlobalTheme } from "carbon-components-svelte";
</script>
<GlobalTheme render="toggle" />

4
docs/src/pages/framed/Theme/ThemeToggleCustom.svelte → docs/src/pages/framed/GlobalTheme/GlobalThemeToggleCustom.svelte
View file

@ -1,8 +1,8 @@
<script>
import { Theme } from "carbon-components-svelte";
import { GlobalTheme } from "carbon-components-svelte";
</script>
<Theme
<GlobalTheme
render="toggle"
toggle="{{
themes: ['g10', 'g80'],

4
docs/src/pages/framed/Theme/ThemeTokens.svelte → docs/src/pages/framed/GlobalTheme/GlobalThemeTokens.svelte
View file

@ -1,8 +1,8 @@
<script>
import { Theme, Button } from "carbon-components-svelte";
import { GlobalTheme, Button } from "carbon-components-svelte";
</script>
<Theme
<GlobalTheme
theme="g90"
tokens="{{
'interactive-01': '#d02670',

5
docs/src/pages/framed/Theme/ThemeSelect.svelte
View file

@ -1,5 +0,0 @@
<script>
import { Theme } from "carbon-components-svelte";
</script>
<Theme render="select" />

5
docs/src/pages/framed/Theme/ThemeToggle.svelte
View file

@ -1,5 +0,0 @@
<script>
import { Theme } from "carbon-components-svelte";
</script>
<Theme render="toggle" />