@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.
- package/LICENSE +21 -0
- package/README.md +77 -57
- package/dist/themes/AntDark.d.cts +3 -7
- package/dist/themes/AntDark.d.ts +3 -7
- package/dist/themes/ChakraDark.d.cts +3 -7
- package/dist/themes/ChakraDark.d.ts +3 -7
- package/dist/themes/DefaultTheme.d.cts +1 -2
- package/dist/themes/DefaultTheme.d.ts +1 -2
- package/dist/themes/DraculaLight.d.cts +1 -9
- package/dist/themes/DraculaLight.d.ts +1 -9
- package/dist/themes/EverforestDark.d.cts +1 -2
- package/dist/themes/EverforestDark.d.ts +1 -2
- package/dist/themes/EverforestLight.d.cts +4 -8
- package/dist/themes/EverforestLight.d.ts +4 -8
- package/dist/themes/FluentDark.d.cts +2 -6
- package/dist/themes/FluentDark.d.ts +2 -6
- package/dist/themes/GruvboxLight.d.cts +1 -2
- package/dist/themes/GruvboxLight.d.ts +1 -2
- package/dist/themes/MaterialBrand.d.cts +1 -1
- package/dist/themes/MaterialBrand.d.ts +1 -1
- package/dist/themes/MaterialDark.d.cts +3 -7
- package/dist/themes/MaterialDark.d.ts +3 -7
- package/dist/themes/MidnightBrand.d.cts +2 -5
- package/dist/themes/MidnightBrand.d.ts +2 -5
- package/dist/themes/MidnightLight.d.cts +2 -5
- package/dist/themes/MidnightLight.d.ts +2 -5
- package/dist/themes/NordLight.d.cts +1 -2
- package/dist/themes/NordLight.d.ts +1 -2
- package/dist/themes/OneLight.d.cts +4 -8
- package/dist/themes/OneLight.d.ts +4 -8
- package/dist/themes/PrimerDark.d.cts +0 -1
- package/dist/themes/PrimerDark.d.ts +0 -1
- package/dist/themes/RosePineDawn.d.cts +4 -8
- package/dist/themes/RosePineDawn.d.ts +4 -8
- package/dist/themes/SkandaDark.d.cts +3 -7
- package/dist/themes/SkandaDark.d.ts +3 -7
- package/dist/themes/SynthwaveLight.d.cts +3 -7
- package/dist/themes/SynthwaveLight.d.ts +3 -7
- package/dist/themes/brands.d.cts +7 -14
- package/dist/themes/brands.d.ts +7 -14
- package/dist/themes/createBrandTheme.d.cts +13 -21
- package/dist/themes/createBrandTheme.d.ts +13 -21
- package/dist/utils/aliases.d.cts +22 -92
- package/dist/utils/aliases.d.ts +22 -92
- package/dist/utils/contrast.d.cts +2 -17
- package/dist/utils/contrast.d.ts +2 -17
- package/dist/utils/cssVars.d.cts +7 -29
- package/dist/utils/cssVars.d.ts +7 -29
- package/dist/utils/foundation.d.cts +47 -143
- package/dist/utils/foundation.d.ts +47 -143
- package/dist/utils/mode.d.cts +31 -43
- package/dist/utils/mode.d.ts +31 -43
- package/dist/utils/theme.d.cts +83 -240
- package/dist/utils/theme.d.ts +83 -240
- package/dist/utils/toCss.d.cts +18 -57
- package/dist/utils/toCss.d.ts +18 -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
|
|
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
|
|
57
|
-
| --------------------------------------------------------------- |
|
|
58
|
-
| `colors.primary` / `neutral` / `success` / `warning` / `danger` | `ColorScale`
|
|
59
|
-
| `colors.semantic` | `SemanticColors`
|
|
60
|
-
| `shadow` | `ThemeShadowColor`
|
|
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
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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(
|
|
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: {
|
|
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
|
|
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
|
|
360
|
-
|
|
|
361
|
-
| `typography.fontFamily`
|
|
362
|
-
| `typography.fontSize.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]`
|
|
367
|
-
| `radii.md`
|
|
368
|
-
| `shadows.overlay`
|
|
369
|
-
| `motion.durationFast`
|
|
370
|
-
| `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:
|
|
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
|
|
395
|
-
|
|
|
396
|
-
| `defaultTheme`
|
|
397
|
-
| `createTheme(name, override?, base?)`
|
|
398
|
-
| `themeToCssVars(theme)`
|
|
399
|
-
| `themeToCss(theme, options?)`
|
|
400
|
-
| `applyTheme(theme, element?)`
|
|
401
|
-
| `skandaLight` … `synthwaveDark`
|
|
402
|
-
| `watchSystemMode(options?)`
|
|
403
|
-
| `getThemeInitScript(options?)`
|
|
404
|
-
| `zIndex`
|
|
405
|
-
| `focusRing`
|
|
406
|
-
| `borderWidth`
|
|
407
|
-
| `opacity`
|
|
408
|
-
| `breakpoints`
|
|
409
|
-
| `typography` / `space` / `radii` / `shadows` / `motion` | constants
|
|
410
|
-
| `foundationToCss()`
|
|
411
|
-
| `foundationToCssVars()`
|
|
412
|
-
| `contrastRatio(hexA, hexB)`
|
|
413
|
-
| `themes`
|
|
414
|
-
| `Theme`, `ThemeOverride`, …
|
|
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
|
|
3
|
-
*
|
|
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
|
*/
|
package/dist/themes/AntDark.d.ts
CHANGED
|
@@ -1,11 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Dark counterpart of
|
|
3
|
-
*
|
|
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`,
|
|
3
|
-
*
|
|
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`,
|
|
3
|
-
*
|
|
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
|
|
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
|
|
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` —
|
|
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` —
|
|
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:
|
|
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:
|
|
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`,
|
|
3
|
-
*
|
|
4
|
-
*
|
|
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`,
|
|
3
|
-
*
|
|
4
|
-
*
|
|
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`,
|
|
3
|
-
*
|
|
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`,
|
|
3
|
-
*
|
|
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).
|
|
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).
|
|
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,11 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Dark counterpart of
|
|
3
|
-
*
|
|
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
|
|
3
|
-
*
|
|
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
|
-
*
|
|
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
|
-
*
|
|
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` —
|
|
3
|
-
*
|
|
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` —
|
|
3
|
-
*
|
|
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.
|
|
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.
|
|
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
|