Skip to content

Commit fed11bc

Browse files
gregorwgregorw
committed
chore: rename Theme to GlobalTheme
Carbon Design System provides the idea of [inline theming](https://carbondesignsystem.com/guidelines/color/implementation/#how-inline-theming-works). As was mentioned in carbon-design-system#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](carbon-design-system#1614) and gives room for a new component dedicated to v11 inline theming.
1 parent c1b7959 commit fed11bc

14 files changed

+167
-167
lines changed

‎COMPONENT_INDEX.md

+33-33
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
- [`FormGroup`](#formgroup)
5151
- [`FormItem`](#formitem)
5252
- [`FormLabel`](#formlabel)
53+
- [`GlobalTheme`](#globaltheme)
5354
- [`Grid`](#grid)
5455
- [`Header`](#header)
5556
- [`HeaderAction`](#headeraction)
@@ -148,7 +149,6 @@
148149
- [`TextAreaSkeleton`](#textareaskeleton)
149150
- [`TextInput`](#textinput)
150151
- [`TextInputSkeleton`](#textinputskeleton)
151-
- [`Theme`](#theme)
152152
- [`Tile`](#tile)
153153
- [`TileGroup`](#tilegroup)
154154
- [`TimePicker`](#timepicker)
@@ -1538,6 +1538,38 @@ None.
15381538
| mouseenter | forwarded | -- |
15391539
| mouseleave | forwarded | -- |
15401540

1541+
## `GlobalTheme`
1542+
1543+
### Types
1544+
1545+
```ts
1546+
export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
1547+
```
1548+
1549+
### Props
1550+
1551+
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
1552+
| :--------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
1553+
| theme | No | <code>let</code> | Yes | <code>CarbonTheme</code> | <code>"white"</code> | Set the current Carbon theme |
1554+
| 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 |
1555+
| persist | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the theme using window.localStorage |
1556+
| persistKey | No | <code>let</code> | No | <code>string</code> | <code>"theme"</code> | Specify the local storage key |
1557+
| render | No | <code>let</code> | No | <code>"toggle" &#124; "select"</code> | <code>undefined</code> | Render a toggle or select dropdown to control the theme |
1558+
| 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 |
1559+
| 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 |
1560+
1561+
### Slots
1562+
1563+
| Slot name | Default | Props | Fallback |
1564+
| :-------- | :------ | :------------------------------------ | :------- |
1565+
| -- | Yes | <code>{ theme: CarbonTheme; } </code> | -- |
1566+
1567+
### Events
1568+
1569+
| Event name | Type | Detail |
1570+
| :--------- | :--------- | :----------------------------------- |
1571+
| update | dispatched | <code>{ theme: CarbonTheme; }</code> |
1572+
15411573
## `Grid`
15421574

15431575
### Props
@@ -4159,38 +4191,6 @@ None.
41594191
| mouseenter | forwarded | -- |
41604192
| mouseleave | forwarded | -- |
41614193

4162-
## `Theme`
4163-
4164-
### Types
4165-
4166-
```ts
4167-
export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
4168-
```
4169-
4170-
### Props
4171-
4172-
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
4173-
| :--------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
4174-
| theme | No | <code>let</code> | Yes | <code>CarbonTheme</code> | <code>"white"</code> | Set the current Carbon theme |
4175-
| 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 |
4176-
| persist | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the theme using window.localStorage |
4177-
| persistKey | No | <code>let</code> | No | <code>string</code> | <code>"theme"</code> | Specify the local storage key |
4178-
| render | No | <code>let</code> | No | <code>"toggle" &#124; "select"</code> | <code>undefined</code> | Render a toggle or select dropdown to control the theme |
4179-
| 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 |
4180-
| 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 |
4181-
4182-
### Slots
4183-
4184-
| Slot name | Default | Props | Fallback |
4185-
| :-------- | :------ | :------------------------------------ | :------- |
4186-
| -- | Yes | <code>{ theme: CarbonTheme; } </code> | -- |
4187-
4188-
### Events
4189-
4190-
| Event name | Type | Detail |
4191-
| :--------- | :--------- | :----------------------------------- |
4192-
| update | dispatched | <code>{ theme: CarbonTheme; }</code> |
4193-
41944194
## `Tile`
41954195

41964196
### Props

‎docs/src/COMPONENT_API.json

+111-111
Original file line numberDiff line numberDiff line change
@@ -4579,6 +4579,117 @@
45794579
"typedefs": [],
45804580
"rest_props": { "type": "Element", "name": "label" }
45814581
},
4582+
{
4583+
"moduleName": "GlobalTheme",
4584+
"filePath": "src/GlobalTheme/GlobalTheme.svelte",
4585+
"props": [
4586+
{
4587+
"name": "theme",
4588+
"kind": "let",
4589+
"description": "Set the current Carbon theme",
4590+
"type": "CarbonTheme",
4591+
"value": "\"white\"",
4592+
"isFunction": false,
4593+
"isFunctionDeclaration": false,
4594+
"isRequired": false,
4595+
"constant": false,
4596+
"reactive": true
4597+
},
4598+
{
4599+
"name": "tokens",
4600+
"kind": "let",
4601+
"description": "Customize a theme with your own tokens\n@see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme",
4602+
"type": "{ [token: string]: any; }",
4603+
"value": "{}",
4604+
"isFunction": false,
4605+
"isFunctionDeclaration": false,
4606+
"isRequired": false,
4607+
"constant": false,
4608+
"reactive": false
4609+
},
4610+
{
4611+
"name": "persist",
4612+
"kind": "let",
4613+
"description": "Set to `true` to persist the theme using window.localStorage",
4614+
"type": "boolean",
4615+
"value": "false",
4616+
"isFunction": false,
4617+
"isFunctionDeclaration": false,
4618+
"isRequired": false,
4619+
"constant": false,
4620+
"reactive": false
4621+
},
4622+
{
4623+
"name": "persistKey",
4624+
"kind": "let",
4625+
"description": "Specify the local storage key",
4626+
"type": "string",
4627+
"value": "\"theme\"",
4628+
"isFunction": false,
4629+
"isFunctionDeclaration": false,
4630+
"isRequired": false,
4631+
"constant": false,
4632+
"reactive": false
4633+
},
4634+
{
4635+
"name": "render",
4636+
"kind": "let",
4637+
"description": "Render a toggle or select dropdown to control the theme",
4638+
"type": "\"toggle\" | \"select\"",
4639+
"isFunction": false,
4640+
"isFunctionDeclaration": false,
4641+
"isRequired": false,
4642+
"constant": false,
4643+
"reactive": false
4644+
},
4645+
{
4646+
"name": "toggle",
4647+
"kind": "let",
4648+
"description": "Override the default toggle props",
4649+
"type": "import(\"../Toggle/Toggle\").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }",
4650+
"value": "{ themes: [\"white\", \"g100\"], labelA: \"\", labelB: \"\", labelText: \"Dark mode\", hideLabel: false, }",
4651+
"isFunction": false,
4652+
"isFunctionDeclaration": false,
4653+
"isRequired": false,
4654+
"constant": false,
4655+
"reactive": false
4656+
},
4657+
{
4658+
"name": "select",
4659+
"kind": "let",
4660+
"description": "Override the default select props",
4661+
"type": "import(\"../Select/Select\").SelectProps & { themes?: CarbonTheme[]; }",
4662+
"value": "{ themes: themeKeys, labelText: \"Themes\", hideLabel: false, }",
4663+
"isFunction": false,
4664+
"isFunctionDeclaration": false,
4665+
"isRequired": false,
4666+
"constant": false,
4667+
"reactive": false
4668+
}
4669+
],
4670+
"moduleExports": [],
4671+
"slots": [
4672+
{
4673+
"name": "__default__",
4674+
"default": true,
4675+
"slot_props": "{ theme: CarbonTheme; }"
4676+
}
4677+
],
4678+
"events": [
4679+
{
4680+
"type": "dispatched",
4681+
"name": "update",
4682+
"detail": "{ theme: CarbonTheme; }"
4683+
}
4684+
],
4685+
"typedefs": [
4686+
{
4687+
"type": "\"white\" | \"g10\" | \"g80\" | \"g90\" | \"g100\"",
4688+
"name": "CarbonTheme",
4689+
"ts": "type CarbonTheme = \"white\" | \"g10\" | \"g80\" | \"g90\" | \"g100\""
4690+
}
4691+
]
4692+
},
45824693
{
45834694
"moduleName": "Grid",
45844695
"filePath": "src/Grid/Grid.svelte",
@@ -12837,117 +12948,6 @@
1283712948
"typedefs": [],
1283812949
"rest_props": { "type": "Element", "name": "div" }
1283912950
},
12840-
{
12841-
"moduleName": "Theme",
12842-
"filePath": "src/Theme/Theme.svelte",
12843-
"props": [
12844-
{
12845-
"name": "theme",
12846-
"kind": "let",
12847-
"description": "Set the current Carbon theme",
12848-
"type": "CarbonTheme",
12849-
"value": "\"white\"",
12850-
"isFunction": false,
12851-
"isFunctionDeclaration": false,
12852-
"isRequired": false,
12853-
"constant": false,
12854-
"reactive": true
12855-
},
12856-
{
12857-
"name": "tokens",
12858-
"kind": "let",
12859-
"description": "Customize a theme with your own tokens\n@see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme",
12860-
"type": "{ [token: string]: any; }",
12861-
"value": "{}",
12862-
"isFunction": false,
12863-
"isFunctionDeclaration": false,
12864-
"isRequired": false,
12865-
"constant": false,
12866-
"reactive": false
12867-
},
12868-
{
12869-
"name": "persist",
12870-
"kind": "let",
12871-
"description": "Set to `true` to persist the theme using window.localStorage",
12872-
"type": "boolean",
12873-
"value": "false",
12874-
"isFunction": false,
12875-
"isFunctionDeclaration": false,
12876-
"isRequired": false,
12877-
"constant": false,
12878-
"reactive": false
12879-
},
12880-
{
12881-
"name": "persistKey",
12882-
"kind": "let",
12883-
"description": "Specify the local storage key",
12884-
"type": "string",
12885-
"value": "\"theme\"",
12886-
"isFunction": false,
12887-
"isFunctionDeclaration": false,
12888-
"isRequired": false,
12889-
"constant": false,
12890-
"reactive": false
12891-
},
12892-
{
12893-
"name": "render",
12894-
"kind": "let",
12895-
"description": "Render a toggle or select dropdown to control the theme",
12896-
"type": "\"toggle\" | \"select\"",
12897-
"isFunction": false,
12898-
"isFunctionDeclaration": false,
12899-
"isRequired": false,
12900-
"constant": false,
12901-
"reactive": false
12902-
},
12903-
{
12904-
"name": "toggle",
12905-
"kind": "let",
12906-
"description": "Override the default toggle props",
12907-
"type": "import(\"../Toggle/Toggle\").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }",
12908-
"value": "{ themes: [\"white\", \"g100\"], labelA: \"\", labelB: \"\", labelText: \"Dark mode\", hideLabel: false, }",
12909-
"isFunction": false,
12910-
"isFunctionDeclaration": false,
12911-
"isRequired": false,
12912-
"constant": false,
12913-
"reactive": false
12914-
},
12915-
{
12916-
"name": "select",
12917-
"kind": "let",
12918-
"description": "Override the default select props",
12919-
"type": "import(\"../Select/Select\").SelectProps & { themes?: CarbonTheme[]; }",
12920-
"value": "{ themes: themeKeys, labelText: \"Themes\", hideLabel: false, }",
12921-
"isFunction": false,
12922-
"isFunctionDeclaration": false,
12923-
"isRequired": false,
12924-
"constant": false,
12925-
"reactive": false
12926-
}
12927-
],
12928-
"moduleExports": [],
12929-
"slots": [
12930-
{
12931-
"name": "__default__",
12932-
"default": true,
12933-
"slot_props": "{ theme: CarbonTheme; }"
12934-
}
12935-
],
12936-
"events": [
12937-
{
12938-
"type": "dispatched",
12939-
"name": "update",
12940-
"detail": "{ theme: CarbonTheme; }"
12941-
}
12942-
],
12943-
"typedefs": [
12944-
{
12945-
"type": "\"white\" | \"g10\" | \"g80\" | \"g90\" | \"g100\"",
12946-
"name": "CarbonTheme",
12947-
"ts": "type CarbonTheme = \"white\" | \"g10\" | \"g80\" | \"g90\" | \"g100\""
12948-
}
12949-
]
12950-
},
1295112951
{
1295212952
"moduleName": "Tile",
1295312953
"filePath": "src/Tile/Tile.svelte",

‎docs/src/pages/framed/GlobalTheme/GlobalTheme.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<script>
22
import {
3-
Theme,
3+
GlobalTheme,
44
RadioButtonGroup,
55
RadioButton,
66
} from "carbon-components-svelte";
77
88
let theme = "g90";
99
</script>
1010

11-
<Theme bind:theme />
11+
<GlobalTheme bind:theme />
1212

1313
<RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}">
1414
{#each ["white", "g10", "g80", "g90", "g100"] as value}

‎docs/src/pages/framed/GlobalTheme/GlobalThemePersist.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<script>
22
import {
3-
Theme,
3+
GlobalTheme,
44
RadioButtonGroup,
55
RadioButton,
66
} from "carbon-components-svelte";
77
88
let theme = "g90";
99
</script>
1010

11-
<Theme bind:theme persist persistKey="__carbon-theme" />
11+
<GlobalTheme bind:theme persist persistKey="__carbon-theme" />
1212

1313
<RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}">
1414
{#each ["white", "g10", "g80", "g90", "g100"] as value}

‎docs/src/pages/framed/GlobalTheme/GlobalThemeSelect.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script>
2-
import { Theme } from "carbon-components-svelte";
2+
import { GlobalTheme } from "carbon-components-svelte";
33
</script>
44

5-
<Theme render="select" />
5+
<GlobalTheme render="select" />

‎docs/src/pages/framed/GlobalTheme/GlobalThemeSelectCustom.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<script>
2-
import { Theme } from "carbon-components-svelte";
2+
import { GlobalTheme } from "carbon-components-svelte";
33
</script>
44

5-
<Theme
5+
<GlobalTheme
66
render="select"
77
select="{{
88
themes: ['white', 'g90', 'g100'],

‎docs/src/pages/framed/GlobalTheme/GlobalThemeToggle.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script>
2-
import { Theme } from "carbon-components-svelte";
2+
import { GlobalTheme } from "carbon-components-svelte";
33
</script>
44

5-
<Theme render="toggle" />
5+
<GlobalTheme render="toggle" />

0 commit comments

Comments
 (0)