@freightos/freightwind 2.1.1 → 2.1.3-host-isolation.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/LICENSE +21 -21
- package/README.md +56 -28
- package/dist/cjs/components/chip.js +1 -1
- package/dist/cjs/lib/index.js +10 -0
- package/dist/esm/components/chip.js +1 -1
- package/dist/esm/lib/index.js +3 -0
- package/dist/types/lib/index.d.ts +4 -0
- package/guidelines/Guidelines.md +233 -233
- package/guidelines/design-tokens/colors.md +81 -81
- package/guidelines/design-tokens/spacing.md +45 -45
- package/guidelines/design-tokens/typography.md +87 -87
- package/guidelines/overview-components.md +252 -252
- package/guidelines/overview-icons.md +52 -52
- package/host-isolation/webcargo.css +293 -0
- package/package.json +104 -102
- package/tokens.css +419 -409
|
@@ -1,81 +1,81 @@
|
|
|
1
|
-
# Color Tokens
|
|
2
|
-
|
|
3
|
-
FreightWind uses the FDS (Freightos Design System) color palette. Always use FDS color tokens instead of Tailwind defaults.
|
|
4
|
-
|
|
5
|
-
## Primary — Blue
|
|
6
|
-
|
|
7
|
-
The primary action color. Use for buttons, links, and interactive elements.
|
|
8
|
-
|
|
9
|
-
| Token | Class | Usage |
|
|
10
|
-
|-------|-------|-------|
|
|
11
|
-
| Blue 05 | `bg-fds-blue-05` | Disabled checked state |
|
|
12
|
-
| Blue 10 | `bg-fds-blue-10` | Hover backgrounds, selected states |
|
|
13
|
-
| Blue 20 | `bg-fds-blue-20` | Light accent backgrounds |
|
|
14
|
-
| Blue 30 | `bg-fds-blue-30`, `text-fds-blue-30` | Primary action color (default) |
|
|
15
|
-
| Blue 40 | `bg-fds-blue-40`, `text-fds-blue-40` | Hover state for primary actions |
|
|
16
|
-
| Blue 50 | `bg-fds-blue-50` | Active/pressed state |
|
|
17
|
-
|
|
18
|
-
## Semantic — Red (Error/Danger)
|
|
19
|
-
|
|
20
|
-
| Token | Class | Usage |
|
|
21
|
-
|-------|-------|-------|
|
|
22
|
-
| Red 10 | `bg-fds-red-10` | Error background tint |
|
|
23
|
-
| Red 20 | `bg-fds-red-20` | Error chip background |
|
|
24
|
-
| Red 30 | `bg-fds-red-30`, `text-fds-red-30` | Error/danger primary |
|
|
25
|
-
| Red 40 | `bg-fds-red-40` | Error hover state |
|
|
26
|
-
|
|
27
|
-
## Semantic — Green (Success)
|
|
28
|
-
|
|
29
|
-
| Token | Class | Usage |
|
|
30
|
-
|-------|-------|-------|
|
|
31
|
-
| Green 20 | `bg-fds-green-20` | Success background tint |
|
|
32
|
-
| Green 30 | `bg-fds-green-30`, `text-fds-green-30` | Success primary |
|
|
33
|
-
| Green 40 | `bg-fds-green-40` | Success strong |
|
|
34
|
-
|
|
35
|
-
## Semantic — Yellow (Warning)
|
|
36
|
-
|
|
37
|
-
| Token | Class | Usage |
|
|
38
|
-
|-------|-------|-------|
|
|
39
|
-
| Yellow 20 | `bg-fds-yellow-20` | Warning background tint |
|
|
40
|
-
| Yellow 30 | `bg-fds-yellow-30`, `text-fds-yellow-30` | Warning primary |
|
|
41
|
-
| Yellow 50 | `bg-fds-yellow-50` | Warning strong |
|
|
42
|
-
|
|
43
|
-
## Gray Scale
|
|
44
|
-
|
|
45
|
-
Use for text, borders, backgrounds, and disabled states.
|
|
46
|
-
|
|
47
|
-
| Token | Class | Usage |
|
|
48
|
-
|-------|-------|-------|
|
|
49
|
-
| Gray 05 | `bg-fds-gray-05` | Lightest background |
|
|
50
|
-
| Gray 10 | `bg-fds-gray-10` | Disabled background |
|
|
51
|
-
| Gray 20 | `bg-fds-gray-20` | Disabled borders, light backgrounds |
|
|
52
|
-
| Gray 30 | `bg-fds-gray-30` | Default borders |
|
|
53
|
-
| Gray 40 | `bg-fds-gray-40` | Muted icons |
|
|
54
|
-
| Gray 60 | `bg-fds-gray-60`, `text-fds-gray-60` | Disabled text, secondary text |
|
|
55
|
-
| Gray 80 | `text-fds-gray-80` | Body text |
|
|
56
|
-
| Gray 90 | `text-fds-gray-90` | Dark text |
|
|
57
|
-
| Gray 100 | `text-fds-gray-100`, `bg-fds-gray-100` | Darkest text, tooltip bg |
|
|
58
|
-
|
|
59
|
-
## Accent — Purple
|
|
60
|
-
|
|
61
|
-
| Token | Class | Usage |
|
|
62
|
-
|-------|-------|-------|
|
|
63
|
-
| Purple 1 | `text-fds-purple-1` | Accent text |
|
|
64
|
-
| Purple 2 | `bg-fds-purple-2` | Accent background |
|
|
65
|
-
|
|
66
|
-
## White
|
|
67
|
-
|
|
68
|
-
| Token | Class | Usage |
|
|
69
|
-
|-------|-------|-------|
|
|
70
|
-
| White | `text-fds-white`, `bg-fds-white` | White text/backgrounds |
|
|
71
|
-
|
|
72
|
-
## Decision guide
|
|
73
|
-
|
|
74
|
-
- **Primary actions** (buttons, links): `fds-blue-30`
|
|
75
|
-
- **Destructive actions**: `fds-red-30`
|
|
76
|
-
- **Success states**: `fds-green-30`
|
|
77
|
-
- **Warning states**: `fds-yellow-30`
|
|
78
|
-
- **Body text**: `fds-gray-80`
|
|
79
|
-
- **Disabled text**: `fds-gray-60`
|
|
80
|
-
- **Borders**: `fds-gray-30` (default), `fds-gray-20` (disabled)
|
|
81
|
-
- **Page background**: `bg-ground`
|
|
1
|
+
# Color Tokens
|
|
2
|
+
|
|
3
|
+
FreightWind uses the FDS (Freightos Design System) color palette. Always use FDS color tokens instead of Tailwind defaults.
|
|
4
|
+
|
|
5
|
+
## Primary — Blue
|
|
6
|
+
|
|
7
|
+
The primary action color. Use for buttons, links, and interactive elements.
|
|
8
|
+
|
|
9
|
+
| Token | Class | Usage |
|
|
10
|
+
|-------|-------|-------|
|
|
11
|
+
| Blue 05 | `bg-fds-blue-05` | Disabled checked state |
|
|
12
|
+
| Blue 10 | `bg-fds-blue-10` | Hover backgrounds, selected states |
|
|
13
|
+
| Blue 20 | `bg-fds-blue-20` | Light accent backgrounds |
|
|
14
|
+
| Blue 30 | `bg-fds-blue-30`, `text-fds-blue-30` | Primary action color (default) |
|
|
15
|
+
| Blue 40 | `bg-fds-blue-40`, `text-fds-blue-40` | Hover state for primary actions |
|
|
16
|
+
| Blue 50 | `bg-fds-blue-50` | Active/pressed state |
|
|
17
|
+
|
|
18
|
+
## Semantic — Red (Error/Danger)
|
|
19
|
+
|
|
20
|
+
| Token | Class | Usage |
|
|
21
|
+
|-------|-------|-------|
|
|
22
|
+
| Red 10 | `bg-fds-red-10` | Error background tint |
|
|
23
|
+
| Red 20 | `bg-fds-red-20` | Error chip background |
|
|
24
|
+
| Red 30 | `bg-fds-red-30`, `text-fds-red-30` | Error/danger primary |
|
|
25
|
+
| Red 40 | `bg-fds-red-40` | Error hover state |
|
|
26
|
+
|
|
27
|
+
## Semantic — Green (Success)
|
|
28
|
+
|
|
29
|
+
| Token | Class | Usage |
|
|
30
|
+
|-------|-------|-------|
|
|
31
|
+
| Green 20 | `bg-fds-green-20` | Success background tint |
|
|
32
|
+
| Green 30 | `bg-fds-green-30`, `text-fds-green-30` | Success primary |
|
|
33
|
+
| Green 40 | `bg-fds-green-40` | Success strong |
|
|
34
|
+
|
|
35
|
+
## Semantic — Yellow (Warning)
|
|
36
|
+
|
|
37
|
+
| Token | Class | Usage |
|
|
38
|
+
|-------|-------|-------|
|
|
39
|
+
| Yellow 20 | `bg-fds-yellow-20` | Warning background tint |
|
|
40
|
+
| Yellow 30 | `bg-fds-yellow-30`, `text-fds-yellow-30` | Warning primary |
|
|
41
|
+
| Yellow 50 | `bg-fds-yellow-50` | Warning strong |
|
|
42
|
+
|
|
43
|
+
## Gray Scale
|
|
44
|
+
|
|
45
|
+
Use for text, borders, backgrounds, and disabled states.
|
|
46
|
+
|
|
47
|
+
| Token | Class | Usage |
|
|
48
|
+
|-------|-------|-------|
|
|
49
|
+
| Gray 05 | `bg-fds-gray-05` | Lightest background |
|
|
50
|
+
| Gray 10 | `bg-fds-gray-10` | Disabled background |
|
|
51
|
+
| Gray 20 | `bg-fds-gray-20` | Disabled borders, light backgrounds |
|
|
52
|
+
| Gray 30 | `bg-fds-gray-30` | Default borders |
|
|
53
|
+
| Gray 40 | `bg-fds-gray-40` | Muted icons |
|
|
54
|
+
| Gray 60 | `bg-fds-gray-60`, `text-fds-gray-60` | Disabled text, secondary text |
|
|
55
|
+
| Gray 80 | `text-fds-gray-80` | Body text |
|
|
56
|
+
| Gray 90 | `text-fds-gray-90` | Dark text |
|
|
57
|
+
| Gray 100 | `text-fds-gray-100`, `bg-fds-gray-100` | Darkest text, tooltip bg |
|
|
58
|
+
|
|
59
|
+
## Accent — Purple
|
|
60
|
+
|
|
61
|
+
| Token | Class | Usage |
|
|
62
|
+
|-------|-------|-------|
|
|
63
|
+
| Purple 1 | `text-fds-purple-1` | Accent text |
|
|
64
|
+
| Purple 2 | `bg-fds-purple-2` | Accent background |
|
|
65
|
+
|
|
66
|
+
## White
|
|
67
|
+
|
|
68
|
+
| Token | Class | Usage |
|
|
69
|
+
|-------|-------|-------|
|
|
70
|
+
| White | `text-fds-white`, `bg-fds-white` | White text/backgrounds |
|
|
71
|
+
|
|
72
|
+
## Decision guide
|
|
73
|
+
|
|
74
|
+
- **Primary actions** (buttons, links): `fds-blue-30`
|
|
75
|
+
- **Destructive actions**: `fds-red-30`
|
|
76
|
+
- **Success states**: `fds-green-30`
|
|
77
|
+
- **Warning states**: `fds-yellow-30`
|
|
78
|
+
- **Body text**: `fds-gray-80`
|
|
79
|
+
- **Disabled text**: `fds-gray-60`
|
|
80
|
+
- **Borders**: `fds-gray-30` (default), `fds-gray-20` (disabled)
|
|
81
|
+
- **Page background**: `bg-ground`
|
|
@@ -1,45 +1,45 @@
|
|
|
1
|
-
# Spacing Tokens
|
|
2
|
-
|
|
3
|
-
FreightWind uses FDS spacing tokens for consistent sizing. Use these instead of Tailwind defaults.
|
|
4
|
-
|
|
5
|
-
## Spacing scale
|
|
6
|
-
|
|
7
|
-
| Token | Class prefix | Size | Usage |
|
|
8
|
-
|-------|-------------|------|-------|
|
|
9
|
-
| XS | `p-fds-xs`, `m-fds-xs`, `gap-fds-xs` | 4px | Tight spacing (icon gaps, small padding) |
|
|
10
|
-
| SM | `p-fds-sm`, `m-fds-sm`, `gap-fds-sm` | 8px | Default component internal spacing |
|
|
11
|
-
| MD | `p-fds-md`, `m-fds-md`, `gap-fds-md` | 12px | Medium padding, form field spacing |
|
|
12
|
-
| LG | `p-fds-lg`, `m-fds-lg`, `gap-fds-lg` | 16px | Section padding, card padding |
|
|
13
|
-
| XL | `p-fds-xl`, `m-fds-xl`, `gap-fds-xl` | 24px | Large section spacing |
|
|
14
|
-
| XXL | `p-fds-xxl`, `m-fds-xxl`, `gap-fds-xxl` | 32px | Page-level spacing |
|
|
15
|
-
|
|
16
|
-
All spacing tokens work with Tailwind's full set of utility prefixes: `p-`, `px-`, `py-`, `pt-`, `pr-`, `pb-`, `pl-`, `m-`, `mx-`, `my-`, `mt-`, `mr-`, `mb-`, `ml-`, `gap-`, `gap-x-`, `gap-y-`.
|
|
17
|
-
|
|
18
|
-
## Border radius
|
|
19
|
-
|
|
20
|
-
| Token | Class | Value | Usage |
|
|
21
|
-
|-------|-------|-------|-------|
|
|
22
|
-
| SM | `rounded-fds-sm` | 2px | Checkboxes, small elements |
|
|
23
|
-
| MD | `rounded-fds-md` | 4px | Buttons, inputs, cards |
|
|
24
|
-
| LG | `rounded-fds-lg` | 8px | Modals, popovers |
|
|
25
|
-
|
|
26
|
-
## Shadows
|
|
27
|
-
|
|
28
|
-
| Token | Class | Usage |
|
|
29
|
-
|-------|-------|-------|
|
|
30
|
-
| SM | `shadow-fds-sm` | Subtle elevation (dropdowns) |
|
|
31
|
-
| MD | `shadow-fds-md` | Medium elevation (cards, popovers) |
|
|
32
|
-
| LG | `shadow-fds-lg` | High elevation (modals) |
|
|
33
|
-
|
|
34
|
-
## Usage example
|
|
35
|
-
|
|
36
|
-
```tsx
|
|
37
|
-
<div className="p-fds-lg rounded-fds-md shadow-fds-sm">
|
|
38
|
-
<h2 className="mb-fds-sm text-fds-h5 font-fds-bold">Card Title</h2>
|
|
39
|
-
<p className="text-fds-base text-fds-gray-80">Card content with consistent spacing.</p>
|
|
40
|
-
<div className="mt-fds-md flex gap-fds-sm">
|
|
41
|
-
<Button variant="default">Confirm</Button>
|
|
42
|
-
<Button variant="secondary">Cancel</Button>
|
|
43
|
-
</div>
|
|
44
|
-
</div>
|
|
45
|
-
```
|
|
1
|
+
# Spacing Tokens
|
|
2
|
+
|
|
3
|
+
FreightWind uses FDS spacing tokens for consistent sizing. Use these instead of Tailwind defaults.
|
|
4
|
+
|
|
5
|
+
## Spacing scale
|
|
6
|
+
|
|
7
|
+
| Token | Class prefix | Size | Usage |
|
|
8
|
+
|-------|-------------|------|-------|
|
|
9
|
+
| XS | `p-fds-xs`, `m-fds-xs`, `gap-fds-xs` | 4px | Tight spacing (icon gaps, small padding) |
|
|
10
|
+
| SM | `p-fds-sm`, `m-fds-sm`, `gap-fds-sm` | 8px | Default component internal spacing |
|
|
11
|
+
| MD | `p-fds-md`, `m-fds-md`, `gap-fds-md` | 12px | Medium padding, form field spacing |
|
|
12
|
+
| LG | `p-fds-lg`, `m-fds-lg`, `gap-fds-lg` | 16px | Section padding, card padding |
|
|
13
|
+
| XL | `p-fds-xl`, `m-fds-xl`, `gap-fds-xl` | 24px | Large section spacing |
|
|
14
|
+
| XXL | `p-fds-xxl`, `m-fds-xxl`, `gap-fds-xxl` | 32px | Page-level spacing |
|
|
15
|
+
|
|
16
|
+
All spacing tokens work with Tailwind's full set of utility prefixes: `p-`, `px-`, `py-`, `pt-`, `pr-`, `pb-`, `pl-`, `m-`, `mx-`, `my-`, `mt-`, `mr-`, `mb-`, `ml-`, `gap-`, `gap-x-`, `gap-y-`.
|
|
17
|
+
|
|
18
|
+
## Border radius
|
|
19
|
+
|
|
20
|
+
| Token | Class | Value | Usage |
|
|
21
|
+
|-------|-------|-------|-------|
|
|
22
|
+
| SM | `rounded-fds-sm` | 2px | Checkboxes, small elements |
|
|
23
|
+
| MD | `rounded-fds-md` | 4px | Buttons, inputs, cards |
|
|
24
|
+
| LG | `rounded-fds-lg` | 8px | Modals, popovers |
|
|
25
|
+
|
|
26
|
+
## Shadows
|
|
27
|
+
|
|
28
|
+
| Token | Class | Usage |
|
|
29
|
+
|-------|-------|-------|
|
|
30
|
+
| SM | `shadow-fds-sm` | Subtle elevation (dropdowns) |
|
|
31
|
+
| MD | `shadow-fds-md` | Medium elevation (cards, popovers) |
|
|
32
|
+
| LG | `shadow-fds-lg` | High elevation (modals) |
|
|
33
|
+
|
|
34
|
+
## Usage example
|
|
35
|
+
|
|
36
|
+
```tsx
|
|
37
|
+
<div className="p-fds-lg rounded-fds-md shadow-fds-sm">
|
|
38
|
+
<h2 className="mb-fds-sm text-fds-h5 font-fds-bold">Card Title</h2>
|
|
39
|
+
<p className="text-fds-base text-fds-gray-80">Card content with consistent spacing.</p>
|
|
40
|
+
<div className="mt-fds-md flex gap-fds-sm">
|
|
41
|
+
<Button variant="default">Confirm</Button>
|
|
42
|
+
<Button variant="secondary">Cancel</Button>
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
```
|
|
@@ -1,87 +1,87 @@
|
|
|
1
|
-
# Typography Tokens
|
|
2
|
-
|
|
3
|
-
FreightWind uses FDS typography tokens. Always use these instead of Tailwind default sizes.
|
|
4
|
-
|
|
5
|
-
## Font family
|
|
6
|
-
|
|
7
|
-
FreightWind uses **Open Sans** (Google Fonts). The font must be loaded externally and applied to the body:
|
|
8
|
-
|
|
9
|
-
```css
|
|
10
|
-
body {
|
|
11
|
-
font-family: 'Open Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
|
|
12
|
-
}
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
The tokens.css defines `--font-sans: 'Open Sans', ui-sans-serif, system-ui, sans-serif` which maps to Tailwind's `font-sans` utility. You can use `className="font-sans"` to apply it, but it's better to set it on the body element directly.
|
|
16
|
-
|
|
17
|
-
Required font weights: **400** (regular), **600** (semibold), **700** (bold).
|
|
18
|
-
|
|
19
|
-
## Font smoothing
|
|
20
|
-
|
|
21
|
-
All text MUST have antialiased font smoothing. Apply globally:
|
|
22
|
-
|
|
23
|
-
```css
|
|
24
|
-
* {
|
|
25
|
-
-webkit-font-smoothing: antialiased;
|
|
26
|
-
-moz-osx-font-smoothing: grayscale;
|
|
27
|
-
}
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
Without this, text rendering will look inconsistent across browsers, especially on macOS.
|
|
31
|
-
|
|
32
|
-
## Base font size
|
|
33
|
-
|
|
34
|
-
The default body font size is **14px** (`0.875rem`), not the browser default 16px:
|
|
35
|
-
|
|
36
|
-
```css
|
|
37
|
-
body {
|
|
38
|
-
font-size: 0.875rem;
|
|
39
|
-
}
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
## Font sizes
|
|
43
|
-
|
|
44
|
-
| Token | Class | Size | Usage |
|
|
45
|
-
|-------|-------|------|-------|
|
|
46
|
-
| XS | `text-fds-xs` | 10px | Captions, fine print |
|
|
47
|
-
| SM | `text-fds-sm` | 12px | Small labels, badges, chips |
|
|
48
|
-
| Base | `text-fds-base` | 14px | Body text (default) |
|
|
49
|
-
| H6 | `text-fds-h6` | 16px | Small headings, large labels |
|
|
50
|
-
| H5 | `text-fds-h5` | 18px | Section headings |
|
|
51
|
-
| H4 | `text-fds-h4` | 22px | Page sub-headings |
|
|
52
|
-
| H3 | `text-fds-h3` | 24px | Page headings |
|
|
53
|
-
| H2 | `text-fds-h2` | 32px | Major headings |
|
|
54
|
-
| H1 | `text-fds-h1` | 40px | Hero headings |
|
|
55
|
-
|
|
56
|
-
## Font weights
|
|
57
|
-
|
|
58
|
-
| Token | Class | Weight | Usage |
|
|
59
|
-
|-------|-------|--------|-------|
|
|
60
|
-
| Regular | `font-fds-regular` | 400 | Body text |
|
|
61
|
-
| Semibold | `font-fds-semibold` | 600 | Labels, emphasis |
|
|
62
|
-
| Bold | `font-fds-bold` | 700 | Headings, strong emphasis |
|
|
63
|
-
|
|
64
|
-
## Line heights
|
|
65
|
-
|
|
66
|
-
| Token | Class | Value | Usage |
|
|
67
|
-
|-------|-------|-------|-------|
|
|
68
|
-
| Title | `leading-fds-title` | 1.25 | Headings (h1-h6) |
|
|
69
|
-
| Body | `leading-fds-body` | 1.5 | Body text, paragraphs |
|
|
70
|
-
|
|
71
|
-
## Usage patterns
|
|
72
|
-
|
|
73
|
-
```tsx
|
|
74
|
-
// Page heading
|
|
75
|
-
<h1 className="text-fds-h3 font-fds-bold leading-fds-title text-foreground">Page Title</h1>
|
|
76
|
-
|
|
77
|
-
// Body text
|
|
78
|
-
<p className="text-fds-base text-fds-gray-80">Body content here.</p>
|
|
79
|
-
|
|
80
|
-
// Small label
|
|
81
|
-
<span className="text-fds-sm font-fds-semibold text-fds-gray-60">Label</span>
|
|
82
|
-
|
|
83
|
-
// Caption
|
|
84
|
-
<span className="text-fds-xs text-fds-gray-60">Fine print</span>
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
Heading size classes (`text-fds-h1` through `text-fds-h6`) set font-size only. Always pair with `leading-fds-title` for proper line height.
|
|
1
|
+
# Typography Tokens
|
|
2
|
+
|
|
3
|
+
FreightWind uses FDS typography tokens. Always use these instead of Tailwind default sizes.
|
|
4
|
+
|
|
5
|
+
## Font family
|
|
6
|
+
|
|
7
|
+
FreightWind uses **Open Sans** (Google Fonts). The font must be loaded externally and applied to the body:
|
|
8
|
+
|
|
9
|
+
```css
|
|
10
|
+
body {
|
|
11
|
+
font-family: 'Open Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
|
|
12
|
+
}
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
The tokens.css defines `--font-sans: 'Open Sans', ui-sans-serif, system-ui, sans-serif` which maps to Tailwind's `font-sans` utility. You can use `className="font-sans"` to apply it, but it's better to set it on the body element directly.
|
|
16
|
+
|
|
17
|
+
Required font weights: **400** (regular), **600** (semibold), **700** (bold).
|
|
18
|
+
|
|
19
|
+
## Font smoothing
|
|
20
|
+
|
|
21
|
+
All text MUST have antialiased font smoothing. Apply globally:
|
|
22
|
+
|
|
23
|
+
```css
|
|
24
|
+
* {
|
|
25
|
+
-webkit-font-smoothing: antialiased;
|
|
26
|
+
-moz-osx-font-smoothing: grayscale;
|
|
27
|
+
}
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
Without this, text rendering will look inconsistent across browsers, especially on macOS.
|
|
31
|
+
|
|
32
|
+
## Base font size
|
|
33
|
+
|
|
34
|
+
The default body font size is **14px** (`0.875rem`), not the browser default 16px:
|
|
35
|
+
|
|
36
|
+
```css
|
|
37
|
+
body {
|
|
38
|
+
font-size: 0.875rem;
|
|
39
|
+
}
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## Font sizes
|
|
43
|
+
|
|
44
|
+
| Token | Class | Size | Usage |
|
|
45
|
+
|-------|-------|------|-------|
|
|
46
|
+
| XS | `text-fds-xs` | 10px | Captions, fine print |
|
|
47
|
+
| SM | `text-fds-sm` | 12px | Small labels, badges, chips |
|
|
48
|
+
| Base | `text-fds-base` | 14px | Body text (default) |
|
|
49
|
+
| H6 | `text-fds-h6` | 16px | Small headings, large labels |
|
|
50
|
+
| H5 | `text-fds-h5` | 18px | Section headings |
|
|
51
|
+
| H4 | `text-fds-h4` | 22px | Page sub-headings |
|
|
52
|
+
| H3 | `text-fds-h3` | 24px | Page headings |
|
|
53
|
+
| H2 | `text-fds-h2` | 32px | Major headings |
|
|
54
|
+
| H1 | `text-fds-h1` | 40px | Hero headings |
|
|
55
|
+
|
|
56
|
+
## Font weights
|
|
57
|
+
|
|
58
|
+
| Token | Class | Weight | Usage |
|
|
59
|
+
|-------|-------|--------|-------|
|
|
60
|
+
| Regular | `font-fds-regular` | 400 | Body text |
|
|
61
|
+
| Semibold | `font-fds-semibold` | 600 | Labels, emphasis |
|
|
62
|
+
| Bold | `font-fds-bold` | 700 | Headings, strong emphasis |
|
|
63
|
+
|
|
64
|
+
## Line heights
|
|
65
|
+
|
|
66
|
+
| Token | Class | Value | Usage |
|
|
67
|
+
|-------|-------|-------|-------|
|
|
68
|
+
| Title | `leading-fds-title` | 1.25 | Headings (h1-h6) |
|
|
69
|
+
| Body | `leading-fds-body` | 1.5 | Body text, paragraphs |
|
|
70
|
+
|
|
71
|
+
## Usage patterns
|
|
72
|
+
|
|
73
|
+
```tsx
|
|
74
|
+
// Page heading
|
|
75
|
+
<h1 className="text-fds-h3 font-fds-bold leading-fds-title text-foreground">Page Title</h1>
|
|
76
|
+
|
|
77
|
+
// Body text
|
|
78
|
+
<p className="text-fds-base text-fds-gray-80">Body content here.</p>
|
|
79
|
+
|
|
80
|
+
// Small label
|
|
81
|
+
<span className="text-fds-sm font-fds-semibold text-fds-gray-60">Label</span>
|
|
82
|
+
|
|
83
|
+
// Caption
|
|
84
|
+
<span className="text-fds-xs text-fds-gray-60">Fine print</span>
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
Heading size classes (`text-fds-h1` through `text-fds-h6`) set font-size only. Always pair with `leading-fds-title` for proper line height.
|