@skdx/tokens 0.26.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 (205) hide show
  1. package/README.md +439 -0
  2. package/dist/foundation.css +1 -0
  3. package/dist/index.cjs +1 -0
  4. package/dist/index.d.cts +8 -0
  5. package/dist/index.d.ts +8 -0
  6. package/dist/index.js +1 -0
  7. package/dist/themes/AntBrand.cjs +1 -0
  8. package/dist/themes/AntBrand.d.cts +3 -0
  9. package/dist/themes/AntBrand.d.ts +3 -0
  10. package/dist/themes/AntBrand.js +1 -0
  11. package/dist/themes/AntDark.cjs +1 -0
  12. package/dist/themes/AntDark.d.cts +12 -0
  13. package/dist/themes/AntDark.d.ts +12 -0
  14. package/dist/themes/AntDark.js +1 -0
  15. package/dist/themes/CatppuccinLatte.cjs +1 -0
  16. package/dist/themes/CatppuccinLatte.d.cts +9 -0
  17. package/dist/themes/CatppuccinLatte.d.ts +9 -0
  18. package/dist/themes/CatppuccinLatte.js +1 -0
  19. package/dist/themes/CatppuccinMocha.cjs +1 -0
  20. package/dist/themes/CatppuccinMocha.d.cts +9 -0
  21. package/dist/themes/CatppuccinMocha.d.ts +9 -0
  22. package/dist/themes/CatppuccinMocha.js +1 -0
  23. package/dist/themes/ChakraBrand.cjs +1 -0
  24. package/dist/themes/ChakraBrand.d.cts +3 -0
  25. package/dist/themes/ChakraBrand.d.ts +3 -0
  26. package/dist/themes/ChakraBrand.js +1 -0
  27. package/dist/themes/ChakraDark.cjs +1 -0
  28. package/dist/themes/ChakraDark.d.cts +12 -0
  29. package/dist/themes/ChakraDark.d.ts +12 -0
  30. package/dist/themes/ChakraDark.js +1 -0
  31. package/dist/themes/CupcakeDark.cjs +1 -0
  32. package/dist/themes/CupcakeDark.d.cts +9 -0
  33. package/dist/themes/CupcakeDark.d.ts +9 -0
  34. package/dist/themes/CupcakeDark.js +1 -0
  35. package/dist/themes/CupcakeLight.cjs +1 -0
  36. package/dist/themes/CupcakeLight.d.cts +10 -0
  37. package/dist/themes/CupcakeLight.d.ts +10 -0
  38. package/dist/themes/CupcakeLight.js +1 -0
  39. package/dist/themes/DefaultTheme.cjs +1 -0
  40. package/dist/themes/DefaultTheme.d.cts +37 -0
  41. package/dist/themes/DefaultTheme.d.ts +37 -0
  42. package/dist/themes/DefaultTheme.js +1 -0
  43. package/dist/themes/DraculaDark.cjs +1 -0
  44. package/dist/themes/DraculaDark.d.cts +3 -0
  45. package/dist/themes/DraculaDark.d.ts +3 -0
  46. package/dist/themes/DraculaDark.js +1 -0
  47. package/dist/themes/DraculaLight.cjs +1 -0
  48. package/dist/themes/DraculaLight.d.cts +14 -0
  49. package/dist/themes/DraculaLight.d.ts +14 -0
  50. package/dist/themes/DraculaLight.js +1 -0
  51. package/dist/themes/EmeraldBrand.cjs +1 -0
  52. package/dist/themes/EmeraldBrand.d.cts +3 -0
  53. package/dist/themes/EmeraldBrand.d.ts +3 -0
  54. package/dist/themes/EmeraldBrand.js +1 -0
  55. package/dist/themes/EmeraldDark.cjs +1 -0
  56. package/dist/themes/EmeraldDark.d.cts +8 -0
  57. package/dist/themes/EmeraldDark.d.ts +8 -0
  58. package/dist/themes/EmeraldDark.js +1 -0
  59. package/dist/themes/EverforestDark.cjs +1 -0
  60. package/dist/themes/EverforestDark.d.cts +9 -0
  61. package/dist/themes/EverforestDark.d.ts +9 -0
  62. package/dist/themes/EverforestDark.js +1 -0
  63. package/dist/themes/EverforestLight.cjs +1 -0
  64. package/dist/themes/EverforestLight.d.cts +13 -0
  65. package/dist/themes/EverforestLight.d.ts +13 -0
  66. package/dist/themes/EverforestLight.js +1 -0
  67. package/dist/themes/FluentBrand.cjs +1 -0
  68. package/dist/themes/FluentBrand.d.cts +3 -0
  69. package/dist/themes/FluentBrand.d.ts +3 -0
  70. package/dist/themes/FluentBrand.js +1 -0
  71. package/dist/themes/FluentDark.cjs +1 -0
  72. package/dist/themes/FluentDark.d.cts +11 -0
  73. package/dist/themes/FluentDark.d.ts +11 -0
  74. package/dist/themes/FluentDark.js +1 -0
  75. package/dist/themes/GraphiteBrand.cjs +1 -0
  76. package/dist/themes/GraphiteBrand.d.cts +3 -0
  77. package/dist/themes/GraphiteBrand.d.ts +3 -0
  78. package/dist/themes/GraphiteBrand.js +1 -0
  79. package/dist/themes/GraphiteDark.cjs +1 -0
  80. package/dist/themes/GraphiteDark.d.cts +8 -0
  81. package/dist/themes/GraphiteDark.d.ts +8 -0
  82. package/dist/themes/GraphiteDark.js +1 -0
  83. package/dist/themes/GruvboxDark.cjs +1 -0
  84. package/dist/themes/GruvboxDark.d.cts +9 -0
  85. package/dist/themes/GruvboxDark.d.ts +9 -0
  86. package/dist/themes/GruvboxDark.js +1 -0
  87. package/dist/themes/GruvboxLight.cjs +1 -0
  88. package/dist/themes/GruvboxLight.d.cts +13 -0
  89. package/dist/themes/GruvboxLight.d.ts +13 -0
  90. package/dist/themes/GruvboxLight.js +1 -0
  91. package/dist/themes/MaterialBrand.cjs +1 -0
  92. package/dist/themes/MaterialBrand.d.cts +3 -0
  93. package/dist/themes/MaterialBrand.d.ts +3 -0
  94. package/dist/themes/MaterialBrand.js +1 -0
  95. package/dist/themes/MaterialDark.cjs +1 -0
  96. package/dist/themes/MaterialDark.d.cts +12 -0
  97. package/dist/themes/MaterialDark.d.ts +12 -0
  98. package/dist/themes/MaterialDark.js +1 -0
  99. package/dist/themes/MidnightBrand.cjs +1 -0
  100. package/dist/themes/MidnightBrand.d.cts +11 -0
  101. package/dist/themes/MidnightBrand.d.ts +11 -0
  102. package/dist/themes/MidnightBrand.js +1 -0
  103. package/dist/themes/MidnightLight.cjs +1 -0
  104. package/dist/themes/MidnightLight.d.cts +10 -0
  105. package/dist/themes/MidnightLight.d.ts +10 -0
  106. package/dist/themes/MidnightLight.js +1 -0
  107. package/dist/themes/NordDark.cjs +1 -0
  108. package/dist/themes/NordDark.d.cts +3 -0
  109. package/dist/themes/NordDark.d.ts +3 -0
  110. package/dist/themes/NordDark.js +1 -0
  111. package/dist/themes/NordLight.cjs +1 -0
  112. package/dist/themes/NordLight.d.cts +13 -0
  113. package/dist/themes/NordLight.d.ts +13 -0
  114. package/dist/themes/NordLight.js +1 -0
  115. package/dist/themes/OneDark.cjs +1 -0
  116. package/dist/themes/OneDark.d.cts +9 -0
  117. package/dist/themes/OneDark.d.ts +9 -0
  118. package/dist/themes/OneDark.js +1 -0
  119. package/dist/themes/OneLight.cjs +1 -0
  120. package/dist/themes/OneLight.d.cts +13 -0
  121. package/dist/themes/OneLight.d.ts +13 -0
  122. package/dist/themes/OneLight.js +1 -0
  123. package/dist/themes/PrimerDark.cjs +1 -0
  124. package/dist/themes/PrimerDark.d.cts +9 -0
  125. package/dist/themes/PrimerDark.d.ts +9 -0
  126. package/dist/themes/PrimerDark.js +1 -0
  127. package/dist/themes/PrimerLight.cjs +1 -0
  128. package/dist/themes/PrimerLight.d.cts +9 -0
  129. package/dist/themes/PrimerLight.d.ts +9 -0
  130. package/dist/themes/PrimerLight.js +1 -0
  131. package/dist/themes/RosePine.cjs +1 -0
  132. package/dist/themes/RosePine.d.cts +9 -0
  133. package/dist/themes/RosePine.d.ts +9 -0
  134. package/dist/themes/RosePine.js +1 -0
  135. package/dist/themes/RosePineDawn.cjs +1 -0
  136. package/dist/themes/RosePineDawn.d.cts +13 -0
  137. package/dist/themes/RosePineDawn.d.ts +13 -0
  138. package/dist/themes/RosePineDawn.js +1 -0
  139. package/dist/themes/SkandaDark.cjs +1 -0
  140. package/dist/themes/SkandaDark.d.cts +12 -0
  141. package/dist/themes/SkandaDark.d.ts +12 -0
  142. package/dist/themes/SkandaDark.js +1 -0
  143. package/dist/themes/SkandaLight.cjs +1 -0
  144. package/dist/themes/SkandaLight.d.cts +3 -0
  145. package/dist/themes/SkandaLight.d.ts +3 -0
  146. package/dist/themes/SkandaLight.js +1 -0
  147. package/dist/themes/SolarizedDark.cjs +1 -0
  148. package/dist/themes/SolarizedDark.d.cts +9 -0
  149. package/dist/themes/SolarizedDark.d.ts +9 -0
  150. package/dist/themes/SolarizedDark.js +1 -0
  151. package/dist/themes/SolarizedLight.cjs +1 -0
  152. package/dist/themes/SolarizedLight.d.cts +9 -0
  153. package/dist/themes/SolarizedLight.d.ts +9 -0
  154. package/dist/themes/SolarizedLight.js +1 -0
  155. package/dist/themes/SynthwaveDark.cjs +1 -0
  156. package/dist/themes/SynthwaveDark.d.cts +9 -0
  157. package/dist/themes/SynthwaveDark.d.ts +9 -0
  158. package/dist/themes/SynthwaveDark.js +1 -0
  159. package/dist/themes/SynthwaveLight.cjs +1 -0
  160. package/dist/themes/SynthwaveLight.d.cts +12 -0
  161. package/dist/themes/SynthwaveLight.d.ts +12 -0
  162. package/dist/themes/SynthwaveLight.js +1 -0
  163. package/dist/themes/brands.cjs +1 -0
  164. package/dist/themes/brands.d.cts +41 -0
  165. package/dist/themes/brands.d.ts +41 -0
  166. package/dist/themes/brands.js +1 -0
  167. package/dist/themes/createBrandTheme.cjs +1 -0
  168. package/dist/themes/createBrandTheme.d.cts +55 -0
  169. package/dist/themes/createBrandTheme.d.ts +55 -0
  170. package/dist/themes/createBrandTheme.js +1 -0
  171. package/dist/themes/index.cjs +1 -0
  172. package/dist/themes/index.d.cts +41 -0
  173. package/dist/themes/index.d.ts +41 -0
  174. package/dist/themes/index.js +1 -0
  175. package/dist/themes.css +1 -0
  176. package/dist/tokens.css +1 -0
  177. package/dist/utils/aliases.cjs +9 -0
  178. package/dist/utils/aliases.d.cts +121 -0
  179. package/dist/utils/aliases.d.ts +121 -0
  180. package/dist/utils/aliases.js +9 -0
  181. package/dist/utils/contrast.cjs +1 -0
  182. package/dist/utils/contrast.d.cts +27 -0
  183. package/dist/utils/contrast.d.ts +27 -0
  184. package/dist/utils/contrast.js +1 -0
  185. package/dist/utils/cssVars.cjs +2 -0
  186. package/dist/utils/cssVars.d.cts +37 -0
  187. package/dist/utils/cssVars.d.ts +37 -0
  188. package/dist/utils/cssVars.js +2 -0
  189. package/dist/utils/foundation.cjs +15 -0
  190. package/dist/utils/foundation.d.cts +300 -0
  191. package/dist/utils/foundation.d.ts +300 -0
  192. package/dist/utils/foundation.js +15 -0
  193. package/dist/utils/mode.cjs +1 -0
  194. package/dist/utils/mode.d.cts +89 -0
  195. package/dist/utils/mode.d.ts +89 -0
  196. package/dist/utils/mode.js +1 -0
  197. package/dist/utils/theme.cjs +1 -0
  198. package/dist/utils/theme.d.cts +503 -0
  199. package/dist/utils/theme.d.ts +503 -0
  200. package/dist/utils/theme.js +1 -0
  201. package/dist/utils/toCss.cjs +10 -0
  202. package/dist/utils/toCss.d.cts +92 -0
  203. package/dist/utils/toCss.d.ts +92 -0
  204. package/dist/utils/toCss.js +10 -0
  205. package/package.json +70 -0
package/README.md ADDED
@@ -0,0 +1,439 @@
1
+ # @skdx/tokens
2
+
3
+ Theme contract and design tokens for the SkandaDX design system.
4
+
5
+ A SkandaDX theme is a **plain, JSON-serializable object** — no CSS files, no build step required. This package defines what a theme looks like (the `Theme` contract), ships ready-made themes, and provides functions that turn any theme into CSS custom properties (`--skdx-*` variables). It's published as a standalone, general-purpose package: skdx's own framework packages are headless (Phase 1) and don't depend on or apply these tokens themselves today, so `@skdx/tokens` is meant to be consumed independently — by `apps/docs`, or by any other project that wants the `--skdx-*` variables. Themed components that auto-apply a `Theme` are planned as future (Phase 2) work, not current behavior. Because themes are plain data, they are the natural output format for a visual theme builder: the builder edits a `Theme` object, and this package renders it to CSS.
6
+
7
+ ```text
8
+ Theme (colors) ── themeToCss / applyTheme ─┐
9
+ ├─▶ --skdx-* CSS variables ─▶ your own styled markup
10
+ Foundation ── foundationToCss ─────────┘
11
+ (type, space, radii, shadow geometry, motion — shared by every theme)
12
+ ```
13
+
14
+ ## Installation
15
+
16
+ ```sh
17
+ pnpm add @skdx/tokens
18
+ # or: npm install @skdx/tokens
19
+ ```
20
+
21
+ The package ships ESM and CJS builds with TypeScript declarations, has no runtime dependencies, and is fully tree-shakeable (`sideEffects: false`) — importing one theme does not pull in the others.
22
+
23
+ ## Quick start
24
+
25
+ Apply a theme to the whole document at runtime:
26
+
27
+ ```ts
28
+ import { applyTheme, defaultTheme, foundationToCss } from '@skdx/tokens';
29
+
30
+ // Once: the type scale, spacing, radii, shadow geometry and motion every theme shares.
31
+ document.head.appendChild(
32
+ Object.assign(document.createElement('style'), { textContent: foundationToCss() })
33
+ );
34
+ // Per theme: colors.
35
+ applyTheme(defaultTheme);
36
+ ```
37
+
38
+ `applyTheme` sets the theme's `--skdx-*` variables as inline styles on `<html>` and stamps it with `data-skdx-theme="skanda-light"`; `foundationToCss()` supplies the rest at `:root`. You need both — a theme no longer carries the shared scales. From then on, any CSS (including all SkandaDX components) can use the tokens:
39
+
40
+ ```css
41
+ .card {
42
+ background: var(--skdx-color-semantic-surface);
43
+ color: var(--skdx-color-semantic-text);
44
+ border-radius: var(--skdx-radius-lg);
45
+ box-shadow: var(--skdx-shadow-md);
46
+ padding: var(--skdx-space-4);
47
+ }
48
+ ```
49
+
50
+ ## The theme contract
51
+
52
+ **A theme is colors.** The type scale, spacing, radii, shadow geometry and motion are identical
53
+ in all 38 bundled themes, so they aren't part of a theme at all — they're the *foundation*,
54
+ exported once and emitted at `:root` by `foundationToCss()`.
55
+
56
+ | Group | Type | Contents |
57
+ | --------------------------------------------------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
58
+ | `colors.primary` / `neutral` / `success` / `warning` / `danger` | `ColorScale` | 11-step scales, `50` (lightest) → `950` (darkest) |
59
+ | `colors.semantic` | `SemanticColors` | Purpose-driven colors: `background`, `surface`, `surfaceHover`, `overlay`, `text`, `textMuted`, `textInverted`, `border`, `borderStrong`, `focusRing` |
60
+ | `shadow` | `ThemeShadowColor` | The color half of the shared shadow geometry: `color` (an sRGB triple like `'2 6 23'`) and `strength` (a multiplier on the shared base alphas) |
61
+
62
+ Components should use the **semantic** colors (`colors.semantic.*`) wherever possible and reach into the raw scales only for accents — that is what lets one component tree re-brand cleanly across light and dark themes.
63
+
64
+ ### The foundation
65
+
66
+ Imported as bare named exports, not read off a theme:
67
+
68
+ | Export | Type | Contents |
69
+ | ------------ | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
70
+ | `typography` | `ThemeTypography` | `fontFamily`, `fontFamilyMono`, `fontSize` (`xs`–`3xl`), `fontWeight` (`regular`–`bold`), `lineHeight`, `letterSpacing` |
71
+ | `space` | `ThemeSpace` | Spacing steps `1`–`16` (`0.25rem`–`4rem`) |
72
+ | `radii` | `ThemeRadii` | `sm`, `md`, `lg`, `xl`, `full` |
73
+ | `shadows` | `ThemeShadows` | `sm`, `md`, `lg`, `overlay` — geometry only; each defers its color to `var(--skdx-shadow-color)` / `var(--skdx-shadow-strength)` |
74
+ | `motion` | `ThemeMotion` | `durationFast`/`Normal`/`Slow`, `easing`, plus the optional `easingExit`/`Steady`/`Linear` and the two staggers |
75
+
76
+ ### The two escape hatches
77
+
78
+ A theme may optionally declare `typography` (just `fontFamily` / `fontFamilyMono`) and `motion`
79
+ (just the four base tokens). Declaring one *is* the deviation — there is no wrapper to opt into,
80
+ and they re-emit at the theme's own higher-specificity selector so `[data-skdx-theme="material-you"]`
81
+ beats `:root`.
82
+
83
+ This exists for the themes that impersonate a published design language, where mirroring that
84
+ language's own typeface and motion spec is the entire point: `material-you`, `fluent` and
85
+ `ant-daybreak` (plus their dark counterparts). Nothing else declares either.
86
+
87
+ All types are exported: `Theme`, `ThemeOverride`, `ThemeColors`, `ColorScale`, `SemanticColors`, `ThemeShadowColor`, `ThemeTypographyDeviation`, `ThemeMotionDeviation`, `ThemeTypography`, `ThemeSpace`, `ThemeRadii`, `ThemeShadows`, `ThemeMotion`.
88
+
89
+ ## Built-in brands and themes
90
+
91
+ `defaultTheme` (name `skanda-light`) is the reference theme. On top of it, the package ships **nineteen brands, each with a complete light and dark theme** (thirty-eight themes total). A theme carries its own `mode: 'light' | 'dark'`, and the `brands` registry pairs the two themes per brand:
92
+
93
+ ```ts
94
+ import { applyTheme, brands, getBrand, type ThemeColorMode } from '@skdx/tokens';
95
+
96
+ const nord = getBrand('nord')!; // { name, displayName, themes: { light, dark } }
97
+ const mode: ThemeColorMode = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
98
+ applyTheme(nord.themes[mode]); // stamps data-skdx-theme="nord-dark|nord-light" + data-skdx-mode
99
+ ```
100
+
101
+ Brand and color mode are **independent dimensions**: the brand decides identity (hues, and for three themes type and motion), the mode decides light or dark appearance, and the resolved theme is an ordinary `Theme` — so `themeToCss` / `applyTheme` and every `--skdx-*` variable name work exactly as before. Store a user's brand preference and color-mode preference (`'light' | 'dark' | 'system'`) separately; resolve `'system'` via `prefers-color-scheme`, then apply `brand.themes[resolvedMode]`. `getBrandByThemeName('one-dark')` maps a persisted pre-brand theme name to its owning brand for migrations, and `defaultBrand` is `skanda`.
102
+
103
+ The original twenty-two themes are unchanged (names, exports, and light-mode values preserved); the sixteen `*Dark`/`*Light` counterparts were added so every brand covers both modes. Each counterpart is a `createTheme` override of its sibling, keeping the brand's ramps. Themes inspired by third-party palettes only use permissively licensed sources (MIT / MIT-X11) — see [THIRD-PARTY-NOTICES.md](./THIRD-PARTY-NOTICES.md):
104
+
105
+ | Export | Name | Character |
106
+ | ----------------- | ------------------- | ----------------------------------------------------------------------------------- |
107
+ | `skandaLight` | `skanda-light` | The default SkandaDX light theme (same values as `defaultTheme`) |
108
+ | `emeraldBrand` | `emerald-brand` | Fresh greens, soft mint surfaces, tight corners |
109
+ | `midnightBrand` | `midnight-brand` | Dark theme — violet actions on deep indigo surfaces |
110
+ | `graphiteBrand` | `graphite` | Monochrome, shadcn/ui-zinc spirit: near-black actions, quiet grays |
111
+ | `materialBrand` | `material-you` | Material Design 3 inspired: tonal purple, Roboto, M3's slower emphasized motion |
112
+ | `antBrand` | `ant-daybreak` | Ant Design inspired: daybreak blue, compact corners |
113
+ | `fluentBrand` | `fluent` | Microsoft Fluent 2 inspired: communication blue, Segoe UI |
114
+ | `chakraBrand` | `chakra-teal` | Chakra UI inspired: teal actions, blue focus ring |
115
+ | `nordDark` | `nord-dark` | Dark theme — polar-night surfaces, frost blue actions |
116
+ | `draculaDark` | `dracula` | Dark theme — purple actions on the classic `#282a36` |
117
+ | `catppuccinLatte` | `catppuccin-latte` | Catppuccin Latte inspired: warm off-white surfaces, saturated blue actions |
118
+ | `catppuccinMocha` | `catppuccin-mocha` | Dark theme — Catppuccin Mocha inspired pastels on `#1e1e2e` |
119
+ | `solarizedLight` | `solarized-light` | Solarized Light inspired: cream `#fdf6e3` background, `#268bd2` blue actions |
120
+ | `solarizedDark` | `solarized-dark` | Dark theme — Solarized Dark inspired, deep `#002b36` background |
121
+ | `gruvboxDark` | `gruvbox-dark` | Dark theme — Gruvbox inspired retro warm browns, cream text |
122
+ | `rosePine` | `rose-pine` | Dark theme — Rosé Pine inspired iris purple actions on `#191724` |
123
+ | `everforestDark` | `everforest-dark` | Dark theme — Everforest inspired sage green on forest surfaces |
124
+ | `oneDark` | `one-dark` | Dark theme — Atom One Dark inspired, blue actions on `#282c34` |
125
+ | `primerLight` | `primer-light` | GitHub Primer light mode inspired: white canvas, `#0969da` accent, 6px corners |
126
+ | `primerDark` | `primer-dark` | Dark theme — GitHub Primer dark mode inspired, `#0d1117` canvas |
127
+ | `cupcakeLight` | `cupcake-light` | daisyUI cupcake inspired: pastel teal actions, creamy surfaces, extra-round corners |
128
+ | `synthwaveDark` | `synthwave-dark` | Dark theme — daisyUI synthwave inspired neon pink on deep indigo |
129
+ | `skandaDark` | `skanda-dark` | Dark counterpart of `skanda-light` — Skanda blue on deep slate |
130
+ | `emeraldDark` | `emerald-dark` | Dark counterpart of `emerald-brand` — lighter emeralds on deep green |
131
+ | `midnightLight` | `midnight-light` | Light counterpart of `midnight-brand` — violet on white |
132
+ | `graphiteDark` | `graphite-dark` | Dark counterpart of `graphite` — shadcn-style inverted zinc actions |
133
+ | `materialDark` | `material-you-dark` | Dark counterpart of `material-you` — M3 dark surfaces |
134
+ | `antDark` | `ant-dark` | Dark counterpart of `ant-daybreak` — Ant dark algorithm surfaces |
135
+ | `fluentDark` | `fluent-dark` | Dark counterpart of `fluent` — Fluent 2 dark neutrals |
136
+ | `chakraDark` | `chakra-teal-dark` | Dark counterpart of `chakra-teal` — Chakra gray.800 surfaces |
137
+ | `nordLight` | `nord-light` | Light counterpart of `nord-dark` — Nord Snow Storm |
138
+ | `draculaLight` | `dracula-light` | Light counterpart of `dracula` — near-white `#f8f8f2` canvas |
139
+ | `gruvboxLight` | `gruvbox-light` | Light counterpart of `gruvbox-dark` — cream `#fbf1c7` retro warmth |
140
+ | `rosePineDawn` | `rose-pine-dawn` | Light counterpart of `rose-pine` — the Dawn variant |
141
+ | `everforestLight` | `everforest-light` | Light counterpart of `everforest-dark` — sage greens on `#fdf6e3` |
142
+ | `oneLight` | `one-light` | Light counterpart of `one-dark` — Atom One Light |
143
+ | `cupcakeDark` | `cupcake-dark` | Dark counterpart of `cupcake-light` — pastel teal on deep plum |
144
+ | `synthwaveLight` | `synthwave-light` | Light counterpart of `synthwave-dark` — neon pink on pale lavender |
145
+
146
+ `themes` exports all thirty-eight as an array — handy for theme pickers and galleries:
147
+
148
+ ```ts
149
+ import { themes, applyTheme } from '@skdx/tokens';
150
+
151
+ themes.map((t) => t.name); // ['skanda-light', 'emerald-brand', ...]
152
+ applyTheme(themes.find((t) => t.name === 'nord-dark')!);
153
+ ```
154
+
155
+ Named imports from the package root (`import { nordDark } from '@skdx/tokens'`) already tree-shake in any modern bundler (Vite, Rollup, esbuild, Webpack 5 production) since the package is marked `sideEffects: false`. If you want a theme's data included in your build regardless of bundler, import it from its own subpath instead — each theme also ships as an individual entry point, matching its source filename in `src/themes/`:
156
+
157
+ ```ts
158
+ import { nordDark } from '@skdx/tokens/themes/NordDark';
159
+ ```
160
+
161
+ ## Creating your own theme
162
+
163
+ ### Override the default with `createTheme`
164
+
165
+ `createTheme(name, override, base?)` deep-merges a partial override (`ThemeOverride`) into a base theme (`defaultTheme` unless you pass another) and returns a complete `Theme`. You only specify what changes:
166
+
167
+ ```ts
168
+ import { createTheme } from '@skdx/tokens';
169
+
170
+ const acmeBrand = createTheme('acme-brand', {
171
+ colors: {
172
+ primary: { 500: '#e11d48', 600: '#be123c' }, // partial scale override is fine
173
+ semantic: { focusRing: '#e11d48' },
174
+ },
175
+ shadow: { strength: '1.4' }, // a touch heavier than the reference tint
176
+ });
177
+ ```
178
+
179
+ ### Write a full theme by hand
180
+
181
+ Since a theme is plain data, you can also author one from scratch (or copy one of the files in `src/themes/` as a starting point) and type it as `Theme` — the compiler guarantees no token is missing:
182
+
183
+ ```ts
184
+ import type { Theme } from '@skdx/tokens';
185
+
186
+ export const myTheme: Theme = { name: 'my-theme', colors: {/* ... */} /* ... */ };
187
+ ```
188
+
189
+ ## Rendering themes to CSS
190
+
191
+ ### `applyTheme(theme, element?)` — runtime
192
+
193
+ Sets all variables as inline styles on `element` (default `document.documentElement`) and sets `data-skdx-theme="<name>"` on it. Ideal for live previews and instant theme switching — no stylesheet involved.
194
+
195
+ ### `themeToCss(theme, options?)` — CSS string
196
+
197
+ Renders a theme as a CSS rule, ready to inject into a `<style>` tag or write to a file at build time:
198
+
199
+ ```ts
200
+ import { themeToCss, nordDark } from '@skdx/tokens';
201
+
202
+ themeToCss(nordDark);
203
+ // [data-skdx-theme="nord-dark"] {
204
+ // --skdx-color-primary-50: #eceff4;
205
+ // ... (104 variables)
206
+ // }
207
+ ```
208
+
209
+ By default variables are scoped to `[data-skdx-theme="<name>"]`, so multiple themes can coexist in one stylesheet and you switch by flipping one attribute:
210
+
211
+ ```ts
212
+ const style = document.createElement('style');
213
+ style.textContent = themes.map((t) => themeToCss(t)).join('\n');
214
+ document.head.appendChild(style);
215
+
216
+ document.documentElement.dataset.skdxTheme = 'dracula-dark'; // switch theme
217
+ ```
218
+
219
+ Pass `{ selector: ':root' }` to scope a single theme globally instead:
220
+
221
+ ```ts
222
+ themeToCss(defaultTheme, { selector: ':root' });
223
+ ```
224
+
225
+ ### `themeToCssVars(theme)` — flat variable map
226
+
227
+ Returns the raw `Record<string, string>` of variable names to values (`{ '--skdx-color-primary-500': '#3d6eef', ... }`). Useful for CSS-in-JS style objects or React inline styles:
228
+
229
+ ```tsx
230
+ <div style={themeToCssVars(emeraldBrand)}>...</div>
231
+ ```
232
+
233
+ ## Non-themed foundation tokens
234
+
235
+ The type scale, spacing, radii, shadow geometry and motion — plus stacking order, focus-ring
236
+ geometry, border thicknesses and the two structural opacities — aren't per-brand visual choices the
237
+ way color is. Every theme should behave the same way, so they're exported once as plain constants
238
+ rather than duplicated into all 38 `Theme` objects:
239
+
240
+ ```ts
241
+ import { typography, space, radii, zIndex, focusRing, borderWidth, opacity, breakpoints, foundationToCss } from '@skdx/tokens';
242
+
243
+ typography.fontSize.md; // '1rem'
244
+ space['4']; // '1rem'
245
+ radii.md; // '0.5rem'
246
+ zIndex.overlay; // 30 — coordinate Dialog/Popover backdrop stacking against this scale
247
+ focusRing.width; // '2px'
248
+ borderWidth.thin; // '1px'
249
+ opacity.disabled; // '0.5'
250
+ breakpoints.lg; // 1024 (a number — see below)
251
+
252
+ // Inject once. Without it the shared half of the --skdx-* surface does not exist.
253
+ document.head.appendChild(Object.assign(document.createElement('style'), { textContent: foundationToCss() }));
254
+ ```
255
+
256
+ `zIndex` scale (low → high): `base`, `dropdown`, `sticky`, `overlay`, `modal`, `popover`, `toast`, `max`.
257
+ `overlay` is a modal's scrim and `modal` the surface on top of it, so a `popover` opened from inside
258
+ a dialog still renders above it. `max` is the escape hatch for the one thing that must sit above
259
+ everything (a debug overlay, an "app is offline" banner) so app code never has to invent a bigger number.
260
+
261
+ `borderWidth` is `thin`/`thick`/`thicker` (1/2/4px) — a hairline, an emphasis weight, and a heavy
262
+ structural rule. `opacity` is `disabled` and `scrim` only: deliberately not a 0–100 ramp, since an
263
+ arbitrary ramp invents decisions nobody made while these two are real, repeated choices.
264
+
265
+ `breakpoints` is a **TypeScript export only** — `foundationToCss()` does not emit it. A custom
266
+ property can't be used in a `@media` condition (`@media (min-width: var(--x))` is invalid CSS), so a
267
+ `--skdx-breakpoint-*` variable would be a token that looks usable and isn't. Read it from JS, or inline
268
+ the number in your own build step.
269
+
270
+ ## Following the system color mode
271
+
272
+ `watchSystemMode()` applies a brand's light or dark theme from `prefers-color-scheme` and re-applies
273
+ it whenever the OS preference flips. It is browser-only — call it from a mounted effect — and returns
274
+ an unsubscribe function:
275
+
276
+ ```ts
277
+ import { watchSystemMode } from '@skdx/tokens';
278
+
279
+ const stop = watchSystemMode({ brand: 'nord', persist: true }); // persists 'light'/'dark' to localStorage
280
+ // on unmount:
281
+ stop();
282
+ ```
283
+
284
+ ### Preventing a flash of the wrong theme (SSR)
285
+
286
+ In a server-rendered app the first paint happens before any JavaScript module runs, so a dark-mode
287
+ visitor sees a flash of the light theme. `getThemeInitScript()` returns a small blocking snippet that
288
+ reads the persisted brand/mode, resolves `'system'` through `prefers-color-scheme`, and stamps
289
+ `data-skdx-theme` / `data-skdx-mode` on `<html>` before first paint. The brand → theme-name table is
290
+ baked into the returned string, so the snippet needs nothing at runtime.
291
+
292
+ It returns **bare JavaScript** (no `<script>` wrapper) so each framework can inject it its own way,
293
+ and it only sets attributes — the page's CSS must already contain a `[data-skdx-theme="…"]` block per
294
+ theme (see `themeToCss`).
295
+
296
+ ```tsx
297
+ // Next.js — app/layout.tsx
298
+ <head>
299
+ <script dangerouslySetInnerHTML={{ __html: getThemeInitScript() }} />
300
+ </head>
301
+ ```
302
+
303
+ ```ts
304
+ // Nuxt — nuxt.config.ts
305
+ app: { head: { script: [{ innerHTML: getThemeInitScript(), tagPosition: 'head' }] } }
306
+ ```
307
+
308
+ ```html
309
+ <!-- SvelteKit — src/app.html; replace the placeholder from a Vite plugin at build time -->
310
+ <head>
311
+ %sveltekit.head%
312
+ <script>%skdx.themeInit%</script>
313
+ </head>
314
+ ```
315
+
316
+ ```astro
317
+ <!-- Astro — src/layouts/Base.astro -->
318
+ <script is:inline set:html={getThemeInitScript()} />
319
+ ```
320
+
321
+ Storage keys default to `skdx-brand` and `skdx-mode` (exported as `BRAND_STORAGE_KEY` /
322
+ `MODE_STORAGE_KEY`) and are overridable via `getThemeInitScript({ brandKey, modeKey, fallbackBrand })`.
323
+
324
+ ## Validating contrast
325
+
326
+ `contrastRatio(hexA, hexB)` computes the WCAG relative-luminance contrast ratio between two colors
327
+ — useful for a theme builder to warn on an inaccessible custom theme before it ships:
328
+
329
+ ```ts
330
+ import { contrastRatio } from '@skdx/tokens';
331
+
332
+ contrastRatio(theme.colors.semantic.text, theme.colors.semantic.background) >= 4.5; // WCAG AA body text
333
+ ```
334
+
335
+ **Known gap:** `colors.semantic.textInverted` (body text meant for use on a filled `primary-600`
336
+ background, e.g. a solid button's label) currently falls below the 4.5:1 AA threshold in 10 of the
337
+ 22 bundled themes (`emerald-brand`, `dracula`, `solarized-light`, `solarized-dark`, `gruvbox-dark`,
338
+ `rose-pine`, `everforest-dark`, `one-dark`, `cupcake-light`, `synthwave-dark`) — their `primary-600`
339
+ swatch isn't dark/light enough for the paired `textInverted` value. This is tracked explicitly in
340
+ `src/utils/contrast.test.ts` (not silently skipped) pending a color pass on those themes' primary
341
+ scales; `cupcake-light`'s `focusRing` also falls short of the 3:1 non-text threshold.
342
+
343
+ ## CSS variable reference
344
+
345
+ Every variable is prefixed `--skdx-`. The names are unchanged by the colors-only split — only which
346
+ of the two blocks declares them moved.
347
+
348
+ From a `Theme`, at `[data-skdx-theme="…"]`:
349
+
350
+ | Theme path | CSS variable |
351
+ | ------------------------------ | ------------------------------------ |
352
+ | `colors.primary[500]` | `--skdx-color-primary-500` |
353
+ | `colors.semantic.surfaceHover` | `--skdx-color-semantic-surface-hover` |
354
+ | `shadow.color` | `--skdx-shadow-color` |
355
+ | `shadow.strength` | `--skdx-shadow-strength` |
356
+
357
+ From the foundation, at `:root`:
358
+
359
+ | Foundation path | CSS variable |
360
+ | --------------------------- | -------------------------------- |
361
+ | `typography.fontFamily` | `--skdx-font-family` |
362
+ | `typography.fontSize.md` | `--skdx-font-size-md` |
363
+ | `typography.fontWeight.semibold` | `--skdx-font-weight-semibold`|
364
+ | `typography.lineHeight.tight` | `--skdx-font-line-height-tight` |
365
+ | `typography.letterSpacing.wide` | `--skdx-font-letter-spacing-wide` |
366
+ | `space[4]` | `--skdx-space-4` |
367
+ | `radii.md` | `--skdx-radius-md` |
368
+ | `shadows.overlay` | `--skdx-shadow-overlay` |
369
+ | `motion.durationFast` | `--skdx-motion-duration-fast` |
370
+ | `motion.easing` | `--skdx-motion-easing` |
371
+
372
+ The pattern: section prefix (`color`, `font`, `space`, `radius`, `shadow`, `motion`) followed by the kebab-cased path within that group. When the path already starts with the section prefix (typography's `fontSize`, `fontFamily`, `fontWeight`), the prefix is not doubled — `--skdx-font-size-md`, not `--skdx-font-font-size-md`.
373
+
374
+ The two blocks never declare the same variable, so you can inject them in either order — except
375
+ for the six deviating themes, which re-declare `--skdx-font-family` / `--skdx-motion-*` on purpose
376
+ and win on specificity regardless of order.
377
+
378
+ A shadow resolves across both blocks:
379
+
380
+ ```css
381
+ /* :root, from foundationToCss() */
382
+ --skdx-shadow-md: 0 4px 6px -1px rgb(var(--skdx-shadow-color) / calc(0.1 * var(--skdx-shadow-strength))), …;
383
+ /* [data-skdx-theme="nord-dark"], from themeToCss() */
384
+ --skdx-shadow-color: 0 0 0;
385
+ --skdx-shadow-strength: 4.7;
386
+ ```
387
+
388
+ Custom-property substitution is lazy, so `--skdx-shadow-md` picks up whichever theme is active on the
389
+ element that uses it. `strength: 1` reproduces the original light-theme shadows exactly; dark themes
390
+ run around `5`. It's a look, not a measurement — tune it by eye.
391
+
392
+ ## API summary
393
+
394
+ | Export | Kind | Description |
395
+ | ------------------------------------- | ---------------- | ----------------------------------------------------------------- |
396
+ | `defaultTheme` | `Theme` | The reference theme (`skanda-light`) |
397
+ | `createTheme(name, override?, base?)` | function | Deep-merge a partial override into a base theme |
398
+ | `themeToCssVars(theme)` | function | Theme → flat `--skdx-*` variable map |
399
+ | `themeToCss(theme, options?)` | function | Theme → CSS rule string (scoped to `[data-skdx-theme]` by default) |
400
+ | `applyTheme(theme, element?)` | function | Set variables inline on an element at runtime |
401
+ | `skandaLight` … `synthwaveDark` | `Theme` × 38 | Built-in brand themes (19 brands × light/dark) |
402
+ | `watchSystemMode(options?)` | function | Apply a brand's theme from `prefers-color-scheme`, and on change |
403
+ | `getThemeInitScript(options?)` | function | Pre-paint snippet that stamps `data-skdx-theme`/`-mode` (no FOUC) |
404
+ | `zIndex` | `ZIndexScale` | Non-themed overlay stacking-order scale (`base`…`max`) |
405
+ | `focusRing` | `FocusRingScale` | Non-themed focus-ring `width`/`offset` |
406
+ | `borderWidth` | `BorderWidthScale` | Non-themed `thin`/`thick`/`thicker` border thicknesses |
407
+ | `opacity` | `OpacityScale` | Non-themed `disabled` and `scrim` opacities |
408
+ | `breakpoints` | `BreakpointScale` | Viewport widths in px — TS only, never emitted as CSS vars |
409
+ | `typography` / `space` / `radii` / `shadows` / `motion` | constants | The shared scales every theme inherits — not per-theme |
410
+ | `foundationToCss()` | function | The shared scales + `zIndex`/`focusRing`/`borderWidth`/`opacity` → a `:root` CSS block, plus its reduced-motion override |
411
+ | `foundationToCssVars()` | function | The same, as a flat `--skdx-*` variable map |
412
+ | `contrastRatio(hexA, hexB)` | function | WCAG relative-luminance contrast ratio between two colors |
413
+ | `themes` | `Theme[]` | All built-in themes |
414
+ | `Theme`, `ThemeOverride`, … | types | The full theme contract |
415
+
416
+ ## Package layout
417
+
418
+ ```text
419
+ packages/tokens/
420
+ ├── src/
421
+ │ ├── utils/
422
+ │ │ ├── theme.ts Theme contract (all interfaces)
423
+ │ │ └── toCss.ts themeToCssVars, themeToCss, applyTheme
424
+ │ ├── themes/
425
+ │ │ ├── DefaultTheme.ts defaultTheme + createTheme
426
+ │ │ ├── SkandaLight.ts one file per brand theme,
427
+ │ │ ├── … every value fully spelled out
428
+ │ │ └── index.ts barrel + `themes` array
429
+ │ └── index.ts public API
430
+ └── dist/ built ESM + CJS + .d.ts (tsup)
431
+ ```
432
+
433
+ ## Development
434
+
435
+ ```sh
436
+ pnpm --filter @skdx/tokens build # tsup → dist/
437
+ pnpm --filter @skdx/tokens test # vitest
438
+ pnpm --filter @skdx/tokens typecheck # tsc --noEmit
439
+ ```
package/dist/foundation.css ADDED
@@ -0,0 +1 @@
1
+ :root{--skdx-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--skdx-font-family-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;--skdx-font-size-xs: .75rem;--skdx-font-size-sm: .875rem;--skdx-font-size-md: 1rem;--skdx-font-size-lg: 1.125rem;--skdx-font-size-xl: 1.25rem;--skdx-font-size-2xl: 1.5rem;--skdx-font-size-3xl: 1.875rem;--skdx-font-weight-regular: 400;--skdx-font-weight-medium: 500;--skdx-font-weight-semibold: 600;--skdx-font-weight-bold: 700;--skdx-font-line-height-tight: 1.25;--skdx-font-line-height-snug: 1.43;--skdx-font-line-height-normal: 1.5;--skdx-font-line-height-relaxed: 1.75;--skdx-font-letter-spacing-tight: -.015em;--skdx-font-letter-spacing-normal: 0em;--skdx-font-letter-spacing-wide: .025em;--skdx-font-letter-spacing-wider: .05em;--skdx-space-1: .25rem;--skdx-space-2: .5rem;--skdx-space-3: .75rem;--skdx-space-4: 1rem;--skdx-space-5: 1.25rem;--skdx-space-6: 1.5rem;--skdx-space-8: 2rem;--skdx-space-10: 2.5rem;--skdx-space-12: 3rem;--skdx-space-16: 4rem;--skdx-radius-sm: .25rem;--skdx-radius-inner: .375rem;--skdx-radius-md: .5rem;--skdx-radius-lg: .75rem;--skdx-radius-xl: 1rem;--skdx-radius-full: 9999px;--skdx-shadow-sm: 0 1px 2px 0 rgb(var(--skdx-shadow-color) / calc(.05 * var(--skdx-shadow-strength)));--skdx-shadow-md: 0 4px 6px -1px rgb(var(--skdx-shadow-color) / calc(.1 * var(--skdx-shadow-strength))), 0 2px 4px -2px rgb(var(--skdx-shadow-color) / calc(.1 * var(--skdx-shadow-strength)));--skdx-shadow-lg: 0 10px 15px -3px rgb(var(--skdx-shadow-color) / calc(.1 * var(--skdx-shadow-strength))), 0 4px 6px -4px rgb(var(--skdx-shadow-color) / calc(.1 * var(--skdx-shadow-strength)));--skdx-shadow-overlay: 0 25px 50px -12px rgb(var(--skdx-shadow-color) / calc(.25 * var(--skdx-shadow-strength)));--skdx-motion-duration-instant: 0ms;--skdx-motion-duration-fast: .1s;--skdx-motion-duration-normal: .2s;--skdx-motion-duration-slow: .3s;--skdx-motion-easing: cubic-bezier(.16, 1, .3, 1);--skdx-motion-easing-exit: cubic-bezier(.4, 0, 1, 1);--skdx-motion-easing-steady: cubic-bezier(.4, 0, .2, 1);--skdx-motion-easing-linear: linear;--skdx-motion-stagger-tight: 4ms;--skdx-motion-stagger-loose: 40ms;--skdx-z-index-base: 0;--skdx-z-index-dropdown: 10;--skdx-z-index-sticky: 20;--skdx-z-index-overlay: 30;--skdx-z-index-modal: 35;--skdx-z-index-popover: 40;--skdx-z-index-toast: 50;--skdx-z-index-max: 9999;--skdx-focus-ring-width: 2px;--skdx-focus-ring-offset: 2px;--skdx-focus-ring-offset-inset: calc(-1 * var(--skdx-focus-ring-width));--skdx-border-width-thin: 1px;--skdx-border-width-thick: 2px;--skdx-border-width-thicker: 4px;--skdx-opacity-disabled: .5;--skdx-opacity-scrim: .6;--skdx-control-height-sm: 1.875rem;--skdx-control-height-md: 2.25rem;--skdx-control-height-lg: 2.625rem;--skdx-control-height-compact: 2rem;--skdx-control-padding-sm: .625rem;--skdx-control-padding-md: var(--skdx-space-3);--skdx-control-padding-lg: var(--skdx-space-4);--skdx-control-gap-sm: var(--skdx-space-1);--skdx-control-gap-md: var(--skdx-space-2);--skdx-control-gap-lg: var(--skdx-space-2);--skdx-icon-size-sm: 1rem;--skdx-icon-size-md: 1.25rem;--skdx-icon-size-lg: 1.5rem;--skdx-indicator-size-sm: 1rem;--skdx-indicator-size-md: 1.25rem;--skdx-indicator-size-lg: 1.5rem;--skdx-item-height-sm: 1.75rem;--skdx-item-height-md: 2.25rem;--skdx-item-height-lg: 2.5rem;--skdx-item-gap: 2px;--skdx-overlay-padding: var(--skdx-space-1);--skdx-overlay-radius: var(--skdx-radius-lg);--skdx-overlay-min-width: 7.5rem;--skdx-field-gap: var(--skdx-space-1);--skdx-field-label-gap: var(--skdx-space-1);--skdx-target-min: 24px}@media(prefers-reduced-motion:reduce){:root{--skdx-motion-duration-instant: 0ms;--skdx-motion-duration-fast: 0ms;--skdx-motion-duration-normal: 0ms;--skdx-motion-duration-slow: 0ms;--skdx-motion-stagger-tight: 0ms;--skdx-motion-stagger-loose: 0ms}}@media(pointer:coarse){:root{--skdx-control-height-sm: 2.25rem;--skdx-control-height-md: 2.75rem;--skdx-control-height-lg: 3rem;--skdx-control-height-compact: 2.75rem;--skdx-item-height-sm: 2.25rem;--skdx-item-height-md: 2.75rem;--skdx-item-height-lg: 3rem;--skdx-target-min: 44px}}:root{--skdx-color-surface-inverse: var(--skdx-color-neutral-900);--skdx-color-text-on-inverse: var(--skdx-color-neutral-50);--skdx-color-surface-page: var(--skdx-color-semantic-background);--skdx-color-surface-default: var(--skdx-color-semantic-surface);--skdx-color-surface-hover: var(--skdx-color-semantic-surface-hover);--skdx-color-surface-raised: var(--skdx-color-semantic-background);--skdx-color-surface-sunken: var(--skdx-color-semantic-surface);--skdx-color-surface-pressed: var(--skdx-color-neutral-200);--skdx-color-surface-selected: var(--skdx-color-primary-50);--skdx-color-surface-disabled: var(--skdx-color-neutral-100);--skdx-color-surface-overlay: var(--skdx-color-semantic-overlay);--skdx-color-text-default: var(--skdx-color-semantic-text);--skdx-color-text-muted: var(--skdx-color-semantic-text-muted);--skdx-color-text-on-accent: var(--skdx-color-semantic-text-inverted);--skdx-color-text-accent: var(--skdx-color-primary-700);--skdx-color-text-disabled: var(--skdx-color-neutral-600);--skdx-color-text-placeholder: var(--skdx-color-semantic-text-muted);--skdx-color-text-danger: var(--skdx-color-danger-700);--skdx-color-text-success: var(--skdx-color-success-800);--skdx-color-text-warning: var(--skdx-color-warning-900);--skdx-color-text-info: var(--skdx-color-primary-700);--skdx-color-border-default: var(--skdx-color-semantic-border);--skdx-color-border-strong: var(--skdx-color-semantic-border-strong);--skdx-color-border-subtle: var(--skdx-color-neutral-200);--skdx-color-border-accent: var(--skdx-color-primary-600);--skdx-color-border-disabled: var(--skdx-color-neutral-200);--skdx-color-border-danger: var(--skdx-color-danger-600);--skdx-color-border-success: var(--skdx-color-success-600);--skdx-color-border-warning: var(--skdx-color-warning-600);--skdx-color-action-primary-bg: var(--skdx-color-primary-600);--skdx-color-action-primary-bg-hover: var(--skdx-color-primary-600);--skdx-color-action-primary-bg-pressed: var(--skdx-color-primary-600);--skdx-color-action-primary-border-hover: var(--skdx-color-primary-800);--skdx-color-action-primary-text: var(--skdx-color-semantic-text-inverted);--skdx-color-action-primary-border: var(--skdx-color-primary-600);--skdx-color-action-secondary-bg: var(--skdx-color-semantic-surface);--skdx-color-action-secondary-bg-hover: var(--skdx-color-semantic-surface-hover);--skdx-color-action-secondary-bg-pressed: var(--skdx-color-neutral-300);--skdx-color-action-secondary-text: var(--skdx-color-semantic-text);--skdx-color-action-secondary-border: var(--skdx-color-semantic-border);--skdx-color-action-outline-text: var(--skdx-color-semantic-text);--skdx-color-action-outline-border: var(--skdx-color-semantic-border-strong);--skdx-color-action-outline-bg-hover: var(--skdx-color-semantic-surface-hover);--skdx-color-action-outline-bg-pressed: var(--skdx-color-neutral-200);--skdx-color-action-ghost-text: var(--skdx-color-semantic-text);--skdx-color-action-ghost-bg-hover: var(--skdx-color-semantic-surface-hover);--skdx-color-action-ghost-bg-pressed: var(--skdx-color-neutral-200);--skdx-color-action-danger-bg: var(--skdx-color-danger-700);--skdx-color-action-danger-bg-hover: var(--skdx-color-danger-800);--skdx-color-action-danger-bg-pressed: var(--skdx-color-danger-900);--skdx-color-action-danger-text: var(--skdx-color-danger-50);--skdx-color-action-danger-border: var(--skdx-color-danger-700);--skdx-color-action-disabled-bg: var(--skdx-color-neutral-100);--skdx-color-action-disabled-text: var(--skdx-color-neutral-700);--skdx-color-action-disabled-border: var(--skdx-color-neutral-200);--skdx-color-field-bg: var(--skdx-color-semantic-background);--skdx-color-field-bg-hover: var(--skdx-color-semantic-surface-hover);--skdx-color-field-bg-disabled: var(--skdx-color-neutral-100);--skdx-color-field-bg-readonly: var(--skdx-color-neutral-50);--skdx-color-field-border: var(--skdx-color-semantic-border-strong);--skdx-color-field-border-hover: var(--skdx-color-neutral-500);--skdx-color-field-border-focus: var(--skdx-color-primary-600);--skdx-color-field-border-invalid: var(--skdx-color-danger-700);--skdx-color-field-text: var(--skdx-color-semantic-text);--skdx-color-selection-bg: var(--skdx-color-primary-600);--skdx-color-selection-bg-hover: var(--skdx-color-primary-600);--skdx-color-selection-mark: var(--skdx-color-semantic-text-inverted);--skdx-color-highlight-bg: var(--skdx-color-semantic-surface-hover);--skdx-color-highlight-text: var(--skdx-color-semantic-text);--skdx-color-status-info-bg: var(--skdx-color-primary-50);--skdx-color-status-info-border: var(--skdx-color-primary-200);--skdx-color-status-info-text: var(--skdx-color-primary-800);--skdx-color-status-info-icon: var(--skdx-color-primary-600);--skdx-color-status-success-bg: var(--skdx-color-success-50);--skdx-color-status-success-border: var(--skdx-color-success-200);--skdx-color-status-success-text: var(--skdx-color-success-800);--skdx-color-status-success-icon: var(--skdx-color-success-600);--skdx-color-status-warning-bg: var(--skdx-color-warning-50);--skdx-color-status-warning-border: var(--skdx-color-warning-200);--skdx-color-status-warning-text: var(--skdx-color-warning-800);--skdx-color-status-warning-icon: var(--skdx-color-warning-600);--skdx-color-status-danger-bg: var(--skdx-color-danger-50);--skdx-color-status-danger-border: var(--skdx-color-danger-200);--skdx-color-status-danger-text: var(--skdx-color-danger-800);--skdx-color-status-danger-icon: var(--skdx-color-danger-600);--skdx-color-status-neutral-bg: var(--skdx-color-semantic-surface);--skdx-color-status-neutral-border: var(--skdx-color-semantic-border);--skdx-color-status-neutral-text: var(--skdx-color-semantic-text);--skdx-color-status-neutral-icon: var(--skdx-color-semantic-text-muted);--skdx-color-focus-ring: var(--skdx-color-semantic-focus-ring);--skdx-color-focus-ring-offset: var(--skdx-color-semantic-background);--skdx-color-separator: var(--skdx-color-semantic-border);--skdx-color-track: var(--skdx-color-neutral-100);--skdx-color-track-fill: var(--skdx-color-primary-600);--skdx-color-skeleton: var(--skdx-color-neutral-200);--skdx-color-skeleton-sheen: var(--skdx-color-neutral-100)}
package/dist/index.cjs ADDED
@@ -0,0 +1 @@
1
+ "use strict";var m=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var g=(s,o)=>{for(var h in o)m(s,h,{get:o[h],enumerable:!0})},y=(s,o,h,d)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of T(o))!k.call(s,n)&&n!==h&&m(s,n,{get:()=>o[n],enumerable:!(d=l(o,n))||d.enumerable});return s};var D=s=>y(m({},"__esModule",{value:!0}),s);var C={};g(C,{BRAND_STORAGE_KEY:()=>t.BRAND_STORAGE_KEY,MODE_STORAGE_KEY:()=>t.MODE_STORAGE_KEY,aliasesToCss:()=>r.aliasesToCss,aliasesToCssVars:()=>r.aliasesToCssVars,antBrand:()=>e.antBrand,antDark:()=>e.antDark,applyTheme:()=>i.applyTheme,borderWidth:()=>a.borderWidth,brands:()=>e.brands,breakpoints:()=>a.breakpoints,catppuccinLatte:()=>e.catppuccinLatte,catppuccinMocha:()=>e.catppuccinMocha,chakraBrand:()=>e.chakraBrand,chakraDark:()=>e.chakraDark,coarsePointerToCssVars:()=>a.coarsePointerToCssVars,colorAliases:()=>r.colorAliases,contrastRatio:()=>c.contrastRatio,controls:()=>a.controls,controlsCoarse:()=>a.controlsCoarse,createTheme:()=>p.createTheme,cupcakeDark:()=>e.cupcakeDark,cupcakeLight:()=>e.cupcakeLight,darkAliasesToCss:()=>r.darkAliasesToCss,darkColorAliases:()=>r.darkColorAliases,defaultBrand:()=>e.defaultBrand,defaultTheme:()=>p.defaultTheme,draculaDark:()=>e.draculaDark,draculaLight:()=>e.draculaLight,emeraldBrand:()=>e.emeraldBrand,emeraldDark:()=>e.emeraldDark,everforestDark:()=>e.everforestDark,everforestLight:()=>e.everforestLight,fluentBrand:()=>e.fluentBrand,fluentDark:()=>e.fluentDark,focusRing:()=>a.focusRing,foundationToCss:()=>a.foundationToCss,foundationToCssVars:()=>a.foundationToCssVars,getBrand:()=>e.getBrand,getBrandByThemeName:()=>e.getBrandByThemeName,getThemeInitScript:()=>t.getThemeInitScript,graphiteBrand:()=>e.graphiteBrand,graphiteDark:()=>e.graphiteDark,gruvboxDark:()=>e.gruvboxDark,gruvboxLight:()=>e.gruvboxLight,materialBrand:()=>e.materialBrand,materialDark:()=>e.materialDark,midnightBrand:()=>e.midnightBrand,midnightLight:()=>e.midnightLight,motion:()=>a.motion,nordDark:()=>e.nordDark,nordLight:()=>e.nordLight,oneDark:()=>e.oneDark,oneLight:()=>e.oneLight,opacity:()=>a.opacity,primerDark:()=>e.primerDark,primerLight:()=>e.primerLight,radii:()=>a.radii,rosePine:()=>e.rosePine,rosePineDawn:()=>e.rosePineDawn,shadows:()=>a.shadows,skandaDark:()=>e.skandaDark,skandaLight:()=>e.skandaLight,solarizedDark:()=>e.solarizedDark,solarizedLight:()=>e.solarizedLight,space:()=>a.space,synthwaveDark:()=>e.synthwaveDark,synthwaveLight:()=>e.synthwaveLight,themeToCss:()=>i.themeToCss,themeToCssVars:()=>i.themeToCssVars,themes:()=>e.themes,typography:()=>a.typography,watchSystemMode:()=>t.watchSystemMode,zIndex:()=>a.zIndex});module.exports=D(C);var p=require("./themes/DefaultTheme.cjs"),i=require("./utils/toCss.cjs"),r=require("./utils/aliases.cjs"),a=require("./utils/foundation.cjs"),c=require("./utils/contrast.cjs"),t=require("./utils/mode.cjs"),e=require("./themes/index.cjs");0&&(module.exports={BRAND_STORAGE_KEY,MODE_STORAGE_KEY,aliasesToCss,aliasesToCssVars,antBrand,antDark,applyTheme,borderWidth,brands,breakpoints,catppuccinLatte,catppuccinMocha,chakraBrand,chakraDark,coarsePointerToCssVars,colorAliases,contrastRatio,controls,controlsCoarse,createTheme,cupcakeDark,cupcakeLight,darkAliasesToCss,darkColorAliases,defaultBrand,defaultTheme,draculaDark,draculaLight,emeraldBrand,emeraldDark,everforestDark,everforestLight,fluentBrand,fluentDark,focusRing,foundationToCss,foundationToCssVars,getBrand,getBrandByThemeName,getThemeInitScript,graphiteBrand,graphiteDark,gruvboxDark,gruvboxLight,materialBrand,materialDark,midnightBrand,midnightLight,motion,nordDark,nordLight,oneDark,oneLight,opacity,primerDark,primerLight,radii,rosePine,rosePineDawn,shadows,skandaDark,skandaLight,solarizedDark,solarizedLight,space,synthwaveDark,synthwaveLight,themeToCss,themeToCssVars,themes,typography,watchSystemMode,zIndex});
package/dist/index.d.cts ADDED
@@ -0,0 +1,8 @@
1
+ export type { Theme, ThemeColorMode, ThemeOverride, ThemeColors, ColorScale, SemanticColors, ThemeTypography, ThemeSpace, ThemeRadii, ThemeControls, ThemeControlsCoarse, ThemeShadows, ThemeShadowColor, ThemeTypographyDeviation, ThemeMotionDeviation, ThemeMotion, } from './utils/theme.cjs';
2
+ export { defaultTheme, createTheme } from './themes/DefaultTheme.cjs';
3
+ export { themeToCss, themeToCssVars, applyTheme, type ThemeToCssOptions } from './utils/toCss.cjs';
4
+ export { aliasesToCss, aliasesToCssVars, colorAliases, darkAliasesToCss, darkColorAliases, } from './utils/aliases.cjs';
5
+ export { typography, space, radii, shadows, motion, zIndex, focusRing, borderWidth, opacity, breakpoints, controls, controlsCoarse, foundationToCss, foundationToCssVars, coarsePointerToCssVars, type ZIndexScale, type FocusRingScale, type BorderWidthScale, type OpacityScale, type BreakpointScale, } from './utils/foundation.cjs';
6
+ export { contrastRatio } from './utils/contrast.cjs';
7
+ export { watchSystemMode, getThemeInitScript, MODE_STORAGE_KEY, BRAND_STORAGE_KEY, type WatchSystemModeOptions, type ThemeInitScriptOptions, } from './utils/mode.cjs';
8
+ export { skandaLight, emeraldBrand, midnightBrand, graphiteBrand, materialBrand, antBrand, fluentBrand, chakraBrand, nordDark, draculaDark, catppuccinLatte, catppuccinMocha, solarizedLight, solarizedDark, gruvboxDark, rosePine, everforestDark, oneDark, primerLight, primerDark, cupcakeLight, synthwaveDark, skandaDark, emeraldDark, midnightLight, graphiteDark, materialDark, antDark, fluentDark, chakraDark, nordLight, draculaLight, gruvboxLight, rosePineDawn, everforestLight, oneLight, cupcakeDark, synthwaveLight, themes, brands, defaultBrand, getBrand, getBrandByThemeName, type Brand, } from './themes/index.cjs';
package/dist/index.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ export type { Theme, ThemeColorMode, ThemeOverride, ThemeColors, ColorScale, SemanticColors, ThemeTypography, ThemeSpace, ThemeRadii, ThemeControls, ThemeControlsCoarse, ThemeShadows, ThemeShadowColor, ThemeTypographyDeviation, ThemeMotionDeviation, ThemeMotion, } from './utils/theme.js';
2
+ export { defaultTheme, createTheme } from './themes/DefaultTheme.js';
3
+ export { themeToCss, themeToCssVars, applyTheme, type ThemeToCssOptions } from './utils/toCss.js';
4
+ export { aliasesToCss, aliasesToCssVars, colorAliases, darkAliasesToCss, darkColorAliases, } from './utils/aliases.js';
5
+ export { typography, space, radii, shadows, motion, zIndex, focusRing, borderWidth, opacity, breakpoints, controls, controlsCoarse, foundationToCss, foundationToCssVars, coarsePointerToCssVars, type ZIndexScale, type FocusRingScale, type BorderWidthScale, type OpacityScale, type BreakpointScale, } from './utils/foundation.js';
6
+ export { contrastRatio } from './utils/contrast.js';
7
+ export { watchSystemMode, getThemeInitScript, MODE_STORAGE_KEY, BRAND_STORAGE_KEY, type WatchSystemModeOptions, type ThemeInitScriptOptions, } from './utils/mode.js';
8
+ export { skandaLight, emeraldBrand, midnightBrand, graphiteBrand, materialBrand, antBrand, fluentBrand, chakraBrand, nordDark, draculaDark, catppuccinLatte, catppuccinMocha, solarizedLight, solarizedDark, gruvboxDark, rosePine, everforestDark, oneDark, primerLight, primerDark, cupcakeLight, synthwaveDark, skandaDark, emeraldDark, midnightLight, graphiteDark, materialDark, antDark, fluentDark, chakraDark, nordLight, draculaLight, gruvboxLight, rosePineDawn, everforestLight, oneLight, cupcakeDark, synthwaveLight, themes, brands, defaultBrand, getBrand, getBrandByThemeName, type Brand, } from './themes/index.js';
package/dist/index.js ADDED
@@ -0,0 +1 @@
1
+ import{defaultTheme as r,createTheme as o}from"./themes/DefaultTheme.js";import{themeToCss as s,themeToCssVars as i,applyTheme as n}from"./utils/toCss.js";import{aliasesToCss as p,aliasesToCssVars as m,colorAliases as d,darkAliasesToCss as c,darkColorAliases as l}from"./utils/aliases.js";import{typography as k,space as g,radii as y,shadows as D,motion as C,zIndex as f,focusRing as u,borderWidth as S,opacity as B,breakpoints as x,controls as L,controlsCoarse as v,foundationToCss as O,foundationToCssVars as w,coarsePointerToCssVars as M}from"./utils/foundation.js";import{contrastRatio as A}from"./utils/contrast.js";import{watchSystemMode as E,getThemeInitScript as I,MODE_STORAGE_KEY as V,BRAND_STORAGE_KEY as _}from"./utils/mode.js";import{skandaLight as P,emeraldBrand as W,midnightBrand as G,graphiteBrand as K,materialBrand as N,antBrand as Y,fluentBrand as F,chakraBrand as Z,nordDark as j,draculaDark as q,catppuccinLatte as H,catppuccinMocha as J,solarizedLight as Q,solarizedDark as U,gruvboxDark as X,rosePine as $,everforestDark as ee,oneDark as ae,primerLight as re,primerDark as oe,cupcakeLight as te,synthwaveDark as se,skandaDark as ie,emeraldDark as ne,midnightLight as he,graphiteDark as pe,materialDark as me,antDark as de,fluentDark as ce,chakraDark as le,nordLight as Te,draculaLight as ke,gruvboxLight as ge,rosePineDawn as ye,everforestLight as De,oneLight as Ce,cupcakeDark as fe,synthwaveLight as ue,themes as Se,brands as Be,defaultBrand as xe,getBrand as Le,getBrandByThemeName as ve}from"./themes/index.js";export{_ as BRAND_STORAGE_KEY,V as MODE_STORAGE_KEY,p as aliasesToCss,m as aliasesToCssVars,Y as antBrand,de as antDark,n as applyTheme,S as borderWidth,Be as brands,x as breakpoints,H as catppuccinLatte,J as catppuccinMocha,Z as chakraBrand,le as chakraDark,M as coarsePointerToCssVars,d as colorAliases,A as contrastRatio,L as controls,v as controlsCoarse,o as createTheme,fe as cupcakeDark,te as cupcakeLight,c as darkAliasesToCss,l as darkColorAliases,xe as defaultBrand,r as defaultTheme,q as draculaDark,ke as draculaLight,W as emeraldBrand,ne as emeraldDark,ee as everforestDark,De as everforestLight,F as fluentBrand,ce as fluentDark,u as focusRing,O as foundationToCss,w as foundationToCssVars,Le as getBrand,ve as getBrandByThemeName,I as getThemeInitScript,K as graphiteBrand,pe as graphiteDark,X as gruvboxDark,ge as gruvboxLight,N as materialBrand,me as materialDark,G as midnightBrand,he as midnightLight,C as motion,j as nordDark,Te as nordLight,ae as oneDark,Ce as oneLight,B as opacity,oe as primerDark,re as primerLight,y as radii,$ as rosePine,ye as rosePineDawn,D as shadows,ie as skandaDark,P as skandaLight,U as solarizedDark,Q as solarizedLight,g as space,se as synthwaveDark,ue as synthwaveLight,s as themeToCss,i as themeToCssVars,Se as themes,k as typography,E as watchSystemMode,f as zIndex};
package/dist/themes/AntBrand.cjs ADDED
@@ -0,0 +1 @@
1
+ "use strict";var r=Object.defineProperty;var t=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var o=Object.prototype.hasOwnProperty;var n=(e,f)=>{for(var d in f)r(e,d,{get:f[d],enumerable:!0})},s=(e,f,d,c)=>{if(f&&typeof f=="object"||typeof f=="function")for(let a of b(f))!o.call(e,a)&&a!==d&&r(e,a,{get:()=>f[a],enumerable:!(c=t(f,a))||c.enumerable});return e};var i=e=>s(r({},"__esModule",{value:!0}),e);var g={};n(g,{antBrand:()=>m});module.exports=i(g);var m={name:"ant-daybreak",mode:"light",colors:{primary:{50:"#e6f4ff",100:"#bae0ff",200:"#91caff",300:"#69b1ff",400:"#4096ff",500:"#1677ff",600:"#0958d9",700:"#003eb3",800:"#002c8c",900:"#001d66",950:"#001141"},neutral:{50:"#f8fafc",100:"#f1f5f9",200:"#e2e8f0",300:"#cbd5e1",400:"#94a3b8",500:"#64748b",600:"#475569",700:"#334155",800:"#1e293b",900:"#0f172a",950:"#020617"},success:{50:"#f6ffed",100:"#d9f7be",200:"#b7eb8f",300:"#95de64",400:"#73d13d",500:"#52c41a",600:"#389e0d",700:"#237804",800:"#135200",900:"#092b00",950:"#051f00"},warning:{50:"#fffbe6",100:"#fff1b8",200:"#ffe58f",300:"#ffd666",400:"#ffc53d",500:"#faad14",600:"#d48806",700:"#ad6800",800:"#874d00",900:"#613400",950:"#422400"},danger:{50:"#fff1f0",100:"#ffccc7",200:"#ffa39e",300:"#ff7875",400:"#ff4d4f",500:"#f5222d",600:"#cf1322",700:"#a8071a",800:"#820014",900:"#5c0011",950:"#3d000b"},semantic:{background:"#ffffff",surface:"#fafafa",surfaceHover:"#f5f5f5",overlay:"rgb(0 0 0 / 0.45)",text:"#1f1f1f",textMuted:"#737373",textInverted:"#ffffff",border:"#d9d9d9",borderStrong:"#919191",focusRing:"#1677ff"}},shadow:{color:"2 6 23",strength:"1"},motion:{easing:"cubic-bezier(0.645, 0.045, 0.355, 1)"}};0&&(module.exports={antBrand});
package/dist/themes/AntBrand.d.cts ADDED
@@ -0,0 +1,3 @@
1
+ import type { Theme } from '../utils/theme.cjs';
2
+ /** Ant Design inspired: daybreak blue, compact corners, signature status palettes. @public */
3
+ export declare const antBrand: Theme;
package/dist/themes/AntBrand.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import type { Theme } from '../utils/theme.js';
2
+ /** Ant Design inspired: daybreak blue, compact corners, signature status palettes. @public */
3
+ export declare const antBrand: Theme;
package/dist/themes/AntBrand.js ADDED
@@ -0,0 +1 @@
1
+ var f={name:"ant-daybreak",mode:"light",colors:{primary:{50:"#e6f4ff",100:"#bae0ff",200:"#91caff",300:"#69b1ff",400:"#4096ff",500:"#1677ff",600:"#0958d9",700:"#003eb3",800:"#002c8c",900:"#001d66",950:"#001141"},neutral:{50:"#f8fafc",100:"#f1f5f9",200:"#e2e8f0",300:"#cbd5e1",400:"#94a3b8",500:"#64748b",600:"#475569",700:"#334155",800:"#1e293b",900:"#0f172a",950:"#020617"},success:{50:"#f6ffed",100:"#d9f7be",200:"#b7eb8f",300:"#95de64",400:"#73d13d",500:"#52c41a",600:"#389e0d",700:"#237804",800:"#135200",900:"#092b00",950:"#051f00"},warning:{50:"#fffbe6",100:"#fff1b8",200:"#ffe58f",300:"#ffd666",400:"#ffc53d",500:"#faad14",600:"#d48806",700:"#ad6800",800:"#874d00",900:"#613400",950:"#422400"},danger:{50:"#fff1f0",100:"#ffccc7",200:"#ffa39e",300:"#ff7875",400:"#ff4d4f",500:"#f5222d",600:"#cf1322",700:"#a8071a",800:"#820014",900:"#5c0011",950:"#3d000b"},semantic:{background:"#ffffff",surface:"#fafafa",surfaceHover:"#f5f5f5",overlay:"rgb(0 0 0 / 0.45)",text:"#1f1f1f",textMuted:"#737373",textInverted:"#ffffff",border:"#d9d9d9",borderStrong:"#919191",focusRing:"#1677ff"}},shadow:{color:"2 6 23",strength:"1"},motion:{easing:"cubic-bezier(0.645, 0.045, 0.355, 1)"}};export{f as antBrand};
package/dist/themes/AntDark.cjs ADDED
@@ -0,0 +1 @@
1
+ "use strict";var t=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var s=(r,e)=>{for(var f in e)t(r,f,{get:e[f],enumerable:!0})},u=(r,e,f,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of b(e))!m.call(r,a)&&a!==f&&t(r,a,{get:()=>e[a],enumerable:!(c=n(e,a))||c.enumerable});return r};var g=r=>u(t({},"__esModule",{value:!0}),r);var k={};s(k,{antDark:()=>i});module.exports=g(k);var o=require("./AntBrand.cjs"),d=require("./DefaultTheme.cjs"),i=(0,d.createTheme)("ant-dark",{mode:"dark",colors:{primary:{50:"#f3f9fe",100:"#e4f1fc",200:"#c5e1f8",300:"#9ecdf4",400:"#7abaef",500:"#5baaec",600:"#3c9ae8",700:"#327dbd",800:"#2a669a",900:"#23527c",950:"#18324c"},neutral:{200:"#303030",300:"#424242",800:"#1f1f1f",900:"#141414",950:"#0a0a0a"},semantic:{background:"#141414",surface:"#1f1f1f",surfaceHover:"#262626",overlay:"rgb(0 0 0 / 0.65)",text:"#d9d9d9",textMuted:"#8c8c8c",textInverted:"#141414",border:"#303030",borderStrong:"#6b6b6b",focusRing:"#4096ff"}},shadow:{color:"0 0 0",strength:"4.7"}},o.antBrand);0&&(module.exports={antDark});
package/dist/themes/AntDark.d.cts ADDED
@@ -0,0 +1,12 @@
1
+ /**
2
+ * Dark counterpart of `ant-daybreak`, following Ant Design's dark
3
+ * algorithm surfaces (#141414 / #1f1f1f) and daybreak-blue accents.
4
+ *
5
+ * The accent comes from Ant's *dark* daybreak ramp rather than the light
6
+ * one — Ant's dark algorithm re-derives the palette against #141414, and
7
+ * the light ramp's blue-7 lands at 2.99:1 there. This takes the dark ramp's
8
+ * seventh step, which clears the gate with dark ink on the filled state.
9
+ *
10
+ * @public
11
+ */
12
+ export declare const antDark: import("../index.cjs").Theme;
package/dist/themes/AntDark.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ /**
2
+ * Dark counterpart of `ant-daybreak`, following Ant Design's dark
3
+ * algorithm surfaces (#141414 / #1f1f1f) and daybreak-blue accents.
4
+ *
5
+ * The accent comes from Ant's *dark* daybreak ramp rather than the light
6
+ * one — Ant's dark algorithm re-derives the palette against #141414, and
7
+ * the light ramp's blue-7 lands at 2.99:1 there. This takes the dark ramp's
8
+ * seventh step, which clears the gate with dark ink on the filled state.
9
+ *
10
+ * @public
11
+ */
12
+ export declare const antDark: import("../index.js").Theme;
package/dist/themes/AntDark.js ADDED
@@ -0,0 +1 @@
1
+ import{antBrand as e}from"./AntBrand.js";import{createTheme as r}from"./DefaultTheme.js";var t=r("ant-dark",{mode:"dark",colors:{primary:{50:"#f3f9fe",100:"#e4f1fc",200:"#c5e1f8",300:"#9ecdf4",400:"#7abaef",500:"#5baaec",600:"#3c9ae8",700:"#327dbd",800:"#2a669a",900:"#23527c",950:"#18324c"},neutral:{200:"#303030",300:"#424242",800:"#1f1f1f",900:"#141414",950:"#0a0a0a"},semantic:{background:"#141414",surface:"#1f1f1f",surfaceHover:"#262626",overlay:"rgb(0 0 0 / 0.65)",text:"#d9d9d9",textMuted:"#8c8c8c",textInverted:"#141414",border:"#303030",borderStrong:"#6b6b6b",focusRing:"#4096ff"}},shadow:{color:"0 0 0",strength:"4.7"}},e);export{t as antDark};
package/dist/themes/CatppuccinLatte.cjs ADDED
@@ -0,0 +1 @@
1
+ "use strict";var a=Object.defineProperty;var r=Object.getOwnPropertyDescriptor;var o=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var n=(f,e)=>{for(var d in e)a(f,d,{get:e[d],enumerable:!0})},s=(f,e,d,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let c of o(e))!b.call(f,c)&&c!==d&&a(f,c,{get:()=>e[c],enumerable:!(t=r(e,c))||t.enumerable});return f};var u=f=>s(a({},"__esModule",{value:!0}),f);var m={};n(m,{catppuccinLatte:()=>i});module.exports=u(m);var i={name:"catppuccin-latte",mode:"light",colors:{primary:{50:"#eef2fe",100:"#dde6fd",200:"#c1d2fb",300:"#96b4f9",400:"#648df7",500:"#3a70f6",600:"#1e66f5",700:"#1652cd",800:"#1543a4",900:"#163a82",950:"#12254f"},neutral:{50:"#f4f6fa",100:"#eff1f5",200:"#e6e9ef",300:"#ccd0da",400:"#acb0be",500:"#9ca0b0",600:"#7c7f93",700:"#6c6f85",800:"#5c5f77",900:"#4c4f69",950:"#3a3d52"},success:{50:"#f1faee",100:"#e0f4d9",200:"#c3e8b6",300:"#9cd688",400:"#6fbe55",500:"#4fae38",600:"#40a02b",700:"#357f25",800:"#2d6521",900:"#27531f",950:"#112d0c"},warning:{50:"#fdf7ec",100:"#f9ecd3",200:"#f3d7a5",300:"#ecbd6e",400:"#e5a340",500:"#df8e1d",600:"#c67916",700:"#a45e15",800:"#854a17",900:"#6d3d16",950:"#3e1f09"},danger:{50:"#fef1f4",100:"#fde0e7",200:"#fbc6d3",300:"#f79cb1",400:"#f16587",500:"#e63862",600:"#d20f39",700:"#b10d33",800:"#940e31",900:"#7f102f",950:"#470415"},semantic:{background:"#eff1f5",surface:"#e6e9ef",surfaceHover:"#dce0e8",overlay:"rgb(76 79 105 / 0.4)",text:"#4c4f69",textMuted:"#65687d",textInverted:"#ffffff",border:"#ccd0da",borderStrong:"#7c849c",focusRing:"#1e66f5"}},shadow:{color:"76 79 105",strength:"1.3"}};0&&(module.exports={catppuccinLatte});
package/dist/themes/CatppuccinLatte.d.cts ADDED
@@ -0,0 +1,9 @@
1
+ import type { Theme } from '../utils/theme.cjs';
2
+ /**
3
+ * Catppuccin Latte inspired light theme: warm off-white surfaces, saturated
4
+ * blue actions, and the Latte green/yellow/red status hues.
5
+ * Palette source: catppuccin/catppuccin (MIT).
6
+ *
7
+ * @public
8
+ */
9
+ export declare const catppuccinLatte: Theme;
package/dist/themes/CatppuccinLatte.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import type { Theme } from '../utils/theme.js';
2
+ /**
3
+ * Catppuccin Latte inspired light theme: warm off-white surfaces, saturated
4
+ * blue actions, and the Latte green/yellow/red status hues.
5
+ * Palette source: catppuccin/catppuccin (MIT).
6
+ *
7
+ * @public
8
+ */
9
+ export declare const catppuccinLatte: Theme;
package/dist/themes/CatppuccinLatte.js ADDED
@@ -0,0 +1 @@
1
+ var e={name:"catppuccin-latte",mode:"light",colors:{primary:{50:"#eef2fe",100:"#dde6fd",200:"#c1d2fb",300:"#96b4f9",400:"#648df7",500:"#3a70f6",600:"#1e66f5",700:"#1652cd",800:"#1543a4",900:"#163a82",950:"#12254f"},neutral:{50:"#f4f6fa",100:"#eff1f5",200:"#e6e9ef",300:"#ccd0da",400:"#acb0be",500:"#9ca0b0",600:"#7c7f93",700:"#6c6f85",800:"#5c5f77",900:"#4c4f69",950:"#3a3d52"},success:{50:"#f1faee",100:"#e0f4d9",200:"#c3e8b6",300:"#9cd688",400:"#6fbe55",500:"#4fae38",600:"#40a02b",700:"#357f25",800:"#2d6521",900:"#27531f",950:"#112d0c"},warning:{50:"#fdf7ec",100:"#f9ecd3",200:"#f3d7a5",300:"#ecbd6e",400:"#e5a340",500:"#df8e1d",600:"#c67916",700:"#a45e15",800:"#854a17",900:"#6d3d16",950:"#3e1f09"},danger:{50:"#fef1f4",100:"#fde0e7",200:"#fbc6d3",300:"#f79cb1",400:"#f16587",500:"#e63862",600:"#d20f39",700:"#b10d33",800:"#940e31",900:"#7f102f",950:"#470415"},semantic:{background:"#eff1f5",surface:"#e6e9ef",surfaceHover:"#dce0e8",overlay:"rgb(76 79 105 / 0.4)",text:"#4c4f69",textMuted:"#65687d",textInverted:"#ffffff",border:"#ccd0da",borderStrong:"#7c849c",focusRing:"#1e66f5"}},shadow:{color:"76 79 105",strength:"1.3"}};export{e as catppuccinLatte};
package/dist/themes/CatppuccinMocha.cjs ADDED
@@ -0,0 +1 @@
1
+ "use strict";var d=Object.defineProperty;var r=Object.getOwnPropertyDescriptor;var t=Object.getOwnPropertyNames;var o=Object.prototype.hasOwnProperty;var n=(f,e)=>{for(var c in e)d(f,c,{get:e[c],enumerable:!0})},s=(f,e,c,b)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of t(e))!o.call(f,a)&&a!==c&&d(f,a,{get:()=>e[a],enumerable:!(b=r(e,a))||b.enumerable});return f};var m=f=>s(d({},"__esModule",{value:!0}),f);var i={};n(i,{catppuccinMocha:()=>u});module.exports=m(i);var u={name:"catppuccin-mocha",mode:"dark",colors:{primary:{50:"#f8fbff",100:"#eef5fe",200:"#dce9fe",300:"#c4dafd",400:"#afccfc",500:"#9cc0fb",600:"#89b4fa",700:"#7092cb",800:"#5b77a5",900:"#4a5f85",950:"#2e3a51"},neutral:{50:"#f5f6fb",100:"#eaedf8",200:"#45475a",300:"#585b70",400:"#a6adc8",500:"#7f849c",600:"#6c7086",700:"#45475a",800:"#313244",900:"#11111b",950:"#11111b"},success:{50:"#f2fbf1",100:"#e2f6e0",200:"#c8edc4",300:"#a6e3a1",400:"#7ed177",500:"#5cb954",600:"#479c41",700:"#3a7c36",800:"#32632f",900:"#2b5229",950:"#122d11"},warning:{50:"#fefaf0",100:"#fdf3da",200:"#f9e2af",300:"#f5cd79",400:"#f0b34a",500:"#e99b2b",600:"#cd7d1f",700:"#aa5f1c",800:"#8a4b1d",900:"#713e1b",950:"#401f0c"},danger:{50:"#fef1f5",100:"#fde3ea",200:"#fbcbd9",300:"#f8a8bf",400:"#f38ba8",500:"#e75c85",600:"#d23a6c",700:"#b02b59",800:"#932750",900:"#7d2549",950:"#450f24"},semantic:{background:"#1e1e2e",surface:"#2a2b3d",surfaceHover:"#313244",overlay:"rgb(0 0 0 / 0.6)",text:"#cdd6f4",textMuted:"#a6adc8",textInverted:"#1e1e2e",border:"#45475a",borderStrong:"#71758f",focusRing:"#89b4fa"}},shadow:{color:"0 0 0",strength:"4.7"}};0&&(module.exports={catppuccinMocha});
package/dist/themes/CatppuccinMocha.d.cts ADDED
@@ -0,0 +1,9 @@
1
+ import type { Theme } from '../utils/theme.cjs';
2
+ /**
3
+ * Catppuccin Mocha inspired dark theme: soothing pastel accents on the
4
+ * signature `#1e1e2e` base, with Mocha green/yellow/red status hues.
5
+ * Palette source: catppuccin/catppuccin (MIT).
6
+ *
7
+ * @public
8
+ */
9
+ export declare const catppuccinMocha: Theme;