@nswds/tokens 3.2.0 → 3.3.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/css/typography/global.css +1 -0
- package/dist/css/typography/semantic.css +56 -0
- package/dist/index.cjs +263 -13
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +211 -0
- package/dist/index.d.ts +211 -0
- package/dist/index.js +263 -13
- package/dist/index.js.map +1 -1
- package/dist/js/typography/global.js +1 -0
- package/dist/js/typography/semantic.js +72 -0
- package/dist/json/typography/global.json +2 -1
- package/dist/json/typography/semantic.json +65 -0
- package/dist/less/typography/global.less +1 -0
- package/dist/less/typography/semantic.less +45 -0
- package/dist/scss/typography/global.scss +1 -0
- package/dist/scss/typography/semantic.scss +45 -0
- package/dist/tailwind/typography/global.css +1 -0
- package/dist/tokens/global/typography/canonical.json +5 -0
- package/dist/tokens/semantic/typography/canonical.json +103 -0
- package/dist/tokens/typography.base.json +5 -0
- package/dist/ts/typography/global.ts +1 -0
- package/dist/ts/typography/semantic.ts +72 -0
- package/package.json +1 -1
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
export const heading1 = {
|
|
2
|
+
fontFamily:
|
|
3
|
+
"'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
4
|
+
fontSize: '2.25rem',
|
|
5
|
+
fontWeight: 800,
|
|
6
|
+
lineHeight: 1.2,
|
|
7
|
+
letterSpacing: '-0.0125em',
|
|
8
|
+
}
|
|
9
|
+
export const heading2 = {
|
|
10
|
+
fontFamily:
|
|
11
|
+
"'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
12
|
+
fontSize: '1.5rem',
|
|
13
|
+
fontWeight: 700,
|
|
14
|
+
lineHeight: 1.3333333,
|
|
15
|
+
letterSpacing: '0em',
|
|
16
|
+
}
|
|
17
|
+
export const heading3 = {
|
|
18
|
+
fontFamily:
|
|
19
|
+
"'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
20
|
+
fontSize: '1.25rem',
|
|
21
|
+
fontWeight: 600,
|
|
22
|
+
lineHeight: 1.6,
|
|
23
|
+
letterSpacing: '0em',
|
|
24
|
+
}
|
|
25
|
+
export const heading4 = {
|
|
26
|
+
fontFamily:
|
|
27
|
+
"'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
28
|
+
fontSize: '1rem',
|
|
29
|
+
fontWeight: 600,
|
|
30
|
+
lineHeight: 1.5,
|
|
31
|
+
letterSpacing: '0em',
|
|
32
|
+
}
|
|
33
|
+
export const body = {
|
|
34
|
+
fontFamily:
|
|
35
|
+
"'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
36
|
+
fontSize: '1rem',
|
|
37
|
+
fontWeight: 400,
|
|
38
|
+
lineHeight: 1.75,
|
|
39
|
+
letterSpacing: '0em',
|
|
40
|
+
}
|
|
41
|
+
export const bodySm = {
|
|
42
|
+
fontFamily:
|
|
43
|
+
"'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
44
|
+
fontSize: '0.875rem',
|
|
45
|
+
fontWeight: 400,
|
|
46
|
+
lineHeight: 1.75,
|
|
47
|
+
letterSpacing: '0em',
|
|
48
|
+
}
|
|
49
|
+
export const lead = {
|
|
50
|
+
fontFamily:
|
|
51
|
+
"'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
52
|
+
fontSize: '1.25rem',
|
|
53
|
+
fontWeight: 400,
|
|
54
|
+
lineHeight: 1.6,
|
|
55
|
+
letterSpacing: '0em',
|
|
56
|
+
}
|
|
57
|
+
export const caption = {
|
|
58
|
+
fontFamily:
|
|
59
|
+
"'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
60
|
+
fontSize: '0.75rem',
|
|
61
|
+
fontWeight: 400,
|
|
62
|
+
lineHeight: 1.5,
|
|
63
|
+
letterSpacing: '0.025em',
|
|
64
|
+
}
|
|
65
|
+
export const code = {
|
|
66
|
+
fontFamily:
|
|
67
|
+
"'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
|
|
68
|
+
fontSize: '0.875rem',
|
|
69
|
+
fontWeight: 400,
|
|
70
|
+
lineHeight: 1.5,
|
|
71
|
+
letterSpacing: '0em',
|
|
72
|
+
}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
{
|
|
2
|
+
"heading-1": {
|
|
3
|
+
"fontFamily": "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
4
|
+
"fontSize": "2.25rem",
|
|
5
|
+
"fontWeight": 800,
|
|
6
|
+
"lineHeight": 1.2,
|
|
7
|
+
"letterSpacing": "-0.0125em"
|
|
8
|
+
},
|
|
9
|
+
"heading-2": {
|
|
10
|
+
"fontFamily": "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
11
|
+
"fontSize": "1.5rem",
|
|
12
|
+
"fontWeight": 700,
|
|
13
|
+
"lineHeight": 1.3333333,
|
|
14
|
+
"letterSpacing": "0em"
|
|
15
|
+
},
|
|
16
|
+
"heading-3": {
|
|
17
|
+
"fontFamily": "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
18
|
+
"fontSize": "1.25rem",
|
|
19
|
+
"fontWeight": 600,
|
|
20
|
+
"lineHeight": 1.6,
|
|
21
|
+
"letterSpacing": "0em"
|
|
22
|
+
},
|
|
23
|
+
"heading-4": {
|
|
24
|
+
"fontFamily": "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
25
|
+
"fontSize": "1rem",
|
|
26
|
+
"fontWeight": 600,
|
|
27
|
+
"lineHeight": 1.5,
|
|
28
|
+
"letterSpacing": "0em"
|
|
29
|
+
},
|
|
30
|
+
"body": {
|
|
31
|
+
"fontFamily": "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
32
|
+
"fontSize": "1rem",
|
|
33
|
+
"fontWeight": 400,
|
|
34
|
+
"lineHeight": 1.75,
|
|
35
|
+
"letterSpacing": "0em"
|
|
36
|
+
},
|
|
37
|
+
"body-sm": {
|
|
38
|
+
"fontFamily": "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
39
|
+
"fontSize": "0.875rem",
|
|
40
|
+
"fontWeight": 400,
|
|
41
|
+
"lineHeight": 1.75,
|
|
42
|
+
"letterSpacing": "0em"
|
|
43
|
+
},
|
|
44
|
+
"lead": {
|
|
45
|
+
"fontFamily": "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
46
|
+
"fontSize": "1.25rem",
|
|
47
|
+
"fontWeight": 400,
|
|
48
|
+
"lineHeight": 1.6,
|
|
49
|
+
"letterSpacing": "0em"
|
|
50
|
+
},
|
|
51
|
+
"caption": {
|
|
52
|
+
"fontFamily": "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
53
|
+
"fontSize": "0.75rem",
|
|
54
|
+
"fontWeight": 400,
|
|
55
|
+
"lineHeight": 1.5,
|
|
56
|
+
"letterSpacing": "0.025em"
|
|
57
|
+
},
|
|
58
|
+
"code": {
|
|
59
|
+
"fontFamily": "'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
|
|
60
|
+
"fontSize": "0.875rem",
|
|
61
|
+
"fontWeight": 400,
|
|
62
|
+
"lineHeight": 1.5,
|
|
63
|
+
"letterSpacing": "0em"
|
|
64
|
+
}
|
|
65
|
+
}
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
@font-weight-medium: 500; // Medium (500) — subtle emphasis, labels, and navigation.
|
|
20
20
|
@font-weight-semibold: 600; // Semibold (600) — headings and strong emphasis.
|
|
21
21
|
@font-weight-bold: 700; // Bold (700) — highest emphasis; key figures and primary headings.
|
|
22
|
+
@font-weight-extrabold: 800; // Extrabold (800) — hero/display headings (the prose scale uses 800 for h1).
|
|
22
23
|
@line-height-none: 1; // Solid (1) — display headings set at their own size (48/48, 56/56, 64/64 in the prose scale).
|
|
23
24
|
@line-height-tight: 1.2; // Tight (1.2) — large headings (36/30 in the prose scale).
|
|
24
25
|
@line-height-snug: 1.3333333; // Snug (1.3333333) — mid-size headings (32/24, 40/30 in the prose scale).
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
@typography-heading-1-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
|
|
2
|
+
@typography-heading-1-font-size: 2.25rem;
|
|
3
|
+
@typography-heading-1-font-weight: 800;
|
|
4
|
+
@typography-heading-1-line-height: 1.2;
|
|
5
|
+
@typography-heading-1-letter-spacing: -0.0125em;
|
|
6
|
+
@typography-heading-2-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
|
|
7
|
+
@typography-heading-2-font-size: 1.5rem;
|
|
8
|
+
@typography-heading-2-font-weight: 700;
|
|
9
|
+
@typography-heading-2-line-height: 1.3333333;
|
|
10
|
+
@typography-heading-2-letter-spacing: 0em;
|
|
11
|
+
@typography-heading-3-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
|
|
12
|
+
@typography-heading-3-font-size: 1.25rem;
|
|
13
|
+
@typography-heading-3-font-weight: 600;
|
|
14
|
+
@typography-heading-3-line-height: 1.6;
|
|
15
|
+
@typography-heading-3-letter-spacing: 0em;
|
|
16
|
+
@typography-heading-4-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
|
|
17
|
+
@typography-heading-4-font-size: 1rem;
|
|
18
|
+
@typography-heading-4-font-weight: 600;
|
|
19
|
+
@typography-heading-4-line-height: 1.5;
|
|
20
|
+
@typography-heading-4-letter-spacing: 0em;
|
|
21
|
+
@typography-body-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
|
|
22
|
+
@typography-body-font-size: 1rem;
|
|
23
|
+
@typography-body-font-weight: 400;
|
|
24
|
+
@typography-body-line-height: 1.75;
|
|
25
|
+
@typography-body-letter-spacing: 0em;
|
|
26
|
+
@typography-body-sm-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
|
|
27
|
+
@typography-body-sm-font-size: 0.875rem;
|
|
28
|
+
@typography-body-sm-font-weight: 400;
|
|
29
|
+
@typography-body-sm-line-height: 1.75;
|
|
30
|
+
@typography-body-sm-letter-spacing: 0em;
|
|
31
|
+
@typography-lead-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
|
|
32
|
+
@typography-lead-font-size: 1.25rem;
|
|
33
|
+
@typography-lead-font-weight: 400;
|
|
34
|
+
@typography-lead-line-height: 1.6;
|
|
35
|
+
@typography-lead-letter-spacing: 0em;
|
|
36
|
+
@typography-caption-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
|
|
37
|
+
@typography-caption-font-size: 0.75rem;
|
|
38
|
+
@typography-caption-font-weight: 400;
|
|
39
|
+
@typography-caption-line-height: 1.5;
|
|
40
|
+
@typography-caption-letter-spacing: 0.025em;
|
|
41
|
+
@typography-code-font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
|
|
42
|
+
@typography-code-font-size: 0.875rem;
|
|
43
|
+
@typography-code-font-weight: 400;
|
|
44
|
+
@typography-code-line-height: 1.5;
|
|
45
|
+
@typography-code-letter-spacing: 0em;
|
|
@@ -19,6 +19,7 @@ $font-weight-regular: 400; // Regular (400) — default body text weight.
|
|
|
19
19
|
$font-weight-medium: 500; // Medium (500) — subtle emphasis, labels, and navigation.
|
|
20
20
|
$font-weight-semibold: 600; // Semibold (600) — headings and strong emphasis.
|
|
21
21
|
$font-weight-bold: 700; // Bold (700) — highest emphasis; key figures and primary headings.
|
|
22
|
+
$font-weight-extrabold: 800; // Extrabold (800) — hero/display headings (the prose scale uses 800 for h1).
|
|
22
23
|
$line-height-none: 1; // Solid (1) — display headings set at their own size (48/48, 56/56, 64/64 in the prose scale).
|
|
23
24
|
$line-height-tight: 1.2; // Tight (1.2) — large headings (36/30 in the prose scale).
|
|
24
25
|
$line-height-snug: 1.3333333; // Snug (1.3333333) — mid-size headings (32/24, 40/30 in the prose scale).
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
$typography-heading-1-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
|
|
2
|
+
$typography-heading-1-font-size: 2.25rem;
|
|
3
|
+
$typography-heading-1-font-weight: 800;
|
|
4
|
+
$typography-heading-1-line-height: 1.2;
|
|
5
|
+
$typography-heading-1-letter-spacing: -0.0125em;
|
|
6
|
+
$typography-heading-2-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
|
|
7
|
+
$typography-heading-2-font-size: 1.5rem;
|
|
8
|
+
$typography-heading-2-font-weight: 700;
|
|
9
|
+
$typography-heading-2-line-height: 1.3333333;
|
|
10
|
+
$typography-heading-2-letter-spacing: 0em;
|
|
11
|
+
$typography-heading-3-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
|
|
12
|
+
$typography-heading-3-font-size: 1.25rem;
|
|
13
|
+
$typography-heading-3-font-weight: 600;
|
|
14
|
+
$typography-heading-3-line-height: 1.6;
|
|
15
|
+
$typography-heading-3-letter-spacing: 0em;
|
|
16
|
+
$typography-heading-4-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
|
|
17
|
+
$typography-heading-4-font-size: 1rem;
|
|
18
|
+
$typography-heading-4-font-weight: 600;
|
|
19
|
+
$typography-heading-4-line-height: 1.5;
|
|
20
|
+
$typography-heading-4-letter-spacing: 0em;
|
|
21
|
+
$typography-body-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
|
|
22
|
+
$typography-body-font-size: 1rem;
|
|
23
|
+
$typography-body-font-weight: 400;
|
|
24
|
+
$typography-body-line-height: 1.75;
|
|
25
|
+
$typography-body-letter-spacing: 0em;
|
|
26
|
+
$typography-body-sm-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
|
|
27
|
+
$typography-body-sm-font-size: 0.875rem;
|
|
28
|
+
$typography-body-sm-font-weight: 400;
|
|
29
|
+
$typography-body-sm-line-height: 1.75;
|
|
30
|
+
$typography-body-sm-letter-spacing: 0em;
|
|
31
|
+
$typography-lead-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
|
|
32
|
+
$typography-lead-font-size: 1.25rem;
|
|
33
|
+
$typography-lead-font-weight: 400;
|
|
34
|
+
$typography-lead-line-height: 1.6;
|
|
35
|
+
$typography-lead-letter-spacing: 0em;
|
|
36
|
+
$typography-caption-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
|
|
37
|
+
$typography-caption-font-size: 0.75rem;
|
|
38
|
+
$typography-caption-font-weight: 400;
|
|
39
|
+
$typography-caption-line-height: 1.5;
|
|
40
|
+
$typography-caption-letter-spacing: 0.025em;
|
|
41
|
+
$typography-code-font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
|
|
42
|
+
$typography-code-font-size: 0.875rem;
|
|
43
|
+
$typography-code-font-weight: 400;
|
|
44
|
+
$typography-code-line-height: 1.5;
|
|
45
|
+
$typography-code-letter-spacing: 0em;
|
|
@@ -186,6 +186,11 @@
|
|
|
186
186
|
"$type": "fontWeight",
|
|
187
187
|
"$description": "Bold (700) — highest emphasis; key figures and primary headings.",
|
|
188
188
|
"$value": 700
|
|
189
|
+
},
|
|
190
|
+
"extrabold": {
|
|
191
|
+
"$type": "fontWeight",
|
|
192
|
+
"$description": "Extrabold (800) — hero/display headings (the prose scale uses 800 for h1).",
|
|
193
|
+
"$value": 800
|
|
189
194
|
}
|
|
190
195
|
},
|
|
191
196
|
"line-height": {
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
{
|
|
2
|
+
"typography": {
|
|
3
|
+
"heading-1": {
|
|
4
|
+
"$type": "typography",
|
|
5
|
+
"$description": "Page title — prose h1 at the base size (36px/800). Prose pairs 36px with 40/36 ≈ 1.11; tight (1.2) is the nearest primitive — flag for design.",
|
|
6
|
+
"$value": {
|
|
7
|
+
"fontFamily": "{font-family.display}",
|
|
8
|
+
"fontSize": "{font-size.36}",
|
|
9
|
+
"fontWeight": "{font-weight.extrabold}",
|
|
10
|
+
"letterSpacing": "{letter-spacing.tight}",
|
|
11
|
+
"lineHeight": "{line-height.tight}"
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
"heading-2": {
|
|
15
|
+
"$type": "typography",
|
|
16
|
+
"$description": "Section heading — prose h2 pairing (24px/700, 32/24 = snug exactly).",
|
|
17
|
+
"$value": {
|
|
18
|
+
"fontFamily": "{font-family.display}",
|
|
19
|
+
"fontSize": "{font-size.24}",
|
|
20
|
+
"fontWeight": "{font-weight.bold}",
|
|
21
|
+
"letterSpacing": "{letter-spacing.normal}",
|
|
22
|
+
"lineHeight": "{line-height.snug}"
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
"heading-3": {
|
|
26
|
+
"$type": "typography",
|
|
27
|
+
"$description": "Sub-section heading — prose h3 pairing (20px/600, 32/20 = relaxed exactly).",
|
|
28
|
+
"$value": {
|
|
29
|
+
"fontFamily": "{font-family.display}",
|
|
30
|
+
"fontSize": "{font-size.20}",
|
|
31
|
+
"fontWeight": "{font-weight.semibold}",
|
|
32
|
+
"letterSpacing": "{letter-spacing.normal}",
|
|
33
|
+
"lineHeight": "{line-height.relaxed}"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
"heading-4": {
|
|
37
|
+
"$type": "typography",
|
|
38
|
+
"$description": "Minor heading — prose h4 pairing (16px/600, 24/16 = base exactly).",
|
|
39
|
+
"$value": {
|
|
40
|
+
"fontFamily": "{font-family.display}",
|
|
41
|
+
"fontSize": "{font-size.16}",
|
|
42
|
+
"fontWeight": "{font-weight.semibold}",
|
|
43
|
+
"letterSpacing": "{letter-spacing.normal}",
|
|
44
|
+
"lineHeight": "{line-height.base}"
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
"body": {
|
|
48
|
+
"$type": "typography",
|
|
49
|
+
"$description": "Default body text — prose base pairing (16px/400, 28/16 = loose exactly).",
|
|
50
|
+
"$value": {
|
|
51
|
+
"fontFamily": "{font-family.sans}",
|
|
52
|
+
"fontSize": "{font-size.16}",
|
|
53
|
+
"fontWeight": "{font-weight.regular}",
|
|
54
|
+
"letterSpacing": "{letter-spacing.normal}",
|
|
55
|
+
"lineHeight": "{line-height.loose}"
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
"body-sm": {
|
|
59
|
+
"$type": "typography",
|
|
60
|
+
"$description": "Small body text — prose sm body (14px/400). Prose pairs 14px with 24/14 ≈ 1.714; loose (1.75) is the nearest primitive — flag for design.",
|
|
61
|
+
"$value": {
|
|
62
|
+
"fontFamily": "{font-family.sans}",
|
|
63
|
+
"fontSize": "{font-size.14}",
|
|
64
|
+
"fontWeight": "{font-weight.regular}",
|
|
65
|
+
"letterSpacing": "{letter-spacing.normal}",
|
|
66
|
+
"lineHeight": "{line-height.loose}"
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
"lead": {
|
|
70
|
+
"$type": "typography",
|
|
71
|
+
"$description": "Lead/intro paragraph — prose lead pairing at base (20px/400, 32/20 = relaxed exactly).",
|
|
72
|
+
"$value": {
|
|
73
|
+
"fontFamily": "{font-family.sans}",
|
|
74
|
+
"fontSize": "{font-size.20}",
|
|
75
|
+
"fontWeight": "{font-weight.regular}",
|
|
76
|
+
"letterSpacing": "{letter-spacing.normal}",
|
|
77
|
+
"lineHeight": "{line-height.relaxed}"
|
|
78
|
+
}
|
|
79
|
+
},
|
|
80
|
+
"caption": {
|
|
81
|
+
"$type": "typography",
|
|
82
|
+
"$description": "Captions, footnotes, and small labels (12px/400, wide tracking for legibility at small sizes).",
|
|
83
|
+
"$value": {
|
|
84
|
+
"fontFamily": "{font-family.sans}",
|
|
85
|
+
"fontSize": "{font-size.12}",
|
|
86
|
+
"fontWeight": "{font-weight.regular}",
|
|
87
|
+
"letterSpacing": "{letter-spacing.wide}",
|
|
88
|
+
"lineHeight": "{line-height.base}"
|
|
89
|
+
}
|
|
90
|
+
},
|
|
91
|
+
"code": {
|
|
92
|
+
"$type": "typography",
|
|
93
|
+
"$description": "Inline code and code blocks — prose code size at base (14px), JetBrains Mono. Prose pairs pre blocks with 24/14 ≈ 1.714; base (1.5) is the nearest primitive — flag for design.",
|
|
94
|
+
"$value": {
|
|
95
|
+
"fontFamily": "{font-family.mono}",
|
|
96
|
+
"fontSize": "{font-size.14}",
|
|
97
|
+
"fontWeight": "{font-weight.regular}",
|
|
98
|
+
"letterSpacing": "{letter-spacing.normal}",
|
|
99
|
+
"lineHeight": "{line-height.base}"
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}
|
|
@@ -186,6 +186,11 @@
|
|
|
186
186
|
"$type": "fontWeight",
|
|
187
187
|
"$description": "Bold (700) — highest emphasis; key figures and primary headings.",
|
|
188
188
|
"$value": 700
|
|
189
|
+
},
|
|
190
|
+
"extrabold": {
|
|
191
|
+
"$type": "fontWeight",
|
|
192
|
+
"$description": "Extrabold (800) — hero/display headings (the prose scale uses 800 for h1).",
|
|
193
|
+
"$value": 800
|
|
189
194
|
}
|
|
190
195
|
},
|
|
191
196
|
"line-height": {
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
export const heading1 = {
|
|
2
|
+
fontFamily:
|
|
3
|
+
"'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
4
|
+
fontSize: '2.25rem',
|
|
5
|
+
fontWeight: 800,
|
|
6
|
+
lineHeight: 1.2,
|
|
7
|
+
letterSpacing: '-0.0125em',
|
|
8
|
+
}
|
|
9
|
+
export const heading2 = {
|
|
10
|
+
fontFamily:
|
|
11
|
+
"'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
12
|
+
fontSize: '1.5rem',
|
|
13
|
+
fontWeight: 700,
|
|
14
|
+
lineHeight: 1.3333333,
|
|
15
|
+
letterSpacing: '0em',
|
|
16
|
+
}
|
|
17
|
+
export const heading3 = {
|
|
18
|
+
fontFamily:
|
|
19
|
+
"'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
20
|
+
fontSize: '1.25rem',
|
|
21
|
+
fontWeight: 600,
|
|
22
|
+
lineHeight: 1.6,
|
|
23
|
+
letterSpacing: '0em',
|
|
24
|
+
}
|
|
25
|
+
export const heading4 = {
|
|
26
|
+
fontFamily:
|
|
27
|
+
"'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
28
|
+
fontSize: '1rem',
|
|
29
|
+
fontWeight: 600,
|
|
30
|
+
lineHeight: 1.5,
|
|
31
|
+
letterSpacing: '0em',
|
|
32
|
+
}
|
|
33
|
+
export const body = {
|
|
34
|
+
fontFamily:
|
|
35
|
+
"'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
36
|
+
fontSize: '1rem',
|
|
37
|
+
fontWeight: 400,
|
|
38
|
+
lineHeight: 1.75,
|
|
39
|
+
letterSpacing: '0em',
|
|
40
|
+
}
|
|
41
|
+
export const bodySm = {
|
|
42
|
+
fontFamily:
|
|
43
|
+
"'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
44
|
+
fontSize: '0.875rem',
|
|
45
|
+
fontWeight: 400,
|
|
46
|
+
lineHeight: 1.75,
|
|
47
|
+
letterSpacing: '0em',
|
|
48
|
+
}
|
|
49
|
+
export const lead = {
|
|
50
|
+
fontFamily:
|
|
51
|
+
"'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
52
|
+
fontSize: '1.25rem',
|
|
53
|
+
fontWeight: 400,
|
|
54
|
+
lineHeight: 1.6,
|
|
55
|
+
letterSpacing: '0em',
|
|
56
|
+
}
|
|
57
|
+
export const caption = {
|
|
58
|
+
fontFamily:
|
|
59
|
+
"'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
60
|
+
fontSize: '0.75rem',
|
|
61
|
+
fontWeight: 400,
|
|
62
|
+
lineHeight: 1.5,
|
|
63
|
+
letterSpacing: '0.025em',
|
|
64
|
+
}
|
|
65
|
+
export const code = {
|
|
66
|
+
fontFamily:
|
|
67
|
+
"'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
|
|
68
|
+
fontSize: '0.875rem',
|
|
69
|
+
fontWeight: 400,
|
|
70
|
+
lineHeight: 1.5,
|
|
71
|
+
letterSpacing: '0em',
|
|
72
|
+
}
|