@rokkit/themes 1.1.6 → 1.1.8
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 +3 -3
- package/src/base/grid.css +35 -0
- package/src/base/index.css +1 -0
- package/src/base/palette-manager.css +291 -0
- package/src/base/pill.css +7 -2
- package/src/base/progress.css +2 -0
- package/src/base/rating.css +8 -0
- package/src/base/stepper.css +6 -0
- package/src/base/table.css +15 -0
- package/src/base/toggle.css +47 -0
- package/src/base/tooltip.css +12 -0
- package/src/frosted/toggle.css +26 -0
- package/src/material/toggle.css +26 -0
- package/src/minimal/toggle.css +26 -0
- package/src/rokkit/toggle.css +26 -0
- package/src/zen-sumi/toggle.css +26 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rokkit/themes",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.8",
|
|
4
4
|
"description": "Theme styles for @rokkit/ui components",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -103,10 +103,10 @@
|
|
|
103
103
|
"build": "bun run build.mjs"
|
|
104
104
|
},
|
|
105
105
|
"dependencies": {
|
|
106
|
-
"@rokkit/core": "1.1.
|
|
106
|
+
"@rokkit/core": "1.1.8"
|
|
107
107
|
},
|
|
108
108
|
"devDependencies": {
|
|
109
|
-
"@rokkit/unocss": "1.1.
|
|
109
|
+
"@rokkit/unocss": "1.1.8",
|
|
110
110
|
"magic-string": "^0.30.21",
|
|
111
111
|
"unocss": "^66.5.1"
|
|
112
112
|
},
|
package/src/base/grid.css
CHANGED
|
@@ -91,3 +91,38 @@
|
|
|
91
91
|
[data-grid][data-size='lg'] [data-grid-item] [data-item-icon] {
|
|
92
92
|
font-size: 2rem;
|
|
93
93
|
}
|
|
94
|
+
|
|
95
|
+
/* =============================================================================
|
|
96
|
+
Default Colors (flipping named tokens — applies to every style)
|
|
97
|
+
Mirrors rokkit/grid.css using raw var(--token) so non-rokkit styles
|
|
98
|
+
inherit tile borders, hover/focus, active selection, and icon tinting.
|
|
99
|
+
============================================================================= */
|
|
100
|
+
|
|
101
|
+
[data-grid-item] {
|
|
102
|
+
border-color: var(--paper-edge);
|
|
103
|
+
color: var(--ink-mute);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
[data-grid-item]:hover:not(:disabled):not([data-disabled]),
|
|
107
|
+
[data-grid-item]:focus:not(:disabled):not([data-disabled]) {
|
|
108
|
+
border-color: var(--ink-soft);
|
|
109
|
+
background: var(--paper-mute);
|
|
110
|
+
color: var(--ink);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
[data-grid-item][data-active] {
|
|
114
|
+
border-color: var(--primary);
|
|
115
|
+
color: var(--primary);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
[data-grid-item] [data-item-icon] {
|
|
119
|
+
color: var(--ink-soft);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
[data-grid-item]:hover:not(:disabled):not([data-disabled]) [data-item-icon] {
|
|
123
|
+
color: var(--ink-mute);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
[data-grid-item][data-active] [data-item-icon] {
|
|
127
|
+
color: var(--primary);
|
|
128
|
+
}
|
package/src/base/index.css
CHANGED
|
@@ -0,0 +1,291 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* PaletteManager — Base structural styles + flipping default colors.
|
|
3
|
+
*
|
|
4
|
+
* Uses raw var(--token) named tokens (complete colors that flip under
|
|
5
|
+
* [data-mode="dark"]) so the component is usable in every theme without a
|
|
6
|
+
* dedicated theme layer. Structure first, readable colors second.
|
|
7
|
+
*
|
|
8
|
+
* Parts (from PaletteManager.svelte):
|
|
9
|
+
* data-palette-manager / data-compact — root container
|
|
10
|
+
* data-palette-presets / -label / -list — preset section
|
|
11
|
+
* data-palette-preset / -swatch / -name — preset card (--preset-color)
|
|
12
|
+
* data-palette-custom / -label / -list / -item — saved custom palettes
|
|
13
|
+
* data-palette-editor — role rows wrapper
|
|
14
|
+
* data-palette-role / -label / -controls — single role row
|
|
15
|
+
* data-palette-color-select / -color-input — color pickers
|
|
16
|
+
* data-palette-hex-toggle — toggle preset/hex entry
|
|
17
|
+
* data-palette-shades / -shade (data-shade) — generated shade ramp
|
|
18
|
+
* data-palette-actions / -save / -apply — footer buttons
|
|
19
|
+
* data-palette-*-icon — glyph spans
|
|
20
|
+
*/
|
|
21
|
+
|
|
22
|
+
/* =============================================================================
|
|
23
|
+
Container
|
|
24
|
+
============================================================================= */
|
|
25
|
+
|
|
26
|
+
[data-palette-manager] {
|
|
27
|
+
display: flex;
|
|
28
|
+
flex-direction: column;
|
|
29
|
+
gap: 1rem;
|
|
30
|
+
padding: 1rem;
|
|
31
|
+
border: 1px solid var(--paper-edge);
|
|
32
|
+
border-radius: var(--radius-md, 0.375rem);
|
|
33
|
+
background-color: var(--paper);
|
|
34
|
+
color: var(--ink);
|
|
35
|
+
font-size: 0.875rem;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
[data-palette-manager][data-compact] {
|
|
39
|
+
gap: 0.625rem;
|
|
40
|
+
padding: 0.625rem;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/* =============================================================================
|
|
44
|
+
Section labels (presets / custom)
|
|
45
|
+
============================================================================= */
|
|
46
|
+
|
|
47
|
+
[data-palette-presets-label],
|
|
48
|
+
[data-palette-custom-label] {
|
|
49
|
+
display: block;
|
|
50
|
+
margin-bottom: 0.5rem;
|
|
51
|
+
font-size: 0.75rem;
|
|
52
|
+
font-weight: 600;
|
|
53
|
+
text-transform: uppercase;
|
|
54
|
+
letter-spacing: 0.05em;
|
|
55
|
+
color: var(--ink-mute);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* =============================================================================
|
|
59
|
+
Presets
|
|
60
|
+
============================================================================= */
|
|
61
|
+
|
|
62
|
+
[data-palette-presets-list] {
|
|
63
|
+
display: flex;
|
|
64
|
+
flex-wrap: wrap;
|
|
65
|
+
gap: 0.5rem;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
[data-palette-preset] {
|
|
69
|
+
display: inline-flex;
|
|
70
|
+
align-items: center;
|
|
71
|
+
gap: 0.5rem;
|
|
72
|
+
padding: 0.375rem 0.625rem;
|
|
73
|
+
border: 1px solid var(--paper-edge);
|
|
74
|
+
border-radius: var(--radius-md, 0.375rem);
|
|
75
|
+
background-color: var(--paper-soft);
|
|
76
|
+
color: var(--ink);
|
|
77
|
+
font-size: 0.8125rem;
|
|
78
|
+
cursor: pointer;
|
|
79
|
+
transition:
|
|
80
|
+
background-color 150ms ease,
|
|
81
|
+
border-color 150ms ease,
|
|
82
|
+
color 150ms ease;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
[data-palette-preset]:hover {
|
|
86
|
+
background-color: var(--paper-mute);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
[data-palette-preset][data-active] {
|
|
90
|
+
border-color: var(--primary);
|
|
91
|
+
color: var(--primary);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
[data-palette-preset-swatch] {
|
|
95
|
+
width: 1rem;
|
|
96
|
+
height: 1rem;
|
|
97
|
+
flex-shrink: 0;
|
|
98
|
+
border-radius: 9999px;
|
|
99
|
+
border: 1px solid var(--paper-edge);
|
|
100
|
+
background-color: var(--preset-color, var(--primary));
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
[data-palette-preset-name] {
|
|
104
|
+
white-space: nowrap;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
/* =============================================================================
|
|
108
|
+
Custom palettes
|
|
109
|
+
============================================================================= */
|
|
110
|
+
|
|
111
|
+
[data-palette-custom-list] {
|
|
112
|
+
display: flex;
|
|
113
|
+
flex-wrap: wrap;
|
|
114
|
+
gap: 0.5rem;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
[data-palette-custom-item] {
|
|
118
|
+
padding: 0.375rem 0.625rem;
|
|
119
|
+
border: 1px solid var(--paper-edge);
|
|
120
|
+
border-radius: var(--radius-md, 0.375rem);
|
|
121
|
+
background-color: var(--paper-soft);
|
|
122
|
+
color: var(--ink-mute);
|
|
123
|
+
font-size: 0.8125rem;
|
|
124
|
+
cursor: pointer;
|
|
125
|
+
transition:
|
|
126
|
+
background-color 150ms ease,
|
|
127
|
+
border-color 150ms ease,
|
|
128
|
+
color 150ms ease;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
[data-palette-custom-item]:hover {
|
|
132
|
+
background-color: var(--paper-mute);
|
|
133
|
+
color: var(--ink);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
[data-palette-custom-item][data-active] {
|
|
137
|
+
border-color: var(--primary);
|
|
138
|
+
color: var(--primary);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
/* =============================================================================
|
|
142
|
+
Editor / role rows
|
|
143
|
+
============================================================================= */
|
|
144
|
+
|
|
145
|
+
[data-palette-editor] {
|
|
146
|
+
display: flex;
|
|
147
|
+
flex-direction: column;
|
|
148
|
+
gap: 0.625rem;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
[data-palette-role] {
|
|
152
|
+
display: flex;
|
|
153
|
+
align-items: center;
|
|
154
|
+
gap: 0.75rem;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
[data-palette-role-label] {
|
|
158
|
+
flex: 0 0 6rem;
|
|
159
|
+
font-size: 0.8125rem;
|
|
160
|
+
font-weight: 500;
|
|
161
|
+
color: var(--ink);
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
[data-palette-role-controls] {
|
|
165
|
+
display: inline-flex;
|
|
166
|
+
align-items: center;
|
|
167
|
+
gap: 0.375rem;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
/* =============================================================================
|
|
171
|
+
Color pickers
|
|
172
|
+
============================================================================= */
|
|
173
|
+
|
|
174
|
+
[data-palette-color-select],
|
|
175
|
+
[data-palette-color-input] {
|
|
176
|
+
padding: 0.3125rem 0.5rem;
|
|
177
|
+
border: 1px solid var(--paper-edge);
|
|
178
|
+
border-radius: var(--radius-md, 0.375rem);
|
|
179
|
+
background-color: var(--paper-soft);
|
|
180
|
+
color: var(--ink);
|
|
181
|
+
font-size: 0.8125rem;
|
|
182
|
+
line-height: 1.2;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
[data-palette-color-input]::placeholder {
|
|
186
|
+
color: var(--ink-faint);
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
[data-palette-color-select]:focus-visible,
|
|
190
|
+
[data-palette-color-input]:focus-visible {
|
|
191
|
+
outline: 2px solid var(--primary);
|
|
192
|
+
outline-offset: 1px;
|
|
193
|
+
border-color: var(--primary);
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
[data-palette-hex-toggle] {
|
|
197
|
+
display: inline-flex;
|
|
198
|
+
align-items: center;
|
|
199
|
+
justify-content: center;
|
|
200
|
+
width: 1.75rem;
|
|
201
|
+
height: 1.75rem;
|
|
202
|
+
padding: 0;
|
|
203
|
+
border: 1px solid var(--paper-edge);
|
|
204
|
+
border-radius: var(--radius-md, 0.375rem);
|
|
205
|
+
background-color: var(--paper-soft);
|
|
206
|
+
color: var(--ink-mute);
|
|
207
|
+
cursor: pointer;
|
|
208
|
+
transition:
|
|
209
|
+
background-color 150ms ease,
|
|
210
|
+
color 150ms ease;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
[data-palette-hex-toggle]:hover {
|
|
214
|
+
background-color: var(--paper-mute);
|
|
215
|
+
color: var(--ink);
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
/* =============================================================================
|
|
219
|
+
Shade ramp
|
|
220
|
+
============================================================================= */
|
|
221
|
+
|
|
222
|
+
[data-palette-shades] {
|
|
223
|
+
display: inline-flex;
|
|
224
|
+
margin-left: auto;
|
|
225
|
+
border-radius: var(--radius-md, 0.375rem);
|
|
226
|
+
overflow: hidden;
|
|
227
|
+
border: 1px solid var(--paper-edge);
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
[data-palette-shade] {
|
|
231
|
+
width: 1rem;
|
|
232
|
+
height: 1rem;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
/* =============================================================================
|
|
236
|
+
Actions
|
|
237
|
+
============================================================================= */
|
|
238
|
+
|
|
239
|
+
[data-palette-actions] {
|
|
240
|
+
display: flex;
|
|
241
|
+
flex-wrap: wrap;
|
|
242
|
+
gap: 0.5rem;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
[data-palette-save],
|
|
246
|
+
[data-palette-apply] {
|
|
247
|
+
display: inline-flex;
|
|
248
|
+
align-items: center;
|
|
249
|
+
gap: 0.375rem;
|
|
250
|
+
padding: 0.4375rem 0.875rem;
|
|
251
|
+
border-radius: var(--radius-md, 0.375rem);
|
|
252
|
+
font-size: 0.8125rem;
|
|
253
|
+
font-weight: 500;
|
|
254
|
+
cursor: pointer;
|
|
255
|
+
transition:
|
|
256
|
+
background-color 150ms ease,
|
|
257
|
+
border-color 150ms ease,
|
|
258
|
+
color 150ms ease;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
/* Save = secondary / outlined */
|
|
262
|
+
[data-palette-save] {
|
|
263
|
+
border: 1px solid var(--paper-edge);
|
|
264
|
+
background-color: var(--paper-soft);
|
|
265
|
+
color: var(--ink-mute);
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
[data-palette-save]:hover {
|
|
269
|
+
background-color: var(--paper-mute);
|
|
270
|
+
color: var(--ink);
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
/* Apply = primary action */
|
|
274
|
+
[data-palette-apply] {
|
|
275
|
+
border: 1px solid var(--primary);
|
|
276
|
+
background-color: var(--primary);
|
|
277
|
+
color: var(--on-primary);
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
[data-palette-apply]:hover {
|
|
281
|
+
background-color: var(--primary-soft);
|
|
282
|
+
border-color: var(--primary-soft);
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
/* Icon glyphs follow their button's text color */
|
|
286
|
+
[data-palette-presets-icon],
|
|
287
|
+
[data-palette-hex-icon],
|
|
288
|
+
[data-palette-save-icon],
|
|
289
|
+
[data-palette-check-icon] {
|
|
290
|
+
color: inherit;
|
|
291
|
+
}
|
package/src/base/pill.css
CHANGED
|
@@ -11,6 +11,8 @@
|
|
|
11
11
|
white-space: nowrap;
|
|
12
12
|
outline: none;
|
|
13
13
|
vertical-align: middle;
|
|
14
|
+
background: var(--paper-mute);
|
|
15
|
+
color: var(--ink);
|
|
14
16
|
}
|
|
15
17
|
|
|
16
18
|
[data-pill-icon] {
|
|
@@ -35,15 +37,18 @@
|
|
|
35
37
|
border-radius: 9999px;
|
|
36
38
|
cursor: pointer;
|
|
37
39
|
background: transparent;
|
|
38
|
-
color:
|
|
40
|
+
color: var(--ink-soft);
|
|
39
41
|
opacity: 0.6;
|
|
40
|
-
transition:
|
|
42
|
+
transition:
|
|
43
|
+
opacity 0.15s ease,
|
|
44
|
+
color 0.15s ease;
|
|
41
45
|
font-size: 0.75rem;
|
|
42
46
|
flex-shrink: 0;
|
|
43
47
|
}
|
|
44
48
|
|
|
45
49
|
[data-pill-remove]:hover {
|
|
46
50
|
opacity: 1;
|
|
51
|
+
color: var(--ink);
|
|
47
52
|
}
|
|
48
53
|
|
|
49
54
|
[data-pill-remove]:disabled {
|
package/src/base/progress.css
CHANGED
|
@@ -6,12 +6,14 @@
|
|
|
6
6
|
height: 0.5rem;
|
|
7
7
|
border-radius: 9999px;
|
|
8
8
|
overflow: hidden;
|
|
9
|
+
background: var(--paper-mute);
|
|
9
10
|
}
|
|
10
11
|
|
|
11
12
|
[data-progress-bar] {
|
|
12
13
|
height: 100%;
|
|
13
14
|
border-radius: 9999px;
|
|
14
15
|
transition: width 0.3s ease;
|
|
16
|
+
background: var(--primary);
|
|
15
17
|
}
|
|
16
18
|
|
|
17
19
|
[data-progress][data-indeterminate] [data-progress-bar] {
|
package/src/base/rating.css
CHANGED
package/src/base/stepper.css
CHANGED
|
@@ -52,6 +52,12 @@
|
|
|
52
52
|
color: var(--paper);
|
|
53
53
|
}
|
|
54
54
|
|
|
55
|
+
/* Check glyph inside a completed circle follows the circle's color
|
|
56
|
+
(var(--paper) on a --primary background → correct contrast). */
|
|
57
|
+
[data-stepper-check-icon] {
|
|
58
|
+
color: inherit;
|
|
59
|
+
}
|
|
60
|
+
|
|
55
61
|
[data-stepper-step][data-active] [data-stepper-circle] {
|
|
56
62
|
border-color: var(--primary);
|
|
57
63
|
color: var(--primary);
|
package/src/base/table.css
CHANGED
|
@@ -92,6 +92,21 @@
|
|
|
92
92
|
outline: none;
|
|
93
93
|
}
|
|
94
94
|
|
|
95
|
+
/* Default state colors (flipping named tokens — applies to every style).
|
|
96
|
+
data-focused = keyboard-focused row (Table + TreeTable emit it as a bare
|
|
97
|
+
attribute). data-group = synthesised group row in TreeTable. Scoped under
|
|
98
|
+
[data-table] so the bare attribute selectors don't bleed into other
|
|
99
|
+
components. Selected/hover remain owned by per-style theme CSS. */
|
|
100
|
+
[data-table] tr[data-table-row][data-focused] {
|
|
101
|
+
background: var(--paper-mute);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
[data-table] tr[data-table-row][data-group] {
|
|
105
|
+
background: var(--paper-soft);
|
|
106
|
+
color: var(--ink);
|
|
107
|
+
font-weight: 500;
|
|
108
|
+
}
|
|
109
|
+
|
|
95
110
|
/* =============================================================================
|
|
96
111
|
Cells
|
|
97
112
|
============================================================================= */
|
package/src/base/toggle.css
CHANGED
|
@@ -136,3 +136,50 @@
|
|
|
136
136
|
overflow: hidden;
|
|
137
137
|
text-overflow: ellipsis;
|
|
138
138
|
}
|
|
139
|
+
|
|
140
|
+
/* =============================================================================
|
|
141
|
+
Button Variant — single cycling control
|
|
142
|
+
The `button` variant renders one <button data-toggle-variant="button"> with
|
|
143
|
+
the icon as a direct child (no [data-toggle-option]). Give it real control
|
|
144
|
+
structure + sizing here; color lives in the style themes (variant-agnostic).
|
|
145
|
+
============================================================================= */
|
|
146
|
+
|
|
147
|
+
[data-toggle][data-toggle-variant='button'] {
|
|
148
|
+
justify-content: center;
|
|
149
|
+
padding: 0;
|
|
150
|
+
border: 1px solid transparent;
|
|
151
|
+
border-radius: 0.375rem;
|
|
152
|
+
font-weight: 500;
|
|
153
|
+
cursor: pointer;
|
|
154
|
+
transition: all 150ms ease;
|
|
155
|
+
user-select: none;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
[data-toggle][data-toggle-variant='button']:focus,
|
|
159
|
+
[data-toggle][data-toggle-variant='button']:focus-visible {
|
|
160
|
+
outline: none;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
[data-toggle][data-toggle-variant='button']:disabled,
|
|
164
|
+
[data-toggle][data-toggle-variant='button'][data-toggle-disabled='true'] {
|
|
165
|
+
pointer-events: none;
|
|
166
|
+
opacity: 0.5;
|
|
167
|
+
cursor: not-allowed;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
/* Square control sized to match the option height scale */
|
|
171
|
+
[data-toggle][data-toggle-variant='button'][data-toggle-size='sm'] {
|
|
172
|
+
height: 1.5rem;
|
|
173
|
+
min-width: 1.5rem;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
[data-toggle][data-toggle-variant='button'][data-toggle-size='md'],
|
|
177
|
+
[data-toggle][data-toggle-variant='button']:not([data-toggle-size]) {
|
|
178
|
+
height: 2rem;
|
|
179
|
+
min-width: 2rem;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
[data-toggle][data-toggle-variant='button'][data-toggle-size='lg'] {
|
|
183
|
+
height: 2.5rem;
|
|
184
|
+
min-width: 2.5rem;
|
|
185
|
+
}
|
package/src/base/tooltip.css
CHANGED
|
@@ -62,3 +62,15 @@
|
|
|
62
62
|
visibility: visible;
|
|
63
63
|
opacity: 1;
|
|
64
64
|
}
|
|
65
|
+
|
|
66
|
+
/* =============================================================================
|
|
67
|
+
Default Colors (flipping named tokens — applies to every style)
|
|
68
|
+
Tooltips are inverse: dark bubble on light text. Mirrors rokkit/tooltip.css
|
|
69
|
+
using raw var(--token). The component renders no arrow element, so only the
|
|
70
|
+
bubble (data-tooltip-content) is colored.
|
|
71
|
+
============================================================================= */
|
|
72
|
+
|
|
73
|
+
[data-tooltip-content] {
|
|
74
|
+
background: var(--ink);
|
|
75
|
+
color: var(--paper);
|
|
76
|
+
}
|
package/src/frosted/toggle.css
CHANGED
|
@@ -46,3 +46,29 @@
|
|
|
46
46
|
[data-style='frosted'] [data-toggle-option][data-selected='true'] [data-toggle-icon] {
|
|
47
47
|
@apply text-primary;
|
|
48
48
|
}
|
|
49
|
+
|
|
50
|
+
/* =============================================================================
|
|
51
|
+
Button Variant — single cycling control (variant-agnostic color)
|
|
52
|
+
Higher specificity than the [data-toggle] container rule above, so it
|
|
53
|
+
neutralises the group-pill chrome and gives the single button the same
|
|
54
|
+
flipping icon treatment an unselected option gets.
|
|
55
|
+
============================================================================= */
|
|
56
|
+
|
|
57
|
+
[data-style='frosted'] [data-toggle][data-toggle-variant='button'] {
|
|
58
|
+
@apply border-transparent bg-transparent text-ink-soft;
|
|
59
|
+
background-image: none;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
[data-style='frosted'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled):not([data-toggle-disabled='true']),
|
|
63
|
+
[data-style='frosted'] [data-toggle][data-toggle-variant='button']:focus-visible:not(:disabled):not([data-toggle-disabled='true']) {
|
|
64
|
+
@apply bg-paper-mute text-ink-mute;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
[data-style='frosted'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
|
|
68
|
+
@apply text-ink-soft;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
[data-style='frosted'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],
|
|
72
|
+
[data-style='frosted'] [data-toggle][data-toggle-variant='button']:focus-visible:not(:disabled) [data-toggle-icon] {
|
|
73
|
+
@apply text-ink-mute;
|
|
74
|
+
}
|
package/src/material/toggle.css
CHANGED
|
@@ -46,3 +46,29 @@
|
|
|
46
46
|
[data-style='material'] [data-toggle-option][data-selected='true'] [data-toggle-icon] {
|
|
47
47
|
@apply text-on-primary;
|
|
48
48
|
}
|
|
49
|
+
|
|
50
|
+
/* =============================================================================
|
|
51
|
+
Button Variant — single cycling control (variant-agnostic color)
|
|
52
|
+
Higher specificity than the [data-toggle] container rule above, so it
|
|
53
|
+
neutralises the group-pill chrome and gives the single button the same
|
|
54
|
+
flipping icon treatment an unselected option gets.
|
|
55
|
+
============================================================================= */
|
|
56
|
+
|
|
57
|
+
[data-style='material'] [data-toggle][data-toggle-variant='button'] {
|
|
58
|
+
@apply border-transparent bg-transparent text-ink-soft;
|
|
59
|
+
background-image: none;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
[data-style='material'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled):not([data-toggle-disabled='true']),
|
|
63
|
+
[data-style='material'] [data-toggle][data-toggle-variant='button']:focus-visible:not(:disabled):not([data-toggle-disabled='true']) {
|
|
64
|
+
@apply bg-paper-mute text-ink-mute;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
[data-style='material'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
|
|
68
|
+
@apply text-ink-soft;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
[data-style='material'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],
|
|
72
|
+
[data-style='material'] [data-toggle][data-toggle-variant='button']:focus-visible:not(:disabled) [data-toggle-icon] {
|
|
73
|
+
@apply text-ink-mute;
|
|
74
|
+
}
|
package/src/minimal/toggle.css
CHANGED
|
@@ -46,3 +46,29 @@
|
|
|
46
46
|
[data-style='minimal'] [data-toggle-option][data-selected='true'] [data-toggle-icon] {
|
|
47
47
|
@apply text-ink-mute;
|
|
48
48
|
}
|
|
49
|
+
|
|
50
|
+
/* =============================================================================
|
|
51
|
+
Button Variant — single cycling control (variant-agnostic color)
|
|
52
|
+
Higher specificity than the [data-toggle] container rule above, so it
|
|
53
|
+
neutralises the group-pill chrome and gives the single button the same
|
|
54
|
+
flipping icon treatment an unselected option gets.
|
|
55
|
+
============================================================================= */
|
|
56
|
+
|
|
57
|
+
[data-style='minimal'] [data-toggle][data-toggle-variant='button'] {
|
|
58
|
+
@apply border-transparent bg-transparent text-ink-soft;
|
|
59
|
+
background-image: none;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
[data-style='minimal'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled):not([data-toggle-disabled='true']),
|
|
63
|
+
[data-style='minimal'] [data-toggle][data-toggle-variant='button']:focus-visible:not(:disabled):not([data-toggle-disabled='true']) {
|
|
64
|
+
@apply bg-paper-mute text-ink-mute;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
[data-style='minimal'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
|
|
68
|
+
@apply text-ink-soft;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
[data-style='minimal'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],
|
|
72
|
+
[data-style='minimal'] [data-toggle][data-toggle-variant='button']:focus-visible:not(:disabled) [data-toggle-icon] {
|
|
73
|
+
@apply text-ink-mute;
|
|
74
|
+
}
|
package/src/rokkit/toggle.css
CHANGED
|
@@ -57,3 +57,29 @@
|
|
|
57
57
|
[data-style='rokkit'] [data-toggle-option][data-selected='true'] [data-toggle-icon] {
|
|
58
58
|
@apply text-on-primary;
|
|
59
59
|
}
|
|
60
|
+
|
|
61
|
+
/* =============================================================================
|
|
62
|
+
Button Variant — single cycling control (variant-agnostic color)
|
|
63
|
+
Higher specificity than the [data-toggle] container rule above, so it
|
|
64
|
+
neutralises the group-pill chrome and gives the single button the same
|
|
65
|
+
flipping icon treatment an unselected option gets.
|
|
66
|
+
============================================================================= */
|
|
67
|
+
|
|
68
|
+
[data-style='rokkit'] [data-toggle][data-toggle-variant='button'] {
|
|
69
|
+
@apply border-transparent bg-transparent text-ink-soft;
|
|
70
|
+
background-image: none;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
[data-style='rokkit'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled):not([data-toggle-disabled='true']),
|
|
74
|
+
[data-style='rokkit'] [data-toggle][data-toggle-variant='button']:focus-visible:not(:disabled):not([data-toggle-disabled='true']) {
|
|
75
|
+
@apply bg-paper-mute text-ink-mute;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
[data-style='rokkit'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
|
|
79
|
+
@apply text-ink-soft;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
[data-style='rokkit'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],
|
|
83
|
+
[data-style='rokkit'] [data-toggle][data-toggle-variant='button']:focus-visible:not(:disabled) [data-toggle-icon] {
|
|
84
|
+
@apply text-ink-mute;
|
|
85
|
+
}
|
package/src/zen-sumi/toggle.css
CHANGED
|
@@ -57,3 +57,29 @@
|
|
|
57
57
|
[data-style='zen-sumi'] [data-toggle-option][data-selected='true'] [data-toggle-icon] {
|
|
58
58
|
@apply text-on-primary;
|
|
59
59
|
}
|
|
60
|
+
|
|
61
|
+
/* =============================================================================
|
|
62
|
+
Button Variant — single cycling control (variant-agnostic color)
|
|
63
|
+
Higher specificity than the [data-toggle] container rule above, so it
|
|
64
|
+
neutralises the group-pill chrome and gives the single button the same
|
|
65
|
+
flipping icon treatment an unselected option gets.
|
|
66
|
+
============================================================================= */
|
|
67
|
+
|
|
68
|
+
[data-style='zen-sumi'] [data-toggle][data-toggle-variant='button'] {
|
|
69
|
+
@apply border-transparent bg-transparent text-ink-soft;
|
|
70
|
+
background-image: none;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
[data-style='zen-sumi'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled):not([data-toggle-disabled='true']),
|
|
74
|
+
[data-style='zen-sumi'] [data-toggle][data-toggle-variant='button']:focus-visible:not(:disabled):not([data-toggle-disabled='true']) {
|
|
75
|
+
@apply bg-paper-mute text-ink-mute;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
[data-style='zen-sumi'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
|
|
79
|
+
@apply text-ink-soft;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
[data-style='zen-sumi'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],
|
|
83
|
+
[data-style='zen-sumi'] [data-toggle][data-toggle-variant='button']:focus-visible:not(:disabled) [data-toggle-icon] {
|
|
84
|
+
@apply text-ink-mute;
|
|
85
|
+
}
|