@usefidel/design-system 0.18.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 +332 -14
- package/dist/index.css +833 -198
- package/dist/index.d.cts +164 -11
- package/dist/index.d.ts +164 -11
- package/dist/index.js +333 -14
- 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
|
}
|
|
@@ -625,6 +633,46 @@
|
|
|
625
633
|
flex-shrink: 0;
|
|
626
634
|
color: var(--color-text-muted, #a3a3a3);
|
|
627
635
|
}
|
|
636
|
+
.fds-select__trigger--small {
|
|
637
|
+
min-height: 32px;
|
|
638
|
+
padding: 0 var(--spacing-2, 8px) 0 var(--spacing-3, 12px);
|
|
639
|
+
border-color: var(--color-border, #e5e5e5);
|
|
640
|
+
font-size: var(--font-size-text-sm, 14px);
|
|
641
|
+
}
|
|
642
|
+
.fds-select__trigger--small .fds-select__chevron {
|
|
643
|
+
color: var(--color-text, #171717);
|
|
644
|
+
}
|
|
645
|
+
.fds-select-field--inline,
|
|
646
|
+
.fds-select-field--inline .fds-select {
|
|
647
|
+
width: auto;
|
|
648
|
+
}
|
|
649
|
+
.fds-select__trigger--inline {
|
|
650
|
+
width: auto;
|
|
651
|
+
min-height: 32px;
|
|
652
|
+
padding: 0 var(--spacing-2, 8px);
|
|
653
|
+
border-color: transparent;
|
|
654
|
+
background: transparent;
|
|
655
|
+
font-size: var(--font-size-text-sm, 14px);
|
|
656
|
+
color: var(--color-text-tertiary, #737373);
|
|
657
|
+
}
|
|
658
|
+
.fds-select__trigger--inline:hover:not(:disabled) {
|
|
659
|
+
background: var(--color-surface-subtle, #fafafa);
|
|
660
|
+
}
|
|
661
|
+
.fds-select__trigger--inline:focus-visible,
|
|
662
|
+
.fds-select__trigger--inline.fds-select__trigger--open {
|
|
663
|
+
border-color: transparent;
|
|
664
|
+
box-shadow: none;
|
|
665
|
+
outline: 2px solid var(--color-accent, #ea580c);
|
|
666
|
+
outline-offset: 0;
|
|
667
|
+
}
|
|
668
|
+
.fds-select__trigger--small,
|
|
669
|
+
.fds-select__trigger--inline {
|
|
670
|
+
width: auto;
|
|
671
|
+
}
|
|
672
|
+
.fds-select__trigger--small .fds-select__value,
|
|
673
|
+
.fds-select__trigger--inline .fds-select__value {
|
|
674
|
+
flex: 0 1 auto;
|
|
675
|
+
}
|
|
628
676
|
.fds-select__popover {
|
|
629
677
|
position: absolute;
|
|
630
678
|
top: calc(100% + 4px);
|
|
@@ -637,13 +685,23 @@
|
|
|
637
685
|
box-shadow: var(--shadow-lg, 0 4px 8px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.1));
|
|
638
686
|
overflow: hidden;
|
|
639
687
|
}
|
|
688
|
+
.fds-select__trigger--small + .fds-select__popover,
|
|
689
|
+
.fds-select__trigger--inline + .fds-select__popover {
|
|
690
|
+
right: auto;
|
|
691
|
+
min-width: 260px;
|
|
692
|
+
}
|
|
693
|
+
.fds-select__trigger--small + .fds-select__popover--end,
|
|
694
|
+
.fds-select__trigger--inline + .fds-select__popover--end {
|
|
695
|
+
left: auto;
|
|
696
|
+
right: 0;
|
|
697
|
+
}
|
|
640
698
|
.fds-select__search {
|
|
641
699
|
padding: var(--spacing-2, 8px);
|
|
642
700
|
border-bottom: 1px solid var(--color-border-light, #f5f5f5);
|
|
643
701
|
}
|
|
644
702
|
.fds-select__searchInput {
|
|
645
703
|
width: 100%;
|
|
646
|
-
padding: 8px var(--spacing-3, 12px);
|
|
704
|
+
padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
|
|
647
705
|
border: 1px solid var(--color-border-strong, #d4d4d4);
|
|
648
706
|
border-radius: var(--radius-sm, 4px);
|
|
649
707
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
@@ -674,12 +732,12 @@
|
|
|
674
732
|
display: flex;
|
|
675
733
|
align-items: center;
|
|
676
734
|
gap: var(--spacing-2, 8px);
|
|
677
|
-
padding: 8px var(--spacing-2, 8px);
|
|
735
|
+
padding: var(--spacing-2, 8px) var(--spacing-2, 8px);
|
|
678
736
|
border-radius: var(--radius-sm, 4px);
|
|
679
737
|
cursor: pointer;
|
|
680
738
|
}
|
|
681
739
|
.fds-select__option--active {
|
|
682
|
-
background: var(--color-surface, #
|
|
740
|
+
background: var(--color-surface, #f5f5f5);
|
|
683
741
|
}
|
|
684
742
|
.fds-select__option--disabled {
|
|
685
743
|
opacity: 0.5;
|
|
@@ -691,10 +749,23 @@
|
|
|
691
749
|
flex-shrink: 0;
|
|
692
750
|
color: var(--color-text-muted, #a3a3a3);
|
|
693
751
|
}
|
|
752
|
+
.fds-select__optBody {
|
|
753
|
+
display: flex;
|
|
754
|
+
flex-direction: column;
|
|
755
|
+
gap: 2px;
|
|
756
|
+
min-width: 0;
|
|
757
|
+
flex: 1 1 auto;
|
|
758
|
+
}
|
|
759
|
+
.fds-select__optDescription {
|
|
760
|
+
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
761
|
+
font-size: var(--font-size-text-xs, 12px);
|
|
762
|
+
line-height: var(--line-height-text-xs, 18px);
|
|
763
|
+
color: var(--color-text-tertiary, #737373);
|
|
764
|
+
}
|
|
694
765
|
.fds-select__optText {
|
|
695
766
|
display: inline-flex;
|
|
696
767
|
align-items: baseline;
|
|
697
|
-
gap:
|
|
768
|
+
gap: var(--spacing-1, 4px);
|
|
698
769
|
min-width: 0;
|
|
699
770
|
flex: 1 1 auto;
|
|
700
771
|
}
|
|
@@ -716,7 +787,7 @@
|
|
|
716
787
|
display: inline-flex;
|
|
717
788
|
align-items: center;
|
|
718
789
|
flex-shrink: 0;
|
|
719
|
-
color: var(--color-
|
|
790
|
+
color: var(--color-text, #171717);
|
|
720
791
|
}
|
|
721
792
|
.fds-select__hint,
|
|
722
793
|
.fds-select__error {
|
|
@@ -771,7 +842,7 @@
|
|
|
771
842
|
position: absolute;
|
|
772
843
|
top: 50%;
|
|
773
844
|
transform: translateY(-50%);
|
|
774
|
-
background-color: #ffffff;
|
|
845
|
+
background-color: var(--color-surface-raised, #ffffff);
|
|
775
846
|
border-radius: var(--radius-full, 9999px);
|
|
776
847
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
|
|
777
848
|
transition: left var(--duration-quick, 150ms) var(--ease-out, ease);
|
|
@@ -838,10 +909,10 @@
|
|
|
838
909
|
display: flex;
|
|
839
910
|
align-items: center;
|
|
840
911
|
gap: var(--spacing-5, 20px);
|
|
841
|
-
height:
|
|
912
|
+
height: var(--size-nav, 56px);
|
|
842
913
|
padding: 0 var(--spacing-5, 20px);
|
|
843
|
-
background: var(--color-surface, #
|
|
844
|
-
border-bottom: 1px solid var(--color-border-light, #
|
|
914
|
+
background: var(--color-surface, #f5f5f5);
|
|
915
|
+
border-bottom: 1px solid var(--color-border-light, #f5f5f5);
|
|
845
916
|
position: sticky;
|
|
846
917
|
top: 0;
|
|
847
918
|
z-index: 100;
|
|
@@ -864,12 +935,12 @@
|
|
|
864
935
|
align-items: center;
|
|
865
936
|
gap: var(--spacing-2, 8px);
|
|
866
937
|
flex-shrink: 0;
|
|
867
|
-
padding:
|
|
938
|
+
padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
|
|
868
939
|
color: var(--color-text-muted, #a3a3a3);
|
|
869
940
|
font-family: var(--font-display, "Rethink Sans", system-ui, sans-serif);
|
|
870
|
-
font-size: 14px;
|
|
871
|
-
line-height:
|
|
872
|
-
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);
|
|
873
944
|
white-space: nowrap;
|
|
874
945
|
text-decoration: none;
|
|
875
946
|
transition: color var(--duration-quick, 150ms) var(--ease-out, ease);
|
|
@@ -881,7 +952,7 @@
|
|
|
881
952
|
.fds-app-nav__links > *:focus-visible {
|
|
882
953
|
outline: 2px solid var(--color-accent, #ea580c);
|
|
883
954
|
outline-offset: -2px;
|
|
884
|
-
border-radius: var(--radius-sm,
|
|
955
|
+
border-radius: var(--radius-sm, 4px);
|
|
885
956
|
}
|
|
886
957
|
.fds-app-nav__links > [aria-current=page]::after {
|
|
887
958
|
content: "";
|
|
@@ -890,7 +961,7 @@
|
|
|
890
961
|
right: var(--spacing-3, 12px);
|
|
891
962
|
bottom: 2px;
|
|
892
963
|
height: 2px;
|
|
893
|
-
border-radius: 2px;
|
|
964
|
+
border-radius: var(--radius-xs, 2px);
|
|
894
965
|
background: var(--color-accent, #ea580c);
|
|
895
966
|
}
|
|
896
967
|
.fds-app-nav__actions {
|
|
@@ -912,11 +983,11 @@
|
|
|
912
983
|
display: grid;
|
|
913
984
|
place-items: center;
|
|
914
985
|
flex-shrink: 0;
|
|
915
|
-
width:
|
|
916
|
-
height:
|
|
986
|
+
width: var(--size-control-md, 36px);
|
|
987
|
+
height: var(--size-control-md, 36px);
|
|
917
988
|
padding: 0;
|
|
918
989
|
border: none;
|
|
919
|
-
border-radius: var(--radius-md,
|
|
990
|
+
border-radius: var(--radius-md, 6px);
|
|
920
991
|
background: transparent;
|
|
921
992
|
color: var(--color-text, #171717);
|
|
922
993
|
cursor: pointer;
|
|
@@ -924,7 +995,7 @@
|
|
|
924
995
|
}
|
|
925
996
|
.fds-app-nav__toggle:hover,
|
|
926
997
|
.fds-app-nav__toggle[aria-expanded=true] {
|
|
927
|
-
background: var(--color-surface-hover, #
|
|
998
|
+
background: var(--color-surface-hover, #ececec);
|
|
928
999
|
}
|
|
929
1000
|
.fds-app-nav__toggle:focus-visible {
|
|
930
1001
|
outline: 2px solid var(--color-accent, #ea580c);
|
|
@@ -941,7 +1012,7 @@
|
|
|
941
1012
|
gap: 0;
|
|
942
1013
|
padding: var(--spacing-2, 8px);
|
|
943
1014
|
background: var(--color-surface-raised, #ffffff);
|
|
944
|
-
border-bottom: 1px solid var(--color-border-light, #
|
|
1015
|
+
border-bottom: 1px solid var(--color-border-light, #f5f5f5);
|
|
945
1016
|
box-shadow: var(--shadow-lg, 0 16px 48px rgba(0, 0, 0, 0.12));
|
|
946
1017
|
}
|
|
947
1018
|
.fds-app-nav__links[data-open] {
|
|
@@ -949,18 +1020,18 @@
|
|
|
949
1020
|
animation: fds-app-nav-menu-in var(--duration-quick, 150ms) var(--ease-out, ease) both;
|
|
950
1021
|
}
|
|
951
1022
|
.fds-app-nav__links > * {
|
|
952
|
-
padding:
|
|
953
|
-
border-radius: var(--radius-md,
|
|
954
|
-
font-size:
|
|
955
|
-
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);
|
|
956
1027
|
color: var(--color-text-secondary, #525252);
|
|
957
1028
|
}
|
|
958
1029
|
.fds-app-nav__links > *:hover {
|
|
959
|
-
background: var(--color-surface, #
|
|
1030
|
+
background: var(--color-surface, #f5f5f5);
|
|
960
1031
|
}
|
|
961
1032
|
.fds-app-nav__links > [aria-current=page] {
|
|
962
1033
|
color: var(--color-text, #171717);
|
|
963
|
-
background: var(--color-surface, #
|
|
1034
|
+
background: var(--color-surface, #f5f5f5);
|
|
964
1035
|
}
|
|
965
1036
|
.fds-app-nav__links > [aria-current=page]::after {
|
|
966
1037
|
display: none;
|
|
@@ -989,7 +1060,7 @@
|
|
|
989
1060
|
gap: var(--spacing-1, 4px);
|
|
990
1061
|
overflow-x: auto;
|
|
991
1062
|
scrollbar-width: none;
|
|
992
|
-
box-shadow: inset 0 -1px 0 var(--color-border-light, #
|
|
1063
|
+
box-shadow: inset 0 -1px 0 var(--color-border-light, #f5f5f5);
|
|
993
1064
|
}
|
|
994
1065
|
.fds-tab-nav::-webkit-scrollbar {
|
|
995
1066
|
display: none;
|
|
@@ -997,11 +1068,11 @@
|
|
|
997
1068
|
.fds-tab-nav > * {
|
|
998
1069
|
position: relative;
|
|
999
1070
|
flex-shrink: 0;
|
|
1000
|
-
padding:
|
|
1071
|
+
padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
|
|
1001
1072
|
font-family: var(--font-display, "Rethink Sans", system-ui, sans-serif);
|
|
1002
|
-
font-size:
|
|
1003
|
-
font-weight: 500;
|
|
1004
|
-
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);
|
|
1005
1076
|
white-space: nowrap;
|
|
1006
1077
|
color: var(--color-text-muted, #a3a3a3);
|
|
1007
1078
|
background: transparent;
|
|
@@ -1014,11 +1085,11 @@
|
|
|
1014
1085
|
.fds-tab-nav > *:focus-visible {
|
|
1015
1086
|
outline: 2px solid var(--color-accent, #ea580c);
|
|
1016
1087
|
outline-offset: -2px;
|
|
1017
|
-
border-radius: var(--radius-xs,
|
|
1088
|
+
border-radius: var(--radius-xs, 2px);
|
|
1018
1089
|
}
|
|
1019
1090
|
.fds-tab-nav > [aria-current=page] {
|
|
1020
1091
|
color: var(--color-text, #171717);
|
|
1021
|
-
font-weight: 600;
|
|
1092
|
+
font-weight: var(--font-weight-semibold, 600);
|
|
1022
1093
|
}
|
|
1023
1094
|
.fds-tab-nav > [aria-current=page]::after {
|
|
1024
1095
|
content: "";
|
|
@@ -1042,10 +1113,10 @@
|
|
|
1042
1113
|
to right,
|
|
1043
1114
|
#000 calc(100% - 24px),
|
|
1044
1115
|
transparent);
|
|
1045
|
-
padding-right: 24px;
|
|
1116
|
+
padding-right: var(--spacing-6, 24px);
|
|
1046
1117
|
}
|
|
1047
1118
|
.fds-tab-nav > * {
|
|
1048
|
-
padding:
|
|
1119
|
+
padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
|
|
1049
1120
|
}
|
|
1050
1121
|
}
|
|
1051
1122
|
|
|
@@ -1053,10 +1124,10 @@
|
|
|
1053
1124
|
.fds-settings-section {
|
|
1054
1125
|
display: grid;
|
|
1055
1126
|
grid-template-columns: 280px minmax(0, 1fr);
|
|
1056
|
-
gap: var(--spacing-
|
|
1127
|
+
gap: var(--spacing-10, 40px);
|
|
1057
1128
|
align-items: start;
|
|
1058
|
-
padding: var(--spacing-
|
|
1059
|
-
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);
|
|
1060
1131
|
}
|
|
1061
1132
|
.fds-settings-section:first-child {
|
|
1062
1133
|
padding-top: 0;
|
|
@@ -1071,15 +1142,15 @@
|
|
|
1071
1142
|
.fds-settings-section__title {
|
|
1072
1143
|
margin: 0 0 var(--spacing-2, 8px);
|
|
1073
1144
|
font-family: var(--font-display, "Rethink Sans", system-ui, sans-serif);
|
|
1074
|
-
font-size:
|
|
1075
|
-
font-weight: 600;
|
|
1145
|
+
font-size: var(--font-size-text-sm, 14px);
|
|
1146
|
+
font-weight: var(--font-weight-semibold, 600);
|
|
1076
1147
|
letter-spacing: -0.005em;
|
|
1077
1148
|
color: var(--color-text, #171717);
|
|
1078
1149
|
}
|
|
1079
1150
|
.fds-settings-section__description {
|
|
1080
1151
|
margin: 0;
|
|
1081
1152
|
max-width: 32ch;
|
|
1082
|
-
font-size:
|
|
1153
|
+
font-size: var(--font-size-text-compact, 13px);
|
|
1083
1154
|
line-height: 1.55;
|
|
1084
1155
|
color: var(--color-text-muted, #a3a3a3);
|
|
1085
1156
|
}
|
|
@@ -1124,7 +1195,7 @@
|
|
|
1124
1195
|
padding: var(--spacing-8, 32px) var(--spacing-8, 32px) var(--spacing-6, 24px);
|
|
1125
1196
|
background: var(--color-surface-raised, #ffffff);
|
|
1126
1197
|
border: 1px solid var(--color-border, #e5e5e5);
|
|
1127
|
-
border-radius: var(--radius-xl,
|
|
1198
|
+
border-radius: var(--radius-xl, 12px);
|
|
1128
1199
|
box-shadow: var(--shadow-lg, 0 16px 48px rgba(0, 0, 0, 0.12));
|
|
1129
1200
|
animation: fds-modal-in var(--duration-slow, 300ms) var(--ease-out, ease) both;
|
|
1130
1201
|
}
|
|
@@ -1147,7 +1218,7 @@
|
|
|
1147
1218
|
height: 32px;
|
|
1148
1219
|
padding: 0;
|
|
1149
1220
|
border: none;
|
|
1150
|
-
border-radius: var(--radius-md,
|
|
1221
|
+
border-radius: var(--radius-md, 6px);
|
|
1151
1222
|
background: transparent;
|
|
1152
1223
|
color: var(--color-text-muted, #a3a3a3);
|
|
1153
1224
|
cursor: pointer;
|
|
@@ -1155,7 +1226,7 @@
|
|
|
1155
1226
|
}
|
|
1156
1227
|
.fds-modal__close:hover:not(:disabled) {
|
|
1157
1228
|
color: var(--color-text, #171717);
|
|
1158
|
-
background: var(--color-surface, #
|
|
1229
|
+
background: var(--color-surface, #f5f5f5);
|
|
1159
1230
|
}
|
|
1160
1231
|
.fds-modal__close:focus-visible {
|
|
1161
1232
|
outline: 2px solid var(--color-accent, #ea580c);
|
|
@@ -1178,21 +1249,21 @@
|
|
|
1178
1249
|
.fds-modal__title {
|
|
1179
1250
|
margin: 0 var(--spacing-8, 32px) var(--spacing-3, 12px) 0;
|
|
1180
1251
|
font-family: var(--font-display, "Rethink Sans", system-ui, sans-serif);
|
|
1181
|
-
font-size: 20px;
|
|
1182
|
-
font-weight: 600;
|
|
1252
|
+
font-size: var(--font-size-text-xl, 20px);
|
|
1253
|
+
font-weight: var(--font-weight-semibold, 600);
|
|
1183
1254
|
line-height: 1.25;
|
|
1184
1255
|
letter-spacing: -0.015em;
|
|
1185
1256
|
color: var(--color-text, #171717);
|
|
1186
1257
|
}
|
|
1187
1258
|
.fds-modal__description {
|
|
1188
1259
|
margin: 0 0 var(--spacing-5, 20px);
|
|
1189
|
-
font-size:
|
|
1260
|
+
font-size: var(--font-size-text-compact, 13px);
|
|
1190
1261
|
line-height: 1.55;
|
|
1191
1262
|
color: var(--color-text-secondary, #525252);
|
|
1192
1263
|
}
|
|
1193
1264
|
.fds-modal__content {
|
|
1194
1265
|
margin-bottom: var(--spacing-5, 20px);
|
|
1195
|
-
font-size:
|
|
1266
|
+
font-size: var(--font-size-text-compact, 13px);
|
|
1196
1267
|
line-height: 1.55;
|
|
1197
1268
|
color: var(--color-text-secondary, #525252);
|
|
1198
1269
|
}
|
|
@@ -1250,7 +1321,7 @@
|
|
|
1250
1321
|
gap: var(--spacing-1, 4px);
|
|
1251
1322
|
overflow-x: auto;
|
|
1252
1323
|
scrollbar-width: none;
|
|
1253
|
-
box-shadow: inset 0 -1px 0 var(--color-border-light, #
|
|
1324
|
+
box-shadow: inset 0 -1px 0 var(--color-border-light, #f5f5f5);
|
|
1254
1325
|
}
|
|
1255
1326
|
.fds-segmented::-webkit-scrollbar {
|
|
1256
1327
|
display: none;
|
|
@@ -1259,16 +1330,16 @@
|
|
|
1259
1330
|
position: relative;
|
|
1260
1331
|
display: inline-flex;
|
|
1261
1332
|
align-items: center;
|
|
1262
|
-
gap:
|
|
1333
|
+
gap: var(--spacing-1, 4px);
|
|
1263
1334
|
flex-shrink: 0;
|
|
1264
|
-
padding:
|
|
1335
|
+
padding: var(--spacing-2, 8px);
|
|
1265
1336
|
border: none;
|
|
1266
1337
|
background: transparent;
|
|
1267
1338
|
color: var(--color-text-muted, #a3a3a3);
|
|
1268
1339
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
1269
|
-
font-size: 13px;
|
|
1270
|
-
font-weight: 500;
|
|
1271
|
-
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);
|
|
1272
1343
|
white-space: nowrap;
|
|
1273
1344
|
cursor: pointer;
|
|
1274
1345
|
transition: color var(--duration-quick, 150ms) var(--ease-out, ease);
|
|
@@ -1279,11 +1350,11 @@
|
|
|
1279
1350
|
.fds-segmented__option:focus-visible {
|
|
1280
1351
|
outline: 2px solid var(--color-accent, #ea580c);
|
|
1281
1352
|
outline-offset: -2px;
|
|
1282
|
-
border-radius: var(--radius-xs,
|
|
1353
|
+
border-radius: var(--radius-xs, 2px);
|
|
1283
1354
|
}
|
|
1284
1355
|
.fds-segmented__option[aria-selected=true] {
|
|
1285
1356
|
color: var(--color-text, #171717);
|
|
1286
|
-
font-weight: 600;
|
|
1357
|
+
font-weight: var(--font-weight-semibold, 600);
|
|
1287
1358
|
}
|
|
1288
1359
|
.fds-segmented__option[aria-selected=true]::after {
|
|
1289
1360
|
content: "";
|
|
@@ -1296,7 +1367,7 @@
|
|
|
1296
1367
|
background: var(--color-text, #171717);
|
|
1297
1368
|
}
|
|
1298
1369
|
.fds-segmented__option:disabled {
|
|
1299
|
-
color: #d4d4d4;
|
|
1370
|
+
color: var(--color-border-strong, #d4d4d4);
|
|
1300
1371
|
cursor: not-allowed;
|
|
1301
1372
|
}
|
|
1302
1373
|
.fds-segmented__count {
|
|
@@ -1305,26 +1376,26 @@
|
|
|
1305
1376
|
place-items: center;
|
|
1306
1377
|
min-width: 20px;
|
|
1307
1378
|
height: 20px;
|
|
1308
|
-
padding: 0
|
|
1379
|
+
padding: 0 var(--spacing-1, 4px);
|
|
1309
1380
|
border-radius: var(--radius-full, 9999px);
|
|
1310
1381
|
background: var(--color-accent-subtle, #ffedd5);
|
|
1311
1382
|
color: var(--color-accent-text, #c2410c);
|
|
1312
|
-
font-size: 11px;
|
|
1313
|
-
font-weight: 600;
|
|
1383
|
+
font-size: var(--font-size-text-2xs, 11px);
|
|
1384
|
+
font-weight: var(--font-weight-semibold, 600);
|
|
1314
1385
|
line-height: 1;
|
|
1315
1386
|
font-variant-numeric: tabular-nums;
|
|
1316
1387
|
}
|
|
1317
1388
|
.fds-segmented__option[aria-selected=true] .fds-segmented__count {
|
|
1318
1389
|
background: var(--color-accent, #ea580c);
|
|
1319
|
-
color: #ffffff;
|
|
1390
|
+
color: var(--color-primary-text, #ffffff);
|
|
1320
1391
|
}
|
|
1321
1392
|
.fds-segmented__option:disabled .fds-segmented__count {
|
|
1322
|
-
background: #f5f5f5;
|
|
1323
|
-
color: #a3a3a3;
|
|
1393
|
+
background: var(--color-surface, #f5f5f5);
|
|
1394
|
+
color: var(--color-text-muted, #a3a3a3);
|
|
1324
1395
|
}
|
|
1325
1396
|
@media (max-width: 640px) {
|
|
1326
1397
|
.fds-segmented {
|
|
1327
|
-
padding-right: 24px;
|
|
1398
|
+
padding-right: var(--spacing-6, 24px);
|
|
1328
1399
|
-webkit-mask-image:
|
|
1329
1400
|
linear-gradient(
|
|
1330
1401
|
to right,
|
|
@@ -1337,6 +1408,38 @@
|
|
|
1337
1408
|
transparent);
|
|
1338
1409
|
}
|
|
1339
1410
|
}
|
|
1411
|
+
.fds-segmented--pill {
|
|
1412
|
+
display: inline-flex;
|
|
1413
|
+
gap: 2px;
|
|
1414
|
+
padding: var(--spacing-1, 4px);
|
|
1415
|
+
border-radius: var(--radius-lg, 8px);
|
|
1416
|
+
background: var(--color-surface, #f5f5f5);
|
|
1417
|
+
box-shadow: none;
|
|
1418
|
+
}
|
|
1419
|
+
.fds-segmented--pill .fds-segmented__option {
|
|
1420
|
+
padding: var(--spacing-1, 4px) var(--spacing-3, 12px);
|
|
1421
|
+
border-radius: var(--radius-md, 6px);
|
|
1422
|
+
color: var(--color-text-tertiary, #737373);
|
|
1423
|
+
}
|
|
1424
|
+
.fds-segmented--pill .fds-segmented__option[aria-selected=true] {
|
|
1425
|
+
background: var(--color-surface-raised, #ffffff);
|
|
1426
|
+
color: var(--color-text, #171717);
|
|
1427
|
+
font-weight: var(--font-weight-medium, 500);
|
|
1428
|
+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px var(--color-border, #e5e5e5);
|
|
1429
|
+
}
|
|
1430
|
+
.fds-segmented--pill .fds-segmented__option[aria-selected=true]::after {
|
|
1431
|
+
display: none;
|
|
1432
|
+
}
|
|
1433
|
+
.fds-segmented--pill .fds-segmented__option:focus-visible {
|
|
1434
|
+
border-radius: var(--radius-md, 6px);
|
|
1435
|
+
}
|
|
1436
|
+
@media (max-width: 640px) {
|
|
1437
|
+
.fds-segmented--pill {
|
|
1438
|
+
padding-right: var(--spacing-1, 4px);
|
|
1439
|
+
-webkit-mask-image: none;
|
|
1440
|
+
mask-image: none;
|
|
1441
|
+
}
|
|
1442
|
+
}
|
|
1340
1443
|
|
|
1341
1444
|
/* src/components/Avatar/avatar.css */
|
|
1342
1445
|
.fds-avatar {
|
|
@@ -1349,24 +1452,24 @@
|
|
|
1349
1452
|
background: var(--color-accent-subtle, #ffedd5);
|
|
1350
1453
|
color: var(--color-accent-text, #c2410c);
|
|
1351
1454
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
1352
|
-
font-weight: 600;
|
|
1455
|
+
font-weight: var(--font-weight-semibold, 600);
|
|
1353
1456
|
line-height: 1;
|
|
1354
1457
|
user-select: none;
|
|
1355
1458
|
}
|
|
1356
1459
|
.fds-avatar--small {
|
|
1357
1460
|
width: 24px;
|
|
1358
1461
|
height: 24px;
|
|
1359
|
-
font-size:
|
|
1462
|
+
font-size: var(--font-size-text-2xs, 11px);
|
|
1360
1463
|
}
|
|
1361
1464
|
.fds-avatar--medium {
|
|
1362
1465
|
width: 32px;
|
|
1363
1466
|
height: 32px;
|
|
1364
|
-
font-size: 12px;
|
|
1467
|
+
font-size: var(--font-size-text-xs, 12px);
|
|
1365
1468
|
}
|
|
1366
1469
|
.fds-avatar--large {
|
|
1367
1470
|
width: 40px;
|
|
1368
1471
|
height: 40px;
|
|
1369
|
-
font-size: 14px;
|
|
1472
|
+
font-size: var(--font-size-text-sm, 14px);
|
|
1370
1473
|
}
|
|
1371
1474
|
.fds-avatar__img {
|
|
1372
1475
|
width: 100%;
|
|
@@ -1385,8 +1488,8 @@
|
|
|
1385
1488
|
.fds-section-header__title {
|
|
1386
1489
|
margin: 0;
|
|
1387
1490
|
font-family: var(--font-display, "Rethink Sans", system-ui, sans-serif);
|
|
1388
|
-
font-size:
|
|
1389
|
-
font-weight: 600;
|
|
1491
|
+
font-size: var(--font-size-text-sm, 14px);
|
|
1492
|
+
font-weight: var(--font-weight-semibold, 600);
|
|
1390
1493
|
line-height: 1.3;
|
|
1391
1494
|
letter-spacing: -0.005em;
|
|
1392
1495
|
color: var(--color-text, #171717);
|
|
@@ -1394,7 +1497,7 @@
|
|
|
1394
1497
|
.fds-section-header__description {
|
|
1395
1498
|
margin: 0;
|
|
1396
1499
|
max-width: 60ch;
|
|
1397
|
-
font-size:
|
|
1500
|
+
font-size: var(--font-size-text-compact, 13px);
|
|
1398
1501
|
line-height: 1.55;
|
|
1399
1502
|
color: var(--color-text-muted, #a3a3a3);
|
|
1400
1503
|
}
|
|
@@ -1403,7 +1506,7 @@
|
|
|
1403
1506
|
.fds-split {
|
|
1404
1507
|
display: grid;
|
|
1405
1508
|
grid-template-columns: var(--fds-split-aside, 280px) minmax(0, 1fr);
|
|
1406
|
-
gap: var(--spacing-
|
|
1509
|
+
gap: var(--spacing-10, 40px);
|
|
1407
1510
|
align-items: start;
|
|
1408
1511
|
}
|
|
1409
1512
|
.fds-split__aside,
|
|
@@ -1443,12 +1546,12 @@
|
|
|
1443
1546
|
box-sizing: border-box;
|
|
1444
1547
|
display: inline-flex;
|
|
1445
1548
|
align-items: center;
|
|
1446
|
-
gap:
|
|
1447
|
-
padding:
|
|
1549
|
+
gap: var(--spacing-1, 4px);
|
|
1550
|
+
padding: 2px var(--spacing-2, 8px);
|
|
1448
1551
|
border-radius: var(--radius-pill, 9999px);
|
|
1449
1552
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
1450
|
-
font-size: var(--font-size-text-
|
|
1451
|
-
line-height:
|
|
1553
|
+
font-size: var(--font-size-text-xs, 12px);
|
|
1554
|
+
line-height: var(--line-height-text-xs, 18px);
|
|
1452
1555
|
font-weight: var(--font-weight-medium, 500);
|
|
1453
1556
|
white-space: nowrap;
|
|
1454
1557
|
}
|
|
@@ -1486,14 +1589,14 @@
|
|
|
1486
1589
|
box-sizing: border-box;
|
|
1487
1590
|
display: inline-flex;
|
|
1488
1591
|
align-items: center;
|
|
1489
|
-
gap:
|
|
1490
|
-
padding:
|
|
1592
|
+
gap: var(--spacing-1, 4px);
|
|
1593
|
+
padding: 2px var(--spacing-2, 8px);
|
|
1491
1594
|
background: var(--color-surface-subtle, #fafafa);
|
|
1492
1595
|
border: 1px solid var(--color-border, #e5e5e5);
|
|
1493
1596
|
border-radius: var(--radius-md, 6px);
|
|
1494
1597
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
1495
|
-
font-size: var(--font-size-text-
|
|
1496
|
-
line-height:
|
|
1598
|
+
font-size: var(--font-size-text-xs, 12px);
|
|
1599
|
+
line-height: var(--line-height-text-xs, 18px);
|
|
1497
1600
|
color: var(--color-text-secondary, #525252);
|
|
1498
1601
|
white-space: nowrap;
|
|
1499
1602
|
}
|
|
@@ -1539,15 +1642,15 @@
|
|
|
1539
1642
|
display: inline-flex;
|
|
1540
1643
|
align-items: center;
|
|
1541
1644
|
gap: var(--spacing-2, 8px);
|
|
1542
|
-
min-height:
|
|
1543
|
-
padding:
|
|
1645
|
+
min-height: var(--size-control-md, 36px);
|
|
1646
|
+
padding: 0 var(--spacing-3, 12px);
|
|
1544
1647
|
background: var(--color-surface-raised, #ffffff);
|
|
1545
1648
|
border: 1px solid var(--color-border-strong, #d4d4d4);
|
|
1546
1649
|
border-radius: var(--radius-lg, 8px);
|
|
1547
1650
|
box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.04));
|
|
1548
1651
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
1549
|
-
font-size: var(--font-size-text-
|
|
1550
|
-
line-height:
|
|
1652
|
+
font-size: var(--font-size-text-sm, 14px);
|
|
1653
|
+
line-height: var(--line-height-text-sm, 22px);
|
|
1551
1654
|
font-weight: var(--font-weight-medium, 500);
|
|
1552
1655
|
color: var(--color-text, #171717);
|
|
1553
1656
|
cursor: pointer;
|
|
@@ -1566,11 +1669,11 @@
|
|
|
1566
1669
|
cursor: not-allowed;
|
|
1567
1670
|
}
|
|
1568
1671
|
.fds-multiselect__count {
|
|
1569
|
-
padding: 2px
|
|
1672
|
+
padding: 2px var(--spacing-1, 4px);
|
|
1570
1673
|
border: 1px solid var(--color-border-light, #f5f5f5);
|
|
1571
1674
|
border-radius: var(--radius-sm, 4px);
|
|
1572
1675
|
font-size: var(--font-size-text-xs, 12px);
|
|
1573
|
-
line-height: 18px;
|
|
1676
|
+
line-height: var(--line-height-text-xs, 18px);
|
|
1574
1677
|
color: var(--color-text-tertiary, #737373);
|
|
1575
1678
|
}
|
|
1576
1679
|
.fds-multiselect__chevron {
|
|
@@ -1595,7 +1698,7 @@
|
|
|
1595
1698
|
overflow: hidden;
|
|
1596
1699
|
}
|
|
1597
1700
|
.fds-multiselect__list {
|
|
1598
|
-
padding: 4px 0;
|
|
1701
|
+
padding: var(--spacing-1, 4px) 0;
|
|
1599
1702
|
}
|
|
1600
1703
|
.fds-multiselect__list:focus {
|
|
1601
1704
|
outline: none;
|
|
@@ -1604,7 +1707,7 @@
|
|
|
1604
1707
|
display: flex;
|
|
1605
1708
|
align-items: center;
|
|
1606
1709
|
gap: var(--spacing-2, 8px);
|
|
1607
|
-
padding:
|
|
1710
|
+
padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
|
|
1608
1711
|
cursor: pointer;
|
|
1609
1712
|
}
|
|
1610
1713
|
.fds-multiselect__option--active {
|
|
@@ -1635,8 +1738,8 @@
|
|
|
1635
1738
|
text-overflow: ellipsis;
|
|
1636
1739
|
white-space: nowrap;
|
|
1637
1740
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
1638
|
-
font-size: var(--font-size-text-
|
|
1639
|
-
line-height:
|
|
1741
|
+
font-size: var(--font-size-text-sm, 14px);
|
|
1742
|
+
line-height: var(--line-height-text-sm, 22px);
|
|
1640
1743
|
font-weight: var(--font-weight-medium, 500);
|
|
1641
1744
|
color: var(--color-text, #171717);
|
|
1642
1745
|
}
|
|
@@ -1645,7 +1748,7 @@
|
|
|
1645
1748
|
margin-left: var(--spacing-2, 8px);
|
|
1646
1749
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
1647
1750
|
font-size: var(--font-size-text-xs, 12px);
|
|
1648
|
-
line-height: 18px;
|
|
1751
|
+
line-height: var(--line-height-text-xs, 18px);
|
|
1649
1752
|
color: var(--color-text-secondary, #525252);
|
|
1650
1753
|
}
|
|
1651
1754
|
.fds-multiselect__footer {
|
|
@@ -1653,7 +1756,7 @@
|
|
|
1653
1756
|
justify-content: space-between;
|
|
1654
1757
|
align-items: center;
|
|
1655
1758
|
height: 40px;
|
|
1656
|
-
padding: 0 16px;
|
|
1759
|
+
padding: 0 var(--spacing-4, 16px);
|
|
1657
1760
|
border-top: 1px solid var(--color-border, #e5e5e5);
|
|
1658
1761
|
}
|
|
1659
1762
|
.fds-multiselect__action {
|
|
@@ -1662,7 +1765,7 @@
|
|
|
1662
1765
|
border: 0;
|
|
1663
1766
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
1664
1767
|
font-size: var(--font-size-text-xs, 12px);
|
|
1665
|
-
line-height: 18px;
|
|
1768
|
+
line-height: var(--line-height-text-xs, 18px);
|
|
1666
1769
|
font-weight: var(--font-weight-medium, 500);
|
|
1667
1770
|
color: var(--color-text-tertiary, #737373);
|
|
1668
1771
|
cursor: pointer;
|
|
@@ -1675,6 +1778,110 @@
|
|
|
1675
1778
|
outline-offset: 2px;
|
|
1676
1779
|
border-radius: var(--radius-xs, 2px);
|
|
1677
1780
|
}
|
|
1781
|
+
.fds-multiselect--field {
|
|
1782
|
+
display: flex;
|
|
1783
|
+
flex-direction: column;
|
|
1784
|
+
gap: var(--spacing-2, 8px);
|
|
1785
|
+
width: 100%;
|
|
1786
|
+
}
|
|
1787
|
+
.fds-multiselect__fieldLabel {
|
|
1788
|
+
font-family: var(--font-display, "Rethink Sans", system-ui, sans-serif);
|
|
1789
|
+
font-size: var(--font-size-text-compact, 13px);
|
|
1790
|
+
line-height: var(--line-height-text-compact, 20px);
|
|
1791
|
+
font-weight: var(--font-weight-medium, 500);
|
|
1792
|
+
color: var(--color-text, #171717);
|
|
1793
|
+
}
|
|
1794
|
+
.fds-multiselect__fieldBox {
|
|
1795
|
+
display: flex;
|
|
1796
|
+
align-items: center;
|
|
1797
|
+
gap: var(--spacing-2, 8px);
|
|
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);
|
|
1800
|
+
background: var(--color-surface-raised, #ffffff);
|
|
1801
|
+
border: 1px solid var(--color-border-strong, #d4d4d4);
|
|
1802
|
+
border-radius: var(--radius-md, 6px);
|
|
1803
|
+
cursor: pointer;
|
|
1804
|
+
transition: border-color var(--duration-instant, 80ms) ease, box-shadow var(--duration-instant, 80ms) ease;
|
|
1805
|
+
}
|
|
1806
|
+
.fds-multiselect__fieldBox--open,
|
|
1807
|
+
.fds-multiselect__fieldBox:focus-within {
|
|
1808
|
+
border-color: var(--color-accent, #ea580c);
|
|
1809
|
+
box-shadow: inset 0 0 0 1px var(--color-accent, #ea580c);
|
|
1810
|
+
}
|
|
1811
|
+
.fds-multiselect__fieldBox--disabled {
|
|
1812
|
+
background: var(--color-surface-subtle, #fafafa);
|
|
1813
|
+
cursor: not-allowed;
|
|
1814
|
+
}
|
|
1815
|
+
.fds-multiselect__chips {
|
|
1816
|
+
display: flex;
|
|
1817
|
+
flex-wrap: wrap;
|
|
1818
|
+
gap: var(--spacing-1, 4px);
|
|
1819
|
+
flex: 1 1 auto;
|
|
1820
|
+
min-width: 0;
|
|
1821
|
+
}
|
|
1822
|
+
.fds-multiselect__placeholder {
|
|
1823
|
+
padding-left: var(--spacing-1, 4px);
|
|
1824
|
+
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
1825
|
+
font-size: var(--font-size-text-sm, 14px);
|
|
1826
|
+
color: var(--color-text-muted, #a3a3a3);
|
|
1827
|
+
}
|
|
1828
|
+
.fds-multiselect__chip {
|
|
1829
|
+
display: inline-flex;
|
|
1830
|
+
align-items: center;
|
|
1831
|
+
gap: var(--spacing-1, 4px);
|
|
1832
|
+
max-width: 100%;
|
|
1833
|
+
padding: var(--spacing-1, 4px) var(--spacing-1, 4px) var(--spacing-1, 4px) var(--spacing-2, 8px);
|
|
1834
|
+
border: 1px solid var(--color-border, #e5e5e5);
|
|
1835
|
+
border-radius: var(--radius-sm, 4px);
|
|
1836
|
+
background: var(--color-surface-subtle, #fafafa);
|
|
1837
|
+
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
1838
|
+
font-size: var(--font-size-text-xs, 12px);
|
|
1839
|
+
line-height: var(--line-height-text-xs, 18px);
|
|
1840
|
+
color: var(--color-text, #171717);
|
|
1841
|
+
}
|
|
1842
|
+
.fds-multiselect__chipRemove {
|
|
1843
|
+
display: inline-flex;
|
|
1844
|
+
align-items: center;
|
|
1845
|
+
justify-content: center;
|
|
1846
|
+
width: 16px;
|
|
1847
|
+
height: 16px;
|
|
1848
|
+
padding: 0;
|
|
1849
|
+
border: 0;
|
|
1850
|
+
border-radius: var(--radius-xs, 2px);
|
|
1851
|
+
background: transparent;
|
|
1852
|
+
color: var(--color-text-tertiary, #737373);
|
|
1853
|
+
cursor: pointer;
|
|
1854
|
+
}
|
|
1855
|
+
.fds-multiselect__chipRemove:hover {
|
|
1856
|
+
background: var(--color-surface-hover, #ececec);
|
|
1857
|
+
color: var(--color-text, #171717);
|
|
1858
|
+
}
|
|
1859
|
+
.fds-multiselect__chipRemove:focus-visible {
|
|
1860
|
+
outline: 2px solid var(--color-accent, #ea580c);
|
|
1861
|
+
outline-offset: 1px;
|
|
1862
|
+
}
|
|
1863
|
+
.fds-multiselect__fieldBoxToggle {
|
|
1864
|
+
display: inline-flex;
|
|
1865
|
+
align-items: center;
|
|
1866
|
+
justify-content: center;
|
|
1867
|
+
align-self: stretch;
|
|
1868
|
+
flex-shrink: 0;
|
|
1869
|
+
padding: 0 var(--spacing-1, 4px);
|
|
1870
|
+
border: 0;
|
|
1871
|
+
background: transparent;
|
|
1872
|
+
cursor: pointer;
|
|
1873
|
+
}
|
|
1874
|
+
.fds-multiselect__fieldBoxToggle:focus-visible {
|
|
1875
|
+
outline: none;
|
|
1876
|
+
}
|
|
1877
|
+
.fds-multiselect__fieldBoxToggle .fds-multiselect__chevron {
|
|
1878
|
+
margin-left: 0;
|
|
1879
|
+
}
|
|
1880
|
+
.fds-multiselect--field .fds-multiselect__popover {
|
|
1881
|
+
left: 0;
|
|
1882
|
+
right: auto;
|
|
1883
|
+
min-width: 280px;
|
|
1884
|
+
}
|
|
1678
1885
|
|
|
1679
1886
|
/* src/components/SearchInput/search-input.css */
|
|
1680
1887
|
.fds-search {
|
|
@@ -1685,23 +1892,23 @@
|
|
|
1685
1892
|
}
|
|
1686
1893
|
.fds-search__icon {
|
|
1687
1894
|
position: absolute;
|
|
1688
|
-
left:
|
|
1895
|
+
left: var(--spacing-3, 12px);
|
|
1689
1896
|
color: var(--color-text-tertiary, #737373);
|
|
1690
1897
|
pointer-events: none;
|
|
1691
1898
|
}
|
|
1692
1899
|
.fds-search__input {
|
|
1693
1900
|
box-sizing: border-box;
|
|
1694
1901
|
width: 100%;
|
|
1695
|
-
min-height:
|
|
1696
|
-
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));
|
|
1697
1904
|
background: var(--color-surface-raised, #ffffff);
|
|
1698
1905
|
border: 1px solid var(--color-border-strong, #d4d4d4);
|
|
1699
1906
|
border-radius: var(--radius-lg, 8px);
|
|
1700
1907
|
box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.04));
|
|
1701
1908
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
1702
|
-
font-size: var(--font-size-text-
|
|
1703
|
-
line-height:
|
|
1704
|
-
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);
|
|
1705
1912
|
color: var(--color-text, #171717);
|
|
1706
1913
|
transition: border-color var(--duration-instant, 80ms) ease, box-shadow var(--duration-instant, 80ms) ease;
|
|
1707
1914
|
}
|
|
@@ -1718,13 +1925,13 @@
|
|
|
1718
1925
|
}
|
|
1719
1926
|
.fds-search__kbd {
|
|
1720
1927
|
position: absolute;
|
|
1721
|
-
right:
|
|
1722
|
-
padding: 0
|
|
1928
|
+
right: var(--spacing-2, 8px);
|
|
1929
|
+
padding: 0 var(--spacing-1, 4px);
|
|
1723
1930
|
border: 1px solid var(--color-border, #e5e5e5);
|
|
1724
1931
|
border-radius: var(--radius-sm, 4px);
|
|
1725
1932
|
font-family: var(--font-mono, monospace);
|
|
1726
|
-
font-size: var(--font-size-text-
|
|
1727
|
-
line-height:
|
|
1933
|
+
font-size: var(--font-size-text-2xs, 11px);
|
|
1934
|
+
line-height: var(--line-height-text-2xs, 16px);
|
|
1728
1935
|
color: var(--color-text-tertiary, #737373);
|
|
1729
1936
|
pointer-events: none;
|
|
1730
1937
|
}
|
|
@@ -1737,7 +1944,7 @@
|
|
|
1737
1944
|
gap: var(--spacing-4, 16px);
|
|
1738
1945
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
1739
1946
|
font-size: var(--font-size-text-sm, 14px);
|
|
1740
|
-
line-height: 20px;
|
|
1947
|
+
line-height: var(--line-height-text-compact, 20px);
|
|
1741
1948
|
color: var(--color-text-secondary, #525252);
|
|
1742
1949
|
}
|
|
1743
1950
|
.fds-pagination--compact {
|
|
@@ -1758,7 +1965,7 @@
|
|
|
1758
1965
|
place-items: center;
|
|
1759
1966
|
min-width: 36px;
|
|
1760
1967
|
height: 36px;
|
|
1761
|
-
padding: 0 8px;
|
|
1968
|
+
padding: 0 var(--spacing-2, 8px);
|
|
1762
1969
|
background: none;
|
|
1763
1970
|
border: 1px solid transparent;
|
|
1764
1971
|
border-radius: var(--radius-lg, 8px);
|
|
@@ -1803,7 +2010,7 @@
|
|
|
1803
2010
|
flex-direction: column;
|
|
1804
2011
|
align-items: center;
|
|
1805
2012
|
gap: var(--spacing-8, 32px);
|
|
1806
|
-
padding: 64px 40px;
|
|
2013
|
+
padding: var(--spacing-16, 64px) var(--spacing-10, 40px);
|
|
1807
2014
|
text-align: center;
|
|
1808
2015
|
}
|
|
1809
2016
|
.fds-empty__illustration {
|
|
@@ -1821,7 +2028,7 @@
|
|
|
1821
2028
|
margin: 0;
|
|
1822
2029
|
font-family: var(--font-display, "Rethink Sans", system-ui, sans-serif);
|
|
1823
2030
|
font-size: var(--font-size-display-xs, 24px);
|
|
1824
|
-
line-height: 32px;
|
|
2031
|
+
line-height: var(--line-height-display-xs, 32px);
|
|
1825
2032
|
font-weight: var(--font-weight-medium, 500);
|
|
1826
2033
|
letter-spacing: -0.18px;
|
|
1827
2034
|
color: var(--color-text, #171717);
|
|
@@ -1831,7 +2038,7 @@
|
|
|
1831
2038
|
max-width: 380px;
|
|
1832
2039
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
1833
2040
|
font-size: var(--font-size-text-sm, 14px);
|
|
1834
|
-
line-height: 20px;
|
|
2041
|
+
line-height: var(--line-height-text-compact, 20px);
|
|
1835
2042
|
color: var(--color-text-secondary, #525252);
|
|
1836
2043
|
}
|
|
1837
2044
|
.fds-empty__actions {
|
|
@@ -1845,10 +2052,10 @@
|
|
|
1845
2052
|
flex-wrap: wrap;
|
|
1846
2053
|
align-items: center;
|
|
1847
2054
|
justify-content: center;
|
|
1848
|
-
gap:
|
|
2055
|
+
gap: var(--spacing-2, 8px);
|
|
1849
2056
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
1850
2057
|
font-size: var(--font-size-text-sm, 14px);
|
|
1851
|
-
line-height: 20px;
|
|
2058
|
+
line-height: var(--line-height-text-compact, 20px);
|
|
1852
2059
|
color: var(--color-text-tertiary, #737373);
|
|
1853
2060
|
}
|
|
1854
2061
|
.fds-stacked-cards {
|
|
@@ -1877,7 +2084,7 @@
|
|
|
1877
2084
|
display: flex;
|
|
1878
2085
|
align-items: flex-start;
|
|
1879
2086
|
justify-content: space-between;
|
|
1880
|
-
padding: 16px;
|
|
2087
|
+
padding: var(--spacing-4, 16px);
|
|
1881
2088
|
border-width: 1.5px;
|
|
1882
2089
|
transform: rotate(-4deg);
|
|
1883
2090
|
filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.02));
|
|
@@ -1885,12 +2092,12 @@
|
|
|
1885
2092
|
.fds-stacked-cards__lines {
|
|
1886
2093
|
display: flex;
|
|
1887
2094
|
flex-direction: column;
|
|
1888
|
-
gap:
|
|
2095
|
+
gap: var(--spacing-1, 4px);
|
|
1889
2096
|
width: 100px;
|
|
1890
2097
|
}
|
|
1891
2098
|
.fds-stacked-cards__lines > span {
|
|
1892
2099
|
height: 6px;
|
|
1893
|
-
border-radius:
|
|
2100
|
+
border-radius: var(--radius-xs, 2px);
|
|
1894
2101
|
}
|
|
1895
2102
|
.fds-stacked-cards__lines > span:nth-child(1) {
|
|
1896
2103
|
width: 100%;
|
|
@@ -1923,16 +2130,41 @@
|
|
|
1923
2130
|
color: var(--color-primary-text, #ffffff);
|
|
1924
2131
|
filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.13));
|
|
1925
2132
|
}
|
|
2133
|
+
.fds-empty--compact {
|
|
2134
|
+
gap: var(--spacing-4, 16px);
|
|
2135
|
+
padding: var(--spacing-8, 32px) var(--spacing-6, 24px);
|
|
2136
|
+
}
|
|
2137
|
+
.fds-empty--compact .fds-empty__illustration {
|
|
2138
|
+
min-height: 0;
|
|
2139
|
+
width: 44px;
|
|
2140
|
+
height: 44px;
|
|
2141
|
+
border-radius: var(--radius-lg, 8px);
|
|
2142
|
+
background: var(--color-surface-subtle, #fafafa);
|
|
2143
|
+
border: 1px solid var(--color-border-light, #f5f5f5);
|
|
2144
|
+
color: var(--color-text-secondary, #525252);
|
|
2145
|
+
}
|
|
2146
|
+
.fds-empty--compact .fds-empty__illustration > svg {
|
|
2147
|
+
width: 20px;
|
|
2148
|
+
height: 20px;
|
|
2149
|
+
}
|
|
2150
|
+
.fds-empty--compact .fds-empty__text {
|
|
2151
|
+
gap: var(--spacing-2, 8px);
|
|
2152
|
+
}
|
|
2153
|
+
.fds-empty--compact .fds-empty__title {
|
|
2154
|
+
font-size: var(--font-size-text-md, 16px);
|
|
2155
|
+
line-height: var(--line-height-text-md, 24px);
|
|
2156
|
+
letter-spacing: 0;
|
|
2157
|
+
}
|
|
1926
2158
|
|
|
1927
2159
|
/* src/components/Callout/callout.css */
|
|
1928
2160
|
.fds-callout {
|
|
1929
2161
|
box-sizing: border-box;
|
|
1930
2162
|
display: flex;
|
|
1931
2163
|
align-items: center;
|
|
1932
|
-
gap:
|
|
1933
|
-
padding:
|
|
2164
|
+
gap: var(--spacing-3, 12px);
|
|
2165
|
+
padding: var(--spacing-3, 12px) var(--spacing-4, 16px);
|
|
1934
2166
|
border: 1px solid var(--fds-callout-border);
|
|
1935
|
-
border-radius: var(--radius-lg,
|
|
2167
|
+
border-radius: var(--radius-lg, 8px);
|
|
1936
2168
|
background: var(--fds-callout-bg);
|
|
1937
2169
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
1938
2170
|
color: var(--color-text, #171717);
|
|
@@ -1945,7 +2177,7 @@
|
|
|
1945
2177
|
align-self: flex-start;
|
|
1946
2178
|
width: 32px;
|
|
1947
2179
|
height: 32px;
|
|
1948
|
-
border-radius: var(--radius-md,
|
|
2180
|
+
border-radius: var(--radius-md, 6px);
|
|
1949
2181
|
background: var(--color-bg, #ffffff);
|
|
1950
2182
|
color: var(--fds-callout-icon);
|
|
1951
2183
|
}
|
|
@@ -1961,10 +2193,10 @@
|
|
|
1961
2193
|
display: flex;
|
|
1962
2194
|
flex-wrap: wrap;
|
|
1963
2195
|
align-items: center;
|
|
1964
|
-
gap: 4px 8px;
|
|
2196
|
+
gap: var(--spacing-1, 4px) var(--spacing-2, 8px);
|
|
1965
2197
|
margin: 0;
|
|
1966
2198
|
font-size: var(--font-size-text-sm, 14px);
|
|
1967
|
-
line-height: 20px;
|
|
2199
|
+
line-height: var(--line-height-text-compact, 20px);
|
|
1968
2200
|
font-weight: var(--font-weight-semibold, 600);
|
|
1969
2201
|
}
|
|
1970
2202
|
.fds-callout__aside {
|
|
@@ -1972,14 +2204,14 @@
|
|
|
1972
2204
|
}
|
|
1973
2205
|
.fds-callout__text {
|
|
1974
2206
|
margin-top: 2px;
|
|
1975
|
-
font-size: 13px;
|
|
1976
|
-
line-height: 20px;
|
|
2207
|
+
font-size: var(--font-size-text-compact, 13px);
|
|
2208
|
+
line-height: var(--line-height-text-compact, 20px);
|
|
1977
2209
|
color: var(--color-text-secondary, #525252);
|
|
1978
2210
|
}
|
|
1979
2211
|
.fds-callout__action {
|
|
1980
2212
|
display: flex;
|
|
1981
2213
|
flex-shrink: 0;
|
|
1982
|
-
gap: 8px;
|
|
2214
|
+
gap: var(--spacing-2, 8px);
|
|
1983
2215
|
}
|
|
1984
2216
|
@media (max-width: 480px) {
|
|
1985
2217
|
.fds-callout {
|
|
@@ -1987,7 +2219,7 @@
|
|
|
1987
2219
|
}
|
|
1988
2220
|
.fds-callout__action {
|
|
1989
2221
|
flex-basis: 100%;
|
|
1990
|
-
padding-left:
|
|
2222
|
+
padding-left: var(--spacing-12, 48px);
|
|
1991
2223
|
}
|
|
1992
2224
|
}
|
|
1993
2225
|
.fds-callout--neutral {
|
|
@@ -1996,23 +2228,23 @@
|
|
|
1996
2228
|
--fds-callout-icon: var(--color-text-secondary, #525252);
|
|
1997
2229
|
}
|
|
1998
2230
|
.fds-callout--accent {
|
|
1999
|
-
--fds-callout-bg: var(--color-accent-subtle, #
|
|
2000
|
-
--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);
|
|
2001
2233
|
--fds-callout-icon: var(--color-accent, #ea580c);
|
|
2002
2234
|
}
|
|
2003
2235
|
.fds-callout--info {
|
|
2004
2236
|
--fds-callout-bg: var(--color-info-surface, #eff6ff);
|
|
2005
|
-
--fds-callout-border: var(--color-info, #
|
|
2237
|
+
--fds-callout-border: var(--color-info, #1d4ed8);
|
|
2006
2238
|
--fds-callout-icon: var(--color-info-strong, #2563eb);
|
|
2007
2239
|
}
|
|
2008
2240
|
.fds-callout--success {
|
|
2009
2241
|
--fds-callout-bg: var(--color-success-bg, #f0fdf4);
|
|
2010
|
-
--fds-callout-border: var(--color-success, #
|
|
2242
|
+
--fds-callout-border: var(--color-success, #059669);
|
|
2011
2243
|
--fds-callout-icon: var(--color-success-text, #15803d);
|
|
2012
2244
|
}
|
|
2013
2245
|
.fds-callout--warning {
|
|
2014
2246
|
--fds-callout-bg: var(--color-warning-bg, #fffbeb);
|
|
2015
|
-
--fds-callout-border: var(--color-warning-border, #
|
|
2247
|
+
--fds-callout-border: var(--color-warning-border, #fde68a);
|
|
2016
2248
|
--fds-callout-icon: var(--color-warning-text, #92400e);
|
|
2017
2249
|
}
|
|
2018
2250
|
.fds-callout--danger {
|
|
@@ -2104,14 +2336,14 @@
|
|
|
2104
2336
|
.fds-stat__label {
|
|
2105
2337
|
margin: 0;
|
|
2106
2338
|
font-size: var(--font-size-text-sm, 14px);
|
|
2107
|
-
line-height: 20px;
|
|
2339
|
+
line-height: var(--line-height-text-compact, 20px);
|
|
2108
2340
|
font-weight: var(--font-weight-medium, 500);
|
|
2109
2341
|
color: var(--color-text-secondary, #525252);
|
|
2110
2342
|
}
|
|
2111
2343
|
.fds-stat__value {
|
|
2112
2344
|
margin: 0;
|
|
2113
2345
|
font-size: var(--font-size-display-md, 36px);
|
|
2114
|
-
line-height: 44px;
|
|
2346
|
+
line-height: var(--line-height-display-md, 44px);
|
|
2115
2347
|
font-weight: var(--font-weight-semibold, 600);
|
|
2116
2348
|
letter-spacing: -0.02em;
|
|
2117
2349
|
color: var(--color-text, #171717);
|
|
@@ -2155,7 +2387,7 @@
|
|
|
2155
2387
|
flex-shrink: 0;
|
|
2156
2388
|
width: 16px;
|
|
2157
2389
|
height: 16px;
|
|
2158
|
-
margin-top:
|
|
2390
|
+
margin-top: var(--spacing-1, 4px);
|
|
2159
2391
|
border: 1px solid var(--color-border-strong, #d4d4d4);
|
|
2160
2392
|
border-radius: var(--radius-sm, 4px);
|
|
2161
2393
|
background: var(--color-bg, #ffffff);
|
|
@@ -2205,14 +2437,14 @@
|
|
|
2205
2437
|
.fds-checkbox__label {
|
|
2206
2438
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
2207
2439
|
font-size: var(--font-size-text-sm, 14px);
|
|
2208
|
-
line-height: 22px;
|
|
2440
|
+
line-height: var(--line-height-text-sm, 22px);
|
|
2209
2441
|
font-weight: var(--font-weight-medium, 500);
|
|
2210
2442
|
color: var(--color-text, #171717);
|
|
2211
2443
|
}
|
|
2212
2444
|
.fds-checkbox__description {
|
|
2213
2445
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
2214
2446
|
font-size: var(--font-size-text-sm, 14px);
|
|
2215
|
-
line-height: 22px;
|
|
2447
|
+
line-height: var(--line-height-text-sm, 22px);
|
|
2216
2448
|
color: var(--color-text-secondary, #525252);
|
|
2217
2449
|
}
|
|
2218
2450
|
@media (prefers-reduced-motion: reduce) {
|
|
@@ -2250,7 +2482,7 @@
|
|
|
2250
2482
|
flex-shrink: 0;
|
|
2251
2483
|
width: 16px;
|
|
2252
2484
|
height: 16px;
|
|
2253
|
-
margin-top:
|
|
2485
|
+
margin-top: var(--spacing-1, 4px);
|
|
2254
2486
|
border: 1px solid var(--color-border-strong, #d4d4d4);
|
|
2255
2487
|
border-radius: var(--radius-full, 9999px);
|
|
2256
2488
|
background: var(--color-bg, #ffffff);
|
|
@@ -2284,14 +2516,14 @@
|
|
|
2284
2516
|
.fds-radio__label {
|
|
2285
2517
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
2286
2518
|
font-size: var(--font-size-text-sm, 14px);
|
|
2287
|
-
line-height: 22px;
|
|
2519
|
+
line-height: var(--line-height-text-sm, 22px);
|
|
2288
2520
|
font-weight: var(--font-weight-medium, 500);
|
|
2289
2521
|
color: var(--color-text, #171717);
|
|
2290
2522
|
}
|
|
2291
2523
|
.fds-radio__description {
|
|
2292
2524
|
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
2293
2525
|
font-size: var(--font-size-text-sm, 14px);
|
|
2294
|
-
line-height: 22px;
|
|
2526
|
+
line-height: var(--line-height-text-sm, 22px);
|
|
2295
2527
|
color: var(--color-text-secondary, #525252);
|
|
2296
2528
|
}
|
|
2297
2529
|
@media (prefers-reduced-motion: reduce) {
|
|
@@ -2384,7 +2616,7 @@
|
|
|
2384
2616
|
border-radius: var(--radius-lg, 8px);
|
|
2385
2617
|
background: var(--color-surface-subtle, #fafafa);
|
|
2386
2618
|
font-size: var(--font-size-text-sm, 14px);
|
|
2387
|
-
line-height: 20px;
|
|
2619
|
+
line-height: var(--line-height-text-compact, 20px);
|
|
2388
2620
|
color: var(--color-text-muted, #a3a3a3);
|
|
2389
2621
|
}
|
|
2390
2622
|
.fds-steps__icon {
|
|
@@ -2429,3 +2661,406 @@
|
|
|
2429
2661
|
animation: none;
|
|
2430
2662
|
}
|
|
2431
2663
|
}
|
|
2664
|
+
|
|
2665
|
+
/* src/components/Input/input.css */
|
|
2666
|
+
.fds-input {
|
|
2667
|
+
display: flex;
|
|
2668
|
+
flex-direction: column;
|
|
2669
|
+
gap: var(--spacing-2, 8px);
|
|
2670
|
+
width: 100%;
|
|
2671
|
+
min-width: 0;
|
|
2672
|
+
}
|
|
2673
|
+
.fds-input__label {
|
|
2674
|
+
font-family: var(--font-display, "Rethink Sans", system-ui, sans-serif);
|
|
2675
|
+
font-size: var(--font-size-text-compact, 13px);
|
|
2676
|
+
line-height: var(--line-height-text-compact, 20px);
|
|
2677
|
+
font-weight: var(--font-weight-medium, 500);
|
|
2678
|
+
color: var(--color-text, #171717);
|
|
2679
|
+
}
|
|
2680
|
+
.fds-input__box {
|
|
2681
|
+
display: flex;
|
|
2682
|
+
align-items: center;
|
|
2683
|
+
gap: var(--spacing-2, 8px);
|
|
2684
|
+
min-height: var(--size-control-md, 36px);
|
|
2685
|
+
padding: 0 var(--spacing-1, 4px) 0 var(--spacing-3, 12px);
|
|
2686
|
+
background: var(--color-surface-raised, #ffffff);
|
|
2687
|
+
border: 1px solid var(--color-border-strong, #d4d4d4);
|
|
2688
|
+
border-radius: var(--radius-md, 6px);
|
|
2689
|
+
transition: border-color var(--duration-instant, 80ms) ease, box-shadow var(--duration-instant, 80ms) ease;
|
|
2690
|
+
}
|
|
2691
|
+
.fds-input__box:focus-within {
|
|
2692
|
+
border-color: var(--color-accent, #ea580c);
|
|
2693
|
+
box-shadow: inset 0 0 0 1px var(--color-accent, #ea580c);
|
|
2694
|
+
}
|
|
2695
|
+
.fds-input__box--error,
|
|
2696
|
+
.fds-input__box--error:focus-within {
|
|
2697
|
+
border-color: var(--color-error, #b91c1c);
|
|
2698
|
+
}
|
|
2699
|
+
.fds-input__box--error:focus-within {
|
|
2700
|
+
box-shadow: inset 0 0 0 1px var(--color-error, #b91c1c);
|
|
2701
|
+
}
|
|
2702
|
+
.fds-input__box--locked,
|
|
2703
|
+
.fds-input__box--locked:focus-within {
|
|
2704
|
+
background: var(--color-surface, #f5f5f5);
|
|
2705
|
+
border-color: var(--color-surface, #f5f5f5);
|
|
2706
|
+
box-shadow: none;
|
|
2707
|
+
}
|
|
2708
|
+
.fds-input__icon {
|
|
2709
|
+
display: inline-flex;
|
|
2710
|
+
flex-shrink: 0;
|
|
2711
|
+
width: 16px;
|
|
2712
|
+
height: 16px;
|
|
2713
|
+
color: var(--color-text-muted, #a3a3a3);
|
|
2714
|
+
}
|
|
2715
|
+
.fds-input__icon > svg {
|
|
2716
|
+
width: 100%;
|
|
2717
|
+
height: 100%;
|
|
2718
|
+
}
|
|
2719
|
+
.fds-input__control {
|
|
2720
|
+
flex: 1 1 auto;
|
|
2721
|
+
min-width: 0;
|
|
2722
|
+
height: calc(var(--size-control-md, 36px) - 2px);
|
|
2723
|
+
padding: 0 var(--spacing-2, 8px) 0 0;
|
|
2724
|
+
border: 0;
|
|
2725
|
+
background: transparent;
|
|
2726
|
+
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
2727
|
+
font-size: var(--font-size-text-sm, 14px);
|
|
2728
|
+
color: var(--color-text, #171717);
|
|
2729
|
+
text-overflow: ellipsis;
|
|
2730
|
+
}
|
|
2731
|
+
.fds-input__control:focus {
|
|
2732
|
+
outline: none;
|
|
2733
|
+
}
|
|
2734
|
+
.fds-input__control::placeholder {
|
|
2735
|
+
color: var(--color-text-muted, #a3a3a3);
|
|
2736
|
+
}
|
|
2737
|
+
.fds-input__box--locked .fds-input__control {
|
|
2738
|
+
color: var(--color-text-muted, #a3a3a3);
|
|
2739
|
+
cursor: default;
|
|
2740
|
+
}
|
|
2741
|
+
.fds-input__control:disabled {
|
|
2742
|
+
cursor: not-allowed;
|
|
2743
|
+
}
|
|
2744
|
+
.fds-input__trailing {
|
|
2745
|
+
display: inline-flex;
|
|
2746
|
+
align-items: center;
|
|
2747
|
+
flex-shrink: 0;
|
|
2748
|
+
}
|
|
2749
|
+
.fds-input__hint,
|
|
2750
|
+
.fds-input__error {
|
|
2751
|
+
margin: 0;
|
|
2752
|
+
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
2753
|
+
font-size: var(--font-size-text-compact, 13px);
|
|
2754
|
+
line-height: var(--line-height-text-compact, 20px);
|
|
2755
|
+
}
|
|
2756
|
+
.fds-input__hint {
|
|
2757
|
+
color: var(--color-text-secondary, #525252);
|
|
2758
|
+
}
|
|
2759
|
+
.fds-input__error {
|
|
2760
|
+
color: var(--color-error, #b91c1c);
|
|
2761
|
+
}
|
|
2762
|
+
|
|
2763
|
+
/* src/components/IconButton/icon-button.css */
|
|
2764
|
+
.fds-icon-button {
|
|
2765
|
+
display: inline-flex;
|
|
2766
|
+
align-items: center;
|
|
2767
|
+
justify-content: center;
|
|
2768
|
+
flex-shrink: 0;
|
|
2769
|
+
padding: 0;
|
|
2770
|
+
border: 1px solid transparent;
|
|
2771
|
+
border-radius: var(--radius-md, 6px);
|
|
2772
|
+
background: transparent;
|
|
2773
|
+
color: var(--color-text, #171717);
|
|
2774
|
+
cursor: pointer;
|
|
2775
|
+
transition: background-color var(--duration-instant, 80ms) ease, border-color var(--duration-instant, 80ms) ease;
|
|
2776
|
+
}
|
|
2777
|
+
.fds-icon-button:focus-visible {
|
|
2778
|
+
outline: 2px solid var(--color-accent, #ea580c);
|
|
2779
|
+
outline-offset: 2px;
|
|
2780
|
+
}
|
|
2781
|
+
.fds-icon-button:disabled {
|
|
2782
|
+
color: var(--color-text-muted, #a3a3a3);
|
|
2783
|
+
cursor: not-allowed;
|
|
2784
|
+
}
|
|
2785
|
+
.fds-icon-button--medium {
|
|
2786
|
+
width: var(--size-control-md, 36px);
|
|
2787
|
+
height: var(--size-control-md, 36px);
|
|
2788
|
+
}
|
|
2789
|
+
.fds-icon-button--small {
|
|
2790
|
+
width: var(--size-control-xs, 28px);
|
|
2791
|
+
height: var(--size-control-xs, 28px);
|
|
2792
|
+
border-radius: var(--radius-sm, 4px);
|
|
2793
|
+
}
|
|
2794
|
+
.fds-icon-button__icon {
|
|
2795
|
+
display: inline-flex;
|
|
2796
|
+
width: 16px;
|
|
2797
|
+
height: 16px;
|
|
2798
|
+
}
|
|
2799
|
+
.fds-icon-button--small .fds-icon-button__icon {
|
|
2800
|
+
width: 16px;
|
|
2801
|
+
height: 16px;
|
|
2802
|
+
}
|
|
2803
|
+
.fds-icon-button__icon > svg {
|
|
2804
|
+
width: 100%;
|
|
2805
|
+
height: 100%;
|
|
2806
|
+
}
|
|
2807
|
+
.fds-icon-button--outlined {
|
|
2808
|
+
background: var(--color-surface-raised, #ffffff);
|
|
2809
|
+
border-color: var(--color-border, #e5e5e5);
|
|
2810
|
+
}
|
|
2811
|
+
.fds-icon-button--outlined:hover:not(:disabled) {
|
|
2812
|
+
background: var(--color-surface-subtle, #fafafa);
|
|
2813
|
+
border-color: var(--color-border-strong, #d4d4d4);
|
|
2814
|
+
}
|
|
2815
|
+
.fds-icon-button--ghost {
|
|
2816
|
+
color: var(--color-text-tertiary, #737373);
|
|
2817
|
+
}
|
|
2818
|
+
.fds-icon-button--ghost:hover:not(:disabled) {
|
|
2819
|
+
background: var(--color-surface, #f5f5f5);
|
|
2820
|
+
color: var(--color-text, #171717);
|
|
2821
|
+
}
|
|
2822
|
+
.fds-icon-button:active:not(:disabled) {
|
|
2823
|
+
background: var(--color-surface-hover, #ececec);
|
|
2824
|
+
}
|
|
2825
|
+
|
|
2826
|
+
/* src/components/Menu/menu.css */
|
|
2827
|
+
.fds-menu {
|
|
2828
|
+
position: relative;
|
|
2829
|
+
display: inline-flex;
|
|
2830
|
+
}
|
|
2831
|
+
.fds-menu__list {
|
|
2832
|
+
position: absolute;
|
|
2833
|
+
top: calc(100% + 4px);
|
|
2834
|
+
z-index: 50;
|
|
2835
|
+
min-width: 200px;
|
|
2836
|
+
padding: var(--spacing-1, 4px);
|
|
2837
|
+
background: var(--color-surface-raised, #ffffff);
|
|
2838
|
+
border: 1px solid var(--color-border, #e5e5e5);
|
|
2839
|
+
border-radius: var(--radius-md, 6px);
|
|
2840
|
+
box-shadow: var(--shadow-lg, 0 4px 8px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.1));
|
|
2841
|
+
}
|
|
2842
|
+
.fds-menu__list:focus {
|
|
2843
|
+
outline: none;
|
|
2844
|
+
}
|
|
2845
|
+
.fds-menu__list--start {
|
|
2846
|
+
left: 0;
|
|
2847
|
+
}
|
|
2848
|
+
.fds-menu__list--end {
|
|
2849
|
+
right: 0;
|
|
2850
|
+
}
|
|
2851
|
+
.fds-menu__item {
|
|
2852
|
+
display: flex;
|
|
2853
|
+
align-items: center;
|
|
2854
|
+
gap: var(--spacing-2, 8px);
|
|
2855
|
+
padding: var(--spacing-2, 8px) var(--spacing-2, 8px);
|
|
2856
|
+
border-radius: var(--radius-sm, 4px);
|
|
2857
|
+
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
2858
|
+
font-size: var(--font-size-text-sm, 14px);
|
|
2859
|
+
line-height: var(--line-height-text-compact, 20px);
|
|
2860
|
+
color: var(--color-text, #171717);
|
|
2861
|
+
white-space: nowrap;
|
|
2862
|
+
cursor: pointer;
|
|
2863
|
+
}
|
|
2864
|
+
.fds-menu__item--active {
|
|
2865
|
+
background: var(--color-surface, #f5f5f5);
|
|
2866
|
+
}
|
|
2867
|
+
.fds-menu__item--danger {
|
|
2868
|
+
color: var(--color-error, #b91c1c);
|
|
2869
|
+
}
|
|
2870
|
+
.fds-menu__item--disabled {
|
|
2871
|
+
opacity: 0.5;
|
|
2872
|
+
cursor: not-allowed;
|
|
2873
|
+
}
|
|
2874
|
+
.fds-menu__icon {
|
|
2875
|
+
display: inline-flex;
|
|
2876
|
+
width: 16px;
|
|
2877
|
+
height: 16px;
|
|
2878
|
+
}
|
|
2879
|
+
.fds-menu__icon > svg {
|
|
2880
|
+
width: 100%;
|
|
2881
|
+
height: 100%;
|
|
2882
|
+
}
|
|
2883
|
+
|
|
2884
|
+
/* src/components/Table/table.css */
|
|
2885
|
+
.fds-table {
|
|
2886
|
+
width: 100%;
|
|
2887
|
+
overflow-x: auto;
|
|
2888
|
+
border-radius: var(--radius-xl, 12px);
|
|
2889
|
+
background: var(--color-surface-raised, #ffffff);
|
|
2890
|
+
}
|
|
2891
|
+
.fds-table__table {
|
|
2892
|
+
width: 100%;
|
|
2893
|
+
min-width: 560px;
|
|
2894
|
+
border-collapse: collapse;
|
|
2895
|
+
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
2896
|
+
font-size: var(--font-size-text-compact, 13px);
|
|
2897
|
+
line-height: var(--line-height-text-compact, 20px);
|
|
2898
|
+
color: var(--color-text, #171717);
|
|
2899
|
+
}
|
|
2900
|
+
.fds-table__table th {
|
|
2901
|
+
padding: var(--spacing-2, 8px) var(--spacing-4, 16px);
|
|
2902
|
+
background: var(--color-surface, #f5f5f5);
|
|
2903
|
+
font-size: var(--font-size-text-2xs, 11px);
|
|
2904
|
+
font-weight: var(--font-weight-medium, 500);
|
|
2905
|
+
color: var(--color-text-secondary, #525252);
|
|
2906
|
+
text-align: left;
|
|
2907
|
+
white-space: nowrap;
|
|
2908
|
+
}
|
|
2909
|
+
.fds-table__table td {
|
|
2910
|
+
padding: var(--spacing-3, 12px) var(--spacing-4, 16px);
|
|
2911
|
+
border-bottom: 1px solid var(--color-border-light, #f5f5f5);
|
|
2912
|
+
vertical-align: middle;
|
|
2913
|
+
}
|
|
2914
|
+
.fds-table__table tbody tr:last-child td {
|
|
2915
|
+
border-bottom: 0;
|
|
2916
|
+
}
|
|
2917
|
+
.fds-table__table .fds-table__cell--end {
|
|
2918
|
+
text-align: right;
|
|
2919
|
+
}
|
|
2920
|
+
.fds-table__table .fds-table__empty {
|
|
2921
|
+
padding: var(--spacing-10, 40px) var(--spacing-4, 16px);
|
|
2922
|
+
}
|
|
2923
|
+
|
|
2924
|
+
/* src/components/PricingCard/pricing-card.css */
|
|
2925
|
+
.fds-pricing-card {
|
|
2926
|
+
display: flex;
|
|
2927
|
+
flex-direction: column;
|
|
2928
|
+
min-width: 0;
|
|
2929
|
+
padding: var(--spacing-1, 4px);
|
|
2930
|
+
background: var(--color-surface-subtle, #fafafa);
|
|
2931
|
+
border: 1px solid var(--color-border, #e5e5e5);
|
|
2932
|
+
border-radius: var(--radius-2xl, 16px);
|
|
2933
|
+
color: var(--color-text, #171717);
|
|
2934
|
+
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
2935
|
+
}
|
|
2936
|
+
.fds-pricing-card__top {
|
|
2937
|
+
display: flex;
|
|
2938
|
+
flex-direction: column;
|
|
2939
|
+
padding: var(--spacing-8, 32px) var(--spacing-8, 32px) var(--spacing-6, 24px);
|
|
2940
|
+
background: var(--color-surface-raised, #ffffff);
|
|
2941
|
+
border: 1px solid transparent;
|
|
2942
|
+
border-radius: var(--radius-xl, 12px);
|
|
2943
|
+
}
|
|
2944
|
+
.fds-pricing-card__eyebrow {
|
|
2945
|
+
align-self: flex-start;
|
|
2946
|
+
margin-bottom: var(--spacing-3, 12px);
|
|
2947
|
+
padding: 2px var(--spacing-2, 8px);
|
|
2948
|
+
border-radius: var(--radius-sm, 4px);
|
|
2949
|
+
background: var(--color-surface, #f5f5f5);
|
|
2950
|
+
font-size: var(--font-size-text-xs, 12px);
|
|
2951
|
+
line-height: var(--line-height-text-xs, 18px);
|
|
2952
|
+
font-weight: var(--font-weight-medium, 500);
|
|
2953
|
+
letter-spacing: 0.02em;
|
|
2954
|
+
text-transform: uppercase;
|
|
2955
|
+
color: var(--color-text-on-neutral, #404040);
|
|
2956
|
+
}
|
|
2957
|
+
.fds-pricing-card__title {
|
|
2958
|
+
display: flex;
|
|
2959
|
+
align-items: center;
|
|
2960
|
+
gap: var(--spacing-2, 8px);
|
|
2961
|
+
margin: 0;
|
|
2962
|
+
font-family: var(--font-display, "Rethink Sans", system-ui, sans-serif);
|
|
2963
|
+
font-size: var(--font-size-text-xl, 20px);
|
|
2964
|
+
line-height: var(--line-height-display-xs, 32px);
|
|
2965
|
+
font-weight: var(--font-weight-medium, 500);
|
|
2966
|
+
letter-spacing: -0.01em;
|
|
2967
|
+
}
|
|
2968
|
+
.fds-pricing-card__price {
|
|
2969
|
+
display: flex;
|
|
2970
|
+
align-items: baseline;
|
|
2971
|
+
gap: var(--spacing-1, 4px);
|
|
2972
|
+
margin: var(--spacing-6, 24px) 0 0;
|
|
2973
|
+
}
|
|
2974
|
+
.fds-pricing-card__amount {
|
|
2975
|
+
font-family: var(--font-display, "Rethink Sans", system-ui, sans-serif);
|
|
2976
|
+
font-size: var(--font-size-display-md, 36px);
|
|
2977
|
+
line-height: var(--line-height-display-md, 44px);
|
|
2978
|
+
font-weight: var(--font-weight-medium, 500);
|
|
2979
|
+
letter-spacing: -0.02em;
|
|
2980
|
+
}
|
|
2981
|
+
.fds-pricing-card__period {
|
|
2982
|
+
font-size: var(--font-size-text-md, 16px);
|
|
2983
|
+
color: var(--color-text-secondary, #525252);
|
|
2984
|
+
}
|
|
2985
|
+
.fds-pricing-card__description {
|
|
2986
|
+
margin: var(--spacing-3, 12px) 0 0;
|
|
2987
|
+
font-size: var(--font-size-text-sm, 14px);
|
|
2988
|
+
line-height: var(--line-height-text-sm, 22px);
|
|
2989
|
+
color: var(--color-text-secondary, #525252);
|
|
2990
|
+
}
|
|
2991
|
+
.fds-pricing-card__action {
|
|
2992
|
+
display: flex;
|
|
2993
|
+
flex-direction: column;
|
|
2994
|
+
margin-top: var(--spacing-6, 24px);
|
|
2995
|
+
}
|
|
2996
|
+
.fds-pricing-card__features {
|
|
2997
|
+
padding: var(--spacing-6, 24px) var(--spacing-8, 32px) var(--spacing-8, 32px);
|
|
2998
|
+
}
|
|
2999
|
+
.fds-pricing-card__featuresTitle {
|
|
3000
|
+
margin: 0;
|
|
3001
|
+
font-size: var(--font-size-text-sm, 14px);
|
|
3002
|
+
line-height: var(--line-height-text-sm, 22px);
|
|
3003
|
+
font-weight: var(--font-weight-medium, 500);
|
|
3004
|
+
letter-spacing: 0.02em;
|
|
3005
|
+
text-transform: uppercase;
|
|
3006
|
+
}
|
|
3007
|
+
.fds-pricing-card__intro {
|
|
3008
|
+
margin: var(--spacing-4, 16px) 0 0;
|
|
3009
|
+
font-size: var(--font-size-text-sm, 14px);
|
|
3010
|
+
line-height: var(--line-height-text-sm, 22px);
|
|
3011
|
+
color: var(--color-text-secondary, #525252);
|
|
3012
|
+
}
|
|
3013
|
+
.fds-pricing-card__intro strong,
|
|
3014
|
+
.fds-pricing-card__intro b {
|
|
3015
|
+
color: var(--color-text, #171717);
|
|
3016
|
+
font-weight: var(--font-weight-medium, 500);
|
|
3017
|
+
}
|
|
3018
|
+
.fds-pricing-card__list {
|
|
3019
|
+
display: flex;
|
|
3020
|
+
flex-direction: column;
|
|
3021
|
+
gap: var(--spacing-4, 16px);
|
|
3022
|
+
margin: var(--spacing-5, 20px) 0 0;
|
|
3023
|
+
padding: 0;
|
|
3024
|
+
list-style: none;
|
|
3025
|
+
}
|
|
3026
|
+
.fds-pricing-card__feature {
|
|
3027
|
+
display: flex;
|
|
3028
|
+
align-items: center;
|
|
3029
|
+
gap: var(--spacing-3, 12px);
|
|
3030
|
+
font-size: var(--font-size-text-sm, 14px);
|
|
3031
|
+
line-height: var(--line-height-text-sm, 22px);
|
|
3032
|
+
}
|
|
3033
|
+
.fds-pricing-card__check {
|
|
3034
|
+
display: inline-flex;
|
|
3035
|
+
align-items: center;
|
|
3036
|
+
justify-content: center;
|
|
3037
|
+
flex-shrink: 0;
|
|
3038
|
+
width: 22px;
|
|
3039
|
+
height: 22px;
|
|
3040
|
+
border-radius: var(--radius-full, 9999px);
|
|
3041
|
+
background: var(--color-surface, #f5f5f5);
|
|
3042
|
+
color: var(--color-text-secondary, #525252);
|
|
3043
|
+
}
|
|
3044
|
+
.fds-pricing-card--highlighted {
|
|
3045
|
+
background: color-mix(in srgb, var(--color-accent-subtle, #ffedd5) 50%, var(--color-surface-raised, #ffffff));
|
|
3046
|
+
border-color: transparent;
|
|
3047
|
+
}
|
|
3048
|
+
.fds-pricing-card--highlighted .fds-pricing-card__top {
|
|
3049
|
+
border-color: var(--color-accent-muted, #fb923c);
|
|
3050
|
+
}
|
|
3051
|
+
.fds-pricing-card--highlighted .fds-pricing-card__eyebrow {
|
|
3052
|
+
background: var(--color-accent-subtle, #ffedd5);
|
|
3053
|
+
color: var(--color-accent-text, #c2410c);
|
|
3054
|
+
}
|
|
3055
|
+
.fds-pricing-card--highlighted .fds-pricing-card__check {
|
|
3056
|
+
background: var(--color-accent-muted, #fb923c);
|
|
3057
|
+
color: var(--color-primary-text, #ffffff);
|
|
3058
|
+
}
|
|
3059
|
+
@media (max-width: 600px) {
|
|
3060
|
+
.fds-pricing-card__top {
|
|
3061
|
+
padding: var(--spacing-6, 24px);
|
|
3062
|
+
}
|
|
3063
|
+
.fds-pricing-card__features {
|
|
3064
|
+
padding: var(--spacing-5, 20px) var(--spacing-6, 24px) var(--spacing-6, 24px);
|
|
3065
|
+
}
|
|
3066
|
+
}
|