@unpunnyfuns/swatchbook-blocks 0.66.3 → 0.68.0
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/README.md +2 -2
- package/dist/index.mjs +122 -192
- package/dist/index.mjs.map +1 -1
- package/dist/style.css +684 -518
- package/package.json +35 -33
package/dist/style.css
CHANGED
|
@@ -1,51 +1,51 @@
|
|
|
1
1
|
.sb-block {
|
|
2
|
-
font-family: var(--swatchbook-body-font-family
|
|
3
|
-
font-size: var(--swatchbook-body
|
|
4
|
-
color: var(--swatchbook-text-default
|
|
5
|
-
background: var(--swatchbook-surface-default
|
|
6
|
-
|
|
7
|
-
|
|
2
|
+
font-family: var(--swatchbook-body-font-family);
|
|
3
|
+
font-size: var(--swatchbook-type-body);
|
|
4
|
+
color: var(--swatchbook-text-default);
|
|
5
|
+
background: var(--swatchbook-surface-default);
|
|
6
|
+
padding: var(--swatchbook-space-md);
|
|
7
|
+
border-radius: var(--swatchbook-radius-xs);
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
.sb-block__caption {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
font-size:
|
|
11
|
+
padding: var(--swatchbook-space-2xs) 0 var(--swatchbook-space-md);
|
|
12
|
+
color: var(--swatchbook-text-muted);
|
|
13
|
+
font-size: var(--swatchbook-type-caption);
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
.sb-block__empty {
|
|
17
|
+
padding: var(--swatchbook-space-xl) var(--swatchbook-space-md);
|
|
17
18
|
text-align: center;
|
|
18
|
-
color: var(--swatchbook-text-muted
|
|
19
|
-
padding: 24px 12px;
|
|
19
|
+
color: var(--swatchbook-text-muted);
|
|
20
20
|
}
|
|
21
21
|
.sb-border-preview__row {
|
|
22
|
-
|
|
22
|
+
gap: var(--swatchbook-space-lg);
|
|
23
|
+
padding: var(--swatchbook-space-lg) 0;
|
|
24
|
+
border-bottom: 1px solid var(--swatchbook-border-default);
|
|
23
25
|
grid-template-columns: minmax(160px, 220px) 140px 1fr;
|
|
24
26
|
align-items: center;
|
|
25
|
-
gap: 16px;
|
|
26
|
-
padding: 14px 0;
|
|
27
27
|
display: grid;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
.sb-border-preview__meta {
|
|
31
|
+
gap: var(--swatchbook-space-3xs);
|
|
31
32
|
flex-direction: column;
|
|
32
|
-
gap: 2px;
|
|
33
33
|
min-width: 0;
|
|
34
34
|
display: flex;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
.sb-border-preview__path {
|
|
38
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
39
|
+
font-size: var(--swatchbook-type-caption);
|
|
38
40
|
text-overflow: ellipsis;
|
|
39
41
|
white-space: nowrap;
|
|
40
|
-
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
41
|
-
font-size: 12px;
|
|
42
42
|
overflow: hidden;
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
.sb-border-preview__css-var {
|
|
46
|
-
opacity: .7;
|
|
47
46
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
48
|
-
font-size:
|
|
47
|
+
font-size: var(--swatchbook-type-micro);
|
|
48
|
+
opacity: var(--swatchbook-opacity-muted);
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
.sb-border-preview__sample-cell {
|
|
@@ -55,69 +55,76 @@
|
|
|
55
55
|
}
|
|
56
56
|
|
|
57
57
|
.sb-border-preview__breakdown {
|
|
58
|
-
grid-template-columns: auto 1fr;
|
|
59
|
-
gap: 2px 12px;
|
|
60
58
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
61
|
-
font-size:
|
|
59
|
+
font-size: var(--swatchbook-type-micro);
|
|
60
|
+
column-gap: var(--swatchbook-space-md);
|
|
61
|
+
row-gap: var(--swatchbook-space-3xs);
|
|
62
|
+
grid-template-columns: auto 1fr;
|
|
62
63
|
display: grid;
|
|
63
64
|
}
|
|
64
65
|
|
|
65
66
|
.sb-border-preview__breakdown-key {
|
|
66
|
-
color: var(--swatchbook-text-muted
|
|
67
|
+
color: var(--swatchbook-text-muted);
|
|
68
|
+
}
|
|
69
|
+
.sb-border-sample {
|
|
70
|
+
background: var(--swatchbook-surface-raised);
|
|
71
|
+
border-radius: 6px;
|
|
72
|
+
width: 120px;
|
|
73
|
+
height: 56px;
|
|
67
74
|
}
|
|
68
75
|
.sb-color-palette__group {
|
|
69
|
-
margin-bottom:
|
|
76
|
+
margin-bottom: var(--swatchbook-space-xl);
|
|
70
77
|
}
|
|
71
78
|
|
|
72
79
|
.sb-color-palette__group-header {
|
|
73
|
-
text-transform: uppercase;
|
|
74
|
-
letter-spacing: .5px;
|
|
75
|
-
opacity: .6;
|
|
76
|
-
margin-bottom: 8px;
|
|
77
80
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
78
|
-
font-size:
|
|
81
|
+
font-size: var(--swatchbook-type-micro);
|
|
82
|
+
text-transform: uppercase;
|
|
83
|
+
letter-spacing: var(--swatchbook-tracking-label);
|
|
84
|
+
opacity: var(--swatchbook-opacity-scrim);
|
|
85
|
+
margin-bottom: var(--swatchbook-space-sm);
|
|
79
86
|
}
|
|
80
87
|
|
|
81
88
|
.sb-color-palette__grid {
|
|
89
|
+
gap: var(--swatchbook-space-sm);
|
|
82
90
|
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
|
83
|
-
gap: 8px;
|
|
84
91
|
display: grid;
|
|
85
92
|
}
|
|
86
93
|
|
|
87
94
|
.sb-color-palette__card {
|
|
88
|
-
border: 1px solid var(--swatchbook-border-default
|
|
89
|
-
border-radius:
|
|
95
|
+
border: 1px solid var(--swatchbook-border-default);
|
|
96
|
+
border-radius: var(--swatchbook-radius-xs);
|
|
90
97
|
flex-direction: column;
|
|
91
98
|
display: flex;
|
|
92
99
|
overflow: hidden;
|
|
93
100
|
}
|
|
94
101
|
|
|
95
102
|
.sb-color-palette__swatch {
|
|
96
|
-
border-bottom: 1px solid var(--swatchbook-border-default
|
|
103
|
+
border-bottom: 1px solid var(--swatchbook-border-default);
|
|
97
104
|
width: 100%;
|
|
98
105
|
height: 56px;
|
|
99
106
|
}
|
|
100
107
|
|
|
101
108
|
.sb-color-palette__meta {
|
|
109
|
+
padding: var(--swatchbook-space-sm) var(--swatchbook-space-md);
|
|
110
|
+
gap: var(--swatchbook-space-3xs);
|
|
102
111
|
flex-direction: column;
|
|
103
|
-
gap: 2px;
|
|
104
|
-
padding: 8px 10px;
|
|
105
112
|
display: flex;
|
|
106
113
|
}
|
|
107
114
|
|
|
108
115
|
.sb-color-palette__leaf {
|
|
109
116
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
110
|
-
font-size:
|
|
117
|
+
font-size: var(--swatchbook-type-caption);
|
|
111
118
|
}
|
|
112
119
|
|
|
113
120
|
.sb-color-palette__value {
|
|
114
|
-
opacity: .7;
|
|
115
121
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
116
|
-
font-size:
|
|
122
|
+
font-size: var(--swatchbook-type-micro);
|
|
123
|
+
opacity: var(--swatchbook-opacity-muted);
|
|
117
124
|
}
|
|
118
125
|
|
|
119
126
|
.sb-color-palette__gamut-warn {
|
|
120
|
-
margin-left:
|
|
127
|
+
margin-left: var(--swatchbook-space-2xs);
|
|
121
128
|
}
|
|
122
129
|
.sb-color-table__scroll {
|
|
123
130
|
width: 100%;
|
|
@@ -131,44 +138,44 @@
|
|
|
131
138
|
}
|
|
132
139
|
|
|
133
140
|
.sb-color-table__search {
|
|
134
|
-
padding: 0 0
|
|
141
|
+
padding: 0 0 var(--swatchbook-space-sm);
|
|
135
142
|
}
|
|
136
143
|
|
|
137
144
|
.sb-color-table__search-input {
|
|
138
|
-
border: 1px solid var(--swatchbook-border-default, #8080804d);
|
|
139
|
-
background: var(--swatchbook-surface-default, Canvas);
|
|
140
145
|
width: 100%;
|
|
141
146
|
max-width: 360px;
|
|
142
|
-
|
|
143
|
-
border-radius:
|
|
144
|
-
|
|
147
|
+
padding: var(--swatchbook-space-xs) var(--swatchbook-space-md);
|
|
148
|
+
border-radius: var(--swatchbook-radius-2xs);
|
|
149
|
+
border: 1px solid var(--swatchbook-border-default);
|
|
150
|
+
background: var(--swatchbook-surface-default);
|
|
151
|
+
color: var(--swatchbook-text-default);
|
|
145
152
|
font-family: inherit;
|
|
146
|
-
font-size:
|
|
147
|
-
line-height:
|
|
153
|
+
font-size: var(--swatchbook-type-caption);
|
|
154
|
+
line-height: var(--swatchbook-leading-normal);
|
|
148
155
|
}
|
|
149
156
|
|
|
150
157
|
.sb-color-table__search-input:focus-visible {
|
|
151
|
-
outline: 2px solid var(--swatchbook-accent-bg
|
|
158
|
+
outline: 2px solid var(--swatchbook-accent-bg);
|
|
152
159
|
outline-offset: 1px;
|
|
153
160
|
}
|
|
154
161
|
|
|
155
162
|
.sb-color-table__caption {
|
|
156
163
|
caption-side: top;
|
|
157
164
|
text-align: left;
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
font-size:
|
|
165
|
+
padding: var(--swatchbook-space-sm) 0;
|
|
166
|
+
color: var(--swatchbook-text-muted);
|
|
167
|
+
font-size: var(--swatchbook-type-caption);
|
|
161
168
|
}
|
|
162
169
|
|
|
163
170
|
.sb-color-table__th {
|
|
164
171
|
text-align: left;
|
|
172
|
+
padding: var(--swatchbook-space-sm) var(--swatchbook-space-md);
|
|
173
|
+
font-size: var(--swatchbook-type-micro);
|
|
165
174
|
text-transform: uppercase;
|
|
166
|
-
letter-spacing:
|
|
167
|
-
color: var(--swatchbook-text-muted
|
|
168
|
-
border-bottom: 1px solid var(--swatchbook-border-default
|
|
175
|
+
letter-spacing: var(--swatchbook-tracking-label);
|
|
176
|
+
color: var(--swatchbook-text-muted);
|
|
177
|
+
border-bottom: 1px solid var(--swatchbook-border-default);
|
|
169
178
|
white-space: nowrap;
|
|
170
|
-
padding: 8px 12px;
|
|
171
|
-
font-size: 11px;
|
|
172
179
|
}
|
|
173
180
|
|
|
174
181
|
.sb-color-table__th--swatch {
|
|
@@ -188,18 +195,18 @@
|
|
|
188
195
|
}
|
|
189
196
|
|
|
190
197
|
.sb-color-table__row:focus-visible {
|
|
191
|
-
outline: 2px solid var(--swatchbook-accent-bg
|
|
198
|
+
outline: 2px solid var(--swatchbook-accent-bg);
|
|
192
199
|
outline-offset: -2px;
|
|
193
200
|
}
|
|
194
201
|
|
|
195
202
|
.sb-color-table__row--expanded {
|
|
196
|
-
background: var(--swatchbook-surface-muted
|
|
203
|
+
background: var(--swatchbook-surface-muted);
|
|
197
204
|
}
|
|
198
205
|
|
|
199
206
|
.sb-color-table__td {
|
|
200
|
-
|
|
207
|
+
padding: var(--swatchbook-space-sm) var(--swatchbook-space-md);
|
|
208
|
+
border-bottom: 1px solid var(--swatchbook-border-default);
|
|
201
209
|
vertical-align: middle;
|
|
202
|
-
padding: 8px 12px;
|
|
203
210
|
}
|
|
204
211
|
|
|
205
212
|
.sb-color-table__row--expanded > .sb-color-table__td {
|
|
@@ -207,9 +214,9 @@
|
|
|
207
214
|
}
|
|
208
215
|
|
|
209
216
|
.sb-color-table__path {
|
|
210
|
-
white-space: nowrap;
|
|
211
217
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
212
|
-
font-size:
|
|
218
|
+
font-size: var(--swatchbook-type-caption);
|
|
219
|
+
white-space: nowrap;
|
|
213
220
|
}
|
|
214
221
|
|
|
215
222
|
.sb-color-table__path-text {
|
|
@@ -218,41 +225,41 @@
|
|
|
218
225
|
}
|
|
219
226
|
|
|
220
227
|
.sb-color-table__variant-pills {
|
|
228
|
+
gap: var(--swatchbook-space-2xs);
|
|
229
|
+
margin-left: var(--swatchbook-space-sm);
|
|
221
230
|
vertical-align: middle;
|
|
222
|
-
gap: 4px;
|
|
223
|
-
margin-left: 8px;
|
|
224
231
|
display: inline-flex;
|
|
225
232
|
}
|
|
226
233
|
|
|
227
234
|
.sb-color-table__variant-pill {
|
|
228
|
-
|
|
235
|
+
padding: var(--swatchbook-space-3xs) var(--swatchbook-space-xs);
|
|
236
|
+
border-radius: var(--swatchbook-radius-2xs);
|
|
237
|
+
font-family: inherit;
|
|
238
|
+
font-size: var(--swatchbook-type-micro);
|
|
239
|
+
letter-spacing: var(--swatchbook-tracking-label);
|
|
229
240
|
text-transform: uppercase;
|
|
230
|
-
background: var(--swatchbook-surface-muted
|
|
231
|
-
color: var(--swatchbook-text-muted
|
|
241
|
+
background: var(--swatchbook-surface-muted);
|
|
242
|
+
color: var(--swatchbook-text-muted);
|
|
232
243
|
cursor: pointer;
|
|
233
244
|
border: 0;
|
|
234
|
-
border-radius: 4px;
|
|
235
245
|
margin: 0;
|
|
236
|
-
padding: 1px 6px;
|
|
237
|
-
font-family: inherit;
|
|
238
|
-
font-size: 10px;
|
|
239
246
|
transition: background-color .12s, color .12s;
|
|
240
247
|
display: inline-block;
|
|
241
248
|
}
|
|
242
249
|
|
|
243
250
|
.sb-color-table__variant-pill:hover {
|
|
244
|
-
background: var(--swatchbook-surface-raised
|
|
245
|
-
color: var(--swatchbook-text-default
|
|
251
|
+
background: var(--swatchbook-surface-raised);
|
|
252
|
+
color: var(--swatchbook-text-default);
|
|
246
253
|
}
|
|
247
254
|
|
|
248
255
|
.sb-color-table__variant-pill:focus-visible {
|
|
249
|
-
outline: 2px solid var(--swatchbook-accent-bg
|
|
256
|
+
outline: 2px solid var(--swatchbook-accent-bg);
|
|
250
257
|
outline-offset: 1px;
|
|
251
258
|
}
|
|
252
259
|
|
|
253
260
|
.sb-color-table__variant-pill--active, .sb-color-table__variant-pill--active:hover {
|
|
254
|
-
background: var(--swatchbook-accent-bg
|
|
255
|
-
color: var(--swatchbook-accent-fg
|
|
261
|
+
background: var(--swatchbook-accent-bg);
|
|
262
|
+
color: var(--swatchbook-accent-fg);
|
|
256
263
|
}
|
|
257
264
|
|
|
258
265
|
.sb-color-table__swatch-cell {
|
|
@@ -260,18 +267,18 @@
|
|
|
260
267
|
}
|
|
261
268
|
|
|
262
269
|
.sb-color-table__swatch {
|
|
263
|
-
border:
|
|
270
|
+
border-radius: var(--swatchbook-radius-2xs);
|
|
271
|
+
border: 1px solid var(--swatchbook-border-default);
|
|
264
272
|
background-clip: padding-box;
|
|
265
|
-
border-radius: 4px;
|
|
266
273
|
width: 20px;
|
|
267
274
|
height: 20px;
|
|
268
275
|
display: inline-block;
|
|
269
276
|
}
|
|
270
277
|
|
|
271
278
|
.sb-color-table__value-cell {
|
|
272
|
-
white-space: nowrap;
|
|
273
279
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
274
|
-
font-size:
|
|
280
|
+
font-size: var(--swatchbook-type-caption);
|
|
281
|
+
white-space: nowrap;
|
|
275
282
|
}
|
|
276
283
|
|
|
277
284
|
.sb-color-table__value-text {
|
|
@@ -283,10 +290,10 @@
|
|
|
283
290
|
}
|
|
284
291
|
|
|
285
292
|
.sb-color-table__copy-wrap {
|
|
293
|
+
margin-left: var(--swatchbook-space-xs);
|
|
286
294
|
vertical-align: middle;
|
|
287
295
|
opacity: 0;
|
|
288
296
|
align-items: center;
|
|
289
|
-
margin-left: 6px;
|
|
290
297
|
transition: opacity .12s;
|
|
291
298
|
display: inline-flex;
|
|
292
299
|
}
|
|
@@ -301,7 +308,7 @@
|
|
|
301
308
|
}
|
|
302
309
|
|
|
303
310
|
.sb-color-table__gamut-warn {
|
|
304
|
-
margin-left:
|
|
311
|
+
margin-left: var(--swatchbook-space-xs);
|
|
305
312
|
}
|
|
306
313
|
|
|
307
314
|
.sb-color-table__refs {
|
|
@@ -311,7 +318,7 @@
|
|
|
311
318
|
.sb-color-table__expand-cell {
|
|
312
319
|
text-align: center;
|
|
313
320
|
width: 28px;
|
|
314
|
-
color: var(--swatchbook-text-muted
|
|
321
|
+
color: var(--swatchbook-text-muted);
|
|
315
322
|
}
|
|
316
323
|
|
|
317
324
|
.sb-color-table__chevron {
|
|
@@ -324,94 +331,94 @@
|
|
|
324
331
|
}
|
|
325
332
|
|
|
326
333
|
.sb-color-table__detail-row {
|
|
327
|
-
background: var(--swatchbook-surface-muted
|
|
334
|
+
background: var(--swatchbook-surface-muted);
|
|
328
335
|
}
|
|
329
336
|
|
|
330
337
|
.sb-color-table__detail-cell {
|
|
331
|
-
padding:
|
|
338
|
+
padding: var(--swatchbook-space-md) var(--swatchbook-space-lg) var(--swatchbook-space-xl);
|
|
332
339
|
}
|
|
333
340
|
|
|
334
341
|
.sb-color-table__detail {
|
|
335
|
-
|
|
342
|
+
gap: var(--swatchbook-space-md);
|
|
343
|
+
font-size: var(--swatchbook-type-caption);
|
|
344
|
+
color: var(--swatchbook-text-default);
|
|
336
345
|
flex-direction: column;
|
|
337
|
-
gap: 10px;
|
|
338
|
-
font-size: 12px;
|
|
339
346
|
display: flex;
|
|
340
347
|
}
|
|
341
348
|
|
|
342
349
|
.sb-color-table__description {
|
|
350
|
+
font-size: var(--swatchbook-type-caption);
|
|
351
|
+
line-height: var(--swatchbook-leading-loose);
|
|
343
352
|
margin: 0;
|
|
344
|
-
font-size: 13px;
|
|
345
|
-
line-height: 1.5;
|
|
346
353
|
}
|
|
347
354
|
|
|
348
355
|
.sb-color-table__chain {
|
|
349
|
-
color: var(--swatchbook-text-muted, CanvasText);
|
|
350
|
-
margin: 0;
|
|
351
356
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
352
|
-
font-size:
|
|
357
|
+
font-size: var(--swatchbook-type-caption);
|
|
358
|
+
color: var(--swatchbook-text-muted);
|
|
359
|
+
margin: 0;
|
|
353
360
|
}
|
|
354
361
|
|
|
355
362
|
.sb-color-table__detail-label {
|
|
356
363
|
text-transform: uppercase;
|
|
357
|
-
letter-spacing:
|
|
358
|
-
|
|
364
|
+
letter-spacing: var(--swatchbook-tracking-label);
|
|
365
|
+
font-size: var(--swatchbook-type-micro);
|
|
366
|
+
margin-right: var(--swatchbook-space-2xs);
|
|
359
367
|
font-family: inherit;
|
|
360
|
-
font-size: 10px;
|
|
361
368
|
}
|
|
362
369
|
|
|
363
370
|
.sb-color-table__detail-empty {
|
|
364
|
-
color: var(--swatchbook-text-muted
|
|
371
|
+
color: var(--swatchbook-text-muted);
|
|
365
372
|
margin: 0;
|
|
366
373
|
font-style: italic;
|
|
367
374
|
}
|
|
368
375
|
|
|
369
376
|
.sb-color-table__variant-grid {
|
|
370
|
-
margin-top:
|
|
377
|
+
margin-top: var(--swatchbook-space-2xs);
|
|
371
378
|
}
|
|
372
379
|
|
|
373
380
|
.sb-color-table__variant-grid-header {
|
|
374
381
|
text-transform: uppercase;
|
|
375
|
-
letter-spacing:
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
382
|
+
letter-spacing: var(--swatchbook-tracking-label);
|
|
383
|
+
font-size: var(--swatchbook-type-micro);
|
|
384
|
+
color: var(--swatchbook-text-muted);
|
|
385
|
+
margin-bottom: var(--swatchbook-space-xs);
|
|
379
386
|
}
|
|
380
387
|
|
|
381
388
|
.sb-color-table__subtable {
|
|
382
389
|
border-collapse: collapse;
|
|
383
390
|
width: 100%;
|
|
384
391
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
385
|
-
font-size:
|
|
392
|
+
font-size: var(--swatchbook-type-micro);
|
|
386
393
|
}
|
|
387
394
|
|
|
388
395
|
.sb-color-table__subth {
|
|
389
396
|
text-align: left;
|
|
390
|
-
|
|
391
|
-
letter-spacing: .5px;
|
|
392
|
-
color: var(--swatchbook-text-muted, CanvasText);
|
|
393
|
-
border-bottom: 1px solid var(--swatchbook-border-default, #80808026);
|
|
394
|
-
padding: 4px 8px;
|
|
397
|
+
padding: var(--swatchbook-space-2xs) var(--swatchbook-space-sm);
|
|
395
398
|
font-family: inherit;
|
|
396
|
-
font-size:
|
|
399
|
+
font-size: var(--swatchbook-type-micro);
|
|
400
|
+
text-transform: uppercase;
|
|
401
|
+
letter-spacing: var(--swatchbook-tracking-label);
|
|
402
|
+
color: var(--swatchbook-text-muted);
|
|
403
|
+
border-bottom: 1px solid var(--swatchbook-border-default);
|
|
397
404
|
}
|
|
398
405
|
|
|
399
406
|
.sb-color-table__subtd {
|
|
400
|
-
|
|
407
|
+
padding: var(--swatchbook-space-2xs) var(--swatchbook-space-sm);
|
|
408
|
+
border-bottom: 1px solid var(--swatchbook-border-default);
|
|
401
409
|
vertical-align: middle;
|
|
402
|
-
padding: 4px 8px;
|
|
403
410
|
}
|
|
404
411
|
|
|
405
412
|
.sb-color-table__subtd--path {
|
|
406
|
-
color: var(--swatchbook-text-muted
|
|
413
|
+
color: var(--swatchbook-text-muted);
|
|
407
414
|
}
|
|
408
415
|
|
|
409
416
|
.sb-color-table__subrow--active {
|
|
410
|
-
background: var(--swatchbook-surface-raised
|
|
417
|
+
background: var(--swatchbook-surface-raised);
|
|
411
418
|
}
|
|
412
419
|
|
|
413
420
|
.sb-color-table__subrow--active > .sb-color-table__subtd {
|
|
414
|
-
color: var(--swatchbook-text-default
|
|
421
|
+
color: var(--swatchbook-text-default);
|
|
415
422
|
font-weight: 600;
|
|
416
423
|
}
|
|
417
424
|
|
|
@@ -428,47 +435,48 @@
|
|
|
428
435
|
}
|
|
429
436
|
|
|
430
437
|
.sb-color-table__empty-row {
|
|
431
|
-
color: var(--swatchbook-text-muted
|
|
438
|
+
color: var(--swatchbook-text-muted);
|
|
432
439
|
text-align: center;
|
|
433
|
-
padding:
|
|
440
|
+
padding: var(--swatchbook-space-lg) var(--swatchbook-space-md);
|
|
434
441
|
font-style: italic;
|
|
435
442
|
}
|
|
436
443
|
|
|
437
444
|
.sb-color-table__path[data-deprecated="true"] .sb-color-table__path-text {
|
|
445
|
+
text-decoration: line-through;
|
|
446
|
+
text-decoration-color: var(--swatchbook-deprecated);
|
|
438
447
|
opacity: .75;
|
|
439
|
-
text-decoration: line-through light-dark(#92400e, #fbbf24);
|
|
440
448
|
}
|
|
441
449
|
.sb-indicator__indicators {
|
|
442
|
-
min-width: 0;
|
|
443
|
-
color: var(--swatchbook-text-muted, #808080e6);
|
|
444
450
|
align-items: center;
|
|
445
|
-
gap:
|
|
451
|
+
gap: var(--swatchbook-space-sm);
|
|
452
|
+
min-width: 0;
|
|
446
453
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
447
|
-
font-size:
|
|
454
|
+
font-size: var(--swatchbook-type-caption);
|
|
455
|
+
color: var(--swatchbook-text-muted);
|
|
448
456
|
display: inline-flex;
|
|
449
457
|
}
|
|
450
458
|
|
|
451
459
|
.sb-indicator__alias-forward, .sb-indicator__alias-reverse {
|
|
460
|
+
align-items: center;
|
|
461
|
+
gap: var(--swatchbook-space-3xs);
|
|
452
462
|
white-space: nowrap;
|
|
453
463
|
text-overflow: ellipsis;
|
|
454
|
-
align-items: center;
|
|
455
|
-
gap: 2px;
|
|
456
464
|
display: inline-flex;
|
|
457
465
|
overflow: hidden;
|
|
458
466
|
}
|
|
459
467
|
|
|
460
468
|
.sb-indicator__alias-arrow {
|
|
461
|
-
color: var(--swatchbook-text-muted
|
|
469
|
+
color: var(--swatchbook-text-muted);
|
|
462
470
|
}
|
|
463
471
|
|
|
464
472
|
.sb-indicator__alias-node {
|
|
473
|
+
padding: 0 var(--swatchbook-space-3xs);
|
|
474
|
+
border-radius: var(--swatchbook-radius-2xs);
|
|
465
475
|
font: inherit;
|
|
466
|
-
color: var(--swatchbook-accent-
|
|
476
|
+
color: var(--swatchbook-accent-bg);
|
|
467
477
|
cursor: pointer;
|
|
468
478
|
background: none;
|
|
469
479
|
border: none;
|
|
470
|
-
border-radius: 3px;
|
|
471
|
-
padding: 0 2px;
|
|
472
480
|
}
|
|
473
481
|
|
|
474
482
|
.sb-indicator__alias-node:hover {
|
|
@@ -476,38 +484,34 @@
|
|
|
476
484
|
}
|
|
477
485
|
|
|
478
486
|
.sb-indicator__alias-node--offview {
|
|
479
|
-
color: var(--swatchbook-text-muted
|
|
487
|
+
color: var(--swatchbook-text-muted);
|
|
480
488
|
cursor: default;
|
|
481
489
|
text-decoration: none;
|
|
482
490
|
}
|
|
483
491
|
|
|
484
492
|
.sb-indicator__variance, .sb-indicator__composes, .sb-indicator__deprecated {
|
|
485
|
-
white-space: nowrap;
|
|
486
|
-
border-radius: 3px;
|
|
487
493
|
align-items: center;
|
|
488
|
-
gap:
|
|
489
|
-
padding: 0
|
|
494
|
+
gap: var(--swatchbook-space-3xs);
|
|
495
|
+
padding: 0 var(--swatchbook-space-2xs);
|
|
496
|
+
border-radius: var(--swatchbook-radius-2xs);
|
|
497
|
+
white-space: nowrap;
|
|
490
498
|
display: inline-flex;
|
|
491
499
|
}
|
|
492
500
|
|
|
493
|
-
.sb-indicator__variance-glyph, .sb-indicator__composes-glyph {
|
|
494
|
-
color: var(--swatchbook-text-muted
|
|
495
|
-
}
|
|
496
|
-
|
|
497
|
-
.sb-indicator__composes {
|
|
498
|
-
color: var(--swatchbook-text-muted, #808080cc);
|
|
501
|
+
.sb-indicator__variance-glyph, .sb-indicator__composes-glyph, .sb-indicator__composes {
|
|
502
|
+
color: var(--swatchbook-text-muted);
|
|
499
503
|
}
|
|
500
504
|
|
|
501
505
|
.sb-indicator__gamut {
|
|
502
|
-
margin-left:
|
|
506
|
+
margin-left: var(--swatchbook-space-3xs);
|
|
503
507
|
}
|
|
504
508
|
|
|
505
509
|
.sb-indicator__deprecated {
|
|
506
|
-
|
|
510
|
+
font-size: var(--swatchbook-type-micro);
|
|
511
|
+
letter-spacing: var(--swatchbook-tracking-label);
|
|
507
512
|
text-transform: uppercase;
|
|
508
|
-
color:
|
|
509
|
-
background:
|
|
510
|
-
font-size: 9px;
|
|
513
|
+
color: var(--swatchbook-text-muted);
|
|
514
|
+
background: var(--swatchbook-deprecated-bg);
|
|
511
515
|
}
|
|
512
516
|
|
|
513
517
|
.sb-indicator__reverse-wrap {
|
|
@@ -517,11 +521,11 @@
|
|
|
517
521
|
|
|
518
522
|
.sb-indicator__reverse-menu {
|
|
519
523
|
z-index: 10;
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
524
|
+
margin: var(--swatchbook-space-3xs) 0 0;
|
|
525
|
+
padding: var(--swatchbook-space-2xs);
|
|
526
|
+
background: var(--swatchbook-surface-raised);
|
|
527
|
+
border: 1px solid var(--swatchbook-border-default);
|
|
528
|
+
border-radius: var(--swatchbook-radius-xs);
|
|
525
529
|
list-style: none;
|
|
526
530
|
position: absolute;
|
|
527
531
|
top: 100%;
|
|
@@ -531,38 +535,38 @@
|
|
|
531
535
|
|
|
532
536
|
.sb-indicator__reverse-item {
|
|
533
537
|
width: 100%;
|
|
538
|
+
padding: var(--swatchbook-space-2xs) var(--swatchbook-space-sm);
|
|
539
|
+
border-radius: var(--swatchbook-radius-2xs);
|
|
534
540
|
font: inherit;
|
|
535
541
|
text-align: left;
|
|
536
542
|
white-space: nowrap;
|
|
537
|
-
color: var(--swatchbook-accent-
|
|
543
|
+
color: var(--swatchbook-accent-bg);
|
|
538
544
|
cursor: pointer;
|
|
539
545
|
background: none;
|
|
540
546
|
border: none;
|
|
541
|
-
border-radius: 4px;
|
|
542
|
-
padding: 4px 8px;
|
|
543
547
|
display: block;
|
|
544
548
|
}
|
|
545
549
|
|
|
546
550
|
.sb-indicator__reverse-item:hover:not(:disabled) {
|
|
547
|
-
background: var(--swatchbook-surface-muted
|
|
551
|
+
background: var(--swatchbook-surface-muted);
|
|
548
552
|
}
|
|
549
553
|
|
|
550
554
|
.sb-indicator__reverse-item:disabled {
|
|
551
|
-
color: var(--swatchbook-text-muted
|
|
555
|
+
color: var(--swatchbook-text-muted);
|
|
552
556
|
cursor: default;
|
|
553
557
|
}
|
|
554
558
|
|
|
555
559
|
.sb-indicator__description {
|
|
556
|
-
color: var(--swatchbook-text-muted
|
|
560
|
+
color: var(--swatchbook-text-muted);
|
|
557
561
|
cursor: help;
|
|
558
562
|
}
|
|
559
563
|
.sb-copy-button {
|
|
560
|
-
color: var(--swatchbook-text-muted
|
|
564
|
+
color: var(--swatchbook-text-muted);
|
|
561
565
|
font: inherit;
|
|
562
566
|
cursor: pointer;
|
|
567
|
+
border-radius: var(--swatchbook-radius-2xs);
|
|
563
568
|
background: none;
|
|
564
569
|
border: 0;
|
|
565
|
-
border-radius: 4px;
|
|
566
570
|
justify-content: center;
|
|
567
571
|
align-items: center;
|
|
568
572
|
margin: 0;
|
|
@@ -572,32 +576,32 @@
|
|
|
572
576
|
}
|
|
573
577
|
|
|
574
578
|
.sb-copy-button:hover {
|
|
575
|
-
background: var(--swatchbook-surface-muted
|
|
576
|
-
color: var(--swatchbook-text-default
|
|
579
|
+
background: var(--swatchbook-surface-muted);
|
|
580
|
+
color: var(--swatchbook-text-default);
|
|
577
581
|
}
|
|
578
582
|
|
|
579
583
|
.sb-copy-button:focus-visible {
|
|
580
|
-
outline: 2px solid var(--swatchbook-accent-
|
|
584
|
+
outline: 2px solid var(--swatchbook-accent-bg);
|
|
581
585
|
outline-offset: 2px;
|
|
582
586
|
}
|
|
583
587
|
|
|
584
588
|
.sb-copy-button--icon {
|
|
585
589
|
width: 20px;
|
|
586
590
|
height: 20px;
|
|
587
|
-
font-size:
|
|
588
|
-
line-height:
|
|
591
|
+
font-size: var(--swatchbook-type-caption);
|
|
592
|
+
line-height: var(--swatchbook-leading-none);
|
|
589
593
|
}
|
|
590
594
|
|
|
591
595
|
.sb-copy-button--text {
|
|
592
|
-
|
|
596
|
+
padding: var(--swatchbook-space-3xs) var(--swatchbook-space-sm);
|
|
597
|
+
font-size: var(--swatchbook-type-micro);
|
|
598
|
+
letter-spacing: var(--swatchbook-tracking-label);
|
|
593
599
|
text-transform: uppercase;
|
|
594
|
-
border: 1px solid var(--swatchbook-border-default
|
|
595
|
-
padding: 2px 8px;
|
|
596
|
-
font-size: 11px;
|
|
600
|
+
border: 1px solid var(--swatchbook-border-default);
|
|
597
601
|
}
|
|
598
602
|
|
|
599
603
|
.sb-copy-button--copied {
|
|
600
|
-
color: var(--swatchbook-accent-
|
|
604
|
+
color: var(--swatchbook-accent-bg);
|
|
601
605
|
}
|
|
602
606
|
|
|
603
607
|
.sb-copy-button__sr-status {
|
|
@@ -612,93 +616,93 @@
|
|
|
612
616
|
overflow: hidden;
|
|
613
617
|
}
|
|
614
618
|
.sb-diagnostics__summary {
|
|
615
|
-
cursor: pointer;
|
|
616
619
|
align-items: center;
|
|
617
|
-
gap:
|
|
618
|
-
padding:
|
|
619
|
-
font-size:
|
|
620
|
+
gap: var(--swatchbook-space-sm);
|
|
621
|
+
padding: var(--swatchbook-space-2xs) 0;
|
|
622
|
+
font-size: var(--swatchbook-type-caption);
|
|
623
|
+
cursor: pointer;
|
|
620
624
|
font-weight: 600;
|
|
621
625
|
list-style: none;
|
|
622
626
|
display: flex;
|
|
623
627
|
}
|
|
624
628
|
|
|
625
629
|
.sb-diagnostics__summary--ok {
|
|
626
|
-
color:
|
|
630
|
+
color: var(--swatchbook-status-success);
|
|
627
631
|
}
|
|
628
632
|
|
|
629
633
|
.sb-diagnostics__summary--error {
|
|
630
|
-
color:
|
|
634
|
+
color: var(--swatchbook-status-danger);
|
|
631
635
|
}
|
|
632
636
|
|
|
633
637
|
.sb-diagnostics__summary--warn {
|
|
634
|
-
color:
|
|
638
|
+
color: var(--swatchbook-status-warning);
|
|
635
639
|
}
|
|
636
640
|
|
|
637
641
|
.sb-diagnostics__list {
|
|
642
|
+
margin: var(--swatchbook-space-sm) 0 0;
|
|
638
643
|
flex-direction: column;
|
|
639
|
-
margin: 8px 0 0;
|
|
640
644
|
padding: 0;
|
|
641
645
|
list-style: none;
|
|
642
646
|
display: flex;
|
|
643
647
|
}
|
|
644
648
|
|
|
645
649
|
.sb-diagnostics__row {
|
|
646
|
-
|
|
650
|
+
gap: var(--swatchbook-space-md);
|
|
651
|
+
padding: var(--swatchbook-space-sm) var(--swatchbook-space-2xs);
|
|
652
|
+
border-top: 1px solid var(--swatchbook-border-default);
|
|
653
|
+
font-size: var(--swatchbook-type-caption);
|
|
647
654
|
grid-template-columns: 60px 1fr;
|
|
648
|
-
gap: 12px;
|
|
649
|
-
padding: 8px 4px;
|
|
650
|
-
font-size: 12px;
|
|
651
655
|
display: grid;
|
|
652
656
|
}
|
|
653
657
|
|
|
654
658
|
.sb-diagnostics__label {
|
|
655
|
-
|
|
656
|
-
|
|
659
|
+
font-size: var(--swatchbook-type-micro);
|
|
660
|
+
letter-spacing: var(--swatchbook-tracking-label);
|
|
657
661
|
font-weight: 600;
|
|
658
662
|
}
|
|
659
663
|
|
|
660
664
|
.sb-diagnostics__label--error {
|
|
661
|
-
color:
|
|
665
|
+
color: var(--swatchbook-status-danger);
|
|
662
666
|
}
|
|
663
667
|
|
|
664
668
|
.sb-diagnostics__label--warn {
|
|
665
|
-
color:
|
|
669
|
+
color: var(--swatchbook-status-warning);
|
|
666
670
|
}
|
|
667
671
|
|
|
668
672
|
.sb-diagnostics__meta {
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
+
margin-top: var(--swatchbook-space-2xs);
|
|
674
|
+
color: var(--swatchbook-text-muted);
|
|
675
|
+
font-size: var(--swatchbook-type-micro);
|
|
676
|
+
opacity: var(--swatchbook-opacity-muted);
|
|
673
677
|
}
|
|
674
678
|
.sb-dimension-scale__row {
|
|
675
|
-
|
|
679
|
+
gap: var(--swatchbook-space-lg);
|
|
680
|
+
padding: var(--swatchbook-space-md) 0;
|
|
681
|
+
border-bottom: 1px solid var(--swatchbook-border-default);
|
|
676
682
|
grid-template-columns: minmax(160px, 220px) 1fr auto;
|
|
677
683
|
align-items: center;
|
|
678
|
-
gap: 16px;
|
|
679
|
-
padding: 10px 0;
|
|
680
684
|
display: grid;
|
|
681
685
|
}
|
|
682
686
|
|
|
683
687
|
.sb-dimension-scale__meta {
|
|
688
|
+
gap: var(--swatchbook-space-3xs);
|
|
684
689
|
flex-direction: column;
|
|
685
|
-
gap: 2px;
|
|
686
690
|
min-width: 0;
|
|
687
691
|
display: flex;
|
|
688
692
|
}
|
|
689
693
|
|
|
690
694
|
.sb-dimension-scale__path {
|
|
695
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
696
|
+
font-size: var(--swatchbook-type-caption);
|
|
691
697
|
text-overflow: ellipsis;
|
|
692
698
|
white-space: nowrap;
|
|
693
|
-
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
694
|
-
font-size: 12px;
|
|
695
699
|
overflow: hidden;
|
|
696
700
|
}
|
|
697
701
|
|
|
698
702
|
.sb-dimension-scale__specs {
|
|
699
|
-
opacity: .7;
|
|
700
703
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
701
|
-
font-size:
|
|
704
|
+
font-size: var(--swatchbook-type-micro);
|
|
705
|
+
opacity: var(--swatchbook-opacity-muted);
|
|
702
706
|
}
|
|
703
707
|
|
|
704
708
|
.sb-dimension-scale__visual-cell {
|
|
@@ -708,253 +712,313 @@
|
|
|
708
712
|
}
|
|
709
713
|
|
|
710
714
|
.sb-dimension-scale__css-var {
|
|
711
|
-
opacity: .7;
|
|
712
|
-
white-space: nowrap;
|
|
713
715
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
714
|
-
font-size:
|
|
716
|
+
font-size: var(--swatchbook-type-micro);
|
|
717
|
+
opacity: var(--swatchbook-opacity-muted);
|
|
718
|
+
white-space: nowrap;
|
|
719
|
+
}
|
|
720
|
+
.sb-dimension-bar {
|
|
721
|
+
align-items: center;
|
|
722
|
+
gap: var(--swatchbook-space-3xs);
|
|
723
|
+
min-width: 0;
|
|
724
|
+
max-width: 100%;
|
|
725
|
+
display: inline-flex;
|
|
715
726
|
}
|
|
716
727
|
|
|
717
|
-
.sb-dimension-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
728
|
+
.sb-dimension-bar__cap {
|
|
729
|
+
color: var(--swatchbook-text-muted);
|
|
730
|
+
font-size: var(--swatchbook-type-micro);
|
|
731
|
+
line-height: var(--swatchbook-leading-none);
|
|
732
|
+
user-select: none;
|
|
733
|
+
}
|
|
734
|
+
|
|
735
|
+
.sb-dimension-bar__bar {
|
|
736
|
+
background: var(--swatchbook-accent-bg);
|
|
737
|
+
border-radius: 2px;
|
|
738
|
+
min-width: 1px;
|
|
739
|
+
max-width: 100%;
|
|
740
|
+
height: 14px;
|
|
741
|
+
}
|
|
742
|
+
|
|
743
|
+
.sb-dimension-bar__radius-sample {
|
|
744
|
+
background: var(--swatchbook-accent-bg);
|
|
745
|
+
border: 1px solid var(--swatchbook-border-default);
|
|
746
|
+
width: 56px;
|
|
747
|
+
height: 56px;
|
|
748
|
+
}
|
|
749
|
+
|
|
750
|
+
.sb-dimension-bar__size-sample {
|
|
751
|
+
background: var(--swatchbook-accent-bg);
|
|
752
|
+
border: 1px solid var(--swatchbook-border-default);
|
|
753
|
+
min-width: 1px;
|
|
754
|
+
min-height: 1px;
|
|
722
755
|
}
|
|
723
756
|
.sb-font-family-sample__row {
|
|
724
|
-
|
|
757
|
+
gap: var(--swatchbook-space-lg);
|
|
758
|
+
padding: var(--swatchbook-space-lg) 0;
|
|
759
|
+
border-bottom: 1px solid var(--swatchbook-border-default);
|
|
725
760
|
grid-template-columns: minmax(160px, 220px) 1fr auto;
|
|
726
761
|
align-items: baseline;
|
|
727
|
-
gap: 16px;
|
|
728
|
-
padding: 14px 0;
|
|
729
762
|
display: grid;
|
|
730
763
|
}
|
|
731
764
|
|
|
732
765
|
.sb-font-family-sample__meta {
|
|
766
|
+
gap: var(--swatchbook-space-3xs);
|
|
733
767
|
flex-direction: column;
|
|
734
|
-
gap: 2px;
|
|
735
768
|
min-width: 0;
|
|
736
769
|
display: flex;
|
|
737
770
|
}
|
|
738
771
|
|
|
739
772
|
.sb-font-family-sample__path {
|
|
773
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
774
|
+
font-size: var(--swatchbook-type-caption);
|
|
740
775
|
text-overflow: ellipsis;
|
|
741
776
|
white-space: nowrap;
|
|
742
|
-
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
743
|
-
font-size: 12px;
|
|
744
777
|
overflow: hidden;
|
|
745
778
|
}
|
|
746
779
|
|
|
747
780
|
.sb-font-family-sample__stack {
|
|
748
|
-
color: var(--swatchbook-text-muted, CanvasText);
|
|
749
781
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
750
|
-
font-size:
|
|
782
|
+
font-size: var(--swatchbook-type-micro);
|
|
783
|
+
color: var(--swatchbook-text-muted);
|
|
751
784
|
}
|
|
752
785
|
|
|
753
786
|
.sb-font-family-sample__sample {
|
|
754
|
-
font-size:
|
|
755
|
-
line-height:
|
|
787
|
+
font-size: var(--swatchbook-type-sample);
|
|
788
|
+
line-height: var(--swatchbook-leading-tight);
|
|
756
789
|
}
|
|
757
790
|
|
|
758
791
|
.sb-font-family-sample__css-var {
|
|
759
|
-
color: var(--swatchbook-text-muted, CanvasText);
|
|
760
792
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
761
|
-
font-size:
|
|
793
|
+
font-size: var(--swatchbook-type-micro);
|
|
794
|
+
color: var(--swatchbook-text-muted);
|
|
762
795
|
}
|
|
763
796
|
.sb-font-weight-scale__row {
|
|
764
|
-
|
|
797
|
+
gap: var(--swatchbook-space-lg);
|
|
798
|
+
padding: var(--swatchbook-space-md) 0;
|
|
799
|
+
border-bottom: 1px solid var(--swatchbook-border-default);
|
|
765
800
|
grid-template-columns: minmax(160px, 220px) 1fr auto;
|
|
766
801
|
align-items: baseline;
|
|
767
|
-
gap: 16px;
|
|
768
|
-
padding: 12px 0;
|
|
769
802
|
display: grid;
|
|
770
803
|
}
|
|
771
804
|
|
|
772
805
|
.sb-font-weight-scale__meta {
|
|
806
|
+
gap: var(--swatchbook-space-3xs);
|
|
773
807
|
flex-direction: column;
|
|
774
|
-
gap: 2px;
|
|
775
808
|
min-width: 0;
|
|
776
809
|
display: flex;
|
|
777
810
|
}
|
|
778
811
|
|
|
779
812
|
.sb-font-weight-scale__path {
|
|
813
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
814
|
+
font-size: var(--swatchbook-type-caption);
|
|
780
815
|
text-overflow: ellipsis;
|
|
781
816
|
white-space: nowrap;
|
|
782
|
-
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
783
|
-
font-size: 12px;
|
|
784
817
|
overflow: hidden;
|
|
785
818
|
}
|
|
786
819
|
|
|
787
820
|
.sb-font-weight-scale__value {
|
|
788
|
-
color: var(--swatchbook-text-muted, CanvasText);
|
|
789
821
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
790
|
-
font-size:
|
|
822
|
+
font-size: var(--swatchbook-type-micro);
|
|
823
|
+
color: var(--swatchbook-text-muted);
|
|
791
824
|
}
|
|
792
825
|
|
|
793
826
|
.sb-font-weight-scale__sample {
|
|
794
|
-
font-size:
|
|
795
|
-
line-height:
|
|
827
|
+
font-size: var(--swatchbook-type-sample-lg);
|
|
828
|
+
line-height: var(--swatchbook-leading-none);
|
|
796
829
|
}
|
|
797
830
|
|
|
798
831
|
.sb-font-weight-scale__css-var {
|
|
799
|
-
color: var(--swatchbook-text-muted, CanvasText);
|
|
800
832
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
801
|
-
font-size:
|
|
833
|
+
font-size: var(--swatchbook-type-micro);
|
|
834
|
+
color: var(--swatchbook-text-muted);
|
|
802
835
|
}
|
|
803
836
|
.sb-gradient-palette__row {
|
|
804
|
-
|
|
837
|
+
gap: var(--swatchbook-space-lg);
|
|
838
|
+
padding: var(--swatchbook-space-lg) 0;
|
|
839
|
+
border-bottom: 1px solid var(--swatchbook-border-default);
|
|
805
840
|
grid-template-columns: minmax(180px, 240px) 1fr minmax(140px, 220px);
|
|
806
841
|
align-items: center;
|
|
807
|
-
gap: 16px;
|
|
808
|
-
padding: 16px 0;
|
|
809
842
|
display: grid;
|
|
810
843
|
}
|
|
811
844
|
|
|
812
845
|
.sb-gradient-palette__meta {
|
|
846
|
+
gap: var(--swatchbook-space-3xs);
|
|
813
847
|
flex-direction: column;
|
|
814
|
-
gap: 2px;
|
|
815
848
|
min-width: 0;
|
|
816
849
|
display: flex;
|
|
817
850
|
}
|
|
818
851
|
|
|
819
852
|
.sb-gradient-palette__path {
|
|
853
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
854
|
+
font-size: var(--swatchbook-type-caption);
|
|
820
855
|
text-overflow: ellipsis;
|
|
821
856
|
white-space: nowrap;
|
|
822
|
-
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
823
|
-
font-size: 12px;
|
|
824
857
|
overflow: hidden;
|
|
825
858
|
}
|
|
826
859
|
|
|
827
860
|
.sb-gradient-palette__css-var {
|
|
828
|
-
opacity: .7;
|
|
829
861
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
830
|
-
font-size:
|
|
862
|
+
font-size: var(--swatchbook-type-micro);
|
|
863
|
+
opacity: var(--swatchbook-opacity-muted);
|
|
831
864
|
}
|
|
832
865
|
|
|
833
866
|
.sb-gradient-palette__sample {
|
|
834
|
-
border:
|
|
835
|
-
border
|
|
867
|
+
border-radius: var(--swatchbook-radius-xs);
|
|
868
|
+
border: 1px solid var(--swatchbook-border-default);
|
|
836
869
|
height: 56px;
|
|
837
870
|
}
|
|
838
871
|
|
|
839
872
|
.sb-gradient-palette__stops {
|
|
840
|
-
flex-direction: column;
|
|
841
|
-
gap: 2px;
|
|
842
873
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
843
|
-
font-size:
|
|
874
|
+
font-size: var(--swatchbook-type-micro);
|
|
875
|
+
gap: var(--swatchbook-space-3xs);
|
|
876
|
+
flex-direction: column;
|
|
844
877
|
display: flex;
|
|
845
878
|
}
|
|
846
879
|
|
|
847
880
|
.sb-gradient-palette__stop-row {
|
|
848
881
|
align-items: center;
|
|
849
|
-
gap:
|
|
882
|
+
gap: var(--swatchbook-space-sm);
|
|
850
883
|
display: flex;
|
|
851
884
|
}
|
|
852
885
|
|
|
853
886
|
.sb-gradient-palette__stop-swatch {
|
|
854
|
-
border:
|
|
855
|
-
border
|
|
887
|
+
border-radius: var(--swatchbook-radius-3xs);
|
|
888
|
+
border: 1px solid var(--swatchbook-border-default);
|
|
856
889
|
flex: none;
|
|
857
890
|
width: 10px;
|
|
858
891
|
height: 10px;
|
|
859
892
|
}
|
|
860
893
|
|
|
861
894
|
.sb-gradient-palette__stop-position {
|
|
862
|
-
opacity:
|
|
895
|
+
opacity: var(--swatchbook-opacity-scrim);
|
|
863
896
|
}
|
|
864
897
|
.sb-motion-preview__controls {
|
|
865
898
|
align-items: center;
|
|
866
|
-
gap:
|
|
867
|
-
padding:
|
|
899
|
+
gap: var(--swatchbook-space-sm);
|
|
900
|
+
padding: var(--swatchbook-space-sm) 0 var(--swatchbook-space-md);
|
|
868
901
|
display: flex;
|
|
869
902
|
}
|
|
870
903
|
|
|
871
904
|
.sb-motion-preview__control-label {
|
|
872
|
-
|
|
905
|
+
font-size: var(--swatchbook-type-micro);
|
|
906
|
+
color: var(--swatchbook-text-muted);
|
|
873
907
|
text-transform: uppercase;
|
|
874
|
-
letter-spacing:
|
|
875
|
-
font-size: 11px;
|
|
908
|
+
letter-spacing: var(--swatchbook-tracking-label);
|
|
876
909
|
}
|
|
877
910
|
|
|
878
911
|
.sb-motion-preview__speed-btn {
|
|
912
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
913
|
+
font-size: var(--swatchbook-type-micro);
|
|
914
|
+
padding: var(--swatchbook-space-2xs) var(--swatchbook-space-sm);
|
|
879
915
|
color: inherit;
|
|
880
|
-
border: 1px solid var(--swatchbook-border-default
|
|
916
|
+
border: 1px solid var(--swatchbook-border-default);
|
|
917
|
+
border-radius: var(--swatchbook-radius-2xs);
|
|
881
918
|
cursor: pointer;
|
|
882
919
|
background: none;
|
|
883
|
-
border-radius: 4px;
|
|
884
|
-
padding: 4px 8px;
|
|
885
|
-
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
886
|
-
font-size: 11px;
|
|
887
920
|
}
|
|
888
921
|
|
|
889
922
|
.sb-motion-preview__speed-btn--active {
|
|
890
|
-
background: var(--swatchbook-accent-bg
|
|
891
|
-
color: var(--swatchbook-accent-fg
|
|
923
|
+
background: var(--swatchbook-accent-bg);
|
|
924
|
+
color: var(--swatchbook-accent-fg);
|
|
892
925
|
border-color: #0000;
|
|
893
926
|
}
|
|
894
927
|
|
|
895
928
|
.sb-motion-preview__replay-btn {
|
|
929
|
+
font-size: var(--swatchbook-type-micro);
|
|
930
|
+
padding: var(--swatchbook-space-2xs) var(--swatchbook-space-md);
|
|
896
931
|
color: inherit;
|
|
897
|
-
border: 1px solid var(--swatchbook-border-default
|
|
932
|
+
border: 1px solid var(--swatchbook-border-default);
|
|
933
|
+
border-radius: var(--swatchbook-radius-2xs);
|
|
898
934
|
cursor: pointer;
|
|
899
935
|
background: none;
|
|
900
|
-
border-radius: 4px;
|
|
901
936
|
margin-left: auto;
|
|
902
|
-
padding: 4px 10px;
|
|
903
|
-
font-size: 11px;
|
|
904
937
|
}
|
|
905
938
|
|
|
906
939
|
.sb-motion-preview__row {
|
|
907
|
-
|
|
940
|
+
gap: var(--swatchbook-space-lg);
|
|
941
|
+
padding: var(--swatchbook-space-lg) 0;
|
|
942
|
+
border-bottom: 1px solid var(--swatchbook-border-default);
|
|
908
943
|
grid-template-columns: minmax(180px, 240px) 1fr auto;
|
|
909
944
|
align-items: center;
|
|
910
|
-
gap: 16px;
|
|
911
|
-
padding: 14px 0;
|
|
912
945
|
display: grid;
|
|
913
946
|
}
|
|
914
947
|
|
|
915
948
|
.sb-motion-preview__meta {
|
|
949
|
+
gap: var(--swatchbook-space-3xs);
|
|
916
950
|
flex-direction: column;
|
|
917
|
-
gap: 2px;
|
|
918
951
|
min-width: 0;
|
|
919
952
|
display: flex;
|
|
920
953
|
}
|
|
921
954
|
|
|
922
955
|
.sb-motion-preview__path {
|
|
956
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
957
|
+
font-size: var(--swatchbook-type-caption);
|
|
923
958
|
text-overflow: ellipsis;
|
|
924
959
|
white-space: nowrap;
|
|
925
|
-
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
926
|
-
font-size: 12px;
|
|
927
960
|
overflow: hidden;
|
|
928
961
|
}
|
|
929
962
|
|
|
930
963
|
.sb-motion-preview__specs {
|
|
931
|
-
color: var(--swatchbook-text-muted, CanvasText);
|
|
932
964
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
933
|
-
font-size:
|
|
965
|
+
font-size: var(--swatchbook-type-micro);
|
|
966
|
+
color: var(--swatchbook-text-muted);
|
|
934
967
|
}
|
|
935
968
|
|
|
936
969
|
.sb-motion-preview__css-var {
|
|
937
|
-
color: var(--swatchbook-text-muted, CanvasText);
|
|
938
|
-
white-space: nowrap;
|
|
939
970
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
940
|
-
font-size:
|
|
971
|
+
font-size: var(--swatchbook-type-micro);
|
|
972
|
+
color: var(--swatchbook-text-muted);
|
|
973
|
+
white-space: nowrap;
|
|
974
|
+
}
|
|
975
|
+
.sb-motion-sample__track {
|
|
976
|
+
background: var(--swatchbook-surface-muted);
|
|
977
|
+
border-radius: 18px;
|
|
978
|
+
height: 36px;
|
|
979
|
+
position: relative;
|
|
980
|
+
overflow: hidden;
|
|
981
|
+
}
|
|
982
|
+
|
|
983
|
+
.sb-motion-sample__ball {
|
|
984
|
+
background: var(--swatchbook-accent-bg);
|
|
985
|
+
border-radius: 50%;
|
|
986
|
+
width: 28px;
|
|
987
|
+
height: 28px;
|
|
988
|
+
margin-top: -14px;
|
|
989
|
+
position: absolute;
|
|
990
|
+
top: 50%;
|
|
991
|
+
}
|
|
992
|
+
|
|
993
|
+
.sb-motion-sample__ball--start {
|
|
994
|
+
left: 4px;
|
|
995
|
+
}
|
|
996
|
+
|
|
997
|
+
.sb-motion-sample__ball--end {
|
|
998
|
+
left: calc(100% - 32px);
|
|
999
|
+
}
|
|
1000
|
+
|
|
1001
|
+
.sb-motion-sample__reduced-motion {
|
|
1002
|
+
font-size: var(--swatchbook-type-micro);
|
|
1003
|
+
color: var(--swatchbook-text-muted);
|
|
1004
|
+
font-style: italic;
|
|
941
1005
|
}
|
|
942
1006
|
.sb-opacity-scale__grid {
|
|
1007
|
+
gap: var(--swatchbook-space-md);
|
|
943
1008
|
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
|
944
|
-
gap: 12px;
|
|
945
1009
|
display: grid;
|
|
946
1010
|
}
|
|
947
1011
|
|
|
948
1012
|
.sb-opacity-scale__card {
|
|
949
|
-
border: 1px solid var(--swatchbook-border-default
|
|
950
|
-
border-radius:
|
|
1013
|
+
border: 1px solid var(--swatchbook-border-default);
|
|
1014
|
+
border-radius: var(--swatchbook-radius-xs);
|
|
951
1015
|
flex-direction: column;
|
|
952
1016
|
display: flex;
|
|
953
1017
|
overflow: hidden;
|
|
954
1018
|
}
|
|
955
1019
|
|
|
956
1020
|
.sb-opacity-scale__swatch {
|
|
957
|
-
border-bottom: 1px solid var(--swatchbook-border-default
|
|
1021
|
+
border-bottom: 1px solid var(--swatchbook-border-default);
|
|
958
1022
|
background-color: #fff;
|
|
959
1023
|
background-image: linear-gradient(45deg, #00000014 25%, #0000 25%), linear-gradient(-45deg, #00000014 25%, #0000 25%), linear-gradient(45deg, #0000 75%, #00000014 75%), linear-gradient(-45deg, #0000 75%, #00000014 75%);
|
|
960
1024
|
background-position: 0 0, 0 6px, 6px -6px, -6px 0;
|
|
@@ -965,57 +1029,114 @@
|
|
|
965
1029
|
|
|
966
1030
|
.sb-opacity-scale__swatch:after {
|
|
967
1031
|
content: "";
|
|
968
|
-
background: var(--
|
|
969
|
-
opacity: var(--
|
|
1032
|
+
background: var(--swatchbook-opacity-scale-color);
|
|
1033
|
+
opacity: var(--swatchbook-opacity-scale-alpha);
|
|
970
1034
|
position: absolute;
|
|
971
1035
|
inset: 0;
|
|
972
1036
|
}
|
|
973
1037
|
|
|
974
1038
|
.sb-opacity-scale__meta {
|
|
1039
|
+
padding: var(--swatchbook-space-sm) var(--swatchbook-space-md);
|
|
1040
|
+
gap: var(--swatchbook-space-3xs);
|
|
975
1041
|
flex-direction: column;
|
|
976
|
-
gap: 2px;
|
|
977
|
-
padding: 8px 10px;
|
|
978
1042
|
display: flex;
|
|
979
1043
|
}
|
|
980
1044
|
|
|
981
1045
|
.sb-opacity-scale__path {
|
|
982
1046
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
983
|
-
font-size:
|
|
1047
|
+
font-size: var(--swatchbook-type-caption);
|
|
984
1048
|
}
|
|
985
1049
|
|
|
986
1050
|
.sb-opacity-scale__value, .sb-opacity-scale__css-var {
|
|
987
|
-
opacity: .7;
|
|
988
1051
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
989
|
-
font-size:
|
|
1052
|
+
font-size: var(--swatchbook-type-micro);
|
|
1053
|
+
opacity: var(--swatchbook-opacity-muted);
|
|
1054
|
+
}
|
|
1055
|
+
:root {
|
|
1056
|
+
--swatchbook-border-default: #e2e8f0;
|
|
1057
|
+
--swatchbook-surface-default: #fff;
|
|
1058
|
+
--swatchbook-surface-muted: #f8fafc;
|
|
1059
|
+
--swatchbook-surface-raised: #fff;
|
|
1060
|
+
--swatchbook-text-default: #0f172a;
|
|
1061
|
+
--swatchbook-text-muted: #475569;
|
|
1062
|
+
--swatchbook-accent-bg: #1d4ed8;
|
|
1063
|
+
--swatchbook-accent-fg: #fff;
|
|
1064
|
+
--swatchbook-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
1065
|
+
}
|
|
1066
|
+
:root {
|
|
1067
|
+
--swatchbook-status-success: color-mix(in oklab, #30a46c, var(--swatchbook-text-default) 35%);
|
|
1068
|
+
--swatchbook-status-warning: color-mix(in oklab, #b08900, var(--swatchbook-text-default) 35%);
|
|
1069
|
+
--swatchbook-status-danger: color-mix(in oklab, #d64545, var(--swatchbook-text-default) 35%);
|
|
1070
|
+
--swatchbook-deprecated: #d97706;
|
|
1071
|
+
--swatchbook-deprecated-bg: #f59e0b26;
|
|
1072
|
+
}
|
|
1073
|
+
:root {
|
|
1074
|
+
--swatchbook-radius-2xs: 4px;
|
|
1075
|
+
--swatchbook-radius-3xs: 2px;
|
|
1076
|
+
--swatchbook-radius-lg: 16px;
|
|
1077
|
+
--swatchbook-radius-md: 12px;
|
|
1078
|
+
--swatchbook-radius-none: 0;
|
|
1079
|
+
--swatchbook-radius-pill: 9999px;
|
|
1080
|
+
--swatchbook-radius-sm: 8px;
|
|
1081
|
+
--swatchbook-radius-xl: 24px;
|
|
1082
|
+
--swatchbook-radius-xs: 6px;
|
|
1083
|
+
--swatchbook-space-2xl: 40px;
|
|
1084
|
+
--swatchbook-space-2xs: 4px;
|
|
1085
|
+
--swatchbook-space-3xl: 64px;
|
|
1086
|
+
--swatchbook-space-3xs: 2px;
|
|
1087
|
+
--swatchbook-space-lg: 16px;
|
|
1088
|
+
--swatchbook-space-md: 12px;
|
|
1089
|
+
--swatchbook-space-none: 0;
|
|
1090
|
+
--swatchbook-space-sm: 8px;
|
|
1091
|
+
--swatchbook-space-xl: 24px;
|
|
1092
|
+
--swatchbook-space-xs: 6px;
|
|
1093
|
+
}
|
|
1094
|
+
:root {
|
|
1095
|
+
--swatchbook-leading-loose: 1.5;
|
|
1096
|
+
--swatchbook-leading-none: 1;
|
|
1097
|
+
--swatchbook-leading-normal: 1.4;
|
|
1098
|
+
--swatchbook-leading-tight: 1.2;
|
|
1099
|
+
--swatchbook-opacity-disabled: .4;
|
|
1100
|
+
--swatchbook-opacity-muted: .7;
|
|
1101
|
+
--swatchbook-opacity-scrim: .6;
|
|
1102
|
+
--swatchbook-tracking-label: .5px;
|
|
1103
|
+
--swatchbook-type-body: 1rem;
|
|
1104
|
+
--swatchbook-type-caption: .75rem;
|
|
1105
|
+
--swatchbook-type-heading: 1.25rem;
|
|
1106
|
+
--swatchbook-type-micro: .6875rem;
|
|
1107
|
+
--swatchbook-type-sample-lg: 1.75rem;
|
|
1108
|
+
--swatchbook-type-sample-xl: 2rem;
|
|
1109
|
+
--swatchbook-type-sample: 1.5rem;
|
|
1110
|
+
--swatchbook-type-small: .875rem;
|
|
990
1111
|
}
|
|
991
1112
|
.sb-shadow-preview__row {
|
|
992
|
-
|
|
1113
|
+
gap: var(--swatchbook-space-lg);
|
|
1114
|
+
padding: var(--swatchbook-space-lg) 0;
|
|
1115
|
+
border-bottom: 1px solid var(--swatchbook-border-default);
|
|
993
1116
|
grid-template-columns: minmax(160px, 220px) 140px 1fr;
|
|
994
1117
|
align-items: center;
|
|
995
|
-
gap: 16px;
|
|
996
|
-
padding: 16px 0;
|
|
997
1118
|
display: grid;
|
|
998
1119
|
}
|
|
999
1120
|
|
|
1000
1121
|
.sb-shadow-preview__meta {
|
|
1122
|
+
gap: var(--swatchbook-space-3xs);
|
|
1001
1123
|
flex-direction: column;
|
|
1002
|
-
gap: 2px;
|
|
1003
1124
|
min-width: 0;
|
|
1004
1125
|
display: flex;
|
|
1005
1126
|
}
|
|
1006
1127
|
|
|
1007
1128
|
.sb-shadow-preview__path {
|
|
1129
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
1130
|
+
font-size: var(--swatchbook-type-caption);
|
|
1008
1131
|
text-overflow: ellipsis;
|
|
1009
1132
|
white-space: nowrap;
|
|
1010
|
-
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
1011
|
-
font-size: 12px;
|
|
1012
1133
|
overflow: hidden;
|
|
1013
1134
|
}
|
|
1014
1135
|
|
|
1015
1136
|
.sb-shadow-preview__css-var {
|
|
1016
|
-
opacity: .7;
|
|
1017
1137
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
1018
|
-
font-size:
|
|
1138
|
+
font-size: var(--swatchbook-type-micro);
|
|
1139
|
+
opacity: var(--swatchbook-opacity-muted);
|
|
1019
1140
|
}
|
|
1020
1141
|
|
|
1021
1142
|
.sb-shadow-preview__sample-cell {
|
|
@@ -1026,15 +1147,16 @@
|
|
|
1026
1147
|
}
|
|
1027
1148
|
|
|
1028
1149
|
.sb-shadow-preview__breakdown {
|
|
1029
|
-
grid-template-columns: auto 1fr;
|
|
1030
|
-
gap: 2px 12px;
|
|
1031
1150
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
1032
|
-
font-size:
|
|
1151
|
+
font-size: var(--swatchbook-type-micro);
|
|
1152
|
+
column-gap: var(--swatchbook-space-md);
|
|
1153
|
+
row-gap: var(--swatchbook-space-3xs);
|
|
1154
|
+
grid-template-columns: auto 1fr;
|
|
1033
1155
|
display: grid;
|
|
1034
1156
|
}
|
|
1035
1157
|
|
|
1036
1158
|
.sb-shadow-preview__breakdown-key {
|
|
1037
|
-
color: var(--swatchbook-text-muted
|
|
1159
|
+
color: var(--swatchbook-text-muted);
|
|
1038
1160
|
}
|
|
1039
1161
|
|
|
1040
1162
|
.sb-shadow-preview__layer {
|
|
@@ -1042,115 +1164,122 @@
|
|
|
1042
1164
|
}
|
|
1043
1165
|
|
|
1044
1166
|
.sb-shadow-preview__layer-header {
|
|
1167
|
+
font-size: var(--swatchbook-type-micro);
|
|
1045
1168
|
text-transform: uppercase;
|
|
1046
|
-
letter-spacing:
|
|
1047
|
-
color: var(--swatchbook-text-muted
|
|
1048
|
-
margin-top:
|
|
1049
|
-
font-size: 10px;
|
|
1169
|
+
letter-spacing: var(--swatchbook-tracking-label);
|
|
1170
|
+
color: var(--swatchbook-text-muted);
|
|
1171
|
+
margin-top: var(--swatchbook-space-xs);
|
|
1050
1172
|
}
|
|
1051
1173
|
|
|
1052
1174
|
.sb-shadow-preview__layer-breakdown {
|
|
1053
|
-
margin-top:
|
|
1175
|
+
margin-top: var(--swatchbook-space-3xs);
|
|
1176
|
+
}
|
|
1177
|
+
.sb-shadow-sample {
|
|
1178
|
+
background: var(--swatchbook-surface-raised);
|
|
1179
|
+
border: 1px solid var(--swatchbook-border-default);
|
|
1180
|
+
border-radius: 6px;
|
|
1181
|
+
width: 120px;
|
|
1182
|
+
height: 56px;
|
|
1054
1183
|
}
|
|
1055
1184
|
.sb-stroke-style-sample__row {
|
|
1056
|
-
|
|
1185
|
+
gap: var(--swatchbook-space-lg);
|
|
1186
|
+
padding: var(--swatchbook-space-lg) 0;
|
|
1187
|
+
border-bottom: 1px solid var(--swatchbook-border-default);
|
|
1057
1188
|
grid-template-columns: minmax(160px, 220px) 1fr auto;
|
|
1058
1189
|
align-items: center;
|
|
1059
|
-
gap: 16px;
|
|
1060
|
-
padding: 14px 0;
|
|
1061
1190
|
display: grid;
|
|
1062
1191
|
}
|
|
1063
1192
|
|
|
1064
1193
|
.sb-stroke-style-sample__meta {
|
|
1194
|
+
gap: var(--swatchbook-space-3xs);
|
|
1065
1195
|
flex-direction: column;
|
|
1066
|
-
gap: 2px;
|
|
1067
1196
|
min-width: 0;
|
|
1068
1197
|
display: flex;
|
|
1069
1198
|
}
|
|
1070
1199
|
|
|
1071
1200
|
.sb-stroke-style-sample__path {
|
|
1201
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
1202
|
+
font-size: var(--swatchbook-type-caption);
|
|
1072
1203
|
text-overflow: ellipsis;
|
|
1073
1204
|
white-space: nowrap;
|
|
1074
|
-
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
1075
|
-
font-size: 12px;
|
|
1076
1205
|
overflow: hidden;
|
|
1077
1206
|
}
|
|
1078
1207
|
|
|
1079
1208
|
.sb-stroke-style-sample__value {
|
|
1080
|
-
color: var(--swatchbook-text-muted, CanvasText);
|
|
1081
1209
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
1082
|
-
font-size:
|
|
1210
|
+
font-size: var(--swatchbook-type-micro);
|
|
1211
|
+
color: var(--swatchbook-text-muted);
|
|
1083
1212
|
}
|
|
1084
1213
|
|
|
1085
1214
|
.sb-stroke-style-sample__line {
|
|
1086
1215
|
border-top-width: 4px;
|
|
1087
|
-
border-top-color: var(--swatchbook-text-default
|
|
1216
|
+
border-top-color: var(--swatchbook-text-default);
|
|
1088
1217
|
width: 100%;
|
|
1089
1218
|
height: 0;
|
|
1090
1219
|
}
|
|
1091
1220
|
|
|
1092
1221
|
.sb-stroke-style-sample__object-fallback, .sb-stroke-style-sample__css-var {
|
|
1093
|
-
color: var(--swatchbook-text-muted, CanvasText);
|
|
1094
1222
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
1095
|
-
font-size:
|
|
1223
|
+
font-size: var(--swatchbook-type-micro);
|
|
1224
|
+
color: var(--swatchbook-text-muted);
|
|
1096
1225
|
}
|
|
1097
1226
|
.sb-token-detail {
|
|
1098
|
-
|
|
1099
|
-
|
|
1227
|
+
padding: var(--swatchbook-space-lg);
|
|
1228
|
+
border: 1px solid var(--swatchbook-border-default);
|
|
1100
1229
|
}
|
|
1101
1230
|
|
|
1102
1231
|
.sb-token-detail__heading {
|
|
1103
|
-
margin: 0;
|
|
1104
1232
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
1105
|
-
font-size:
|
|
1233
|
+
font-size: var(--swatchbook-type-heading);
|
|
1234
|
+
margin: 0;
|
|
1106
1235
|
}
|
|
1107
1236
|
|
|
1108
1237
|
.sb-token-detail__subline {
|
|
1109
|
-
opacity: .8;
|
|
1110
1238
|
align-items: center;
|
|
1111
|
-
gap:
|
|
1112
|
-
margin:
|
|
1113
|
-
font-size:
|
|
1239
|
+
gap: var(--swatchbook-space-sm);
|
|
1240
|
+
margin: var(--swatchbook-space-2xs) 0 var(--swatchbook-space-md);
|
|
1241
|
+
font-size: var(--swatchbook-type-caption);
|
|
1242
|
+
opacity: .8;
|
|
1114
1243
|
display: flex;
|
|
1115
1244
|
}
|
|
1116
1245
|
|
|
1117
1246
|
.sb-token-detail__type-pill {
|
|
1118
|
-
|
|
1247
|
+
padding: var(--swatchbook-space-3xs) var(--swatchbook-space-xs);
|
|
1248
|
+
border-radius: var(--swatchbook-radius-2xs);
|
|
1249
|
+
font-size: var(--swatchbook-type-micro);
|
|
1250
|
+
letter-spacing: var(--swatchbook-tracking-label);
|
|
1119
1251
|
text-transform: uppercase;
|
|
1120
|
-
background: var(--swatchbook-surface-muted
|
|
1121
|
-
border-radius: 4px;
|
|
1122
|
-
padding: 2px 6px;
|
|
1123
|
-
font-size: 10px;
|
|
1252
|
+
background: var(--swatchbook-surface-muted);
|
|
1124
1253
|
display: inline-block;
|
|
1125
1254
|
}
|
|
1126
1255
|
|
|
1127
1256
|
.sb-token-detail__description {
|
|
1257
|
+
margin: 0 0 var(--swatchbook-space-md);
|
|
1128
1258
|
opacity: .85;
|
|
1129
|
-
margin: 0 0 12px;
|
|
1130
1259
|
}
|
|
1131
1260
|
|
|
1132
1261
|
.sb-token-detail__section-header {
|
|
1133
|
-
text-transform: uppercase;
|
|
1134
|
-
letter-spacing: .5px;
|
|
1135
|
-
opacity: .6;
|
|
1136
|
-
margin: 12px 0 6px;
|
|
1137
1262
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
1138
|
-
font-size:
|
|
1263
|
+
font-size: var(--swatchbook-type-micro);
|
|
1264
|
+
text-transform: uppercase;
|
|
1265
|
+
letter-spacing: var(--swatchbook-tracking-label);
|
|
1266
|
+
opacity: var(--swatchbook-opacity-scrim);
|
|
1267
|
+
margin: var(--swatchbook-space-md) 0 var(--swatchbook-space-xs);
|
|
1139
1268
|
}
|
|
1140
1269
|
|
|
1141
1270
|
.sb-token-detail__chain {
|
|
1271
|
+
gap: var(--swatchbook-space-xs);
|
|
1272
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
1273
|
+
font-size: var(--swatchbook-type-caption);
|
|
1142
1274
|
flex-wrap: wrap;
|
|
1143
1275
|
align-items: center;
|
|
1144
|
-
gap: 6px;
|
|
1145
|
-
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
1146
|
-
font-size: 12px;
|
|
1147
1276
|
display: flex;
|
|
1148
1277
|
}
|
|
1149
1278
|
|
|
1150
1279
|
.sb-token-detail__chain-node {
|
|
1151
|
-
|
|
1152
|
-
border-radius:
|
|
1153
|
-
|
|
1280
|
+
padding: var(--swatchbook-space-3xs) var(--swatchbook-space-xs);
|
|
1281
|
+
border-radius: var(--swatchbook-radius-2xs);
|
|
1282
|
+
border: 1px solid var(--swatchbook-border-default);
|
|
1154
1283
|
}
|
|
1155
1284
|
|
|
1156
1285
|
.sb-token-detail__arrow {
|
|
@@ -1161,81 +1290,81 @@
|
|
|
1161
1290
|
border-collapse: collapse;
|
|
1162
1291
|
table-layout: fixed;
|
|
1163
1292
|
width: 100%;
|
|
1164
|
-
font-size:
|
|
1293
|
+
font-size: var(--swatchbook-type-caption);
|
|
1165
1294
|
}
|
|
1166
1295
|
|
|
1167
1296
|
.sb-token-detail__theme-row {
|
|
1168
|
-
border-bottom: 1px solid var(--swatchbook-border-default
|
|
1297
|
+
border-bottom: 1px solid var(--swatchbook-border-default);
|
|
1169
1298
|
}
|
|
1170
1299
|
|
|
1171
1300
|
.sb-token-detail__theme-cell {
|
|
1301
|
+
padding: var(--swatchbook-space-xs) var(--swatchbook-space-sm);
|
|
1172
1302
|
vertical-align: middle;
|
|
1173
|
-
padding: 6px 8px;
|
|
1174
1303
|
}
|
|
1175
1304
|
|
|
1176
1305
|
.sb-token-detail__swatch {
|
|
1177
1306
|
vertical-align: middle;
|
|
1178
|
-
border: 1px solid var(--swatchbook-border-default, #80808033);
|
|
1179
|
-
border-radius: 3px;
|
|
1180
1307
|
width: 14px;
|
|
1181
1308
|
height: 14px;
|
|
1182
|
-
margin-right:
|
|
1309
|
+
margin-right: var(--swatchbook-space-xs);
|
|
1310
|
+
border-radius: var(--swatchbook-radius-2xs);
|
|
1311
|
+
border: 1px solid var(--swatchbook-border-default);
|
|
1183
1312
|
display: inline-block;
|
|
1184
1313
|
}
|
|
1185
1314
|
|
|
1186
1315
|
.sb-token-detail__snippet {
|
|
1187
|
-
|
|
1316
|
+
padding: var(--swatchbook-space-sm) var(--swatchbook-space-md);
|
|
1317
|
+
border-radius: var(--swatchbook-radius-2xs);
|
|
1318
|
+
background: var(--swatchbook-surface-muted);
|
|
1319
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
1320
|
+
font-size: var(--swatchbook-type-caption);
|
|
1188
1321
|
white-space: pre;
|
|
1189
|
-
border-radius: 4px;
|
|
1190
1322
|
flex: 1;
|
|
1191
1323
|
min-width: 0;
|
|
1192
|
-
padding: 8px 10px;
|
|
1193
|
-
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
1194
|
-
font-size: 12px;
|
|
1195
1324
|
display: block;
|
|
1196
1325
|
overflow: auto;
|
|
1197
1326
|
}
|
|
1198
1327
|
|
|
1199
1328
|
.sb-token-detail__snippet-row {
|
|
1200
1329
|
align-items: center;
|
|
1201
|
-
gap:
|
|
1330
|
+
gap: var(--swatchbook-space-sm);
|
|
1202
1331
|
display: flex;
|
|
1203
1332
|
}
|
|
1204
1333
|
|
|
1205
1334
|
.sb-token-detail__missing {
|
|
1206
|
-
|
|
1207
|
-
|
|
1335
|
+
padding: var(--swatchbook-space-md);
|
|
1336
|
+
opacity: var(--swatchbook-opacity-muted);
|
|
1208
1337
|
}
|
|
1209
1338
|
|
|
1210
1339
|
.sb-token-detail__typography-sample {
|
|
1211
|
-
padding:
|
|
1340
|
+
padding: var(--swatchbook-space-sm) 0;
|
|
1212
1341
|
}
|
|
1213
1342
|
|
|
1214
1343
|
.sb-token-detail__shadow-sample {
|
|
1215
|
-
background: var(--swatchbook-surface-raised
|
|
1216
|
-
border: 1px solid var(--swatchbook-border-default
|
|
1217
|
-
border-radius:
|
|
1344
|
+
background: var(--swatchbook-surface-raised);
|
|
1345
|
+
border: 1px solid var(--swatchbook-border-default);
|
|
1346
|
+
border-radius: var(--swatchbook-radius-xs);
|
|
1218
1347
|
width: 140px;
|
|
1219
1348
|
height: 56px;
|
|
1220
1349
|
}
|
|
1221
1350
|
|
|
1222
1351
|
.sb-token-detail__border-sample {
|
|
1223
|
-
background: var(--swatchbook-surface-raised
|
|
1224
|
-
border-radius:
|
|
1352
|
+
background: var(--swatchbook-surface-raised);
|
|
1353
|
+
border-radius: var(--swatchbook-radius-xs);
|
|
1225
1354
|
width: 140px;
|
|
1226
1355
|
height: 56px;
|
|
1227
1356
|
}
|
|
1228
1357
|
|
|
1229
1358
|
.sb-token-detail__gradient-sample {
|
|
1230
|
-
border:
|
|
1231
|
-
border
|
|
1359
|
+
border-radius: var(--swatchbook-radius-xs);
|
|
1360
|
+
border: 1px solid var(--swatchbook-border-default);
|
|
1232
1361
|
width: 220px;
|
|
1233
1362
|
height: 56px;
|
|
1234
1363
|
}
|
|
1235
1364
|
|
|
1236
1365
|
.sb-token-detail__stroke-style-line {
|
|
1237
1366
|
border-top-width: 4px;
|
|
1238
|
-
border-top-color: var(--swatchbook-text-default
|
|
1367
|
+
border-top-color: var(--swatchbook-text-default);
|
|
1239
1368
|
width: 220px;
|
|
1240
1369
|
height: 0;
|
|
1241
1370
|
}
|
|
@@ -1243,19 +1372,19 @@
|
|
|
1243
1372
|
.sb-token-detail__stroke-style-svg {
|
|
1244
1373
|
width: 220px;
|
|
1245
1374
|
height: 24px;
|
|
1246
|
-
color: var(--swatchbook-text-default
|
|
1375
|
+
color: var(--swatchbook-text-default);
|
|
1247
1376
|
}
|
|
1248
1377
|
|
|
1249
1378
|
.sb-token-detail__stroke-style-fallback {
|
|
1250
|
-
color: var(--swatchbook-text-muted, CanvasText);
|
|
1251
1379
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
1252
|
-
font-size:
|
|
1380
|
+
font-size: var(--swatchbook-type-caption);
|
|
1381
|
+
color: var(--swatchbook-text-muted);
|
|
1253
1382
|
}
|
|
1254
1383
|
|
|
1255
1384
|
.sb-token-detail__color-swatch-row {
|
|
1256
|
-
|
|
1257
|
-
border-radius:
|
|
1258
|
-
|
|
1385
|
+
gap: var(--swatchbook-space-3xs);
|
|
1386
|
+
border-radius: var(--swatchbook-radius-xs);
|
|
1387
|
+
border: 1px solid var(--swatchbook-border-default);
|
|
1259
1388
|
width: 220px;
|
|
1260
1389
|
height: 56px;
|
|
1261
1390
|
display: flex;
|
|
@@ -1273,60 +1402,61 @@
|
|
|
1273
1402
|
}
|
|
1274
1403
|
|
|
1275
1404
|
.sb-token-detail__breakdown-section {
|
|
1276
|
-
grid-template-columns: auto 1fr;
|
|
1277
|
-
gap: 3px 12px;
|
|
1278
|
-
margin-top: 6px;
|
|
1279
1405
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
1280
|
-
font-size:
|
|
1406
|
+
font-size: var(--swatchbook-type-caption);
|
|
1407
|
+
column-gap: var(--swatchbook-space-md);
|
|
1408
|
+
row-gap: var(--swatchbook-space-2xs);
|
|
1409
|
+
margin-top: var(--swatchbook-space-xs);
|
|
1410
|
+
grid-template-columns: auto 1fr;
|
|
1281
1411
|
display: grid;
|
|
1282
1412
|
}
|
|
1283
1413
|
|
|
1284
1414
|
.sb-token-detail__breakdown-key {
|
|
1285
|
-
color: var(--swatchbook-text-muted
|
|
1415
|
+
color: var(--swatchbook-text-muted);
|
|
1286
1416
|
}
|
|
1287
1417
|
|
|
1288
1418
|
.sb-token-detail__breakdown-value {
|
|
1289
|
-
flex-direction: column;
|
|
1290
1419
|
align-items: flex-start;
|
|
1291
|
-
gap:
|
|
1420
|
+
gap: var(--swatchbook-space-2xs);
|
|
1421
|
+
flex-direction: column;
|
|
1292
1422
|
min-width: 0;
|
|
1293
1423
|
display: flex;
|
|
1294
1424
|
}
|
|
1295
1425
|
|
|
1296
1426
|
.sb-token-detail__breakdown-alias {
|
|
1427
|
+
align-items: center;
|
|
1428
|
+
gap: var(--swatchbook-space-2xs);
|
|
1429
|
+
font-size: var(--swatchbook-type-micro);
|
|
1297
1430
|
opacity: .8;
|
|
1298
1431
|
flex-wrap: wrap;
|
|
1299
|
-
align-items: center;
|
|
1300
|
-
gap: 4px;
|
|
1301
|
-
font-size: 11px;
|
|
1302
1432
|
display: flex;
|
|
1303
1433
|
}
|
|
1304
1434
|
|
|
1305
1435
|
.sb-token-detail__breakdown-alias-step {
|
|
1306
1436
|
align-items: center;
|
|
1307
|
-
gap:
|
|
1437
|
+
gap: var(--swatchbook-space-2xs);
|
|
1308
1438
|
display: inline-flex;
|
|
1309
1439
|
}
|
|
1310
1440
|
|
|
1311
1441
|
.sb-token-detail__breakdown-layer-header {
|
|
1442
|
+
font-size: var(--swatchbook-type-micro);
|
|
1312
1443
|
text-transform: uppercase;
|
|
1313
|
-
letter-spacing:
|
|
1314
|
-
color: var(--swatchbook-text-muted
|
|
1444
|
+
letter-spacing: var(--swatchbook-tracking-label);
|
|
1445
|
+
color: var(--swatchbook-text-muted);
|
|
1446
|
+
margin-top: var(--swatchbook-space-2xs);
|
|
1315
1447
|
grid-column: 1 / -1;
|
|
1316
|
-
margin-top: 4px;
|
|
1317
|
-
font-size: 10px;
|
|
1318
1448
|
}
|
|
1319
1449
|
|
|
1320
1450
|
.sb-token-detail__font-family-sample {
|
|
1321
|
-
padding:
|
|
1322
|
-
font-size:
|
|
1323
|
-
line-height:
|
|
1451
|
+
padding: var(--swatchbook-space-2xs) 0;
|
|
1452
|
+
font-size: var(--swatchbook-type-sample);
|
|
1453
|
+
line-height: var(--swatchbook-leading-tight);
|
|
1324
1454
|
}
|
|
1325
1455
|
|
|
1326
1456
|
.sb-token-detail__font-weight-sample {
|
|
1327
|
-
padding:
|
|
1328
|
-
font-size:
|
|
1329
|
-
line-height:
|
|
1457
|
+
padding: var(--swatchbook-space-2xs) 0;
|
|
1458
|
+
font-size: var(--swatchbook-type-sample-xl);
|
|
1459
|
+
line-height: var(--swatchbook-leading-none);
|
|
1330
1460
|
}
|
|
1331
1461
|
|
|
1332
1462
|
.sb-token-detail__dimension-track {
|
|
@@ -1338,15 +1468,15 @@
|
|
|
1338
1468
|
}
|
|
1339
1469
|
|
|
1340
1470
|
.sb-token-detail__dimension-bar {
|
|
1341
|
-
background: var(--swatchbook-accent-bg
|
|
1342
|
-
border-radius:
|
|
1471
|
+
background: var(--swatchbook-accent-bg);
|
|
1472
|
+
border-radius: var(--swatchbook-radius-2xs);
|
|
1343
1473
|
max-width: 100%;
|
|
1344
1474
|
height: 16px;
|
|
1345
1475
|
}
|
|
1346
1476
|
|
|
1347
1477
|
.sb-token-detail__motion-track {
|
|
1348
|
-
background: var(--swatchbook-surface-muted
|
|
1349
|
-
border-radius:
|
|
1478
|
+
background: var(--swatchbook-surface-muted);
|
|
1479
|
+
border-radius: var(--swatchbook-radius-lg);
|
|
1350
1480
|
width: 100%;
|
|
1351
1481
|
max-width: 320px;
|
|
1352
1482
|
height: 32px;
|
|
@@ -1355,7 +1485,7 @@
|
|
|
1355
1485
|
}
|
|
1356
1486
|
|
|
1357
1487
|
.sb-token-detail__motion-ball {
|
|
1358
|
-
background: var(--swatchbook-accent-bg
|
|
1488
|
+
background: var(--swatchbook-accent-bg);
|
|
1359
1489
|
border-radius: 50%;
|
|
1360
1490
|
width: 24px;
|
|
1361
1491
|
height: 24px;
|
|
@@ -1364,115 +1494,149 @@
|
|
|
1364
1494
|
top: 50%;
|
|
1365
1495
|
}
|
|
1366
1496
|
|
|
1497
|
+
.sb-token-detail__motion-ball--start {
|
|
1498
|
+
left: 4px;
|
|
1499
|
+
}
|
|
1500
|
+
|
|
1501
|
+
.sb-token-detail__motion-ball--end {
|
|
1502
|
+
left: calc(100% - 28px);
|
|
1503
|
+
}
|
|
1504
|
+
|
|
1367
1505
|
.sb-token-detail__aliased-by-list {
|
|
1506
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
1507
|
+
font-size: var(--swatchbook-type-caption);
|
|
1368
1508
|
margin: 0;
|
|
1369
1509
|
padding: 0;
|
|
1370
|
-
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
1371
|
-
font-size: 12px;
|
|
1372
1510
|
list-style: none;
|
|
1373
1511
|
}
|
|
1374
1512
|
|
|
1375
1513
|
.sb-token-detail__aliased-by-row {
|
|
1514
|
+
padding: var(--swatchbook-space-3xs) 0;
|
|
1376
1515
|
align-items: center;
|
|
1377
|
-
gap:
|
|
1378
|
-
padding: 2px 0;
|
|
1516
|
+
gap: var(--swatchbook-space-xs);
|
|
1379
1517
|
display: flex;
|
|
1380
1518
|
}
|
|
1381
1519
|
|
|
1382
1520
|
.sb-token-detail__aliased-by-truncated {
|
|
1383
|
-
|
|
1384
|
-
|
|
1385
|
-
|
|
1521
|
+
font-size: var(--swatchbook-type-micro);
|
|
1522
|
+
opacity: var(--swatchbook-opacity-scrim);
|
|
1523
|
+
margin-top: var(--swatchbook-space-2xs);
|
|
1386
1524
|
font-style: italic;
|
|
1387
1525
|
}
|
|
1388
1526
|
|
|
1527
|
+
.sb-token-detail__aliased-by-truncated--axis-note {
|
|
1528
|
+
margin-top: var(--swatchbook-space-xs);
|
|
1529
|
+
}
|
|
1530
|
+
|
|
1389
1531
|
.sb-token-detail__reduced-motion {
|
|
1390
|
-
|
|
1391
|
-
|
|
1532
|
+
font-size: var(--swatchbook-type-micro);
|
|
1533
|
+
color: var(--swatchbook-text-muted);
|
|
1392
1534
|
font-style: italic;
|
|
1393
1535
|
}
|
|
1394
1536
|
|
|
1395
1537
|
.sb-token-detail__tuple-indicator {
|
|
1396
|
-
|
|
1397
|
-
|
|
1538
|
+
font-size: var(--swatchbook-type-micro);
|
|
1539
|
+
opacity: var(--swatchbook-opacity-muted);
|
|
1540
|
+
margin: 0 0 var(--swatchbook-space-xs);
|
|
1398
1541
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
1399
|
-
font-size: 11px;
|
|
1400
1542
|
}
|
|
1401
1543
|
|
|
1402
1544
|
.sb-token-detail__consumer-row {
|
|
1403
|
-
background: var(--swatchbook-surface-muted, #80808026);
|
|
1404
|
-
border-radius: 4px;
|
|
1405
1545
|
align-items: center;
|
|
1406
|
-
gap:
|
|
1407
|
-
|
|
1408
|
-
|
|
1546
|
+
gap: var(--swatchbook-space-sm);
|
|
1547
|
+
padding: var(--swatchbook-space-xs) var(--swatchbook-space-md);
|
|
1548
|
+
margin-bottom: var(--swatchbook-space-2xs);
|
|
1549
|
+
border-radius: var(--swatchbook-radius-2xs);
|
|
1550
|
+
background: var(--swatchbook-surface-muted);
|
|
1409
1551
|
display: flex;
|
|
1410
1552
|
}
|
|
1411
1553
|
|
|
1412
1554
|
.sb-token-detail__consumer-row-label {
|
|
1555
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
1556
|
+
font-size: var(--swatchbook-type-micro);
|
|
1413
1557
|
text-transform: uppercase;
|
|
1414
|
-
letter-spacing:
|
|
1415
|
-
opacity:
|
|
1558
|
+
letter-spacing: var(--swatchbook-tracking-label);
|
|
1559
|
+
opacity: var(--swatchbook-opacity-scrim);
|
|
1416
1560
|
flex-shrink: 0;
|
|
1417
1561
|
min-width: 32px;
|
|
1418
|
-
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
1419
|
-
font-size: 10px;
|
|
1420
1562
|
}
|
|
1421
1563
|
|
|
1422
1564
|
.sb-token-detail__consumer-row-value {
|
|
1565
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
1566
|
+
font-size: var(--swatchbook-type-caption);
|
|
1423
1567
|
white-space: nowrap;
|
|
1424
1568
|
flex: 1;
|
|
1425
|
-
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
1426
|
-
font-size: 12px;
|
|
1427
1569
|
overflow: auto;
|
|
1428
1570
|
}
|
|
1429
1571
|
|
|
1430
1572
|
.sb-token-detail__consumer-row-copy {
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1573
|
+
padding: var(--swatchbook-space-2xs) var(--swatchbook-space-sm);
|
|
1574
|
+
font-size: var(--swatchbook-type-micro);
|
|
1575
|
+
background: var(--swatchbook-surface-raised);
|
|
1576
|
+
color: var(--swatchbook-text-default);
|
|
1577
|
+
border: 1px solid var(--swatchbook-border-default);
|
|
1578
|
+
border-radius: var(--swatchbook-radius-2xs);
|
|
1434
1579
|
cursor: pointer;
|
|
1435
|
-
border-radius: 4px;
|
|
1436
1580
|
flex-shrink: 0;
|
|
1437
|
-
padding: 3px 8px;
|
|
1438
1581
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
1439
|
-
font-size: 11px;
|
|
1440
1582
|
}
|
|
1441
1583
|
|
|
1442
1584
|
.sb-token-detail__deprecated {
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
border-radius:
|
|
1446
|
-
|
|
1447
|
-
|
|
1448
|
-
|
|
1585
|
+
margin: var(--swatchbook-space-xs) 0;
|
|
1586
|
+
padding: var(--swatchbook-space-xs) var(--swatchbook-space-md);
|
|
1587
|
+
border-radius: var(--swatchbook-radius-xs);
|
|
1588
|
+
font-size: var(--swatchbook-type-caption);
|
|
1589
|
+
color: var(--swatchbook-text-muted);
|
|
1590
|
+
background: var(--swatchbook-deprecated-bg);
|
|
1591
|
+
}
|
|
1592
|
+
|
|
1593
|
+
.sb-token-detail__out-of-gamut-icon {
|
|
1594
|
+
margin-left: var(--swatchbook-space-xs);
|
|
1595
|
+
}
|
|
1596
|
+
|
|
1597
|
+
.sb-token-detail__theme-cell--label {
|
|
1598
|
+
width: 30%;
|
|
1599
|
+
}
|
|
1600
|
+
|
|
1601
|
+
.sb-token-detail__theme-cell--header {
|
|
1602
|
+
text-align: left;
|
|
1603
|
+
opacity: var(--swatchbook-opacity-muted);
|
|
1604
|
+
}
|
|
1605
|
+
|
|
1606
|
+
.sb-token-detail__constant-label-note {
|
|
1607
|
+
opacity: var(--swatchbook-opacity-scrim);
|
|
1608
|
+
margin-left: var(--swatchbook-space-sm);
|
|
1609
|
+
}
|
|
1610
|
+
|
|
1611
|
+
.sb-token-detail__shadow-layer {
|
|
1612
|
+
display: contents;
|
|
1449
1613
|
}
|
|
1450
1614
|
.sb-token-navigator__search {
|
|
1451
|
-
padding: 0 0
|
|
1615
|
+
padding: 0 0 var(--swatchbook-space-sm);
|
|
1452
1616
|
}
|
|
1453
1617
|
|
|
1454
1618
|
.sb-token-navigator__search-input {
|
|
1455
|
-
border: 1px solid var(--swatchbook-border-default, #8080804d);
|
|
1456
|
-
background: var(--swatchbook-surface-default, Canvas);
|
|
1457
1619
|
width: 100%;
|
|
1458
1620
|
max-width: 360px;
|
|
1459
|
-
|
|
1460
|
-
border-radius:
|
|
1461
|
-
|
|
1621
|
+
padding: var(--swatchbook-space-xs) var(--swatchbook-space-md);
|
|
1622
|
+
border-radius: var(--swatchbook-radius-2xs);
|
|
1623
|
+
border: 1px solid var(--swatchbook-border-default);
|
|
1624
|
+
background: var(--swatchbook-surface-default);
|
|
1625
|
+
color: var(--swatchbook-text-default);
|
|
1462
1626
|
font-family: inherit;
|
|
1463
|
-
font-size:
|
|
1464
|
-
line-height:
|
|
1627
|
+
font-size: var(--swatchbook-type-caption);
|
|
1628
|
+
line-height: var(--swatchbook-leading-normal);
|
|
1465
1629
|
}
|
|
1466
1630
|
|
|
1467
1631
|
.sb-token-navigator__search-input:focus-visible {
|
|
1468
|
-
outline: 2px solid var(--swatchbook-accent-bg
|
|
1632
|
+
outline: 2px solid var(--swatchbook-accent-bg);
|
|
1469
1633
|
outline-offset: 1px;
|
|
1470
1634
|
}
|
|
1471
1635
|
|
|
1472
1636
|
.sb-token-navigator__caption {
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
font-size:
|
|
1637
|
+
padding: var(--swatchbook-space-2xs) 0 var(--swatchbook-space-md);
|
|
1638
|
+
color: var(--swatchbook-text-muted);
|
|
1639
|
+
font-size: var(--swatchbook-type-caption);
|
|
1476
1640
|
}
|
|
1477
1641
|
|
|
1478
1642
|
.sb-token-navigator__tree {
|
|
@@ -1482,85 +1646,85 @@
|
|
|
1482
1646
|
}
|
|
1483
1647
|
|
|
1484
1648
|
.sb-token-navigator__nested {
|
|
1485
|
-
|
|
1649
|
+
padding-left: var(--swatchbook-space-lg);
|
|
1650
|
+
border-left: 1px solid var(--swatchbook-border-default);
|
|
1486
1651
|
margin: 0;
|
|
1487
|
-
padding-left: 18px;
|
|
1488
1652
|
list-style: none;
|
|
1489
1653
|
}
|
|
1490
1654
|
|
|
1491
1655
|
.sb-token-navigator__group-row {
|
|
1656
|
+
align-items: center;
|
|
1657
|
+
gap: var(--swatchbook-space-xs);
|
|
1658
|
+
padding: var(--swatchbook-space-2xs) var(--swatchbook-space-xs);
|
|
1659
|
+
border-radius: var(--swatchbook-radius-2xs);
|
|
1492
1660
|
cursor: pointer;
|
|
1493
1661
|
user-select: none;
|
|
1494
|
-
border-radius: 4px;
|
|
1495
|
-
align-items: center;
|
|
1496
|
-
gap: 6px;
|
|
1497
|
-
padding: 4px 6px;
|
|
1498
1662
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
1499
|
-
font-size:
|
|
1663
|
+
font-size: var(--swatchbook-type-caption);
|
|
1500
1664
|
display: flex;
|
|
1501
1665
|
}
|
|
1502
1666
|
|
|
1503
1667
|
.sb-token-navigator__tree li[role="treeitem"]:focus-visible, .sb-token-navigator__nested li[role="treeitem"]:focus-visible {
|
|
1504
|
-
outline: 2px solid var(--swatchbook-accent-bg
|
|
1668
|
+
outline: 2px solid var(--swatchbook-accent-bg);
|
|
1505
1669
|
outline-offset: 1px;
|
|
1506
1670
|
}
|
|
1507
1671
|
|
|
1508
1672
|
.sb-token-navigator__leaf-row {
|
|
1509
|
-
cursor: pointer;
|
|
1510
|
-
border-radius: 4px;
|
|
1511
1673
|
align-items: center;
|
|
1512
|
-
gap:
|
|
1513
|
-
padding:
|
|
1674
|
+
gap: var(--swatchbook-space-sm);
|
|
1675
|
+
padding: var(--swatchbook-space-2xs) var(--swatchbook-space-xs);
|
|
1676
|
+
border-radius: var(--swatchbook-radius-2xs);
|
|
1677
|
+
cursor: pointer;
|
|
1514
1678
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
1515
|
-
font-size:
|
|
1679
|
+
font-size: var(--swatchbook-type-caption);
|
|
1516
1680
|
display: flex;
|
|
1517
1681
|
}
|
|
1518
1682
|
|
|
1519
1683
|
.sb-token-navigator__caret {
|
|
1520
1684
|
text-align: center;
|
|
1521
1685
|
width: 12px;
|
|
1522
|
-
color: var(--swatchbook-text-muted
|
|
1686
|
+
color: var(--swatchbook-text-muted);
|
|
1523
1687
|
display: inline-block;
|
|
1524
1688
|
}
|
|
1525
1689
|
|
|
1526
1690
|
.sb-token-navigator__tail {
|
|
1527
1691
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
1528
|
-
font-size:
|
|
1692
|
+
font-size: var(--swatchbook-type-caption);
|
|
1529
1693
|
}
|
|
1530
1694
|
|
|
1531
1695
|
.sb-token-navigator__type-pill {
|
|
1532
|
-
|
|
1696
|
+
padding: var(--swatchbook-space-3xs) var(--swatchbook-space-xs);
|
|
1697
|
+
border-radius: var(--swatchbook-radius-2xs);
|
|
1698
|
+
font-size: var(--swatchbook-type-micro);
|
|
1699
|
+
letter-spacing: var(--swatchbook-tracking-label);
|
|
1533
1700
|
text-transform: uppercase;
|
|
1534
|
-
background: var(--swatchbook-surface-muted
|
|
1535
|
-
border-radius: 4px;
|
|
1536
|
-
padding: 1px 6px;
|
|
1537
|
-
font-size: 10px;
|
|
1701
|
+
background: var(--swatchbook-surface-muted);
|
|
1538
1702
|
display: inline-block;
|
|
1539
1703
|
}
|
|
1540
1704
|
|
|
1541
1705
|
.sb-token-navigator__value {
|
|
1542
|
-
|
|
1706
|
+
font-size: var(--swatchbook-type-micro);
|
|
1707
|
+
color: var(--swatchbook-text-muted);
|
|
1543
1708
|
text-align: right;
|
|
1544
1709
|
text-overflow: ellipsis;
|
|
1545
1710
|
white-space: nowrap;
|
|
1546
1711
|
min-width: 0;
|
|
1547
1712
|
margin-left: auto;
|
|
1548
|
-
font-size: 11px;
|
|
1549
1713
|
overflow: hidden;
|
|
1550
1714
|
}
|
|
1551
1715
|
|
|
1552
1716
|
.sb-token-navigator__count {
|
|
1553
|
-
|
|
1717
|
+
font-size: var(--swatchbook-type-micro);
|
|
1718
|
+
color: var(--swatchbook-text-default);
|
|
1554
1719
|
margin-left: auto;
|
|
1555
|
-
font-size: 11px;
|
|
1556
1720
|
}
|
|
1557
1721
|
|
|
1558
1722
|
.sb-token-navigator__color-swatch {
|
|
1559
|
-
border:
|
|
1560
|
-
border
|
|
1723
|
+
border-radius: var(--swatchbook-radius-2xs);
|
|
1724
|
+
border: 1px solid var(--swatchbook-border-default);
|
|
1561
1725
|
width: 14px;
|
|
1562
1726
|
height: 14px;
|
|
1563
|
-
margin-left:
|
|
1727
|
+
margin-left: var(--swatchbook-space-sm);
|
|
1564
1728
|
display: inline-block;
|
|
1565
1729
|
}
|
|
1566
1730
|
|
|
@@ -1572,22 +1736,22 @@
|
|
|
1572
1736
|
}
|
|
1573
1737
|
|
|
1574
1738
|
.sb-token-navigator__preview-dimension {
|
|
1739
|
+
margin-left: var(--swatchbook-space-sm);
|
|
1575
1740
|
min-width: 40px;
|
|
1576
1741
|
max-width: 120px;
|
|
1577
|
-
margin-left: 8px;
|
|
1578
1742
|
display: inline-block;
|
|
1579
1743
|
}
|
|
1580
1744
|
|
|
1581
1745
|
.sb-token-navigator__preview-scaled {
|
|
1746
|
+
margin-left: var(--swatchbook-space-sm);
|
|
1582
1747
|
transform-origin: 100%;
|
|
1583
|
-
margin-left: 8px;
|
|
1584
1748
|
display: inline-block;
|
|
1585
1749
|
transform: scale(.5);
|
|
1586
1750
|
}
|
|
1587
1751
|
|
|
1588
1752
|
.sb-token-navigator__preview-motion {
|
|
1753
|
+
margin-left: var(--swatchbook-space-sm);
|
|
1589
1754
|
width: 80px;
|
|
1590
|
-
margin-left: 8px;
|
|
1591
1755
|
display: inline-block;
|
|
1592
1756
|
}
|
|
1593
1757
|
|
|
@@ -1604,8 +1768,9 @@
|
|
|
1604
1768
|
}
|
|
1605
1769
|
|
|
1606
1770
|
.sb-token-navigator__leaf-row[data-deprecated="true"] .sb-token-navigator__tail {
|
|
1771
|
+
text-decoration: line-through;
|
|
1772
|
+
text-decoration-color: var(--swatchbook-deprecated);
|
|
1607
1773
|
opacity: .75;
|
|
1608
|
-
text-decoration: line-through light-dark(#92400e, #fbbf24);
|
|
1609
1774
|
}
|
|
1610
1775
|
.sb-detail-overlay__backdrop {
|
|
1611
1776
|
z-index: 10000;
|
|
@@ -1618,29 +1783,29 @@
|
|
|
1618
1783
|
}
|
|
1619
1784
|
|
|
1620
1785
|
.sb-detail-overlay__panel {
|
|
1621
|
-
background: var(--swatchbook-surface-default
|
|
1786
|
+
background: var(--swatchbook-surface-default);
|
|
1622
1787
|
width: min(560px, 100%);
|
|
1623
1788
|
height: 100%;
|
|
1624
|
-
color: var(--swatchbook-text-default
|
|
1625
|
-
padding:
|
|
1789
|
+
color: var(--swatchbook-text-default);
|
|
1790
|
+
padding: var(--swatchbook-space-lg);
|
|
1626
1791
|
position: relative;
|
|
1627
1792
|
overflow-y: auto;
|
|
1628
1793
|
box-shadow: -8px 0 24px #0003;
|
|
1629
1794
|
}
|
|
1630
1795
|
|
|
1631
1796
|
.sb-detail-overlay__close {
|
|
1632
|
-
|
|
1797
|
+
top: var(--swatchbook-space-lg);
|
|
1798
|
+
right: var(--swatchbook-space-lg);
|
|
1799
|
+
border-radius: var(--swatchbook-radius-2xs);
|
|
1800
|
+
border: 1px solid var(--swatchbook-border-default);
|
|
1633
1801
|
width: 32px;
|
|
1634
1802
|
height: 32px;
|
|
1635
1803
|
color: inherit;
|
|
1636
1804
|
cursor: pointer;
|
|
1805
|
+
font-size: var(--swatchbook-type-heading);
|
|
1806
|
+
line-height: var(--swatchbook-leading-none);
|
|
1637
1807
|
background: none;
|
|
1638
|
-
border-radius: 4px;
|
|
1639
|
-
font-size: 16px;
|
|
1640
|
-
line-height: 1;
|
|
1641
1808
|
position: absolute;
|
|
1642
|
-
top: 16px;
|
|
1643
|
-
right: 16px;
|
|
1644
1809
|
}
|
|
1645
1810
|
.sb-token-table__table {
|
|
1646
1811
|
border-collapse: collapse;
|
|
@@ -1648,50 +1813,50 @@
|
|
|
1648
1813
|
}
|
|
1649
1814
|
|
|
1650
1815
|
.sb-token-table__search {
|
|
1651
|
-
padding: 0 0
|
|
1816
|
+
padding: 0 0 var(--swatchbook-space-sm);
|
|
1652
1817
|
}
|
|
1653
1818
|
|
|
1654
1819
|
.sb-token-table__search-input {
|
|
1655
|
-
border: 1px solid var(--swatchbook-border-default, #8080804d);
|
|
1656
|
-
background: var(--swatchbook-surface-default, Canvas);
|
|
1657
1820
|
width: 100%;
|
|
1658
1821
|
max-width: 360px;
|
|
1659
|
-
|
|
1660
|
-
border-radius:
|
|
1661
|
-
|
|
1822
|
+
padding: var(--swatchbook-space-xs) var(--swatchbook-space-md);
|
|
1823
|
+
border-radius: var(--swatchbook-radius-2xs);
|
|
1824
|
+
border: 1px solid var(--swatchbook-border-default);
|
|
1825
|
+
background: var(--swatchbook-surface-default);
|
|
1826
|
+
color: var(--swatchbook-text-default);
|
|
1662
1827
|
font-family: inherit;
|
|
1663
|
-
font-size:
|
|
1664
|
-
line-height:
|
|
1828
|
+
font-size: var(--swatchbook-type-caption);
|
|
1829
|
+
line-height: var(--swatchbook-leading-normal);
|
|
1665
1830
|
}
|
|
1666
1831
|
|
|
1667
1832
|
.sb-token-table__search-input:focus-visible {
|
|
1668
|
-
outline: 2px solid var(--swatchbook-accent-bg
|
|
1833
|
+
outline: 2px solid var(--swatchbook-accent-bg);
|
|
1669
1834
|
outline-offset: 1px;
|
|
1670
1835
|
}
|
|
1671
1836
|
|
|
1672
1837
|
.sb-token-table__empty-row {
|
|
1673
|
-
color: var(--swatchbook-text-muted
|
|
1838
|
+
color: var(--swatchbook-text-muted);
|
|
1674
1839
|
text-align: center;
|
|
1675
|
-
padding:
|
|
1840
|
+
padding: var(--swatchbook-space-lg) var(--swatchbook-space-md);
|
|
1676
1841
|
font-style: italic;
|
|
1677
1842
|
}
|
|
1678
1843
|
|
|
1679
1844
|
.sb-token-table__caption {
|
|
1680
1845
|
caption-side: top;
|
|
1681
1846
|
text-align: left;
|
|
1682
|
-
|
|
1683
|
-
|
|
1684
|
-
font-size:
|
|
1847
|
+
padding: var(--swatchbook-space-sm) 0;
|
|
1848
|
+
color: var(--swatchbook-text-muted);
|
|
1849
|
+
font-size: var(--swatchbook-type-caption);
|
|
1685
1850
|
}
|
|
1686
1851
|
|
|
1687
1852
|
.sb-token-table__th {
|
|
1688
1853
|
text-align: left;
|
|
1854
|
+
padding: var(--swatchbook-space-sm) var(--swatchbook-space-md);
|
|
1855
|
+
font-size: var(--swatchbook-type-micro);
|
|
1689
1856
|
text-transform: uppercase;
|
|
1690
|
-
letter-spacing:
|
|
1691
|
-
color: var(--swatchbook-text-muted
|
|
1692
|
-
border-bottom: 1px solid var(--swatchbook-border-default
|
|
1693
|
-
padding: 8px 12px;
|
|
1694
|
-
font-size: 11px;
|
|
1857
|
+
letter-spacing: var(--swatchbook-tracking-label);
|
|
1858
|
+
color: var(--swatchbook-text-muted);
|
|
1859
|
+
border-bottom: 1px solid var(--swatchbook-border-default);
|
|
1695
1860
|
}
|
|
1696
1861
|
|
|
1697
1862
|
.sb-token-table__th--path {
|
|
@@ -1707,47 +1872,47 @@
|
|
|
1707
1872
|
}
|
|
1708
1873
|
|
|
1709
1874
|
.sb-token-table__row:focus-visible {
|
|
1710
|
-
outline: 2px solid var(--swatchbook-accent-bg
|
|
1875
|
+
outline: 2px solid var(--swatchbook-accent-bg);
|
|
1711
1876
|
outline-offset: -2px;
|
|
1712
1877
|
}
|
|
1713
1878
|
|
|
1714
1879
|
.sb-token-table__td {
|
|
1715
|
-
|
|
1880
|
+
padding: var(--swatchbook-space-sm) var(--swatchbook-space-md);
|
|
1881
|
+
border-bottom: 1px solid var(--swatchbook-border-default);
|
|
1716
1882
|
vertical-align: top;
|
|
1717
|
-
padding: 8px 12px;
|
|
1718
1883
|
}
|
|
1719
1884
|
|
|
1720
1885
|
.sb-token-table__path {
|
|
1721
|
-
overflow-wrap: break-word;
|
|
1722
1886
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
1723
|
-
font-size:
|
|
1887
|
+
font-size: var(--swatchbook-type-caption);
|
|
1888
|
+
overflow-wrap: break-word;
|
|
1724
1889
|
}
|
|
1725
1890
|
|
|
1726
1891
|
.sb-token-table__value-cell {
|
|
1727
1892
|
align-items: center;
|
|
1728
|
-
gap:
|
|
1893
|
+
gap: var(--swatchbook-space-sm);
|
|
1729
1894
|
min-width: 0;
|
|
1730
1895
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
1731
|
-
font-size:
|
|
1896
|
+
font-size: var(--swatchbook-type-caption);
|
|
1732
1897
|
display: flex;
|
|
1733
1898
|
}
|
|
1734
1899
|
|
|
1735
1900
|
.sb-token-table__type-pill {
|
|
1736
|
-
|
|
1901
|
+
padding: var(--swatchbook-space-3xs) var(--swatchbook-space-xs);
|
|
1902
|
+
border-radius: var(--swatchbook-radius-2xs);
|
|
1903
|
+
font-size: var(--swatchbook-type-micro);
|
|
1904
|
+
letter-spacing: var(--swatchbook-tracking-label);
|
|
1737
1905
|
text-transform: uppercase;
|
|
1738
|
-
background: var(--swatchbook-surface-muted
|
|
1739
|
-
color: var(--swatchbook-text-muted
|
|
1740
|
-
border-radius: 4px;
|
|
1906
|
+
background: var(--swatchbook-surface-muted);
|
|
1907
|
+
color: var(--swatchbook-text-muted);
|
|
1741
1908
|
flex-shrink: 0;
|
|
1742
|
-
padding: 1px 6px;
|
|
1743
1909
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
1744
|
-
font-size: 10px;
|
|
1745
1910
|
display: inline-block;
|
|
1746
1911
|
}
|
|
1747
1912
|
|
|
1748
1913
|
.sb-token-table__swatch {
|
|
1749
|
-
border:
|
|
1750
|
-
border
|
|
1914
|
+
border-radius: var(--swatchbook-radius-2xs);
|
|
1915
|
+
border: 1px solid var(--swatchbook-border-default);
|
|
1751
1916
|
flex-shrink: 0;
|
|
1752
1917
|
width: 16px;
|
|
1753
1918
|
height: 16px;
|
|
@@ -1777,8 +1942,9 @@
|
|
|
1777
1942
|
}
|
|
1778
1943
|
|
|
1779
1944
|
.sb-token-table__path[data-deprecated="true"] {
|
|
1945
|
+
text-decoration: line-through;
|
|
1946
|
+
text-decoration-color: var(--swatchbook-deprecated);
|
|
1780
1947
|
opacity: .75;
|
|
1781
|
-
text-decoration: line-through light-dark(#92400e, #fbbf24);
|
|
1782
1948
|
}
|
|
1783
1949
|
|
|
1784
1950
|
.sb-token-table__refs {
|
|
@@ -1797,27 +1963,27 @@
|
|
|
1797
1963
|
overflow: hidden;
|
|
1798
1964
|
}
|
|
1799
1965
|
.sb-typography-scale__row {
|
|
1800
|
-
|
|
1966
|
+
gap: var(--swatchbook-space-lg);
|
|
1967
|
+
padding: var(--swatchbook-space-lg) 0;
|
|
1968
|
+
border-bottom: 1px solid var(--swatchbook-border-default);
|
|
1801
1969
|
grid-template-columns: minmax(160px, 220px) 1fr;
|
|
1802
1970
|
align-items: baseline;
|
|
1803
|
-
gap: 16px;
|
|
1804
|
-
padding: 14px 0;
|
|
1805
1971
|
display: grid;
|
|
1806
1972
|
}
|
|
1807
1973
|
|
|
1808
1974
|
.sb-typography-scale__meta {
|
|
1975
|
+
gap: var(--swatchbook-space-3xs);
|
|
1809
1976
|
flex-direction: column;
|
|
1810
|
-
gap: 2px;
|
|
1811
1977
|
display: flex;
|
|
1812
1978
|
}
|
|
1813
1979
|
|
|
1814
1980
|
.sb-typography-scale__path {
|
|
1815
1981
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
1816
|
-
font-size:
|
|
1982
|
+
font-size: var(--swatchbook-type-caption);
|
|
1817
1983
|
}
|
|
1818
1984
|
|
|
1819
1985
|
.sb-typography-scale__specs {
|
|
1820
|
-
opacity: .7;
|
|
1821
1986
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
1822
|
-
font-size:
|
|
1987
|
+
font-size: var(--swatchbook-type-micro);
|
|
1988
|
+
opacity: var(--swatchbook-opacity-muted);
|
|
1823
1989
|
}
|