@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/red-blue.js ADDED
@@ -0,0 +1,117 @@
1
+ import { colors } from "../colors.js";
2
+ const light = {
3
+ colors: {
4
+ intent: {
5
+ primary: {
6
+ DEFAULT: colors.red[600],
7
+ foreground: colors.white,
8
+ },
9
+ accent: {
10
+ DEFAULT: colors.blue[400],
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.white,
30
+ foreground: colors.slate[900],
31
+ },
32
+ muted: {
33
+ DEFAULT: colors.slate[100],
34
+ foreground: colors.slate[500],
35
+ },
36
+ surface: {
37
+ DEFAULT: colors.slate[200],
38
+ foreground: colors.slate[900],
39
+ },
40
+ "surface-1": {
41
+ DEFAULT: colors.slate[300],
42
+ foreground: colors.slate[900],
43
+ },
44
+ },
45
+ single: {
46
+ foreground: colors.slate[900],
47
+ border: {
48
+ DEFAULT: colors.slate[300],
49
+ },
50
+ input: {
51
+ DEFAULT: colors.white,
52
+ hover: colors.slate[50],
53
+ },
54
+ ring: `color-mix(in srgb, ${colors.red[600]} 20%, transparent)`,
55
+ },
56
+ },
57
+ },
58
+ };
59
+ const dark = {
60
+ colors: {
61
+ intent: {
62
+ primary: {
63
+ DEFAULT: colors.red[500],
64
+ foreground: colors.white,
65
+ },
66
+ accent: {
67
+ DEFAULT: colors.blue[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.white,
77
+ },
78
+ success: {
79
+ DEFAULT: colors.emerald[500],
80
+ foreground: colors.white,
81
+ },
82
+ },
83
+ role: {
84
+ paired: {
85
+ background: {
86
+ DEFAULT: colors.slate[900],
87
+ foreground: colors.slate[50],
88
+ },
89
+ muted: {
90
+ DEFAULT: colors.slate[800],
91
+ foreground: colors.slate[400],
92
+ },
93
+ surface: {
94
+ DEFAULT: colors.slate[700],
95
+ foreground: colors.slate[300],
96
+ },
97
+ "surface-1": {
98
+ DEFAULT: colors.slate[600],
99
+ foreground: colors.slate[200],
100
+ },
101
+ },
102
+ single: {
103
+ foreground: colors.slate[50],
104
+ border: {
105
+ DEFAULT: colors.slate[700],
106
+ },
107
+ input: {
108
+ DEFAULT: colors.slate[900],
109
+ hover: colors.slate[800],
110
+ },
111
+ ring: `color-mix(in srgb, ${colors.red[400]} 25%, transparent)`,
112
+ },
113
+ },
114
+ },
115
+ };
116
+ const theme = { light, dark };
117
+ export default theme;
package/dist/themes/red-cyan.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/red-cyan.js ADDED
@@ -0,0 +1,117 @@
1
+ import { colors } from "../colors.js";
2
+ const light = {
3
+ colors: {
4
+ intent: {
5
+ primary: {
6
+ DEFAULT: colors.red[600],
7
+ foreground: colors.white,
8
+ },
9
+ accent: {
10
+ DEFAULT: colors.cyan[500],
11
+ foreground: colors.white,
12
+ },
13
+ destructive: {
14
+ DEFAULT: colors.red[600],
15
+ foreground: colors.white,
16
+ },
17
+ warning: {
18
+ DEFAULT: colors.orange[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.red[600]} 20%, transparent)`,
55
+ },
56
+ },
57
+ },
58
+ };
59
+ const dark = {
60
+ colors: {
61
+ intent: {
62
+ primary: {
63
+ DEFAULT: colors.red[500],
64
+ foreground: colors.white,
65
+ },
66
+ accent: {
67
+ DEFAULT: colors.cyan[400],
68
+ foreground: colors.white,
69
+ },
70
+ destructive: {
71
+ DEFAULT: colors.red[500],
72
+ foreground: colors.white,
73
+ },
74
+ warning: {
75
+ DEFAULT: colors.orange[400],
76
+ foreground: colors.white,
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.red[400]} 25%, transparent)`,
112
+ },
113
+ },
114
+ },
115
+ };
116
+ const theme = { light, dark };
117
+ export default theme;
package/dist/themes/red-sky-slate.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/red-sky-slate.js ADDED
@@ -0,0 +1,117 @@
1
+ import { colors } from "../colors.js";
2
+ const light = {
3
+ colors: {
4
+ intent: {
5
+ primary: {
6
+ DEFAULT: colors.red[600],
7
+ foreground: colors.white,
8
+ },
9
+ accent: {
10
+ DEFAULT: colors.sky[400],
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.white,
30
+ foreground: colors.slate[900],
31
+ },
32
+ muted: {
33
+ DEFAULT: colors.slate[100],
34
+ foreground: colors.slate[500],
35
+ },
36
+ surface: {
37
+ DEFAULT: colors.slate[200],
38
+ foreground: colors.slate[900],
39
+ },
40
+ "surface-1": {
41
+ DEFAULT: colors.slate[300],
42
+ foreground: colors.slate[900],
43
+ },
44
+ },
45
+ single: {
46
+ foreground: colors.slate[900],
47
+ border: {
48
+ DEFAULT: colors.slate[300],
49
+ },
50
+ input: {
51
+ DEFAULT: colors.white,
52
+ hover: colors.slate[50],
53
+ },
54
+ ring: `color-mix(in srgb, ${colors.red[600]} 20%, transparent)`,
55
+ },
56
+ },
57
+ },
58
+ };
59
+ const dark = {
60
+ colors: {
61
+ intent: {
62
+ primary: {
63
+ DEFAULT: colors.red[500],
64
+ foreground: colors.white,
65
+ },
66
+ accent: {
67
+ DEFAULT: colors.sky[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.white,
77
+ },
78
+ success: {
79
+ DEFAULT: colors.emerald[500],
80
+ foreground: colors.white,
81
+ },
82
+ },
83
+ role: {
84
+ paired: {
85
+ background: {
86
+ DEFAULT: colors.slate[900],
87
+ foreground: colors.slate[50],
88
+ },
89
+ muted: {
90
+ DEFAULT: colors.slate[800],
91
+ foreground: colors.slate[400],
92
+ },
93
+ surface: {
94
+ DEFAULT: colors.slate[700],
95
+ foreground: colors.slate[300],
96
+ },
97
+ "surface-1": {
98
+ DEFAULT: colors.slate[600],
99
+ foreground: colors.slate[200],
100
+ },
101
+ },
102
+ single: {
103
+ foreground: colors.slate[50],
104
+ border: {
105
+ DEFAULT: colors.slate[700],
106
+ },
107
+ input: {
108
+ DEFAULT: colors.slate[900],
109
+ hover: colors.slate[800],
110
+ },
111
+ ring: `color-mix(in srgb, ${colors.red[400]} 25%, transparent)`,
112
+ },
113
+ },
114
+ },
115
+ };
116
+ const theme = { light, dark };
117
+ export default theme;
package/dist/themes/red-sky.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/red-sky.js ADDED
@@ -0,0 +1,117 @@
1
+ import { colors } from "../colors.js";
2
+ const light = {
3
+ colors: {
4
+ intent: {
5
+ primary: {
6
+ DEFAULT: colors.red[600],
7
+ foreground: colors.white,
8
+ },
9
+ accent: {
10
+ DEFAULT: colors.sky[400],
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.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.red[600]} 20%, transparent)`,
55
+ },
56
+ },
57
+ },
58
+ };
59
+ const dark = {
60
+ colors: {
61
+ intent: {
62
+ primary: {
63
+ DEFAULT: colors.red[500],
64
+ foreground: colors.white,
65
+ },
66
+ accent: {
67
+ DEFAULT: colors.sky[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.white,
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.red[400]} 25%, transparent)`,
112
+ },
113
+ },
114
+ },
115
+ };
116
+ const theme = { light, dark };
117
+ export default theme;
package/dist/themes/rose-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/rose-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.rose[600],
7
+ foreground: colors.white,
8
+ },
9
+ accent: {
10
+ DEFAULT: colors.teal[500],
11
+ foreground: colors.white,
12
+ },
13
+ destructive: {
14
+ DEFAULT: colors.rose[600],
15
+ foreground: colors.white,
16
+ },
17
+ warning: {
18
+ DEFAULT: colors.orange[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.neutral[900],
31
+ },
32
+ muted: {
33
+ DEFAULT: colors.neutral[100],
34
+ foreground: colors.neutral[500],
35
+ },
36
+ surface: {
37
+ DEFAULT: colors.neutral[200],
38
+ foreground: colors.neutral[900],
39
+ },
40
+ "surface-1": {
41
+ DEFAULT: colors.neutral[300],
42
+ foreground: colors.neutral[900],
43
+ },
44
+ },
45
+ single: {
46
+ foreground: colors.neutral[900],
47
+ border: {
48
+ DEFAULT: colors.neutral[300],
49
+ },
50
+ input: {
51
+ DEFAULT: colors.white,
52
+ hover: colors.neutral[50],
53
+ },
54
+ ring: `color-mix(in srgb, ${colors.rose[600]} 20%, transparent)`,
55
+ },
56
+ },
57
+ },
58
+ };
59
+ const dark = {
60
+ colors: {
61
+ intent: {
62
+ primary: {
63
+ DEFAULT: colors.rose[500],
64
+ foreground: colors.white,
65
+ },
66
+ accent: {
67
+ DEFAULT: colors.teal[400],
68
+ foreground: colors.white,
69
+ },
70
+ destructive: {
71
+ DEFAULT: colors.rose[500],
72
+ foreground: colors.white,
73
+ },
74
+ warning: {
75
+ DEFAULT: colors.orange[400],
76
+ foreground: colors.white,
77
+ },
78
+ success: {
79
+ DEFAULT: colors.teal[500],
80
+ foreground: colors.white,
81
+ },
82
+ },
83
+ role: {
84
+ paired: {
85
+ background: {
86
+ DEFAULT: colors.neutral[900],
87
+ foreground: colors.neutral[50],
88
+ },
89
+ muted: {
90
+ DEFAULT: colors.neutral[800],
91
+ foreground: colors.neutral[400],
92
+ },
93
+ surface: {
94
+ DEFAULT: colors.neutral[700],
95
+ foreground: colors.neutral[300],
96
+ },
97
+ "surface-1": {
98
+ DEFAULT: colors.neutral[600],
99
+ foreground: colors.neutral[200],
100
+ },
101
+ },
102
+ single: {
103
+ foreground: colors.neutral[50],
104
+ border: {
105
+ DEFAULT: colors.neutral[700],
106
+ },
107
+ input: {
108
+ DEFAULT: colors.neutral[900],
109
+ hover: colors.neutral[800],
110
+ },
111
+ ring: `color-mix(in srgb, ${colors.rose[400]} 25%, transparent)`,
112
+ },
113
+ },
114
+ },
115
+ };
116
+ const theme = { light, dark };
117
+ export default theme;
package/dist/themes/sky-amber.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import type { ThemeSchema } from "../types.js";
2
+ declare const theme: ThemeSchema;
3
+ export default theme;