@raxium/themes 0.1.6 → 0.1.7
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.
- package/dist/.tsbuildinfo +1 -1
- package/dist/default/crafts/button.d.ts +36 -18
- package/dist/default/crafts/button.js +22 -7
- package/dist/default/index.css +3 -0
- package/dist/razer/index.css +613 -130
- package/package.json +1 -1
- package/src/default/crafts/button.ts +24 -7
- package/src/razer/components/button.css +227 -28
- package/src/razer/components/checkbox.css +1 -2
- package/src/razer/components/radio-group.css +2 -2
- package/src/razer/components/toggle-group.css +7 -10
- package/src/razer/components/toggle.css +7 -11
- package/src/razer/preset.css +39 -7
package/package.json
CHANGED
|
@@ -22,13 +22,19 @@ export const tvButton = tv(
|
|
|
22
22
|
},
|
|
23
23
|
variants: {
|
|
24
24
|
variant: {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
solid: '',
|
|
26
|
+
outlined: '',
|
|
27
|
+
filled: '',
|
|
28
28
|
text: '',
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
link: '',
|
|
30
|
+
icon: '',
|
|
31
|
+
},
|
|
32
|
+
color: {
|
|
33
|
+
primary: '',
|
|
34
|
+
default: '',
|
|
35
|
+
danger: '',
|
|
36
|
+
warning: '',
|
|
37
|
+
info: '',
|
|
32
38
|
},
|
|
33
39
|
size: {
|
|
34
40
|
xs: {
|
|
@@ -51,8 +57,19 @@ export const tvButton = tv(
|
|
|
51
57
|
false: '',
|
|
52
58
|
},
|
|
53
59
|
},
|
|
60
|
+
|
|
61
|
+
compoundVariants: [
|
|
62
|
+
{
|
|
63
|
+
variant: 'icon',
|
|
64
|
+
class: {
|
|
65
|
+
root: 'p-0 aspect-square border-none',
|
|
66
|
+
},
|
|
67
|
+
},
|
|
68
|
+
],
|
|
69
|
+
|
|
54
70
|
defaultVariants: {
|
|
55
|
-
variant: '
|
|
71
|
+
variant: 'solid',
|
|
72
|
+
color: 'primary',
|
|
56
73
|
size: 'base',
|
|
57
74
|
loading: false,
|
|
58
75
|
},
|
|
@@ -1,40 +1,239 @@
|
|
|
1
1
|
@layer components {
|
|
2
2
|
.rui-btn {
|
|
3
|
-
/*
|
|
4
|
-
&[data-variant=
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
3
|
+
/* ===== solid ===== */
|
|
4
|
+
&[data-variant='solid'] {
|
|
5
|
+
&[data-color='primary'] {
|
|
6
|
+
--rui-ripple-color: var(--color-rz-green-border);
|
|
7
|
+
@apply bg-rz-green text-h00 border-rz-green-border hover:bg-rz-green-light active:bg-rz-green-dark;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
&[data-color='default'] {
|
|
11
|
+
--rui-ripple-color: var(--color-h4f);
|
|
12
|
+
@apply bg-rz-neutral text-hff border-rz-neutral-border
|
|
13
|
+
hover:bg-rz-neutral-light
|
|
14
|
+
active:bg-rz-neutral-dark;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
&[data-color='danger'] {
|
|
18
|
+
--rui-ripple-color: var(--color-rz-red);
|
|
19
|
+
@apply bg-rz-red text-hff border-rz-red-border
|
|
20
|
+
hover:bg-rz-red-light
|
|
21
|
+
active:bg-rz-red-dark;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&[data-color='warning'] {
|
|
25
|
+
--rui-ripple-color: var(--color-rz-orange);
|
|
26
|
+
@apply bg-rz-orange text-hff border-rz-orange-border
|
|
27
|
+
hover:bg-rz-orange-light
|
|
28
|
+
active:bg-rz-orange-dark;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
&[data-color='info'] {
|
|
32
|
+
--rui-ripple-color: var(--color-rz-blue);
|
|
33
|
+
@apply bg-rz-blue text-hff border-rz-blue-border
|
|
34
|
+
hover:bg-rz-blue-light
|
|
35
|
+
active:bg-rz-blue-dark;
|
|
36
|
+
}
|
|
9
37
|
}
|
|
10
38
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
@apply bg-
|
|
14
|
-
|
|
15
|
-
|
|
39
|
+
/* ===== outlined ===== */
|
|
40
|
+
&[data-variant='outlined'] {
|
|
41
|
+
@apply bg-transparent;
|
|
42
|
+
|
|
43
|
+
&[data-color='primary'] {
|
|
44
|
+
--rui-ripple-color: var(--color-rz-green);
|
|
45
|
+
@apply text-rz-green border-rz-green-border
|
|
46
|
+
hover:border-rz-green-light hover:text-rz-green-light
|
|
47
|
+
active:border-rz-green-dark active:text-rz-green-dark;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
&[data-color='default'] {
|
|
51
|
+
--rui-ripple-color: var(--color-hcc);
|
|
52
|
+
@apply text-h90 border-rz-neutral-border
|
|
53
|
+
hover:border-rz-neutral-light hover:text-hff
|
|
54
|
+
active:border-rz-neutral-dark active:text-rz-neutral;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
&[data-color='danger'] {
|
|
58
|
+
--rui-ripple-color: var(--color-rz-red);
|
|
59
|
+
@apply text-rz-red border-rz-red-border
|
|
60
|
+
hover:border-rz-red-light hover:text-rz-red-light
|
|
61
|
+
active:border-rz-red-dark active:text-rz-red-dark;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
&[data-color='warning'] {
|
|
65
|
+
--rui-ripple-color: var(--color-rz-orange);
|
|
66
|
+
@apply text-rz-orange border-rz-orange-border
|
|
67
|
+
hover:border-rz-orange-light hover:text-rz-orange-light
|
|
68
|
+
active:border-rz-orange-dark active:text-rz-orange-dark;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
&[data-color='info'] {
|
|
72
|
+
--rui-ripple-color: var(--color-rz-blue);
|
|
73
|
+
@apply text-rz-blue border-rz-blue-border
|
|
74
|
+
hover:border-rz-blue-light hover:text-rz-blue-light
|
|
75
|
+
active:border-rz-blue-dark active:text-rz-blue-dark;
|
|
76
|
+
}
|
|
16
77
|
}
|
|
17
78
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
@apply
|
|
21
|
-
|
|
22
|
-
|
|
79
|
+
/* ===== filled ===== */
|
|
80
|
+
&[data-variant='filled'] {
|
|
81
|
+
@apply border-transparent;
|
|
82
|
+
|
|
83
|
+
&[data-color='primary'] {
|
|
84
|
+
--rui-ripple-color: var(--color-rz-green);
|
|
85
|
+
@apply bg-rz-green/15 text-rz-green
|
|
86
|
+
hover:bg-rz-green-light/30
|
|
87
|
+
active:bg-rz-green-dark/15;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
&[data-color='default'] {
|
|
91
|
+
--rui-ripple-color: var(--color-h4f);
|
|
92
|
+
@apply bg-rz-neutral/15 text-hff
|
|
93
|
+
hover:bg-rz-neutral-light/30
|
|
94
|
+
active:bg-rz-neutral-dark/15;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
&[data-color='danger'] {
|
|
98
|
+
--rui-ripple-color: var(--color-rz-red);
|
|
99
|
+
@apply bg-rz-red/15 text-rz-red
|
|
100
|
+
hover:bg-rz-red-light/30
|
|
101
|
+
active:bg-rz-red-dark/15;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
&[data-color='warning'] {
|
|
105
|
+
--rui-ripple-color: var(--color-rz-orange);
|
|
106
|
+
@apply bg-rz-orange/15 text-rz-orange
|
|
107
|
+
hover:bg-rz-orange-light/30
|
|
108
|
+
active:bg-rz-orange-dark/15;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
&[data-color='info'] {
|
|
112
|
+
--rui-ripple-color: var(--color-rz-blue);
|
|
113
|
+
@apply bg-rz-blue/15 text-rz-blue
|
|
114
|
+
hover:bg-rz-blue-light/30
|
|
115
|
+
active:bg-rz-blue-dark/15;
|
|
116
|
+
}
|
|
23
117
|
}
|
|
24
118
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
@apply border-none bg-transparent
|
|
28
|
-
|
|
29
|
-
|
|
119
|
+
/* ===== text ===== */
|
|
120
|
+
&[data-variant='text'] {
|
|
121
|
+
@apply border-none bg-transparent;
|
|
122
|
+
|
|
123
|
+
&[data-color='primary'] {
|
|
124
|
+
--rui-ripple-color: var(--color-rz-green);
|
|
125
|
+
@apply text-rz-green
|
|
126
|
+
hover:bg-rz-green-light/30 hover:text-rz-green-light
|
|
127
|
+
active:bg-rz-green-dark/15;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
&[data-color='default'] {
|
|
131
|
+
--rui-ripple-color: var(--color-h8f);
|
|
132
|
+
@apply text-h90
|
|
133
|
+
hover:bg-rz-neutral-light/30 hover:text-hff
|
|
134
|
+
active:bg-rz-neutral-dark/15 active:text-h90;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
&[data-color='danger'] {
|
|
138
|
+
--rui-ripple-color: var(--color-rz-red);
|
|
139
|
+
@apply text-rz-red
|
|
140
|
+
hover:bg-rz-red-light/30 hover:text-rz-red-light
|
|
141
|
+
active:bg-rz-red-dark/15;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
&[data-color='warning'] {
|
|
145
|
+
--rui-ripple-color: var(--color-rz-orange);
|
|
146
|
+
@apply text-rz-orange
|
|
147
|
+
hover:bg-rz-orange-light/30 hover:text-rz-orange-light
|
|
148
|
+
active:bg-rz-orange-dark/15;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
&[data-color='info'] {
|
|
152
|
+
--rui-ripple-color: var(--color-rz-blue);
|
|
153
|
+
@apply text-rz-blue
|
|
154
|
+
hover:bg-rz-blue-light/30 hover:text-rz-blue-light
|
|
155
|
+
active:bg-rz-blue-dark/15;
|
|
156
|
+
}
|
|
30
157
|
}
|
|
31
158
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
@apply bg-transparent
|
|
35
|
-
|
|
36
|
-
|
|
159
|
+
/* ===== link ===== */
|
|
160
|
+
&[data-variant='link'] {
|
|
161
|
+
@apply border-none bg-transparent underline underline-offset-2;
|
|
162
|
+
|
|
163
|
+
&[data-color='primary'] {
|
|
164
|
+
--rui-ripple-color: var(--color-rz-green);
|
|
165
|
+
@apply text-rz-green
|
|
166
|
+
hover:text-rz-green-light
|
|
167
|
+
active:text-rz-green-dark;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
&[data-color='default'] {
|
|
171
|
+
--rui-ripple-color: var(--color-h8f);
|
|
172
|
+
@apply text-h90
|
|
173
|
+
hover:text-hff
|
|
174
|
+
active:text-h90;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
&[data-color='danger'] {
|
|
178
|
+
--rui-ripple-color: var(--color-rz-red);
|
|
179
|
+
@apply text-rz-red
|
|
180
|
+
hover:text-rz-red-light
|
|
181
|
+
active:text-rz-red-dark;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
&[data-color='warning'] {
|
|
185
|
+
--rui-ripple-color: var(--color-rz-orange);
|
|
186
|
+
@apply text-rz-orange
|
|
187
|
+
hover:text-rz-orange-light
|
|
188
|
+
active:text-rz-orange-dark;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
&[data-color='info'] {
|
|
192
|
+
--rui-ripple-color: var(--color-rz-blue);
|
|
193
|
+
@apply text-rz-blue
|
|
194
|
+
hover:text-rz-blue-light
|
|
195
|
+
active:text-rz-blue-dark;
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
/* ===== icon ===== */
|
|
200
|
+
&[data-variant='icon'] {
|
|
201
|
+
@apply bg-transparent;
|
|
202
|
+
|
|
203
|
+
&[data-color='primary'] {
|
|
204
|
+
--rui-ripple-color: var(--color-rz-green);
|
|
205
|
+
@apply text-rz-green
|
|
206
|
+
hover:bg-rz-green-light/30 hover:text-rz-green-light
|
|
207
|
+
active:bg-rz-green-dark/15;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
&[data-color='default'] {
|
|
211
|
+
--rui-ripple-color: var(--color-h8f);
|
|
212
|
+
@apply text-h90
|
|
213
|
+
hover:bg-rz-neutral-light/30 hover:text-hff
|
|
214
|
+
active:bg-rz-neutral-dark/15 active:text-h90;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
&[data-color='danger'] {
|
|
218
|
+
--rui-ripple-color: var(--color-rz-red);
|
|
219
|
+
@apply text-rz-red
|
|
220
|
+
hover:bg-rz-red-light/30 hover:text-rz-red-light
|
|
221
|
+
active:bg-rz-red-dark/15;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
&[data-color='warning'] {
|
|
225
|
+
--rui-ripple-color: var(--color-rz-orange);
|
|
226
|
+
@apply text-rz-orange
|
|
227
|
+
hover:bg-rz-orange-light/30 hover:text-rz-orange-light
|
|
228
|
+
active:bg-rz-orange-dark/15;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
&[data-color='info'] {
|
|
232
|
+
--rui-ripple-color: var(--color-rz-blue);
|
|
233
|
+
@apply text-rz-blue
|
|
234
|
+
hover:bg-rz-blue-light/30 hover:text-rz-blue-light
|
|
235
|
+
active:bg-rz-blue-dark/15;
|
|
236
|
+
}
|
|
37
237
|
}
|
|
38
|
-
|
|
39
238
|
}
|
|
40
|
-
}
|
|
239
|
+
}
|
|
@@ -11,8 +11,7 @@
|
|
|
11
11
|
@apply bg-transparent border-h55
|
|
12
12
|
hover:border-rz-green
|
|
13
13
|
focus:border-rz-green
|
|
14
|
-
active:bg-rz-green-dark
|
|
15
|
-
active:border-rz-green-dark-active
|
|
14
|
+
active:bg-rz-green-dark
|
|
16
15
|
data-[state=checked]:bg-rz-green
|
|
17
16
|
data-[state=checked]:border-rz-green
|
|
18
17
|
data-[state=indeterminate]:bg-rz-green
|
|
@@ -16,10 +16,10 @@
|
|
|
16
16
|
&[data-variant='checkbox'] {
|
|
17
17
|
@apply data-[state=checked]:bg-rz-green
|
|
18
18
|
data-[state=checked]:hover:bg-rz-green-light
|
|
19
|
-
data-[state=checked]:active:bg-rz-green-dark
|
|
19
|
+
data-[state=checked]:active:bg-rz-green-dark
|
|
20
20
|
data-[state=checked]:border-rz-green
|
|
21
21
|
data-[state=checked]:hover:border-rz-green-light
|
|
22
|
-
data-[state=checked]:active:border-rz-green
|
|
22
|
+
data-[state=checked]:active:border-rz-green;
|
|
23
23
|
|
|
24
24
|
@apply data-disabled:data-[state=checked]:bg-rz-green
|
|
25
25
|
data-disabled:data-[state=checked]:hover:bg-rz-green
|
|
@@ -1,19 +1,16 @@
|
|
|
1
1
|
@layer components {
|
|
2
2
|
.rui-toggle-group {
|
|
3
|
-
@apply border-
|
|
3
|
+
@apply border-h44;
|
|
4
4
|
}
|
|
5
5
|
.rui-toggle-group-item {
|
|
6
|
-
@apply
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
@apply text-rui-toggle-text bg-h1a border-h44
|
|
7
|
+
hover:bg-h33 hover:border-h4c hover:ring-h4c hover:text-rui-toggle-text-hover
|
|
8
|
+
active:bg-h24 active:text-rui-toggle-text-active;
|
|
9
9
|
|
|
10
10
|
&[data-state='on'] {
|
|
11
|
-
@apply bg-rz-green-dark
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
active:bg-rz-green-dark-active
|
|
15
|
-
active:border-rz-green-dark-active
|
|
16
|
-
active:text-ha7;
|
|
11
|
+
@apply bg-rz-green-dark text-hff border-rz-green-border
|
|
12
|
+
hover:bg-rz-green hover:border-rz-green-border
|
|
13
|
+
active:bg-rz-green-dark active:text-ha7;
|
|
17
14
|
}
|
|
18
15
|
}
|
|
19
16
|
}
|
|
@@ -1,17 +1,13 @@
|
|
|
1
1
|
@layer components {
|
|
2
2
|
.rui-toggle {
|
|
3
|
-
@apply
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
@apply text-rui-toggle-text bg-h1a border-h28
|
|
4
|
+
hover:bg-h33 hover:border-h4c hover:ring-h4c hover:text-rui-toggle-text-hover
|
|
5
|
+
active:bg-h24 active:text-rui-toggle-text-active;
|
|
6
6
|
|
|
7
7
|
&[data-state='on'] {
|
|
8
|
-
@apply bg-rz-green-dark
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
hover:border-rz-green-dark-hover
|
|
12
|
-
active:bg-rz-green-dark-active
|
|
13
|
-
active:border-rz-green-dark-active
|
|
14
|
-
active:text-ha7;
|
|
8
|
+
@apply bg-rz-green-dark text-hff border-rz-green-border
|
|
9
|
+
hover:bg-rz-green hover:border-rz-green-border
|
|
10
|
+
active:bg-rz-green-dark active:text-ha7;
|
|
15
11
|
}
|
|
16
12
|
}
|
|
17
|
-
}
|
|
13
|
+
}
|
package/src/razer/preset.css
CHANGED
|
@@ -28,18 +28,47 @@
|
|
|
28
28
|
/* Colors */
|
|
29
29
|
--color-*: initial;
|
|
30
30
|
--color-tw-ring-color: transparent;
|
|
31
|
+
|
|
31
32
|
--color-rz-green: oklch(76.87% 0.2343 141.32);
|
|
33
|
+
/* razer green dark */
|
|
32
34
|
--color-rz-green-dark: oklch(47.48% 0.2343 141.32);
|
|
33
|
-
|
|
34
|
-
--color-rz-green-
|
|
35
|
-
|
|
36
|
-
--color-rz-green-border: oklch(
|
|
37
|
-
--color-rz-green-border-hover: oklch(70.57% 0.2343 141.32);
|
|
38
|
-
--color-rz-green-border-active: oklch(45.88% 0.2343 141.32);
|
|
35
|
+
/* razer green light */
|
|
36
|
+
--color-rz-green-light: oklch(82.45% 0.2343 141.32);
|
|
37
|
+
/* razer green border */
|
|
38
|
+
--color-rz-green-border: oklch(59.19% 0.2343 141.32);
|
|
39
39
|
|
|
40
40
|
--color-rz-orange: oklch(80.16% 0.1705 73.27);
|
|
41
|
-
|
|
41
|
+
/* razer orange light */
|
|
42
|
+
--color-rz-orange-light: oklch(85.98% 0.1705 73.27);
|
|
43
|
+
/* razer orange dark */
|
|
44
|
+
--color-rz-orange-dark: oklch(49.51% 0.1705 73.27);
|
|
45
|
+
/* razer orange border */
|
|
46
|
+
--color-rz-orange-border: oklch(61.72% 0.1705 73.27);
|
|
47
|
+
|
|
48
|
+
--color-rz-red: oklch(49.67% 0.202 29.03);
|
|
49
|
+
/* razer red light */
|
|
50
|
+
--color-rz-red-light: oklch(53.28% 0.202 29.03);
|
|
51
|
+
/* razer red dark */
|
|
52
|
+
--color-rz-red-dark: oklch(30.68% 0.202 29.03);
|
|
53
|
+
/* razer red border */
|
|
54
|
+
--color-rz-red-border: oklch(38.25% 0.202 29.03);
|
|
55
|
+
|
|
42
56
|
--color-rz-blue: oklch(69% 0.1282 229.93);
|
|
57
|
+
/* razer blue light */
|
|
58
|
+
--color-rz-blue-light: oklch(74.01% 0.1282 229.93);
|
|
59
|
+
/* razer blue dark */
|
|
60
|
+
--color-rz-blue-dark: oklch(42.62% 0.1282 229.93);
|
|
61
|
+
/* razer blue border */
|
|
62
|
+
--color-rz-blue-border: oklch(53.13% 0.1282 229.93);
|
|
63
|
+
|
|
64
|
+
/* razer neutral */
|
|
65
|
+
--color-rz-neutral: oklch(54.52% 0 0);
|
|
66
|
+
/* razer neutral light */
|
|
67
|
+
--color-rz-neutral-light: oklch(58.48% 0 0);
|
|
68
|
+
/* razer neutral dark */
|
|
69
|
+
--color-rz-neutral-dark: oklch(33.68% 0 0);
|
|
70
|
+
/* razer neutral border */
|
|
71
|
+
--color-rz-neutral-border: oklch(41.98% 0 0);
|
|
43
72
|
|
|
44
73
|
--color-black: oklch(0% 0 0);
|
|
45
74
|
--color-h00: oklch(0% 0 0);
|
|
@@ -75,6 +104,9 @@
|
|
|
75
104
|
--color-h1d: oklch(19.61% 0 0);
|
|
76
105
|
--color-h47: oklch(40.64% 0 0);
|
|
77
106
|
--color-h90: oklch(65.34% 0 0);
|
|
107
|
+
--color-h70: oklch(54.52% 0 0);
|
|
108
|
+
--color-h33: oklch(32.11% 0 0);
|
|
109
|
+
--color-h99: oklch(68.3% 0 0);
|
|
78
110
|
|
|
79
111
|
/* Text */
|
|
80
112
|
--text-3xs: 0.5rem;
|