@usefidel/design-system 0.19.0 → 0.20.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/dist/admin.css +14 -0
- package/dist/extension.css +14 -0
- package/dist/fidel.manifest.json +2 -2
- package/dist/index.cjs +1 -1
- package/dist/index.css +259 -251
- package/dist/index.d.cts +4 -4
- package/dist/index.d.ts +4 -4
- package/dist/index.js +1 -1
- package/dist/landing.css +14 -0
- package/dist/theme.css +14 -0
- package/dist/webapp.css +14 -0
- package/package.json +1 -1
- package/tokens/tokens.json +58 -0
package/dist/index.css
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
justify-content: center;
|
|
6
6
|
gap: var(--spacing-2, 8px);
|
|
7
7
|
border: 1px solid transparent;
|
|
8
|
-
border-radius: var(--radius-sm,
|
|
8
|
+
border-radius: var(--radius-sm, 4px);
|
|
9
9
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
10
10
|
font-weight: var(--font-weight-medium, 500);
|
|
11
11
|
white-space: nowrap;
|
|
@@ -39,32 +39,38 @@
|
|
|
39
39
|
display: inline-block;
|
|
40
40
|
}
|
|
41
41
|
.fds-button--x-small {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
42
|
+
min-height: var(--size-control-xs, 28px);
|
|
43
|
+
padding: 0 var(--spacing-3, 12px);
|
|
44
|
+
font-size: var(--font-size-text-xs, 12px);
|
|
45
|
+
line-height: var(--line-height-text-xs, 18px);
|
|
46
46
|
}
|
|
47
47
|
.fds-button--small {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
48
|
+
min-height: var(--size-control-sm, 32px);
|
|
49
|
+
padding: 0 var(--spacing-3, 12px);
|
|
50
|
+
font-size: var(--font-size-text-compact, 13px);
|
|
51
|
+
line-height: var(--line-height-text-compact, 20px);
|
|
52
52
|
}
|
|
53
53
|
.fds-button--medium {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
54
|
+
min-height: var(--size-control-md, 36px);
|
|
55
|
+
padding: 0 var(--spacing-4, 16px);
|
|
56
|
+
font-size: var(--font-size-text-sm, 14px);
|
|
57
|
+
line-height: var(--line-height-text-sm, 22px);
|
|
58
58
|
}
|
|
59
59
|
.fds-button--big {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
60
|
+
min-height: var(--size-control-lg, 44px);
|
|
61
|
+
padding: 0 var(--spacing-5, 20px);
|
|
62
|
+
font-size: var(--font-size-text-md, 16px);
|
|
63
|
+
line-height: var(--line-height-text-md, 24px);
|
|
64
|
+
}
|
|
65
|
+
.fds-button--x-small .fds-button__icon,
|
|
66
|
+
.fds-button--small .fds-button__icon,
|
|
67
|
+
.fds-button--medium .fds-button__icon {
|
|
68
|
+
width: 16px;
|
|
69
|
+
height: 16px;
|
|
64
70
|
}
|
|
65
71
|
.fds-button--primary {
|
|
66
72
|
background-color: var(--color-accent, #ea580c);
|
|
67
|
-
color: #ffffff;
|
|
73
|
+
color: var(--color-primary-text, #ffffff);
|
|
68
74
|
}
|
|
69
75
|
.fds-button--primary:hover:not(:disabled) {
|
|
70
76
|
background-color: var(--color-accent-hover, #c2410c);
|
|
@@ -73,12 +79,12 @@
|
|
|
73
79
|
background-color: var(--color-accent-pressed, #9a3412);
|
|
74
80
|
}
|
|
75
81
|
.fds-button--primary:disabled {
|
|
76
|
-
background-color: var(--color-surface, #
|
|
82
|
+
background-color: var(--color-surface, #f5f5f5);
|
|
77
83
|
color: var(--color-text-secondary, #525252);
|
|
78
84
|
cursor: not-allowed;
|
|
79
85
|
}
|
|
80
86
|
.fds-button--outlined {
|
|
81
|
-
background-color: #ffffff;
|
|
87
|
+
background-color: var(--color-surface-raised, #ffffff);
|
|
82
88
|
border-color: var(--color-border-strong, #d4d4d4);
|
|
83
89
|
color: var(--color-text-on-neutral, #404040);
|
|
84
90
|
}
|
|
@@ -86,12 +92,12 @@
|
|
|
86
92
|
background-color: var(--color-surface-subtle, #fafafa);
|
|
87
93
|
}
|
|
88
94
|
.fds-button--outlined:active:not(:disabled) {
|
|
89
|
-
background-color: #f5f5f5;
|
|
95
|
+
background-color: var(--color-surface, #f5f5f5);
|
|
90
96
|
}
|
|
91
97
|
.fds-button--outlined:disabled {
|
|
92
|
-
background-color: #ffffff;
|
|
93
|
-
border-color: #e5e5e5;
|
|
94
|
-
color: #a3a3a3;
|
|
98
|
+
background-color: var(--color-surface-raised, #ffffff);
|
|
99
|
+
border-color: var(--color-border, #e5e5e5);
|
|
100
|
+
color: var(--color-text-muted, #a3a3a3);
|
|
95
101
|
cursor: not-allowed;
|
|
96
102
|
}
|
|
97
103
|
.fds-button--text {
|
|
@@ -102,16 +108,17 @@
|
|
|
102
108
|
background-color: var(--color-surface-subtle, #fafafa);
|
|
103
109
|
}
|
|
104
110
|
.fds-button--text:active:not(:disabled) {
|
|
105
|
-
background-color: #f5f5f5;
|
|
111
|
+
background-color: var(--color-surface, #f5f5f5);
|
|
106
112
|
}
|
|
107
113
|
.fds-button--text:disabled {
|
|
108
|
-
color: #a3a3a3;
|
|
114
|
+
color: var(--color-text-muted, #a3a3a3);
|
|
109
115
|
cursor: not-allowed;
|
|
110
116
|
}
|
|
111
117
|
.fds-button--link {
|
|
118
|
+
min-height: 0;
|
|
112
119
|
padding: 0;
|
|
113
120
|
border: none;
|
|
114
|
-
border-radius: 2px;
|
|
121
|
+
border-radius: var(--radius-xs, 2px);
|
|
115
122
|
background-color: transparent;
|
|
116
123
|
font-size: inherit;
|
|
117
124
|
line-height: inherit;
|
|
@@ -124,45 +131,46 @@
|
|
|
124
131
|
color: var(--color-text, #171717);
|
|
125
132
|
}
|
|
126
133
|
.fds-button--link:disabled {
|
|
127
|
-
color: #a3a3a3;
|
|
134
|
+
color: var(--color-text-muted, #a3a3a3);
|
|
128
135
|
cursor: not-allowed;
|
|
129
136
|
}
|
|
130
137
|
.fds-button--danger {
|
|
131
138
|
background-color: var(--color-error, #b91c1c);
|
|
132
|
-
color: #ffffff;
|
|
139
|
+
color: var(--color-primary-text, #ffffff);
|
|
133
140
|
}
|
|
134
141
|
.fds-button--danger:hover:not(:disabled) {
|
|
135
142
|
background-color: var(--color-error-text, #991b1b);
|
|
136
143
|
}
|
|
137
144
|
.fds-button--danger:active:not(:disabled) {
|
|
138
|
-
background-color: #7f1d1d;
|
|
145
|
+
background-color: var(--color-error-pressed, #7f1d1d);
|
|
139
146
|
}
|
|
140
147
|
.fds-button--danger:focus-visible {
|
|
141
148
|
outline-color: var(--color-error, #b91c1c);
|
|
142
149
|
}
|
|
143
150
|
.fds-button--danger:disabled {
|
|
144
|
-
background-color: var(--color-error
|
|
145
|
-
color: #
|
|
151
|
+
background-color: var(--color-error, #b91c1c);
|
|
152
|
+
color: var(--color-primary-text, #ffffff);
|
|
153
|
+
opacity: 0.45;
|
|
146
154
|
cursor: not-allowed;
|
|
147
155
|
}
|
|
148
156
|
.fds-button--danger-outlined {
|
|
149
|
-
background-color: #ffffff;
|
|
157
|
+
background-color: var(--color-surface-raised, #ffffff);
|
|
150
158
|
border-color: var(--color-error-border, #fecaca);
|
|
151
159
|
color: var(--color-error, #b91c1c);
|
|
152
160
|
}
|
|
153
161
|
.fds-button--danger-outlined:hover:not(:disabled) {
|
|
154
162
|
background-color: var(--color-error-bg, #fef2f2);
|
|
155
|
-
border-color: #fca5a5;
|
|
163
|
+
border-color: var(--color-error-border-hover, #fca5a5);
|
|
156
164
|
}
|
|
157
165
|
.fds-button--danger-outlined:active:not(:disabled) {
|
|
158
|
-
background-color: #fee2e2;
|
|
166
|
+
background-color: var(--color-error-bg-pressed, #fee2e2);
|
|
159
167
|
}
|
|
160
168
|
.fds-button--danger-outlined:focus-visible {
|
|
161
169
|
outline-color: var(--color-error, #b91c1c);
|
|
162
170
|
}
|
|
163
171
|
.fds-button--danger-outlined:disabled {
|
|
164
|
-
border-color: #e5e5e5;
|
|
165
|
-
color: #a3a3a3;
|
|
172
|
+
border-color: var(--color-border, #e5e5e5);
|
|
173
|
+
color: var(--color-text-muted, #a3a3a3);
|
|
166
174
|
cursor: not-allowed;
|
|
167
175
|
}
|
|
168
176
|
.fds-button--dark {
|
|
@@ -174,11 +182,11 @@
|
|
|
174
182
|
background-color: var(--color-primary-hover, #262626);
|
|
175
183
|
}
|
|
176
184
|
.fds-button--dark:active:not(:disabled) {
|
|
177
|
-
background-color: #000000;
|
|
185
|
+
background-color: var(--color-primary-pressed, #000000);
|
|
178
186
|
}
|
|
179
187
|
.fds-button--dark:disabled {
|
|
180
188
|
background-color: var(--color-surface, #f5f5f5);
|
|
181
|
-
color: #a3a3a3;
|
|
189
|
+
color: var(--color-text-muted, #a3a3a3);
|
|
182
190
|
cursor: not-allowed;
|
|
183
191
|
}
|
|
184
192
|
.fds-button--neutral {
|
|
@@ -186,14 +194,14 @@
|
|
|
186
194
|
color: var(--color-text-on-neutral, #404040);
|
|
187
195
|
}
|
|
188
196
|
.fds-button--neutral:hover:not(:disabled) {
|
|
189
|
-
background-color: #f5f5f5;
|
|
197
|
+
background-color: var(--color-surface, #f5f5f5);
|
|
190
198
|
}
|
|
191
199
|
.fds-button--neutral:active:not(:disabled) {
|
|
192
|
-
background-color: #e5e5e5;
|
|
200
|
+
background-color: var(--color-border, #e5e5e5);
|
|
193
201
|
}
|
|
194
202
|
.fds-button--neutral:disabled {
|
|
195
203
|
background-color: var(--color-surface-subtle, #fafafa);
|
|
196
|
-
color: #a3a3a3;
|
|
204
|
+
color: var(--color-text-muted, #a3a3a3);
|
|
197
205
|
cursor: not-allowed;
|
|
198
206
|
}
|
|
199
207
|
|
|
@@ -203,7 +211,7 @@
|
|
|
203
211
|
display: flex;
|
|
204
212
|
flex-direction: column;
|
|
205
213
|
align-items: flex-start;
|
|
206
|
-
gap:
|
|
214
|
+
gap: var(--spacing-2, 8px);
|
|
207
215
|
width: max-content;
|
|
208
216
|
max-width: 300px;
|
|
209
217
|
padding: var(--spacing-4);
|
|
@@ -222,7 +230,7 @@
|
|
|
222
230
|
display: flex;
|
|
223
231
|
flex-direction: column;
|
|
224
232
|
align-items: flex-start;
|
|
225
|
-
gap:
|
|
233
|
+
gap: var(--spacing-2, 8px);
|
|
226
234
|
width: 100%;
|
|
227
235
|
}
|
|
228
236
|
.fds-mismatch-card__title {
|
|
@@ -231,7 +239,7 @@
|
|
|
231
239
|
font-family: var(--font-display);
|
|
232
240
|
font-weight: var(--font-weight-semibold);
|
|
233
241
|
font-size: var(--font-size-text-sm);
|
|
234
|
-
line-height: 20px;
|
|
242
|
+
line-height: var(--line-height-text-compact, 20px);
|
|
235
243
|
color: var(--color-text);
|
|
236
244
|
overflow-wrap: break-word;
|
|
237
245
|
}
|
|
@@ -249,7 +257,7 @@
|
|
|
249
257
|
gap: var(--spacing-2);
|
|
250
258
|
width: 100%;
|
|
251
259
|
padding-bottom: var(--spacing-1);
|
|
252
|
-
border-bottom: 1px solid #fafafa;
|
|
260
|
+
border-bottom: 1px solid var(--color-surface-subtle, #fafafa);
|
|
253
261
|
}
|
|
254
262
|
.fds-mismatch-card__label {
|
|
255
263
|
width: 100%;
|
|
@@ -315,7 +323,7 @@
|
|
|
315
323
|
}
|
|
316
324
|
.fds-diff-section[data-expanded=true] {
|
|
317
325
|
gap: var(--spacing-3);
|
|
318
|
-
padding-bottom:
|
|
326
|
+
padding-bottom: var(--spacing-3, 12px);
|
|
319
327
|
}
|
|
320
328
|
.fds-diff-section *,
|
|
321
329
|
.fds-diff-section *::before,
|
|
@@ -354,15 +362,15 @@
|
|
|
354
362
|
.fds-diff-section__number {
|
|
355
363
|
font-family: var(--font-mono);
|
|
356
364
|
font-weight: var(--font-weight-regular);
|
|
357
|
-
font-size: 12px;
|
|
358
|
-
line-height: 18px;
|
|
365
|
+
font-size: var(--font-size-text-xs, 12px);
|
|
366
|
+
line-height: var(--line-height-text-xs, 18px);
|
|
359
367
|
letter-spacing: -0.24px;
|
|
360
368
|
color: var(--color-text-secondary);
|
|
361
369
|
}
|
|
362
370
|
.fds-diff-section__name {
|
|
363
371
|
font-weight: var(--font-weight-medium);
|
|
364
|
-
font-size: 14px;
|
|
365
|
-
line-height: 22px;
|
|
372
|
+
font-size: var(--font-size-text-sm, 14px);
|
|
373
|
+
line-height: var(--line-height-text-sm, 22px);
|
|
366
374
|
color: var(--color-text);
|
|
367
375
|
}
|
|
368
376
|
.fds-diff-section__head-right {
|
|
@@ -381,8 +389,8 @@
|
|
|
381
389
|
}
|
|
382
390
|
.fds-diff-section__count {
|
|
383
391
|
font-weight: var(--font-weight-regular);
|
|
384
|
-
font-size: 14px;
|
|
385
|
-
line-height: 22px;
|
|
392
|
+
font-size: var(--font-size-text-sm, 14px);
|
|
393
|
+
line-height: var(--line-height-text-sm, 22px);
|
|
386
394
|
color: var(--color-text-secondary);
|
|
387
395
|
white-space: nowrap;
|
|
388
396
|
}
|
|
@@ -404,9 +412,9 @@
|
|
|
404
412
|
.fds-diff-section__element-head {
|
|
405
413
|
display: flex;
|
|
406
414
|
flex-direction: column;
|
|
407
|
-
gap:
|
|
415
|
+
gap: var(--spacing-3, 12px);
|
|
408
416
|
width: 100%;
|
|
409
|
-
padding:
|
|
417
|
+
padding: var(--spacing-1, 4px) var(--spacing-5) var(--spacing-1, 4px) var(--spacing-6);
|
|
410
418
|
}
|
|
411
419
|
.fds-diff-section__element-head--button {
|
|
412
420
|
border: 0;
|
|
@@ -464,7 +472,7 @@
|
|
|
464
472
|
.fds-diff-section__lines {
|
|
465
473
|
display: flex;
|
|
466
474
|
flex-direction: column;
|
|
467
|
-
padding-left:
|
|
475
|
+
padding-left: var(--spacing-4, 16px);
|
|
468
476
|
border-left: 1px solid var(--color-border);
|
|
469
477
|
margin-left: 2px;
|
|
470
478
|
}
|
|
@@ -560,8 +568,8 @@
|
|
|
560
568
|
}
|
|
561
569
|
.fds-select__label {
|
|
562
570
|
font-family: var(--font-display, "Rethink Sans", system-ui, sans-serif);
|
|
563
|
-
font-size: var(--font-size-
|
|
564
|
-
line-height: var(--line-height-
|
|
571
|
+
font-size: var(--font-size-text-compact, 13px);
|
|
572
|
+
line-height: var(--line-height-text-compact, 20px);
|
|
565
573
|
font-weight: var(--font-weight-medium, 500);
|
|
566
574
|
color: var(--color-text, #171717);
|
|
567
575
|
}
|
|
@@ -574,13 +582,13 @@
|
|
|
574
582
|
align-items: center;
|
|
575
583
|
gap: var(--spacing-2, 8px);
|
|
576
584
|
width: 100%;
|
|
577
|
-
min-height:
|
|
585
|
+
min-height: var(--size-control-md, 36px);
|
|
578
586
|
padding: 0 var(--spacing-3, 12px);
|
|
579
587
|
background: var(--color-surface-raised, #ffffff);
|
|
580
588
|
border: 1px solid var(--color-border-strong, #d4d4d4);
|
|
581
589
|
border-radius: var(--radius-md, 6px);
|
|
582
590
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
583
|
-
font-size: var(--font-size-text-
|
|
591
|
+
font-size: var(--font-size-text-sm, 14px);
|
|
584
592
|
color: var(--color-text, #171717);
|
|
585
593
|
cursor: pointer;
|
|
586
594
|
text-align: left;
|
|
@@ -600,7 +608,7 @@
|
|
|
600
608
|
box-shadow: inset 0 0 0 1px var(--color-error, #b91c1c);
|
|
601
609
|
}
|
|
602
610
|
.fds-select__trigger:disabled {
|
|
603
|
-
background: var(--color-surface-
|
|
611
|
+
background: var(--color-surface-subtle, #fafafa);
|
|
604
612
|
color: var(--color-text-muted, #a3a3a3);
|
|
605
613
|
cursor: not-allowed;
|
|
606
614
|
}
|
|
@@ -693,7 +701,7 @@
|
|
|
693
701
|
}
|
|
694
702
|
.fds-select__searchInput {
|
|
695
703
|
width: 100%;
|
|
696
|
-
padding: 8px var(--spacing-3, 12px);
|
|
704
|
+
padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
|
|
697
705
|
border: 1px solid var(--color-border-strong, #d4d4d4);
|
|
698
706
|
border-radius: var(--radius-sm, 4px);
|
|
699
707
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
@@ -724,12 +732,12 @@
|
|
|
724
732
|
display: flex;
|
|
725
733
|
align-items: center;
|
|
726
734
|
gap: var(--spacing-2, 8px);
|
|
727
|
-
padding: 8px var(--spacing-2, 8px);
|
|
735
|
+
padding: var(--spacing-2, 8px) var(--spacing-2, 8px);
|
|
728
736
|
border-radius: var(--radius-sm, 4px);
|
|
729
737
|
cursor: pointer;
|
|
730
738
|
}
|
|
731
739
|
.fds-select__option--active {
|
|
732
|
-
background: var(--color-surface, #
|
|
740
|
+
background: var(--color-surface, #f5f5f5);
|
|
733
741
|
}
|
|
734
742
|
.fds-select__option--disabled {
|
|
735
743
|
opacity: 0.5;
|
|
@@ -751,13 +759,13 @@
|
|
|
751
759
|
.fds-select__optDescription {
|
|
752
760
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
753
761
|
font-size: var(--font-size-text-xs, 12px);
|
|
754
|
-
line-height: 18px;
|
|
762
|
+
line-height: var(--line-height-text-xs, 18px);
|
|
755
763
|
color: var(--color-text-tertiary, #737373);
|
|
756
764
|
}
|
|
757
765
|
.fds-select__optText {
|
|
758
766
|
display: inline-flex;
|
|
759
767
|
align-items: baseline;
|
|
760
|
-
gap:
|
|
768
|
+
gap: var(--spacing-1, 4px);
|
|
761
769
|
min-width: 0;
|
|
762
770
|
flex: 1 1 auto;
|
|
763
771
|
}
|
|
@@ -834,7 +842,7 @@
|
|
|
834
842
|
position: absolute;
|
|
835
843
|
top: 50%;
|
|
836
844
|
transform: translateY(-50%);
|
|
837
|
-
background-color: #ffffff;
|
|
845
|
+
background-color: var(--color-surface-raised, #ffffff);
|
|
838
846
|
border-radius: var(--radius-full, 9999px);
|
|
839
847
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
|
|
840
848
|
transition: left var(--duration-quick, 150ms) var(--ease-out, ease);
|
|
@@ -901,10 +909,10 @@
|
|
|
901
909
|
display: flex;
|
|
902
910
|
align-items: center;
|
|
903
911
|
gap: var(--spacing-5, 20px);
|
|
904
|
-
height:
|
|
912
|
+
height: var(--size-nav, 56px);
|
|
905
913
|
padding: 0 var(--spacing-5, 20px);
|
|
906
|
-
background: var(--color-surface, #
|
|
907
|
-
border-bottom: 1px solid var(--color-border-light, #
|
|
914
|
+
background: var(--color-surface, #f5f5f5);
|
|
915
|
+
border-bottom: 1px solid var(--color-border-light, #f5f5f5);
|
|
908
916
|
position: sticky;
|
|
909
917
|
top: 0;
|
|
910
918
|
z-index: 100;
|
|
@@ -927,12 +935,12 @@
|
|
|
927
935
|
align-items: center;
|
|
928
936
|
gap: var(--spacing-2, 8px);
|
|
929
937
|
flex-shrink: 0;
|
|
930
|
-
padding:
|
|
938
|
+
padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
|
|
931
939
|
color: var(--color-text-muted, #a3a3a3);
|
|
932
940
|
font-family: var(--font-display, "Rethink Sans", system-ui, sans-serif);
|
|
933
|
-
font-size: 14px;
|
|
934
|
-
line-height:
|
|
935
|
-
font-weight: 600;
|
|
941
|
+
font-size: var(--font-size-text-sm, 14px);
|
|
942
|
+
line-height: var(--line-height-text-sm, 22px);
|
|
943
|
+
font-weight: var(--font-weight-semibold, 600);
|
|
936
944
|
white-space: nowrap;
|
|
937
945
|
text-decoration: none;
|
|
938
946
|
transition: color var(--duration-quick, 150ms) var(--ease-out, ease);
|
|
@@ -944,7 +952,7 @@
|
|
|
944
952
|
.fds-app-nav__links > *:focus-visible {
|
|
945
953
|
outline: 2px solid var(--color-accent, #ea580c);
|
|
946
954
|
outline-offset: -2px;
|
|
947
|
-
border-radius: var(--radius-sm,
|
|
955
|
+
border-radius: var(--radius-sm, 4px);
|
|
948
956
|
}
|
|
949
957
|
.fds-app-nav__links > [aria-current=page]::after {
|
|
950
958
|
content: "";
|
|
@@ -953,7 +961,7 @@
|
|
|
953
961
|
right: var(--spacing-3, 12px);
|
|
954
962
|
bottom: 2px;
|
|
955
963
|
height: 2px;
|
|
956
|
-
border-radius: 2px;
|
|
964
|
+
border-radius: var(--radius-xs, 2px);
|
|
957
965
|
background: var(--color-accent, #ea580c);
|
|
958
966
|
}
|
|
959
967
|
.fds-app-nav__actions {
|
|
@@ -975,11 +983,11 @@
|
|
|
975
983
|
display: grid;
|
|
976
984
|
place-items: center;
|
|
977
985
|
flex-shrink: 0;
|
|
978
|
-
width:
|
|
979
|
-
height:
|
|
986
|
+
width: var(--size-control-md, 36px);
|
|
987
|
+
height: var(--size-control-md, 36px);
|
|
980
988
|
padding: 0;
|
|
981
989
|
border: none;
|
|
982
|
-
border-radius: var(--radius-md,
|
|
990
|
+
border-radius: var(--radius-md, 6px);
|
|
983
991
|
background: transparent;
|
|
984
992
|
color: var(--color-text, #171717);
|
|
985
993
|
cursor: pointer;
|
|
@@ -987,7 +995,7 @@
|
|
|
987
995
|
}
|
|
988
996
|
.fds-app-nav__toggle:hover,
|
|
989
997
|
.fds-app-nav__toggle[aria-expanded=true] {
|
|
990
|
-
background: var(--color-surface-hover, #
|
|
998
|
+
background: var(--color-surface-hover, #ececec);
|
|
991
999
|
}
|
|
992
1000
|
.fds-app-nav__toggle:focus-visible {
|
|
993
1001
|
outline: 2px solid var(--color-accent, #ea580c);
|
|
@@ -1004,7 +1012,7 @@
|
|
|
1004
1012
|
gap: 0;
|
|
1005
1013
|
padding: var(--spacing-2, 8px);
|
|
1006
1014
|
background: var(--color-surface-raised, #ffffff);
|
|
1007
|
-
border-bottom: 1px solid var(--color-border-light, #
|
|
1015
|
+
border-bottom: 1px solid var(--color-border-light, #f5f5f5);
|
|
1008
1016
|
box-shadow: var(--shadow-lg, 0 16px 48px rgba(0, 0, 0, 0.12));
|
|
1009
1017
|
}
|
|
1010
1018
|
.fds-app-nav__links[data-open] {
|
|
@@ -1012,18 +1020,18 @@
|
|
|
1012
1020
|
animation: fds-app-nav-menu-in var(--duration-quick, 150ms) var(--ease-out, ease) both;
|
|
1013
1021
|
}
|
|
1014
1022
|
.fds-app-nav__links > * {
|
|
1015
|
-
padding:
|
|
1016
|
-
border-radius: var(--radius-md,
|
|
1017
|
-
font-size:
|
|
1018
|
-
line-height: 22px;
|
|
1023
|
+
padding: var(--spacing-3, 12px);
|
|
1024
|
+
border-radius: var(--radius-md, 6px);
|
|
1025
|
+
font-size: var(--font-size-text-sm, 14px);
|
|
1026
|
+
line-height: var(--line-height-text-sm, 22px);
|
|
1019
1027
|
color: var(--color-text-secondary, #525252);
|
|
1020
1028
|
}
|
|
1021
1029
|
.fds-app-nav__links > *:hover {
|
|
1022
|
-
background: var(--color-surface, #
|
|
1030
|
+
background: var(--color-surface, #f5f5f5);
|
|
1023
1031
|
}
|
|
1024
1032
|
.fds-app-nav__links > [aria-current=page] {
|
|
1025
1033
|
color: var(--color-text, #171717);
|
|
1026
|
-
background: var(--color-surface, #
|
|
1034
|
+
background: var(--color-surface, #f5f5f5);
|
|
1027
1035
|
}
|
|
1028
1036
|
.fds-app-nav__links > [aria-current=page]::after {
|
|
1029
1037
|
display: none;
|
|
@@ -1052,7 +1060,7 @@
|
|
|
1052
1060
|
gap: var(--spacing-1, 4px);
|
|
1053
1061
|
overflow-x: auto;
|
|
1054
1062
|
scrollbar-width: none;
|
|
1055
|
-
box-shadow: inset 0 -1px 0 var(--color-border-light, #
|
|
1063
|
+
box-shadow: inset 0 -1px 0 var(--color-border-light, #f5f5f5);
|
|
1056
1064
|
}
|
|
1057
1065
|
.fds-tab-nav::-webkit-scrollbar {
|
|
1058
1066
|
display: none;
|
|
@@ -1060,11 +1068,11 @@
|
|
|
1060
1068
|
.fds-tab-nav > * {
|
|
1061
1069
|
position: relative;
|
|
1062
1070
|
flex-shrink: 0;
|
|
1063
|
-
padding:
|
|
1071
|
+
padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
|
|
1064
1072
|
font-family: var(--font-display, "Rethink Sans", system-ui, sans-serif);
|
|
1065
|
-
font-size:
|
|
1066
|
-
font-weight: 500;
|
|
1067
|
-
line-height:
|
|
1073
|
+
font-size: var(--font-size-text-sm, 14px);
|
|
1074
|
+
font-weight: var(--font-weight-medium, 500);
|
|
1075
|
+
line-height: var(--line-height-text-sm, 22px);
|
|
1068
1076
|
white-space: nowrap;
|
|
1069
1077
|
color: var(--color-text-muted, #a3a3a3);
|
|
1070
1078
|
background: transparent;
|
|
@@ -1077,11 +1085,11 @@
|
|
|
1077
1085
|
.fds-tab-nav > *:focus-visible {
|
|
1078
1086
|
outline: 2px solid var(--color-accent, #ea580c);
|
|
1079
1087
|
outline-offset: -2px;
|
|
1080
|
-
border-radius: var(--radius-xs,
|
|
1088
|
+
border-radius: var(--radius-xs, 2px);
|
|
1081
1089
|
}
|
|
1082
1090
|
.fds-tab-nav > [aria-current=page] {
|
|
1083
1091
|
color: var(--color-text, #171717);
|
|
1084
|
-
font-weight: 600;
|
|
1092
|
+
font-weight: var(--font-weight-semibold, 600);
|
|
1085
1093
|
}
|
|
1086
1094
|
.fds-tab-nav > [aria-current=page]::after {
|
|
1087
1095
|
content: "";
|
|
@@ -1105,10 +1113,10 @@
|
|
|
1105
1113
|
to right,
|
|
1106
1114
|
#000 calc(100% - 24px),
|
|
1107
1115
|
transparent);
|
|
1108
|
-
padding-right: 24px;
|
|
1116
|
+
padding-right: var(--spacing-6, 24px);
|
|
1109
1117
|
}
|
|
1110
1118
|
.fds-tab-nav > * {
|
|
1111
|
-
padding:
|
|
1119
|
+
padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
|
|
1112
1120
|
}
|
|
1113
1121
|
}
|
|
1114
1122
|
|
|
@@ -1116,10 +1124,10 @@
|
|
|
1116
1124
|
.fds-settings-section {
|
|
1117
1125
|
display: grid;
|
|
1118
1126
|
grid-template-columns: 280px minmax(0, 1fr);
|
|
1119
|
-
gap: var(--spacing-
|
|
1127
|
+
gap: var(--spacing-10, 40px);
|
|
1120
1128
|
align-items: start;
|
|
1121
|
-
padding: var(--spacing-
|
|
1122
|
-
border-bottom: 1px solid var(--color-border-light, #
|
|
1129
|
+
padding: var(--spacing-6, 24px) 0;
|
|
1130
|
+
border-bottom: 1px solid var(--color-border-light, #f5f5f5);
|
|
1123
1131
|
}
|
|
1124
1132
|
.fds-settings-section:first-child {
|
|
1125
1133
|
padding-top: 0;
|
|
@@ -1134,15 +1142,15 @@
|
|
|
1134
1142
|
.fds-settings-section__title {
|
|
1135
1143
|
margin: 0 0 var(--spacing-2, 8px);
|
|
1136
1144
|
font-family: var(--font-display, "Rethink Sans", system-ui, sans-serif);
|
|
1137
|
-
font-size:
|
|
1138
|
-
font-weight: 600;
|
|
1145
|
+
font-size: var(--font-size-text-sm, 14px);
|
|
1146
|
+
font-weight: var(--font-weight-semibold, 600);
|
|
1139
1147
|
letter-spacing: -0.005em;
|
|
1140
1148
|
color: var(--color-text, #171717);
|
|
1141
1149
|
}
|
|
1142
1150
|
.fds-settings-section__description {
|
|
1143
1151
|
margin: 0;
|
|
1144
1152
|
max-width: 32ch;
|
|
1145
|
-
font-size:
|
|
1153
|
+
font-size: var(--font-size-text-compact, 13px);
|
|
1146
1154
|
line-height: 1.55;
|
|
1147
1155
|
color: var(--color-text-muted, #a3a3a3);
|
|
1148
1156
|
}
|
|
@@ -1187,7 +1195,7 @@
|
|
|
1187
1195
|
padding: var(--spacing-8, 32px) var(--spacing-8, 32px) var(--spacing-6, 24px);
|
|
1188
1196
|
background: var(--color-surface-raised, #ffffff);
|
|
1189
1197
|
border: 1px solid var(--color-border, #e5e5e5);
|
|
1190
|
-
border-radius: var(--radius-xl,
|
|
1198
|
+
border-radius: var(--radius-xl, 12px);
|
|
1191
1199
|
box-shadow: var(--shadow-lg, 0 16px 48px rgba(0, 0, 0, 0.12));
|
|
1192
1200
|
animation: fds-modal-in var(--duration-slow, 300ms) var(--ease-out, ease) both;
|
|
1193
1201
|
}
|
|
@@ -1210,7 +1218,7 @@
|
|
|
1210
1218
|
height: 32px;
|
|
1211
1219
|
padding: 0;
|
|
1212
1220
|
border: none;
|
|
1213
|
-
border-radius: var(--radius-md,
|
|
1221
|
+
border-radius: var(--radius-md, 6px);
|
|
1214
1222
|
background: transparent;
|
|
1215
1223
|
color: var(--color-text-muted, #a3a3a3);
|
|
1216
1224
|
cursor: pointer;
|
|
@@ -1218,7 +1226,7 @@
|
|
|
1218
1226
|
}
|
|
1219
1227
|
.fds-modal__close:hover:not(:disabled) {
|
|
1220
1228
|
color: var(--color-text, #171717);
|
|
1221
|
-
background: var(--color-surface, #
|
|
1229
|
+
background: var(--color-surface, #f5f5f5);
|
|
1222
1230
|
}
|
|
1223
1231
|
.fds-modal__close:focus-visible {
|
|
1224
1232
|
outline: 2px solid var(--color-accent, #ea580c);
|
|
@@ -1241,21 +1249,21 @@
|
|
|
1241
1249
|
.fds-modal__title {
|
|
1242
1250
|
margin: 0 var(--spacing-8, 32px) var(--spacing-3, 12px) 0;
|
|
1243
1251
|
font-family: var(--font-display, "Rethink Sans", system-ui, sans-serif);
|
|
1244
|
-
font-size: 20px;
|
|
1245
|
-
font-weight: 600;
|
|
1252
|
+
font-size: var(--font-size-text-xl, 20px);
|
|
1253
|
+
font-weight: var(--font-weight-semibold, 600);
|
|
1246
1254
|
line-height: 1.25;
|
|
1247
1255
|
letter-spacing: -0.015em;
|
|
1248
1256
|
color: var(--color-text, #171717);
|
|
1249
1257
|
}
|
|
1250
1258
|
.fds-modal__description {
|
|
1251
1259
|
margin: 0 0 var(--spacing-5, 20px);
|
|
1252
|
-
font-size:
|
|
1260
|
+
font-size: var(--font-size-text-compact, 13px);
|
|
1253
1261
|
line-height: 1.55;
|
|
1254
1262
|
color: var(--color-text-secondary, #525252);
|
|
1255
1263
|
}
|
|
1256
1264
|
.fds-modal__content {
|
|
1257
1265
|
margin-bottom: var(--spacing-5, 20px);
|
|
1258
|
-
font-size:
|
|
1266
|
+
font-size: var(--font-size-text-compact, 13px);
|
|
1259
1267
|
line-height: 1.55;
|
|
1260
1268
|
color: var(--color-text-secondary, #525252);
|
|
1261
1269
|
}
|
|
@@ -1313,7 +1321,7 @@
|
|
|
1313
1321
|
gap: var(--spacing-1, 4px);
|
|
1314
1322
|
overflow-x: auto;
|
|
1315
1323
|
scrollbar-width: none;
|
|
1316
|
-
box-shadow: inset 0 -1px 0 var(--color-border-light, #
|
|
1324
|
+
box-shadow: inset 0 -1px 0 var(--color-border-light, #f5f5f5);
|
|
1317
1325
|
}
|
|
1318
1326
|
.fds-segmented::-webkit-scrollbar {
|
|
1319
1327
|
display: none;
|
|
@@ -1322,16 +1330,16 @@
|
|
|
1322
1330
|
position: relative;
|
|
1323
1331
|
display: inline-flex;
|
|
1324
1332
|
align-items: center;
|
|
1325
|
-
gap:
|
|
1333
|
+
gap: var(--spacing-1, 4px);
|
|
1326
1334
|
flex-shrink: 0;
|
|
1327
|
-
padding:
|
|
1335
|
+
padding: var(--spacing-2, 8px);
|
|
1328
1336
|
border: none;
|
|
1329
1337
|
background: transparent;
|
|
1330
1338
|
color: var(--color-text-muted, #a3a3a3);
|
|
1331
1339
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
1332
|
-
font-size: 13px;
|
|
1333
|
-
font-weight: 500;
|
|
1334
|
-
line-height: 20px;
|
|
1340
|
+
font-size: var(--font-size-text-compact, 13px);
|
|
1341
|
+
font-weight: var(--font-weight-medium, 500);
|
|
1342
|
+
line-height: var(--line-height-text-compact, 20px);
|
|
1335
1343
|
white-space: nowrap;
|
|
1336
1344
|
cursor: pointer;
|
|
1337
1345
|
transition: color var(--duration-quick, 150ms) var(--ease-out, ease);
|
|
@@ -1342,11 +1350,11 @@
|
|
|
1342
1350
|
.fds-segmented__option:focus-visible {
|
|
1343
1351
|
outline: 2px solid var(--color-accent, #ea580c);
|
|
1344
1352
|
outline-offset: -2px;
|
|
1345
|
-
border-radius: var(--radius-xs,
|
|
1353
|
+
border-radius: var(--radius-xs, 2px);
|
|
1346
1354
|
}
|
|
1347
1355
|
.fds-segmented__option[aria-selected=true] {
|
|
1348
1356
|
color: var(--color-text, #171717);
|
|
1349
|
-
font-weight: 600;
|
|
1357
|
+
font-weight: var(--font-weight-semibold, 600);
|
|
1350
1358
|
}
|
|
1351
1359
|
.fds-segmented__option[aria-selected=true]::after {
|
|
1352
1360
|
content: "";
|
|
@@ -1359,7 +1367,7 @@
|
|
|
1359
1367
|
background: var(--color-text, #171717);
|
|
1360
1368
|
}
|
|
1361
1369
|
.fds-segmented__option:disabled {
|
|
1362
|
-
color: #d4d4d4;
|
|
1370
|
+
color: var(--color-border-strong, #d4d4d4);
|
|
1363
1371
|
cursor: not-allowed;
|
|
1364
1372
|
}
|
|
1365
1373
|
.fds-segmented__count {
|
|
@@ -1368,26 +1376,26 @@
|
|
|
1368
1376
|
place-items: center;
|
|
1369
1377
|
min-width: 20px;
|
|
1370
1378
|
height: 20px;
|
|
1371
|
-
padding: 0
|
|
1379
|
+
padding: 0 var(--spacing-1, 4px);
|
|
1372
1380
|
border-radius: var(--radius-full, 9999px);
|
|
1373
1381
|
background: var(--color-accent-subtle, #ffedd5);
|
|
1374
1382
|
color: var(--color-accent-text, #c2410c);
|
|
1375
|
-
font-size: 11px;
|
|
1376
|
-
font-weight: 600;
|
|
1383
|
+
font-size: var(--font-size-text-2xs, 11px);
|
|
1384
|
+
font-weight: var(--font-weight-semibold, 600);
|
|
1377
1385
|
line-height: 1;
|
|
1378
1386
|
font-variant-numeric: tabular-nums;
|
|
1379
1387
|
}
|
|
1380
1388
|
.fds-segmented__option[aria-selected=true] .fds-segmented__count {
|
|
1381
1389
|
background: var(--color-accent, #ea580c);
|
|
1382
|
-
color: #ffffff;
|
|
1390
|
+
color: var(--color-primary-text, #ffffff);
|
|
1383
1391
|
}
|
|
1384
1392
|
.fds-segmented__option:disabled .fds-segmented__count {
|
|
1385
|
-
background: #f5f5f5;
|
|
1386
|
-
color: #a3a3a3;
|
|
1393
|
+
background: var(--color-surface, #f5f5f5);
|
|
1394
|
+
color: var(--color-text-muted, #a3a3a3);
|
|
1387
1395
|
}
|
|
1388
1396
|
@media (max-width: 640px) {
|
|
1389
1397
|
.fds-segmented {
|
|
1390
|
-
padding-right: 24px;
|
|
1398
|
+
padding-right: var(--spacing-6, 24px);
|
|
1391
1399
|
-webkit-mask-image:
|
|
1392
1400
|
linear-gradient(
|
|
1393
1401
|
to right,
|
|
@@ -1403,20 +1411,20 @@
|
|
|
1403
1411
|
.fds-segmented--pill {
|
|
1404
1412
|
display: inline-flex;
|
|
1405
1413
|
gap: 2px;
|
|
1406
|
-
padding:
|
|
1414
|
+
padding: var(--spacing-1, 4px);
|
|
1407
1415
|
border-radius: var(--radius-lg, 8px);
|
|
1408
1416
|
background: var(--color-surface, #f5f5f5);
|
|
1409
1417
|
box-shadow: none;
|
|
1410
1418
|
}
|
|
1411
1419
|
.fds-segmented--pill .fds-segmented__option {
|
|
1412
|
-
padding:
|
|
1420
|
+
padding: var(--spacing-1, 4px) var(--spacing-3, 12px);
|
|
1413
1421
|
border-radius: var(--radius-md, 6px);
|
|
1414
1422
|
color: var(--color-text-tertiary, #737373);
|
|
1415
1423
|
}
|
|
1416
1424
|
.fds-segmented--pill .fds-segmented__option[aria-selected=true] {
|
|
1417
1425
|
background: var(--color-surface-raised, #ffffff);
|
|
1418
1426
|
color: var(--color-text, #171717);
|
|
1419
|
-
font-weight: 500;
|
|
1427
|
+
font-weight: var(--font-weight-medium, 500);
|
|
1420
1428
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px var(--color-border, #e5e5e5);
|
|
1421
1429
|
}
|
|
1422
1430
|
.fds-segmented--pill .fds-segmented__option[aria-selected=true]::after {
|
|
@@ -1427,7 +1435,7 @@
|
|
|
1427
1435
|
}
|
|
1428
1436
|
@media (max-width: 640px) {
|
|
1429
1437
|
.fds-segmented--pill {
|
|
1430
|
-
padding-right:
|
|
1438
|
+
padding-right: var(--spacing-1, 4px);
|
|
1431
1439
|
-webkit-mask-image: none;
|
|
1432
1440
|
mask-image: none;
|
|
1433
1441
|
}
|
|
@@ -1444,24 +1452,24 @@
|
|
|
1444
1452
|
background: var(--color-accent-subtle, #ffedd5);
|
|
1445
1453
|
color: var(--color-accent-text, #c2410c);
|
|
1446
1454
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
1447
|
-
font-weight: 600;
|
|
1455
|
+
font-weight: var(--font-weight-semibold, 600);
|
|
1448
1456
|
line-height: 1;
|
|
1449
1457
|
user-select: none;
|
|
1450
1458
|
}
|
|
1451
1459
|
.fds-avatar--small {
|
|
1452
1460
|
width: 24px;
|
|
1453
1461
|
height: 24px;
|
|
1454
|
-
font-size:
|
|
1462
|
+
font-size: var(--font-size-text-2xs, 11px);
|
|
1455
1463
|
}
|
|
1456
1464
|
.fds-avatar--medium {
|
|
1457
1465
|
width: 32px;
|
|
1458
1466
|
height: 32px;
|
|
1459
|
-
font-size: 12px;
|
|
1467
|
+
font-size: var(--font-size-text-xs, 12px);
|
|
1460
1468
|
}
|
|
1461
1469
|
.fds-avatar--large {
|
|
1462
1470
|
width: 40px;
|
|
1463
1471
|
height: 40px;
|
|
1464
|
-
font-size: 14px;
|
|
1472
|
+
font-size: var(--font-size-text-sm, 14px);
|
|
1465
1473
|
}
|
|
1466
1474
|
.fds-avatar__img {
|
|
1467
1475
|
width: 100%;
|
|
@@ -1480,8 +1488,8 @@
|
|
|
1480
1488
|
.fds-section-header__title {
|
|
1481
1489
|
margin: 0;
|
|
1482
1490
|
font-family: var(--font-display, "Rethink Sans", system-ui, sans-serif);
|
|
1483
|
-
font-size:
|
|
1484
|
-
font-weight: 600;
|
|
1491
|
+
font-size: var(--font-size-text-sm, 14px);
|
|
1492
|
+
font-weight: var(--font-weight-semibold, 600);
|
|
1485
1493
|
line-height: 1.3;
|
|
1486
1494
|
letter-spacing: -0.005em;
|
|
1487
1495
|
color: var(--color-text, #171717);
|
|
@@ -1489,7 +1497,7 @@
|
|
|
1489
1497
|
.fds-section-header__description {
|
|
1490
1498
|
margin: 0;
|
|
1491
1499
|
max-width: 60ch;
|
|
1492
|
-
font-size:
|
|
1500
|
+
font-size: var(--font-size-text-compact, 13px);
|
|
1493
1501
|
line-height: 1.55;
|
|
1494
1502
|
color: var(--color-text-muted, #a3a3a3);
|
|
1495
1503
|
}
|
|
@@ -1498,7 +1506,7 @@
|
|
|
1498
1506
|
.fds-split {
|
|
1499
1507
|
display: grid;
|
|
1500
1508
|
grid-template-columns: var(--fds-split-aside, 280px) minmax(0, 1fr);
|
|
1501
|
-
gap: var(--spacing-
|
|
1509
|
+
gap: var(--spacing-10, 40px);
|
|
1502
1510
|
align-items: start;
|
|
1503
1511
|
}
|
|
1504
1512
|
.fds-split__aside,
|
|
@@ -1538,12 +1546,12 @@
|
|
|
1538
1546
|
box-sizing: border-box;
|
|
1539
1547
|
display: inline-flex;
|
|
1540
1548
|
align-items: center;
|
|
1541
|
-
gap:
|
|
1542
|
-
padding:
|
|
1549
|
+
gap: var(--spacing-1, 4px);
|
|
1550
|
+
padding: 2px var(--spacing-2, 8px);
|
|
1543
1551
|
border-radius: var(--radius-pill, 9999px);
|
|
1544
1552
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
1545
|
-
font-size: var(--font-size-text-
|
|
1546
|
-
line-height:
|
|
1553
|
+
font-size: var(--font-size-text-xs, 12px);
|
|
1554
|
+
line-height: var(--line-height-text-xs, 18px);
|
|
1547
1555
|
font-weight: var(--font-weight-medium, 500);
|
|
1548
1556
|
white-space: nowrap;
|
|
1549
1557
|
}
|
|
@@ -1581,14 +1589,14 @@
|
|
|
1581
1589
|
box-sizing: border-box;
|
|
1582
1590
|
display: inline-flex;
|
|
1583
1591
|
align-items: center;
|
|
1584
|
-
gap:
|
|
1585
|
-
padding:
|
|
1592
|
+
gap: var(--spacing-1, 4px);
|
|
1593
|
+
padding: 2px var(--spacing-2, 8px);
|
|
1586
1594
|
background: var(--color-surface-subtle, #fafafa);
|
|
1587
1595
|
border: 1px solid var(--color-border, #e5e5e5);
|
|
1588
1596
|
border-radius: var(--radius-md, 6px);
|
|
1589
1597
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
1590
|
-
font-size: var(--font-size-text-
|
|
1591
|
-
line-height:
|
|
1598
|
+
font-size: var(--font-size-text-xs, 12px);
|
|
1599
|
+
line-height: var(--line-height-text-xs, 18px);
|
|
1592
1600
|
color: var(--color-text-secondary, #525252);
|
|
1593
1601
|
white-space: nowrap;
|
|
1594
1602
|
}
|
|
@@ -1634,15 +1642,15 @@
|
|
|
1634
1642
|
display: inline-flex;
|
|
1635
1643
|
align-items: center;
|
|
1636
1644
|
gap: var(--spacing-2, 8px);
|
|
1637
|
-
min-height:
|
|
1638
|
-
padding:
|
|
1645
|
+
min-height: var(--size-control-md, 36px);
|
|
1646
|
+
padding: 0 var(--spacing-3, 12px);
|
|
1639
1647
|
background: var(--color-surface-raised, #ffffff);
|
|
1640
1648
|
border: 1px solid var(--color-border-strong, #d4d4d4);
|
|
1641
1649
|
border-radius: var(--radius-lg, 8px);
|
|
1642
1650
|
box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.04));
|
|
1643
1651
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
1644
|
-
font-size: var(--font-size-text-
|
|
1645
|
-
line-height:
|
|
1652
|
+
font-size: var(--font-size-text-sm, 14px);
|
|
1653
|
+
line-height: var(--line-height-text-sm, 22px);
|
|
1646
1654
|
font-weight: var(--font-weight-medium, 500);
|
|
1647
1655
|
color: var(--color-text, #171717);
|
|
1648
1656
|
cursor: pointer;
|
|
@@ -1661,11 +1669,11 @@
|
|
|
1661
1669
|
cursor: not-allowed;
|
|
1662
1670
|
}
|
|
1663
1671
|
.fds-multiselect__count {
|
|
1664
|
-
padding: 2px
|
|
1672
|
+
padding: 2px var(--spacing-1, 4px);
|
|
1665
1673
|
border: 1px solid var(--color-border-light, #f5f5f5);
|
|
1666
1674
|
border-radius: var(--radius-sm, 4px);
|
|
1667
1675
|
font-size: var(--font-size-text-xs, 12px);
|
|
1668
|
-
line-height: 18px;
|
|
1676
|
+
line-height: var(--line-height-text-xs, 18px);
|
|
1669
1677
|
color: var(--color-text-tertiary, #737373);
|
|
1670
1678
|
}
|
|
1671
1679
|
.fds-multiselect__chevron {
|
|
@@ -1690,7 +1698,7 @@
|
|
|
1690
1698
|
overflow: hidden;
|
|
1691
1699
|
}
|
|
1692
1700
|
.fds-multiselect__list {
|
|
1693
|
-
padding: 4px 0;
|
|
1701
|
+
padding: var(--spacing-1, 4px) 0;
|
|
1694
1702
|
}
|
|
1695
1703
|
.fds-multiselect__list:focus {
|
|
1696
1704
|
outline: none;
|
|
@@ -1699,7 +1707,7 @@
|
|
|
1699
1707
|
display: flex;
|
|
1700
1708
|
align-items: center;
|
|
1701
1709
|
gap: var(--spacing-2, 8px);
|
|
1702
|
-
padding:
|
|
1710
|
+
padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
|
|
1703
1711
|
cursor: pointer;
|
|
1704
1712
|
}
|
|
1705
1713
|
.fds-multiselect__option--active {
|
|
@@ -1730,8 +1738,8 @@
|
|
|
1730
1738
|
text-overflow: ellipsis;
|
|
1731
1739
|
white-space: nowrap;
|
|
1732
1740
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
1733
|
-
font-size: var(--font-size-text-
|
|
1734
|
-
line-height:
|
|
1741
|
+
font-size: var(--font-size-text-sm, 14px);
|
|
1742
|
+
line-height: var(--line-height-text-sm, 22px);
|
|
1735
1743
|
font-weight: var(--font-weight-medium, 500);
|
|
1736
1744
|
color: var(--color-text, #171717);
|
|
1737
1745
|
}
|
|
@@ -1740,7 +1748,7 @@
|
|
|
1740
1748
|
margin-left: var(--spacing-2, 8px);
|
|
1741
1749
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
1742
1750
|
font-size: var(--font-size-text-xs, 12px);
|
|
1743
|
-
line-height: 18px;
|
|
1751
|
+
line-height: var(--line-height-text-xs, 18px);
|
|
1744
1752
|
color: var(--color-text-secondary, #525252);
|
|
1745
1753
|
}
|
|
1746
1754
|
.fds-multiselect__footer {
|
|
@@ -1748,7 +1756,7 @@
|
|
|
1748
1756
|
justify-content: space-between;
|
|
1749
1757
|
align-items: center;
|
|
1750
1758
|
height: 40px;
|
|
1751
|
-
padding: 0 16px;
|
|
1759
|
+
padding: 0 var(--spacing-4, 16px);
|
|
1752
1760
|
border-top: 1px solid var(--color-border, #e5e5e5);
|
|
1753
1761
|
}
|
|
1754
1762
|
.fds-multiselect__action {
|
|
@@ -1757,7 +1765,7 @@
|
|
|
1757
1765
|
border: 0;
|
|
1758
1766
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
1759
1767
|
font-size: var(--font-size-text-xs, 12px);
|
|
1760
|
-
line-height: 18px;
|
|
1768
|
+
line-height: var(--line-height-text-xs, 18px);
|
|
1761
1769
|
font-weight: var(--font-weight-medium, 500);
|
|
1762
1770
|
color: var(--color-text-tertiary, #737373);
|
|
1763
1771
|
cursor: pointer;
|
|
@@ -1778,8 +1786,8 @@
|
|
|
1778
1786
|
}
|
|
1779
1787
|
.fds-multiselect__fieldLabel {
|
|
1780
1788
|
font-family: var(--font-display, "Rethink Sans", system-ui, sans-serif);
|
|
1781
|
-
font-size: var(--font-size-
|
|
1782
|
-
line-height: var(--line-height-
|
|
1789
|
+
font-size: var(--font-size-text-compact, 13px);
|
|
1790
|
+
line-height: var(--line-height-text-compact, 20px);
|
|
1783
1791
|
font-weight: var(--font-weight-medium, 500);
|
|
1784
1792
|
color: var(--color-text, #171717);
|
|
1785
1793
|
}
|
|
@@ -1787,8 +1795,8 @@
|
|
|
1787
1795
|
display: flex;
|
|
1788
1796
|
align-items: center;
|
|
1789
1797
|
gap: var(--spacing-2, 8px);
|
|
1790
|
-
min-height:
|
|
1791
|
-
padding:
|
|
1798
|
+
min-height: var(--size-control-md, 36px);
|
|
1799
|
+
padding: var(--spacing-1, 4px) var(--spacing-1, 4px) var(--spacing-1, 4px) var(--spacing-2, 8px);
|
|
1792
1800
|
background: var(--color-surface-raised, #ffffff);
|
|
1793
1801
|
border: 1px solid var(--color-border-strong, #d4d4d4);
|
|
1794
1802
|
border-radius: var(--radius-md, 6px);
|
|
@@ -1807,28 +1815,28 @@
|
|
|
1807
1815
|
.fds-multiselect__chips {
|
|
1808
1816
|
display: flex;
|
|
1809
1817
|
flex-wrap: wrap;
|
|
1810
|
-
gap:
|
|
1818
|
+
gap: var(--spacing-1, 4px);
|
|
1811
1819
|
flex: 1 1 auto;
|
|
1812
1820
|
min-width: 0;
|
|
1813
1821
|
}
|
|
1814
1822
|
.fds-multiselect__placeholder {
|
|
1815
|
-
padding-left: 4px;
|
|
1823
|
+
padding-left: var(--spacing-1, 4px);
|
|
1816
1824
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
1817
|
-
font-size: var(--font-size-text-
|
|
1825
|
+
font-size: var(--font-size-text-sm, 14px);
|
|
1818
1826
|
color: var(--color-text-muted, #a3a3a3);
|
|
1819
1827
|
}
|
|
1820
1828
|
.fds-multiselect__chip {
|
|
1821
1829
|
display: inline-flex;
|
|
1822
1830
|
align-items: center;
|
|
1823
|
-
gap: 4px;
|
|
1831
|
+
gap: var(--spacing-1, 4px);
|
|
1824
1832
|
max-width: 100%;
|
|
1825
|
-
padding:
|
|
1833
|
+
padding: var(--spacing-1, 4px) var(--spacing-1, 4px) var(--spacing-1, 4px) var(--spacing-2, 8px);
|
|
1826
1834
|
border: 1px solid var(--color-border, #e5e5e5);
|
|
1827
1835
|
border-radius: var(--radius-sm, 4px);
|
|
1828
1836
|
background: var(--color-surface-subtle, #fafafa);
|
|
1829
1837
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
1830
1838
|
font-size: var(--font-size-text-xs, 12px);
|
|
1831
|
-
line-height: 18px;
|
|
1839
|
+
line-height: var(--line-height-text-xs, 18px);
|
|
1832
1840
|
color: var(--color-text, #171717);
|
|
1833
1841
|
}
|
|
1834
1842
|
.fds-multiselect__chipRemove {
|
|
@@ -1839,7 +1847,7 @@
|
|
|
1839
1847
|
height: 16px;
|
|
1840
1848
|
padding: 0;
|
|
1841
1849
|
border: 0;
|
|
1842
|
-
border-radius:
|
|
1850
|
+
border-radius: var(--radius-xs, 2px);
|
|
1843
1851
|
background: transparent;
|
|
1844
1852
|
color: var(--color-text-tertiary, #737373);
|
|
1845
1853
|
cursor: pointer;
|
|
@@ -1858,7 +1866,7 @@
|
|
|
1858
1866
|
justify-content: center;
|
|
1859
1867
|
align-self: stretch;
|
|
1860
1868
|
flex-shrink: 0;
|
|
1861
|
-
padding: 0
|
|
1869
|
+
padding: 0 var(--spacing-1, 4px);
|
|
1862
1870
|
border: 0;
|
|
1863
1871
|
background: transparent;
|
|
1864
1872
|
cursor: pointer;
|
|
@@ -1884,23 +1892,23 @@
|
|
|
1884
1892
|
}
|
|
1885
1893
|
.fds-search__icon {
|
|
1886
1894
|
position: absolute;
|
|
1887
|
-
left:
|
|
1895
|
+
left: var(--spacing-3, 12px);
|
|
1888
1896
|
color: var(--color-text-tertiary, #737373);
|
|
1889
1897
|
pointer-events: none;
|
|
1890
1898
|
}
|
|
1891
1899
|
.fds-search__input {
|
|
1892
1900
|
box-sizing: border-box;
|
|
1893
1901
|
width: 100%;
|
|
1894
|
-
min-height:
|
|
1895
|
-
padding:
|
|
1902
|
+
min-height: var(--size-control-md, 36px);
|
|
1903
|
+
padding: 0 var(--spacing-10, 40px) 0 calc(var(--spacing-3, 12px) + 16px + var(--spacing-2, 8px));
|
|
1896
1904
|
background: var(--color-surface-raised, #ffffff);
|
|
1897
1905
|
border: 1px solid var(--color-border-strong, #d4d4d4);
|
|
1898
1906
|
border-radius: var(--radius-lg, 8px);
|
|
1899
1907
|
box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.04));
|
|
1900
1908
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
1901
|
-
font-size: var(--font-size-text-
|
|
1902
|
-
line-height:
|
|
1903
|
-
font-weight: var(--font-weight-
|
|
1909
|
+
font-size: var(--font-size-text-sm, 14px);
|
|
1910
|
+
line-height: var(--line-height-text-sm, 22px);
|
|
1911
|
+
font-weight: var(--font-weight-regular, 400);
|
|
1904
1912
|
color: var(--color-text, #171717);
|
|
1905
1913
|
transition: border-color var(--duration-instant, 80ms) ease, box-shadow var(--duration-instant, 80ms) ease;
|
|
1906
1914
|
}
|
|
@@ -1917,13 +1925,13 @@
|
|
|
1917
1925
|
}
|
|
1918
1926
|
.fds-search__kbd {
|
|
1919
1927
|
position: absolute;
|
|
1920
|
-
right:
|
|
1921
|
-
padding: 0
|
|
1928
|
+
right: var(--spacing-2, 8px);
|
|
1929
|
+
padding: 0 var(--spacing-1, 4px);
|
|
1922
1930
|
border: 1px solid var(--color-border, #e5e5e5);
|
|
1923
1931
|
border-radius: var(--radius-sm, 4px);
|
|
1924
1932
|
font-family: var(--font-mono, monospace);
|
|
1925
|
-
font-size: var(--font-size-text-
|
|
1926
|
-
line-height:
|
|
1933
|
+
font-size: var(--font-size-text-2xs, 11px);
|
|
1934
|
+
line-height: var(--line-height-text-2xs, 16px);
|
|
1927
1935
|
color: var(--color-text-tertiary, #737373);
|
|
1928
1936
|
pointer-events: none;
|
|
1929
1937
|
}
|
|
@@ -1936,7 +1944,7 @@
|
|
|
1936
1944
|
gap: var(--spacing-4, 16px);
|
|
1937
1945
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
1938
1946
|
font-size: var(--font-size-text-sm, 14px);
|
|
1939
|
-
line-height: 20px;
|
|
1947
|
+
line-height: var(--line-height-text-compact, 20px);
|
|
1940
1948
|
color: var(--color-text-secondary, #525252);
|
|
1941
1949
|
}
|
|
1942
1950
|
.fds-pagination--compact {
|
|
@@ -1957,7 +1965,7 @@
|
|
|
1957
1965
|
place-items: center;
|
|
1958
1966
|
min-width: 36px;
|
|
1959
1967
|
height: 36px;
|
|
1960
|
-
padding: 0 8px;
|
|
1968
|
+
padding: 0 var(--spacing-2, 8px);
|
|
1961
1969
|
background: none;
|
|
1962
1970
|
border: 1px solid transparent;
|
|
1963
1971
|
border-radius: var(--radius-lg, 8px);
|
|
@@ -2002,7 +2010,7 @@
|
|
|
2002
2010
|
flex-direction: column;
|
|
2003
2011
|
align-items: center;
|
|
2004
2012
|
gap: var(--spacing-8, 32px);
|
|
2005
|
-
padding: 64px 40px;
|
|
2013
|
+
padding: var(--spacing-16, 64px) var(--spacing-10, 40px);
|
|
2006
2014
|
text-align: center;
|
|
2007
2015
|
}
|
|
2008
2016
|
.fds-empty__illustration {
|
|
@@ -2020,7 +2028,7 @@
|
|
|
2020
2028
|
margin: 0;
|
|
2021
2029
|
font-family: var(--font-display, "Rethink Sans", system-ui, sans-serif);
|
|
2022
2030
|
font-size: var(--font-size-display-xs, 24px);
|
|
2023
|
-
line-height: 32px;
|
|
2031
|
+
line-height: var(--line-height-display-xs, 32px);
|
|
2024
2032
|
font-weight: var(--font-weight-medium, 500);
|
|
2025
2033
|
letter-spacing: -0.18px;
|
|
2026
2034
|
color: var(--color-text, #171717);
|
|
@@ -2030,7 +2038,7 @@
|
|
|
2030
2038
|
max-width: 380px;
|
|
2031
2039
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
2032
2040
|
font-size: var(--font-size-text-sm, 14px);
|
|
2033
|
-
line-height: 20px;
|
|
2041
|
+
line-height: var(--line-height-text-compact, 20px);
|
|
2034
2042
|
color: var(--color-text-secondary, #525252);
|
|
2035
2043
|
}
|
|
2036
2044
|
.fds-empty__actions {
|
|
@@ -2044,10 +2052,10 @@
|
|
|
2044
2052
|
flex-wrap: wrap;
|
|
2045
2053
|
align-items: center;
|
|
2046
2054
|
justify-content: center;
|
|
2047
|
-
gap:
|
|
2055
|
+
gap: var(--spacing-2, 8px);
|
|
2048
2056
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
2049
2057
|
font-size: var(--font-size-text-sm, 14px);
|
|
2050
|
-
line-height: 20px;
|
|
2058
|
+
line-height: var(--line-height-text-compact, 20px);
|
|
2051
2059
|
color: var(--color-text-tertiary, #737373);
|
|
2052
2060
|
}
|
|
2053
2061
|
.fds-stacked-cards {
|
|
@@ -2076,7 +2084,7 @@
|
|
|
2076
2084
|
display: flex;
|
|
2077
2085
|
align-items: flex-start;
|
|
2078
2086
|
justify-content: space-between;
|
|
2079
|
-
padding: 16px;
|
|
2087
|
+
padding: var(--spacing-4, 16px);
|
|
2080
2088
|
border-width: 1.5px;
|
|
2081
2089
|
transform: rotate(-4deg);
|
|
2082
2090
|
filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.02));
|
|
@@ -2084,12 +2092,12 @@
|
|
|
2084
2092
|
.fds-stacked-cards__lines {
|
|
2085
2093
|
display: flex;
|
|
2086
2094
|
flex-direction: column;
|
|
2087
|
-
gap:
|
|
2095
|
+
gap: var(--spacing-1, 4px);
|
|
2088
2096
|
width: 100px;
|
|
2089
2097
|
}
|
|
2090
2098
|
.fds-stacked-cards__lines > span {
|
|
2091
2099
|
height: 6px;
|
|
2092
|
-
border-radius:
|
|
2100
|
+
border-radius: var(--radius-xs, 2px);
|
|
2093
2101
|
}
|
|
2094
2102
|
.fds-stacked-cards__lines > span:nth-child(1) {
|
|
2095
2103
|
width: 100%;
|
|
@@ -2144,7 +2152,7 @@
|
|
|
2144
2152
|
}
|
|
2145
2153
|
.fds-empty--compact .fds-empty__title {
|
|
2146
2154
|
font-size: var(--font-size-text-md, 16px);
|
|
2147
|
-
line-height: 24px;
|
|
2155
|
+
line-height: var(--line-height-text-md, 24px);
|
|
2148
2156
|
letter-spacing: 0;
|
|
2149
2157
|
}
|
|
2150
2158
|
|
|
@@ -2153,10 +2161,10 @@
|
|
|
2153
2161
|
box-sizing: border-box;
|
|
2154
2162
|
display: flex;
|
|
2155
2163
|
align-items: center;
|
|
2156
|
-
gap:
|
|
2157
|
-
padding:
|
|
2164
|
+
gap: var(--spacing-3, 12px);
|
|
2165
|
+
padding: var(--spacing-3, 12px) var(--spacing-4, 16px);
|
|
2158
2166
|
border: 1px solid var(--fds-callout-border);
|
|
2159
|
-
border-radius: var(--radius-lg,
|
|
2167
|
+
border-radius: var(--radius-lg, 8px);
|
|
2160
2168
|
background: var(--fds-callout-bg);
|
|
2161
2169
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
2162
2170
|
color: var(--color-text, #171717);
|
|
@@ -2169,7 +2177,7 @@
|
|
|
2169
2177
|
align-self: flex-start;
|
|
2170
2178
|
width: 32px;
|
|
2171
2179
|
height: 32px;
|
|
2172
|
-
border-radius: var(--radius-md,
|
|
2180
|
+
border-radius: var(--radius-md, 6px);
|
|
2173
2181
|
background: var(--color-bg, #ffffff);
|
|
2174
2182
|
color: var(--fds-callout-icon);
|
|
2175
2183
|
}
|
|
@@ -2185,10 +2193,10 @@
|
|
|
2185
2193
|
display: flex;
|
|
2186
2194
|
flex-wrap: wrap;
|
|
2187
2195
|
align-items: center;
|
|
2188
|
-
gap: 4px 8px;
|
|
2196
|
+
gap: var(--spacing-1, 4px) var(--spacing-2, 8px);
|
|
2189
2197
|
margin: 0;
|
|
2190
2198
|
font-size: var(--font-size-text-sm, 14px);
|
|
2191
|
-
line-height: 20px;
|
|
2199
|
+
line-height: var(--line-height-text-compact, 20px);
|
|
2192
2200
|
font-weight: var(--font-weight-semibold, 600);
|
|
2193
2201
|
}
|
|
2194
2202
|
.fds-callout__aside {
|
|
@@ -2196,14 +2204,14 @@
|
|
|
2196
2204
|
}
|
|
2197
2205
|
.fds-callout__text {
|
|
2198
2206
|
margin-top: 2px;
|
|
2199
|
-
font-size: 13px;
|
|
2200
|
-
line-height: 20px;
|
|
2207
|
+
font-size: var(--font-size-text-compact, 13px);
|
|
2208
|
+
line-height: var(--line-height-text-compact, 20px);
|
|
2201
2209
|
color: var(--color-text-secondary, #525252);
|
|
2202
2210
|
}
|
|
2203
2211
|
.fds-callout__action {
|
|
2204
2212
|
display: flex;
|
|
2205
2213
|
flex-shrink: 0;
|
|
2206
|
-
gap: 8px;
|
|
2214
|
+
gap: var(--spacing-2, 8px);
|
|
2207
2215
|
}
|
|
2208
2216
|
@media (max-width: 480px) {
|
|
2209
2217
|
.fds-callout {
|
|
@@ -2211,7 +2219,7 @@
|
|
|
2211
2219
|
}
|
|
2212
2220
|
.fds-callout__action {
|
|
2213
2221
|
flex-basis: 100%;
|
|
2214
|
-
padding-left:
|
|
2222
|
+
padding-left: var(--spacing-12, 48px);
|
|
2215
2223
|
}
|
|
2216
2224
|
}
|
|
2217
2225
|
.fds-callout--neutral {
|
|
@@ -2220,23 +2228,23 @@
|
|
|
2220
2228
|
--fds-callout-icon: var(--color-text-secondary, #525252);
|
|
2221
2229
|
}
|
|
2222
2230
|
.fds-callout--accent {
|
|
2223
|
-
--fds-callout-bg: var(--color-accent-subtle, #
|
|
2224
|
-
--fds-callout-border: var(--color-accent-muted, #
|
|
2231
|
+
--fds-callout-bg: var(--color-accent-subtle, #ffedd5);
|
|
2232
|
+
--fds-callout-border: var(--color-accent-muted, #fb923c);
|
|
2225
2233
|
--fds-callout-icon: var(--color-accent, #ea580c);
|
|
2226
2234
|
}
|
|
2227
2235
|
.fds-callout--info {
|
|
2228
2236
|
--fds-callout-bg: var(--color-info-surface, #eff6ff);
|
|
2229
|
-
--fds-callout-border: var(--color-info, #
|
|
2237
|
+
--fds-callout-border: var(--color-info, #1d4ed8);
|
|
2230
2238
|
--fds-callout-icon: var(--color-info-strong, #2563eb);
|
|
2231
2239
|
}
|
|
2232
2240
|
.fds-callout--success {
|
|
2233
2241
|
--fds-callout-bg: var(--color-success-bg, #f0fdf4);
|
|
2234
|
-
--fds-callout-border: var(--color-success, #
|
|
2242
|
+
--fds-callout-border: var(--color-success, #059669);
|
|
2235
2243
|
--fds-callout-icon: var(--color-success-text, #15803d);
|
|
2236
2244
|
}
|
|
2237
2245
|
.fds-callout--warning {
|
|
2238
2246
|
--fds-callout-bg: var(--color-warning-bg, #fffbeb);
|
|
2239
|
-
--fds-callout-border: var(--color-warning-border, #
|
|
2247
|
+
--fds-callout-border: var(--color-warning-border, #fde68a);
|
|
2240
2248
|
--fds-callout-icon: var(--color-warning-text, #92400e);
|
|
2241
2249
|
}
|
|
2242
2250
|
.fds-callout--danger {
|
|
@@ -2328,14 +2336,14 @@
|
|
|
2328
2336
|
.fds-stat__label {
|
|
2329
2337
|
margin: 0;
|
|
2330
2338
|
font-size: var(--font-size-text-sm, 14px);
|
|
2331
|
-
line-height: 20px;
|
|
2339
|
+
line-height: var(--line-height-text-compact, 20px);
|
|
2332
2340
|
font-weight: var(--font-weight-medium, 500);
|
|
2333
2341
|
color: var(--color-text-secondary, #525252);
|
|
2334
2342
|
}
|
|
2335
2343
|
.fds-stat__value {
|
|
2336
2344
|
margin: 0;
|
|
2337
2345
|
font-size: var(--font-size-display-md, 36px);
|
|
2338
|
-
line-height: 44px;
|
|
2346
|
+
line-height: var(--line-height-display-md, 44px);
|
|
2339
2347
|
font-weight: var(--font-weight-semibold, 600);
|
|
2340
2348
|
letter-spacing: -0.02em;
|
|
2341
2349
|
color: var(--color-text, #171717);
|
|
@@ -2379,7 +2387,7 @@
|
|
|
2379
2387
|
flex-shrink: 0;
|
|
2380
2388
|
width: 16px;
|
|
2381
2389
|
height: 16px;
|
|
2382
|
-
margin-top:
|
|
2390
|
+
margin-top: var(--spacing-1, 4px);
|
|
2383
2391
|
border: 1px solid var(--color-border-strong, #d4d4d4);
|
|
2384
2392
|
border-radius: var(--radius-sm, 4px);
|
|
2385
2393
|
background: var(--color-bg, #ffffff);
|
|
@@ -2429,14 +2437,14 @@
|
|
|
2429
2437
|
.fds-checkbox__label {
|
|
2430
2438
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
2431
2439
|
font-size: var(--font-size-text-sm, 14px);
|
|
2432
|
-
line-height: 22px;
|
|
2440
|
+
line-height: var(--line-height-text-sm, 22px);
|
|
2433
2441
|
font-weight: var(--font-weight-medium, 500);
|
|
2434
2442
|
color: var(--color-text, #171717);
|
|
2435
2443
|
}
|
|
2436
2444
|
.fds-checkbox__description {
|
|
2437
2445
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
2438
2446
|
font-size: var(--font-size-text-sm, 14px);
|
|
2439
|
-
line-height: 22px;
|
|
2447
|
+
line-height: var(--line-height-text-sm, 22px);
|
|
2440
2448
|
color: var(--color-text-secondary, #525252);
|
|
2441
2449
|
}
|
|
2442
2450
|
@media (prefers-reduced-motion: reduce) {
|
|
@@ -2474,7 +2482,7 @@
|
|
|
2474
2482
|
flex-shrink: 0;
|
|
2475
2483
|
width: 16px;
|
|
2476
2484
|
height: 16px;
|
|
2477
|
-
margin-top:
|
|
2485
|
+
margin-top: var(--spacing-1, 4px);
|
|
2478
2486
|
border: 1px solid var(--color-border-strong, #d4d4d4);
|
|
2479
2487
|
border-radius: var(--radius-full, 9999px);
|
|
2480
2488
|
background: var(--color-bg, #ffffff);
|
|
@@ -2508,14 +2516,14 @@
|
|
|
2508
2516
|
.fds-radio__label {
|
|
2509
2517
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
2510
2518
|
font-size: var(--font-size-text-sm, 14px);
|
|
2511
|
-
line-height: 22px;
|
|
2519
|
+
line-height: var(--line-height-text-sm, 22px);
|
|
2512
2520
|
font-weight: var(--font-weight-medium, 500);
|
|
2513
2521
|
color: var(--color-text, #171717);
|
|
2514
2522
|
}
|
|
2515
2523
|
.fds-radio__description {
|
|
2516
2524
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
2517
2525
|
font-size: var(--font-size-text-sm, 14px);
|
|
2518
|
-
line-height: 22px;
|
|
2526
|
+
line-height: var(--line-height-text-sm, 22px);
|
|
2519
2527
|
color: var(--color-text-secondary, #525252);
|
|
2520
2528
|
}
|
|
2521
2529
|
@media (prefers-reduced-motion: reduce) {
|
|
@@ -2608,7 +2616,7 @@
|
|
|
2608
2616
|
border-radius: var(--radius-lg, 8px);
|
|
2609
2617
|
background: var(--color-surface-subtle, #fafafa);
|
|
2610
2618
|
font-size: var(--font-size-text-sm, 14px);
|
|
2611
|
-
line-height: 20px;
|
|
2619
|
+
line-height: var(--line-height-text-compact, 20px);
|
|
2612
2620
|
color: var(--color-text-muted, #a3a3a3);
|
|
2613
2621
|
}
|
|
2614
2622
|
.fds-steps__icon {
|
|
@@ -2664,8 +2672,8 @@
|
|
|
2664
2672
|
}
|
|
2665
2673
|
.fds-input__label {
|
|
2666
2674
|
font-family: var(--font-display, "Rethink Sans", system-ui, sans-serif);
|
|
2667
|
-
font-size: var(--font-size-
|
|
2668
|
-
line-height: var(--line-height-
|
|
2675
|
+
font-size: var(--font-size-text-compact, 13px);
|
|
2676
|
+
line-height: var(--line-height-text-compact, 20px);
|
|
2669
2677
|
font-weight: var(--font-weight-medium, 500);
|
|
2670
2678
|
color: var(--color-text, #171717);
|
|
2671
2679
|
}
|
|
@@ -2673,7 +2681,7 @@
|
|
|
2673
2681
|
display: flex;
|
|
2674
2682
|
align-items: center;
|
|
2675
2683
|
gap: var(--spacing-2, 8px);
|
|
2676
|
-
min-height:
|
|
2684
|
+
min-height: var(--size-control-md, 36px);
|
|
2677
2685
|
padding: 0 var(--spacing-1, 4px) 0 var(--spacing-3, 12px);
|
|
2678
2686
|
background: var(--color-surface-raised, #ffffff);
|
|
2679
2687
|
border: 1px solid var(--color-border-strong, #d4d4d4);
|
|
@@ -2700,8 +2708,8 @@
|
|
|
2700
2708
|
.fds-input__icon {
|
|
2701
2709
|
display: inline-flex;
|
|
2702
2710
|
flex-shrink: 0;
|
|
2703
|
-
width:
|
|
2704
|
-
height:
|
|
2711
|
+
width: 16px;
|
|
2712
|
+
height: 16px;
|
|
2705
2713
|
color: var(--color-text-muted, #a3a3a3);
|
|
2706
2714
|
}
|
|
2707
2715
|
.fds-input__icon > svg {
|
|
@@ -2711,12 +2719,12 @@
|
|
|
2711
2719
|
.fds-input__control {
|
|
2712
2720
|
flex: 1 1 auto;
|
|
2713
2721
|
min-width: 0;
|
|
2714
|
-
height:
|
|
2722
|
+
height: calc(var(--size-control-md, 36px) - 2px);
|
|
2715
2723
|
padding: 0 var(--spacing-2, 8px) 0 0;
|
|
2716
2724
|
border: 0;
|
|
2717
2725
|
background: transparent;
|
|
2718
2726
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
2719
|
-
font-size: var(--font-size-text-
|
|
2727
|
+
font-size: var(--font-size-text-sm, 14px);
|
|
2720
2728
|
color: var(--color-text, #171717);
|
|
2721
2729
|
text-overflow: ellipsis;
|
|
2722
2730
|
}
|
|
@@ -2742,8 +2750,8 @@
|
|
|
2742
2750
|
.fds-input__error {
|
|
2743
2751
|
margin: 0;
|
|
2744
2752
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
2745
|
-
font-size: var(--font-size-text-
|
|
2746
|
-
line-height: var(--line-height-text-
|
|
2753
|
+
font-size: var(--font-size-text-compact, 13px);
|
|
2754
|
+
line-height: var(--line-height-text-compact, 20px);
|
|
2747
2755
|
}
|
|
2748
2756
|
.fds-input__hint {
|
|
2749
2757
|
color: var(--color-text-secondary, #525252);
|
|
@@ -2775,18 +2783,18 @@
|
|
|
2775
2783
|
cursor: not-allowed;
|
|
2776
2784
|
}
|
|
2777
2785
|
.fds-icon-button--medium {
|
|
2778
|
-
width:
|
|
2779
|
-
height:
|
|
2786
|
+
width: var(--size-control-md, 36px);
|
|
2787
|
+
height: var(--size-control-md, 36px);
|
|
2780
2788
|
}
|
|
2781
2789
|
.fds-icon-button--small {
|
|
2782
|
-
width: 28px;
|
|
2783
|
-
height: 28px;
|
|
2790
|
+
width: var(--size-control-xs, 28px);
|
|
2791
|
+
height: var(--size-control-xs, 28px);
|
|
2784
2792
|
border-radius: var(--radius-sm, 4px);
|
|
2785
2793
|
}
|
|
2786
2794
|
.fds-icon-button__icon {
|
|
2787
2795
|
display: inline-flex;
|
|
2788
|
-
width:
|
|
2789
|
-
height:
|
|
2796
|
+
width: 16px;
|
|
2797
|
+
height: 16px;
|
|
2790
2798
|
}
|
|
2791
2799
|
.fds-icon-button--small .fds-icon-button__icon {
|
|
2792
2800
|
width: 16px;
|
|
@@ -2844,11 +2852,11 @@
|
|
|
2844
2852
|
display: flex;
|
|
2845
2853
|
align-items: center;
|
|
2846
2854
|
gap: var(--spacing-2, 8px);
|
|
2847
|
-
padding: 8px var(--spacing-2, 8px);
|
|
2855
|
+
padding: var(--spacing-2, 8px) var(--spacing-2, 8px);
|
|
2848
2856
|
border-radius: var(--radius-sm, 4px);
|
|
2849
2857
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
2850
2858
|
font-size: var(--font-size-text-sm, 14px);
|
|
2851
|
-
line-height: 20px;
|
|
2859
|
+
line-height: var(--line-height-text-compact, 20px);
|
|
2852
2860
|
color: var(--color-text, #171717);
|
|
2853
2861
|
white-space: nowrap;
|
|
2854
2862
|
cursor: pointer;
|
|
@@ -2885,21 +2893,21 @@
|
|
|
2885
2893
|
min-width: 560px;
|
|
2886
2894
|
border-collapse: collapse;
|
|
2887
2895
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
2888
|
-
font-size: var(--font-size-text-
|
|
2889
|
-
line-height: 20px;
|
|
2896
|
+
font-size: var(--font-size-text-compact, 13px);
|
|
2897
|
+
line-height: var(--line-height-text-compact, 20px);
|
|
2890
2898
|
color: var(--color-text, #171717);
|
|
2891
2899
|
}
|
|
2892
2900
|
.fds-table__table th {
|
|
2893
|
-
padding:
|
|
2901
|
+
padding: var(--spacing-2, 8px) var(--spacing-4, 16px);
|
|
2894
2902
|
background: var(--color-surface, #f5f5f5);
|
|
2895
|
-
font-size: var(--font-size-text-
|
|
2903
|
+
font-size: var(--font-size-text-2xs, 11px);
|
|
2896
2904
|
font-weight: var(--font-weight-medium, 500);
|
|
2897
2905
|
color: var(--color-text-secondary, #525252);
|
|
2898
2906
|
text-align: left;
|
|
2899
2907
|
white-space: nowrap;
|
|
2900
2908
|
}
|
|
2901
2909
|
.fds-table__table td {
|
|
2902
|
-
padding:
|
|
2910
|
+
padding: var(--spacing-3, 12px) var(--spacing-4, 16px);
|
|
2903
2911
|
border-bottom: 1px solid var(--color-border-light, #f5f5f5);
|
|
2904
2912
|
vertical-align: middle;
|
|
2905
2913
|
}
|
|
@@ -2918,7 +2926,7 @@
|
|
|
2918
2926
|
display: flex;
|
|
2919
2927
|
flex-direction: column;
|
|
2920
2928
|
min-width: 0;
|
|
2921
|
-
padding:
|
|
2929
|
+
padding: var(--spacing-1, 4px);
|
|
2922
2930
|
background: var(--color-surface-subtle, #fafafa);
|
|
2923
2931
|
border: 1px solid var(--color-border, #e5e5e5);
|
|
2924
2932
|
border-radius: var(--radius-2xl, 16px);
|
|
@@ -2936,11 +2944,11 @@
|
|
|
2936
2944
|
.fds-pricing-card__eyebrow {
|
|
2937
2945
|
align-self: flex-start;
|
|
2938
2946
|
margin-bottom: var(--spacing-3, 12px);
|
|
2939
|
-
padding: 2px 8px;
|
|
2947
|
+
padding: 2px var(--spacing-2, 8px);
|
|
2940
2948
|
border-radius: var(--radius-sm, 4px);
|
|
2941
2949
|
background: var(--color-surface, #f5f5f5);
|
|
2942
2950
|
font-size: var(--font-size-text-xs, 12px);
|
|
2943
|
-
line-height: 18px;
|
|
2951
|
+
line-height: var(--line-height-text-xs, 18px);
|
|
2944
2952
|
font-weight: var(--font-weight-medium, 500);
|
|
2945
2953
|
letter-spacing: 0.02em;
|
|
2946
2954
|
text-transform: uppercase;
|
|
@@ -2952,21 +2960,21 @@
|
|
|
2952
2960
|
gap: var(--spacing-2, 8px);
|
|
2953
2961
|
margin: 0;
|
|
2954
2962
|
font-family: var(--font-display, "Rethink Sans", system-ui, sans-serif);
|
|
2955
|
-
font-size:
|
|
2956
|
-
line-height:
|
|
2963
|
+
font-size: var(--font-size-text-xl, 20px);
|
|
2964
|
+
line-height: var(--line-height-display-xs, 32px);
|
|
2957
2965
|
font-weight: var(--font-weight-medium, 500);
|
|
2958
2966
|
letter-spacing: -0.01em;
|
|
2959
2967
|
}
|
|
2960
2968
|
.fds-pricing-card__price {
|
|
2961
2969
|
display: flex;
|
|
2962
2970
|
align-items: baseline;
|
|
2963
|
-
gap:
|
|
2971
|
+
gap: var(--spacing-1, 4px);
|
|
2964
2972
|
margin: var(--spacing-6, 24px) 0 0;
|
|
2965
2973
|
}
|
|
2966
2974
|
.fds-pricing-card__amount {
|
|
2967
2975
|
font-family: var(--font-display, "Rethink Sans", system-ui, sans-serif);
|
|
2968
|
-
font-size: 36px;
|
|
2969
|
-
line-height: 44px;
|
|
2976
|
+
font-size: var(--font-size-display-md, 36px);
|
|
2977
|
+
line-height: var(--line-height-display-md, 44px);
|
|
2970
2978
|
font-weight: var(--font-weight-medium, 500);
|
|
2971
2979
|
letter-spacing: -0.02em;
|
|
2972
2980
|
}
|
|
@@ -2977,7 +2985,7 @@
|
|
|
2977
2985
|
.fds-pricing-card__description {
|
|
2978
2986
|
margin: var(--spacing-3, 12px) 0 0;
|
|
2979
2987
|
font-size: var(--font-size-text-sm, 14px);
|
|
2980
|
-
line-height: 22px;
|
|
2988
|
+
line-height: var(--line-height-text-sm, 22px);
|
|
2981
2989
|
color: var(--color-text-secondary, #525252);
|
|
2982
2990
|
}
|
|
2983
2991
|
.fds-pricing-card__action {
|
|
@@ -2991,7 +2999,7 @@
|
|
|
2991
2999
|
.fds-pricing-card__featuresTitle {
|
|
2992
3000
|
margin: 0;
|
|
2993
3001
|
font-size: var(--font-size-text-sm, 14px);
|
|
2994
|
-
line-height: 22px;
|
|
3002
|
+
line-height: var(--line-height-text-sm, 22px);
|
|
2995
3003
|
font-weight: var(--font-weight-medium, 500);
|
|
2996
3004
|
letter-spacing: 0.02em;
|
|
2997
3005
|
text-transform: uppercase;
|
|
@@ -2999,7 +3007,7 @@
|
|
|
2999
3007
|
.fds-pricing-card__intro {
|
|
3000
3008
|
margin: var(--spacing-4, 16px) 0 0;
|
|
3001
3009
|
font-size: var(--font-size-text-sm, 14px);
|
|
3002
|
-
line-height: 22px;
|
|
3010
|
+
line-height: var(--line-height-text-sm, 22px);
|
|
3003
3011
|
color: var(--color-text-secondary, #525252);
|
|
3004
3012
|
}
|
|
3005
3013
|
.fds-pricing-card__intro strong,
|
|
@@ -3020,7 +3028,7 @@
|
|
|
3020
3028
|
align-items: center;
|
|
3021
3029
|
gap: var(--spacing-3, 12px);
|
|
3022
3030
|
font-size: var(--font-size-text-sm, 14px);
|
|
3023
|
-
line-height: 22px;
|
|
3031
|
+
line-height: var(--line-height-text-sm, 22px);
|
|
3024
3032
|
}
|
|
3025
3033
|
.fds-pricing-card__check {
|
|
3026
3034
|
display: inline-flex;
|
|
@@ -3029,7 +3037,7 @@
|
|
|
3029
3037
|
flex-shrink: 0;
|
|
3030
3038
|
width: 22px;
|
|
3031
3039
|
height: 22px;
|
|
3032
|
-
border-radius:
|
|
3040
|
+
border-radius: var(--radius-full, 9999px);
|
|
3033
3041
|
background: var(--color-surface, #f5f5f5);
|
|
3034
3042
|
color: var(--color-text-secondary, #525252);
|
|
3035
3043
|
}
|
|
@@ -3046,7 +3054,7 @@
|
|
|
3046
3054
|
}
|
|
3047
3055
|
.fds-pricing-card--highlighted .fds-pricing-card__check {
|
|
3048
3056
|
background: var(--color-accent-muted, #fb923c);
|
|
3049
|
-
color: #ffffff;
|
|
3057
|
+
color: var(--color-primary-text, #ffffff);
|
|
3050
3058
|
}
|
|
3051
3059
|
@media (max-width: 600px) {
|
|
3052
3060
|
.fds-pricing-card__top {
|