@hashicorp/design-system-components 5.2.0 → 5.2.1-rc-20260108204634
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/theme-context/index.d.ts +24 -0
- package/declarations/components/hds/theme-context/types.d.ts +19 -0
- package/declarations/components/hds/theme-switcher/index.d.ts +43 -0
- package/declarations/components.d.ts +2 -0
- package/declarations/services/hds-theming.d.ts +57 -0
- package/declarations/services.d.ts +1 -0
- package/declarations/template-registry.d.ts +6 -0
- package/dist/_app_/components/hds/theme-context.js +1 -0
- package/dist/_app_/components/hds/theme-switcher.js +1 -0
- package/dist/_app_/services/hds-theming.js +1 -0
- package/dist/components/hds/theme-context/index.js +45 -0
- package/dist/components/hds/theme-context/index.js.map +1 -0
- package/dist/components/hds/theme-context/types.js +27 -0
- package/dist/components/hds/theme-context/types.js.map +1 -0
- package/dist/components/hds/theme-switcher/index.js +100 -0
- package/dist/components/hds/theme-switcher/index.js.map +1 -0
- package/dist/components.js +2 -0
- package/dist/components.js.map +1 -1
- package/dist/services/hds-theming.js +214 -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 +9588 -0
- package/dist/styles/@hashicorp/design-system-components-common.css.map +1 -0
- package/dist/styles/@hashicorp/design-system-components-common.scss +24 -0
- package/dist/styles/@hashicorp/design-system-components.css +501 -320
- package/dist/styles/@hashicorp/design-system-components.css.map +1 -0
- package/dist/styles/@hashicorp/design-system-components.scss +4 -62
- 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/badge-count.scss +26 -76
- package/dist/styles/components/badge.scss +26 -131
- package/dist/styles/components/button.scss +5 -0
- package/dist/styles/components/dropdown.scss +3 -5
- package/dist/styles/components/form/file-input.scss +2 -2
- package/dist/styles/components/form/key-value-inputs.scss +2 -4
- package/dist/styles/components/index.scss +52 -0
- package/dist/styles/components/theme-context.scss +12 -0
- package/dist/styles/mixins/_button.scss +82 -129
- package/dist/styles/mixins/_carbonization.scss +31 -0
- package/dist/styles/mixins/_interactive-dark-theme.scss +1 -1
- package/package.json +7 -3
- package/dist/styles/@hashicorp/design-system-components.scss.map +0 -1
|
@@ -0,0 +1,214 @@
|
|
|
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
|
+
// default (original HDS)
|
|
7
|
+
HdsThemeValues["Default"] = "default";
|
|
8
|
+
// system settings (prefers-color-scheme)
|
|
9
|
+
HdsThemeValues["System"] = "system";
|
|
10
|
+
// user settings for dark/light
|
|
11
|
+
HdsThemeValues["Light"] = "light";
|
|
12
|
+
HdsThemeValues["Dark"] = "dark";
|
|
13
|
+
return HdsThemeValues;
|
|
14
|
+
}({});
|
|
15
|
+
let HdsModesBaseValues = /*#__PURE__*/function (HdsModesBaseValues) {
|
|
16
|
+
HdsModesBaseValues["Default"] = "default";
|
|
17
|
+
return HdsModesBaseValues;
|
|
18
|
+
}({});
|
|
19
|
+
let HdsModesLightValues = /*#__PURE__*/function (HdsModesLightValues) {
|
|
20
|
+
HdsModesLightValues["CdsG0"] = "cds-g0";
|
|
21
|
+
HdsModesLightValues["CdsG10"] = "cds-g10";
|
|
22
|
+
return HdsModesLightValues;
|
|
23
|
+
}({});
|
|
24
|
+
let HdsModesDarkValues = /*#__PURE__*/function (HdsModesDarkValues) {
|
|
25
|
+
HdsModesDarkValues["CdsG90"] = "cds-g90";
|
|
26
|
+
HdsModesDarkValues["CdsG100"] = "cds-g100";
|
|
27
|
+
return HdsModesDarkValues;
|
|
28
|
+
}({});
|
|
29
|
+
const THEMES = Object.values(HdsThemeValues);
|
|
30
|
+
const MODES_LIGHT = Object.values(HdsModesLightValues);
|
|
31
|
+
const MODES_DARK = Object.values(HdsModesDarkValues);
|
|
32
|
+
const MODES = [...Object.values(HdsModesBaseValues), ...MODES_LIGHT, ...MODES_DARK];
|
|
33
|
+
const HDS_THEMING_LOCALSTORAGE_DATA = 'hds-theming-data';
|
|
34
|
+
const DEFAULT_THEMING_OPTION_LIGHT_THEME = HdsModesLightValues.CdsG0;
|
|
35
|
+
const DEFAULT_THEMING_OPTION_DARK_THEME = HdsModesDarkValues.CdsG100;
|
|
36
|
+
// We use this guard function to check if the data parsed from `localStorage` conforms to the `StoredThemingData` type and so is safe to use.
|
|
37
|
+
// This prevents the application from using corrupted, malformed or malicious data, by validating the object structure, theme, and mode values.
|
|
38
|
+
|
|
39
|
+
function isSafeStoredThemingData(data) {
|
|
40
|
+
if (typeof data !== 'object' || data === null) return false;
|
|
41
|
+
const d = data;
|
|
42
|
+
const isSafeThemeData =
|
|
43
|
+
// there is no stored `theme` key in the object (eg. the `default` theme was selected)
|
|
44
|
+
!('theme' in d) ||
|
|
45
|
+
// there is a `theme` value and is one of the valid `HdsThemes`
|
|
46
|
+
d['theme'] === undefined || THEMES.includes(d['theme']);
|
|
47
|
+
const options = d['options'];
|
|
48
|
+
const isSafeOptionsData =
|
|
49
|
+
// there is no stored `options` key in the object (eg. it's the first run of the application)
|
|
50
|
+
!('options' in d) ||
|
|
51
|
+
// there is an `options` value and has valid entries
|
|
52
|
+
typeof options === 'object' && options !== null && 'lightTheme' in options && MODES_LIGHT.includes(options['lightTheme']) && 'darkTheme' in options && MODES_DARK.includes(options['darkTheme']);
|
|
53
|
+
return isSafeThemeData && isSafeOptionsData;
|
|
54
|
+
}
|
|
55
|
+
class HdsThemingService extends Service {
|
|
56
|
+
static {
|
|
57
|
+
g(this.prototype, "_currentTheme", [tracked], function () {
|
|
58
|
+
return undefined;
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
#_currentTheme = (i(this, "_currentTheme"), void 0);
|
|
62
|
+
static {
|
|
63
|
+
g(this.prototype, "_currentMode", [tracked], function () {
|
|
64
|
+
return undefined;
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
#_currentMode = (i(this, "_currentMode"), void 0);
|
|
68
|
+
static {
|
|
69
|
+
g(this.prototype, "_currentLightTheme", [tracked], function () {
|
|
70
|
+
return DEFAULT_THEMING_OPTION_LIGHT_THEME;
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
#_currentLightTheme = (i(this, "_currentLightTheme"), void 0);
|
|
74
|
+
static {
|
|
75
|
+
g(this.prototype, "_currentDarkTheme", [tracked], function () {
|
|
76
|
+
return DEFAULT_THEMING_OPTION_DARK_THEME;
|
|
77
|
+
});
|
|
78
|
+
}
|
|
79
|
+
#_currentDarkTheme = (i(this, "_currentDarkTheme"), void 0);
|
|
80
|
+
static {
|
|
81
|
+
g(this.prototype, "globalOnSetTheme", [tracked]);
|
|
82
|
+
}
|
|
83
|
+
#globalOnSetTheme = (i(this, "globalOnSetTheme"), void 0);
|
|
84
|
+
initializeTheme() {
|
|
85
|
+
const rawStoredThemingData = localStorage.getItem(HDS_THEMING_LOCALSTORAGE_DATA);
|
|
86
|
+
if (rawStoredThemingData !== null) {
|
|
87
|
+
let storedThemingData;
|
|
88
|
+
try {
|
|
89
|
+
storedThemingData = JSON.parse(rawStoredThemingData);
|
|
90
|
+
} catch (error) {
|
|
91
|
+
// malformed JSON in localStorage, ignore and proceed with defaults
|
|
92
|
+
console.error(`Error while reading local storage '${HDS_THEMING_LOCALSTORAGE_DATA}' for theming`, error);
|
|
93
|
+
}
|
|
94
|
+
if (isSafeStoredThemingData(storedThemingData)) {
|
|
95
|
+
this.setTheme({
|
|
96
|
+
theme: storedThemingData.theme,
|
|
97
|
+
options: storedThemingData.options
|
|
98
|
+
});
|
|
99
|
+
} else {
|
|
100
|
+
// if data is not safe or malformed, reset theming to its defaults
|
|
101
|
+
this.setTheme({
|
|
102
|
+
theme: undefined,
|
|
103
|
+
options: undefined
|
|
104
|
+
});
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
setTheme({
|
|
109
|
+
theme,
|
|
110
|
+
options,
|
|
111
|
+
onSetTheme
|
|
112
|
+
}) {
|
|
113
|
+
if (options !== undefined) {
|
|
114
|
+
// if we have new options, we override the current ones (`lightTheme` / `darkTheme`)
|
|
115
|
+
// these options can be used by consumers that want to customize how they apply theming
|
|
116
|
+
// (and used by the showcase for the custom theming / theme switching logic)
|
|
117
|
+
if (Object.hasOwn(options, 'lightTheme') && Object.hasOwn(options, 'darkTheme')) {
|
|
118
|
+
const {
|
|
119
|
+
lightTheme,
|
|
120
|
+
darkTheme
|
|
121
|
+
} = options;
|
|
122
|
+
this._currentLightTheme = lightTheme;
|
|
123
|
+
this._currentDarkTheme = darkTheme;
|
|
124
|
+
} else {
|
|
125
|
+
// fallback if something goes wrong
|
|
126
|
+
this._currentLightTheme = DEFAULT_THEMING_OPTION_LIGHT_THEME;
|
|
127
|
+
this._currentDarkTheme = DEFAULT_THEMING_OPTION_DARK_THEME;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
// set the current theme/mode (`currentTheme` / `currentMode`)
|
|
132
|
+
if (theme === undefined ||
|
|
133
|
+
// standard (no theming)
|
|
134
|
+
!THEMES.includes(theme) // handle possible errors
|
|
135
|
+
) {
|
|
136
|
+
this._currentTheme = undefined;
|
|
137
|
+
this._currentMode = undefined;
|
|
138
|
+
} else if (theme === HdsThemeValues.Default // default (original HDS)
|
|
139
|
+
) {
|
|
140
|
+
this._currentTheme = HdsThemeValues.Default;
|
|
141
|
+
this._currentMode = undefined;
|
|
142
|
+
} else if (theme === HdsThemeValues.System // system (prefers-color-scheme)
|
|
143
|
+
) {
|
|
144
|
+
this._currentTheme = HdsThemeValues.System;
|
|
145
|
+
this._currentMode = undefined;
|
|
146
|
+
} else {
|
|
147
|
+
this._currentTheme = theme;
|
|
148
|
+
if (this._currentTheme === HdsThemeValues.Light) {
|
|
149
|
+
this._currentMode = this._currentLightTheme;
|
|
150
|
+
}
|
|
151
|
+
if (this._currentTheme === HdsThemeValues.Dark) {
|
|
152
|
+
this._currentMode = this._currentDarkTheme;
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
// IMPORTANT: for this to work, it needs to be the `<html>` tag (it's the `:root` in CSS)
|
|
157
|
+
const rootElement = document.querySelector('html');
|
|
158
|
+
if (!rootElement) {
|
|
159
|
+
return;
|
|
160
|
+
}
|
|
161
|
+
// remove or update the CSS selectors applied to the root element (depending on the `theme`/`mode` arguments)
|
|
162
|
+
const hdsThemingClassesToRemove = Array.from(rootElement.classList).filter(className => className.match(/^hds-(theme|mode)/));
|
|
163
|
+
rootElement.classList.remove(...hdsThemingClassesToRemove);
|
|
164
|
+
if (this._currentTheme !== undefined) {
|
|
165
|
+
rootElement.classList.add(`hds-theme-${this._currentTheme}`);
|
|
166
|
+
}
|
|
167
|
+
if (this._currentMode !== undefined) {
|
|
168
|
+
rootElement.classList.add(`hds-mode-${this._currentMode}`);
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
// store the current theme and theming options in local storage
|
|
172
|
+
localStorage.setItem(HDS_THEMING_LOCALSTORAGE_DATA, JSON.stringify({
|
|
173
|
+
theme: this._currentTheme,
|
|
174
|
+
options: {
|
|
175
|
+
lightTheme: this._currentLightTheme,
|
|
176
|
+
darkTheme: this._currentDarkTheme
|
|
177
|
+
}
|
|
178
|
+
}));
|
|
179
|
+
|
|
180
|
+
// this is a general callback that can be defined globally (by extending the service)
|
|
181
|
+
if (this.globalOnSetTheme) {
|
|
182
|
+
this.globalOnSetTheme({
|
|
183
|
+
currentTheme: this._currentTheme,
|
|
184
|
+
currentMode: this._currentMode
|
|
185
|
+
});
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
// this is a "local" callback that can be defined "locally" (eg. in a theme switcher)
|
|
189
|
+
if (onSetTheme) {
|
|
190
|
+
onSetTheme({
|
|
191
|
+
currentTheme: this._currentTheme,
|
|
192
|
+
currentMode: this._currentMode
|
|
193
|
+
});
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
// getters used for reactivity in the components/services using this service
|
|
198
|
+
|
|
199
|
+
get currentTheme() {
|
|
200
|
+
return this._currentTheme;
|
|
201
|
+
}
|
|
202
|
+
get currentMode() {
|
|
203
|
+
return this._currentMode;
|
|
204
|
+
}
|
|
205
|
+
get currentLightTheme() {
|
|
206
|
+
return this._currentLightTheme;
|
|
207
|
+
}
|
|
208
|
+
get currentDarkTheme() {
|
|
209
|
+
return this._currentDarkTheme;
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
export { DEFAULT_THEMING_OPTION_DARK_THEME, DEFAULT_THEMING_OPTION_LIGHT_THEME, HDS_THEMING_LOCALSTORAGE_DATA, HdsModesBaseValues, HdsModesDarkValues, HdsModesLightValues, HdsThemeValues, MODES, MODES_DARK, MODES_LIGHT, THEMES, HdsThemingService as default };
|
|
214
|
+
//# 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 // default (original HDS)\n Default = 'default',\n // system settings (prefers-color-scheme)\n System = 'system',\n // user settings for dark/light\n Light = 'light',\n Dark = 'dark',\n}\n\nexport enum HdsModesBaseValues {\n Default = 'default',\n}\n\nexport enum HdsModesLightValues {\n CdsG0 = 'cds-g0',\n CdsG10 = 'cds-g10',\n}\n\nexport enum HdsModesDarkValues {\n CdsG90 = 'cds-g90',\n CdsG100 = 'cds-g100',\n}\n\nexport type HdsThemes = `${HdsThemeValues}`;\nexport type HdsModes =\n | `${HdsModesBaseValues}`\n | `${HdsModesLightValues}`\n | `${HdsModesDarkValues}`;\nexport type HdsModesLight = `${HdsModesLightValues}`;\nexport type HdsModesDark = `${HdsModesDarkValues}`;\n\ntype HdsThemingOptions = {\n lightTheme: HdsModesLight;\n darkTheme: HdsModesDark;\n};\n\ntype SetThemeArgs = {\n theme: HdsThemes | undefined;\n options?: HdsThemingOptions;\n onSetTheme?: HdsOnSetThemeCallback;\n};\n\nexport type HdsOnSetThemeCallbackArgs = {\n currentTheme: HdsThemes | undefined;\n currentMode: HdsModes | undefined;\n};\n\nexport type HdsOnSetThemeCallback = (args: HdsOnSetThemeCallbackArgs) => 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_LOCALSTORAGE_DATA = 'hds-theming-data';\n\nexport const DEFAULT_THEMING_OPTION_LIGHT_THEME = HdsModesLightValues.CdsG0;\nexport const DEFAULT_THEMING_OPTION_DARK_THEME = HdsModesDarkValues.CdsG100;\n\ntype StoredThemingData = {\n theme: HdsThemes | undefined;\n options: HdsThemingOptions;\n};\n\n// We use this guard function to check if the data parsed from `localStorage` conforms to the `StoredThemingData` type and so is safe to use.\n// This prevents the application from using corrupted, malformed or malicious data, by validating the object structure, theme, and mode values.\n\nfunction isSafeStoredThemingData(data: unknown): data is StoredThemingData {\n if (typeof data !== 'object' || data === null) return false;\n\n const d = data as Record<string, unknown>;\n\n const isSafeThemeData =\n // there is no stored `theme` key in the object (eg. the `default` theme was selected)\n !('theme' in d) ||\n // there is a `theme` value and is one of the valid `HdsThemes`\n d['theme'] === undefined ||\n THEMES.includes(d['theme'] as HdsThemes);\n\n const options = d['options'] as Record<string, unknown> | undefined;\n\n const isSafeOptionsData =\n // there is no stored `options` key in the object (eg. it's the first run of the application)\n !('options' in d) ||\n // there is an `options` value and has valid entries\n (typeof options === 'object' &&\n options !== null &&\n 'lightTheme' in options &&\n MODES_LIGHT.includes(options['lightTheme'] as HdsModesLight) &&\n 'darkTheme' in options &&\n MODES_DARK.includes(options['darkTheme'] as HdsModesDark));\n\n return isSafeThemeData && isSafeOptionsData;\n}\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 globalOnSetTheme: HdsOnSetThemeCallback | undefined;\n\n initializeTheme() {\n const rawStoredThemingData = localStorage.getItem(\n HDS_THEMING_LOCALSTORAGE_DATA\n );\n\n if (rawStoredThemingData !== null) {\n let storedThemingData: unknown;\n try {\n storedThemingData = JSON.parse(rawStoredThemingData);\n } catch (error) {\n // malformed JSON in localStorage, ignore and proceed with defaults\n console.error(\n `Error while reading local storage '${HDS_THEMING_LOCALSTORAGE_DATA}' for theming`,\n error\n );\n }\n\n if (isSafeStoredThemingData(storedThemingData)) {\n this.setTheme({\n theme: storedThemingData.theme,\n options: storedThemingData.options,\n });\n } else {\n // if data is not safe or malformed, reset theming to its defaults\n this.setTheme({\n theme: undefined,\n options: undefined,\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`)\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 ) {\n const { lightTheme, darkTheme } = options;\n\n this._currentLightTheme = lightTheme;\n this._currentDarkTheme = darkTheme;\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 }\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.Default // default (original HDS)\n ) {\n this._currentTheme = HdsThemeValues.Default;\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`/`mode` arguments)\n const hdsThemingClassesToRemove = Array.from(rootElement.classList).filter(\n (className) => className.match(/^hds-(theme|mode)/)\n );\n rootElement.classList.remove(...hdsThemingClassesToRemove);\n if (this._currentTheme !== undefined) {\n rootElement.classList.add(`hds-theme-${this._currentTheme}`);\n }\n if (this._currentMode !== undefined) {\n rootElement.classList.add(`hds-mode-${this._currentMode}`);\n }\n\n // store the current theme and theming options in local storage\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 },\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;\n }\n\n get currentDarkTheme(): HdsModesDark {\n return this._currentDarkTheme;\n }\n}\n"],"names":["HdsThemeValues","HdsModesBaseValues","HdsModesLightValues","HdsModesDarkValues","THEMES","Object","values","MODES_LIGHT","MODES_DARK","MODES","HDS_THEMING_LOCALSTORAGE_DATA","DEFAULT_THEMING_OPTION_LIGHT_THEME","CdsG0","DEFAULT_THEMING_OPTION_DARK_THEME","CdsG100","isSafeStoredThemingData","data","d","isSafeThemeData","undefined","includes","options","isSafeOptionsData","HdsThemingService","Service","g","prototype","tracked","i","void 0","initializeTheme","rawStoredThemingData","localStorage","getItem","storedThemingData","JSON","parse","error","console","setTheme","theme","onSetTheme","hasOwn","lightTheme","darkTheme","_currentLightTheme","_currentDarkTheme","_currentTheme","_currentMode","Default","System","Light","Dark","rootElement","document","querySelector","hdsThemingClassesToRemove","Array","from","classList","filter","className","match","remove","add","setItem","stringify","globalOnSetTheme","currentTheme","currentMode","currentLightTheme","currentDarkTheme"],"mappings":"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"}
|
package/dist/services.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
export { DEFAULT_THEMING_OPTION_DARK_THEME, DEFAULT_THEMING_OPTION_LIGHT_THEME, HDS_THEMING_LOCALSTORAGE_DATA, HdsModesBaseValues, HdsModesDarkValues, HdsModesLightValues, HdsThemeValues, MODES, MODES_DARK, MODES_LIGHT, THEMES } from './services/hds-theming.js';
|
|
2
2
|
//# sourceMappingURL=services.js.map
|