@skdx/tokens 0.27.0 → 0.28.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 (57) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +77 -57
  3. package/dist/themes/AntDark.d.cts +3 -7
  4. package/dist/themes/AntDark.d.ts +3 -7
  5. package/dist/themes/ChakraDark.d.cts +3 -7
  6. package/dist/themes/ChakraDark.d.ts +3 -7
  7. package/dist/themes/DefaultTheme.d.cts +1 -2
  8. package/dist/themes/DefaultTheme.d.ts +1 -2
  9. package/dist/themes/DraculaLight.d.cts +1 -9
  10. package/dist/themes/DraculaLight.d.ts +1 -9
  11. package/dist/themes/EverforestDark.d.cts +1 -2
  12. package/dist/themes/EverforestDark.d.ts +1 -2
  13. package/dist/themes/EverforestLight.d.cts +4 -8
  14. package/dist/themes/EverforestLight.d.ts +4 -8
  15. package/dist/themes/FluentDark.d.cts +2 -6
  16. package/dist/themes/FluentDark.d.ts +2 -6
  17. package/dist/themes/GruvboxLight.d.cts +1 -2
  18. package/dist/themes/GruvboxLight.d.ts +1 -2
  19. package/dist/themes/MaterialBrand.d.cts +1 -1
  20. package/dist/themes/MaterialBrand.d.ts +1 -1
  21. package/dist/themes/MaterialDark.d.cts +3 -7
  22. package/dist/themes/MaterialDark.d.ts +3 -7
  23. package/dist/themes/MidnightBrand.d.cts +2 -5
  24. package/dist/themes/MidnightBrand.d.ts +2 -5
  25. package/dist/themes/MidnightLight.d.cts +2 -5
  26. package/dist/themes/MidnightLight.d.ts +2 -5
  27. package/dist/themes/NordLight.d.cts +1 -2
  28. package/dist/themes/NordLight.d.ts +1 -2
  29. package/dist/themes/OneLight.d.cts +4 -8
  30. package/dist/themes/OneLight.d.ts +4 -8
  31. package/dist/themes/PrimerDark.d.cts +0 -1
  32. package/dist/themes/PrimerDark.d.ts +0 -1
  33. package/dist/themes/RosePineDawn.d.cts +4 -8
  34. package/dist/themes/RosePineDawn.d.ts +4 -8
  35. package/dist/themes/SkandaDark.d.cts +3 -7
  36. package/dist/themes/SkandaDark.d.ts +3 -7
  37. package/dist/themes/SynthwaveLight.d.cts +3 -7
  38. package/dist/themes/SynthwaveLight.d.ts +3 -7
  39. package/dist/themes/brands.d.cts +7 -14
  40. package/dist/themes/brands.d.ts +7 -14
  41. package/dist/themes/createBrandTheme.d.cts +13 -21
  42. package/dist/themes/createBrandTheme.d.ts +13 -21
  43. package/dist/utils/aliases.d.cts +22 -92
  44. package/dist/utils/aliases.d.ts +22 -92
  45. package/dist/utils/contrast.d.cts +2 -17
  46. package/dist/utils/contrast.d.ts +2 -17
  47. package/dist/utils/cssVars.d.cts +7 -29
  48. package/dist/utils/cssVars.d.ts +7 -29
  49. package/dist/utils/foundation.d.cts +47 -143
  50. package/dist/utils/foundation.d.ts +47 -143
  51. package/dist/utils/mode.d.cts +31 -43
  52. package/dist/utils/mode.d.ts +31 -43
  53. package/dist/utils/theme.d.cts +83 -240
  54. package/dist/utils/theme.d.ts +83 -240
  55. package/dist/utils/toCss.d.cts +18 -57
  56. package/dist/utils/toCss.d.ts +18 -57
  57. package/package.json +1 -1
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 SkandaDX
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -29,7 +29,7 @@ import { applyTheme, defaultTheme, foundationToCss } from '@skdx/tokens';
29
29
 
30
30
  // Once: the type scale, spacing, radii, shadow geometry and motion every theme shares.
31
31
  document.head.appendChild(
32
- Object.assign(document.createElement('style'), { textContent: foundationToCss() })
32
+ Object.assign(document.createElement('style'), { textContent: foundationToCss() }),
33
33
  );
34
34
  // Per theme: colors.
35
35
  applyTheme(defaultTheme);
@@ -50,14 +50,14 @@ applyTheme(defaultTheme);
50
50
  ## The theme contract
51
51
 
52
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*,
53
+ in all 38 bundled themes, so they aren't part of a theme at all — they're the _foundation_,
54
54
  exported once and emitted at `:root` by `foundationToCss()`.
55
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) |
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
61
 
62
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
63
 
@@ -65,18 +65,18 @@ Components should use the **semantic** colors (`colors.semantic.*`) wherever pos
65
65
 
66
66
  Imported as bare named exports, not read off a theme:
67
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 |
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
75
 
76
76
  ### The two escape hatches
77
77
 
78
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,
79
+ (just the four base tokens). Declaring one _is_ the deviation — there is no wrapper to opt into,
80
80
  and they re-emit at the theme's own higher-specificity selector so `[data-skdx-theme="material-you"]`
81
81
  beats `:root`.
82
82
 
@@ -108,7 +108,7 @@ The original twenty-two themes are unchanged (names, exports, and light-mode val
108
108
  | `emeraldBrand` | `emerald-brand` | Fresh greens, soft mint surfaces, tight corners |
109
109
  | `midnightBrand` | `midnight-brand` | Dark theme — violet actions on deep indigo surfaces |
110
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 |
111
+ | `materialBrand` | `material-you` | Material Design 3 inspired: tonal purple, Roboto, M3's slower emphasized motion |
112
112
  | `antBrand` | `ant-daybreak` | Ant Design inspired: daybreak blue, compact corners |
113
113
  | `fluentBrand` | `fluent` | Microsoft Fluent 2 inspired: communication blue, Segoe UI |
114
114
  | `chakraBrand` | `chakra-teal` | Chakra UI inspired: teal actions, blue focus ring |
@@ -146,7 +146,7 @@ The original twenty-two themes are unchanged (names, exports, and light-mode val
146
146
  `themes` exports all thirty-eight as an array — handy for theme pickers and galleries:
147
147
 
148
148
  ```ts
149
- import { themes, applyTheme } from '@skdx/tokens';
149
+ import { applyTheme, themes } from '@skdx/tokens';
150
150
 
151
151
  themes.map((t) => t.name); // ['skanda-light', 'emerald-brand', ...]
152
152
  applyTheme(themes.find((t) => t.name === 'nord-dark')!);
@@ -197,7 +197,7 @@ Sets all variables as inline styles on `element` (default `document.documentElem
197
197
  Renders a theme as a CSS rule, ready to inject into a `<style>` tag or write to a file at build time:
198
198
 
199
199
  ```ts
200
- import { themeToCss, nordDark } from '@skdx/tokens';
200
+ import { nordDark, themeToCss } from '@skdx/tokens';
201
201
 
202
202
  themeToCss(nordDark);
203
203
  // [data-skdx-theme="nord-dark"] {
@@ -238,7 +238,17 @@ way color is. Every theme should behave the same way, so they're exported once a
238
238
  rather than duplicated into all 38 `Theme` objects:
239
239
 
240
240
  ```ts
241
- import { typography, space, radii, zIndex, focusRing, borderWidth, opacity, breakpoints, foundationToCss } from '@skdx/tokens';
241
+ import {
242
+ borderWidth,
243
+ breakpoints,
244
+ focusRing,
245
+ foundationToCss,
246
+ opacity,
247
+ radii,
248
+ space,
249
+ typography,
250
+ zIndex,
251
+ } from '@skdx/tokens';
242
252
 
243
253
  typography.fontSize.md; // '1rem'
244
254
  space['4']; // '1rem'
@@ -250,7 +260,9 @@ opacity.disabled; // '0.5'
250
260
  breakpoints.lg; // 1024 (a number — see below)
251
261
 
252
262
  // 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() }));
263
+ document.head.appendChild(
264
+ Object.assign(document.createElement('style'), { textContent: foundationToCss() }),
265
+ );
254
266
  ```
255
267
 
256
268
  `zIndex` scale (low → high): `base`, `dropdown`, `sticky`, `overlay`, `modal`, `popover`, `toast`, `max`.
@@ -302,14 +314,21 @@ theme (see `themeToCss`).
302
314
 
303
315
  ```ts
304
316
  // Nuxt — nuxt.config.ts
305
- app: { head: { script: [{ innerHTML: getThemeInitScript(), tagPosition: 'head' }] } }
317
+ app: {
318
+ head: {
319
+ script: [{ innerHTML: getThemeInitScript(), tagPosition: 'head' }];
320
+ }
321
+ }
306
322
  ```
307
323
 
324
+ <!-- prettier-ignore -->
308
325
  ```html
309
326
  <!-- SvelteKit — src/app.html; replace the placeholder from a Vite plugin at build time -->
310
327
  <head>
311
328
  %sveltekit.head%
312
- <script>%skdx.themeInit%</script>
329
+ <script>
330
+ %skdx.themeInit%
331
+ </script>
313
332
  </head>
314
333
  ```
315
334
 
@@ -347,8 +366,8 @@ of the two blocks declares them moved.
347
366
 
348
367
  From a `Theme`, at `[data-skdx-theme="…"]`:
349
368
 
350
- | Theme path | CSS variable |
351
- | ------------------------------ | ------------------------------------ |
369
+ | Theme path | CSS variable |
370
+ | ------------------------------ | ------------------------------------- |
352
371
  | `colors.primary[500]` | `--skdx-color-primary-500` |
353
372
  | `colors.semantic.surfaceHover` | `--skdx-color-semantic-surface-hover` |
354
373
  | `shadow.color` | `--skdx-shadow-color` |
@@ -356,18 +375,18 @@ From a `Theme`, at `[data-skdx-theme="…"]`:
356
375
 
357
376
  From the foundation, at `:root`:
358
377
 
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` |
378
+ | Foundation path | CSS variable |
379
+ | -------------------------------- | --------------------------------- |
380
+ | `typography.fontFamily` | `--skdx-font-family` |
381
+ | `typography.fontSize.md` | `--skdx-font-size-md` |
382
+ | `typography.fontWeight.semibold` | `--skdx-font-weight-semibold` |
383
+ | `typography.lineHeight.tight` | `--skdx-font-line-height-tight` |
365
384
  | `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` |
385
+ | `space[4]` | `--skdx-space-4` |
386
+ | `radii.md` | `--skdx-radius-md` |
387
+ | `shadows.overlay` | `--skdx-shadow-overlay` |
388
+ | `motion.durationFast` | `--skdx-motion-duration-fast` |
389
+ | `motion.easing` | `--skdx-motion-easing` |
371
390
 
372
391
  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
392
 
@@ -379,7 +398,8 @@ A shadow resolves across both blocks:
379
398
 
380
399
  ```css
381
400
  /* :root, from foundationToCss() */
382
- --skdx-shadow-md: 0 4px 6px -1px rgb(var(--skdx-shadow-color) / calc(0.1 * var(--skdx-shadow-strength))), …;
401
+ --skdx-shadow-md:
402
+ 0 4px 6px -1px rgb(var(--skdx-shadow-color) / calc(0.1 * var(--skdx-shadow-strength))), …;
383
403
  /* [data-skdx-theme="nord-dark"], from themeToCss() */
384
404
  --skdx-shadow-color: 0 0 0;
385
405
  --skdx-shadow-strength: 4.7;
@@ -391,27 +411,27 @@ run around `5`. It's a look, not a measurement — tune it by eye.
391
411
 
392
412
  ## API summary
393
413
 
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 |
414
+ | Export | Kind | Description |
415
+ | ------------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------ |
416
+ | `defaultTheme` | `Theme` | The reference theme (`skanda-light`) |
417
+ | `createTheme(name, override?, base?)` | function | Deep-merge a partial override into a base theme |
418
+ | `themeToCssVars(theme)` | function | Theme → flat `--skdx-*` variable map |
419
+ | `themeToCss(theme, options?)` | function | Theme → CSS rule string (scoped to `[data-skdx-theme]` by default) |
420
+ | `applyTheme(theme, element?)` | function | Set variables inline on an element at runtime |
421
+ | `skandaLight` … `synthwaveDark` | `Theme` × 38 | Built-in brand themes (19 brands × light/dark) |
422
+ | `watchSystemMode(options?)` | function | Apply a brand's theme from `prefers-color-scheme`, and on change |
423
+ | `getThemeInitScript(options?)` | function | Pre-paint snippet that stamps `data-skdx-theme`/`-mode` (no FOUC) |
424
+ | `zIndex` | `ZIndexScale` | Non-themed overlay stacking-order scale (`base`…`max`) |
425
+ | `focusRing` | `FocusRingScale` | Non-themed focus-ring `width`/`offset` |
426
+ | `borderWidth` | `BorderWidthScale` | Non-themed `thin`/`thick`/`thicker` border thicknesses |
427
+ | `opacity` | `OpacityScale` | Non-themed `disabled` and `scrim` opacities |
428
+ | `breakpoints` | `BreakpointScale` | Viewport widths in px — TS only, never emitted as CSS vars |
429
+ | `typography` / `space` / `radii` / `shadows` / `motion` | constants | The shared scales every theme inherits — not per-theme |
430
+ | `foundationToCss()` | function | The shared scales + `zIndex`/`focusRing`/`borderWidth`/`opacity` → a `:root` CSS block, plus its reduced-motion override |
431
+ | `foundationToCssVars()` | function | The same, as a flat `--skdx-*` variable map |
432
+ | `contrastRatio(hexA, hexB)` | function | WCAG relative-luminance contrast ratio between two colors |
433
+ | `themes` | `Theme[]` | All built-in themes |
434
+ | `Theme`, `ThemeOverride`, … | types | The full theme contract |
415
435
 
416
436
  ## Package layout
417
437
 
@@ -1,11 +1,7 @@
1
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.
2
+ * Dark counterpart of Ant Design dark surfaces (#141414 / #1f1f1f)
3
+ * with daybreak blue accents. Uses the dark-derived blue; the light ramp's
4
+ * blue reaches only 2.99:1 contrast on dark backgrounds.
9
5
  *
10
6
  * @public
11
7
  */
@@ -1,11 +1,7 @@
1
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.
2
+ * Dark counterpart of Ant Design dark surfaces (#141414 / #1f1f1f)
3
+ * with daybreak blue accents. Uses the dark-derived blue; the light ramp's
4
+ * blue reaches only 2.99:1 contrast on dark backgrounds.
9
5
  *
10
6
  * @public
11
7
  */
@@ -1,11 +1,7 @@
1
1
  /**
2
- * Dark counterpart of `chakra-teal`, following Chakra UI's dark gray.800
3
- * body background.
4
- *
5
- * `primary-600` is Chakra's `teal.300` rather than the light theme's
6
- * `teal.600`: Chakra's own dark-mode components step the accent up the
7
- * scale (`teal.200`/`teal.300`) so it reads against `gray.800`, and ink on
8
- * the filled state becomes `gray.800` in turn.
2
+ * Dark counterpart of `chakra-teal`, with Chakra UI's dark gray backgrounds.
3
+ * Uses `teal.300` instead of the light theme's `teal.600` for contrast on
4
+ * dark surfaces.
9
5
  *
10
6
  * @public
11
7
  */
@@ -1,11 +1,7 @@
1
1
  /**
2
- * Dark counterpart of `chakra-teal`, following Chakra UI's dark gray.800
3
- * body background.
4
- *
5
- * `primary-600` is Chakra's `teal.300` rather than the light theme's
6
- * `teal.600`: Chakra's own dark-mode components step the accent up the
7
- * scale (`teal.200`/`teal.300`) so it reads against `gray.800`, and ink on
8
- * the filled state becomes `gray.800` in turn.
2
+ * Dark counterpart of `chakra-teal`, with Chakra UI's dark gray backgrounds.
3
+ * Uses `teal.300` instead of the light theme's `teal.600` for contrast on
4
+ * dark surfaces.
9
5
  *
10
6
  * @public
11
7
  */
@@ -5,8 +5,7 @@ import { type Theme, type ThemeOverride } from '../utils/theme.cjs';
5
5
  * produces) is created as a `ThemeOverride` of this base via {@link createTheme}.
6
6
  *
7
7
  * Colors and a shadow tint, nothing else — the type scale, spacing, radii,
8
- * shadow geometry and motion this theme used to restate are shared by every
9
- * theme and live in `utils/foundation.ts`.
8
+ * shadow geometry and motion are shared by every theme and live in `utils/foundation.ts`.
10
9
  *
11
10
  * @public
12
11
  */
@@ -5,8 +5,7 @@ import { type Theme, type ThemeOverride } from '../utils/theme.js';
5
5
  * produces) is created as a `ThemeOverride` of this base via {@link createTheme}.
6
6
  *
7
7
  * Colors and a shadow tint, nothing else — the type scale, spacing, radii,
8
- * shadow geometry and motion this theme used to restate are shared by every
9
- * theme and live in `utils/foundation.ts`.
8
+ * shadow geometry and motion are shared by every theme and live in `utils/foundation.ts`.
10
9
  *
11
10
  * @public
12
11
  */
@@ -1,13 +1,5 @@
1
1
  /**
2
- * Light counterpart of `dracula` — **Alucard**, Dracula's own light theme,
3
- * rather than an inversion of the dark one. Alucard is a distinct published
4
- * palette: a warm `#fffbeb` paper, `#1f1f1f` ink, and a deeper `#644ac9`
5
- * purple in place of Dracula's `#bd93f9`.
6
- *
7
- * This previously promoted Dracula's *foreground* (`#f8f8f2`) to the page
8
- * background and darkened the dark theme's purple to clear AA, which is not
9
- * a palette Dracula publishes — the two modes read as one theme at two
10
- * brightnesses instead of as Dracula and Alucard.
2
+ * Light counterpart of `dracula` — Alucard's published palette, not an inversion of the dark theme.
11
3
  *
12
4
  * @public
13
5
  */
@@ -1,13 +1,5 @@
1
1
  /**
2
- * Light counterpart of `dracula` — **Alucard**, Dracula's own light theme,
3
- * rather than an inversion of the dark one. Alucard is a distinct published
4
- * palette: a warm `#fffbeb` paper, `#1f1f1f` ink, and a deeper `#644ac9`
5
- * purple in place of Dracula's `#bd93f9`.
6
- *
7
- * This previously promoted Dracula's *foreground* (`#f8f8f2`) to the page
8
- * background and darkened the dark theme's purple to clear AA, which is not
9
- * a palette Dracula publishes — the two modes read as one theme at two
10
- * brightnesses instead of as Dracula and Alucard.
2
+ * Light counterpart of `dracula` — Alucard's published palette, not an inversion of the dark theme.
11
3
  *
12
4
  * @public
13
5
  */
@@ -1,8 +1,7 @@
1
1
  import type { Theme } from '../utils/theme.cjs';
2
2
  /**
3
- * Everforest Dark inspired theme: comfortable green-on-forest palette with
3
+ * Everforest Dark inspired theme: green-on-forest palette with
4
4
  * warm cream text, sage green actions, and aqua/yellow/red status hues.
5
- * Palette source: sainnhe/everforest (MIT).
6
5
  *
7
6
  * @public
8
7
  */
@@ -1,8 +1,7 @@
1
1
  import type { Theme } from '../utils/theme.js';
2
2
  /**
3
- * Everforest Dark inspired theme: comfortable green-on-forest palette with
3
+ * Everforest Dark inspired theme: green-on-forest palette with
4
4
  * warm cream text, sage green actions, and aqua/yellow/red status hues.
5
- * Palette source: sainnhe/everforest (MIT).
6
5
  *
7
6
  * @public
8
7
  */
@@ -1,12 +1,8 @@
1
1
  /**
2
- * Light counterpart of `everforest-dark`, built on Everforest's light
3
- * palette (#fdf6e3 background, sage greens). Palette source:
4
- * sainnhe/everforest (MIT).
5
- *
6
- * `primary-500` is Everforest light's own green (#8da101), an olive that
7
- * shares no channel with the dark palette's sage #a7c080 — the upstream
8
- * light and dark foregrounds are separately specified, not one ramp read at
9
- * two depths. 600 darkens it to clear white label text.
2
+ * Light counterpart of `everforest-dark`, with Everforest's light palette
3
+ * (#fdf6e3 background, sage greens). Uses Everforest's light-specific green
4
+ * (#8da101), not a derivative of the dark palette. At 600 it clears
5
+ * white label text.
10
6
  *
11
7
  * @public
12
8
  */
@@ -1,12 +1,8 @@
1
1
  /**
2
- * Light counterpart of `everforest-dark`, built on Everforest's light
3
- * palette (#fdf6e3 background, sage greens). Palette source:
4
- * sainnhe/everforest (MIT).
5
- *
6
- * `primary-500` is Everforest light's own green (#8da101), an olive that
7
- * shares no channel with the dark palette's sage #a7c080 — the upstream
8
- * light and dark foregrounds are separately specified, not one ramp read at
9
- * two depths. 600 darkens it to clear white label text.
2
+ * Light counterpart of `everforest-dark`, with Everforest's light palette
3
+ * (#fdf6e3 background, sage greens). Uses Everforest's light-specific green
4
+ * (#8da101), not a derivative of the dark palette. At 600 it clears
5
+ * white label text.
10
6
  *
11
7
  * @public
12
8
  */
@@ -1,10 +1,6 @@
1
1
  /**
2
- * Dark counterpart of `fluent`, following Microsoft Fluent 2 dark neutral
3
- * backgrounds (#1f1f1f / #292929) with the brighter Fluent blue.
4
- *
5
- * `primary-600` is Fluent's `brand[100]` (#479ef5) — the shade Fluent's own
6
- * dark theme points `colorBrandForeground1` at, where light points it at
7
- * `brand[80]`. Ink is `brand[10]`, the darkest rung of the same ramp.
2
+ * Dark counterpart of `fluent`, with Fluent 2 dark neutral backgrounds
3
+ * (#1f1f1f / #292929) and the brighter Fluent blue shade.
8
4
  *
9
5
  * @public
10
6
  */
@@ -1,10 +1,6 @@
1
1
  /**
2
- * Dark counterpart of `fluent`, following Microsoft Fluent 2 dark neutral
3
- * backgrounds (#1f1f1f / #292929) with the brighter Fluent blue.
4
- *
5
- * `primary-600` is Fluent's `brand[100]` (#479ef5) — the shade Fluent's own
6
- * dark theme points `colorBrandForeground1` at, where light points it at
7
- * `brand[80]`. Ink is `brand[10]`, the darkest rung of the same ramp.
2
+ * Dark counterpart of `fluent`, with Fluent 2 dark neutral backgrounds
3
+ * (#1f1f1f / #292929) and the brighter Fluent blue shade.
8
4
  *
9
5
  * @public
10
6
  */
@@ -1,7 +1,6 @@
1
1
  /**
2
2
  * Light counterpart of `gruvbox-dark`, built on Gruvbox's light palette
3
- * (#fbf1c7 cream background, warm gray text). Palette source:
4
- * morhetz/gruvbox (MIT/X11).
3
+ * (#fbf1c7 cream background, warm gray text).
5
4
  *
6
5
  * Gruvbox ships three blues and picks between them by mode: `bright_blue`
7
6
  * (#83a598) for dark, `faded_blue` (#076678) for light, with `neutral_blue`
@@ -1,7 +1,6 @@
1
1
  /**
2
2
  * Light counterpart of `gruvbox-dark`, built on Gruvbox's light palette
3
- * (#fbf1c7 cream background, warm gray text). Palette source:
4
- * morhetz/gruvbox (MIT/X11).
3
+ * (#fbf1c7 cream background, warm gray text).
5
4
  *
6
5
  * Gruvbox ships three blues and picks between them by mode: `bright_blue`
7
6
  * (#83a598) for dark, `faded_blue` (#076678) for light, with `neutral_blue`
@@ -1,3 +1,3 @@
1
1
  import type { Theme } from '../utils/theme.cjs';
2
- /** Material Design 3 inspired: tonal purple, generous shape scale, emphasized easing. @public */
2
+ /** Tonal purple light theme. @public */
3
3
  export declare const materialBrand: Theme;
@@ -1,3 +1,3 @@
1
1
  import type { Theme } from '../utils/theme.js';
2
- /** Material Design 3 inspired: tonal purple, generous shape scale, emphasized easing. @public */
2
+ /** Tonal purple light theme. @public */
3
3
  export declare const materialBrand: Theme;
@@ -1,11 +1,7 @@
1
1
  /**
2
- * Dark counterpart of `material-you`, following Material Design 3 dark
3
- * surfaces (#1c1b1f) with the M3 light-lavender primary accent.
4
- *
5
- * `primary-600` is M3's `Primary80` (#d0bcff) and `textInverted` its paired
6
- * `onPrimary` for dark (#381e72) — the baseline scheme moves the primary
7
- * role from tone 40 in light to tone 80 in dark, so reusing the light
8
- * theme's tone-40 violet here left the accent invisible on M3's own surface.
2
+ * Dark counterpart of Material Design 3 dark surfaces (#1c1b1f)
3
+ * with light-lavender accents. The dark theme shifts primary from tone 40
4
+ * to tone 80; using light's tone-40 left the accent invisible.
9
5
  *
10
6
  * @public
11
7
  */
@@ -1,11 +1,7 @@
1
1
  /**
2
- * Dark counterpart of `material-you`, following Material Design 3 dark
3
- * surfaces (#1c1b1f) with the M3 light-lavender primary accent.
4
- *
5
- * `primary-600` is M3's `Primary80` (#d0bcff) and `textInverted` its paired
6
- * `onPrimary` for dark (#381e72) — the baseline scheme moves the primary
7
- * role from tone 40 in light to tone 80 in dark, so reusing the light
8
- * theme's tone-40 violet here left the accent invisible on M3's own surface.
2
+ * Dark counterpart of Material Design 3 dark surfaces (#1c1b1f)
3
+ * with light-lavender accents. The dark theme shifts primary from tone 40
4
+ * to tone 80; using light's tone-40 left the accent invisible.
9
5
  *
10
6
  * @public
11
7
  */
@@ -1,10 +1,7 @@
1
1
  /**
2
2
  * Midnight purple dark theme: violet actions on deep indigo surfaces.
3
- *
4
- * The first brand generated from a `BrandSeed` rather than hand-written — its
5
- * ramps and semantic roles come out of {@link createBrandTheme}, which drives
6
- * every WCAG AA pair to threshold instead of leaving it to review. Only the
7
- * dark shadow stack is hand-kept, since shadow alpha isn't derived from hue.
3
+ * Generated from `BrandSeed` via {@link createBrandTheme}, which drives
4
+ * every WCAG AA pair to threshold. Shadow stack is hand-tuned.
8
5
  *
9
6
  * @public
10
7
  */
@@ -1,10 +1,7 @@
1
1
  /**
2
2
  * Midnight purple dark theme: violet actions on deep indigo surfaces.
3
- *
4
- * The first brand generated from a `BrandSeed` rather than hand-written — its
5
- * ramps and semantic roles come out of {@link createBrandTheme}, which drives
6
- * every WCAG AA pair to threshold instead of leaving it to review. Only the
7
- * dark shadow stack is hand-kept, since shadow alpha isn't derived from hue.
3
+ * Generated from `BrandSeed` via {@link createBrandTheme}, which drives
4
+ * every WCAG AA pair to threshold. Shadow stack is hand-tuned.
8
5
  *
9
6
  * @public
10
7
  */
@@ -1,9 +1,6 @@
1
1
  /**
2
- * Light counterpart of `midnight-brand` — the same violet primary ramp on
3
- * white surfaces with lavender-tinted borders. Generated from the same seed
4
- * as its dark twin (only `mode` differs), so the two modes cannot drift apart
5
- * the way two hand-written files can. Its shadow stack is the default one, so
6
- * unlike the dark theme it needs no override at all.
2
+ * Light counterpart of `midnight-brand` — violet primary ramp on white surfaces
3
+ * with lavender-tinted borders. Generated from the same seed as its dark twin.
7
4
  *
8
5
  * @public
9
6
  */
@@ -1,9 +1,6 @@
1
1
  /**
2
- * Light counterpart of `midnight-brand` — the same violet primary ramp on
3
- * white surfaces with lavender-tinted borders. Generated from the same seed
4
- * as its dark twin (only `mode` differs), so the two modes cannot drift apart
5
- * the way two hand-written files can. Its shadow stack is the default one, so
6
- * unlike the dark theme it needs no override at all.
2
+ * Light counterpart of `midnight-brand` — violet primary ramp on white surfaces
3
+ * with lavender-tinted borders. Generated from the same seed as its dark twin.
7
4
  *
8
5
  * @public
9
6
  */
@@ -1,7 +1,6 @@
1
1
  /**
2
2
  * Light counterpart of `nord-dark`, built on Nord's Snow Storm palette
3
- * (#eceff4 / #e5e9f0 / #d8dee9) with Polar Night text. Palette source:
4
- * nordtheme/nord (MIT).
3
+ * (#eceff4 / #e5e9f0 / #d8dee9) with Polar Night text.
5
4
  *
6
5
  * Nord publishes no light theme, so the mode split is made inside Frost
7
6
  * rather than invented: light takes `nord10` (#5e81ac), the deepest Frost
@@ -1,7 +1,6 @@
1
1
  /**
2
2
  * Light counterpart of `nord-dark`, built on Nord's Snow Storm palette
3
- * (#eceff4 / #e5e9f0 / #d8dee9) with Polar Night text. Palette source:
4
- * nordtheme/nord (MIT).
3
+ * (#eceff4 / #e5e9f0 / #d8dee9) with Polar Night text.
5
4
  *
6
5
  * Nord publishes no light theme, so the mode split is made inside Frost
7
6
  * rather than invented: light takes `nord10` (#5e81ac), the deepest Frost