@rokkit/themes 1.0.0-next.44 → 1.0.0-next.46
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/package.json +11 -10
- package/src/base/animation.css +22 -0
- package/src/base/atoms.css +58 -0
- package/src/base/core.css +62 -0
- package/src/base/layout.css +38 -0
- package/src/base/molecules.css +125 -0
- package/src/base/organisms.css +42 -0
- package/src/base/scrollbar.css +16 -0
- package/src/base.css +7 -0
- package/src/markdown.css +1001 -0
- package/src/material/base.css +12 -0
- package/src/material/form.css +30 -0
- package/src/material/input.css +65 -0
- package/src/material/list.css +96 -0
- package/src/material.css +9 -0
- package/src/minimal/base.css +8 -0
- package/src/minimal/form.css +87 -0
- package/src/minimal/input.css +154 -0
- package/src/minimal/list.css +134 -0
- package/src/minimal/tabs.css +44 -0
- package/src/minimal.css +11 -0
- package/src/palette.css +288 -0
- package/src/prism.css +111 -0
- package/src/rokkit/atoms.css +41 -0
- package/src/rokkit/base.css +18 -0
- package/src/rokkit/layout.css +17 -0
- package/src/rokkit/molecules.css +150 -0
- package/src/rokkit/organisms.css +299 -0
- package/src/rokkit.css +6 -0
package/src/palette.css
ADDED
|
@@ -0,0 +1,288 @@
|
|
|
1
|
+
@layer base {
|
|
2
|
+
:root {
|
|
3
|
+
--primary-hue: 25;
|
|
4
|
+
--primary-saturation: 95%;
|
|
5
|
+
--secondary-hue: 329;
|
|
6
|
+
--secondary-saturation: 80%;
|
|
7
|
+
--accent-hue: 329;
|
|
8
|
+
--accent-saturation: 80%;
|
|
9
|
+
--skin-hue: 223;
|
|
10
|
+
--skin-saturation: 11.5%;
|
|
11
|
+
--scroll-width: 0.5rem;
|
|
12
|
+
}
|
|
13
|
+
/* light theme colors */
|
|
14
|
+
.light {
|
|
15
|
+
--text-white: var(--skin-hue), var(--skin-saturation), 100%;
|
|
16
|
+
--text-black: var(--skin-hue), var(--skin-saturation), 20%;
|
|
17
|
+
|
|
18
|
+
--primary-50: var(--primary-hue), var(--primary-saturation), 95%;
|
|
19
|
+
--primary-100: var(--primary-hue), var(--primary-saturation), 90%;
|
|
20
|
+
--primary-200: var(--primary-hue), var(--primary-saturation), 85%;
|
|
21
|
+
--primary-300: var(--primary-hue), var(--primary-saturation), 80%;
|
|
22
|
+
--primary-400: var(--primary-hue), var(--primary-saturation), 70%;
|
|
23
|
+
--primary-500: var(--primary-hue), var(--primary-saturation), 60%;
|
|
24
|
+
--primary-600: var(--primary-hue), var(--primary-saturation), 50%;
|
|
25
|
+
--primary-700: var(--primary-hue), var(--primary-saturation), 40%;
|
|
26
|
+
--primary-800: var(--primary-hue), var(--primary-saturation), 30%;
|
|
27
|
+
--primary-900: var(--primary-hue), var(--primary-saturation), 20%;
|
|
28
|
+
|
|
29
|
+
--secondary-50: var(--secondary-hue), var(--secondary-saturation), 95%;
|
|
30
|
+
--secondary-100: var(--secondary-hue), var(--secondary-saturation), 90%;
|
|
31
|
+
--secondary-200: var(--secondary-hue), var(--secondary-saturation), 85%;
|
|
32
|
+
--secondary-300: var(--secondary-hue), var(--secondary-saturation), 80%;
|
|
33
|
+
--secondary-400: var(--secondary-hue), var(--secondary-saturation), 70%;
|
|
34
|
+
--secondary-500: var(--secondary-hue), var(--secondary-saturation), 60%;
|
|
35
|
+
--secondary-600: var(--secondary-hue), var(--secondary-saturation), 50%;
|
|
36
|
+
--secondary-700: var(--secondary-hue), var(--secondary-saturation), 40%;
|
|
37
|
+
--secondary-800: var(--secondary-hue), var(--secondary-saturation), 30%;
|
|
38
|
+
--secondary-900: var(--secondary-hue), var(--secondary-saturation), 20%;
|
|
39
|
+
|
|
40
|
+
--accent-50: var(--accent-hue), var(--accent-saturation), 95%;
|
|
41
|
+
--accent-100: var(--accent-hue), var(--accent-saturation), 90%;
|
|
42
|
+
--accent-200: var(--accent-hue), var(--accent-saturation), 85%;
|
|
43
|
+
--accent-300: var(--accent-hue), var(--accent-saturation), 80%;
|
|
44
|
+
--accent-400: var(--accent-hue), var(--accent-saturation), 70%;
|
|
45
|
+
--accent-500: var(--accent-hue), var(--accent-saturation), 60%;
|
|
46
|
+
--accent-600: var(--accent-hue), var(--accent-saturation), 50%;
|
|
47
|
+
--accent-700: var(--accent-hue), var(--accent-saturation), 40%;
|
|
48
|
+
--accent-800: var(--accent-hue), var(--accent-saturation), 30%;
|
|
49
|
+
--accent-900: var(--accent-hue), var(--accent-saturation), 20%;
|
|
50
|
+
|
|
51
|
+
--skin-50: var(--skin-hue), var(--skin-saturation), 100%;
|
|
52
|
+
--skin-100: var(--skin-hue), var(--skin-saturation), 95%;
|
|
53
|
+
--skin-200: var(--skin-hue), var(--skin-saturation), 90%;
|
|
54
|
+
--skin-300: var(--skin-hue), var(--skin-saturation), 80%;
|
|
55
|
+
--skin-400: var(--skin-hue), var(--skin-saturation), 70%;
|
|
56
|
+
--skin-500: var(--skin-hue), var(--skin-saturation), 60%;
|
|
57
|
+
--skin-600: var(--skin-hue), var(--skin-saturation), 50%;
|
|
58
|
+
--skin-700: var(--skin-hue), var(--skin-saturation), 40%;
|
|
59
|
+
--skin-800: var(--skin-hue), var(--skin-saturation), 30%;
|
|
60
|
+
--skin-900: var(--skin-hue), var(--skin-saturation), 20%;
|
|
61
|
+
--skin-zebra: var(--skin-hue), var(--skin-saturation), 98%;
|
|
62
|
+
|
|
63
|
+
/* light theme syntax colors */
|
|
64
|
+
--tab-size: 2;
|
|
65
|
+
--code-bg: #f3f4f6;
|
|
66
|
+
--code-fill: #f3f4f6;
|
|
67
|
+
--code-normal: #333333; /*hsl(45, 7%, 45%)*/
|
|
68
|
+
--code-string: hsl(41, 37%, 45%); /*#183691 */
|
|
69
|
+
--code-number: hsl(102, 27%, 50%); /* #0086b3;*/
|
|
70
|
+
--code-atrule: var(--code-string);
|
|
71
|
+
--code-keyword: hsl(204, 58%, 45%); /* #795da3;*/
|
|
72
|
+
--code-comment: #969896; /*hsl(210, 25%, 60%)*/
|
|
73
|
+
--code-property: #63a35c;
|
|
74
|
+
--code-selector: var(--code-keyword);
|
|
75
|
+
--code-operator: hsl(19, 67%, 45%);
|
|
76
|
+
--code-function: hsl(19, 67%, 45%); /* #a71d5d; */
|
|
77
|
+
|
|
78
|
+
--code-gutter-marker: black;
|
|
79
|
+
--code-gutter-subtle: #999;
|
|
80
|
+
--code-cursor: #24292e;
|
|
81
|
+
--code-cursor-block: rgba(20, 255, 20, 0.5);
|
|
82
|
+
--code-linenumbers: rgba(27, 31, 35, 0.3);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* dark theme colors */
|
|
86
|
+
.dark {
|
|
87
|
+
--text-white: var(--skin-hue), var(--skin-saturation), 20%;
|
|
88
|
+
--text-black: var(--skin-hue), var(--skin-saturation), 100%;
|
|
89
|
+
|
|
90
|
+
--primary-50: var(--primary-hue), var(--primary-saturation), 20%;
|
|
91
|
+
--primary-100: var(--primary-hue), var(--primary-saturation), 30%;
|
|
92
|
+
--primary-200: var(--primary-hue), var(--primary-saturation), 40%;
|
|
93
|
+
--primary-300: var(--primary-hue), var(--primary-saturation), 50%;
|
|
94
|
+
--primary-400: var(--primary-hue), var(--primary-saturation), 60%;
|
|
95
|
+
--primary-500: var(--primary-hue), var(--primary-saturation), 70%;
|
|
96
|
+
--primary-600: var(--primary-hue), var(--primary-saturation), 80%;
|
|
97
|
+
--primary-700: var(--primary-hue), var(--primary-saturation), 85%;
|
|
98
|
+
--primary-800: var(--primary-hue), var(--primary-saturation), 90%;
|
|
99
|
+
--primary-300: var(--primary-hue), var(--primary-saturation), 95%;
|
|
100
|
+
|
|
101
|
+
--secondary-50: var(--secondary-hue), var(--secondary-saturation), 20%;
|
|
102
|
+
--secondary-100: var(--secondary-hue), var(--secondary-saturation), 30%;
|
|
103
|
+
--secondary-200: var(--secondary-hue), var(--secondary-saturation), 40%;
|
|
104
|
+
--secondary-300: var(--secondary-hue), var(--secondary-saturation), 50%;
|
|
105
|
+
--secondary-400: var(--secondary-hue), var(--secondary-saturation), 60%;
|
|
106
|
+
--secondary-500: var(--secondary-hue), var(--secondary-saturation), 70%;
|
|
107
|
+
--secondary-600: var(--secondary-hue), var(--secondary-saturation), 80%;
|
|
108
|
+
--secondary-700: var(--secondary-hue), var(--secondary-saturation), 85%;
|
|
109
|
+
--secondary-800: var(--secondary-hue), var(--secondary-saturation), 90%;
|
|
110
|
+
--secondary-900: var(--secondary-hue), var(--secondary-saturation), 95%;
|
|
111
|
+
|
|
112
|
+
--accent-50: var(--accent-hue), var(--accent-saturation), 20%;
|
|
113
|
+
--accent-100: var(--accent-hue), var(--accent-saturation), 30%;
|
|
114
|
+
--accent-200: var(--accent-hue), var(--accent-saturation), 40%;
|
|
115
|
+
--accent-300: var(--accent-hue), var(--accent-saturation), 50%;
|
|
116
|
+
--accent-400: var(--accent-hue), var(--accent-saturation), 60%;
|
|
117
|
+
--accent-500: var(--accent-hue), var(--accent-saturation), 70%;
|
|
118
|
+
--accent-600: var(--accent-hue), var(--accent-saturation), 80%;
|
|
119
|
+
--accent-700: var(--accent-hue), var(--accent-saturation), 85%;
|
|
120
|
+
--accent-800: var(--accent-hue), var(--accent-saturation), 90%;
|
|
121
|
+
--accent-900: var(--accent-hue), var(--accent-saturation), 95%;
|
|
122
|
+
|
|
123
|
+
--skin-50: var(--skin-hue), var(--skin-saturation), 20%;
|
|
124
|
+
--skin-100: var(--skin-hue), var(--skin-saturation), 25%;
|
|
125
|
+
--skin-200: var(--skin-hue), var(--skin-saturation), 30%;
|
|
126
|
+
--skin-300: var(--skin-hue), var(--skin-saturation), 40%;
|
|
127
|
+
--skin-400: var(--skin-hue), var(--skin-saturation), 50%;
|
|
128
|
+
--skin-500: var(--skin-hue), var(--skin-saturation), 60%;
|
|
129
|
+
--skin-600: var(--skin-hue), var(--skin-saturation), 70%;
|
|
130
|
+
--skin-700: var(--skin-hue), var(--skin-saturation), 80%;
|
|
131
|
+
--skin-800: var(--skin-hue), var(--skin-saturation), 90%;
|
|
132
|
+
--skin-900: var(--skin-hue), var(--skin-saturation), 100%;
|
|
133
|
+
--skin-zebra: var(--skin-hue), var(--skin-saturation), 22%;
|
|
134
|
+
|
|
135
|
+
/* dark theme syntax colors */
|
|
136
|
+
--code-bg: #282c34;
|
|
137
|
+
--code-fill: #282c34;
|
|
138
|
+
--code-normal: #e06c75; /*#ABB2BF;*/
|
|
139
|
+
--code-string: #98c379;
|
|
140
|
+
--code-number: #d19a66;
|
|
141
|
+
--code-atrule: #61afef;
|
|
142
|
+
--code-keyword: #c678dd;
|
|
143
|
+
--code-comment: #5c6370;
|
|
144
|
+
--code-property: #d19a66;
|
|
145
|
+
--code-selector: #e06c75;
|
|
146
|
+
--code-operator: #56b6c2;
|
|
147
|
+
--code-function: #61afef;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
@media (prefers-color-scheme: light) {
|
|
151
|
+
body:not(.dark) {
|
|
152
|
+
--text-white: var(--skin-hue), var(--skin-saturation), 100%;
|
|
153
|
+
--text-black: var(--skin-hue), var(--skin-saturation), 20%;
|
|
154
|
+
|
|
155
|
+
--primary-50: var(--primary-hue), var(--primary-saturation), 95%;
|
|
156
|
+
--primary-100: var(--primary-hue), var(--primary-saturation), 90%;
|
|
157
|
+
--primary-200: var(--primary-hue), var(--primary-saturation), 85%;
|
|
158
|
+
--primary-300: var(--primary-hue), var(--primary-saturation), 80%;
|
|
159
|
+
--primary-400: var(--primary-hue), var(--primary-saturation), 70%;
|
|
160
|
+
--primary-500: var(--primary-hue), var(--primary-saturation), 60%;
|
|
161
|
+
--primary-600: var(--primary-hue), var(--primary-saturation), 50%;
|
|
162
|
+
--primary-700: var(--primary-hue), var(--primary-saturation), 40%;
|
|
163
|
+
--primary-800: var(--primary-hue), var(--primary-saturation), 30%;
|
|
164
|
+
--primary-900: var(--primary-hue), var(--primary-saturation), 20%;
|
|
165
|
+
|
|
166
|
+
--secondary-50: var(--secondary-hue), var(--secondary-saturation), 95%;
|
|
167
|
+
--secondary-100: var(--secondary-hue), var(--secondary-saturation), 90%;
|
|
168
|
+
--secondary-200: var(--secondary-hue), var(--secondary-saturation), 85%;
|
|
169
|
+
--secondary-300: var(--secondary-hue), var(--secondary-saturation), 80%;
|
|
170
|
+
--secondary-400: var(--secondary-hue), var(--secondary-saturation), 70%;
|
|
171
|
+
--secondary-500: var(--secondary-hue), var(--secondary-saturation), 60%;
|
|
172
|
+
--secondary-600: var(--secondary-hue), var(--secondary-saturation), 50%;
|
|
173
|
+
--secondary-700: var(--secondary-hue), var(--secondary-saturation), 40%;
|
|
174
|
+
--secondary-800: var(--secondary-hue), var(--secondary-saturation), 30%;
|
|
175
|
+
--secondary-900: var(--secondary-hue), var(--secondary-saturation), 20%;
|
|
176
|
+
|
|
177
|
+
--accent-50: var(--accent-hue), var(--accent-saturation), 95%;
|
|
178
|
+
--accent-100: var(--accent-hue), var(--accent-saturation), 90%;
|
|
179
|
+
--accent-200: var(--accent-hue), var(--accent-saturation), 85%;
|
|
180
|
+
--accent-300: var(--accent-hue), var(--accent-saturation), 80%;
|
|
181
|
+
--accent-400: var(--accent-hue), var(--accent-saturation), 70%;
|
|
182
|
+
--accent-500: var(--accent-hue), var(--accent-saturation), 60%;
|
|
183
|
+
--accent-600: var(--accent-hue), var(--accent-saturation), 50%;
|
|
184
|
+
--accent-700: var(--accent-hue), var(--accent-saturation), 40%;
|
|
185
|
+
--accent-800: var(--accent-hue), var(--accent-saturation), 30%;
|
|
186
|
+
--accent-900: var(--accent-hue), var(--accent-saturation), 20%;
|
|
187
|
+
|
|
188
|
+
--skin-50: var(--skin-hue), var(--skin-saturation), 100%;
|
|
189
|
+
--skin-100: var(--skin-hue), var(--skin-saturation), 95%;
|
|
190
|
+
--skin-200: var(--skin-hue), var(--skin-saturation), 90%;
|
|
191
|
+
--skin-300: var(--skin-hue), var(--skin-saturation), 80%;
|
|
192
|
+
--skin-400: var(--skin-hue), var(--skin-saturation), 70%;
|
|
193
|
+
--skin-500: var(--skin-hue), var(--skin-saturation), 60%;
|
|
194
|
+
--skin-600: var(--skin-hue), var(--skin-saturation), 50%;
|
|
195
|
+
--skin-700: var(--skin-hue), var(--skin-saturation), 40%;
|
|
196
|
+
--skin-800: var(--skin-hue), var(--skin-saturation), 30%;
|
|
197
|
+
--skin-900: var(--skin-hue), var(--skin-saturation), 20%;
|
|
198
|
+
--skin-zebra: var(--skin-hue), var(--skin-saturation), 98%;
|
|
199
|
+
|
|
200
|
+
/* light theme syntax colors */
|
|
201
|
+
--tab-size: 2;
|
|
202
|
+
--code-bg: #f3f4f6;
|
|
203
|
+
--code-fill: #f3f4f6;
|
|
204
|
+
--code-normal: #333333; /*hsl(45, 7%, 45%)*/
|
|
205
|
+
--code-string: hsl(41, 37%, 45%); /*#183691 */
|
|
206
|
+
--code-number: hsl(102, 27%, 50%); /* #0086b3;*/
|
|
207
|
+
--code-atrule: var(--code-string);
|
|
208
|
+
--code-keyword: hsl(204, 58%, 45%); /* #795da3;*/
|
|
209
|
+
--code-comment: #969896; /*hsl(210, 25%, 60%)*/
|
|
210
|
+
--code-property: #63a35c;
|
|
211
|
+
--code-selector: var(--code-keyword);
|
|
212
|
+
--code-operator: hsl(19, 67%, 45%);
|
|
213
|
+
--code-function: hsl(19, 67%, 45%); /* #a71d5d; */
|
|
214
|
+
|
|
215
|
+
--code-gutter-marker: black;
|
|
216
|
+
--code-gutter-subtle: #999;
|
|
217
|
+
--code-cursor: #24292e;
|
|
218
|
+
--code-cursor-block: rgba(20, 255, 20, 0.5);
|
|
219
|
+
--code-linenumbers: rgba(27, 31, 35, 0.3);
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
@media (prefers-color-scheme: dark) {
|
|
224
|
+
body:not(.light) {
|
|
225
|
+
--text-white: var(--skin-hue), var(--skin-saturation), 20%;
|
|
226
|
+
--text-black: var(--skin-hue), var(--skin-saturation), 100%;
|
|
227
|
+
|
|
228
|
+
--primary-50: var(--primary-hue), var(--primary-saturation), 20%;
|
|
229
|
+
--primary-100: var(--primary-hue), var(--primary-saturation), 30%;
|
|
230
|
+
--primary-200: var(--primary-hue), var(--primary-saturation), 40%;
|
|
231
|
+
--primary-300: var(--primary-hue), var(--primary-saturation), 50%;
|
|
232
|
+
--primary-400: var(--primary-hue), var(--primary-saturation), 60%;
|
|
233
|
+
--primary-500: var(--primary-hue), var(--primary-saturation), 70%;
|
|
234
|
+
--primary-600: var(--primary-hue), var(--primary-saturation), 80%;
|
|
235
|
+
--primary-700: var(--primary-hue), var(--primary-saturation), 85%;
|
|
236
|
+
--primary-800: var(--primary-hue), var(--primary-saturation), 90%;
|
|
237
|
+
--primary-300: var(--primary-hue), var(--primary-saturation), 95%;
|
|
238
|
+
|
|
239
|
+
--secondary-50: var(--secondary-hue), var(--secondary-saturation), 20%;
|
|
240
|
+
--secondary-100: var(--secondary-hue), var(--secondary-saturation), 30%;
|
|
241
|
+
--secondary-200: var(--secondary-hue), var(--secondary-saturation), 40%;
|
|
242
|
+
--secondary-300: var(--secondary-hue), var(--secondary-saturation), 50%;
|
|
243
|
+
--secondary-400: var(--secondary-hue), var(--secondary-saturation), 60%;
|
|
244
|
+
--secondary-500: var(--secondary-hue), var(--secondary-saturation), 70%;
|
|
245
|
+
--secondary-600: var(--secondary-hue), var(--secondary-saturation), 80%;
|
|
246
|
+
--secondary-700: var(--secondary-hue), var(--secondary-saturation), 85%;
|
|
247
|
+
--secondary-800: var(--secondary-hue), var(--secondary-saturation), 90%;
|
|
248
|
+
--secondary-900: var(--secondary-hue), var(--secondary-saturation), 95%;
|
|
249
|
+
|
|
250
|
+
--accent-50: var(--accent-hue), var(--accent-saturation), 20%;
|
|
251
|
+
--accent-100: var(--accent-hue), var(--accent-saturation), 30%;
|
|
252
|
+
--accent-200: var(--accent-hue), var(--accent-saturation), 40%;
|
|
253
|
+
--accent-300: var(--accent-hue), var(--accent-saturation), 50%;
|
|
254
|
+
--accent-400: var(--accent-hue), var(--accent-saturation), 60%;
|
|
255
|
+
--accent-500: var(--accent-hue), var(--accent-saturation), 70%;
|
|
256
|
+
--accent-600: var(--accent-hue), var(--accent-saturation), 80%;
|
|
257
|
+
--accent-700: var(--accent-hue), var(--accent-saturation), 85%;
|
|
258
|
+
--accent-800: var(--accent-hue), var(--accent-saturation), 90%;
|
|
259
|
+
--accent-900: var(--accent-hue), var(--accent-saturation), 95%;
|
|
260
|
+
|
|
261
|
+
--skin-50: var(--skin-hue), var(--skin-saturation), 20%;
|
|
262
|
+
--skin-100: var(--skin-hue), var(--skin-saturation), 25%;
|
|
263
|
+
--skin-200: var(--skin-hue), var(--skin-saturation), 30%;
|
|
264
|
+
--skin-300: var(--skin-hue), var(--skin-saturation), 40%;
|
|
265
|
+
--skin-400: var(--skin-hue), var(--skin-saturation), 50%;
|
|
266
|
+
--skin-500: var(--skin-hue), var(--skin-saturation), 60%;
|
|
267
|
+
--skin-600: var(--skin-hue), var(--skin-saturation), 70%;
|
|
268
|
+
--skin-700: var(--skin-hue), var(--skin-saturation), 80%;
|
|
269
|
+
--skin-800: var(--skin-hue), var(--skin-saturation), 90%;
|
|
270
|
+
--skin-900: var(--skin-hue), var(--skin-saturation), 100%;
|
|
271
|
+
--skin-zebra: var(--skin-hue), var(--skin-saturation), 22%;
|
|
272
|
+
|
|
273
|
+
/* one dark theme syntax colors */
|
|
274
|
+
--code-bg: #282c34;
|
|
275
|
+
--code-fill: #282c34;
|
|
276
|
+
--code-normal: #e06c75; /*#ABB2BF;*/
|
|
277
|
+
--code-string: #98c379;
|
|
278
|
+
--code-number: #d19a66;
|
|
279
|
+
--code-atrule: #61afef;
|
|
280
|
+
--code-keyword: #c678dd;
|
|
281
|
+
--code-comment: #5c6370;
|
|
282
|
+
--code-property: #d19a66;
|
|
283
|
+
--code-selector: #e06c75;
|
|
284
|
+
--code-operator: #56b6c2;
|
|
285
|
+
--code-function: #61afef;
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
}
|
package/src/prism.css
ADDED
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
code,
|
|
2
|
+
code[class*='language-'],
|
|
3
|
+
pre[class*='language-'] {
|
|
4
|
+
background-color: var(--code-fill);
|
|
5
|
+
color: var(--code-normal);
|
|
6
|
+
text-align: left;
|
|
7
|
+
white-space: pre;
|
|
8
|
+
word-spacing: normal;
|
|
9
|
+
tab-size: 2;
|
|
10
|
+
hyphens: none;
|
|
11
|
+
/* font-family: 'Victor Mono', monospace; */
|
|
12
|
+
/* font-size: medium; */
|
|
13
|
+
font-variant-ligatures: common-lig-values; /* common-ligatures; */
|
|
14
|
+
line-height: 1.4;
|
|
15
|
+
direction: ltr;
|
|
16
|
+
cursor: text;
|
|
17
|
+
@apply font-mono text-sm;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
pre[class*='language-'] {
|
|
21
|
+
overflow: auto;
|
|
22
|
+
padding: 1.2em;
|
|
23
|
+
/* font-size: 85%; */
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/* p code,
|
|
27
|
+
li code,
|
|
28
|
+
table code {
|
|
29
|
+
margin: 0;
|
|
30
|
+
padding: 0.2em 0;
|
|
31
|
+
} */
|
|
32
|
+
p code:before,
|
|
33
|
+
p code:after,
|
|
34
|
+
li code:before,
|
|
35
|
+
li code:after,
|
|
36
|
+
table code:before,
|
|
37
|
+
table code:after {
|
|
38
|
+
letter-spacing: -0.2em;
|
|
39
|
+
content: '\00a0';
|
|
40
|
+
@apply rounded-md;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
code,
|
|
44
|
+
:not(pre) > code[class*='language-'],
|
|
45
|
+
pre[class*='language-'] {
|
|
46
|
+
/* background: var(--code-bg); */
|
|
47
|
+
@apply bg-skin-inset;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
:not(pre) > code[class*='language-'] {
|
|
51
|
+
padding: 0.1em;
|
|
52
|
+
/* border-radius: 0.3em; */
|
|
53
|
+
@apply rounded-md;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.token.comment,
|
|
57
|
+
.token.prolog,
|
|
58
|
+
.token.doctype,
|
|
59
|
+
.token.cdata {
|
|
60
|
+
color: var(--code-comment);
|
|
61
|
+
font-style: oblique;
|
|
62
|
+
}
|
|
63
|
+
.token.punctuation,
|
|
64
|
+
.token.string,
|
|
65
|
+
.token.attr-value {
|
|
66
|
+
color: var(--code-string);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.token.property,
|
|
70
|
+
.token.tag {
|
|
71
|
+
color: var(--code-property);
|
|
72
|
+
}
|
|
73
|
+
.token.boolean,
|
|
74
|
+
.token.number {
|
|
75
|
+
color: var(--code-number);
|
|
76
|
+
}
|
|
77
|
+
.token.selector,
|
|
78
|
+
.token.attr-name,
|
|
79
|
+
.token.attr-value .punctuation:first-child,
|
|
80
|
+
.token.regex,
|
|
81
|
+
.token.important {
|
|
82
|
+
color: var(--code-selector);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.token.operator,
|
|
86
|
+
.token.entity,
|
|
87
|
+
.token.url,
|
|
88
|
+
.language-css .token.string {
|
|
89
|
+
color: var(--code-operator);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.token.atrule {
|
|
93
|
+
color: var(--code-atrule);
|
|
94
|
+
}
|
|
95
|
+
.token.keyword {
|
|
96
|
+
color: var(--code-keyword);
|
|
97
|
+
font-style: italic;
|
|
98
|
+
}
|
|
99
|
+
.token.function {
|
|
100
|
+
color: var(--code-function);
|
|
101
|
+
}
|
|
102
|
+
.token.entity {
|
|
103
|
+
cursor: help;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.token.italic {
|
|
107
|
+
font-style: italic;
|
|
108
|
+
}
|
|
109
|
+
.namespace {
|
|
110
|
+
opacity: 0.7;
|
|
111
|
+
}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/* General styles */
|
|
2
|
+
.rokkit {
|
|
3
|
+
@apply select-none;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
/* Zebra styles */
|
|
7
|
+
.rokkit .zebra item {
|
|
8
|
+
@apply even:bg-skin-zebra hover:bg-skin-50;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
/* Styles for 'icon' class */
|
|
12
|
+
.rokkit icon:not([role='button']) {
|
|
13
|
+
@apply focus:outline-none;
|
|
14
|
+
}
|
|
15
|
+
.rokkit icon[role='button'] {
|
|
16
|
+
@apply text-skin-500 focus:rounded hover:text-secondary;
|
|
17
|
+
}
|
|
18
|
+
.rokkit icon[role='button']:focus {
|
|
19
|
+
@apply outline-none bg-gradient-to-r from-primary-500 to-secondary text-skin-50;
|
|
20
|
+
}
|
|
21
|
+
.rokkit icon.disabled[role='button'] {
|
|
22
|
+
@apply text-skin-subtle hover:text-skin-subtle cursor-not-allowed;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* Styles for input[type='number'] */
|
|
26
|
+
.rokkit input[type='number'] {
|
|
27
|
+
@apply text-right;
|
|
28
|
+
}
|
|
29
|
+
.rokkit input[type='number']::-webkit-inner-spin-button,
|
|
30
|
+
.rokkit input[type='number']::-webkit-outer-spin-button {
|
|
31
|
+
-webkit-appearance: none;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.rokkit progress-bar value-bar {
|
|
35
|
+
@apply bg-gradient-to-r from-primary to-secondary text-skin-subtle;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* Styles for 'searchable' class */
|
|
39
|
+
.searchable input {
|
|
40
|
+
@apply border border-skin-subtle;
|
|
41
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/* @import '../base/base.css'; */
|
|
2
|
+
|
|
3
|
+
/* .rokkit * {
|
|
4
|
+
@apply focus:outline-offset-0;
|
|
5
|
+
} */
|
|
6
|
+
|
|
7
|
+
/* .rokkit icon:not([role='button']) {
|
|
8
|
+
@apply focus:outline-none;
|
|
9
|
+
}
|
|
10
|
+
.rokkit icon[role='button'] {
|
|
11
|
+
@apply text-skin-500 focus:rounded hover:text-secondary;
|
|
12
|
+
}
|
|
13
|
+
.rokkit icon[role='button']:focus {
|
|
14
|
+
@apply outline-none bg-gradient-to-r from-primary-500 to-secondary text-skin-50;
|
|
15
|
+
}
|
|
16
|
+
.rokkit icon.disabled[role='button'] {
|
|
17
|
+
@apply text-skin-subtle hover:text-skin-subtle cursor-not-allowed;
|
|
18
|
+
} */
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/* Styles for 'toggle-switch' */
|
|
2
|
+
.rokkit field toggle-switch:focus-within {
|
|
3
|
+
@apply outline-none;
|
|
4
|
+
}
|
|
5
|
+
.rokkit field toggle-switch {
|
|
6
|
+
@apply rounded-sm min-h-10 items-center justify-center px-3 border-none;
|
|
7
|
+
}
|
|
8
|
+
.rokkit field toggle-switch item {
|
|
9
|
+
@apply leading-loose;
|
|
10
|
+
}
|
|
11
|
+
.rokkit field toggle-switch item p {
|
|
12
|
+
@apply justify-center;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.rokkit .horizontal > field radio-group {
|
|
16
|
+
@apply md:flex-row md:gap-4;
|
|
17
|
+
}
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
/* Styles for 'input-field' class */
|
|
2
|
+
.rokkit input-field field {
|
|
3
|
+
@apply p-2px box-border border border-skin-muted rounded;
|
|
4
|
+
}
|
|
5
|
+
.rokkit input-field input,
|
|
6
|
+
.rokkit input-field textarea,
|
|
7
|
+
.rokkit input-field select {
|
|
8
|
+
@apply border-0 rounded-sm;
|
|
9
|
+
}
|
|
10
|
+
.rokkit input-field > label {
|
|
11
|
+
@apply text-secondary-600;
|
|
12
|
+
}
|
|
13
|
+
.rokkit input-field field:focus-within {
|
|
14
|
+
@apply border-skin-base bg-gradient-to-r from-primary to-secondary;
|
|
15
|
+
}
|
|
16
|
+
.rokkit input-field span {
|
|
17
|
+
@apply border-r border-skin-muted bg-skin-base px-1 h-full aspect-square;
|
|
18
|
+
}
|
|
19
|
+
.rokkit input-field message {
|
|
20
|
+
@apply px-2 py-1 bg-skin-base rounded;
|
|
21
|
+
}
|
|
22
|
+
.rokkit input-field.fail {
|
|
23
|
+
@apply bg-error rounded px-2;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/* Styles for 'input-range' class */
|
|
27
|
+
.rokkit input-range range-track {
|
|
28
|
+
@apply h-2 mt-2 relative;
|
|
29
|
+
}
|
|
30
|
+
.rokkit input-range range-track span {
|
|
31
|
+
@apply bg-skin-subtle border box-border border-skin-muted rounded-full;
|
|
32
|
+
}
|
|
33
|
+
.rokkit input-range range-track selected {
|
|
34
|
+
@apply border top-0px bottom-0px bg-gradient-to-r from-primary to-secondary border-secondary rounded-full;
|
|
35
|
+
}
|
|
36
|
+
.rokkit input-range range-track thumb {
|
|
37
|
+
@apply rounded-sm focus:outline-none;
|
|
38
|
+
}
|
|
39
|
+
.rokkit input-range range-ticks {
|
|
40
|
+
font-size: 6px;
|
|
41
|
+
@apply bg-primary-100;
|
|
42
|
+
}
|
|
43
|
+
.rokkit .bookend range-track span::before,
|
|
44
|
+
.rokkit .bookend range-track span::after {
|
|
45
|
+
content: '';
|
|
46
|
+
@apply absolute w-1px rounded-full -top-2 -bottom-2 bg-gray-300;
|
|
47
|
+
}
|
|
48
|
+
.rokkit .bookend range-track span::before {
|
|
49
|
+
@apply -left-1px;
|
|
50
|
+
}
|
|
51
|
+
.rokkit .bookend range-track span::after {
|
|
52
|
+
@apply -right-2px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/* Styles for 'tick' class */
|
|
56
|
+
.rokkit tick {
|
|
57
|
+
@apply h-6;
|
|
58
|
+
}
|
|
59
|
+
.rokkit tick span {
|
|
60
|
+
@apply border-skin-500 h-full;
|
|
61
|
+
}
|
|
62
|
+
.rokkit tick p {
|
|
63
|
+
@apply items-top text-skin-500;
|
|
64
|
+
font-size: 8px;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* Styles for 'thumb' class */
|
|
68
|
+
.rokkit thumb {
|
|
69
|
+
@apply bg-gradient-to-r from-primary to-secondary border-secondary shadow-xl border;
|
|
70
|
+
}
|
|
71
|
+
.rokkit thumb.sliding::before {
|
|
72
|
+
content: '';
|
|
73
|
+
@apply absolute left-0 top-0 right-0 bottom-0 bg-secondary-500 opacity-30 rounded-sm;
|
|
74
|
+
transform: scale(2, 2);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* Styles for 'button[role='switch']' class */
|
|
78
|
+
.rokkit button[role='switch'] {
|
|
79
|
+
@apply rounded-full p-0 min-h-6 h-8 w-16;
|
|
80
|
+
@apply bg-skin-subtle border border-skin-subtle;
|
|
81
|
+
}
|
|
82
|
+
.rokkit button[role='switch'] > mark {
|
|
83
|
+
@apply rounded-full w-6 h-6 top-0.75;
|
|
84
|
+
@apply bg-gradient-to-r from-primary to-secondary;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
/* Styles for 'rating' class */
|
|
88
|
+
.rokkit rating {
|
|
89
|
+
@apply text-skin-600 text-xl h-10 justify-center rounded focus:outline focus:outline-secondary;
|
|
90
|
+
}
|
|
91
|
+
.rokkit rating > icon {
|
|
92
|
+
@apply w-8;
|
|
93
|
+
}
|
|
94
|
+
.rokkit rating:focus-within icon[aria-checked='true'] {
|
|
95
|
+
@apply text-primary;
|
|
96
|
+
}
|
|
97
|
+
.rokkit rating icon.hovering > i {
|
|
98
|
+
@apply text-secondary;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/* Styles for 'alert-list' class */
|
|
102
|
+
.rokkit alert-list {
|
|
103
|
+
@apply top-4 right-4 w-80;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
/* Pill styles */
|
|
107
|
+
.rokkit .pill {
|
|
108
|
+
@apply rounded-full bg-skin-inset border-skin-subtle border px-2 py-1 flex-grow-0;
|
|
109
|
+
}
|
|
110
|
+
.rokkit .pill > icon[role='button'] {
|
|
111
|
+
@apply rounded-full w-5 h-5 hover:bg-skin-muted hover:text-current focus:rounded-full focus:m-0;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.rokkit .pill > item {
|
|
115
|
+
@apply gap-2 leading-6 px-2;
|
|
116
|
+
}
|
|
117
|
+
.rokkit .pill > item > img {
|
|
118
|
+
@apply w-4 h-4;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/* Styles for 'item' class */
|
|
122
|
+
.rokkit item {
|
|
123
|
+
@apply flex flex-shrink items-center gap-1;
|
|
124
|
+
}
|
|
125
|
+
.rokkit item > p {
|
|
126
|
+
@apply flex-shrink text-ellipsis;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
/* Image and link styles */
|
|
130
|
+
.rokkit item > img,
|
|
131
|
+
.rokkit item > a > img {
|
|
132
|
+
@apply w-6 h-6;
|
|
133
|
+
}
|
|
134
|
+
.rokkit item > a {
|
|
135
|
+
@apply gap-2;
|
|
136
|
+
}
|
|
137
|
+
.rokkit node item {
|
|
138
|
+
@apply px-1 gap-2;
|
|
139
|
+
}
|
|
140
|
+
/* Crumbs styles */
|
|
141
|
+
.rokkit crumbs {
|
|
142
|
+
@apply flex-grow gap-1 text-sm;
|
|
143
|
+
}
|
|
144
|
+
.rokkit crumbs crumb.is-selected {
|
|
145
|
+
@apply text-secondary;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.rokkit day-of-month[aria-selected='true'] {
|
|
149
|
+
@apply bg-gradient-to-r from-primary to-secondary;
|
|
150
|
+
}
|