@marianmeres/design-tokens 1.2.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/AGENTS.md +1 -1
  2. package/dist/themes/mod.d.ts +4 -2
  3. package/dist/themes/mod.js +49 -11
  4. package/package.json +1 -1
  5. package/dist/themes/dds.d.ts +0 -3
  6. package/dist/themes/dds.js +0 -133
package/AGENTS.md CHANGED
@@ -86,7 +86,7 @@ Entry points:
86
86
  ## Adding a New Theme
87
87
 
88
88
  1. Create `src/themes/{name}.ts` with `export default` of `ThemeSchema`
89
- 2. Add re-export in `src/themes/mod.ts` (alphabetical order)
89
+ 2. Run `deno task themes:build` to regenerate `src/themes/mod.ts`
90
90
  3. Run `deno task css:build` to regenerate CSS files
91
91
  4. Run `deno task preview:build` to rebuild the preview tool
92
92
  5. If the theme uses new color families, update `COLOR_FAMILIES` in `theme-preview-builder/index.html`
package/dist/themes/mod.d.ts CHANGED
@@ -79,14 +79,14 @@ export { default as slateCyan } from "./slate-cyan.js";
79
79
  export { default as slateTealOcean } from "./slate-teal-ocean.js";
80
80
  /** Neutral stone monochrome theme. */
81
81
  export { default as stone } from "./stone.js";
82
+ /** Stone primary / orange accent earth theme. */
83
+ export { default as stoneOrangeEarth } from "./stone-orange-earth.js";
82
84
  /** Warm neutral taupe monochrome theme. */
83
85
  export { default as taupe } from "./taupe.js";
84
86
  /** Taupe primary / olive accent clay theme — all-earthy, warm and grounded. */
85
87
  export { default as taupeOliveClay } from "./taupe-olive-clay.js";
86
88
  /** Rose primary / pink accent on taupe base — warm blush tones. */
87
89
  export { default as taupeRoseBlush } from "./taupe-rose-blush.js";
88
- /** Stone primary / orange accent earth theme. */
89
- export { default as stoneOrangeEarth } from "./stone-orange-earth.js";
90
90
  /** Teal primary / rose accent theme. */
91
91
  export { default as tealRose } from "./teal-rose.js";
92
92
  /** Violet primary / lime accent theme. */
@@ -95,3 +95,5 @@ export { default as violetLime } from "./violet-lime.js";
95
95
  export { default as violetRoseDusk } from "./violet-rose-dusk.js";
96
96
  /** Neutral zinc monochrome theme. */
97
97
  export { default as zinc } from "./zinc.js";
98
+ /** Kebab-case theme names matching the generated CSS filenames (without extension). */
99
+ export declare const themeNames: readonly ["amber-olive-safari", "blue-orange", "cyan-red", "cyan-slate", "emerald-amber-forest", "emerald-pink", "fuchsia-emerald", "gray", "indigo-amber", "lime-fuchsia-neon", "mauve", "mauve-lime-electric", "mauve-teal", "mist", "mist-indigo-fjord", "mist-violet-aurora", "monokai-cyan", "monokai-green", "monokai-pink", "olive", "olive-amber-safari", "orange-pink-sunset", "pink-emerald", "pink-teal", "purple-yellow", "rainbow", "red-blue", "red-cyan", "red-sky", "red-sky-slate", "rose-teal", "sky-amber", "slate-cyan", "slate-teal-ocean", "stone", "stone-orange-earth", "taupe", "taupe-olive-clay", "taupe-rose-blush", "teal-rose", "violet-lime", "violet-rose-dusk", "zinc"];
package/dist/themes/mod.js CHANGED
@@ -1,12 +1,4 @@
1
- /**
2
- * Pre-built {@link ThemeSchema} definitions ready to use with
3
- * {@link generateThemeCss} or {@link generateThemedCss}.
4
- *
5
- * Each theme exports a complete light + dark mode token schema built
6
- * from the bundled Tailwind color palette.
7
- *
8
- * @module
9
- */
1
+ // This file is auto-generated by scripts/build-themes-mod.ts — do not edit manually.
10
2
  /** Amber primary / olive accent safari theme — golden warmth with earthy highlights. */
11
3
  export { default as amberOliveSafari } from "./amber-olive-safari.js";
12
4
  /** Blue primary / orange accent theme. */
@@ -77,14 +69,14 @@ export { default as slateCyan } from "./slate-cyan.js";
77
69
  export { default as slateTealOcean } from "./slate-teal-ocean.js";
78
70
  /** Neutral stone monochrome theme. */
79
71
  export { default as stone } from "./stone.js";
72
+ /** Stone primary / orange accent earth theme. */
73
+ export { default as stoneOrangeEarth } from "./stone-orange-earth.js";
80
74
  /** Warm neutral taupe monochrome theme. */
81
75
  export { default as taupe } from "./taupe.js";
82
76
  /** Taupe primary / olive accent clay theme — all-earthy, warm and grounded. */
83
77
  export { default as taupeOliveClay } from "./taupe-olive-clay.js";
84
78
  /** Rose primary / pink accent on taupe base — warm blush tones. */
85
79
  export { default as taupeRoseBlush } from "./taupe-rose-blush.js";
86
- /** Stone primary / orange accent earth theme. */
87
- export { default as stoneOrangeEarth } from "./stone-orange-earth.js";
88
80
  /** Teal primary / rose accent theme. */
89
81
  export { default as tealRose } from "./teal-rose.js";
90
82
  /** Violet primary / lime accent theme. */
@@ -93,3 +85,49 @@ export { default as violetLime } from "./violet-lime.js";
93
85
  export { default as violetRoseDusk } from "./violet-rose-dusk.js";
94
86
  /** Neutral zinc monochrome theme. */
95
87
  export { default as zinc } from "./zinc.js";
88
+ /** Kebab-case theme names matching the generated CSS filenames (without extension). */
89
+ export const themeNames = [
90
+ "amber-olive-safari",
91
+ "blue-orange",
92
+ "cyan-red",
93
+ "cyan-slate",
94
+ "emerald-amber-forest",
95
+ "emerald-pink",
96
+ "fuchsia-emerald",
97
+ "gray",
98
+ "indigo-amber",
99
+ "lime-fuchsia-neon",
100
+ "mauve",
101
+ "mauve-lime-electric",
102
+ "mauve-teal",
103
+ "mist",
104
+ "mist-indigo-fjord",
105
+ "mist-violet-aurora",
106
+ "monokai-cyan",
107
+ "monokai-green",
108
+ "monokai-pink",
109
+ "olive",
110
+ "olive-amber-safari",
111
+ "orange-pink-sunset",
112
+ "pink-emerald",
113
+ "pink-teal",
114
+ "purple-yellow",
115
+ "rainbow",
116
+ "red-blue",
117
+ "red-cyan",
118
+ "red-sky",
119
+ "red-sky-slate",
120
+ "rose-teal",
121
+ "sky-amber",
122
+ "slate-cyan",
123
+ "slate-teal-ocean",
124
+ "stone",
125
+ "stone-orange-earth",
126
+ "taupe",
127
+ "taupe-olive-clay",
128
+ "taupe-rose-blush",
129
+ "teal-rose",
130
+ "violet-lime",
131
+ "violet-rose-dusk",
132
+ "zinc",
133
+ ];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@marianmeres/design-tokens",
3
- "version": "1.2.0",
3
+ "version": "1.3.0",
4
4
  "type": "module",
5
5
  "main": "dist/mod.js",
6
6
  "types": "dist/mod.d.ts",
package/dist/themes/dds.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import type { ThemeSchema } from "../types.js";
2
- declare const theme: ThemeSchema;
3
- export default theme;
package/dist/themes/dds.js DELETED
@@ -1,133 +0,0 @@
1
- import { colors } from "../colors.js";
2
- // Custom color palette — hover/active states must be explicit (no auto-derivation)
3
- const theme = {
4
- light: {
5
- colors: {
6
- intent: {
7
- primary: {
8
- DEFAULT: "#13BF89",
9
- foreground: "#2B2A28",
10
- hover: "#42CCA1",
11
- active: "#0F996E",
12
- },
13
- accent: {
14
- DEFAULT: "#F89B20",
15
- foreground: "#2B2A28",
16
- hover: "#C87F16",
17
- active: "#A56A12",
18
- },
19
- destructive: {
20
- DEFAULT: "#E60523",
21
- foreground: "#fff",
22
- hover: "#B8041C",
23
- active: "#930316",
24
- },
25
- warning: {
26
- DEFAULT: "#F37903",
27
- foreground: "#2B2A28",
28
- hover: "#FBB249",
29
- active: "#9E581B",
30
- },
31
- success: {
32
- DEFAULT: "#0DB064",
33
- foreground: "#fff",
34
- hover: "#00853E",
35
- active: "#006A32",
36
- },
37
- },
38
- role: {
39
- paired: {
40
- background: {
41
- DEFAULT: "#fff",
42
- foreground: "#2B2A28",
43
- },
44
- muted: {
45
- DEFAULT: "#E9E8E7",
46
- foreground: "#726F6B",
47
- },
48
- surface: {
49
- DEFAULT: "#DDDCDB",
50
- foreground: "#2B2A28",
51
- hover: "#B1AEAA",
52
- active: "#726F6B",
53
- },
54
- "surface-1": {
55
- DEFAULT: "#B1AEAA",
56
- foreground: "#2B2A28",
57
- hover: "#726F6B",
58
- active: "#5A5855",
59
- },
60
- },
61
- single: {
62
- foreground: "#2B2A28",
63
- border: {
64
- DEFAULT: "#B1AEAA",
65
- },
66
- input: {
67
- DEFAULT: "#fff",
68
- hover: "#F4F3F3",
69
- },
70
- ring: "color-mix(in srgb, #13BF89 20%, transparent)",
71
- },
72
- },
73
- },
74
- },
75
- dark: {
76
- colors: {
77
- intent: {
78
- primary: {
79
- DEFAULT: colors.zinc[200], // zinc-200 (neutral)
80
- foreground: colors.black,
81
- },
82
- accent: {
83
- DEFAULT: colors.amber[400], // amber-400
84
- foreground: colors.black,
85
- },
86
- destructive: {
87
- DEFAULT: colors.rose[500], // rose-500
88
- foreground: colors.white,
89
- },
90
- warning: {
91
- DEFAULT: colors.amber[400], // amber-400
92
- foreground: colors.black,
93
- },
94
- success: {
95
- DEFAULT: colors.teal[500], // teal-500
96
- foreground: colors.white,
97
- },
98
- },
99
- role: {
100
- paired: {
101
- background: {
102
- DEFAULT: colors.zinc[900], // zinc-900 (neutral)
103
- foreground: colors.neutral[50], // zinc-50
104
- },
105
- muted: {
106
- DEFAULT: colors.zinc[800], // zinc-800
107
- foreground: colors.zinc[400], // zinc-400
108
- },
109
- surface: {
110
- DEFAULT: colors.zinc[700], // zinc-700
111
- foreground: colors.zinc[300], // zinc-300
112
- },
113
- "surface-1": {
114
- DEFAULT: colors.zinc[600], // zinc-600
115
- foreground: colors.zinc[200], // zinc-200
116
- },
117
- },
118
- single: {
119
- foreground: colors.neutral[50], // zinc-50
120
- border: {
121
- DEFAULT: colors.zinc[700], // zinc-700
122
- },
123
- input: {
124
- DEFAULT: colors.zinc[900], // zinc-900
125
- hover: colors.zinc[800], // zinc-800
126
- },
127
- ring: `color-mix(in srgb, ${colors.zinc[400]} 25%, transparent)`, // zinc-400
128
- },
129
- },
130
- },
131
- },
132
- };
133
- export default theme;