mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 19:46:36 +00:00
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 #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
parent
c0ff8ff76a
commit
67271b94e7
15 changed files with 170 additions and 170 deletions
|
|
@ -4579,6 +4579,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",
|
||||
|
|
@ -12837,117 +12948,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",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue