@marianmeres/stuic 3.0.2 → 3.0.3

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 (43) hide show
  1. package/dist/components/DismissibleMessage/DismissibleMessage.svelte +1 -1
  2. package/dist/components/ThemePreview/index.css +4 -5
  3. package/dist/index.css +1 -1
  4. package/dist/themes/css/emerald-amber-forest.css +253 -0
  5. package/dist/themes/css/lime-fuchsia-neon.css +253 -0
  6. package/dist/themes/css/orange-pink-sunset.css +253 -0
  7. package/dist/themes/css/slate-teal-ocean.css +253 -0
  8. package/dist/themes/css/stone-orange-earth.css +253 -0
  9. package/dist/themes/css/violet-rose-dusk.css +253 -0
  10. package/dist/themes/emerald-amber-forest.d.ts +6 -0
  11. package/dist/themes/emerald-amber-forest.js +175 -0
  12. package/dist/themes/lime-fuchsia-neon.d.ts +6 -0
  13. package/dist/themes/lime-fuchsia-neon.js +175 -0
  14. package/dist/themes/orange-pink-sunset.d.ts +6 -0
  15. package/dist/themes/orange-pink-sunset.js +175 -0
  16. package/dist/themes/slate-teal-ocean.d.ts +6 -0
  17. package/dist/themes/slate-teal-ocean.js +175 -0
  18. package/dist/themes/stone-orange-earth.d.ts +6 -0
  19. package/dist/themes/stone-orange-earth.js +175 -0
  20. package/dist/themes/violet-rose-dusk.d.ts +6 -0
  21. package/dist/themes/violet-rose-dusk.js +175 -0
  22. package/package.json +2 -2
  23. package/dist/base.css +0 -17
  24. /package/dist/themes/{blue-orange.css → css/blue-orange.css} +0 -0
  25. /package/dist/themes/{cyan-red.css → css/cyan-red.css} +0 -0
  26. /package/dist/themes/{cyan-slate.css → css/cyan-slate.css} +0 -0
  27. /package/dist/themes/{emerald-pink.css → css/emerald-pink.css} +0 -0
  28. /package/dist/themes/{fuchsia-emerald.css → css/fuchsia-emerald.css} +0 -0
  29. /package/dist/themes/{gray.css → css/gray.css} +0 -0
  30. /package/dist/themes/{indigo-amber.css → css/indigo-amber.css} +0 -0
  31. /package/dist/themes/{neutral.css → css/neutral.css} +0 -0
  32. /package/dist/themes/{pink-emerald.css → css/pink-emerald.css} +0 -0
  33. /package/dist/themes/{pink-teal.css → css/pink-teal.css} +0 -0
  34. /package/dist/themes/{purple-yellow.css → css/purple-yellow.css} +0 -0
  35. /package/dist/themes/{rainbow.css → css/rainbow.css} +0 -0
  36. /package/dist/themes/{red-blue.css → css/red-blue.css} +0 -0
  37. /package/dist/themes/{red-cyan.css → css/red-cyan.css} +0 -0
  38. /package/dist/themes/{red-sky.css → css/red-sky.css} +0 -0
  39. /package/dist/themes/{rose-teal.css → css/rose-teal.css} +0 -0
  40. /package/dist/themes/{sky-amber.css → css/sky-amber.css} +0 -0
  41. /package/dist/themes/{slate-cyan.css → css/slate-cyan.css} +0 -0
  42. /package/dist/themes/{teal-rose.css → css/teal-rose.css} +0 -0
  43. /package/dist/themes/{violet-lime.css → css/violet-lime.css} +0 -0
package/dist/themes/emerald-amber-forest.js ADDED
@@ -0,0 +1,175 @@
1
+ const light = {
2
+ colors: {
3
+ intent: {
4
+ primary: {
5
+ DEFAULT: "var(--color-emerald-700)",
6
+ foreground: "var(--color-white)",
7
+ hover: "var(--color-emerald-800)",
8
+ active: "var(--color-emerald-900)",
9
+ },
10
+ accent: {
11
+ DEFAULT: "var(--color-amber-600)",
12
+ foreground: "var(--color-white)",
13
+ hover: "var(--color-amber-700)",
14
+ active: "var(--color-amber-800)",
15
+ },
16
+ destructive: {
17
+ DEFAULT: "var(--color-red-600)",
18
+ foreground: "var(--color-white)",
19
+ hover: "var(--color-red-700)",
20
+ active: "var(--color-red-800)",
21
+ },
22
+ warning: {
23
+ DEFAULT: "var(--color-amber-500)",
24
+ foreground: "var(--color-white)",
25
+ hover: "var(--color-amber-600)",
26
+ active: "var(--color-amber-700)",
27
+ },
28
+ success: {
29
+ DEFAULT: "var(--color-emerald-600)",
30
+ foreground: "var(--color-white)",
31
+ hover: "var(--color-emerald-700)",
32
+ active: "var(--color-emerald-800)",
33
+ },
34
+ info: {
35
+ DEFAULT: "var(--color-teal-600)",
36
+ foreground: "var(--color-white)",
37
+ hover: "var(--color-teal-700)",
38
+ active: "var(--color-teal-800)",
39
+ },
40
+ },
41
+ role: {
42
+ paired: {
43
+ background: {
44
+ DEFAULT: "var(--color-amber-50)",
45
+ foreground: "var(--color-stone-900)",
46
+ },
47
+ surface: {
48
+ DEFAULT: "var(--color-stone-100)",
49
+ foreground: "var(--color-stone-900)",
50
+ hover: "var(--color-stone-200)",
51
+ active: "var(--color-stone-300)",
52
+ },
53
+ "surface-1": {
54
+ DEFAULT: "var(--color-stone-200)",
55
+ foreground: "var(--color-stone-900)",
56
+ hover: "var(--color-stone-300)",
57
+ active: "var(--color-stone-400)",
58
+ },
59
+ "surface-2": {
60
+ DEFAULT: "var(--color-stone-300)",
61
+ foreground: "var(--color-stone-900)",
62
+ hover: "var(--color-stone-400)",
63
+ active: "var(--color-stone-500)",
64
+ },
65
+ muted: {
66
+ DEFAULT: "var(--color-stone-200)",
67
+ foreground: "var(--color-stone-500)",
68
+ hover: "var(--color-stone-300)",
69
+ active: "var(--color-stone-400)",
70
+ },
71
+ },
72
+ single: {
73
+ foreground: "var(--color-stone-900)",
74
+ border: {
75
+ DEFAULT: "var(--color-stone-300)",
76
+ hover: "var(--color-stone-400)",
77
+ active: "var(--color-stone-500)",
78
+ },
79
+ input: {
80
+ DEFAULT: "var(--color-amber-50)",
81
+ hover: "var(--color-stone-100)",
82
+ },
83
+ ring: "color-mix(in srgb, var(--color-emerald-700) 20%, transparent)",
84
+ },
85
+ },
86
+ },
87
+ };
88
+ const dark = {
89
+ colors: {
90
+ intent: {
91
+ primary: {
92
+ DEFAULT: "var(--color-emerald-500)",
93
+ foreground: "var(--color-white)",
94
+ hover: "var(--color-emerald-400)",
95
+ active: "var(--color-emerald-300)",
96
+ },
97
+ accent: {
98
+ DEFAULT: "var(--color-amber-500)",
99
+ foreground: "var(--color-black)",
100
+ hover: "var(--color-amber-400)",
101
+ active: "var(--color-amber-300)",
102
+ },
103
+ destructive: {
104
+ DEFAULT: "var(--color-red-500)",
105
+ foreground: "var(--color-white)",
106
+ hover: "var(--color-red-400)",
107
+ active: "var(--color-red-300)",
108
+ },
109
+ warning: {
110
+ DEFAULT: "var(--color-amber-400)",
111
+ foreground: "var(--color-black)",
112
+ hover: "var(--color-amber-300)",
113
+ active: "var(--color-amber-200)",
114
+ },
115
+ success: {
116
+ DEFAULT: "var(--color-emerald-500)",
117
+ foreground: "var(--color-white)",
118
+ hover: "var(--color-emerald-400)",
119
+ active: "var(--color-emerald-300)",
120
+ },
121
+ info: {
122
+ DEFAULT: "var(--color-teal-400)",
123
+ foreground: "var(--color-white)",
124
+ hover: "var(--color-teal-300)",
125
+ active: "var(--color-teal-200)",
126
+ },
127
+ },
128
+ role: {
129
+ paired: {
130
+ background: {
131
+ DEFAULT: "var(--color-stone-900)",
132
+ foreground: "var(--color-stone-50)",
133
+ },
134
+ surface: {
135
+ DEFAULT: "var(--color-stone-800)",
136
+ foreground: "var(--color-stone-100)",
137
+ hover: "var(--color-stone-700)",
138
+ active: "var(--color-stone-600)",
139
+ },
140
+ "surface-1": {
141
+ DEFAULT: "var(--color-stone-700)",
142
+ foreground: "var(--color-stone-100)",
143
+ hover: "var(--color-stone-600)",
144
+ active: "var(--color-stone-500)",
145
+ },
146
+ "surface-2": {
147
+ DEFAULT: "var(--color-stone-600)",
148
+ foreground: "var(--color-stone-100)",
149
+ hover: "var(--color-stone-500)",
150
+ active: "var(--color-stone-400)",
151
+ },
152
+ muted: {
153
+ DEFAULT: "var(--color-stone-700)",
154
+ foreground: "var(--color-stone-400)",
155
+ hover: "var(--color-stone-600)",
156
+ active: "var(--color-stone-500)",
157
+ },
158
+ },
159
+ single: {
160
+ foreground: "var(--color-stone-50)",
161
+ border: {
162
+ DEFAULT: "var(--color-stone-600)",
163
+ hover: "var(--color-stone-500)",
164
+ active: "var(--color-stone-400)",
165
+ },
166
+ input: {
167
+ DEFAULT: "var(--color-stone-800)",
168
+ hover: "var(--color-stone-700)",
169
+ },
170
+ ring: "color-mix(in srgb, var(--color-emerald-500) 25%, transparent)",
171
+ },
172
+ },
173
+ },
174
+ };
175
+ export default { light, dark };
package/dist/themes/lime-fuchsia-neon.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import type { TokenSchema } from "../utils/design-tokens.js";
2
+ declare const _default: {
3
+ light: TokenSchema;
4
+ dark: TokenSchema;
5
+ };
6
+ export default _default;
package/dist/themes/lime-fuchsia-neon.js ADDED
@@ -0,0 +1,175 @@
1
+ const light = {
2
+ colors: {
3
+ intent: {
4
+ primary: {
5
+ DEFAULT: "var(--color-lime-600)",
6
+ foreground: "var(--color-black)",
7
+ hover: "var(--color-lime-700)",
8
+ active: "var(--color-lime-800)",
9
+ },
10
+ accent: {
11
+ DEFAULT: "var(--color-fuchsia-500)",
12
+ foreground: "var(--color-white)",
13
+ hover: "var(--color-fuchsia-600)",
14
+ active: "var(--color-fuchsia-700)",
15
+ },
16
+ destructive: {
17
+ DEFAULT: "var(--color-red-600)",
18
+ foreground: "var(--color-white)",
19
+ hover: "var(--color-red-700)",
20
+ active: "var(--color-red-800)",
21
+ },
22
+ warning: {
23
+ DEFAULT: "var(--color-yellow-500)",
24
+ foreground: "var(--color-black)",
25
+ hover: "var(--color-yellow-600)",
26
+ active: "var(--color-yellow-700)",
27
+ },
28
+ success: {
29
+ DEFAULT: "var(--color-lime-600)",
30
+ foreground: "var(--color-black)",
31
+ hover: "var(--color-lime-700)",
32
+ active: "var(--color-lime-800)",
33
+ },
34
+ info: {
35
+ DEFAULT: "var(--color-cyan-500)",
36
+ foreground: "var(--color-black)",
37
+ hover: "var(--color-cyan-600)",
38
+ active: "var(--color-cyan-700)",
39
+ },
40
+ },
41
+ role: {
42
+ paired: {
43
+ background: {
44
+ DEFAULT: "var(--color-zinc-100)",
45
+ foreground: "var(--color-zinc-900)",
46
+ },
47
+ surface: {
48
+ DEFAULT: "var(--color-zinc-200)",
49
+ foreground: "var(--color-zinc-900)",
50
+ hover: "var(--color-zinc-300)",
51
+ active: "var(--color-zinc-400)",
52
+ },
53
+ "surface-1": {
54
+ DEFAULT: "var(--color-zinc-300)",
55
+ foreground: "var(--color-zinc-900)",
56
+ hover: "var(--color-zinc-400)",
57
+ active: "var(--color-zinc-500)",
58
+ },
59
+ "surface-2": {
60
+ DEFAULT: "var(--color-zinc-400)",
61
+ foreground: "var(--color-zinc-900)",
62
+ hover: "var(--color-zinc-500)",
63
+ active: "var(--color-zinc-600)",
64
+ },
65
+ muted: {
66
+ DEFAULT: "var(--color-zinc-300)",
67
+ foreground: "var(--color-zinc-500)",
68
+ hover: "var(--color-zinc-400)",
69
+ active: "var(--color-zinc-500)",
70
+ },
71
+ },
72
+ single: {
73
+ foreground: "var(--color-zinc-900)",
74
+ border: {
75
+ DEFAULT: "var(--color-zinc-400)",
76
+ hover: "var(--color-zinc-500)",
77
+ active: "var(--color-zinc-600)",
78
+ },
79
+ input: {
80
+ DEFAULT: "var(--color-white)",
81
+ hover: "var(--color-zinc-100)",
82
+ },
83
+ ring: "color-mix(in srgb, var(--color-lime-500) 25%, transparent)",
84
+ },
85
+ },
86
+ },
87
+ };
88
+ const dark = {
89
+ colors: {
90
+ intent: {
91
+ primary: {
92
+ DEFAULT: "var(--color-lime-400)",
93
+ foreground: "var(--color-black)",
94
+ hover: "var(--color-lime-300)",
95
+ active: "var(--color-lime-200)",
96
+ },
97
+ accent: {
98
+ DEFAULT: "var(--color-fuchsia-400)",
99
+ foreground: "var(--color-white)",
100
+ hover: "var(--color-fuchsia-300)",
101
+ active: "var(--color-fuchsia-200)",
102
+ },
103
+ destructive: {
104
+ DEFAULT: "var(--color-red-500)",
105
+ foreground: "var(--color-white)",
106
+ hover: "var(--color-red-400)",
107
+ active: "var(--color-red-300)",
108
+ },
109
+ warning: {
110
+ DEFAULT: "var(--color-yellow-400)",
111
+ foreground: "var(--color-black)",
112
+ hover: "var(--color-yellow-300)",
113
+ active: "var(--color-yellow-200)",
114
+ },
115
+ success: {
116
+ DEFAULT: "var(--color-lime-400)",
117
+ foreground: "var(--color-black)",
118
+ hover: "var(--color-lime-300)",
119
+ active: "var(--color-lime-200)",
120
+ },
121
+ info: {
122
+ DEFAULT: "var(--color-cyan-400)",
123
+ foreground: "var(--color-black)",
124
+ hover: "var(--color-cyan-300)",
125
+ active: "var(--color-cyan-200)",
126
+ },
127
+ },
128
+ role: {
129
+ paired: {
130
+ background: {
131
+ DEFAULT: "var(--color-zinc-950)",
132
+ foreground: "var(--color-zinc-50)",
133
+ },
134
+ surface: {
135
+ DEFAULT: "var(--color-zinc-900)",
136
+ foreground: "var(--color-zinc-100)",
137
+ hover: "var(--color-zinc-800)",
138
+ active: "var(--color-zinc-700)",
139
+ },
140
+ "surface-1": {
141
+ DEFAULT: "var(--color-zinc-800)",
142
+ foreground: "var(--color-zinc-100)",
143
+ hover: "var(--color-zinc-700)",
144
+ active: "var(--color-zinc-600)",
145
+ },
146
+ "surface-2": {
147
+ DEFAULT: "var(--color-zinc-700)",
148
+ foreground: "var(--color-zinc-100)",
149
+ hover: "var(--color-zinc-600)",
150
+ active: "var(--color-zinc-500)",
151
+ },
152
+ muted: {
153
+ DEFAULT: "var(--color-zinc-800)",
154
+ foreground: "var(--color-zinc-500)",
155
+ hover: "var(--color-zinc-700)",
156
+ active: "var(--color-zinc-600)",
157
+ },
158
+ },
159
+ single: {
160
+ foreground: "var(--color-zinc-50)",
161
+ border: {
162
+ DEFAULT: "var(--color-zinc-700)",
163
+ hover: "var(--color-zinc-600)",
164
+ active: "var(--color-zinc-500)",
165
+ },
166
+ input: {
167
+ DEFAULT: "var(--color-zinc-900)",
168
+ hover: "var(--color-zinc-800)",
169
+ },
170
+ ring: "color-mix(in srgb, var(--color-lime-400) 30%, transparent)",
171
+ },
172
+ },
173
+ },
174
+ };
175
+ export default { light, dark };
package/dist/themes/orange-pink-sunset.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import type { TokenSchema } from "../utils/design-tokens.js";
2
+ declare const _default: {
3
+ light: TokenSchema;
4
+ dark: TokenSchema;
5
+ };
6
+ export default _default;
package/dist/themes/orange-pink-sunset.js ADDED
@@ -0,0 +1,175 @@
1
+ const light = {
2
+ colors: {
3
+ intent: {
4
+ primary: {
5
+ DEFAULT: "var(--color-orange-600)",
6
+ foreground: "var(--color-white)",
7
+ hover: "var(--color-orange-700)",
8
+ active: "var(--color-orange-800)",
9
+ },
10
+ accent: {
11
+ DEFAULT: "var(--color-pink-500)",
12
+ foreground: "var(--color-white)",
13
+ hover: "var(--color-pink-600)",
14
+ active: "var(--color-pink-700)",
15
+ },
16
+ destructive: {
17
+ DEFAULT: "var(--color-red-600)",
18
+ foreground: "var(--color-white)",
19
+ hover: "var(--color-red-700)",
20
+ active: "var(--color-red-800)",
21
+ },
22
+ warning: {
23
+ DEFAULT: "var(--color-amber-500)",
24
+ foreground: "var(--color-white)",
25
+ hover: "var(--color-amber-600)",
26
+ active: "var(--color-amber-700)",
27
+ },
28
+ success: {
29
+ DEFAULT: "var(--color-emerald-600)",
30
+ foreground: "var(--color-white)",
31
+ hover: "var(--color-emerald-700)",
32
+ active: "var(--color-emerald-800)",
33
+ },
34
+ info: {
35
+ DEFAULT: "var(--color-sky-500)",
36
+ foreground: "var(--color-white)",
37
+ hover: "var(--color-sky-600)",
38
+ active: "var(--color-sky-700)",
39
+ },
40
+ },
41
+ role: {
42
+ paired: {
43
+ background: {
44
+ DEFAULT: "var(--color-orange-50)",
45
+ foreground: "var(--color-stone-900)",
46
+ },
47
+ surface: {
48
+ DEFAULT: "var(--color-amber-50)",
49
+ foreground: "var(--color-stone-900)",
50
+ hover: "var(--color-amber-100)",
51
+ active: "var(--color-amber-200)",
52
+ },
53
+ "surface-1": {
54
+ DEFAULT: "var(--color-amber-100)",
55
+ foreground: "var(--color-stone-900)",
56
+ hover: "var(--color-amber-200)",
57
+ active: "var(--color-amber-300)",
58
+ },
59
+ "surface-2": {
60
+ DEFAULT: "var(--color-amber-200)",
61
+ foreground: "var(--color-stone-900)",
62
+ hover: "var(--color-amber-300)",
63
+ active: "var(--color-amber-400)",
64
+ },
65
+ muted: {
66
+ DEFAULT: "var(--color-amber-100)",
67
+ foreground: "var(--color-stone-500)",
68
+ hover: "var(--color-amber-200)",
69
+ active: "var(--color-amber-300)",
70
+ },
71
+ },
72
+ single: {
73
+ foreground: "var(--color-stone-900)",
74
+ border: {
75
+ DEFAULT: "var(--color-amber-200)",
76
+ hover: "var(--color-amber-300)",
77
+ active: "var(--color-amber-400)",
78
+ },
79
+ input: {
80
+ DEFAULT: "var(--color-white)",
81
+ hover: "var(--color-orange-50)",
82
+ },
83
+ ring: "color-mix(in srgb, var(--color-orange-600) 20%, transparent)",
84
+ },
85
+ },
86
+ },
87
+ };
88
+ const dark = {
89
+ colors: {
90
+ intent: {
91
+ primary: {
92
+ DEFAULT: "var(--color-orange-500)",
93
+ foreground: "var(--color-black)",
94
+ hover: "var(--color-orange-400)",
95
+ active: "var(--color-orange-300)",
96
+ },
97
+ accent: {
98
+ DEFAULT: "var(--color-pink-400)",
99
+ foreground: "var(--color-white)",
100
+ hover: "var(--color-pink-300)",
101
+ active: "var(--color-pink-200)",
102
+ },
103
+ destructive: {
104
+ DEFAULT: "var(--color-red-500)",
105
+ foreground: "var(--color-white)",
106
+ hover: "var(--color-red-400)",
107
+ active: "var(--color-red-300)",
108
+ },
109
+ warning: {
110
+ DEFAULT: "var(--color-amber-400)",
111
+ foreground: "var(--color-black)",
112
+ hover: "var(--color-amber-300)",
113
+ active: "var(--color-amber-200)",
114
+ },
115
+ success: {
116
+ DEFAULT: "var(--color-emerald-500)",
117
+ foreground: "var(--color-white)",
118
+ hover: "var(--color-emerald-400)",
119
+ active: "var(--color-emerald-300)",
120
+ },
121
+ info: {
122
+ DEFAULT: "var(--color-sky-400)",
123
+ foreground: "var(--color-black)",
124
+ hover: "var(--color-sky-300)",
125
+ active: "var(--color-sky-200)",
126
+ },
127
+ },
128
+ role: {
129
+ paired: {
130
+ background: {
131
+ DEFAULT: "var(--color-stone-950)",
132
+ foreground: "var(--color-stone-50)",
133
+ },
134
+ surface: {
135
+ DEFAULT: "var(--color-stone-900)",
136
+ foreground: "var(--color-stone-100)",
137
+ hover: "var(--color-stone-800)",
138
+ active: "var(--color-stone-700)",
139
+ },
140
+ "surface-1": {
141
+ DEFAULT: "var(--color-stone-800)",
142
+ foreground: "var(--color-stone-100)",
143
+ hover: "var(--color-stone-700)",
144
+ active: "var(--color-stone-600)",
145
+ },
146
+ "surface-2": {
147
+ DEFAULT: "var(--color-stone-700)",
148
+ foreground: "var(--color-stone-100)",
149
+ hover: "var(--color-stone-600)",
150
+ active: "var(--color-stone-500)",
151
+ },
152
+ muted: {
153
+ DEFAULT: "var(--color-stone-800)",
154
+ foreground: "var(--color-stone-500)",
155
+ hover: "var(--color-stone-700)",
156
+ active: "var(--color-stone-600)",
157
+ },
158
+ },
159
+ single: {
160
+ foreground: "var(--color-stone-50)",
161
+ border: {
162
+ DEFAULT: "var(--color-stone-700)",
163
+ hover: "var(--color-stone-600)",
164
+ active: "var(--color-stone-500)",
165
+ },
166
+ input: {
167
+ DEFAULT: "var(--color-stone-900)",
168
+ hover: "var(--color-stone-800)",
169
+ },
170
+ ring: "color-mix(in srgb, var(--color-orange-500) 25%, transparent)",
171
+ },
172
+ },
173
+ },
174
+ };
175
+ export default { light, dark };
package/dist/themes/slate-teal-ocean.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import type { TokenSchema } from "../utils/design-tokens.js";
2
+ declare const _default: {
3
+ light: TokenSchema;
4
+ dark: TokenSchema;
5
+ };
6
+ export default _default;