@acronis-platform/shadcn-uikit 0.26.0 → 0.27.0

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.
Files changed (6) hide show
  1. package/dist/themes/acronis-white-label.css +1 -0
  2. package/dist/themes/acronis-white-label.d.ts +1 -0
  3. package/dist/utils/theme-switcher.d.ts +22 -1
  4. package/dist/utils/theme-switcher.js +22 -20
  5. package/dist/utils/theme-switcher.js.map +1 -1
  6. package/package.json +1 -1
package/dist/themes/acronis-white-label.css ADDED
@@ -0,0 +1 @@
1
+ @charset "UTF-8";:root{--color-brand-primary: 213 65% 46%;--color-brand-secondary: 211 100% 45%;--color-brand-lightest: 213 65% 97%;--color-brand-light: 213 65% 96%;--color-text-inverse: 0 0% 100%;--color-text-primary: 215 26% 20%;--color-text-secondary: 215 26% 46%;--color-text-tertiary: 215 14% 39%;--color-surface-primary: 0 0% 100%;--color-surface-secondary: 210 100% 15%;--color-surface-overlay: 215 26% 20%;--color-surface-elevated: 0 0% 100%;--color-status-success: 73 68% 45%;--color-status-success-light: 84 67% 93%;--color-status-success-dark: 84 98% 21%;--color-status-info: 211 82% 60%;--color-status-info-light: 214 78% 95%;--color-status-info-dark: 214 68% 38%;--color-status-warning: 45 100% 52%;--color-status-warning-light: 45 100% 95%;--color-status-warning-dark: 30 50% 37%;--color-status-danger: 0 77% 57%;--color-status-danger-light: 0 100% 96%;--color-status-danger-dark: 0 72% 45%;--color-status-critical: 25 100% 52%;--color-status-critical-light: 27 95% 92%;--color-status-critical-dark: 11 73% 41%;--color-neutral: 220 11% 62%;--color-neutral-light: 220 11% 92%;--color-neutral-dark: 215 14% 39%;--color-ai: 263deg 77% 57%;--color-ai-light: 273deg 85% 97%;--color-ai-dark: 263deg 77% 57%;--opacity-10: .1;--opacity-20: .2;--opacity-30: .3;--opacity-40: .4;--opacity-50: .5;--opacity-70: .7;--opacity-90: .9}.theme-acronis-white-label{--color-brand-primary: 210 16% 32%;--color-brand-secondary: 213 65% 46%;--color-brand-lightest: 240 6% 97%;--color-brand-light: 210 8% 80%;--color-brand-accent: 200 9% 93%;--color-text-inverse: 0 0% 100%;--color-text-primary: 215 26% 20%;--color-text-secondary: 215 26% 46%;--color-text-tertiary: 215 14% 39%;--color-surface-primary: 0 0% 100%;--color-surface-overlay: 215 26% 20%;--color-surface-elevated: 0 0% 100%;--color-status-success: 73 68% 45%;--color-status-success-light: 84 67% 93%;--color-status-success-dark: 84 98% 21%;--color-status-info: 211 82% 60%;--color-status-info-light: 214 78% 95%;--color-status-info-dark: 214 68% 38%;--color-status-warning: 45 100% 52%;--color-status-warning-light: 45 100% 95%;--color-status-warning-dark: 30 50% 37%;--color-status-danger: 0 77% 57%;--color-status-danger-light: 0 100% 96%;--color-status-danger-dark: 0 72% 45%;--color-status-critical: 25 100% 52%;--color-status-critical-light: 27 95% 92%;--color-status-critical-dark: 11 73% 41%;--color-neutral: 220 11% 62%;--color-neutral-light: 220 11% 92%;--color-neutral-dark: 215 14% 39%;--color-ai: 263deg 77% 57%;--color-ai-light: 273deg 85% 97%;--color-ai-dark: 263deg 77% 57%;--opacity-10: .1;--opacity-20: .2;--opacity-30: .3;--opacity-40: .4;--opacity-50: .5;--opacity-70: .7;--opacity-90: .9;--av-background: var(--color-surface-primary);--av-elevated: var(--color-surface-elevated);--av-card: var(--av-elevated);--av-muted: var(--color-brand-lightest);--av-primary: var(--color-brand-primary);--av-accent: var(--color-brand-primary);--av-secondary: var(--color-surface-elevated);--av-destructive: var(--color-status-danger);--av-destructive-foreground: var(--color-text-inverse);--av-danger: var(--color-status-danger);--av-success: var(--color-status-success);--av-warning: var(--color-status-warning);--av-info: var(--color-status-info);--av-critical: var(--color-status-critical);--av-neutral: var(--color-status-neutral);--av-popover: var(--av-elevated);--av-tooltip: var(--color-surface-overlay);--av-foreground: var(--color-text-primary);--av-text-primary: var(--color-text-primary);--av-card-foreground: var(--color-text-primary);--av-popover-foreground: var(--color-text-primary);--av-primary-foreground: var(--color-text-inverse);--av-muted-foreground: var(--color-text-secondary);--av-secondary-foreground: var(--color-text-secondary);--av-tertiary-foreground: var(--color-text-tertiary);--av-accent-foreground: var(--color-text-inverse);--av-text-inverse: var(--color-surface-primary);--av-brand-foreground: var(--color-brand-primary);--av-border: 210 8% 85%;--av-separator: 210 8% 85%;--av-input: 210 8% 85%;--av-border-strong: var(--color-brand-primary);--av-border-subtle: 210 6% 92%;--av-fixed-link: var(--color-brand-secondary);--av-fixed-link-light: 215 58% 84%;--av-interactive-default: var(--color-brand-primary);--av-interactive-hover: 209 16% 25%;--av-interactive-active: 208 15% 19%;--av-interactive-disabled: var(--color-text-tertiary);--av-secondary-hover: var(--color-brand-accent);--av-secondary-active: 216 7% 86%;--av-solid-secondary-active: 216 5% 86%;--av-ring: var(--color-brand-primary);--av-focus: var(--color-brand-primary);--av-scroll-thumb: hsl(213 29% 20% / .4);--av-scroll-thumb-inverse: hsl(0 0% 100% / .4);--av-status-success: var(--color-status-success);--av-status-success-bg: var(--color-status-success-light);--av-status-success-text: var(--color-status-success-dark);--av-status-info: var(--color-status-info);--av-status-info-bg: var(--color-status-info-light);--av-status-info-text: var(--color-status-info-dark);--av-status-warning: var(--color-status-warning);--av-status-warning-bg: var(--color-status-warning-light);--av-status-warning-text: var(--color-status-warning-dark);--av-status-danger: var(--color-status-danger);--av-status-danger-bg: var(--color-status-danger-light);--av-status-danger-text: var(--color-status-danger-dark);--av-status-critical: var(--color-status-critical);--av-status-critical-bg: var(--color-status-critical-light);--av-status-critical-text: var(--color-status-critical-dark);--av-status-neutral: var(--color-neutral);--av-status-neutral-bg: var(--color-neutral-light);--av-status-neutral-text: var(--color-neutral-dark);--av-status-ai: var(--color-ai);--av-status-ai-bg: var(--color-ai-light);--av-status-ai-text: var(--color-ai-dark);--av-nav-bg: 0 0% 20%;--av-nav-text-light: hsl(0 0% 100% / .7);--av-nav-text-active: 0 0% 100%;--av-nav-active: 0 0% 40%;--av-radius: .25rem;--av-chart-1: oklch(64.6% .222 41.116deg);--av-chart-2: oklch(60% .118 184.704deg);--av-chart-3: oklch(39.8% .07 227.392deg);--av-chart-4: oklch(82.8% .189 84.429deg);--av-chart-5: oklch(76.9% .188 70.08deg);--av-chart-blue: oklch(52.7% .16 257.94deg);--av-chart-brown: oklch(60.6% .105 62.98deg);--av-chart-critical: oklch(73.4% .184 52.786deg);--av-chart-danger: oklch(61.7% .21 26.1deg);--av-chart-green: oklch(65.4% .11 189deg);--av-chart-grey: oklch(68.4% .01 257.94deg);--av-chart-info: var(--av-brand-secondary);--av-chart-light-blue: oklch(80.9% .09 240deg);--av-chart-neutral: oklch(90.6% 0 257.94deg);--av-chart-purple: oklch(71.4% .19 314.82deg);--av-chart-red: oklch(66.9% .184 23.483deg);--av-chart-success: oklch(75.9% .177 123.498deg);--av-chart-transparent: oklch(80.9% .09 240deg / 50%);--av-chart-turquoise: oklch(70.5% .13 230deg);--av-chart-violet: oklch(51.5% .09 299deg);--av-chart-warning: oklch(84.4% .17 84.9deg);--av-chart-yellow: oklch(84% .14 95deg);--av-nav-bg: 233 50% 24%;--av-nav-active: 234 46% 43%;--av-nav-text: 0 0% 100%}.theme-acronis-white-label.dark{--av-background: var(--color-text-primary);--av-elevated: 210 10% 23%;--av-muted: 210 10% 30%;--av-tooltip: 210 10% 25%;--av-foreground: var(--color-surface-primary);--av-text-primary: var(--color-surface-primary);--av-secondary-foreground: 0 0% 70%;--av-tertiary-foreground: 0 0% 60%;--av-text-inverse: var(--color-text-primary);--av-brand-foreground: 210 16% 60%;--av-border: 210 10% 35%;--av-border-strong: 210 10% 40%;--av-border-subtle: 210 10% 25%;--av-interactive-default: 210 16% 50%;--av-interactive-hover: 210 16% 42%;--av-interactive-active: 210 16% 50%;--av-interactive-disabled: 210 10% 40%;--av-focus: 210 16% 50%;--av-status-success-bg: 73 68% 20%;--av-status-success-text: var(--color-status-success-light);--av-status-info-bg: 211 82% 20%;--av-status-info-text: var(--color-status-info-light);--av-status-warning-bg: 45 100% 20%;--av-status-warning-text: var(--color-status-warning-light);--av-status-danger-bg: 0 77% 20%;--av-status-danger-text: var(--color-status-danger-light);--av-status-critical-bg: 25 100% 20%;--av-status-critical-text: var(--color-status-critical-light);--av-status-neutral-bg: 220 11% 25%;--av-status-neutral-text: var(--color-neutral-light);--av-chart-1: oklch(48.8% .243 264.376deg);--av-chart-2: oklch(69.6% .17 162.48deg);--av-chart-3: oklch(76.9% .188 70.08deg);--av-chart-4: oklch(62.7% .265 303.9deg);--av-chart-5: oklch(64.5% .246 16.439deg)}.theme-acronis-white-label.nav-purple{--av-nav-bg: 233 50% 24%;--av-nav-active: 234 46% 43%;--av-nav-text: 0 0% 100%}.theme-acronis-white-label.nav-brown{--av-nav-bg: 14 100% 19%;--av-nav-active: 0 48% 44%;--av-nav-text: 0 0% 100%}.theme-acronis-white-label.nav-sand{--av-nav-bg: 14 17% 18%;--av-nav-active: 26 34% 59%;--av-nav-text: 0 0% 100%}.theme-acronis-white-label.nav-light-gray{--av-nav-bg: 0 0% 100%;--av-nav-active: 202 82% 87%;--av-nav-text: 213 29% 20%;--av-nav-text-light: hsl(213 29% 20% / .7);--av-nav-text-active: 213 29% 20%;--av-scroll-thumb-inverse: hsl(213 29% 20% / .4)}.theme-acronis-white-label.nav-dark-gray{--av-nav-bg: 213 29% 20%;--av-nav-active: 220 7% 48%;--av-nav-text: 0 0% 100%}.theme-acronis-white-label.nav-ingram-micro{--av-nav-bg: 209 29% 25%;--av-nav-active: 209 27% 55%;--av-nav-text: 0 0% 100%}.theme-acronis-white-label.nav-red-fire-brick{--av-nav-bg: 355 89% 24%;--av-nav-active: 357 59% 55%;--av-nav-text: 0 0% 100%}.theme-acronis-white-label.nav-yellow-1c{--av-nav-bg: 51 96% 55%;--av-nav-active: 48 93% 48%;--av-nav-text: 213 29% 20%;--av-nav-text-light: hsl(213 29% 20% / .7);--av-nav-text-active: 213 29% 20%;--av-scroll-thumb-inverse: hsl(213 29% 20% / .4)}.theme-acronis-white-label.nav-deep-sky-itkontoret{--av-nav-bg: 196 100% 28%;--av-nav-active: 199 100% 48%;--av-nav-text: 0 0% 100%}.theme-acronis-white-label.nav-blue-yellow-uss-signal{--av-nav-bg: 211 73% 19%;--av-nav-active: 44 86% 57%;--av-nav-text: 0 0% 100%}.theme-acronis-white-label.nav-red-home-pl{--av-nav-bg: 0 0% 15%;--av-nav-active: 0 100% 44%;--av-nav-text: 0 0% 100%}.theme-acronis-white-label.nav-orange-tsukaeru-helpox{--av-nav-bg: 0 0% 15%;--av-nav-active: 33 100% 47%;--av-nav-text: 0 0% 100%}.theme-acronis-white-label.nav-green-also-choise-df{--av-nav-bg: 0 0% 15%;--av-nav-active: 84 84% 30%;--av-nav-text: 0 0% 100%}.theme-acronis-white-label.nav-light-blue-hp{--av-nav-bg: 0 0% 15%;--av-nav-active: 199 93% 43%;--av-nav-text: 0 0% 100%}.theme-acronis-white-label.nav-purple-fusion-media{--av-nav-bg: 0 0% 15%;--av-nav-active: 290 32% 48%;--av-nav-text: 0 0% 100%}.theme-acronis-white-label.nav-virtual-one{--av-nav-bg: 199 100% 18%;--av-nav-active: 200 79% 66%;--av-nav-text: 0 0% 100%}.theme-acronis-white-label.nav-telstra{--av-nav-bg: 0 0% 100%;--av-nav-active: 320 72% 37%;--av-nav-text: 320 72% 37%;--av-nav-text-light: hsl(213 29% 20% / .7);--av-nav-text-active: 0 0% 100%;--av-scroll-thumb-inverse: hsl(213 29% 20% / .4)}.theme-acronis-white-label.nav-deep-purple{--av-nav-bg: 292 100% 20%;--av-nav-active: 328 83% 54%;--av-nav-text: 0 0% 100%}.theme-acronis-white-label.nav-pinky{--av-nav-bg: 329 100% 44%;--av-nav-active: 338 85% 67%;--av-nav-text: 0 0% 100%}.theme-acronis-white-label.nav-virtuozzo{--av-nav-bg: 0 0% 15%;--av-nav-active: 357 91% 46%;--av-nav-text: 0 0% 100%;--color-brand-secondary: 210 16% 32%;--av-fixed-link-light: 209 8% 80%}
package/dist/themes/acronis-white-label.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {}
package/dist/utils/theme-switcher.d.ts CHANGED
@@ -5,7 +5,8 @@
5
5
  * Supports both theme switching (e.g., acronis-default, acronis-ocean) and
6
6
  * color mode switching (light/dark).
7
7
  */
8
- export type ThemeName = 'acronis-default' | 'acronis-ocean' | 'cyber-chat' | 'custom';
8
+ export type ThemeName = 'acronis-default' | 'acronis-ocean' | 'acronis-white-label' | 'cyber-chat' | 'custom';
9
+ export type WhiteLabelNavVariant = 'purple' | 'brown' | 'sand' | 'light-gray' | 'dark-gray' | 'ingram-micro' | 'red-fire-brick' | 'yellow-1c' | 'deep-sky-itkontoret' | 'blue-yellow-uss-signal' | 'red-home-pl' | 'orange-tsukaeru-helpox' | 'green-also-choise-df' | 'light-blue-hp' | 'purple-fusion-media' | 'virtual-one' | 'telstra' | 'deep-purple' | 'pinky' | 'virtuozzo';
9
10
  export type ColorMode = 'light' | 'dark' | 'system';
10
11
  /**
11
12
  * Apply a theme to the document root element
@@ -21,6 +22,26 @@ export type ColorMode = 'light' | 'dark' | 'system';
21
22
  * ```
22
23
  */
23
24
  export declare function applyTheme(theme: ThemeName, persist?: boolean): void;
25
+ /**
26
+ * Apply a white-label nav variant to the document root element
27
+ * Only effective when the white-label theme is active.
28
+ *
29
+ * @param variant - The nav variant name to apply
30
+ * @param persist - Whether to persist the choice to localStorage (default: true)
31
+ *
32
+ * @example
33
+ * ```typescript
34
+ * applyTheme('acronis-white-label')
35
+ * applyNavVariant('ingram-micro')
36
+ * ```
37
+ */
38
+ export declare function applyNavVariant(variant: WhiteLabelNavVariant, persist?: boolean): void;
39
+ /**
40
+ * Get the currently applied nav variant
41
+ *
42
+ * @returns The current nav variant name or null if none is set
43
+ */
44
+ export declare function getCurrentNavVariant(): WhiteLabelNavVariant | null;
24
45
  /**
25
46
  * Get the currently applied theme
26
47
  *
package/dist/utils/theme-switcher.js CHANGED
@@ -1,8 +1,10 @@
1
- const c = "theme-", n = "dark", l = "av-theme", a = "av-color-mode";
2
- function d(e, o = !0) {
1
+ const c = "theme-", d = "nav-", n = "dark", l = "av-theme", a = "av-color-mode";
2
+ function m(e, o = !0) {
3
3
  const t = document.documentElement;
4
4
  t.classList.forEach((s) => {
5
5
  s.startsWith(c) && t.classList.remove(s);
6
+ }), e !== "acronis-white-label" && t.classList.forEach((s) => {
7
+ s.startsWith(d) && t.classList.remove(s);
6
8
  });
7
9
  const r = `${c}${e}`;
8
10
  if (t.classList.add(r), o)
@@ -12,18 +14,18 @@ function d(e, o = !0) {
12
14
  console.warn("Failed to persist theme to localStorage:", s);
13
15
  }
14
16
  }
15
- function g() {
17
+ function E() {
16
18
  const e = document.documentElement;
17
19
  for (const o of e.classList)
18
20
  if (o.startsWith(c))
19
21
  return o.replace(c, "");
20
22
  return null;
21
23
  }
22
- function m() {
24
+ function u() {
23
25
  try {
24
26
  const e = localStorage.getItem(l);
25
27
  if (e)
26
- return d(e, !1), e;
28
+ return m(e, !1), e;
27
29
  } catch (e) {
28
30
  console.warn("Failed to load persisted theme from localStorage:", e);
29
31
  }
@@ -43,10 +45,10 @@ function i(e, o = !0) {
43
45
  console.warn("Failed to persist color mode to localStorage:", r);
44
46
  }
45
47
  }
46
- function u() {
48
+ function h() {
47
49
  return document.documentElement.classList.contains(n) ? "dark" : "light";
48
50
  }
49
- function h() {
51
+ function f() {
50
52
  try {
51
53
  const e = localStorage.getItem(a);
52
54
  if (e)
@@ -56,11 +58,11 @@ function h() {
56
58
  }
57
59
  return null;
58
60
  }
59
- function p(e = !0) {
60
- const t = u() === "light" ? "dark" : "light";
61
+ function S(e = !0) {
62
+ const t = h() === "light" ? "dark" : "light";
61
63
  return i(t, e), t;
62
64
  }
63
- function f() {
65
+ function g() {
64
66
  const e = window.matchMedia("(prefers-color-scheme: dark)"), o = (t) => {
65
67
  try {
66
68
  localStorage.getItem(a) === "system" && document.documentElement.classList.toggle(n, t.matches);
@@ -72,18 +74,18 @@ function f() {
72
74
  e.removeEventListener("change", o);
73
75
  };
74
76
  }
75
- function E() {
76
- return m(), h(), f();
77
+ function p() {
78
+ return u(), f(), g();
77
79
  }
78
80
  export {
79
81
  i as applyColorMode,
80
- d as applyTheme,
81
- u as getCurrentColorMode,
82
- g as getCurrentTheme,
83
- E as initializeThemeSystem,
84
- h as loadPersistedColorMode,
85
- m as loadPersistedTheme,
86
- p as toggleColorMode,
87
- f as watchSystemColorScheme
82
+ m as applyTheme,
83
+ h as getCurrentColorMode,
84
+ E as getCurrentTheme,
85
+ p as initializeThemeSystem,
86
+ f as loadPersistedColorMode,
87
+ u as loadPersistedTheme,
88
+ S as toggleColorMode,
89
+ g as watchSystemColorScheme
88
90
  };
89
91
  //# sourceMappingURL=theme-switcher.js.map
package/dist/utils/theme-switcher.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"theme-switcher.js","sources":["../../src/utils/theme-switcher.ts"],"sourcesContent":["/**\n * Theme Switcher Utility\n * \n * Provides functions to programmatically switch between themes and color modes.\n * Supports both theme switching (e.g., acronis-default, acronis-ocean) and\n * color mode switching (light/dark).\n */\n\nexport type ThemeName = 'acronis-default' | 'acronis-ocean' | 'cyber-chat' | 'custom'\nexport type ColorMode = 'light' | 'dark' | 'system'\n\nconst THEME_CLASS_PREFIX = 'theme-'\nconst DARK_CLASS = 'dark'\nconst THEME_STORAGE_KEY = 'av-theme'\nconst COLOR_MODE_STORAGE_KEY = 'av-color-mode'\n\n/**\n * Apply a theme to the document root element\n * \n * @param theme - The theme name to apply\n * @param persist - Whether to persist the theme choice to localStorage (default: true)\n * \n * @example\n * ```typescript\n * import { applyTheme } from '@acronis/shadcn-uikit/utils/theme-switcher'\n * \n * applyTheme('acronis-ocean')\n * ```\n */\nexport function applyTheme(theme: ThemeName, persist = true): void {\n const root = document.documentElement\n \n root.classList.forEach((className) => {\n if (className.startsWith(THEME_CLASS_PREFIX)) {\n root.classList.remove(className)\n }\n })\n \n const themeClass = `${THEME_CLASS_PREFIX}${theme}`\n root.classList.add(themeClass)\n \n if (persist) {\n try {\n localStorage.setItem(THEME_STORAGE_KEY, theme)\n } catch (error) {\n console.warn('Failed to persist theme to localStorage:', error)\n }\n }\n}\n\n/**\n * Get the currently applied theme\n * \n * @returns The current theme name or null if no theme is explicitly set\n */\nexport function getCurrentTheme(): ThemeName | null {\n const root = document.documentElement\n \n for (const className of root.classList) {\n if (className.startsWith(THEME_CLASS_PREFIX)) {\n return className.replace(THEME_CLASS_PREFIX, '') as ThemeName\n }\n }\n \n return null\n}\n\n/**\n * Load the persisted theme from localStorage and apply it\n * Call this on application startup to restore the user's theme preference\n * \n * @returns The loaded theme name or null if no theme was persisted\n */\nexport function loadPersistedTheme(): ThemeName | null {\n try {\n const persistedTheme = localStorage.getItem(THEME_STORAGE_KEY) as ThemeName | null\n if (persistedTheme) {\n applyTheme(persistedTheme, false)\n return persistedTheme\n }\n } catch (error) {\n console.warn('Failed to load persisted theme from localStorage:', error)\n }\n \n return null\n}\n\n/**\n * Apply a color mode (light/dark/system) to the document root element\n * \n * @param mode - The color mode to apply\n * @param persist - Whether to persist the mode choice to localStorage (default: true)\n * \n * @example\n * ```typescript\n * import { applyColorMode } from '@acronis/shadcn-uikit/utils/theme-switcher'\n * \n * applyColorMode('dark')\n * applyColorMode('system') // Follows system preference\n * ```\n */\nexport function applyColorMode(mode: ColorMode, persist = true): void {\n const root = document.documentElement\n \n if (mode === 'system') {\n const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches\n root.classList.toggle(DARK_CLASS, systemPrefersDark)\n } else {\n root.classList.toggle(DARK_CLASS, mode === 'dark')\n }\n \n if (persist) {\n try {\n localStorage.setItem(COLOR_MODE_STORAGE_KEY, mode)\n } catch (error) {\n console.warn('Failed to persist color mode to localStorage:', error)\n }\n }\n}\n\n/**\n * Get the currently applied color mode\n * \n * @returns 'light' or 'dark' based on the current state\n */\nexport function getCurrentColorMode(): 'light' | 'dark' {\n return document.documentElement.classList.contains(DARK_CLASS) ? 'dark' : 'light'\n}\n\n/**\n * Load the persisted color mode from localStorage and apply it\n * Call this on application startup to restore the user's color mode preference\n * \n * @returns The loaded color mode or null if no mode was persisted\n */\nexport function loadPersistedColorMode(): ColorMode | null {\n try {\n const persistedMode = localStorage.getItem(COLOR_MODE_STORAGE_KEY) as ColorMode | null\n if (persistedMode) {\n applyColorMode(persistedMode, false)\n return persistedMode\n }\n } catch (error) {\n console.warn('Failed to load persisted color mode from localStorage:', error)\n }\n \n return null\n}\n\n/**\n * Toggle between light and dark mode\n * \n * @param persist - Whether to persist the mode choice to localStorage (default: true)\n * @returns The new color mode after toggling\n */\nexport function toggleColorMode(persist = true): 'light' | 'dark' {\n const currentMode = getCurrentColorMode()\n const newMode = currentMode === 'light' ? 'dark' : 'light'\n applyColorMode(newMode, persist)\n return newMode\n}\n\n/**\n * Set up a listener for system color scheme changes\n * Only applies changes if the current mode is set to 'system'\n * \n * @returns A cleanup function to remove the listener\n */\nexport function watchSystemColorScheme(): () => void {\n const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')\n \n const handler = (e: MediaQueryListEvent) => {\n try {\n const persistedMode = localStorage.getItem(COLOR_MODE_STORAGE_KEY)\n if (persistedMode === 'system') {\n document.documentElement.classList.toggle(DARK_CLASS, e.matches)\n }\n } catch (error) {\n console.warn('Failed to check persisted color mode:', error)\n }\n }\n \n mediaQuery.addEventListener('change', handler)\n \n return () => {\n mediaQuery.removeEventListener('change', handler)\n }\n}\n\n/**\n * Initialize the theme system on application startup\n * Loads persisted theme and color mode preferences\n * Sets up system color scheme watcher if mode is 'system'\n * \n * @returns A cleanup function to remove event listeners\n * \n * @example\n * ```typescript\n * import { initializeThemeSystem } from '@acronis/shadcn-uikit/utils/theme-switcher'\n * \n * // In your app initialization\n * const cleanup = initializeThemeSystem()\n * \n * // Call cleanup when unmounting (e.g., in React useEffect)\n * return cleanup\n * ```\n */\nexport function initializeThemeSystem(): () => void {\n loadPersistedTheme()\n loadPersistedColorMode()\n \n const cleanup = watchSystemColorScheme()\n \n return cleanup\n}\n"],"names":["THEME_CLASS_PREFIX","DARK_CLASS","THEME_STORAGE_KEY","COLOR_MODE_STORAGE_KEY","applyTheme","theme","persist","root","className","themeClass","error","getCurrentTheme","loadPersistedTheme","persistedTheme","applyColorMode","mode","systemPrefersDark","getCurrentColorMode","loadPersistedColorMode","persistedMode","toggleColorMode","newMode","watchSystemColorScheme","mediaQuery","handler","e","initializeThemeSystem"],"mappings":"AAWA,MAAMA,IAAqB,UACrBC,IAAa,QACbC,IAAoB,YACpBC,IAAyB;AAexB,SAASC,EAAWC,GAAkBC,IAAU,IAAY;AACjE,QAAMC,IAAO,SAAS;AAEtB,EAAAA,EAAK,UAAU,QAAQ,CAACC,MAAc;AACpC,IAAIA,EAAU,WAAWR,CAAkB,KACzCO,EAAK,UAAU,OAAOC,CAAS;AAAA,EAEnC,CAAC;AAED,QAAMC,IAAa,GAAGT,CAAkB,GAAGK,CAAK;AAGhD,MAFAE,EAAK,UAAU,IAAIE,CAAU,GAEzBH;AACF,QAAI;AACF,mBAAa,QAAQJ,GAAmBG,CAAK;AAAA,IAC/C,SAASK,GAAO;AACd,cAAQ,KAAK,4CAA4CA,CAAK;AAAA,IAChE;AAEJ;AAOO,SAASC,IAAoC;AAClD,QAAMJ,IAAO,SAAS;AAEtB,aAAWC,KAAaD,EAAK;AAC3B,QAAIC,EAAU,WAAWR,CAAkB;AACzC,aAAOQ,EAAU,QAAQR,GAAoB,EAAE;AAInD,SAAO;AACT;AAQO,SAASY,IAAuC;AACrD,MAAI;AACF,UAAMC,IAAiB,aAAa,QAAQX,CAAiB;AAC7D,QAAIW;AACF,aAAAT,EAAWS,GAAgB,EAAK,GACzBA;AAAA,EAEX,SAASH,GAAO;AACd,YAAQ,KAAK,qDAAqDA,CAAK;AAAA,EACzE;AAEA,SAAO;AACT;AAgBO,SAASI,EAAeC,GAAiBT,IAAU,IAAY;AACpE,QAAMC,IAAO,SAAS;AAEtB,MAAIQ,MAAS,UAAU;AACrB,UAAMC,IAAoB,OAAO,WAAW,8BAA8B,EAAE;AAC5E,IAAAT,EAAK,UAAU,OAAON,GAAYe,CAAiB;AAAA,EACrD;AACE,IAAAT,EAAK,UAAU,OAAON,GAAYc,MAAS,MAAM;AAGnD,MAAIT;AACF,QAAI;AACF,mBAAa,QAAQH,GAAwBY,CAAI;AAAA,IACnD,SAASL,GAAO;AACd,cAAQ,KAAK,iDAAiDA,CAAK;AAAA,IACrE;AAEJ;AAOO,SAASO,IAAwC;AACtD,SAAO,SAAS,gBAAgB,UAAU,SAAShB,CAAU,IAAI,SAAS;AAC5E;AAQO,SAASiB,IAA2C;AACzD,MAAI;AACF,UAAMC,IAAgB,aAAa,QAAQhB,CAAsB;AACjE,QAAIgB;AACF,aAAAL,EAAeK,GAAe,EAAK,GAC5BA;AAAA,EAEX,SAAST,GAAO;AACd,YAAQ,KAAK,0DAA0DA,CAAK;AAAA,EAC9E;AAEA,SAAO;AACT;AAQO,SAASU,EAAgBd,IAAU,IAAwB;AAEhE,QAAMe,IADcJ,EAAA,MACY,UAAU,SAAS;AACnD,SAAAH,EAAeO,GAASf,CAAO,GACxBe;AACT;AAQO,SAASC,IAAqC;AACnD,QAAMC,IAAa,OAAO,WAAW,8BAA8B,GAE7DC,IAAU,CAACC,MAA2B;AAC1C,QAAI;AAEF,MADsB,aAAa,QAAQtB,CAAsB,MAC3C,YACpB,SAAS,gBAAgB,UAAU,OAAOF,GAAYwB,EAAE,OAAO;AAAA,IAEnE,SAASf,GAAO;AACd,cAAQ,KAAK,yCAAyCA,CAAK;AAAA,IAC7D;AAAA,EACF;AAEA,SAAAa,EAAW,iBAAiB,UAAUC,CAAO,GAEtC,MAAM;AACX,IAAAD,EAAW,oBAAoB,UAAUC,CAAO;AAAA,EAClD;AACF;AAoBO,SAASE,IAAoC;AAClD,SAAAd,EAAA,GACAM,EAAA,GAEgBI,EAAA;AAGlB;"}
1
+ {"version":3,"file":"theme-switcher.js","sources":["../../src/utils/theme-switcher.ts"],"sourcesContent":["/**\n * Theme Switcher Utility\n * \n * Provides functions to programmatically switch between themes and color modes.\n * Supports both theme switching (e.g., acronis-default, acronis-ocean) and\n * color mode switching (light/dark).\n */\n\nexport type ThemeName = 'acronis-default' | 'acronis-ocean' | 'acronis-white-label' | 'cyber-chat' | 'custom'\nexport type WhiteLabelNavVariant =\n | 'purple' | 'brown' | 'sand' | 'light-gray' | 'dark-gray'\n | 'ingram-micro' | 'red-fire-brick' | 'yellow-1c' | 'deep-sky-itkontoret'\n | 'blue-yellow-uss-signal' | 'red-home-pl' | 'orange-tsukaeru-helpox'\n | 'green-also-choise-df' | 'light-blue-hp' | 'purple-fusion-media'\n | 'virtual-one' | 'telstra' | 'deep-purple' | 'pinky' | 'virtuozzo'\nexport type ColorMode = 'light' | 'dark' | 'system'\n\nconst THEME_CLASS_PREFIX = 'theme-'\nconst NAV_CLASS_PREFIX = 'nav-'\nconst DARK_CLASS = 'dark'\nconst THEME_STORAGE_KEY = 'av-theme'\nconst NAV_VARIANT_STORAGE_KEY = 'av-nav-variant'\nconst COLOR_MODE_STORAGE_KEY = 'av-color-mode'\n\n/**\n * Apply a theme to the document root element\n * \n * @param theme - The theme name to apply\n * @param persist - Whether to persist the theme choice to localStorage (default: true)\n * \n * @example\n * ```typescript\n * import { applyTheme } from '@acronis/shadcn-uikit/utils/theme-switcher'\n * \n * applyTheme('acronis-ocean')\n * ```\n */\nexport function applyTheme(theme: ThemeName, persist = true): void {\n const root = document.documentElement\n\n root.classList.forEach((className) => {\n if (className.startsWith(THEME_CLASS_PREFIX)) {\n root.classList.remove(className)\n }\n })\n\n // Remove nav variant classes when switching away from white-label\n if (theme !== 'acronis-white-label') {\n root.classList.forEach((className) => {\n if (className.startsWith(NAV_CLASS_PREFIX)) {\n root.classList.remove(className)\n }\n })\n }\n\n const themeClass = `${THEME_CLASS_PREFIX}${theme}`\n root.classList.add(themeClass)\n\n if (persist) {\n try {\n localStorage.setItem(THEME_STORAGE_KEY, theme)\n } catch (error) {\n console.warn('Failed to persist theme to localStorage:', error)\n }\n }\n}\n\n/**\n * Apply a white-label nav variant to the document root element\n * Only effective when the white-label theme is active.\n *\n * @param variant - The nav variant name to apply\n * @param persist - Whether to persist the choice to localStorage (default: true)\n *\n * @example\n * ```typescript\n * applyTheme('acronis-white-label')\n * applyNavVariant('ingram-micro')\n * ```\n */\nexport function applyNavVariant(variant: WhiteLabelNavVariant, persist = true): void {\n const root = document.documentElement\n\n root.classList.forEach((className) => {\n if (className.startsWith(NAV_CLASS_PREFIX)) {\n root.classList.remove(className)\n }\n })\n\n root.classList.add(`${NAV_CLASS_PREFIX}${variant}`)\n\n if (persist) {\n try {\n localStorage.setItem(NAV_VARIANT_STORAGE_KEY, variant)\n } catch (error) {\n console.warn('Failed to persist nav variant to localStorage:', error)\n }\n }\n}\n\n/**\n * Get the currently applied nav variant\n *\n * @returns The current nav variant name or null if none is set\n */\nexport function getCurrentNavVariant(): WhiteLabelNavVariant | null {\n const root = document.documentElement\n\n for (const className of root.classList) {\n if (className.startsWith(NAV_CLASS_PREFIX)) {\n return className.replace(NAV_CLASS_PREFIX, '') as WhiteLabelNavVariant\n }\n }\n\n return null\n}\n\n/**\n * Get the currently applied theme\n *\n * @returns The current theme name or null if no theme is explicitly set\n */\nexport function getCurrentTheme(): ThemeName | null {\n const root = document.documentElement\n \n for (const className of root.classList) {\n if (className.startsWith(THEME_CLASS_PREFIX)) {\n return className.replace(THEME_CLASS_PREFIX, '') as ThemeName\n }\n }\n \n return null\n}\n\n/**\n * Load the persisted theme from localStorage and apply it\n * Call this on application startup to restore the user's theme preference\n * \n * @returns The loaded theme name or null if no theme was persisted\n */\nexport function loadPersistedTheme(): ThemeName | null {\n try {\n const persistedTheme = localStorage.getItem(THEME_STORAGE_KEY) as ThemeName | null\n if (persistedTheme) {\n applyTheme(persistedTheme, false)\n return persistedTheme\n }\n } catch (error) {\n console.warn('Failed to load persisted theme from localStorage:', error)\n }\n \n return null\n}\n\n/**\n * Apply a color mode (light/dark/system) to the document root element\n * \n * @param mode - The color mode to apply\n * @param persist - Whether to persist the mode choice to localStorage (default: true)\n * \n * @example\n * ```typescript\n * import { applyColorMode } from '@acronis/shadcn-uikit/utils/theme-switcher'\n * \n * applyColorMode('dark')\n * applyColorMode('system') // Follows system preference\n * ```\n */\nexport function applyColorMode(mode: ColorMode, persist = true): void {\n const root = document.documentElement\n \n if (mode === 'system') {\n const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches\n root.classList.toggle(DARK_CLASS, systemPrefersDark)\n } else {\n root.classList.toggle(DARK_CLASS, mode === 'dark')\n }\n \n if (persist) {\n try {\n localStorage.setItem(COLOR_MODE_STORAGE_KEY, mode)\n } catch (error) {\n console.warn('Failed to persist color mode to localStorage:', error)\n }\n }\n}\n\n/**\n * Get the currently applied color mode\n * \n * @returns 'light' or 'dark' based on the current state\n */\nexport function getCurrentColorMode(): 'light' | 'dark' {\n return document.documentElement.classList.contains(DARK_CLASS) ? 'dark' : 'light'\n}\n\n/**\n * Load the persisted color mode from localStorage and apply it\n * Call this on application startup to restore the user's color mode preference\n * \n * @returns The loaded color mode or null if no mode was persisted\n */\nexport function loadPersistedColorMode(): ColorMode | null {\n try {\n const persistedMode = localStorage.getItem(COLOR_MODE_STORAGE_KEY) as ColorMode | null\n if (persistedMode) {\n applyColorMode(persistedMode, false)\n return persistedMode\n }\n } catch (error) {\n console.warn('Failed to load persisted color mode from localStorage:', error)\n }\n \n return null\n}\n\n/**\n * Toggle between light and dark mode\n * \n * @param persist - Whether to persist the mode choice to localStorage (default: true)\n * @returns The new color mode after toggling\n */\nexport function toggleColorMode(persist = true): 'light' | 'dark' {\n const currentMode = getCurrentColorMode()\n const newMode = currentMode === 'light' ? 'dark' : 'light'\n applyColorMode(newMode, persist)\n return newMode\n}\n\n/**\n * Set up a listener for system color scheme changes\n * Only applies changes if the current mode is set to 'system'\n * \n * @returns A cleanup function to remove the listener\n */\nexport function watchSystemColorScheme(): () => void {\n const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')\n \n const handler = (e: MediaQueryListEvent) => {\n try {\n const persistedMode = localStorage.getItem(COLOR_MODE_STORAGE_KEY)\n if (persistedMode === 'system') {\n document.documentElement.classList.toggle(DARK_CLASS, e.matches)\n }\n } catch (error) {\n console.warn('Failed to check persisted color mode:', error)\n }\n }\n \n mediaQuery.addEventListener('change', handler)\n \n return () => {\n mediaQuery.removeEventListener('change', handler)\n }\n}\n\n/**\n * Initialize the theme system on application startup\n * Loads persisted theme and color mode preferences\n * Sets up system color scheme watcher if mode is 'system'\n * \n * @returns A cleanup function to remove event listeners\n * \n * @example\n * ```typescript\n * import { initializeThemeSystem } from '@acronis/shadcn-uikit/utils/theme-switcher'\n * \n * // In your app initialization\n * const cleanup = initializeThemeSystem()\n * \n * // Call cleanup when unmounting (e.g., in React useEffect)\n * return cleanup\n * ```\n */\nexport function initializeThemeSystem(): () => void {\n loadPersistedTheme()\n loadPersistedColorMode()\n \n const cleanup = watchSystemColorScheme()\n \n return cleanup\n}\n"],"names":["THEME_CLASS_PREFIX","NAV_CLASS_PREFIX","DARK_CLASS","THEME_STORAGE_KEY","COLOR_MODE_STORAGE_KEY","applyTheme","theme","persist","root","className","themeClass","error","getCurrentTheme","loadPersistedTheme","persistedTheme","applyColorMode","mode","systemPrefersDark","getCurrentColorMode","loadPersistedColorMode","persistedMode","toggleColorMode","newMode","watchSystemColorScheme","mediaQuery","handler","e","initializeThemeSystem"],"mappings":"AAiBA,MAAMA,IAAqB,UACrBC,IAAmB,QACnBC,IAAa,QACbC,IAAoB,YAEpBC,IAAyB;AAexB,SAASC,EAAWC,GAAkBC,IAAU,IAAY;AACjE,QAAMC,IAAO,SAAS;AAEtB,EAAAA,EAAK,UAAU,QAAQ,CAACC,MAAc;AACpC,IAAIA,EAAU,WAAWT,CAAkB,KACzCQ,EAAK,UAAU,OAAOC,CAAS;AAAA,EAEnC,CAAC,GAGGH,MAAU,yBACZE,EAAK,UAAU,QAAQ,CAACC,MAAc;AACpC,IAAIA,EAAU,WAAWR,CAAgB,KACvCO,EAAK,UAAU,OAAOC,CAAS;AAAA,EAEnC,CAAC;AAGH,QAAMC,IAAa,GAAGV,CAAkB,GAAGM,CAAK;AAGhD,MAFAE,EAAK,UAAU,IAAIE,CAAU,GAEzBH;AACF,QAAI;AACF,mBAAa,QAAQJ,GAAmBG,CAAK;AAAA,IAC/C,SAASK,GAAO;AACd,cAAQ,KAAK,4CAA4CA,CAAK;AAAA,IAChE;AAEJ;AAyDO,SAASC,IAAoC;AAClD,QAAMJ,IAAO,SAAS;AAEtB,aAAWC,KAAaD,EAAK;AAC3B,QAAIC,EAAU,WAAWT,CAAkB;AACzC,aAAOS,EAAU,QAAQT,GAAoB,EAAE;AAInD,SAAO;AACT;AAQO,SAASa,IAAuC;AACrD,MAAI;AACF,UAAMC,IAAiB,aAAa,QAAQX,CAAiB;AAC7D,QAAIW;AACF,aAAAT,EAAWS,GAAgB,EAAK,GACzBA;AAAA,EAEX,SAASH,GAAO;AACd,YAAQ,KAAK,qDAAqDA,CAAK;AAAA,EACzE;AAEA,SAAO;AACT;AAgBO,SAASI,EAAeC,GAAiBT,IAAU,IAAY;AACpE,QAAMC,IAAO,SAAS;AAEtB,MAAIQ,MAAS,UAAU;AACrB,UAAMC,IAAoB,OAAO,WAAW,8BAA8B,EAAE;AAC5E,IAAAT,EAAK,UAAU,OAAON,GAAYe,CAAiB;AAAA,EACrD;AACE,IAAAT,EAAK,UAAU,OAAON,GAAYc,MAAS,MAAM;AAGnD,MAAIT;AACF,QAAI;AACF,mBAAa,QAAQH,GAAwBY,CAAI;AAAA,IACnD,SAASL,GAAO;AACd,cAAQ,KAAK,iDAAiDA,CAAK;AAAA,IACrE;AAEJ;AAOO,SAASO,IAAwC;AACtD,SAAO,SAAS,gBAAgB,UAAU,SAAShB,CAAU,IAAI,SAAS;AAC5E;AAQO,SAASiB,IAA2C;AACzD,MAAI;AACF,UAAMC,IAAgB,aAAa,QAAQhB,CAAsB;AACjE,QAAIgB;AACF,aAAAL,EAAeK,GAAe,EAAK,GAC5BA;AAAA,EAEX,SAAST,GAAO;AACd,YAAQ,KAAK,0DAA0DA,CAAK;AAAA,EAC9E;AAEA,SAAO;AACT;AAQO,SAASU,EAAgBd,IAAU,IAAwB;AAEhE,QAAMe,IADcJ,EAAA,MACY,UAAU,SAAS;AACnD,SAAAH,EAAeO,GAASf,CAAO,GACxBe;AACT;AAQO,SAASC,IAAqC;AACnD,QAAMC,IAAa,OAAO,WAAW,8BAA8B,GAE7DC,IAAU,CAACC,MAA2B;AAC1C,QAAI;AAEF,MADsB,aAAa,QAAQtB,CAAsB,MAC3C,YACpB,SAAS,gBAAgB,UAAU,OAAOF,GAAYwB,EAAE,OAAO;AAAA,IAEnE,SAASf,GAAO;AACd,cAAQ,KAAK,yCAAyCA,CAAK;AAAA,IAC7D;AAAA,EACF;AAEA,SAAAa,EAAW,iBAAiB,UAAUC,CAAO,GAEtC,MAAM;AACX,IAAAD,EAAW,oBAAoB,UAAUC,CAAO;AAAA,EAClD;AACF;AAoBO,SAASE,IAAoC;AAClD,SAAAd,EAAA,GACAM,EAAA,GAEgBI,EAAA;AAGlB;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acronis-platform/shadcn-uikit",
3
- "version": "0.26.0",
3
+ "version": "0.27.0",
4
4
  "description": "Acronis shadcn UI component library built with TypeScript, following shadcn design principles",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",