@skdx/tokens 0.27.0 → 0.29.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 (193) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +92 -69
  3. package/dist/foundation.css +1 -1
  4. package/dist/index.cjs +1 -1
  5. package/dist/index.d.cts +3 -2
  6. package/dist/index.d.ts +3 -2
  7. package/dist/index.js +1 -1
  8. package/dist/themes/AntDark.cjs +1 -1
  9. package/dist/themes/AntDark.d.cts +3 -12
  10. package/dist/themes/AntDark.d.ts +3 -12
  11. package/dist/themes/AntDark.js +1 -1
  12. package/dist/themes/{AntBrand.cjs → AntLight.cjs} +1 -1
  13. package/dist/themes/{AntBrand.d.cts → AntLight.d.cts} +1 -1
  14. package/dist/themes/{AntBrand.d.ts → AntLight.d.ts} +1 -1
  15. package/dist/themes/{AntBrand.js → AntLight.js} +1 -1
  16. package/dist/themes/CatppuccinLatte.cjs +1 -1
  17. package/dist/themes/CatppuccinLatte.d.cts +1 -7
  18. package/dist/themes/CatppuccinLatte.d.ts +1 -7
  19. package/dist/themes/CatppuccinLatte.js +1 -1
  20. package/dist/themes/CatppuccinMocha.cjs +1 -1
  21. package/dist/themes/CatppuccinMocha.d.cts +1 -7
  22. package/dist/themes/CatppuccinMocha.d.ts +1 -7
  23. package/dist/themes/CatppuccinMocha.js +1 -1
  24. package/dist/themes/ChakraDark.cjs +1 -1
  25. package/dist/themes/ChakraDark.d.cts +3 -12
  26. package/dist/themes/ChakraDark.d.ts +3 -12
  27. package/dist/themes/ChakraDark.js +1 -1
  28. package/dist/themes/{ChakraBrand.cjs → ChakraLight.cjs} +1 -1
  29. package/dist/themes/{ChakraBrand.d.cts → ChakraLight.d.cts} +1 -1
  30. package/dist/themes/{ChakraBrand.d.ts → ChakraLight.d.ts} +1 -1
  31. package/dist/themes/{ChakraBrand.js → ChakraLight.js} +1 -1
  32. package/dist/themes/CupcakeDark.cjs +1 -1
  33. package/dist/themes/CupcakeDark.d.cts +3 -5
  34. package/dist/themes/CupcakeDark.d.ts +3 -5
  35. package/dist/themes/CupcakeLight.cjs +1 -1
  36. package/dist/themes/CupcakeLight.d.cts +1 -8
  37. package/dist/themes/CupcakeLight.d.ts +1 -8
  38. package/dist/themes/CupcakeLight.js +1 -1
  39. package/dist/themes/DefaultTheme.cjs +1 -1
  40. package/dist/themes/DefaultTheme.d.cts +3 -15
  41. package/dist/themes/DefaultTheme.d.ts +3 -15
  42. package/dist/themes/DefaultTheme.js +1 -1
  43. package/dist/themes/DraculaLight.cjs +1 -1
  44. package/dist/themes/DraculaLight.d.cts +3 -10
  45. package/dist/themes/DraculaLight.d.ts +3 -10
  46. package/dist/themes/DraculaLight.js +1 -1
  47. package/dist/themes/EmeraldDark.cjs +1 -1
  48. package/dist/themes/EmeraldDark.d.cts +3 -8
  49. package/dist/themes/EmeraldDark.d.ts +3 -8
  50. package/dist/themes/EmeraldDark.js +1 -1
  51. package/dist/themes/{EmeraldBrand.cjs → EmeraldLight.cjs} +1 -1
  52. package/dist/themes/{EmeraldBrand.d.cts → EmeraldLight.d.cts} +1 -1
  53. package/dist/themes/{EmeraldBrand.d.ts → EmeraldLight.d.ts} +1 -1
  54. package/dist/themes/{EmeraldBrand.js → EmeraldLight.js} +1 -1
  55. package/dist/themes/EverforestDark.cjs +1 -1
  56. package/dist/themes/EverforestDark.d.cts +1 -2
  57. package/dist/themes/EverforestDark.d.ts +1 -2
  58. package/dist/themes/EverforestDark.js +1 -1
  59. package/dist/themes/EverforestLight.cjs +1 -1
  60. package/dist/themes/EverforestLight.d.cts +3 -9
  61. package/dist/themes/EverforestLight.d.ts +3 -9
  62. package/dist/themes/FluentDark.cjs +1 -1
  63. package/dist/themes/FluentDark.d.cts +3 -11
  64. package/dist/themes/FluentDark.d.ts +3 -11
  65. package/dist/themes/FluentDark.js +1 -1
  66. package/dist/themes/{FluentBrand.cjs → FluentLight.cjs} +1 -1
  67. package/dist/themes/{FluentBrand.d.cts → FluentLight.d.cts} +1 -1
  68. package/dist/themes/{FluentBrand.d.ts → FluentLight.d.ts} +1 -1
  69. package/dist/themes/{FluentBrand.js → FluentLight.js} +1 -1
  70. package/dist/themes/GraphiteDark.cjs +1 -1
  71. package/dist/themes/GraphiteDark.d.cts +3 -8
  72. package/dist/themes/GraphiteDark.d.ts +3 -8
  73. package/dist/themes/GraphiteDark.js +1 -1
  74. package/dist/themes/{GraphiteBrand.cjs → GraphiteLight.cjs} +1 -1
  75. package/dist/themes/{GraphiteBrand.d.cts → GraphiteLight.d.cts} +1 -1
  76. package/dist/themes/{GraphiteBrand.d.ts → GraphiteLight.d.ts} +1 -1
  77. package/dist/themes/{GraphiteBrand.js → GraphiteLight.js} +1 -1
  78. package/dist/themes/GruvboxDark.cjs +1 -1
  79. package/dist/themes/GruvboxDark.d.cts +1 -7
  80. package/dist/themes/GruvboxDark.d.ts +1 -7
  81. package/dist/themes/GruvboxDark.js +1 -1
  82. package/dist/themes/GruvboxLight.cjs +1 -1
  83. package/dist/themes/GruvboxLight.d.cts +3 -13
  84. package/dist/themes/GruvboxLight.d.ts +3 -13
  85. package/dist/themes/GruvboxLight.js +1 -1
  86. package/dist/themes/MaterialDark.cjs +1 -1
  87. package/dist/themes/MaterialDark.d.cts +3 -12
  88. package/dist/themes/MaterialDark.d.ts +3 -12
  89. package/dist/themes/MaterialDark.js +1 -1
  90. package/dist/themes/{MaterialBrand.cjs → MaterialLight.cjs} +1 -1
  91. package/dist/themes/MaterialLight.d.cts +3 -0
  92. package/dist/themes/MaterialLight.d.ts +3 -0
  93. package/dist/themes/{MaterialBrand.js → MaterialLight.js} +1 -1
  94. package/dist/themes/MidnightDark.cjs +1 -0
  95. package/dist/themes/MidnightDark.d.cts +3 -0
  96. package/dist/themes/MidnightDark.d.ts +3 -0
  97. package/dist/themes/{MidnightBrand.js → MidnightDark.js} +1 -1
  98. package/dist/themes/MidnightLight.cjs +1 -1
  99. package/dist/themes/MidnightLight.d.cts +4 -6
  100. package/dist/themes/MidnightLight.d.ts +4 -6
  101. package/dist/themes/MidnightLight.js +1 -1
  102. package/dist/themes/NordDark.cjs +1 -1
  103. package/dist/themes/NordDark.js +1 -1
  104. package/dist/themes/NordLight.cjs +1 -1
  105. package/dist/themes/NordLight.d.cts +3 -13
  106. package/dist/themes/NordLight.d.ts +3 -13
  107. package/dist/themes/NordLight.js +1 -1
  108. package/dist/themes/OneDark.cjs +1 -1
  109. package/dist/themes/OneDark.d.cts +1 -7
  110. package/dist/themes/OneDark.d.ts +1 -7
  111. package/dist/themes/OneDark.js +1 -1
  112. package/dist/themes/OneLight.cjs +1 -1
  113. package/dist/themes/OneLight.d.cts +3 -9
  114. package/dist/themes/OneLight.d.ts +3 -9
  115. package/dist/themes/OneLight.js +1 -1
  116. package/dist/themes/PrimerDark.cjs +1 -1
  117. package/dist/themes/PrimerDark.d.cts +0 -1
  118. package/dist/themes/PrimerDark.d.ts +0 -1
  119. package/dist/themes/PrimerDark.js +1 -1
  120. package/dist/themes/PrimerLight.d.cts +1 -7
  121. package/dist/themes/PrimerLight.d.ts +1 -7
  122. package/dist/themes/RosePine.cjs +1 -1
  123. package/dist/themes/RosePine.d.cts +1 -7
  124. package/dist/themes/RosePine.d.ts +1 -7
  125. package/dist/themes/RosePine.js +1 -1
  126. package/dist/themes/RosePineDawn.cjs +1 -1
  127. package/dist/themes/RosePineDawn.d.cts +3 -9
  128. package/dist/themes/RosePineDawn.d.ts +3 -9
  129. package/dist/themes/RosePineDawn.js +1 -1
  130. package/dist/themes/SkandaDark.cjs +1 -1
  131. package/dist/themes/SkandaDark.d.cts +5 -8
  132. package/dist/themes/SkandaDark.d.ts +5 -8
  133. package/dist/themes/SkandaDark.js +1 -1
  134. package/dist/themes/SkandaLight.cjs +1 -1
  135. package/dist/themes/SkandaLight.js +1 -1
  136. package/dist/themes/SolarizedDark.d.cts +1 -7
  137. package/dist/themes/SolarizedDark.d.ts +1 -7
  138. package/dist/themes/SolarizedLight.cjs +1 -1
  139. package/dist/themes/SolarizedLight.d.cts +1 -7
  140. package/dist/themes/SolarizedLight.d.ts +1 -7
  141. package/dist/themes/SolarizedLight.js +1 -1
  142. package/dist/themes/SynthwaveDark.d.cts +1 -7
  143. package/dist/themes/SynthwaveDark.d.ts +1 -7
  144. package/dist/themes/SynthwaveLight.cjs +1 -1
  145. package/dist/themes/SynthwaveLight.d.cts +3 -12
  146. package/dist/themes/SynthwaveLight.d.ts +3 -12
  147. package/dist/themes/SynthwaveLight.js +1 -1
  148. package/dist/themes/brands.cjs +1 -1
  149. package/dist/themes/brands.d.cts +5 -28
  150. package/dist/themes/brands.d.ts +5 -28
  151. package/dist/themes/brands.js +1 -1
  152. package/dist/themes/createBrandTheme.cjs +1 -1
  153. package/dist/themes/createBrandTheme.d.cts +11 -23
  154. package/dist/themes/createBrandTheme.d.ts +11 -23
  155. package/dist/themes/createBrandTheme.js +1 -1
  156. package/dist/themes/index.cjs +1 -1
  157. package/dist/themes/index.d.cts +10 -9
  158. package/dist/themes/index.d.ts +10 -9
  159. package/dist/themes/index.js +1 -1
  160. package/dist/themes.css +1 -1
  161. package/dist/tokens.css +1 -1
  162. package/dist/tokens.dtcg.json +14246 -0
  163. package/dist/utils/aliases.cjs +9 -3
  164. package/dist/utils/aliases.d.cts +19 -99
  165. package/dist/utils/aliases.d.ts +19 -99
  166. package/dist/utils/aliases.js +9 -3
  167. package/dist/utils/contrast.d.cts +2 -17
  168. package/dist/utils/contrast.d.ts +2 -17
  169. package/dist/utils/cssVars.cjs +2 -2
  170. package/dist/utils/cssVars.d.cts +12 -37
  171. package/dist/utils/cssVars.d.ts +12 -37
  172. package/dist/utils/cssVars.js +2 -2
  173. package/dist/utils/foundation.cjs +4 -4
  174. package/dist/utils/foundation.d.cts +24 -177
  175. package/dist/utils/foundation.d.ts +24 -177
  176. package/dist/utils/foundation.js +3 -3
  177. package/dist/utils/mode.cjs +1 -1
  178. package/dist/utils/mode.d.cts +18 -57
  179. package/dist/utils/mode.d.ts +18 -57
  180. package/dist/utils/mode.js +1 -1
  181. package/dist/utils/theme.cjs +1 -1
  182. package/dist/utils/theme.d.cts +68 -292
  183. package/dist/utils/theme.d.ts +68 -292
  184. package/dist/utils/toCss.cjs +5 -5
  185. package/dist/utils/toCss.d.cts +22 -60
  186. package/dist/utils/toCss.d.ts +22 -60
  187. package/dist/utils/toCss.js +5 -5
  188. package/package.json +5 -4
  189. package/dist/themes/MaterialBrand.d.cts +0 -3
  190. package/dist/themes/MaterialBrand.d.ts +0 -3
  191. package/dist/themes/MidnightBrand.cjs +0 -1
  192. package/dist/themes/MidnightBrand.d.cts +0 -11
  193. package/dist/themes/MidnightBrand.d.ts +0 -11
package/dist/utils/mode.d.cts CHANGED
@@ -1,89 +1,50 @@
1
- /** `localStorage` key the mode preference (`'light' | 'dark' | 'system'`) is read from and written to. @public */
1
+ /** `localStorage` key for mode preference (`'light' | 'dark' | 'system'`). @public */
2
2
  export declare const MODE_STORAGE_KEY = "skdx-mode";
3
- /** `localStorage` key the brand preference (a {@link Brand} name, e.g. `'nord'`) is read from. @public */
3
+ /** `localStorage` key for brand preference (a {@link Brand} name). @public */
4
4
  export declare const BRAND_STORAGE_KEY = "skdx-brand";
5
5
  /** Options for {@link watchSystemMode}. @public */
6
6
  export interface WatchSystemModeOptions {
7
- /** Brand whose light/dark pair is applied. Unknown names fall back to the default brand. @default 'skanda' */
7
+ /** Brand pair to apply (unknown names fall back to default). @default 'skanda' */
8
8
  brand?: string;
9
- /** Element the resolved theme is applied to. @default document.documentElement */
9
+ /** Target element for theme. @default document.documentElement */
10
10
  element?: HTMLElement;
11
- /** Whether to mirror the resolved mode into `localStorage` under {@link storageKey}. @default false */
11
+ /** Mirror resolved mode to `localStorage`. @default false */
12
12
  persist?: boolean;
13
- /** `localStorage` key used when `persist` is on. @default MODE_STORAGE_KEY */
13
+ /** `localStorage` key when `persist` is on. @default MODE_STORAGE_KEY */
14
14
  storageKey?: string;
15
15
  }
16
16
  /**
17
- * Follows the OS color-scheme preference: applies the brand's theme for the
18
- * currently resolved mode, then re-applies it whenever the preference flips
19
- * — the runtime half of "mode: system". Call it once on mount and call the
20
- * returned function on unmount.
21
- *
22
- * Browser-only (it reads `window.matchMedia`); guard it behind a mounted
23
- * effect in an SSR framework, and pair it with {@link getThemeInitScript} so
24
- * the first paint already matches.
25
- *
26
- * @returns An unsubscribe function that detaches the change listener.
17
+ * Follows OS color-scheme, applying and re-applying the theme on change; browser-only, guard behind a mounted effect in SSR.
18
+ * Pair with {@link getThemeInitScript} so first paint matches. A persisted explicit `'light'`/`'dark'` under
19
+ * `storageKey` takes precedence over the OS preference until a `'system'` value is stored again.
27
20
  *
21
+ * @returns Unsubscribe function (detaches listener).
28
22
  * @example
29
23
  * ```ts
30
24
  * import { watchSystemMode } from '@skdx/tokens';
31
- *
32
25
  * const stop = watchSystemMode({ brand: 'nord', persist: true });
33
- * // later…
34
26
  * stop();
35
27
  * ```
36
- *
37
28
  * @public
38
29
  */
39
30
  export declare function watchSystemMode(options?: WatchSystemModeOptions): () => void;
40
31
  /** Options for {@link getThemeInitScript}. @public */
41
32
  export interface ThemeInitScriptOptions {
42
- /** `localStorage` key holding the brand name. @default BRAND_STORAGE_KEY */
33
+ /** `localStorage` key for brand name. @default BRAND_STORAGE_KEY */
43
34
  brandKey?: string;
44
- /** `localStorage` key holding `'light' | 'dark' | 'system'`. @default MODE_STORAGE_KEY */
35
+ /** `localStorage` key for mode. @default MODE_STORAGE_KEY */
45
36
  modeKey?: string;
46
- /** Brand used when nothing is persisted or the persisted name is unknown. @default 'skanda' */
47
- fallbackBrand?: string;
37
+ /** Brand to fall back to when nothing is persisted or the persisted name is unknown. @default 'skanda' */
38
+ brand?: string;
48
39
  }
49
40
  /**
50
- * Builds the blocking snippet that stamps `data-skdx-theme` and `data-skdx-mode`
51
- * on `<html>` *before first paint*, so a dark-mode visitor never sees a flash
52
- * of the light theme. It reads the persisted brand and mode, resolves
53
- * `'system'` through `prefers-color-scheme`, and maps brand + mode to the
54
- * theme name your stylesheet is keyed by — the brand→theme-name table is
55
- * baked into the returned string at call time from {@link brands}.
56
- *
57
- * Returns bare JavaScript (no `<script>` wrapper) so each framework can inject
58
- * it its own way. It only sets attributes, so the page's CSS must already
59
- * contain a `[data-skdx-theme="…"]` block per theme (see `themeToCss`).
41
+ * Blocking snippet that stamps `data-skdx-theme`/`-mode` on `<html>` before first paint, resolving `'system'` via `prefers-color-scheme`.
42
+ * Returns bare JS (no `<script>` wrapper); your CSS needs `[data-skdx-theme="…"]` blocks.
60
43
  *
61
- * @example Next.js (App Router, `app/layout.tsx`)
44
+ * @example Next.js
62
45
  * ```tsx
63
- * <head>
64
- * <script dangerouslySetInnerHTML={{ __html: getThemeInitScript() }} />
65
- * </head>
66
- * ```
67
- *
68
- * @example Nuxt (`nuxt.config.ts`)
69
- * ```ts
70
- * app: { head: { script: [{ innerHTML: getThemeInitScript(), tagPosition: 'head' }] } }
71
- * ```
72
- *
73
- * @example SvelteKit (`src/app.html`) — write the string into the template at
74
- * build time, e.g. from a Vite plugin replacing a `%skdx.themeInit%` token:
75
- * ```html
76
- * <head>
77
- * %sveltekit.head%
78
- * <script>%skdx.themeInit%</script>
79
- * </head>
46
+ * <script dangerouslySetInnerHTML={{ __html: getThemeInitScript() }} />
80
47
  * ```
81
- *
82
- * @example Astro (`src/layouts/Base.astro`)
83
- * ```astro
84
- * <script is:inline set:html={getThemeInitScript()} />
85
- * ```
86
- *
87
48
  * @public
88
49
  */
89
50
  export declare function getThemeInitScript(options?: ThemeInitScriptOptions): string;
package/dist/utils/mode.d.ts CHANGED
@@ -1,89 +1,50 @@
1
- /** `localStorage` key the mode preference (`'light' | 'dark' | 'system'`) is read from and written to. @public */
1
+ /** `localStorage` key for mode preference (`'light' | 'dark' | 'system'`). @public */
2
2
  export declare const MODE_STORAGE_KEY = "skdx-mode";
3
- /** `localStorage` key the brand preference (a {@link Brand} name, e.g. `'nord'`) is read from. @public */
3
+ /** `localStorage` key for brand preference (a {@link Brand} name). @public */
4
4
  export declare const BRAND_STORAGE_KEY = "skdx-brand";
5
5
  /** Options for {@link watchSystemMode}. @public */
6
6
  export interface WatchSystemModeOptions {
7
- /** Brand whose light/dark pair is applied. Unknown names fall back to the default brand. @default 'skanda' */
7
+ /** Brand pair to apply (unknown names fall back to default). @default 'skanda' */
8
8
  brand?: string;
9
- /** Element the resolved theme is applied to. @default document.documentElement */
9
+ /** Target element for theme. @default document.documentElement */
10
10
  element?: HTMLElement;
11
- /** Whether to mirror the resolved mode into `localStorage` under {@link storageKey}. @default false */
11
+ /** Mirror resolved mode to `localStorage`. @default false */
12
12
  persist?: boolean;
13
- /** `localStorage` key used when `persist` is on. @default MODE_STORAGE_KEY */
13
+ /** `localStorage` key when `persist` is on. @default MODE_STORAGE_KEY */
14
14
  storageKey?: string;
15
15
  }
16
16
  /**
17
- * Follows the OS color-scheme preference: applies the brand's theme for the
18
- * currently resolved mode, then re-applies it whenever the preference flips
19
- * — the runtime half of "mode: system". Call it once on mount and call the
20
- * returned function on unmount.
21
- *
22
- * Browser-only (it reads `window.matchMedia`); guard it behind a mounted
23
- * effect in an SSR framework, and pair it with {@link getThemeInitScript} so
24
- * the first paint already matches.
25
- *
26
- * @returns An unsubscribe function that detaches the change listener.
17
+ * Follows OS color-scheme, applying and re-applying the theme on change; browser-only, guard behind a mounted effect in SSR.
18
+ * Pair with {@link getThemeInitScript} so first paint matches. A persisted explicit `'light'`/`'dark'` under
19
+ * `storageKey` takes precedence over the OS preference until a `'system'` value is stored again.
27
20
  *
21
+ * @returns Unsubscribe function (detaches listener).
28
22
  * @example
29
23
  * ```ts
30
24
  * import { watchSystemMode } from '@skdx/tokens';
31
- *
32
25
  * const stop = watchSystemMode({ brand: 'nord', persist: true });
33
- * // later…
34
26
  * stop();
35
27
  * ```
36
- *
37
28
  * @public
38
29
  */
39
30
  export declare function watchSystemMode(options?: WatchSystemModeOptions): () => void;
40
31
  /** Options for {@link getThemeInitScript}. @public */
41
32
  export interface ThemeInitScriptOptions {
42
- /** `localStorage` key holding the brand name. @default BRAND_STORAGE_KEY */
33
+ /** `localStorage` key for brand name. @default BRAND_STORAGE_KEY */
43
34
  brandKey?: string;
44
- /** `localStorage` key holding `'light' | 'dark' | 'system'`. @default MODE_STORAGE_KEY */
35
+ /** `localStorage` key for mode. @default MODE_STORAGE_KEY */
45
36
  modeKey?: string;
46
- /** Brand used when nothing is persisted or the persisted name is unknown. @default 'skanda' */
47
- fallbackBrand?: string;
37
+ /** Brand to fall back to when nothing is persisted or the persisted name is unknown. @default 'skanda' */
38
+ brand?: string;
48
39
  }
49
40
  /**
50
- * Builds the blocking snippet that stamps `data-skdx-theme` and `data-skdx-mode`
51
- * on `<html>` *before first paint*, so a dark-mode visitor never sees a flash
52
- * of the light theme. It reads the persisted brand and mode, resolves
53
- * `'system'` through `prefers-color-scheme`, and maps brand + mode to the
54
- * theme name your stylesheet is keyed by — the brand→theme-name table is
55
- * baked into the returned string at call time from {@link brands}.
56
- *
57
- * Returns bare JavaScript (no `<script>` wrapper) so each framework can inject
58
- * it its own way. It only sets attributes, so the page's CSS must already
59
- * contain a `[data-skdx-theme="…"]` block per theme (see `themeToCss`).
41
+ * Blocking snippet that stamps `data-skdx-theme`/`-mode` on `<html>` before first paint, resolving `'system'` via `prefers-color-scheme`.
42
+ * Returns bare JS (no `<script>` wrapper); your CSS needs `[data-skdx-theme="…"]` blocks.
60
43
  *
61
- * @example Next.js (App Router, `app/layout.tsx`)
44
+ * @example Next.js
62
45
  * ```tsx
63
- * <head>
64
- * <script dangerouslySetInnerHTML={{ __html: getThemeInitScript() }} />
65
- * </head>
66
- * ```
67
- *
68
- * @example Nuxt (`nuxt.config.ts`)
69
- * ```ts
70
- * app: { head: { script: [{ innerHTML: getThemeInitScript(), tagPosition: 'head' }] } }
71
- * ```
72
- *
73
- * @example SvelteKit (`src/app.html`) — write the string into the template at
74
- * build time, e.g. from a Vite plugin replacing a `%skdx.themeInit%` token:
75
- * ```html
76
- * <head>
77
- * %sveltekit.head%
78
- * <script>%skdx.themeInit%</script>
79
- * </head>
46
+ * <script dangerouslySetInnerHTML={{ __html: getThemeInitScript() }} />
80
47
  * ```
81
- *
82
- * @example Astro (`src/layouts/Base.astro`)
83
- * ```astro
84
- * <script is:inline set:html={getThemeInitScript()} />
85
- * ```
86
- *
87
48
  * @public
88
49
  */
89
50
  export declare function getThemeInitScript(options?: ThemeInitScriptOptions): string;
package/dist/utils/mode.js CHANGED
@@ -1 +1 @@
1
- import{brands as f,defaultBrand as h,getBrand as g}from"../themes/brands.js";import{applyTheme as y}from"./toCss.js";var l="skdx-mode",u="skdx-brand",p="(prefers-color-scheme: dark)";function O(r={}){let{brand:t,element:n,persist:a=!1,storageKey:o=l}=r,e=(t===void 0?void 0:g(t))??h,s=window.matchMedia(p),m=i=>{let c=i?"dark":"light";if(y(e.themes[c],n),!!a)try{localStorage.setItem(o,c)}catch{}};m(s.matches);let d=i=>m(i.matches);return s.addEventListener("change",d),()=>s.removeEventListener("change",d)}function k(r={}){let{brandKey:t=u,modeKey:n=l,fallbackBrand:a=h.name}=r,o=Object.fromEntries(f.map(e=>[e.name,[e.themes.light.name,e.themes.dark.name]]));return`(function(){try{var t=${JSON.stringify(o)},f=${JSON.stringify(a)};var b=localStorage.getItem(${JSON.stringify(t)})||f;var m=localStorage.getItem(${JSON.stringify(n)});if(m!=="light"&&m!=="dark")m=matchMedia(${JSON.stringify(p)}).matches?"dark":"light";var p=t[b]||t[f];if(!p)return;var e=document.documentElement;e.setAttribute("data-skdx-theme",p[m==="dark"?1:0]);e.setAttribute("data-skdx-mode",m);}catch(e){}})();`}export{u as BRAND_STORAGE_KEY,l as MODE_STORAGE_KEY,k as getThemeInitScript,O as watchSystemMode};
1
+ import{brands as y,defaultBrand as p,getBrand as S}from"../themes/brands.js";import{applyTheme as b}from"./toCss.js";var f="skdx-mode",O="skdx-brand",u="(prefers-color-scheme: dark)";function x(o={}){let{brand:t,element:a,persist:i=!1,storageKey:r=f}=o,e=(t===void 0?void 0:S(t))??p,s=window.matchMedia(u),c,l=d=>{let n=null;try{n=localStorage.getItem(r)}catch{}let g=n==="light"||n==="dark"?n:void 0,m=(g!==c?g:void 0)??(d?"dark":"light");if(b(e.themes[m],a),!!i)try{localStorage.setItem(r,m),c=m}catch{}};l(s.matches);let h=d=>l(d.matches);return s.addEventListener("change",h),()=>s.removeEventListener("change",h)}function M(o={}){let{brandKey:t=O,modeKey:a=f,brand:i=p.name}=o,r=Object.fromEntries(y.map(e=>[e.name,[e.themes.light.name,e.themes.dark.name]]));return`(function(){try{var t=${JSON.stringify(r)},f=${JSON.stringify(i)};var b=localStorage.getItem(${JSON.stringify(t)})||f;var m=localStorage.getItem(${JSON.stringify(a)});if(m!=="light"&&m!=="dark")m=matchMedia(${JSON.stringify(u)}).matches?"dark":"light";var p=t[b]||t[f];if(!p)return;var e=document.documentElement;e.setAttribute("data-skdx-theme",p[m==="dark"?1:0]);e.setAttribute("data-skdx-mode",m);}catch(e){}})();`}export{O as BRAND_STORAGE_KEY,f as MODE_STORAGE_KEY,M as getThemeInitScript,x as watchSystemMode};
package/dist/utils/theme.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";var n=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var o=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var m=(r,t)=>{for(var e in t)n(r,e,{get:t[e],enumerable:!0})},l=(r,t,e,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of o(t))!a.call(r,i)&&i!==e&&n(r,i,{get:()=>t[i],enumerable:!(s=g(t,i))||s.enumerable});return r};var d=r=>l(n({},"__esModule",{value:!0}),r);var c={};m(c,{defaultMotion:()=>h});module.exports=d(c);var h={durationInstant:"0ms",durationFast:"100ms",durationNormal:"200ms",durationSlow:"300ms",easing:"cubic-bezier(0.16, 1, 0.3, 1)",easingExit:"cubic-bezier(0.4, 0, 1, 1)",easingSteady:"cubic-bezier(0.4, 0, 0.2, 1)",easingLinear:"linear",staggerTight:"4ms",staggerLoose:"40ms"};0&&(module.exports={defaultMotion});
1
+ "use strict";var e=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var o=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var m=(r,t)=>{for(var n in t)e(r,n,{get:t[n],enumerable:!0})},l=(r,t,n,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of o(t))!a.call(r,i)&&i!==n&&e(r,i,{get:()=>t[i],enumerable:!(s=g(t,i))||s.enumerable});return r};var d=r=>l(e({},"__esModule",{value:!0}),r);var h={};m(h,{defaultMotion:()=>c});module.exports=d(h);var c={durationInstant:"0ms",durationFast:"100ms",durationNormal:"200ms",durationSlow:"300ms",easing:"cubic-bezier(0.16, 1, 0.3, 1)",easingExit:"cubic-bezier(0.4, 0, 1, 1)",easingSteady:"cubic-bezier(0.4, 0, 0.2, 1)",easingLinear:"linear",staggerTight:"4ms",staggerLoose:"40ms"};0&&(module.exports={defaultMotion});