@marianmeres/design-tokens 1.0.3 → 1.1.2

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 (71) hide show
  1. package/dist/colors.d.ts +52 -0
  2. package/dist/colors.js +52 -0
  3. package/dist/css/blue-orange.css +215 -0
  4. package/dist/css/cyan-red.css +215 -0
  5. package/dist/css/cyan-slate.css +215 -0
  6. package/dist/css/emerald-amber-forest.css +215 -0
  7. package/dist/css/emerald-pink.css +215 -0
  8. package/dist/css/fuchsia-emerald.css +215 -0
  9. package/dist/css/gray.css +215 -0
  10. package/dist/css/indigo-amber.css +215 -0
  11. package/dist/css/lime-fuchsia-neon.css +215 -0
  12. package/dist/css/mauve-lime-electric.css +215 -0
  13. package/dist/css/mauve-teal.css +215 -0
  14. package/dist/css/mauve.css +215 -0
  15. package/dist/css/mist-indigo-fjord.css +215 -0
  16. package/dist/css/mist-violet-aurora.css +215 -0
  17. package/dist/css/mist.css +215 -0
  18. package/dist/css/monokai-cyan.css +215 -0
  19. package/dist/css/monokai-green.css +215 -0
  20. package/dist/css/monokai-pink.css +215 -0
  21. package/dist/css/olive-amber-safari.css +215 -0
  22. package/dist/css/olive.css +215 -0
  23. package/dist/css/orange-pink-sunset.css +215 -0
  24. package/dist/css/pink-emerald.css +215 -0
  25. package/dist/css/pink-teal.css +215 -0
  26. package/dist/css/purple-yellow.css +215 -0
  27. package/dist/css/rainbow.css +215 -0
  28. package/dist/css/red-blue.css +215 -0
  29. package/dist/css/red-cyan.css +215 -0
  30. package/dist/css/red-sky-slate.css +215 -0
  31. package/dist/css/red-sky.css +215 -0
  32. package/dist/css/rose-teal.css +215 -0
  33. package/dist/css/sky-amber.css +215 -0
  34. package/dist/css/slate-cyan.css +215 -0
  35. package/dist/css/slate-teal-ocean.css +215 -0
  36. package/dist/css/stone-orange-earth.css +215 -0
  37. package/dist/css/stone.css +215 -0
  38. package/dist/css/taupe-olive-clay.css +215 -0
  39. package/dist/css/taupe-rose-blush.css +215 -0
  40. package/dist/css/taupe.css +215 -0
  41. package/dist/css/teal-rose.css +215 -0
  42. package/dist/css/violet-lime.css +215 -0
  43. package/dist/css/violet-rose-dusk.css +215 -0
  44. package/dist/css/zinc.css +215 -0
  45. package/dist/mod.d.ts +33 -3
  46. package/dist/mod.js +11 -2
  47. package/dist/themes/mauve-lime-electric.d.ts +4 -0
  48. package/dist/themes/mauve-lime-electric.js +118 -0
  49. package/dist/themes/mauve-teal.d.ts +4 -0
  50. package/dist/themes/mauve-teal.js +118 -0
  51. package/dist/themes/mauve.d.ts +4 -0
  52. package/dist/themes/mauve.js +73 -0
  53. package/dist/themes/mist-indigo-fjord.d.ts +4 -0
  54. package/dist/themes/mist-indigo-fjord.js +118 -0
  55. package/dist/themes/mist-violet-aurora.d.ts +4 -0
  56. package/dist/themes/mist-violet-aurora.js +118 -0
  57. package/dist/themes/mist.d.ts +4 -0
  58. package/dist/themes/mist.js +73 -0
  59. package/dist/themes/mod.d.ts +23 -1
  60. package/dist/themes/mod.js +23 -1
  61. package/dist/themes/olive-amber-safari.d.ts +4 -0
  62. package/dist/themes/olive-amber-safari.js +118 -0
  63. package/dist/themes/olive.d.ts +4 -0
  64. package/dist/themes/olive.js +73 -0
  65. package/dist/themes/taupe-olive-clay.d.ts +4 -0
  66. package/dist/themes/taupe-olive-clay.js +118 -0
  67. package/dist/themes/taupe-rose-blush.d.ts +4 -0
  68. package/dist/themes/taupe-rose-blush.js +118 -0
  69. package/dist/themes/taupe.d.ts +4 -0
  70. package/dist/themes/taupe.js +73 -0
  71. package/package.json +3 -2
package/dist/colors.d.ts CHANGED
@@ -64,6 +64,19 @@ export declare const colors: {
64
64
  readonly 900: "#171717";
65
65
  readonly 950: "#0a0a0a";
66
66
  };
67
+ readonly olive: {
68
+ readonly 50: "#fbfbf9";
69
+ readonly 100: "#f4f4f0";
70
+ readonly 200: "#e8e8e3";
71
+ readonly 300: "#d8d8d0";
72
+ readonly 400: "#abab9c";
73
+ readonly 500: "#7c7c67";
74
+ readonly 600: "#5b5b4b";
75
+ readonly 700: "#474739";
76
+ readonly 800: "#2b2b22";
77
+ readonly 900: "#1d1d16";
78
+ readonly 950: "#0c0c09";
79
+ };
67
80
  readonly stone: {
68
81
  readonly 50: "#fafaf9";
69
82
  readonly 100: "#f5f5f4";
@@ -77,6 +90,19 @@ export declare const colors: {
77
90
  readonly 900: "#1c1917";
78
91
  readonly 950: "#0c0a09";
79
92
  };
93
+ readonly taupe: {
94
+ readonly 50: "#fbfaf9";
95
+ readonly 100: "#f3f1f1";
96
+ readonly 200: "#e8e4e3";
97
+ readonly 300: "#d8d2d0";
98
+ readonly 400: "#aba09c";
99
+ readonly 500: "#7c6d67";
100
+ readonly 600: "#5b4f4b";
101
+ readonly 700: "#473c39";
102
+ readonly 800: "#2b2422";
103
+ readonly 900: "#1d1816";
104
+ readonly 950: "#0c0a09";
105
+ };
80
106
  readonly red: {
81
107
  readonly 50: "#fef2f2";
82
108
  readonly 100: "#fee2e2";
@@ -142,6 +168,32 @@ export declare const colors: {
142
168
  readonly 900: "#365314";
143
169
  readonly 950: "#1a2e05";
144
170
  };
171
+ readonly mauve: {
172
+ readonly 50: "#fafafa";
173
+ readonly 100: "#f3f1f3";
174
+ readonly 200: "#e7e4e7";
175
+ readonly 300: "#d7d0d7";
176
+ readonly 400: "#a89ea9";
177
+ readonly 500: "#79697b";
178
+ readonly 600: "#594c5b";
179
+ readonly 700: "#463947";
180
+ readonly 800: "#2a212c";
181
+ readonly 900: "#1d161e";
182
+ readonly 950: "#0c090c";
183
+ };
184
+ readonly mist: {
185
+ readonly 50: "#f9fbfb";
186
+ readonly 100: "#f1f3f3";
187
+ readonly 200: "#e3e7e8";
188
+ readonly 300: "#d0d6d8";
189
+ readonly 400: "#9ca8ab";
190
+ readonly 500: "#67787c";
191
+ readonly 600: "#4b585b";
192
+ readonly 700: "#394447";
193
+ readonly 800: "#22292b";
194
+ readonly 900: "#161b1d";
195
+ readonly 950: "#090b0c";
196
+ };
145
197
  readonly green: {
146
198
  readonly 50: "#f0fdf4";
147
199
  readonly 100: "#dcfce7";
package/dist/colors.js CHANGED
@@ -64,6 +64,19 @@ export const colors = {
64
64
  900: "#171717",
65
65
  950: "#0a0a0a",
66
66
  },
67
+ olive: {
68
+ 50: "#fbfbf9",
69
+ 100: "#f4f4f0",
70
+ 200: "#e8e8e3",
71
+ 300: "#d8d8d0",
72
+ 400: "#abab9c",
73
+ 500: "#7c7c67",
74
+ 600: "#5b5b4b",
75
+ 700: "#474739",
76
+ 800: "#2b2b22",
77
+ 900: "#1d1d16",
78
+ 950: "#0c0c09",
79
+ },
67
80
  stone: {
68
81
  50: "#fafaf9",
69
82
  100: "#f5f5f4",
@@ -77,6 +90,19 @@ export const colors = {
77
90
  900: "#1c1917",
78
91
  950: "#0c0a09",
79
92
  },
93
+ taupe: {
94
+ 50: "#fbfaf9",
95
+ 100: "#f3f1f1",
96
+ 200: "#e8e4e3",
97
+ 300: "#d8d2d0",
98
+ 400: "#aba09c",
99
+ 500: "#7c6d67",
100
+ 600: "#5b4f4b",
101
+ 700: "#473c39",
102
+ 800: "#2b2422",
103
+ 900: "#1d1816",
104
+ 950: "#0c0a09",
105
+ },
80
106
  red: {
81
107
  50: "#fef2f2",
82
108
  100: "#fee2e2",
@@ -142,6 +168,32 @@ export const colors = {
142
168
  900: "#365314",
143
169
  950: "#1a2e05",
144
170
  },
171
+ mauve: {
172
+ 50: "#fafafa",
173
+ 100: "#f3f1f3",
174
+ 200: "#e7e4e7",
175
+ 300: "#d7d0d7",
176
+ 400: "#a89ea9",
177
+ 500: "#79697b",
178
+ 600: "#594c5b",
179
+ 700: "#463947",
180
+ 800: "#2a212c",
181
+ 900: "#1d161e",
182
+ 950: "#0c090c",
183
+ },
184
+ mist: {
185
+ 50: "#f9fbfb",
186
+ 100: "#f1f3f3",
187
+ 200: "#e3e7e8",
188
+ 300: "#d0d6d8",
189
+ 400: "#9ca8ab",
190
+ 500: "#67787c",
191
+ 600: "#4b585b",
192
+ 700: "#394447",
193
+ 800: "#22292b",
194
+ 900: "#161b1d",
195
+ 950: "#090b0c",
196
+ },
145
197
  green: {
146
198
  50: "#f0fdf4",
147
199
  100: "#dcfce7",
package/dist/css/blue-orange.css ADDED
@@ -0,0 +1,215 @@
1
+ :root {
2
+ --stuic-color-primary: #2563eb;
3
+
4
+ --stuic-color-primary-hover: color-mix(in oklch, var(--stuic-color-primary), black 10%);
5
+ --stuic-color-primary-active: color-mix(in oklch, var(--stuic-color-primary), black 20%);
6
+ --stuic-color-primary-foreground: #ffffff;
7
+ --stuic-color-primary-foreground-hover: #ffffff;
8
+ --stuic-color-primary-foreground-active: #ffffff;
9
+
10
+ --stuic-color-accent: #f97316;
11
+
12
+ --stuic-color-accent-hover: color-mix(in oklch, var(--stuic-color-accent), black 10%);
13
+ --stuic-color-accent-active: color-mix(in oklch, var(--stuic-color-accent), black 20%);
14
+ --stuic-color-accent-foreground: #ffffff;
15
+ --stuic-color-accent-foreground-hover: #ffffff;
16
+ --stuic-color-accent-foreground-active: #ffffff;
17
+
18
+ --stuic-color-destructive: #e11d48;
19
+
20
+ --stuic-color-destructive-hover: color-mix(in oklch, var(--stuic-color-destructive), black 10%);
21
+ --stuic-color-destructive-active: color-mix(in oklch, var(--stuic-color-destructive), black 20%);
22
+ --stuic-color-destructive-foreground: #ffffff;
23
+ --stuic-color-destructive-foreground-hover: #ffffff;
24
+ --stuic-color-destructive-foreground-active: #ffffff;
25
+
26
+ --stuic-color-warning: #f97316;
27
+
28
+ --stuic-color-warning-hover: color-mix(in oklch, var(--stuic-color-warning), black 10%);
29
+ --stuic-color-warning-active: color-mix(in oklch, var(--stuic-color-warning), black 20%);
30
+ --stuic-color-warning-foreground: #ffffff;
31
+ --stuic-color-warning-foreground-hover: #ffffff;
32
+ --stuic-color-warning-foreground-active: #ffffff;
33
+
34
+ --stuic-color-success: #0d9488;
35
+
36
+ --stuic-color-success-hover: color-mix(in oklch, var(--stuic-color-success), black 10%);
37
+ --stuic-color-success-active: color-mix(in oklch, var(--stuic-color-success), black 20%);
38
+ --stuic-color-success-foreground: #ffffff;
39
+ --stuic-color-success-foreground-hover: #ffffff;
40
+ --stuic-color-success-foreground-active: #ffffff;
41
+
42
+ --stuic-color-surface-primary: color-mix(in srgb, var(--stuic-color-primary) 15%, var(--stuic-color-background));
43
+ --stuic-color-surface-primary-foreground: color-mix(in srgb, var(--stuic-color-primary), black 10%);
44
+ --stuic-color-surface-primary-border: color-mix(in srgb, var(--stuic-color-primary) 30%, var(--stuic-color-background));
45
+ --stuic-color-surface-accent: color-mix(in srgb, var(--stuic-color-accent) 15%, var(--stuic-color-background));
46
+ --stuic-color-surface-accent-foreground: color-mix(in srgb, var(--stuic-color-accent), black 10%);
47
+ --stuic-color-surface-accent-border: color-mix(in srgb, var(--stuic-color-accent) 30%, var(--stuic-color-background));
48
+ --stuic-color-surface-destructive: color-mix(in srgb, var(--stuic-color-destructive) 15%, var(--stuic-color-background));
49
+ --stuic-color-surface-destructive-foreground: color-mix(in srgb, var(--stuic-color-destructive), black 10%);
50
+ --stuic-color-surface-destructive-border: color-mix(in srgb, var(--stuic-color-destructive) 30%, var(--stuic-color-background));
51
+ --stuic-color-surface-warning: color-mix(in srgb, var(--stuic-color-warning) 15%, var(--stuic-color-background));
52
+ --stuic-color-surface-warning-foreground: color-mix(in srgb, var(--stuic-color-warning), black 10%);
53
+ --stuic-color-surface-warning-border: color-mix(in srgb, var(--stuic-color-warning) 30%, var(--stuic-color-background));
54
+ --stuic-color-surface-success: color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
55
+ --stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), black 10%);
56
+ --stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
57
+ --stuic-color-surface-hover: color-mix(in oklch, var(--stuic-color-surface), black 10%);
58
+ --stuic-color-surface-active: color-mix(in oklch, var(--stuic-color-surface), black 20%);
59
+ --stuic-color-surface-foreground: #1c1917;
60
+ --stuic-color-surface-foreground-hover: #1c1917;
61
+ --stuic-color-surface-foreground-active: #1c1917;
62
+
63
+ --stuic-color-background: #ffffff;
64
+
65
+ --stuic-color-background-hover: #ffffff;
66
+ --stuic-color-background-active: #ffffff;
67
+ --stuic-color-background-foreground: #1c1917;
68
+ --stuic-color-background-foreground-hover: #1c1917;
69
+ --stuic-color-background-foreground-active: #1c1917;
70
+
71
+ --stuic-color-muted: #f5f5f4;
72
+
73
+ --stuic-color-muted-hover: color-mix(in oklch, var(--stuic-color-muted), black 10%);
74
+ --stuic-color-muted-active: color-mix(in oklch, var(--stuic-color-muted), black 20%);
75
+ --stuic-color-muted-foreground: #78716c;
76
+ --stuic-color-muted-foreground-hover: #78716c;
77
+ --stuic-color-muted-foreground-active: #78716c;
78
+
79
+ --stuic-color-surface: #e7e5e4;
80
+
81
+ --stuic-color-surface-1: #d6d3d1;
82
+ --stuic-color-surface-1-hover: color-mix(in oklch, var(--stuic-color-surface-1), black 10%);
83
+ --stuic-color-surface-1-active: color-mix(in oklch, var(--stuic-color-surface-1), black 20%);
84
+ --stuic-color-surface-1-foreground: #1c1917;
85
+ --stuic-color-surface-1-foreground-hover: #1c1917;
86
+ --stuic-color-surface-1-foreground-active: #1c1917;
87
+
88
+ --stuic-color-foreground: #1c1917;
89
+
90
+ --stuic-color-foreground-hover: #1c1917;
91
+ --stuic-color-foreground-active: #1c1917;
92
+
93
+ --stuic-color-border: #d6d3d1;
94
+
95
+ --stuic-color-border-hover: color-mix(in oklch, var(--stuic-color-border), black 10%);
96
+ --stuic-color-border-active: color-mix(in oklch, var(--stuic-color-border), black 20%);
97
+
98
+ --stuic-color-input: #ffffff;
99
+
100
+ --stuic-color-input-hover: #fafaf9;
101
+ --stuic-color-input-active: color-mix(in oklch, var(--stuic-color-input), black 20%);
102
+
103
+ --stuic-color-ring: color-mix(in srgb, #2563eb 20%, transparent);
104
+
105
+ --stuic-color-ring-hover: color-mix(in srgb, #2563eb 20%, transparent);
106
+ --stuic-color-ring-active: color-mix(in srgb, #2563eb 20%, transparent);
107
+ }
108
+
109
+ :root.dark {
110
+ --stuic-color-primary: #3b82f6;
111
+
112
+ --stuic-color-primary-hover: color-mix(in oklch, var(--stuic-color-primary), white 10%);
113
+ --stuic-color-primary-active: color-mix(in oklch, var(--stuic-color-primary), white 20%);
114
+ --stuic-color-primary-foreground: #ffffff;
115
+ --stuic-color-primary-foreground-hover: #ffffff;
116
+ --stuic-color-primary-foreground-active: #ffffff;
117
+
118
+ --stuic-color-accent: #fb923c;
119
+
120
+ --stuic-color-accent-hover: color-mix(in oklch, var(--stuic-color-accent), white 10%);
121
+ --stuic-color-accent-active: color-mix(in oklch, var(--stuic-color-accent), white 20%);
122
+ --stuic-color-accent-foreground: #ffffff;
123
+ --stuic-color-accent-foreground-hover: #ffffff;
124
+ --stuic-color-accent-foreground-active: #ffffff;
125
+
126
+ --stuic-color-destructive: #f43f5e;
127
+
128
+ --stuic-color-destructive-hover: color-mix(in oklch, var(--stuic-color-destructive), white 10%);
129
+ --stuic-color-destructive-active: color-mix(in oklch, var(--stuic-color-destructive), white 20%);
130
+ --stuic-color-destructive-foreground: #ffffff;
131
+ --stuic-color-destructive-foreground-hover: #ffffff;
132
+ --stuic-color-destructive-foreground-active: #ffffff;
133
+
134
+ --stuic-color-warning: #fb923c;
135
+
136
+ --stuic-color-warning-hover: color-mix(in oklch, var(--stuic-color-warning), white 10%);
137
+ --stuic-color-warning-active: color-mix(in oklch, var(--stuic-color-warning), white 20%);
138
+ --stuic-color-warning-foreground: #ffffff;
139
+ --stuic-color-warning-foreground-hover: #ffffff;
140
+ --stuic-color-warning-foreground-active: #ffffff;
141
+
142
+ --stuic-color-success: #14b8a6;
143
+
144
+ --stuic-color-success-hover: color-mix(in oklch, var(--stuic-color-success), white 10%);
145
+ --stuic-color-success-active: color-mix(in oklch, var(--stuic-color-success), white 20%);
146
+ --stuic-color-success-foreground: #ffffff;
147
+ --stuic-color-success-foreground-hover: #ffffff;
148
+ --stuic-color-success-foreground-active: #ffffff;
149
+
150
+ --stuic-color-surface-primary: color-mix(in srgb, var(--stuic-color-primary) 15%, var(--stuic-color-background));
151
+ --stuic-color-surface-primary-foreground: color-mix(in srgb, var(--stuic-color-primary), white 10%);
152
+ --stuic-color-surface-primary-border: color-mix(in srgb, var(--stuic-color-primary) 30%, var(--stuic-color-background));
153
+ --stuic-color-surface-accent: color-mix(in srgb, var(--stuic-color-accent) 15%, var(--stuic-color-background));
154
+ --stuic-color-surface-accent-foreground: color-mix(in srgb, var(--stuic-color-accent), white 10%);
155
+ --stuic-color-surface-accent-border: color-mix(in srgb, var(--stuic-color-accent) 30%, var(--stuic-color-background));
156
+ --stuic-color-surface-destructive: color-mix(in srgb, var(--stuic-color-destructive) 15%, var(--stuic-color-background));
157
+ --stuic-color-surface-destructive-foreground: color-mix(in srgb, var(--stuic-color-destructive), white 10%);
158
+ --stuic-color-surface-destructive-border: color-mix(in srgb, var(--stuic-color-destructive) 30%, var(--stuic-color-background));
159
+ --stuic-color-surface-warning: color-mix(in srgb, var(--stuic-color-warning) 15%, var(--stuic-color-background));
160
+ --stuic-color-surface-warning-foreground: color-mix(in srgb, var(--stuic-color-warning), white 10%);
161
+ --stuic-color-surface-warning-border: color-mix(in srgb, var(--stuic-color-warning) 30%, var(--stuic-color-background));
162
+ --stuic-color-surface-success: color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
163
+ --stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), white 10%);
164
+ --stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
165
+ --stuic-color-surface-hover: color-mix(in oklch, var(--stuic-color-surface), white 10%);
166
+ --stuic-color-surface-active: color-mix(in oklch, var(--stuic-color-surface), white 20%);
167
+ --stuic-color-surface-foreground: #d6d3d1;
168
+ --stuic-color-surface-foreground-hover: #d6d3d1;
169
+ --stuic-color-surface-foreground-active: #d6d3d1;
170
+
171
+ --stuic-color-background: #1c1917;
172
+
173
+ --stuic-color-background-hover: #1c1917;
174
+ --stuic-color-background-active: #1c1917;
175
+ --stuic-color-background-foreground: #fafaf9;
176
+ --stuic-color-background-foreground-hover: #fafaf9;
177
+ --stuic-color-background-foreground-active: #fafaf9;
178
+
179
+ --stuic-color-muted: #292524;
180
+
181
+ --stuic-color-muted-hover: color-mix(in oklch, var(--stuic-color-muted), white 10%);
182
+ --stuic-color-muted-active: color-mix(in oklch, var(--stuic-color-muted), white 20%);
183
+ --stuic-color-muted-foreground: #a8a29e;
184
+ --stuic-color-muted-foreground-hover: #a8a29e;
185
+ --stuic-color-muted-foreground-active: #a8a29e;
186
+
187
+ --stuic-color-surface: #44403c;
188
+
189
+ --stuic-color-surface-1: #57534e;
190
+ --stuic-color-surface-1-hover: color-mix(in oklch, var(--stuic-color-surface-1), white 10%);
191
+ --stuic-color-surface-1-active: color-mix(in oklch, var(--stuic-color-surface-1), white 20%);
192
+ --stuic-color-surface-1-foreground: #e7e5e4;
193
+ --stuic-color-surface-1-foreground-hover: #e7e5e4;
194
+ --stuic-color-surface-1-foreground-active: #e7e5e4;
195
+
196
+ --stuic-color-foreground: #fafaf9;
197
+
198
+ --stuic-color-foreground-hover: #fafaf9;
199
+ --stuic-color-foreground-active: #fafaf9;
200
+
201
+ --stuic-color-border: #44403c;
202
+
203
+ --stuic-color-border-hover: color-mix(in oklch, var(--stuic-color-border), white 10%);
204
+ --stuic-color-border-active: color-mix(in oklch, var(--stuic-color-border), white 20%);
205
+
206
+ --stuic-color-input: #1c1917;
207
+
208
+ --stuic-color-input-hover: #292524;
209
+ --stuic-color-input-active: color-mix(in oklch, var(--stuic-color-input), white 20%);
210
+
211
+ --stuic-color-ring: color-mix(in srgb, #60a5fa 25%, transparent);
212
+
213
+ --stuic-color-ring-hover: color-mix(in srgb, #60a5fa 25%, transparent);
214
+ --stuic-color-ring-active: color-mix(in srgb, #60a5fa 25%, transparent);
215
+ }
package/dist/css/cyan-red.css ADDED
@@ -0,0 +1,215 @@
1
+ :root {
2
+ --stuic-color-primary: #0891b2;
3
+
4
+ --stuic-color-primary-hover: color-mix(in oklch, var(--stuic-color-primary), black 10%);
5
+ --stuic-color-primary-active: color-mix(in oklch, var(--stuic-color-primary), black 20%);
6
+ --stuic-color-primary-foreground: #ffffff;
7
+ --stuic-color-primary-foreground-hover: #ffffff;
8
+ --stuic-color-primary-foreground-active: #ffffff;
9
+
10
+ --stuic-color-accent: #ef4444;
11
+
12
+ --stuic-color-accent-hover: color-mix(in oklch, var(--stuic-color-accent), black 10%);
13
+ --stuic-color-accent-active: color-mix(in oklch, var(--stuic-color-accent), black 20%);
14
+ --stuic-color-accent-foreground: #ffffff;
15
+ --stuic-color-accent-foreground-hover: #ffffff;
16
+ --stuic-color-accent-foreground-active: #ffffff;
17
+
18
+ --stuic-color-destructive: #dc2626;
19
+
20
+ --stuic-color-destructive-hover: color-mix(in oklch, var(--stuic-color-destructive), black 10%);
21
+ --stuic-color-destructive-active: color-mix(in oklch, var(--stuic-color-destructive), black 20%);
22
+ --stuic-color-destructive-foreground: #ffffff;
23
+ --stuic-color-destructive-foreground-hover: #ffffff;
24
+ --stuic-color-destructive-foreground-active: #ffffff;
25
+
26
+ --stuic-color-warning: #f97316;
27
+
28
+ --stuic-color-warning-hover: color-mix(in oklch, var(--stuic-color-warning), black 10%);
29
+ --stuic-color-warning-active: color-mix(in oklch, var(--stuic-color-warning), black 20%);
30
+ --stuic-color-warning-foreground: #ffffff;
31
+ --stuic-color-warning-foreground-hover: #ffffff;
32
+ --stuic-color-warning-foreground-active: #ffffff;
33
+
34
+ --stuic-color-success: #0d9488;
35
+
36
+ --stuic-color-success-hover: color-mix(in oklch, var(--stuic-color-success), black 10%);
37
+ --stuic-color-success-active: color-mix(in oklch, var(--stuic-color-success), black 20%);
38
+ --stuic-color-success-foreground: #ffffff;
39
+ --stuic-color-success-foreground-hover: #ffffff;
40
+ --stuic-color-success-foreground-active: #ffffff;
41
+
42
+ --stuic-color-surface-primary: color-mix(in srgb, var(--stuic-color-primary) 15%, var(--stuic-color-background));
43
+ --stuic-color-surface-primary-foreground: color-mix(in srgb, var(--stuic-color-primary), black 10%);
44
+ --stuic-color-surface-primary-border: color-mix(in srgb, var(--stuic-color-primary) 30%, var(--stuic-color-background));
45
+ --stuic-color-surface-accent: color-mix(in srgb, var(--stuic-color-accent) 15%, var(--stuic-color-background));
46
+ --stuic-color-surface-accent-foreground: color-mix(in srgb, var(--stuic-color-accent), black 10%);
47
+ --stuic-color-surface-accent-border: color-mix(in srgb, var(--stuic-color-accent) 30%, var(--stuic-color-background));
48
+ --stuic-color-surface-destructive: color-mix(in srgb, var(--stuic-color-destructive) 15%, var(--stuic-color-background));
49
+ --stuic-color-surface-destructive-foreground: color-mix(in srgb, var(--stuic-color-destructive), black 10%);
50
+ --stuic-color-surface-destructive-border: color-mix(in srgb, var(--stuic-color-destructive) 30%, var(--stuic-color-background));
51
+ --stuic-color-surface-warning: color-mix(in srgb, var(--stuic-color-warning) 15%, var(--stuic-color-background));
52
+ --stuic-color-surface-warning-foreground: color-mix(in srgb, var(--stuic-color-warning), black 10%);
53
+ --stuic-color-surface-warning-border: color-mix(in srgb, var(--stuic-color-warning) 30%, var(--stuic-color-background));
54
+ --stuic-color-surface-success: color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
55
+ --stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), black 10%);
56
+ --stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
57
+ --stuic-color-surface-hover: color-mix(in oklch, var(--stuic-color-surface), black 10%);
58
+ --stuic-color-surface-active: color-mix(in oklch, var(--stuic-color-surface), black 20%);
59
+ --stuic-color-surface-foreground: #1c1917;
60
+ --stuic-color-surface-foreground-hover: #1c1917;
61
+ --stuic-color-surface-foreground-active: #1c1917;
62
+
63
+ --stuic-color-background: #ffffff;
64
+
65
+ --stuic-color-background-hover: #ffffff;
66
+ --stuic-color-background-active: #ffffff;
67
+ --stuic-color-background-foreground: #1c1917;
68
+ --stuic-color-background-foreground-hover: #1c1917;
69
+ --stuic-color-background-foreground-active: #1c1917;
70
+
71
+ --stuic-color-muted: #f5f5f4;
72
+
73
+ --stuic-color-muted-hover: color-mix(in oklch, var(--stuic-color-muted), black 10%);
74
+ --stuic-color-muted-active: color-mix(in oklch, var(--stuic-color-muted), black 20%);
75
+ --stuic-color-muted-foreground: #78716c;
76
+ --stuic-color-muted-foreground-hover: #78716c;
77
+ --stuic-color-muted-foreground-active: #78716c;
78
+
79
+ --stuic-color-surface: #e7e5e4;
80
+
81
+ --stuic-color-surface-1: #d6d3d1;
82
+ --stuic-color-surface-1-hover: color-mix(in oklch, var(--stuic-color-surface-1), black 10%);
83
+ --stuic-color-surface-1-active: color-mix(in oklch, var(--stuic-color-surface-1), black 20%);
84
+ --stuic-color-surface-1-foreground: #1c1917;
85
+ --stuic-color-surface-1-foreground-hover: #1c1917;
86
+ --stuic-color-surface-1-foreground-active: #1c1917;
87
+
88
+ --stuic-color-foreground: #1c1917;
89
+
90
+ --stuic-color-foreground-hover: #1c1917;
91
+ --stuic-color-foreground-active: #1c1917;
92
+
93
+ --stuic-color-border: #d6d3d1;
94
+
95
+ --stuic-color-border-hover: color-mix(in oklch, var(--stuic-color-border), black 10%);
96
+ --stuic-color-border-active: color-mix(in oklch, var(--stuic-color-border), black 20%);
97
+
98
+ --stuic-color-input: #ffffff;
99
+
100
+ --stuic-color-input-hover: #fafaf9;
101
+ --stuic-color-input-active: color-mix(in oklch, var(--stuic-color-input), black 20%);
102
+
103
+ --stuic-color-ring: color-mix(in srgb, #0891b2 20%, transparent);
104
+
105
+ --stuic-color-ring-hover: color-mix(in srgb, #0891b2 20%, transparent);
106
+ --stuic-color-ring-active: color-mix(in srgb, #0891b2 20%, transparent);
107
+ }
108
+
109
+ :root.dark {
110
+ --stuic-color-primary: #06b6d4;
111
+
112
+ --stuic-color-primary-hover: color-mix(in oklch, var(--stuic-color-primary), white 10%);
113
+ --stuic-color-primary-active: color-mix(in oklch, var(--stuic-color-primary), white 20%);
114
+ --stuic-color-primary-foreground: #ffffff;
115
+ --stuic-color-primary-foreground-hover: #ffffff;
116
+ --stuic-color-primary-foreground-active: #ffffff;
117
+
118
+ --stuic-color-accent: #f87171;
119
+
120
+ --stuic-color-accent-hover: color-mix(in oklch, var(--stuic-color-accent), white 10%);
121
+ --stuic-color-accent-active: color-mix(in oklch, var(--stuic-color-accent), white 20%);
122
+ --stuic-color-accent-foreground: #ffffff;
123
+ --stuic-color-accent-foreground-hover: #ffffff;
124
+ --stuic-color-accent-foreground-active: #ffffff;
125
+
126
+ --stuic-color-destructive: #ef4444;
127
+
128
+ --stuic-color-destructive-hover: color-mix(in oklch, var(--stuic-color-destructive), white 10%);
129
+ --stuic-color-destructive-active: color-mix(in oklch, var(--stuic-color-destructive), white 20%);
130
+ --stuic-color-destructive-foreground: #ffffff;
131
+ --stuic-color-destructive-foreground-hover: #ffffff;
132
+ --stuic-color-destructive-foreground-active: #ffffff;
133
+
134
+ --stuic-color-warning: #fb923c;
135
+
136
+ --stuic-color-warning-hover: color-mix(in oklch, var(--stuic-color-warning), white 10%);
137
+ --stuic-color-warning-active: color-mix(in oklch, var(--stuic-color-warning), white 20%);
138
+ --stuic-color-warning-foreground: #ffffff;
139
+ --stuic-color-warning-foreground-hover: #ffffff;
140
+ --stuic-color-warning-foreground-active: #ffffff;
141
+
142
+ --stuic-color-success: #14b8a6;
143
+
144
+ --stuic-color-success-hover: color-mix(in oklch, var(--stuic-color-success), white 10%);
145
+ --stuic-color-success-active: color-mix(in oklch, var(--stuic-color-success), white 20%);
146
+ --stuic-color-success-foreground: #ffffff;
147
+ --stuic-color-success-foreground-hover: #ffffff;
148
+ --stuic-color-success-foreground-active: #ffffff;
149
+
150
+ --stuic-color-surface-primary: color-mix(in srgb, var(--stuic-color-primary) 15%, var(--stuic-color-background));
151
+ --stuic-color-surface-primary-foreground: color-mix(in srgb, var(--stuic-color-primary), white 10%);
152
+ --stuic-color-surface-primary-border: color-mix(in srgb, var(--stuic-color-primary) 30%, var(--stuic-color-background));
153
+ --stuic-color-surface-accent: color-mix(in srgb, var(--stuic-color-accent) 15%, var(--stuic-color-background));
154
+ --stuic-color-surface-accent-foreground: color-mix(in srgb, var(--stuic-color-accent), white 10%);
155
+ --stuic-color-surface-accent-border: color-mix(in srgb, var(--stuic-color-accent) 30%, var(--stuic-color-background));
156
+ --stuic-color-surface-destructive: color-mix(in srgb, var(--stuic-color-destructive) 15%, var(--stuic-color-background));
157
+ --stuic-color-surface-destructive-foreground: color-mix(in srgb, var(--stuic-color-destructive), white 10%);
158
+ --stuic-color-surface-destructive-border: color-mix(in srgb, var(--stuic-color-destructive) 30%, var(--stuic-color-background));
159
+ --stuic-color-surface-warning: color-mix(in srgb, var(--stuic-color-warning) 15%, var(--stuic-color-background));
160
+ --stuic-color-surface-warning-foreground: color-mix(in srgb, var(--stuic-color-warning), white 10%);
161
+ --stuic-color-surface-warning-border: color-mix(in srgb, var(--stuic-color-warning) 30%, var(--stuic-color-background));
162
+ --stuic-color-surface-success: color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
163
+ --stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), white 10%);
164
+ --stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
165
+ --stuic-color-surface-hover: color-mix(in oklch, var(--stuic-color-surface), white 10%);
166
+ --stuic-color-surface-active: color-mix(in oklch, var(--stuic-color-surface), white 20%);
167
+ --stuic-color-surface-foreground: #d6d3d1;
168
+ --stuic-color-surface-foreground-hover: #d6d3d1;
169
+ --stuic-color-surface-foreground-active: #d6d3d1;
170
+
171
+ --stuic-color-background: #1c1917;
172
+
173
+ --stuic-color-background-hover: #1c1917;
174
+ --stuic-color-background-active: #1c1917;
175
+ --stuic-color-background-foreground: #fafaf9;
176
+ --stuic-color-background-foreground-hover: #fafaf9;
177
+ --stuic-color-background-foreground-active: #fafaf9;
178
+
179
+ --stuic-color-muted: #292524;
180
+
181
+ --stuic-color-muted-hover: color-mix(in oklch, var(--stuic-color-muted), white 10%);
182
+ --stuic-color-muted-active: color-mix(in oklch, var(--stuic-color-muted), white 20%);
183
+ --stuic-color-muted-foreground: #a8a29e;
184
+ --stuic-color-muted-foreground-hover: #a8a29e;
185
+ --stuic-color-muted-foreground-active: #a8a29e;
186
+
187
+ --stuic-color-surface: #44403c;
188
+
189
+ --stuic-color-surface-1: #57534e;
190
+ --stuic-color-surface-1-hover: color-mix(in oklch, var(--stuic-color-surface-1), white 10%);
191
+ --stuic-color-surface-1-active: color-mix(in oklch, var(--stuic-color-surface-1), white 20%);
192
+ --stuic-color-surface-1-foreground: #e7e5e4;
193
+ --stuic-color-surface-1-foreground-hover: #e7e5e4;
194
+ --stuic-color-surface-1-foreground-active: #e7e5e4;
195
+
196
+ --stuic-color-foreground: #fafaf9;
197
+
198
+ --stuic-color-foreground-hover: #fafaf9;
199
+ --stuic-color-foreground-active: #fafaf9;
200
+
201
+ --stuic-color-border: #44403c;
202
+
203
+ --stuic-color-border-hover: color-mix(in oklch, var(--stuic-color-border), white 10%);
204
+ --stuic-color-border-active: color-mix(in oklch, var(--stuic-color-border), white 20%);
205
+
206
+ --stuic-color-input: #1c1917;
207
+
208
+ --stuic-color-input-hover: #292524;
209
+ --stuic-color-input-active: color-mix(in oklch, var(--stuic-color-input), white 20%);
210
+
211
+ --stuic-color-ring: color-mix(in srgb, #22d3ee 25%, transparent);
212
+
213
+ --stuic-color-ring-hover: color-mix(in srgb, #22d3ee 25%, transparent);
214
+ --stuic-color-ring-active: color-mix(in srgb, #22d3ee 25%, transparent);
215
+ }