@usefidel/design-system 0.20.0 → 0.21.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.
Files changed (9) hide show
  1. package/dist/admin.css +15 -0
  2. package/dist/extension.css +15 -0
  3. package/dist/fidel.manifest.json +2 -2
  4. package/dist/index.css +1 -1
  5. package/dist/landing.css +15 -0
  6. package/dist/theme.css +15 -0
  7. package/dist/webapp.css +15 -0
  8. package/package.json +1 -1
  9. package/tokens/tokens.json +62 -0
package/dist/admin.css CHANGED
@@ -32,6 +32,7 @@
32
32
  --color-success: #059669;
33
33
  --color-success-bg: #f0fdf4;
34
34
  --color-success-text: #15803d;
35
+ --color-success-border: #bbf7d0;
35
36
  --color-warning: #ca8a04;
36
37
  --color-warning-bg: #fffbeb;
37
38
  --color-warning-text: #92400e;
@@ -56,6 +57,17 @@
56
57
  --color-error-pressed: #7f1d1d;
57
58
  --color-error-border-hover: #fca5a5;
58
59
  --color-error-bg-pressed: #fee2e2;
60
+ --color-white-alpha-6: rgba(255, 255, 255, 0.06);
61
+ --color-white-alpha-8: rgba(255, 255, 255, 0.08);
62
+ --color-white-alpha-10: rgba(255, 255, 255, 0.1);
63
+ --color-white-alpha-12: rgba(255, 255, 255, 0.12);
64
+ --color-white-alpha-35: rgba(255, 255, 255, 0.35);
65
+ --color-white-alpha-55: rgba(255, 255, 255, 0.55);
66
+ --color-white-alpha-60: rgba(255, 255, 255, 0.6);
67
+ --color-white-alpha-92: rgba(255, 255, 255, 0.92);
68
+ --color-black-alpha-4: rgba(0, 0, 0, 0.04);
69
+ --color-black-alpha-8: rgba(0, 0, 0, 0.08);
70
+ --color-black-alpha-60: rgba(0, 0, 0, 0.6);
59
71
  --font-display: 'Rethink Sans', system-ui, -apple-system, sans-serif;
60
72
  --font-body: 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
61
73
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
@@ -130,9 +142,12 @@
130
142
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.1);
131
143
  --shadow-pill: 0 1px 2px rgba(15, 23, 42, 0.08);
132
144
  --shadow-cta: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.06);
145
+ --shadow-popover: 0 1px 2px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.14);
146
+ --shadow-focus-error: 0 0 0 3px rgba(220, 38, 38, 0.15);
133
147
  --font-weight-regular: 400;
134
148
  --font-weight-medium: 500;
135
149
  --font-weight-semibold: 600;
136
150
  --font-weight-bold: 700;
137
151
  --font-weight-extrabold: 800;
152
+ --gradient-brand-warm: linear-gradient(160deg, #fbfbfb 34%, #f29c6f 90%);
138
153
  }
package/dist/extension.css CHANGED
@@ -32,6 +32,7 @@
32
32
  --color-success: #059669;
33
33
  --color-success-bg: #f0fdf4;
34
34
  --color-success-text: #15803d;
35
+ --color-success-border: #bbf7d0;
35
36
  --color-warning: #ca8a04;
36
37
  --color-warning-bg: #fffbeb;
37
38
  --color-warning-text: #92400e;
@@ -56,6 +57,17 @@
56
57
  --color-error-pressed: #7f1d1d;
57
58
  --color-error-border-hover: #fca5a5;
58
59
  --color-error-bg-pressed: #fee2e2;
60
+ --color-white-alpha-6: rgba(255, 255, 255, 0.06);
61
+ --color-white-alpha-8: rgba(255, 255, 255, 0.08);
62
+ --color-white-alpha-10: rgba(255, 255, 255, 0.1);
63
+ --color-white-alpha-12: rgba(255, 255, 255, 0.12);
64
+ --color-white-alpha-35: rgba(255, 255, 255, 0.35);
65
+ --color-white-alpha-55: rgba(255, 255, 255, 0.55);
66
+ --color-white-alpha-60: rgba(255, 255, 255, 0.6);
67
+ --color-white-alpha-92: rgba(255, 255, 255, 0.92);
68
+ --color-black-alpha-4: rgba(0, 0, 0, 0.04);
69
+ --color-black-alpha-8: rgba(0, 0, 0, 0.08);
70
+ --color-black-alpha-60: rgba(0, 0, 0, 0.6);
59
71
  --font-display: 'Rethink Sans', system-ui, -apple-system, sans-serif;
60
72
  --font-body: 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
61
73
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
@@ -130,9 +142,12 @@
130
142
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.1);
131
143
  --shadow-pill: 0 1px 2px rgba(15, 23, 42, 0.08);
132
144
  --shadow-cta: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.06);
145
+ --shadow-popover: 0 1px 2px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.14);
146
+ --shadow-focus-error: 0 0 0 3px rgba(220, 38, 38, 0.15);
133
147
  --font-weight-regular: 400;
134
148
  --font-weight-medium: 500;
135
149
  --font-weight-semibold: 600;
136
150
  --font-weight-bold: 700;
137
151
  --font-weight-extrabold: 800;
152
+ --gradient-brand-warm: linear-gradient(160deg, #fbfbfb 34%, #f29c6f 90%);
138
153
  }
package/dist/fidel.manifest.json CHANGED
@@ -10,6 +10,6 @@
10
10
  "webapp.css"
11
11
  ],
12
12
  "storybookUrl": null,
13
- "packageVersion": "0.20.0",
14
- "resolvedSha": "03e0eb5580241d65f5ba3e517571a81ccb6f792d"
13
+ "packageVersion": "0.21.0",
14
+ "resolvedSha": "bada2cc3bf79baf9d9060db06f8ddf0881b82256"
15
15
  }
package/dist/index.css CHANGED
@@ -3025,7 +3025,7 @@
3025
3025
  }
3026
3026
  .fds-pricing-card__feature {
3027
3027
  display: flex;
3028
- align-items: center;
3028
+ align-items: flex-start;
3029
3029
  gap: var(--spacing-3, 12px);
3030
3030
  font-size: var(--font-size-text-sm, 14px);
3031
3031
  line-height: var(--line-height-text-sm, 22px);
package/dist/landing.css CHANGED
@@ -32,6 +32,7 @@
32
32
  --color-success: #059669;
33
33
  --color-success-bg: #f0fdf4;
34
34
  --color-success-text: #15803d;
35
+ --color-success-border: #bbf7d0;
35
36
  --color-warning: #ca8a04;
36
37
  --color-warning-bg: #fffbeb;
37
38
  --color-warning-text: #92400e;
@@ -56,6 +57,17 @@
56
57
  --color-error-pressed: #7f1d1d;
57
58
  --color-error-border-hover: #fca5a5;
58
59
  --color-error-bg-pressed: #fee2e2;
60
+ --color-white-alpha-6: rgba(255, 255, 255, 0.06);
61
+ --color-white-alpha-8: rgba(255, 255, 255, 0.08);
62
+ --color-white-alpha-10: rgba(255, 255, 255, 0.1);
63
+ --color-white-alpha-12: rgba(255, 255, 255, 0.12);
64
+ --color-white-alpha-35: rgba(255, 255, 255, 0.35);
65
+ --color-white-alpha-55: rgba(255, 255, 255, 0.55);
66
+ --color-white-alpha-60: rgba(255, 255, 255, 0.6);
67
+ --color-white-alpha-92: rgba(255, 255, 255, 0.92);
68
+ --color-black-alpha-4: rgba(0, 0, 0, 0.04);
69
+ --color-black-alpha-8: rgba(0, 0, 0, 0.08);
70
+ --color-black-alpha-60: rgba(0, 0, 0, 0.6);
59
71
  --font-display: 'Rethink Sans', system-ui, -apple-system, sans-serif;
60
72
  --font-body: 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
61
73
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
@@ -130,9 +142,12 @@
130
142
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.1);
131
143
  --shadow-pill: 0 1px 2px rgba(15, 23, 42, 0.08);
132
144
  --shadow-cta: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.06);
145
+ --shadow-popover: 0 1px 2px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.14);
146
+ --shadow-focus-error: 0 0 0 3px rgba(220, 38, 38, 0.15);
133
147
  --font-weight-regular: 400;
134
148
  --font-weight-medium: 500;
135
149
  --font-weight-semibold: 600;
136
150
  --font-weight-bold: 700;
137
151
  --font-weight-extrabold: 800;
152
+ --gradient-brand-warm: linear-gradient(160deg, #fbfbfb 34%, #f29c6f 90%);
138
153
  }
package/dist/theme.css CHANGED
@@ -34,6 +34,7 @@
34
34
  --color-success: #059669;
35
35
  --color-success-bg: #f0fdf4;
36
36
  --color-success-text: #15803d;
37
+ --color-success-border: #bbf7d0;
37
38
  --color-warning: #ca8a04;
38
39
  --color-warning-bg: #fffbeb;
39
40
  --color-warning-text: #92400e;
@@ -58,6 +59,17 @@
58
59
  --color-error-pressed: #7f1d1d;
59
60
  --color-error-border-hover: #fca5a5;
60
61
  --color-error-bg-pressed: #fee2e2;
62
+ --color-white-alpha-6: rgba(255, 255, 255, 0.06);
63
+ --color-white-alpha-8: rgba(255, 255, 255, 0.08);
64
+ --color-white-alpha-10: rgba(255, 255, 255, 0.1);
65
+ --color-white-alpha-12: rgba(255, 255, 255, 0.12);
66
+ --color-white-alpha-35: rgba(255, 255, 255, 0.35);
67
+ --color-white-alpha-55: rgba(255, 255, 255, 0.55);
68
+ --color-white-alpha-60: rgba(255, 255, 255, 0.6);
69
+ --color-white-alpha-92: rgba(255, 255, 255, 0.92);
70
+ --color-black-alpha-4: rgba(0, 0, 0, 0.04);
71
+ --color-black-alpha-8: rgba(0, 0, 0, 0.08);
72
+ --color-black-alpha-60: rgba(0, 0, 0, 0.6);
61
73
  --font-display: 'Rethink Sans', system-ui, -apple-system, sans-serif;
62
74
  --font-body: 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
63
75
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
@@ -132,9 +144,12 @@
132
144
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.1);
133
145
  --shadow-pill: 0 1px 2px rgba(15, 23, 42, 0.08);
134
146
  --shadow-cta: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.06);
147
+ --shadow-popover: 0 1px 2px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.14);
148
+ --shadow-focus-error: 0 0 0 3px rgba(220, 38, 38, 0.15);
135
149
  --font-weight-regular: 400;
136
150
  --font-weight-medium: 500;
137
151
  --font-weight-semibold: 600;
138
152
  --font-weight-bold: 700;
139
153
  --font-weight-extrabold: 800;
154
+ --gradient-brand-warm: linear-gradient(160deg, #fbfbfb 34%, #f29c6f 90%);
140
155
  }
package/dist/webapp.css CHANGED
@@ -32,6 +32,7 @@
32
32
  --color-success: #059669;
33
33
  --color-success-bg: #f0fdf4;
34
34
  --color-success-text: #15803d;
35
+ --color-success-border: #bbf7d0;
35
36
  --color-warning: #ca8a04;
36
37
  --color-warning-bg: #fffbeb;
37
38
  --color-warning-text: #92400e;
@@ -56,6 +57,17 @@
56
57
  --color-error-pressed: #7f1d1d;
57
58
  --color-error-border-hover: #fca5a5;
58
59
  --color-error-bg-pressed: #fee2e2;
60
+ --color-white-alpha-6: rgba(255, 255, 255, 0.06);
61
+ --color-white-alpha-8: rgba(255, 255, 255, 0.08);
62
+ --color-white-alpha-10: rgba(255, 255, 255, 0.1);
63
+ --color-white-alpha-12: rgba(255, 255, 255, 0.12);
64
+ --color-white-alpha-35: rgba(255, 255, 255, 0.35);
65
+ --color-white-alpha-55: rgba(255, 255, 255, 0.55);
66
+ --color-white-alpha-60: rgba(255, 255, 255, 0.6);
67
+ --color-white-alpha-92: rgba(255, 255, 255, 0.92);
68
+ --color-black-alpha-4: rgba(0, 0, 0, 0.04);
69
+ --color-black-alpha-8: rgba(0, 0, 0, 0.08);
70
+ --color-black-alpha-60: rgba(0, 0, 0, 0.6);
59
71
  --font-display: 'Rethink Sans', system-ui, -apple-system, sans-serif;
60
72
  --font-body: 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
61
73
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
@@ -130,9 +142,12 @@
130
142
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.1);
131
143
  --shadow-pill: 0 1px 2px rgba(15, 23, 42, 0.08);
132
144
  --shadow-cta: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.06);
145
+ --shadow-popover: 0 1px 2px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.14);
146
+ --shadow-focus-error: 0 0 0 3px rgba(220, 38, 38, 0.15);
133
147
  --font-weight-regular: 400;
134
148
  --font-weight-medium: 500;
135
149
  --font-weight-semibold: 600;
136
150
  --font-weight-bold: 700;
137
151
  --font-weight-extrabold: 800;
152
+ --gradient-brand-warm: linear-gradient(160deg, #fbfbfb 34%, #f29c6f 90%);
138
153
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@usefidel/design-system",
3
- "version": "0.20.0",
3
+ "version": "0.21.0",
4
4
  "description": "Fidel brand design tokens + React component library — DTCG token source of truth, generated per-surface CSS + Tailwind-v4 parser-compatibility output, and on-brand React components (Button, MismatchCard, DiffSection).",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
package/tokens/tokens.json CHANGED
@@ -200,6 +200,10 @@
200
200
  "$value": "#15803d",
201
201
  "$type": "color"
202
202
  },
203
+ "success-border": {
204
+ "$value": "#bbf7d0",
205
+ "$type": "color"
206
+ },
203
207
  "warning": {
204
208
  "$value": "#ca8a04",
205
209
  "$type": "color"
@@ -295,6 +299,50 @@
295
299
  "error-bg-pressed": {
296
300
  "$value": "#fee2e2",
297
301
  "$type": "color"
302
+ },
303
+ "white-alpha-6": {
304
+ "$value": "rgba(255, 255, 255, 0.06)",
305
+ "$type": "color"
306
+ },
307
+ "white-alpha-8": {
308
+ "$value": "rgba(255, 255, 255, 0.08)",
309
+ "$type": "color"
310
+ },
311
+ "white-alpha-10": {
312
+ "$value": "rgba(255, 255, 255, 0.1)",
313
+ "$type": "color"
314
+ },
315
+ "white-alpha-12": {
316
+ "$value": "rgba(255, 255, 255, 0.12)",
317
+ "$type": "color"
318
+ },
319
+ "white-alpha-35": {
320
+ "$value": "rgba(255, 255, 255, 0.35)",
321
+ "$type": "color"
322
+ },
323
+ "white-alpha-55": {
324
+ "$value": "rgba(255, 255, 255, 0.55)",
325
+ "$type": "color"
326
+ },
327
+ "white-alpha-60": {
328
+ "$value": "rgba(255, 255, 255, 0.6)",
329
+ "$type": "color"
330
+ },
331
+ "white-alpha-92": {
332
+ "$value": "rgba(255, 255, 255, 0.92)",
333
+ "$type": "color"
334
+ },
335
+ "black-alpha-4": {
336
+ "$value": "rgba(0, 0, 0, 0.04)",
337
+ "$type": "color"
338
+ },
339
+ "black-alpha-8": {
340
+ "$value": "rgba(0, 0, 0, 0.08)",
341
+ "$type": "color"
342
+ },
343
+ "black-alpha-60": {
344
+ "$value": "rgba(0, 0, 0, 0.6)",
345
+ "$type": "color"
298
346
  }
299
347
  },
300
348
  "font": {
@@ -633,6 +681,14 @@
633
681
  "cta": {
634
682
  "$value": "0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.06)",
635
683
  "$type": "shadow"
684
+ },
685
+ "popover": {
686
+ "$value": "0 1px 2px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.14)",
687
+ "$type": "shadow"
688
+ },
689
+ "focus-error": {
690
+ "$value": "0 0 0 3px rgba(220, 38, 38, 0.15)",
691
+ "$type": "shadow"
636
692
  }
637
693
  },
638
694
  "fontWeight": {
@@ -656,5 +712,11 @@
656
712
  "$value": 800,
657
713
  "$type": "fontWeight"
658
714
  }
715
+ },
716
+ "gradient": {
717
+ "brand-warm": {
718
+ "$value": "linear-gradient(160deg, #fbfbfb 34%, #f29c6f 90%)",
719
+ "$type": "gradient"
720
+ }
659
721
  }
660
722
  }