@marianmeres/design-tokens 1.0.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 (84) hide show
  1. package/AGENTS.md +85 -0
  2. package/API.md +271 -0
  3. package/CLAUDE.md +3 -0
  4. package/LICENSE +21 -0
  5. package/README.md +139 -0
  6. package/dist/colors.d.ts +301 -0
  7. package/dist/colors.js +301 -0
  8. package/dist/generate.d.ts +14 -0
  9. package/dist/generate.js +137 -0
  10. package/dist/mod.d.ts +13 -0
  11. package/dist/mod.js +12 -0
  12. package/dist/reboot-bridge.d.ts +27 -0
  13. package/dist/reboot-bridge.js +89 -0
  14. package/dist/themes/blue-orange.d.ts +3 -0
  15. package/dist/themes/blue-orange.js +117 -0
  16. package/dist/themes/cyan-red.d.ts +3 -0
  17. package/dist/themes/cyan-red.js +117 -0
  18. package/dist/themes/cyan-slate.d.ts +3 -0
  19. package/dist/themes/cyan-slate.js +117 -0
  20. package/dist/themes/dds.d.ts +3 -0
  21. package/dist/themes/dds.js +133 -0
  22. package/dist/themes/emerald-amber-forest.d.ts +3 -0
  23. package/dist/themes/emerald-amber-forest.js +117 -0
  24. package/dist/themes/emerald-pink.d.ts +3 -0
  25. package/dist/themes/emerald-pink.js +117 -0
  26. package/dist/themes/fuchsia-emerald.d.ts +3 -0
  27. package/dist/themes/fuchsia-emerald.js +117 -0
  28. package/dist/themes/gray.d.ts +3 -0
  29. package/dist/themes/gray.js +66 -0
  30. package/dist/themes/indigo-amber.d.ts +3 -0
  31. package/dist/themes/indigo-amber.js +117 -0
  32. package/dist/themes/lime-fuchsia-neon.d.ts +3 -0
  33. package/dist/themes/lime-fuchsia-neon.js +117 -0
  34. package/dist/themes/mod.d.ts +72 -0
  35. package/dist/themes/mod.js +71 -0
  36. package/dist/themes/monokai-cyan.d.ts +3 -0
  37. package/dist/themes/monokai-cyan.js +119 -0
  38. package/dist/themes/monokai-green.d.ts +3 -0
  39. package/dist/themes/monokai-green.js +119 -0
  40. package/dist/themes/monokai-pink.d.ts +3 -0
  41. package/dist/themes/monokai-pink.js +119 -0
  42. package/dist/themes/orange-pink-sunset.d.ts +3 -0
  43. package/dist/themes/orange-pink-sunset.js +117 -0
  44. package/dist/themes/pink-emerald.d.ts +3 -0
  45. package/dist/themes/pink-emerald.js +117 -0
  46. package/dist/themes/pink-teal.d.ts +3 -0
  47. package/dist/themes/pink-teal.js +117 -0
  48. package/dist/themes/purple-yellow.d.ts +3 -0
  49. package/dist/themes/purple-yellow.js +117 -0
  50. package/dist/themes/rainbow.d.ts +3 -0
  51. package/dist/themes/rainbow.js +122 -0
  52. package/dist/themes/red-blue.d.ts +3 -0
  53. package/dist/themes/red-blue.js +117 -0
  54. package/dist/themes/red-cyan.d.ts +3 -0
  55. package/dist/themes/red-cyan.js +117 -0
  56. package/dist/themes/red-sky-slate.d.ts +3 -0
  57. package/dist/themes/red-sky-slate.js +117 -0
  58. package/dist/themes/red-sky.d.ts +3 -0
  59. package/dist/themes/red-sky.js +117 -0
  60. package/dist/themes/rose-teal.d.ts +3 -0
  61. package/dist/themes/rose-teal.js +117 -0
  62. package/dist/themes/sky-amber.d.ts +3 -0
  63. package/dist/themes/sky-amber.js +117 -0
  64. package/dist/themes/slate-cyan.d.ts +3 -0
  65. package/dist/themes/slate-cyan.js +117 -0
  66. package/dist/themes/slate-teal-ocean.d.ts +3 -0
  67. package/dist/themes/slate-teal-ocean.js +117 -0
  68. package/dist/themes/stone-orange-earth.d.ts +3 -0
  69. package/dist/themes/stone-orange-earth.js +117 -0
  70. package/dist/themes/stone.d.ts +3 -0
  71. package/dist/themes/stone.js +72 -0
  72. package/dist/themes/teal-rose.d.ts +3 -0
  73. package/dist/themes/teal-rose.js +117 -0
  74. package/dist/themes/violet-lime.d.ts +3 -0
  75. package/dist/themes/violet-lime.js +117 -0
  76. package/dist/themes/violet-rose-dusk.d.ts +3 -0
  77. package/dist/themes/violet-rose-dusk.js +117 -0
  78. package/dist/themes/zinc.d.ts +3 -0
  79. package/dist/themes/zinc.js +66 -0
  80. package/dist/types.d.ts +48 -0
  81. package/dist/types.js +1 -0
  82. package/dist/utils.d.ts +11 -0
  83. package/dist/utils.js +28 -0
  84. package/package.json +23 -0
package/dist/themes/orange-pink-sunset.js ADDED
@@ -0,0 +1,117 @@
1
+ import { colors } from "../colors.js";
2
+ const light = {
3
+ colors: {
4
+ intent: {
5
+ primary: {
6
+ DEFAULT: colors.orange[600],
7
+ foreground: colors.white,
8
+ },
9
+ accent: {
10
+ DEFAULT: colors.pink[500],
11
+ foreground: colors.white,
12
+ },
13
+ destructive: {
14
+ DEFAULT: colors.red[600],
15
+ foreground: colors.white,
16
+ },
17
+ warning: {
18
+ DEFAULT: colors.amber[500],
19
+ foreground: colors.white,
20
+ },
21
+ success: {
22
+ DEFAULT: colors.emerald[600],
23
+ foreground: colors.white,
24
+ },
25
+ },
26
+ role: {
27
+ paired: {
28
+ background: {
29
+ DEFAULT: colors.orange[50],
30
+ foreground: colors.stone[900],
31
+ },
32
+ muted: {
33
+ DEFAULT: colors.amber[100],
34
+ foreground: colors.stone[500],
35
+ },
36
+ surface: {
37
+ DEFAULT: colors.amber[200],
38
+ foreground: colors.stone[900],
39
+ },
40
+ "surface-1": {
41
+ DEFAULT: colors.amber[300],
42
+ foreground: colors.stone[900],
43
+ },
44
+ },
45
+ single: {
46
+ foreground: colors.stone[900],
47
+ border: {
48
+ DEFAULT: colors.amber[300],
49
+ },
50
+ input: {
51
+ DEFAULT: colors.white,
52
+ hover: colors.orange[50],
53
+ },
54
+ ring: `color-mix(in srgb, ${colors.orange[600]} 20%, transparent)`,
55
+ },
56
+ },
57
+ },
58
+ };
59
+ const dark = {
60
+ colors: {
61
+ intent: {
62
+ primary: {
63
+ DEFAULT: colors.orange[500],
64
+ foreground: colors.black,
65
+ },
66
+ accent: {
67
+ DEFAULT: colors.pink[400],
68
+ foreground: colors.white,
69
+ },
70
+ destructive: {
71
+ DEFAULT: colors.red[500],
72
+ foreground: colors.white,
73
+ },
74
+ warning: {
75
+ DEFAULT: colors.amber[400],
76
+ foreground: colors.black,
77
+ },
78
+ success: {
79
+ DEFAULT: colors.emerald[500],
80
+ foreground: colors.white,
81
+ },
82
+ },
83
+ role: {
84
+ paired: {
85
+ background: {
86
+ DEFAULT: colors.stone[950],
87
+ foreground: colors.stone[50],
88
+ },
89
+ muted: {
90
+ DEFAULT: colors.stone[900],
91
+ foreground: colors.stone[500],
92
+ },
93
+ surface: {
94
+ DEFAULT: colors.stone[800],
95
+ foreground: colors.stone[400],
96
+ },
97
+ "surface-1": {
98
+ DEFAULT: colors.stone[700],
99
+ foreground: colors.stone[300],
100
+ },
101
+ },
102
+ single: {
103
+ foreground: colors.stone[50],
104
+ border: {
105
+ DEFAULT: colors.stone[700],
106
+ },
107
+ input: {
108
+ DEFAULT: colors.stone[950],
109
+ hover: colors.stone[900],
110
+ },
111
+ ring: `color-mix(in srgb, ${colors.orange[500]} 25%, transparent)`,
112
+ },
113
+ },
114
+ },
115
+ };
116
+ const theme = { light, dark };
117
+ export default theme;
package/dist/themes/pink-emerald.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import type { ThemeSchema } from "../types.js";
2
+ declare const theme: ThemeSchema;
3
+ export default theme;
package/dist/themes/pink-emerald.js ADDED
@@ -0,0 +1,117 @@
1
+ import { colors } from "../colors.js";
2
+ const light = {
3
+ colors: {
4
+ intent: {
5
+ primary: {
6
+ DEFAULT: colors.pink[600],
7
+ foreground: colors.white,
8
+ },
9
+ accent: {
10
+ DEFAULT: colors.emerald[500],
11
+ foreground: colors.white,
12
+ },
13
+ destructive: {
14
+ DEFAULT: colors.pink[600],
15
+ foreground: colors.white,
16
+ },
17
+ warning: {
18
+ DEFAULT: colors.amber[500],
19
+ foreground: colors.white,
20
+ },
21
+ success: {
22
+ DEFAULT: colors.emerald[600],
23
+ foreground: colors.white,
24
+ },
25
+ },
26
+ role: {
27
+ paired: {
28
+ background: {
29
+ DEFAULT: colors.white,
30
+ foreground: colors.stone[900],
31
+ },
32
+ muted: {
33
+ DEFAULT: colors.stone[100],
34
+ foreground: colors.stone[500],
35
+ },
36
+ surface: {
37
+ DEFAULT: colors.stone[200],
38
+ foreground: colors.stone[900],
39
+ },
40
+ "surface-1": {
41
+ DEFAULT: colors.stone[300],
42
+ foreground: colors.stone[900],
43
+ },
44
+ },
45
+ single: {
46
+ foreground: colors.stone[900],
47
+ border: {
48
+ DEFAULT: colors.stone[300],
49
+ },
50
+ input: {
51
+ DEFAULT: colors.white,
52
+ hover: colors.stone[50],
53
+ },
54
+ ring: `color-mix(in srgb, ${colors.pink[600]} 20%, transparent)`,
55
+ },
56
+ },
57
+ },
58
+ };
59
+ const dark = {
60
+ colors: {
61
+ intent: {
62
+ primary: {
63
+ DEFAULT: colors.pink[500],
64
+ foreground: colors.white,
65
+ },
66
+ accent: {
67
+ DEFAULT: colors.emerald[400],
68
+ foreground: colors.white,
69
+ },
70
+ destructive: {
71
+ DEFAULT: colors.pink[500],
72
+ foreground: colors.white,
73
+ },
74
+ warning: {
75
+ DEFAULT: colors.amber[400],
76
+ foreground: colors.black,
77
+ },
78
+ success: {
79
+ DEFAULT: colors.emerald[500],
80
+ foreground: colors.white,
81
+ },
82
+ },
83
+ role: {
84
+ paired: {
85
+ background: {
86
+ DEFAULT: colors.stone[900],
87
+ foreground: colors.stone[50],
88
+ },
89
+ muted: {
90
+ DEFAULT: colors.stone[800],
91
+ foreground: colors.stone[400],
92
+ },
93
+ surface: {
94
+ DEFAULT: colors.stone[700],
95
+ foreground: colors.stone[300],
96
+ },
97
+ "surface-1": {
98
+ DEFAULT: colors.stone[600],
99
+ foreground: colors.stone[200],
100
+ },
101
+ },
102
+ single: {
103
+ foreground: colors.stone[50],
104
+ border: {
105
+ DEFAULT: colors.stone[700],
106
+ },
107
+ input: {
108
+ DEFAULT: colors.stone[900],
109
+ hover: colors.stone[800],
110
+ },
111
+ ring: `color-mix(in srgb, ${colors.pink[400]} 25%, transparent)`,
112
+ },
113
+ },
114
+ },
115
+ };
116
+ const theme = { light, dark };
117
+ export default theme;
package/dist/themes/pink-teal.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import type { ThemeSchema } from "../types.js";
2
+ declare const theme: ThemeSchema;
3
+ export default theme;
package/dist/themes/pink-teal.js ADDED
@@ -0,0 +1,117 @@
1
+ import { colors } from "../colors.js";
2
+ const light = {
3
+ colors: {
4
+ intent: {
5
+ primary: {
6
+ DEFAULT: colors.pink[600],
7
+ foreground: colors.white,
8
+ },
9
+ accent: {
10
+ DEFAULT: colors.teal[500],
11
+ foreground: colors.white,
12
+ },
13
+ destructive: {
14
+ DEFAULT: colors.pink[600],
15
+ foreground: colors.white,
16
+ },
17
+ warning: {
18
+ DEFAULT: colors.amber[500],
19
+ foreground: colors.white,
20
+ },
21
+ success: {
22
+ DEFAULT: colors.teal[600],
23
+ foreground: colors.white,
24
+ },
25
+ },
26
+ role: {
27
+ paired: {
28
+ background: {
29
+ DEFAULT: colors.white,
30
+ foreground: colors.stone[900],
31
+ },
32
+ muted: {
33
+ DEFAULT: colors.stone[100],
34
+ foreground: colors.stone[500],
35
+ },
36
+ surface: {
37
+ DEFAULT: colors.stone[200],
38
+ foreground: colors.stone[900],
39
+ },
40
+ "surface-1": {
41
+ DEFAULT: colors.stone[300],
42
+ foreground: colors.stone[900],
43
+ },
44
+ },
45
+ single: {
46
+ foreground: colors.stone[900],
47
+ border: {
48
+ DEFAULT: colors.stone[300],
49
+ },
50
+ input: {
51
+ DEFAULT: colors.white,
52
+ hover: colors.stone[50],
53
+ },
54
+ ring: `color-mix(in srgb, ${colors.pink[600]} 20%, transparent)`,
55
+ },
56
+ },
57
+ },
58
+ };
59
+ const dark = {
60
+ colors: {
61
+ intent: {
62
+ primary: {
63
+ DEFAULT: colors.pink[500],
64
+ foreground: colors.white,
65
+ },
66
+ accent: {
67
+ DEFAULT: colors.teal[400],
68
+ foreground: colors.white,
69
+ },
70
+ destructive: {
71
+ DEFAULT: colors.pink[500],
72
+ foreground: colors.white,
73
+ },
74
+ warning: {
75
+ DEFAULT: colors.amber[400],
76
+ foreground: colors.black,
77
+ },
78
+ success: {
79
+ DEFAULT: colors.teal[500],
80
+ foreground: colors.white,
81
+ },
82
+ },
83
+ role: {
84
+ paired: {
85
+ background: {
86
+ DEFAULT: colors.stone[900],
87
+ foreground: colors.stone[50],
88
+ },
89
+ muted: {
90
+ DEFAULT: colors.stone[800],
91
+ foreground: colors.stone[400],
92
+ },
93
+ surface: {
94
+ DEFAULT: colors.stone[700],
95
+ foreground: colors.stone[300],
96
+ },
97
+ "surface-1": {
98
+ DEFAULT: colors.stone[600],
99
+ foreground: colors.stone[200],
100
+ },
101
+ },
102
+ single: {
103
+ foreground: colors.stone[50],
104
+ border: {
105
+ DEFAULT: colors.stone[700],
106
+ },
107
+ input: {
108
+ DEFAULT: colors.stone[900],
109
+ hover: colors.stone[800],
110
+ },
111
+ ring: `color-mix(in srgb, ${colors.pink[400]} 25%, transparent)`,
112
+ },
113
+ },
114
+ },
115
+ };
116
+ const theme = { light, dark };
117
+ export default theme;
package/dist/themes/purple-yellow.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import type { ThemeSchema } from "../types.js";
2
+ declare const theme: ThemeSchema;
3
+ export default theme;
package/dist/themes/purple-yellow.js ADDED
@@ -0,0 +1,117 @@
1
+ import { colors } from "../colors.js";
2
+ const light = {
3
+ colors: {
4
+ intent: {
5
+ primary: {
6
+ DEFAULT: colors.purple[600],
7
+ foreground: colors.white,
8
+ },
9
+ accent: {
10
+ DEFAULT: colors.yellow[400],
11
+ foreground: colors.black,
12
+ },
13
+ destructive: {
14
+ DEFAULT: colors.rose[600],
15
+ foreground: colors.white,
16
+ },
17
+ warning: {
18
+ DEFAULT: colors.yellow[400],
19
+ foreground: colors.black,
20
+ },
21
+ success: {
22
+ DEFAULT: colors.teal[600],
23
+ foreground: colors.white,
24
+ },
25
+ },
26
+ role: {
27
+ paired: {
28
+ background: {
29
+ DEFAULT: colors.white,
30
+ foreground: colors.stone[900],
31
+ },
32
+ muted: {
33
+ DEFAULT: colors.stone[100],
34
+ foreground: colors.stone[500],
35
+ },
36
+ surface: {
37
+ DEFAULT: colors.stone[200],
38
+ foreground: colors.stone[900],
39
+ },
40
+ "surface-1": {
41
+ DEFAULT: colors.stone[300],
42
+ foreground: colors.stone[900],
43
+ },
44
+ },
45
+ single: {
46
+ foreground: colors.stone[900],
47
+ border: {
48
+ DEFAULT: colors.stone[300],
49
+ },
50
+ input: {
51
+ DEFAULT: colors.white,
52
+ hover: colors.stone[50],
53
+ },
54
+ ring: `color-mix(in srgb, ${colors.purple[600]} 20%, transparent)`,
55
+ },
56
+ },
57
+ },
58
+ };
59
+ const dark = {
60
+ colors: {
61
+ intent: {
62
+ primary: {
63
+ DEFAULT: colors.purple[500],
64
+ foreground: colors.white,
65
+ },
66
+ accent: {
67
+ DEFAULT: colors.yellow[300],
68
+ foreground: colors.black,
69
+ },
70
+ destructive: {
71
+ DEFAULT: colors.rose[500],
72
+ foreground: colors.white,
73
+ },
74
+ warning: {
75
+ DEFAULT: colors.yellow[300],
76
+ foreground: colors.black,
77
+ },
78
+ success: {
79
+ DEFAULT: colors.teal[500],
80
+ foreground: colors.white,
81
+ },
82
+ },
83
+ role: {
84
+ paired: {
85
+ background: {
86
+ DEFAULT: colors.stone[900],
87
+ foreground: colors.stone[50],
88
+ },
89
+ muted: {
90
+ DEFAULT: colors.stone[800],
91
+ foreground: colors.stone[400],
92
+ },
93
+ surface: {
94
+ DEFAULT: colors.stone[700],
95
+ foreground: colors.stone[300],
96
+ },
97
+ "surface-1": {
98
+ DEFAULT: colors.stone[600],
99
+ foreground: colors.stone[200],
100
+ },
101
+ },
102
+ single: {
103
+ foreground: colors.stone[50],
104
+ border: {
105
+ DEFAULT: colors.stone[700],
106
+ },
107
+ input: {
108
+ DEFAULT: colors.stone[900],
109
+ hover: colors.stone[800],
110
+ },
111
+ ring: `color-mix(in srgb, ${colors.purple[400]} 25%, transparent)`,
112
+ },
113
+ },
114
+ },
115
+ };
116
+ const theme = { light, dark };
117
+ export default theme;
package/dist/themes/rainbow.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import type { ThemeSchema } from "../types.js";
2
+ declare const theme: ThemeSchema;
3
+ export default theme;
package/dist/themes/rainbow.js ADDED
@@ -0,0 +1,122 @@
1
+ import { colors } from "../colors.js";
2
+ const light = {
3
+ colors: {
4
+ intent: {
5
+ primary: {
6
+ DEFAULT: colors.blue[600],
7
+ foreground: colors.white,
8
+ // foregroundHover/Active not defined → falls back to foreground
9
+ },
10
+ accent: {
11
+ DEFAULT: colors.violet[500],
12
+ foreground: colors.white,
13
+ },
14
+ destructive: {
15
+ DEFAULT: colors.red[600],
16
+ foreground: colors.white,
17
+ },
18
+ warning: {
19
+ DEFAULT: colors.amber[500],
20
+ foreground: colors.white,
21
+ },
22
+ success: {
23
+ DEFAULT: colors.green[600],
24
+ foreground: colors.white,
25
+ },
26
+ },
27
+ role: {
28
+ paired: {
29
+ background: {
30
+ DEFAULT: colors.white,
31
+ foreground: colors.slate[900],
32
+ // No hover/active for background (rarely needed)
33
+ },
34
+ muted: {
35
+ DEFAULT: colors.slate[100],
36
+ foreground: colors.slate[500],
37
+ },
38
+ surface: {
39
+ DEFAULT: colors.slate[200],
40
+ foreground: colors.slate[900],
41
+ },
42
+ "surface-1": {
43
+ DEFAULT: colors.slate[300],
44
+ foreground: colors.slate[900],
45
+ },
46
+ },
47
+ single: {
48
+ // Plain string: same value for all states
49
+ foreground: colors.slate[900],
50
+ // Object with explicit hover/active
51
+ border: {
52
+ DEFAULT: colors.slate[300],
53
+ },
54
+ input: {
55
+ DEFAULT: colors.white,
56
+ hover: colors.slate[50],
57
+ // active not defined → falls back to DEFAULT
58
+ },
59
+ ring: `color-mix(in srgb, ${colors.blue[600]} 20%, transparent)`,
60
+ },
61
+ },
62
+ },
63
+ };
64
+ const dark = {
65
+ colors: {
66
+ intent: {
67
+ primary: {
68
+ DEFAULT: colors.blue[500],
69
+ foreground: colors.white,
70
+ },
71
+ accent: {
72
+ DEFAULT: colors.violet[400],
73
+ foreground: colors.white,
74
+ },
75
+ destructive: {
76
+ DEFAULT: colors.red[500],
77
+ foreground: colors.white,
78
+ },
79
+ warning: {
80
+ DEFAULT: colors.amber[400],
81
+ foreground: colors.black,
82
+ },
83
+ success: {
84
+ DEFAULT: colors.green[500],
85
+ foreground: colors.white,
86
+ },
87
+ },
88
+ role: {
89
+ paired: {
90
+ background: {
91
+ DEFAULT: colors.slate[900],
92
+ foreground: colors.slate[50],
93
+ },
94
+ muted: {
95
+ DEFAULT: colors.slate[800],
96
+ foreground: colors.slate[400],
97
+ },
98
+ surface: {
99
+ DEFAULT: colors.slate[700],
100
+ foreground: colors.slate[300],
101
+ },
102
+ "surface-1": {
103
+ DEFAULT: colors.slate[600],
104
+ foreground: colors.slate[200],
105
+ },
106
+ },
107
+ single: {
108
+ foreground: colors.slate[50],
109
+ border: {
110
+ DEFAULT: colors.slate[700],
111
+ },
112
+ input: {
113
+ DEFAULT: colors.slate[900],
114
+ hover: colors.slate[800],
115
+ },
116
+ ring: `color-mix(in srgb, ${colors.blue[400]} 25%, transparent)`,
117
+ },
118
+ },
119
+ },
120
+ };
121
+ const theme = { light, dark };
122
+ export default theme;
package/dist/themes/red-blue.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import type { ThemeSchema } from "../types.js";
2
+ declare const theme: ThemeSchema;
3
+ export default theme;