@freightos/freightwind 2.1.1 → 2.1.3

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 (17) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +28 -28
  3. package/dist/cjs/components/chip.js +1 -1
  4. package/dist/cjs/lib/index.js +10 -0
  5. package/dist/cjs/lib/use-stable-id.js +2 -3
  6. package/dist/esm/components/chip.js +1 -1
  7. package/dist/esm/lib/index.js +3 -0
  8. package/dist/esm/lib/use-stable-id.js +2 -3
  9. package/dist/types/lib/index.d.ts +4 -0
  10. package/guidelines/Guidelines.md +233 -233
  11. package/guidelines/design-tokens/colors.md +81 -81
  12. package/guidelines/design-tokens/spacing.md +45 -45
  13. package/guidelines/design-tokens/typography.md +87 -87
  14. package/guidelines/overview-components.md +252 -252
  15. package/guidelines/overview-icons.md +52 -52
  16. package/package.json +102 -102
  17. package/tokens.css +419 -409
package/tokens.css CHANGED
@@ -1,409 +1,419 @@
1
- /* FreightWind Design System Tokens
2
- * Import this file to get FDS design tokens for Tailwind CSS v4.
3
- * Usage: @import '@freightos/freightwind/tokens.css';
4
- */
5
-
6
- @theme inline {
7
- /* Base semantic colors */
8
- --color-ground: var(--ground);
9
- --color-background: var(--background);
10
- --color-foreground: var(--foreground);
11
- --color-card: var(--card);
12
- --color-card-foreground: var(--card-foreground);
13
- --color-card-elevated: var(--card-elevated);
14
- --color-popover: var(--popover);
15
- --color-popover-foreground: var(--popover-foreground);
16
- --color-primary: var(--primary);
17
- --color-primary-foreground: var(--primary-foreground);
18
- --color-secondary: var(--secondary);
19
- --color-secondary-foreground: var(--secondary-foreground);
20
- --color-muted: var(--muted);
21
- --color-muted-foreground: var(--muted-foreground);
22
- --color-accent: var(--accent);
23
- --color-accent-foreground: var(--accent-foreground);
24
- --color-destructive: var(--destructive);
25
- --color-destructive-foreground: var(--destructive-foreground);
26
- --color-border: var(--border);
27
- --color-input: var(--input);
28
- --color-input-border: var(--input-border);
29
- --color-ring: var(--ring);
30
-
31
- /* Chart colors */
32
- --color-chart-1: var(--chart-1);
33
- --color-chart-2: var(--chart-2);
34
- --color-chart-3: var(--chart-3);
35
- --color-chart-4: var(--chart-4);
36
- --color-chart-5: var(--chart-5);
37
-
38
- /* Sidebar colors */
39
- --color-sidebar: var(--sidebar);
40
- --color-sidebar-foreground: var(--sidebar-foreground);
41
- --color-sidebar-primary: var(--sidebar-primary);
42
- --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
43
- --color-sidebar-accent: var(--sidebar-accent);
44
- --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
45
- --color-sidebar-border: var(--sidebar-border);
46
- --color-sidebar-ring: var(--sidebar-ring);
47
-
48
- /* FDS Color Tokens - Primary Blue */
49
- --color-fds-blue-05: #b0cee8;
50
- --color-fds-blue-10: #e1f5f9;
51
- --color-fds-blue-20: #ace8f0;
52
- --color-fds-blue-30: #2075bd;
53
- --color-fds-blue-40: #125c9b;
54
- --color-fds-blue-50: #05387d;
55
-
56
- /* FDS Color Tokens - Semantic Red */
57
- --color-fds-red-10: #ffede1;
58
- --color-fds-red-20: #fbbea4;
59
- --color-fds-red-30: #d8271e;
60
- --color-fds-red-40: #9b0f1f;
61
- --color-fds-red-50: #670521;
62
-
63
- /* FDS Color Tokens - Semantic Green */
64
- --color-fds-green-10: #eafdea;
65
- --color-fds-green-20: #bdf6c2;
66
- --color-fds-green-30: #47a96e;
67
- --color-fds-green-40: #237957;
68
- --color-fds-green-50: #0d5143;
69
-
70
- /* FDS Color Tokens - Semantic Yellow */
71
- --color-fds-yellow-10: #fef6cc;
72
- --color-fds-yellow-20: #fdea9a;
73
- --color-fds-yellow-30: #edaf07;
74
- --color-fds-yellow-40: #DC9500;
75
- --color-fds-yellow-50: #9c6b02;
76
- --color-fds-yellow-60: #714601;
77
-
78
- /* FDS Color Tokens - Gray Scale */
79
- --color-fds-white: #ffffff;
80
- --color-fds-gray-05: #fbfbfb;
81
- --color-fds-gray-10: #f6f6f6;
82
- --color-fds-gray-20: #e5e6e6;
83
- --color-fds-gray-30: #c6c7c7;
84
- --color-fds-gray-40: #afb2b2;
85
- --color-fds-gray-50: #999C9D;
86
- --color-fds-gray-60: #8a8d8f;
87
- --color-fds-gray-70: #6a6f73;
88
- --color-fds-gray-80: #53575f;
89
- --color-fds-gray-90: #3b3f4b;
90
- --color-fds-gray-100: #232537;
91
-
92
- /* FDS Color Tokens - Tertiary */
93
- --color-fds-purple-1: #715397;
94
- --color-fds-purple-2: #e7d8fc;
95
-
96
- /* FDS Font Weights */
97
- --font-weight-fds-regular: 400;
98
- --font-weight-fds-medium: 500;
99
- --font-weight-fds-semibold: 600;
100
- --font-weight-fds-bold: 700;
101
- --font-weight-fds-extrabold: 800;
102
-
103
- /* FDS Line Heights */
104
- --leading-fds-body: 1.5;
105
- --leading-fds-title: 1.25;
106
-
107
- /* FDS Spacing */
108
- --spacing-fds-xs: 4px;
109
- --spacing-fds-sm: 8px;
110
- --spacing-fds-md: 12px;
111
- --spacing-fds-lg: 16px;
112
- --spacing-fds-xl: 24px;
113
- --spacing-fds-xxl: 32px;
114
- --spacing-fds-xxxl: 64px;
115
-
116
- /* FDS Border Radius */
117
- --radius-fds-sm: 2px;
118
- --radius-fds-md: 4px;
119
- --radius-fds-lg: 8px;
120
-
121
- /* Standard radii */
122
- --radius-sm: calc(var(--radius) - 4px);
123
- --radius-md: calc(var(--radius) - 2px);
124
- --radius-lg: var(--radius);
125
- --radius-xl: calc(var(--radius) + 4px);
126
-
127
- /* FDS Shadows */
128
- --shadow-fds-sm: 0 0 10px 0 rgba(35, 37, 55, 0.12);
129
- --shadow-fds-md: 0 0 15px 0 rgba(35, 37, 55, 0.12);
130
- --shadow-fds-lg: 0 0 48px 0 rgba(35, 37, 55, 0.3);
131
-
132
- /* FDS Border Widths */
133
- --border-width-fds-sm: 1px;
134
- --border-width-fds-md: 2px;
135
- --border-width-fds-lg: 4px;
136
- --border-width-fds-xl: 8px;
137
-
138
- /* FDS Max Content Width Tokens */
139
- --width-fds-xs: 325px;
140
- --width-fds-m: 768px;
141
- --width-fds-l: 992px;
142
- --width-fds-xl: 1200px;
143
-
144
- /* FDS Breakpoints */
145
- --breakpoint-m: 832px;
146
- --breakpoint-l: 1040px;
147
- --breakpoint-xl: 1200px;
148
-
149
- /* Fonts */
150
- --font-sans: 'Open Sans', ui-sans-serif, system-ui, sans-serif;
151
-
152
- /* FDS Font Sizes (rem based on 16px root) */
153
- --text-fds-xs: 0.625rem; /* 10px */
154
- --text-fds-sm: 0.75rem; /* 12px */
155
- --text-fds-base: 0.875rem; /* 14px */
156
- --text-fds-h6: 1rem; /* 16px */
157
- --text-fds-h5: 1.125rem; /* 18px */
158
- --text-fds-h4: 1.25rem; /* 20px */
159
- --text-fds-h3: 1.5rem; /* 24px */
160
- --text-fds-h2: 2rem; /* 32px */
161
- --text-fds-h1: 2.5rem; /* 40px */
162
- }
163
-
164
- :root {
165
- --radius: 4px;
166
-
167
- /* FDS Color Tokens - Primary Blue */
168
- --fds-color-primary-blue-05: #b0cee8;
169
- --fds-color-primary-blue-10: #e1f5f9;
170
- --fds-color-primary-blue-20: #ace8f0;
171
- --fds-color-primary-blue-30: #2075bd;
172
- --fds-color-primary-blue-40: #125c9b;
173
- --fds-color-primary-blue-50: #05387d;
174
-
175
- /* FDS Color Tokens - Semantic Red */
176
- --fds-color-semantic-red-10: #ffede1;
177
- --fds-color-semantic-red-20: #fbbea4;
178
- --fds-color-semantic-red-30: #d8271e;
179
- --fds-color-semantic-red-40: #9b0f1f;
180
- --fds-color-semantic-red-50: #670521;
181
-
182
- /* FDS Color Tokens - Semantic Green */
183
- --fds-color-semantic-green-10: #eafdea;
184
- --fds-color-semantic-green-20: #bdf6c2;
185
- --fds-color-semantic-green-30: #47a96e;
186
- --fds-color-semantic-green-40: #237957;
187
- --fds-color-semantic-green-50: #0d5143;
188
-
189
- /* FDS Color Tokens - Semantic Yellow */
190
- --fds-color-semantic-yellow-10: #fef6cc;
191
- --fds-color-semantic-yellow-20: #fdea9a;
192
- --fds-color-semantic-yellow-30: #edaf07;
193
- --fds-color-semantic-yellow-40: #DC9500;
194
- --fds-color-semantic-yellow-50: #9c6b02;
195
- --fds-color-semantic-yellow-60: #714601;
196
-
197
- /* FDS Color Tokens - Gray Scale */
198
- --fds-color-primary-white: #ffffff;
199
- --fds-color-primary-gray-05: #fbfbfb;
200
- --fds-color-primary-gray-10: #f6f6f6;
201
- --fds-color-primary-gray-20: #e5e6e6;
202
- --fds-color-primary-gray-30: #c6c7c7;
203
- --fds-color-primary-gray-40: #afb2b2;
204
- --fds-color-primary-gray-50: #999C9D;
205
- --fds-color-primary-gray-60: #8a8d8f;
206
- --fds-color-primary-gray-70: #6a6f73;
207
- --fds-color-primary-gray-80: #53575f;
208
- --fds-color-primary-gray-90: #3b3f4b;
209
- --fds-color-primary-gray-100: #232537;
210
-
211
- /* FDS Color Tokens - Tertiary */
212
- --fds-color-tertiary-purple-1: #715397;
213
- --fds-color-tertiary-purple-2: #e7d8fc;
214
-
215
- /* FDS Component Colors */
216
- --fds-component-primary-color: var(--fds-color-primary-blue-30);
217
- --fds-component-primary-color-hover: var(--fds-color-primary-blue-40);
218
- --fds-component-primary-color-click: var(--fds-color-primary-blue-50);
219
- --fds-component-primary-color-disabled: var(--fds-color-primary-gray-60);
220
- --fds-component-secondary-color: var(--fds-color-primary-gray-30);
221
- --fds-component-secondary-color-disabled: var(--fds-color-primary-gray-20);
222
- --fds-component-tertiary-color-hover: var(--fds-color-primary-blue-10);
223
- --fds-component-tertiary-color-click: var(--fds-color-primary-blue-20);
224
- --fds-component-danger-color: var(--fds-color-semantic-red-30);
225
- --fds-component-danger-color-hover: var(--fds-color-semantic-red-40);
226
- --fds-component-danger-color-click: var(--fds-color-semantic-red-50);
227
- --fds-component-invert-color: var(--fds-color-primary-white);
228
- --fds-component-background-color: var(--fds-color-primary-white);
229
- --fds-component-background-color-disabled: var(--fds-color-primary-gray-10);
230
-
231
- /* FDS Size Tokens */
232
- --fds-size-lg: 24px;
233
- --fds-size-xl: 32px;
234
- --fds-size-xxl: 40px;
235
-
236
- /* FDS Font Size Tokens */
237
- --fds-font-size-xs: 10px;
238
- --fds-font-size-sm: 12px;
239
- --fds-font-size-base: 14px;
240
- --fds-h6-font-size: 16px;
241
- --fds-h5-font-size: 18px;
242
- --fds-h4-font-size: 20px;
243
- --fds-h3-font-size: 24px;
244
- --fds-h2-font-size: 32px;
245
- --fds-h1-font-size: 40px;
246
-
247
- /* FDS Font Weight Tokens */
248
- --fds-font-weight-regular: 400;
249
- --fds-font-weight-medium: 500;
250
- --fds-font-weight-semibold: 600;
251
- --fds-font-weight-bold: 700;
252
- --fds-font-weight-extrabold: 800;
253
-
254
- /* FDS Line Height Tokens */
255
- --fds-title-line-height: 1.25;
256
-
257
- /* FDS Border Radius */
258
- --fds-border-radius-sm: 2px;
259
- --fds-border-radius-md: 4px;
260
- --fds-border-radius-lg: 8px;
261
-
262
- /* FDS Border Width */
263
- --fds-border-width-sm: 1px;
264
- --fds-border-width-md: 2px;
265
- --fds-border-width-lg: 4px;
266
- --fds-border-width-xl: 8px;
267
-
268
- /* FDS Spacing */
269
- --fds-component-spacing-xs: 4px;
270
- --fds-component-spacing-sm: 8px;
271
- --fds-component-spacing-md: 12px;
272
- --fds-component-spacing-lg: 16px;
273
- --fds-component-spacing-xl: 24px;
274
- --fds-component-spacing-xxl: 32px;
275
- --fds-component-spacing-xxxl: 64px;
276
-
277
- /* FDS Box Shadow */
278
- --fds-box-shadow-sm: 0 0 10px 0 rgba(35, 37, 55, 0.12);
279
- --fds-box-shadow-md: 0 0 15px 0 rgba(35, 37, 55, 0.12);
280
- --fds-box-shadow-lg: 0 0 48px 0 rgba(35, 37, 55, 0.3);
281
-
282
- /* Page canvas */
283
- --ground: #f6f6f6;
284
-
285
- /* Shadcn semantic mappings to FDS tokens */
286
- --background: #ffffff;
287
- --foreground: #3b3f4b;
288
- --card: #ffffff;
289
- --card-foreground: #3b3f4b;
290
- --card-elevated: #ffffff;
291
- --popover: #ffffff;
292
- --popover-foreground: #3b3f4b;
293
- --primary: #2075bd;
294
- --primary-foreground: #ffffff;
295
- --secondary: #c6c7c7;
296
- --secondary-foreground: #3b3f4b;
297
- --muted: #f6f6f6;
298
- --muted-foreground: #8a8d8f;
299
- --accent: #f6f6f6;
300
- --accent-foreground: #3b3f4b;
301
- --destructive: #d8271e;
302
- --destructive-foreground: #ffffff;
303
- --border: #e5e6e6;
304
- --input: #ffffff;
305
- --input-border: #c6c7c7;
306
- --ring: #ace8f0;
307
-
308
- --chart-1: #2075bd;
309
- --chart-2: #47a96e;
310
- --chart-3: #edaf07;
311
- --chart-4: #715397;
312
- --chart-5: #d8271e;
313
-
314
- --sidebar: #fbfbfb;
315
- --sidebar-foreground: #3b3f4b;
316
- --sidebar-primary: #2075bd;
317
- --sidebar-primary-foreground: #ffffff;
318
- --sidebar-accent: #f6f6f6;
319
- --sidebar-accent-foreground: #3b3f4b;
320
- --sidebar-border: #e5e6e6;
321
- --sidebar-ring: #ace8f0;
322
- }
323
-
324
- .dark {
325
- --ground: #1a1a1a;
326
- --background: #242424;
327
- --foreground: #fafafa;
328
- --card: #242424;
329
- --card-foreground: #fafafa;
330
- --card-elevated: #2e2e2e;
331
- --popover: #1f1f1f;
332
- --popover-foreground: #fafafa;
333
- --primary: #2075bd;
334
- --primary-foreground: #ffffff;
335
- --secondary: #262626;
336
- --secondary-foreground: #fafafa;
337
- --muted: #262626;
338
- --muted-foreground: #a3a3a3;
339
- --accent: #262626;
340
- --accent-foreground: #fafafa;
341
- --destructive: #d8271e;
342
- --destructive-foreground: #ffffff;
343
- --border: #404040;
344
- --input: #333333;
345
- --input-border: #595959;
346
- --ring: #ace8f0;
347
-
348
- --chart-1: #2075bd;
349
- --chart-2: #47a96e;
350
- --chart-3: #edaf07;
351
- --chart-4: #715397;
352
- --chart-5: #d8271e;
353
-
354
- --sidebar: #1a1a1a;
355
- --sidebar-foreground: #fafafa;
356
- --sidebar-primary: #2075bd;
357
- --sidebar-primary-foreground: #ffffff;
358
- --sidebar-accent: #262626;
359
- --sidebar-accent-foreground: #fafafa;
360
- --sidebar-border: #404040;
361
- --sidebar-ring: #ace8f0;
362
-
363
- /* Dark mode shadows */
364
- --fds-box-shadow-sm: 0 0 10px 0 rgba(0, 0, 0, 0.3);
365
- --fds-box-shadow-md: 0 0 15px 0 rgba(0, 0, 0, 0.35);
366
- --fds-box-shadow-lg: 0 0 48px 0 rgba(0, 0, 0, 0.4);
367
- }
368
-
369
- /* FDS heading utilities — font-size only (pair with leading-fds-title or leading-fds-body) */
370
- @utility text-fds-h1 {
371
- font-size: var(--text-fds-h1);
372
- }
373
- @utility text-fds-h2 {
374
- font-size: var(--text-fds-h2);
375
- }
376
- @utility text-fds-h3 {
377
- font-size: var(--text-fds-h3);
378
- }
379
- @utility text-fds-h4 {
380
- font-size: var(--text-fds-h4);
381
- }
382
- @utility text-fds-h5 {
383
- font-size: var(--text-fds-h5);
384
- }
385
- @utility text-fds-h6 {
386
- font-size: var(--text-fds-h6);
387
- }
388
-
389
- /* Scoped preflight for FreightWind components.
390
- Apply to native form elements (<button>, <input>, <textarea>, <select>)
391
- so components work without global Tailwind preflight. */
392
- @utility fw-base {
393
- box-sizing: border-box;
394
- margin: 0;
395
- padding: 0;
396
- border: 0 solid var(--border, currentColor);
397
- font: inherit;
398
- font-feature-settings: inherit;
399
- font-variation-settings: inherit;
400
- letter-spacing: inherit;
401
- color: inherit;
402
- background-color: transparent;
403
- border-radius: 0;
404
- line-height: inherit;
405
- -webkit-appearance: none;
406
- appearance: none;
407
- -webkit-font-smoothing: antialiased;
408
- -moz-osx-font-smoothing: grayscale;
409
- }
1
+ /* FreightWind Design System Tokens
2
+ * Import this file to get FDS design tokens for Tailwind CSS v4.
3
+ * Usage: @import '@freightos/freightwind/tokens.css';
4
+ */
5
+
6
+ @theme inline {
7
+ /* Base semantic colors */
8
+ --color-ground: var(--ground);
9
+ --color-background: var(--background);
10
+ --color-foreground: var(--foreground);
11
+ --color-card: var(--card);
12
+ --color-card-foreground: var(--card-foreground);
13
+ --color-card-elevated: var(--card-elevated);
14
+ --color-popover: var(--popover);
15
+ --color-popover-foreground: var(--popover-foreground);
16
+ --color-primary: var(--primary);
17
+ --color-primary-foreground: var(--primary-foreground);
18
+ --color-secondary: var(--secondary);
19
+ --color-secondary-foreground: var(--secondary-foreground);
20
+ --color-muted: var(--muted);
21
+ --color-muted-foreground: var(--muted-foreground);
22
+ --color-accent: var(--accent);
23
+ --color-accent-foreground: var(--accent-foreground);
24
+ --color-destructive: var(--destructive);
25
+ --color-destructive-foreground: var(--destructive-foreground);
26
+ --color-border: var(--border);
27
+ --color-input: var(--input);
28
+ --color-input-border: var(--input-border);
29
+ --color-ring: var(--ring);
30
+
31
+ /* Chart colors */
32
+ --color-chart-1: var(--chart-1);
33
+ --color-chart-2: var(--chart-2);
34
+ --color-chart-3: var(--chart-3);
35
+ --color-chart-4: var(--chart-4);
36
+ --color-chart-5: var(--chart-5);
37
+
38
+ /* Sidebar colors */
39
+ --color-sidebar: var(--sidebar);
40
+ --color-sidebar-foreground: var(--sidebar-foreground);
41
+ --color-sidebar-primary: var(--sidebar-primary);
42
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
43
+ --color-sidebar-accent: var(--sidebar-accent);
44
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
45
+ --color-sidebar-border: var(--sidebar-border);
46
+ --color-sidebar-ring: var(--sidebar-ring);
47
+
48
+ /* FDS Color Tokens - Primary Blue */
49
+ --color-fds-blue-05: #b0cee8;
50
+ --color-fds-blue-10: #e1f5f9;
51
+ --color-fds-blue-20: #ace8f0;
52
+ --color-fds-blue-30: #2075bd;
53
+ --color-fds-blue-40: #125c9b;
54
+ --color-fds-blue-50: #05387d;
55
+
56
+ /* FDS Color Tokens - Semantic Red */
57
+ --color-fds-red-10: #ffede1;
58
+ --color-fds-red-20: #fbbea4;
59
+ --color-fds-red-30: #d8271e;
60
+ --color-fds-red-40: #9b0f1f;
61
+ --color-fds-red-50: #670521;
62
+
63
+ /* FDS Color Tokens - Semantic Green */
64
+ --color-fds-green-10: #eafdea;
65
+ --color-fds-green-20: #bdf6c2;
66
+ --color-fds-green-30: #47a96e;
67
+ --color-fds-green-40: #237957;
68
+ --color-fds-green-50: #0d5143;
69
+
70
+ /* FDS Color Tokens - Semantic Yellow */
71
+ --color-fds-yellow-10: #fef6cc;
72
+ --color-fds-yellow-20: #fdea9a;
73
+ --color-fds-yellow-30: #edaf07;
74
+ --color-fds-yellow-40: #DC9500;
75
+ --color-fds-yellow-50: #9c6b02;
76
+ --color-fds-yellow-60: #714601;
77
+
78
+ /* FDS Color Tokens - Gray Scale */
79
+ --color-fds-white: #ffffff;
80
+ --color-fds-gray-05: #fbfbfb;
81
+ --color-fds-gray-10: #f6f6f6;
82
+ --color-fds-gray-20: #e5e6e6;
83
+ --color-fds-gray-30: #c6c7c7;
84
+ --color-fds-gray-40: #afb2b2;
85
+ --color-fds-gray-50: #999C9D;
86
+ --color-fds-gray-60: #8a8d8f;
87
+ --color-fds-gray-70: #6a6f73;
88
+ --color-fds-gray-80: #53575f;
89
+ --color-fds-gray-90: #3b3f4b;
90
+ --color-fds-gray-100: #232537;
91
+
92
+ /* FDS Color Tokens - Tertiary */
93
+ --color-fds-purple-1: #715397;
94
+ --color-fds-purple-2: #e7d8fc;
95
+
96
+ /* FDS Font Weights */
97
+ --font-weight-fds-regular: 400;
98
+ --font-weight-fds-medium: 500;
99
+ --font-weight-fds-semibold: 600;
100
+ --font-weight-fds-bold: 700;
101
+ --font-weight-fds-extrabold: 800;
102
+
103
+ /* FDS Line Heights */
104
+ --leading-fds-body: 1.5;
105
+ --leading-fds-title: 1.25;
106
+
107
+ /* FDS Spacing */
108
+ --spacing-fds-xs: 4px;
109
+ --spacing-fds-sm: 8px;
110
+ --spacing-fds-md: 12px;
111
+ --spacing-fds-lg: 16px;
112
+ --spacing-fds-xl: 24px;
113
+ --spacing-fds-xxl: 32px;
114
+ --spacing-fds-xxxl: 64px;
115
+
116
+ /* FDS Border Radius */
117
+ --radius-fds-sm: 2px;
118
+ --radius-fds-md: 4px;
119
+ --radius-fds-lg: 8px;
120
+
121
+ /* Standard radii */
122
+ --radius-sm: calc(var(--radius) - 4px);
123
+ --radius-md: calc(var(--radius) - 2px);
124
+ --radius-lg: var(--radius);
125
+ --radius-xl: calc(var(--radius) + 4px);
126
+
127
+ /* FDS Shadows */
128
+ --shadow-fds-sm: 0 0 10px 0 rgba(35, 37, 55, 0.12);
129
+ --shadow-fds-md: 0 0 15px 0 rgba(35, 37, 55, 0.12);
130
+ --shadow-fds-lg: 0 0 48px 0 rgba(35, 37, 55, 0.3);
131
+
132
+ /* FDS Border Widths */
133
+ --border-width-fds-sm: 1px;
134
+ --border-width-fds-md: 2px;
135
+ --border-width-fds-lg: 4px;
136
+ --border-width-fds-xl: 8px;
137
+
138
+ /* FDS Max Content Width Tokens */
139
+ --width-fds-xs: 325px;
140
+ --width-fds-m: 768px;
141
+ --width-fds-l: 992px;
142
+ --width-fds-xl: 1200px;
143
+
144
+ /* FDS Breakpoints */
145
+ --breakpoint-m: 832px;
146
+ --breakpoint-l: 1040px;
147
+ --breakpoint-xl: 1200px;
148
+
149
+ /* Fonts */
150
+ --font-sans: 'Open Sans', ui-sans-serif, system-ui, sans-serif;
151
+
152
+ /* FDS Font Sizes (rem based on 16px root) */
153
+ --text-fds-xs: 0.625rem; /* 10px */
154
+ --text-fds-sm: 0.75rem; /* 12px */
155
+ --text-fds-base: 0.875rem; /* 14px */
156
+ --text-fds-h6: 1rem; /* 16px */
157
+ --text-fds-h5: 1.125rem; /* 18px */
158
+ --text-fds-h4: 1.25rem; /* 20px */
159
+ --text-fds-h3: 1.5rem; /* 24px */
160
+ --text-fds-h2: 2rem; /* 32px */
161
+ --text-fds-h1: 2.5rem; /* 40px */
162
+ }
163
+
164
+ :root {
165
+ --radius: 4px;
166
+
167
+ /* FDS Color Tokens - Primary Blue */
168
+ --fds-color-primary-blue-05: #b0cee8;
169
+ --fds-color-primary-blue-10: #e1f5f9;
170
+ --fds-color-primary-blue-20: #ace8f0;
171
+ --fds-color-primary-blue-30: #2075bd;
172
+ --fds-color-primary-blue-40: #125c9b;
173
+ --fds-color-primary-blue-50: #05387d;
174
+
175
+ /* FDS Color Tokens - Semantic Red */
176
+ --fds-color-semantic-red-10: #ffede1;
177
+ --fds-color-semantic-red-20: #fbbea4;
178
+ --fds-color-semantic-red-30: #d8271e;
179
+ --fds-color-semantic-red-40: #9b0f1f;
180
+ --fds-color-semantic-red-50: #670521;
181
+
182
+ /* FDS Color Tokens - Semantic Green */
183
+ --fds-color-semantic-green-10: #eafdea;
184
+ --fds-color-semantic-green-20: #bdf6c2;
185
+ --fds-color-semantic-green-30: #47a96e;
186
+ --fds-color-semantic-green-40: #237957;
187
+ --fds-color-semantic-green-50: #0d5143;
188
+
189
+ /* FDS Color Tokens - Semantic Yellow */
190
+ --fds-color-semantic-yellow-10: #fef6cc;
191
+ --fds-color-semantic-yellow-20: #fdea9a;
192
+ --fds-color-semantic-yellow-30: #edaf07;
193
+ --fds-color-semantic-yellow-40: #DC9500;
194
+ --fds-color-semantic-yellow-50: #9c6b02;
195
+ --fds-color-semantic-yellow-60: #714601;
196
+
197
+ /* FDS Color Tokens - Gray Scale */
198
+ --fds-color-primary-white: #ffffff;
199
+ --fds-color-primary-gray-05: #fbfbfb;
200
+ --fds-color-primary-gray-10: #f6f6f6;
201
+ --fds-color-primary-gray-20: #e5e6e6;
202
+ --fds-color-primary-gray-30: #c6c7c7;
203
+ --fds-color-primary-gray-40: #afb2b2;
204
+ --fds-color-primary-gray-50: #999C9D;
205
+ --fds-color-primary-gray-60: #8a8d8f;
206
+ --fds-color-primary-gray-70: #6a6f73;
207
+ --fds-color-primary-gray-80: #53575f;
208
+ --fds-color-primary-gray-90: #3b3f4b;
209
+ --fds-color-primary-gray-100: #232537;
210
+
211
+ /* FDS Color Tokens - Tertiary */
212
+ --fds-color-tertiary-purple-1: #715397;
213
+ --fds-color-tertiary-purple-2: #e7d8fc;
214
+
215
+ /* FDS Component Colors */
216
+ --fds-component-primary-color: var(--fds-color-primary-blue-30);
217
+ --fds-component-primary-color-hover: var(--fds-color-primary-blue-40);
218
+ --fds-component-primary-color-click: var(--fds-color-primary-blue-50);
219
+ --fds-component-primary-color-disabled: var(--fds-color-primary-gray-60);
220
+ --fds-component-secondary-color: var(--fds-color-primary-gray-30);
221
+ --fds-component-secondary-color-disabled: var(--fds-color-primary-gray-20);
222
+ --fds-component-tertiary-color-hover: var(--fds-color-primary-blue-10);
223
+ --fds-component-tertiary-color-click: var(--fds-color-primary-blue-20);
224
+ --fds-component-danger-color: var(--fds-color-semantic-red-30);
225
+ --fds-component-danger-color-hover: var(--fds-color-semantic-red-40);
226
+ --fds-component-danger-color-click: var(--fds-color-semantic-red-50);
227
+ --fds-component-invert-color: var(--fds-color-primary-white);
228
+ --fds-component-background-color: var(--fds-color-primary-white);
229
+ --fds-component-background-color-disabled: var(--fds-color-primary-gray-10);
230
+
231
+ /* FDS Size Tokens */
232
+ --fds-size-lg: 24px;
233
+ --fds-size-xl: 32px;
234
+ --fds-size-xxl: 40px;
235
+
236
+ /* FDS Font Size Tokens */
237
+ --fds-font-size-xs: 10px;
238
+ --fds-font-size-sm: 12px;
239
+ --fds-font-size-base: 14px;
240
+ --fds-h6-font-size: 16px;
241
+ --fds-h5-font-size: 18px;
242
+ --fds-h4-font-size: 20px;
243
+ --fds-h3-font-size: 24px;
244
+ --fds-h2-font-size: 32px;
245
+ --fds-h1-font-size: 40px;
246
+
247
+ /* FDS Font Weight Tokens */
248
+ --fds-font-weight-regular: 400;
249
+ --fds-font-weight-medium: 500;
250
+ --fds-font-weight-semibold: 600;
251
+ --fds-font-weight-bold: 700;
252
+ --fds-font-weight-extrabold: 800;
253
+
254
+ /* FDS Line Height Tokens */
255
+ --fds-title-line-height: 1.25;
256
+
257
+ /* FDS Border Radius */
258
+ --fds-border-radius-sm: 2px;
259
+ --fds-border-radius-md: 4px;
260
+ --fds-border-radius-lg: 8px;
261
+
262
+ /* FDS Border Width */
263
+ --fds-border-width-sm: 1px;
264
+ --fds-border-width-md: 2px;
265
+ --fds-border-width-lg: 4px;
266
+ --fds-border-width-xl: 8px;
267
+
268
+ /* FDS Spacing */
269
+ --fds-component-spacing-xs: 4px;
270
+ --fds-component-spacing-sm: 8px;
271
+ --fds-component-spacing-md: 12px;
272
+ --fds-component-spacing-lg: 16px;
273
+ --fds-component-spacing-xl: 24px;
274
+ --fds-component-spacing-xxl: 32px;
275
+ --fds-component-spacing-xxxl: 64px;
276
+
277
+ /* FDS Box Shadow */
278
+ --fds-box-shadow-sm: 0 0 10px 0 rgba(35, 37, 55, 0.12);
279
+ --fds-box-shadow-md: 0 0 15px 0 rgba(35, 37, 55, 0.12);
280
+ --fds-box-shadow-lg: 0 0 48px 0 rgba(35, 37, 55, 0.3);
281
+
282
+ /* Page canvas */
283
+ --ground: #f6f6f6;
284
+
285
+ /* Shadcn semantic mappings to FDS tokens */
286
+ --background: #ffffff;
287
+ --foreground: #3b3f4b;
288
+ --card: #ffffff;
289
+ --card-foreground: #3b3f4b;
290
+ --card-elevated: #ffffff;
291
+ --popover: #ffffff;
292
+ --popover-foreground: #3b3f4b;
293
+ --primary: #2075bd;
294
+ --primary-foreground: #ffffff;
295
+ --secondary: #c6c7c7;
296
+ --secondary-foreground: #3b3f4b;
297
+ --muted: #f6f6f6;
298
+ --muted-foreground: #8a8d8f;
299
+ --accent: #f6f6f6;
300
+ --accent-foreground: #3b3f4b;
301
+ --destructive: #d8271e;
302
+ --destructive-foreground: #ffffff;
303
+ --border: #e5e6e6;
304
+ --input: #ffffff;
305
+ --input-border: #c6c7c7;
306
+ --ring: #ace8f0;
307
+
308
+ --chart-1: #2075bd;
309
+ --chart-2: #47a96e;
310
+ --chart-3: #edaf07;
311
+ --chart-4: #715397;
312
+ --chart-5: #d8271e;
313
+
314
+ --sidebar: #fbfbfb;
315
+ --sidebar-foreground: #3b3f4b;
316
+ --sidebar-primary: #2075bd;
317
+ --sidebar-primary-foreground: #ffffff;
318
+ --sidebar-accent: #f6f6f6;
319
+ --sidebar-accent-foreground: #3b3f4b;
320
+ --sidebar-border: #e5e6e6;
321
+ --sidebar-ring: #ace8f0;
322
+ }
323
+
324
+ .dark {
325
+ --ground: #1a1a1a;
326
+ --background: #242424;
327
+ --foreground: #fafafa;
328
+ --card: #242424;
329
+ --card-foreground: #fafafa;
330
+ --card-elevated: #2e2e2e;
331
+ --popover: #1f1f1f;
332
+ --popover-foreground: #fafafa;
333
+ --primary: #2075bd;
334
+ --primary-foreground: #ffffff;
335
+ --secondary: #262626;
336
+ --secondary-foreground: #fafafa;
337
+ --muted: #262626;
338
+ --muted-foreground: #a3a3a3;
339
+ --accent: #262626;
340
+ --accent-foreground: #fafafa;
341
+ --destructive: #d8271e;
342
+ --destructive-foreground: #ffffff;
343
+ --border: #404040;
344
+ --input: #333333;
345
+ --input-border: #595959;
346
+ --ring: #ace8f0;
347
+
348
+ --chart-1: #2075bd;
349
+ --chart-2: #47a96e;
350
+ --chart-3: #edaf07;
351
+ --chart-4: #715397;
352
+ --chart-5: #d8271e;
353
+
354
+ --sidebar: #1a1a1a;
355
+ --sidebar-foreground: #fafafa;
356
+ --sidebar-primary: #2075bd;
357
+ --sidebar-primary-foreground: #ffffff;
358
+ --sidebar-accent: #262626;
359
+ --sidebar-accent-foreground: #fafafa;
360
+ --sidebar-border: #404040;
361
+ --sidebar-ring: #ace8f0;
362
+
363
+ /* Dark mode shadows */
364
+ --fds-box-shadow-sm: 0 0 10px 0 rgba(0, 0, 0, 0.3);
365
+ --fds-box-shadow-md: 0 0 15px 0 rgba(0, 0, 0, 0.35);
366
+ --fds-box-shadow-lg: 0 0 48px 0 rgba(0, 0, 0, 0.4);
367
+ }
368
+
369
+ /* FDS heading utilities — font-size only (pair with leading-fds-title or leading-fds-body) */
370
+ @utility text-fds-h1 {
371
+ font-size: var(--text-fds-h1);
372
+ }
373
+ @utility text-fds-h2 {
374
+ font-size: var(--text-fds-h2);
375
+ }
376
+ @utility text-fds-h3 {
377
+ font-size: var(--text-fds-h3);
378
+ }
379
+ @utility text-fds-h4 {
380
+ font-size: var(--text-fds-h4);
381
+ }
382
+ @utility text-fds-h5 {
383
+ font-size: var(--text-fds-h5);
384
+ }
385
+ @utility text-fds-h6 {
386
+ font-size: var(--text-fds-h6);
387
+ }
388
+
389
+ /* Scoped preflight for FreightWind components.
390
+ Apply to native form elements (<button>, <input>, <textarea>, <select>)
391
+ so components work without global Tailwind preflight. */
392
+ @utility fw-base {
393
+ box-sizing: border-box;
394
+ margin: 0;
395
+ padding: 0;
396
+ border: 0 solid var(--border, currentColor);
397
+ font: inherit;
398
+ font-feature-settings: inherit;
399
+ font-variation-settings: inherit;
400
+ letter-spacing: inherit;
401
+ color: inherit;
402
+ background-color: transparent;
403
+ border-radius: 0;
404
+ line-height: inherit;
405
+ -webkit-appearance: none;
406
+ appearance: none;
407
+ -webkit-font-smoothing: antialiased;
408
+ -moz-osx-font-smoothing: grayscale;
409
+ }
410
+
411
+ /* Focus ring utilities used by FreightWind form components.
412
+ 2px outer glow in FDS primary blue for focus; red for invalid state. */
413
+ @utility ring-fds-focus {
414
+ box-shadow: 0 0 0 2px var(--fds-color-primary-blue-20);
415
+ }
416
+
417
+ @utility ring-fds-focus-error {
418
+ box-shadow: 0 0 0 2px var(--fds-color-semantic-red-20);
419
+ }