@hashicorp/design-system-components 4.24.0 → 4.24.1-rc-20251103142501
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/declarations/components/hds/code-block/copy-button.d.ts +1 -0
- package/declarations/components/hds/code-block/index.d.ts +1 -0
- package/declarations/components/hds/copy/button/index.d.ts +4 -0
- package/declarations/components/hds/flyout/index.d.ts +1 -18
- package/declarations/components/hds/modal/index.d.ts +2 -2
- package/declarations/components/hds/theme-switcher/index.d.ts +41 -0
- package/declarations/components.d.ts +1 -0
- package/declarations/services/hds-theming.d.ts +68 -0
- package/declarations/services.d.ts +1 -0
- package/declarations/template-registry.d.ts +3 -0
- package/dist/_app_/components/hds/theme-switcher.js +1 -0
- package/dist/_app_/services/hds-theming.js +1 -0
- package/dist/components/hds/app-footer/copyright.js +1 -1
- package/dist/components/hds/code-block/copy-button.js +1 -1
- package/dist/components/hds/code-block/copy-button.js.map +1 -1
- package/dist/components/hds/code-block/index.js +1 -1
- package/dist/components/hds/code-block/index.js.map +1 -1
- package/dist/components/hds/copy/button/index.js +15 -1
- package/dist/components/hds/copy/button/index.js.map +1 -1
- package/dist/components/hds/dialog-primitive/body.js +1 -1
- package/dist/components/hds/flyout/index.js +31 -54
- package/dist/components/hds/flyout/index.js.map +1 -1
- package/dist/components/hds/modal/index.js +48 -35
- package/dist/components/hds/modal/index.js.map +1 -1
- package/dist/components/hds/theme-switcher/index.js +86 -0
- package/dist/components/hds/theme-switcher/index.js.map +1 -0
- package/dist/components.js +1 -0
- package/dist/components.js.map +1 -1
- package/dist/services/hds-theming.js +204 -0
- package/dist/services/hds-theming.js.map +1 -0
- package/dist/services.js +1 -1
- package/dist/styles/@hashicorp/design-system-components-common.css +9823 -0
- package/dist/styles/@hashicorp/design-system-components-common.css.map +1 -0
- package/dist/styles/@hashicorp/design-system-components-common.scss +20 -0
- package/dist/styles/@hashicorp/design-system-components.css +32 -18
- package/dist/styles/@hashicorp/design-system-components.css.map +1 -0
- package/dist/styles/@hashicorp/design-system-components.scss +4 -59
- package/dist/styles/@hashicorp/design-system-power-select-overrides.css +229 -0
- package/dist/styles/@hashicorp/design-system-power-select-overrides.css.map +1 -0
- package/dist/styles/components/app-footer.scss +3 -0
- package/dist/styles/components/form/file-input.scss +1 -0
- package/dist/styles/components/index.scss +52 -0
- package/package.json +9 -4
- package/translations/hds/components/app-footer/copyright/en-us.yaml +1 -1
- package/translations/hds/components/copy-button/en-us.yaml +1 -0
- package/dist/styles/@hashicorp/design-system-components.scss.map +0 -1
|
@@ -0,0 +1,204 @@
|
|
|
1
|
+
import Service from '@ember/service';
|
|
2
|
+
import { tracked } from '@glimmer/tracking';
|
|
3
|
+
import { g, i } from 'decorator-transforms/runtime';
|
|
4
|
+
|
|
5
|
+
let HdsThemeValues = /*#__PURE__*/function (HdsThemeValues) {
|
|
6
|
+
// system settings (prefers-color-scheme)
|
|
7
|
+
HdsThemeValues["System"] = "system";
|
|
8
|
+
// user settings for dark/light
|
|
9
|
+
HdsThemeValues["Light"] = "light";
|
|
10
|
+
HdsThemeValues["Dark"] = "dark";
|
|
11
|
+
return HdsThemeValues;
|
|
12
|
+
}({});
|
|
13
|
+
var HdsModesBaseValues = /*#__PURE__*/function (HdsModesBaseValues) {
|
|
14
|
+
HdsModesBaseValues["Hds"] = "hds"; // TODO understand if it should be `default`
|
|
15
|
+
return HdsModesBaseValues;
|
|
16
|
+
}(HdsModesBaseValues || {});
|
|
17
|
+
var HdsModesLightValues = /*#__PURE__*/function (HdsModesLightValues) {
|
|
18
|
+
HdsModesLightValues["CdsG0"] = "cds-g0";
|
|
19
|
+
HdsModesLightValues["CdsG10"] = "cds-g10";
|
|
20
|
+
return HdsModesLightValues;
|
|
21
|
+
}(HdsModesLightValues || {});
|
|
22
|
+
var HdsModesDarkValues = /*#__PURE__*/function (HdsModesDarkValues) {
|
|
23
|
+
HdsModesDarkValues["CdsG90"] = "cds-g90";
|
|
24
|
+
HdsModesDarkValues["CdsG100"] = "cds-g100";
|
|
25
|
+
return HdsModesDarkValues;
|
|
26
|
+
}(HdsModesDarkValues || {});
|
|
27
|
+
let HdsCssSelectorsValues = /*#__PURE__*/function (HdsCssSelectorsValues) {
|
|
28
|
+
HdsCssSelectorsValues["Data"] = "data";
|
|
29
|
+
HdsCssSelectorsValues["Class"] = "class";
|
|
30
|
+
return HdsCssSelectorsValues;
|
|
31
|
+
}({});
|
|
32
|
+
const THEMES = Object.values(HdsThemeValues);
|
|
33
|
+
const MODES_LIGHT = Object.values(HdsModesLightValues);
|
|
34
|
+
const MODES_DARK = Object.values(HdsModesDarkValues);
|
|
35
|
+
const MODES = [...Object.values(HdsModesBaseValues), ...MODES_LIGHT, ...MODES_DARK];
|
|
36
|
+
const HDS_THEMING_DATA_SELECTOR = 'data-hds-theme';
|
|
37
|
+
const HDS_THEMING_CLASS_SELECTOR_PREFIX = 'hds-theme';
|
|
38
|
+
const HDS_THEMING_CLASS_SELECTORS_LIST = [...MODES_LIGHT, ...MODES_DARK].map(mode => `${HDS_THEMING_CLASS_SELECTOR_PREFIX}-${mode}`);
|
|
39
|
+
const HDS_THEMING_LOCALSTORAGE_DATA = 'hds-theming-data';
|
|
40
|
+
const DEFAULT_THEMING_OPTION_LIGHT_THEME = HdsModesLightValues.CdsG0;
|
|
41
|
+
const DEFAULT_THEMING_OPTION_DARK_THEME = HdsModesDarkValues.CdsG100;
|
|
42
|
+
const DEFAULT_THEMING_OPTION_CSS_SELECTOR = 'data';
|
|
43
|
+
class HdsThemingService extends Service {
|
|
44
|
+
static {
|
|
45
|
+
g(this.prototype, "_currentTheme", [tracked], function () {
|
|
46
|
+
return undefined;
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
#_currentTheme = (i(this, "_currentTheme"), void 0);
|
|
50
|
+
static {
|
|
51
|
+
g(this.prototype, "_currentMode", [tracked], function () {
|
|
52
|
+
return undefined;
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
#_currentMode = (i(this, "_currentMode"), void 0);
|
|
56
|
+
static {
|
|
57
|
+
g(this.prototype, "_currentLightTheme", [tracked], function () {
|
|
58
|
+
return DEFAULT_THEMING_OPTION_LIGHT_THEME;
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
#_currentLightTheme = (i(this, "_currentLightTheme"), void 0);
|
|
62
|
+
static {
|
|
63
|
+
g(this.prototype, "_currentDarkTheme", [tracked], function () {
|
|
64
|
+
return DEFAULT_THEMING_OPTION_DARK_THEME;
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
#_currentDarkTheme = (i(this, "_currentDarkTheme"), void 0);
|
|
68
|
+
static {
|
|
69
|
+
g(this.prototype, "_currentCssSelector", [tracked], function () {
|
|
70
|
+
return DEFAULT_THEMING_OPTION_CSS_SELECTOR;
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
#_currentCssSelector = (i(this, "_currentCssSelector"), void 0);
|
|
74
|
+
static {
|
|
75
|
+
g(this.prototype, "globalOnSetTheme", [tracked]);
|
|
76
|
+
}
|
|
77
|
+
#globalOnSetTheme = (i(this, "globalOnSetTheme"), void 0);
|
|
78
|
+
initializeTheme() {
|
|
79
|
+
const rawStoredThemingData = localStorage.getItem(HDS_THEMING_LOCALSTORAGE_DATA);
|
|
80
|
+
if (rawStoredThemingData !== null) {
|
|
81
|
+
const storedThemingData = JSON.parse(rawStoredThemingData);
|
|
82
|
+
if (storedThemingData) {
|
|
83
|
+
const {
|
|
84
|
+
theme,
|
|
85
|
+
options
|
|
86
|
+
} = storedThemingData;
|
|
87
|
+
this.setTheme({
|
|
88
|
+
theme,
|
|
89
|
+
options
|
|
90
|
+
});
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
setTheme({
|
|
95
|
+
theme,
|
|
96
|
+
options,
|
|
97
|
+
onSetTheme
|
|
98
|
+
}) {
|
|
99
|
+
if (options !== undefined) {
|
|
100
|
+
// if we have new options, we override the current ones (`lightTheme` / `darkTheme` / `cssSelector`)
|
|
101
|
+
// these options can be used by consumers that want to customize how they apply theming
|
|
102
|
+
// (and used by the showcase for the custom theming / theme switching logic)
|
|
103
|
+
if (Object.hasOwn(options, 'lightTheme') && Object.hasOwn(options, 'darkTheme') && Object.hasOwn(options, 'cssSelector')) {
|
|
104
|
+
const {
|
|
105
|
+
lightTheme,
|
|
106
|
+
darkTheme,
|
|
107
|
+
cssSelector
|
|
108
|
+
} = options;
|
|
109
|
+
this._currentLightTheme = lightTheme;
|
|
110
|
+
this._currentDarkTheme = darkTheme;
|
|
111
|
+
this._currentCssSelector = cssSelector;
|
|
112
|
+
} else {
|
|
113
|
+
// fallback if something goes wrong
|
|
114
|
+
this._currentLightTheme = DEFAULT_THEMING_OPTION_LIGHT_THEME;
|
|
115
|
+
this._currentDarkTheme = DEFAULT_THEMING_OPTION_DARK_THEME;
|
|
116
|
+
this._currentCssSelector = DEFAULT_THEMING_OPTION_CSS_SELECTOR;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
// set the current theme/mode (`currentTheme` / `currentMode`)
|
|
121
|
+
if (theme === undefined ||
|
|
122
|
+
// standard (no theming)
|
|
123
|
+
!THEMES.includes(theme) // handle possible errors
|
|
124
|
+
) {
|
|
125
|
+
this._currentTheme = undefined;
|
|
126
|
+
this._currentMode = undefined;
|
|
127
|
+
} else if (theme === HdsThemeValues.System // system (prefers-color-scheme)
|
|
128
|
+
) {
|
|
129
|
+
this._currentTheme = HdsThemeValues.System;
|
|
130
|
+
this._currentMode = undefined;
|
|
131
|
+
} else {
|
|
132
|
+
this._currentTheme = theme;
|
|
133
|
+
if (this._currentTheme === HdsThemeValues.Light) {
|
|
134
|
+
this._currentMode = this._currentLightTheme;
|
|
135
|
+
}
|
|
136
|
+
if (this._currentTheme === HdsThemeValues.Dark) {
|
|
137
|
+
this._currentMode = this._currentDarkTheme;
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
// IMPORTANT: for this to work, it needs to be the HTML tag (it's the `:root` in CSS)
|
|
142
|
+
const rootElement = document.querySelector('html');
|
|
143
|
+
if (!rootElement) {
|
|
144
|
+
return;
|
|
145
|
+
}
|
|
146
|
+
// remove or update the CSS selectors applied to the root element (depending on the `theme` argument)
|
|
147
|
+
rootElement.removeAttribute(HDS_THEMING_DATA_SELECTOR);
|
|
148
|
+
rootElement.classList.remove(...HDS_THEMING_CLASS_SELECTORS_LIST);
|
|
149
|
+
if (this._currentMode !== undefined) {
|
|
150
|
+
if (this._currentCssSelector === 'data') {
|
|
151
|
+
rootElement.setAttribute(HDS_THEMING_DATA_SELECTOR, this._currentMode);
|
|
152
|
+
} else if (this._currentCssSelector === 'class') {
|
|
153
|
+
rootElement.classList.add(`${HDS_THEMING_CLASS_SELECTOR_PREFIX}-${this._currentMode}`);
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
// store the current theme and theming options in local storage (unless undefined)
|
|
158
|
+
localStorage.setItem(HDS_THEMING_LOCALSTORAGE_DATA, JSON.stringify({
|
|
159
|
+
theme: this._currentTheme,
|
|
160
|
+
options: {
|
|
161
|
+
lightTheme: this._currentLightTheme,
|
|
162
|
+
darkTheme: this._currentDarkTheme,
|
|
163
|
+
cssSelector: this._currentCssSelector
|
|
164
|
+
}
|
|
165
|
+
}));
|
|
166
|
+
|
|
167
|
+
// this is a general callback that can be defined globally (by extending the service)
|
|
168
|
+
if (this.globalOnSetTheme) {
|
|
169
|
+
this.globalOnSetTheme({
|
|
170
|
+
currentTheme: this._currentTheme,
|
|
171
|
+
currentMode: this._currentMode
|
|
172
|
+
});
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
// this is a "local" callback that can be defined "locally" (eg. in a theme switcher)
|
|
176
|
+
if (onSetTheme) {
|
|
177
|
+
onSetTheme({
|
|
178
|
+
currentTheme: this._currentTheme,
|
|
179
|
+
currentMode: this._currentMode
|
|
180
|
+
});
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
// getters used for reactivity in the components/services using this service
|
|
185
|
+
|
|
186
|
+
get currentTheme() {
|
|
187
|
+
return this._currentTheme;
|
|
188
|
+
}
|
|
189
|
+
get currentMode() {
|
|
190
|
+
return this._currentMode;
|
|
191
|
+
}
|
|
192
|
+
get currentLightTheme() {
|
|
193
|
+
return this._currentLightTheme ?? DEFAULT_THEMING_OPTION_LIGHT_THEME;
|
|
194
|
+
}
|
|
195
|
+
get currentDarkTheme() {
|
|
196
|
+
return this._currentDarkTheme ?? DEFAULT_THEMING_OPTION_DARK_THEME;
|
|
197
|
+
}
|
|
198
|
+
get currentCssSelector() {
|
|
199
|
+
return this._currentCssSelector ?? DEFAULT_THEMING_OPTION_CSS_SELECTOR;
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
export { DEFAULT_THEMING_OPTION_CSS_SELECTOR, DEFAULT_THEMING_OPTION_DARK_THEME, DEFAULT_THEMING_OPTION_LIGHT_THEME, HDS_THEMING_CLASS_SELECTORS_LIST, HDS_THEMING_CLASS_SELECTOR_PREFIX, HDS_THEMING_DATA_SELECTOR, HDS_THEMING_LOCALSTORAGE_DATA, HdsCssSelectorsValues, HdsThemeValues, MODES, MODES_DARK, MODES_LIGHT, THEMES, HdsThemingService as default };
|
|
204
|
+
//# sourceMappingURL=hds-theming.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hds-theming.js","sources":["../../src/services/hds-theming.ts"],"sourcesContent":["import Service from '@ember/service';\nimport { tracked } from '@glimmer/tracking';\n\nexport enum HdsThemeValues {\n // system settings (prefers-color-scheme)\n System = 'system',\n // user settings for dark/light\n Light = 'light',\n Dark = 'dark',\n}\n\nenum HdsModesBaseValues {\n Hds = 'hds', // TODO understand if it should be `default`\n}\n\nenum HdsModesLightValues {\n CdsG0 = 'cds-g0',\n CdsG10 = 'cds-g10',\n}\n\nenum HdsModesDarkValues {\n CdsG90 = 'cds-g90',\n CdsG100 = 'cds-g100',\n}\n\nexport enum HdsCssSelectorsValues {\n Data = 'data',\n Class = 'class',\n}\n\nexport type HdsThemes = `${HdsThemeValues}`;\nexport type HdsModes =\n | `${HdsModesBaseValues}`\n | `${HdsModesLightValues}`\n | `${HdsModesDarkValues}`;\nexport type HdsModesLight = `${HdsModesLightValues}`;\nexport type HdsModesDark = `${HdsModesDarkValues}`;\nexport type HdsCssSelectors = `${HdsCssSelectorsValues}`;\n\ntype HdsThemingOptions = {\n lightTheme: HdsModesLight;\n darkTheme: HdsModesDark;\n cssSelector: HdsCssSelectors;\n};\n\ntype SetThemeArgs = {\n theme: HdsThemes | undefined;\n options?: HdsThemingOptions;\n onSetTheme?: OnSetThemeCallback;\n};\n\nexport type OnSetThemeCallbackArgs = {\n currentTheme: HdsThemes | undefined;\n currentMode: HdsModes | undefined;\n};\n\nexport type OnSetThemeCallback = (args: OnSetThemeCallbackArgs) => void;\n\nexport const THEMES: HdsThemes[] = Object.values(HdsThemeValues);\nexport const MODES_LIGHT: HdsModesLight[] = Object.values(HdsModesLightValues);\nexport const MODES_DARK: HdsModesDark[] = Object.values(HdsModesDarkValues);\nexport const MODES: HdsModes[] = [\n ...Object.values(HdsModesBaseValues),\n ...MODES_LIGHT,\n ...MODES_DARK,\n];\n\nexport const HDS_THEMING_DATA_SELECTOR = 'data-hds-theme';\nexport const HDS_THEMING_CLASS_SELECTOR_PREFIX = 'hds-theme';\nexport const HDS_THEMING_CLASS_SELECTORS_LIST = [\n ...MODES_LIGHT,\n ...MODES_DARK,\n].map((mode) => `${HDS_THEMING_CLASS_SELECTOR_PREFIX}-${mode}`);\n\nexport const HDS_THEMING_LOCALSTORAGE_DATA = 'hds-theming-data';\n\nexport const DEFAULT_THEMING_OPTION_LIGHT_THEME = HdsModesLightValues.CdsG0;\nexport const DEFAULT_THEMING_OPTION_DARK_THEME = HdsModesDarkValues.CdsG100;\nexport const DEFAULT_THEMING_OPTION_CSS_SELECTOR = 'data';\n\nexport default class HdsThemingService extends Service {\n @tracked _currentTheme: HdsThemes | undefined = undefined;\n @tracked _currentMode: HdsModes | undefined = undefined;\n @tracked _currentLightTheme: HdsModesLight =\n DEFAULT_THEMING_OPTION_LIGHT_THEME;\n @tracked _currentDarkTheme: HdsModesDark = DEFAULT_THEMING_OPTION_DARK_THEME;\n @tracked _currentCssSelector: HdsCssSelectors =\n DEFAULT_THEMING_OPTION_CSS_SELECTOR;\n @tracked globalOnSetTheme: OnSetThemeCallback | undefined;\n\n initializeTheme() {\n const rawStoredThemingData = localStorage.getItem(\n HDS_THEMING_LOCALSTORAGE_DATA\n );\n if (rawStoredThemingData !== null) {\n const storedThemingData: unknown = JSON.parse(rawStoredThemingData);\n if (storedThemingData) {\n const { theme, options } = storedThemingData as {\n theme: HdsThemes | undefined;\n options: HdsThemingOptions;\n };\n this.setTheme({\n theme,\n options,\n });\n }\n }\n }\n\n setTheme({ theme, options, onSetTheme }: SetThemeArgs) {\n if (options !== undefined) {\n // if we have new options, we override the current ones (`lightTheme` / `darkTheme` / `cssSelector`)\n // these options can be used by consumers that want to customize how they apply theming\n // (and used by the showcase for the custom theming / theme switching logic)\n if (\n Object.hasOwn(options, 'lightTheme') &&\n Object.hasOwn(options, 'darkTheme') &&\n Object.hasOwn(options, 'cssSelector')\n ) {\n const { lightTheme, darkTheme, cssSelector } = options;\n\n this._currentLightTheme = lightTheme;\n this._currentDarkTheme = darkTheme;\n this._currentCssSelector = cssSelector;\n } else {\n // fallback if something goes wrong\n this._currentLightTheme = DEFAULT_THEMING_OPTION_LIGHT_THEME;\n this._currentDarkTheme = DEFAULT_THEMING_OPTION_DARK_THEME;\n this._currentCssSelector = DEFAULT_THEMING_OPTION_CSS_SELECTOR;\n }\n }\n\n // set the current theme/mode (`currentTheme` / `currentMode`)\n if (\n theme === undefined || // standard (no theming)\n !THEMES.includes(theme) // handle possible errors\n ) {\n this._currentTheme = undefined;\n this._currentMode = undefined;\n } else if (\n theme === HdsThemeValues.System // system (prefers-color-scheme)\n ) {\n this._currentTheme = HdsThemeValues.System;\n this._currentMode = undefined;\n } else {\n this._currentTheme = theme;\n if (this._currentTheme === HdsThemeValues.Light) {\n this._currentMode = this._currentLightTheme;\n }\n if (this._currentTheme === HdsThemeValues.Dark) {\n this._currentMode = this._currentDarkTheme;\n }\n }\n\n // IMPORTANT: for this to work, it needs to be the HTML tag (it's the `:root` in CSS)\n const rootElement = document.querySelector('html');\n\n if (!rootElement) {\n return;\n }\n // remove or update the CSS selectors applied to the root element (depending on the `theme` argument)\n rootElement.removeAttribute(HDS_THEMING_DATA_SELECTOR);\n rootElement.classList.remove(...HDS_THEMING_CLASS_SELECTORS_LIST);\n if (this._currentMode !== undefined) {\n if (this._currentCssSelector === 'data') {\n rootElement.setAttribute(HDS_THEMING_DATA_SELECTOR, this._currentMode);\n } else if (this._currentCssSelector === 'class') {\n rootElement.classList.add(\n `${HDS_THEMING_CLASS_SELECTOR_PREFIX}-${this._currentMode}`\n );\n }\n }\n\n // store the current theme and theming options in local storage (unless undefined)\n localStorage.setItem(\n HDS_THEMING_LOCALSTORAGE_DATA,\n JSON.stringify({\n theme: this._currentTheme,\n options: {\n lightTheme: this._currentLightTheme,\n darkTheme: this._currentDarkTheme,\n cssSelector: this._currentCssSelector,\n },\n })\n );\n\n // this is a general callback that can be defined globally (by extending the service)\n if (this.globalOnSetTheme) {\n this.globalOnSetTheme({\n currentTheme: this._currentTheme,\n currentMode: this._currentMode,\n });\n }\n\n // this is a \"local\" callback that can be defined \"locally\" (eg. in a theme switcher)\n if (onSetTheme) {\n onSetTheme({\n currentTheme: this._currentTheme,\n currentMode: this._currentMode,\n });\n }\n }\n\n // getters used for reactivity in the components/services using this service\n\n get currentTheme(): HdsThemes | undefined {\n return this._currentTheme;\n }\n\n get currentMode(): HdsModes | undefined {\n return this._currentMode;\n }\n\n get currentLightTheme(): HdsModesLight {\n return this._currentLightTheme ?? DEFAULT_THEMING_OPTION_LIGHT_THEME;\n }\n\n get currentDarkTheme(): HdsModesDark {\n return this._currentDarkTheme ?? DEFAULT_THEMING_OPTION_DARK_THEME;\n }\n\n get currentCssSelector(): HdsCssSelectors {\n return this._currentCssSelector ?? DEFAULT_THEMING_OPTION_CSS_SELECTOR;\n }\n}\n"],"names":["HdsThemeValues","HdsModesBaseValues","HdsModesLightValues","HdsModesDarkValues","HdsCssSelectorsValues","THEMES","Object","values","MODES_LIGHT","MODES_DARK","MODES","HDS_THEMING_DATA_SELECTOR","HDS_THEMING_CLASS_SELECTOR_PREFIX","HDS_THEMING_CLASS_SELECTORS_LIST","map","mode","HDS_THEMING_LOCALSTORAGE_DATA","DEFAULT_THEMING_OPTION_LIGHT_THEME","CdsG0","DEFAULT_THEMING_OPTION_DARK_THEME","CdsG100","DEFAULT_THEMING_OPTION_CSS_SELECTOR","HdsThemingService","Service","g","prototype","tracked","undefined","i","void 0","initializeTheme","rawStoredThemingData","localStorage","getItem","storedThemingData","JSON","parse","theme","options","setTheme","onSetTheme","hasOwn","lightTheme","darkTheme","cssSelector","_currentLightTheme","_currentDarkTheme","_currentCssSelector","includes","_currentTheme","_currentMode","System","Light","Dark","rootElement","document","querySelector","removeAttribute","classList","remove","setAttribute","add","setItem","stringify","globalOnSetTheme","currentTheme","currentMode","currentLightTheme","currentDarkTheme","currentCssSelector"],"mappings":"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"}
|
package/dist/services.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
export { DEFAULT_THEMING_OPTION_CSS_SELECTOR, DEFAULT_THEMING_OPTION_DARK_THEME, DEFAULT_THEMING_OPTION_LIGHT_THEME, HDS_THEMING_CLASS_SELECTORS_LIST, HDS_THEMING_CLASS_SELECTOR_PREFIX, HDS_THEMING_DATA_SELECTOR, HDS_THEMING_LOCALSTORAGE_DATA, HdsCssSelectorsValues, HdsThemeValues, MODES, MODES_DARK, MODES_LIGHT, THEMES } from './services/hds-theming.js';
|
|
2
2
|
//# sourceMappingURL=services.js.map
|