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

chore: rename Theme to GlobalTheme

Browse source 
Carbon Design System provides the idea of [inline theming](https://carbondesignsystem.com/guidelines/color/implementation/#how-inline-theming-works). As was mentioned in #1648 the Carbon standard implementation is [documented here](https://react.carbondesignsystem.com/?path=/docs/components-theme--playground). It says:

> The `GlobalTheme` and `Theme` components allow you to specify the theme for a page, or for a part of a page, respectively. `Theme` is most often used to implement inline theming where you can style a portion of your page with a particular theme.

What this means for `carbon-components-svelte` is that we should rename the existing `Theme` component to `GlobalTheme`. This leads us a tiny bit closer to [feature parity with Carbon v11](https://github.com/carbon-design-system/carbon-components-svelte/discussions/1614) and gives room for a new component dedicated to v11 inline theming.
This commit is contained in:
Gregor Wassmann 2023-03-24 22:20:50 +01:00
commit 67271b94e7
15 changed files with 170 additions and 170 deletions
Download patch file Download diff file Expand all files Collapse all files

66
COMPONENT_INDEX.md
View file

@ -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)
@ -1538,6 +1538,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" &#124; "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
@ -4159,38 +4191,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" &#124; "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

222
docs/src/COMPONENT_API.json
View file

@ -4579,6 +4579,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",
@ -12837,117 +12948,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",

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

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

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

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

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

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

4
docs/src/pages/framed/GlobalTheme/GlobalThemeSelect.svelte
View file

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

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

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

4
docs/src/pages/framed/GlobalTheme/GlobalThemeToggle.svelte
View file

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

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

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

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

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

2
src/GlobalTheme/index.js
View file

@ -1 +1 @@
export { default as Theme } from "./Theme.svelte"; export { default as GlobalTheme } from "./GlobalTheme.svelte";

2
src/index.js
View file

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

6
tests/GlobalTheme.test.svelte
View file

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

6
types/GlobalTheme/GlobalTheme.svelte.d.ts vendored
View file

@ -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
View file

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