@nswds/tokens 3.1.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 +33 -0
- package/dist/css/typography/semantic.css +56 -0
- package/dist/index.cjs +499 -65
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +365 -0
- package/dist/index.d.ts +365 -0
- package/dist/index.js +499 -65
- package/dist/index.js.map +1 -1
- package/dist/js/typography/global.js +43 -0
- package/dist/js/typography/semantic.js +72 -0
- package/dist/json/typography/global.json +43 -0
- package/dist/json/typography/semantic.json +65 -0
- package/dist/less/typography/global.less +31 -0
- package/dist/less/typography/semantic.less +45 -0
- package/dist/scss/typography/global.scss +31 -0
- package/dist/scss/typography/semantic.scss +45 -0
- package/dist/tailwind/typography/global.css +33 -0
- package/dist/tokens/global/typography/canonical.json +245 -0
- package/dist/tokens/semantic/typography/canonical.json +103 -0
- package/dist/tokens/typography.base.json +245 -0
- package/dist/ts/typography/global.ts +43 -0
- package/dist/ts/typography/semantic.ts +72 -0
- package/package.json +1 -1
|
@@ -0,0 +1,245 @@
|
|
|
1
|
+
{
|
|
2
|
+
"font-family": {
|
|
3
|
+
"sans": {
|
|
4
|
+
"$type": "fontFamily",
|
|
5
|
+
"$description": "Primary typeface — Public Sans (the NSW Government brand typeface) with system, Helvetica/Arial, and emoji fallbacks. Use for all UI and body text.",
|
|
6
|
+
"$value": [
|
|
7
|
+
"Public Sans",
|
|
8
|
+
"-apple-system",
|
|
9
|
+
"BlinkMacSystemFont",
|
|
10
|
+
"Segoe UI",
|
|
11
|
+
"Noto Sans",
|
|
12
|
+
"Helvetica",
|
|
13
|
+
"Arial",
|
|
14
|
+
"sans-serif",
|
|
15
|
+
"Apple Color Emoji",
|
|
16
|
+
"Segoe UI Emoji"
|
|
17
|
+
]
|
|
18
|
+
},
|
|
19
|
+
"display": {
|
|
20
|
+
"$type": "fontFamily",
|
|
21
|
+
"$description": "Display typeface — currently the same stack as sans; a separate token so display/heading type can diverge from body text later without a breaking change.",
|
|
22
|
+
"$value": [
|
|
23
|
+
"Public Sans",
|
|
24
|
+
"-apple-system",
|
|
25
|
+
"BlinkMacSystemFont",
|
|
26
|
+
"Segoe UI",
|
|
27
|
+
"Noto Sans",
|
|
28
|
+
"Helvetica",
|
|
29
|
+
"Arial",
|
|
30
|
+
"sans-serif",
|
|
31
|
+
"Apple Color Emoji",
|
|
32
|
+
"Segoe UI Emoji"
|
|
33
|
+
]
|
|
34
|
+
},
|
|
35
|
+
"system": {
|
|
36
|
+
"$type": "fontFamily",
|
|
37
|
+
"$description": "System typeface — currently the same stack as sans; a separate token for system-chrome contexts (toasts, native-feeling UI) that may diverge later.",
|
|
38
|
+
"$value": [
|
|
39
|
+
"Public Sans",
|
|
40
|
+
"-apple-system",
|
|
41
|
+
"BlinkMacSystemFont",
|
|
42
|
+
"Segoe UI",
|
|
43
|
+
"Noto Sans",
|
|
44
|
+
"Helvetica",
|
|
45
|
+
"Arial",
|
|
46
|
+
"sans-serif",
|
|
47
|
+
"Apple Color Emoji",
|
|
48
|
+
"Segoe UI Emoji"
|
|
49
|
+
]
|
|
50
|
+
},
|
|
51
|
+
"mono": {
|
|
52
|
+
"$type": "fontFamily",
|
|
53
|
+
"$description": "Monospace stack — JetBrains Mono with ui-monospace and system fallbacks for code, tabular data, and technical content.",
|
|
54
|
+
"$value": [
|
|
55
|
+
"JetBrains Mono",
|
|
56
|
+
"ui-monospace",
|
|
57
|
+
"SFMono-Regular",
|
|
58
|
+
"SF Mono",
|
|
59
|
+
"Menlo",
|
|
60
|
+
"Consolas",
|
|
61
|
+
"Liberation Mono",
|
|
62
|
+
"monospace"
|
|
63
|
+
]
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
"font-size": {
|
|
67
|
+
"12": {
|
|
68
|
+
"$type": "dimension",
|
|
69
|
+
"$description": "Font size 12px (0.75rem) — the step name is the px value at the default root font size.",
|
|
70
|
+
"$value": {
|
|
71
|
+
"value": 0.75,
|
|
72
|
+
"unit": "rem"
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
"14": {
|
|
76
|
+
"$type": "dimension",
|
|
77
|
+
"$description": "Font size 14px (0.875rem) — the step name is the px value at the default root font size.",
|
|
78
|
+
"$value": {
|
|
79
|
+
"value": 0.875,
|
|
80
|
+
"unit": "rem"
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
"16": {
|
|
84
|
+
"$type": "dimension",
|
|
85
|
+
"$description": "Font size 16px (1rem) — the step name is the px value at the default root font size.",
|
|
86
|
+
"$value": {
|
|
87
|
+
"value": 1,
|
|
88
|
+
"unit": "rem"
|
|
89
|
+
}
|
|
90
|
+
},
|
|
91
|
+
"18": {
|
|
92
|
+
"$type": "dimension",
|
|
93
|
+
"$description": "Font size 18px (1.125rem) — the step name is the px value at the default root font size.",
|
|
94
|
+
"$value": {
|
|
95
|
+
"value": 1.125,
|
|
96
|
+
"unit": "rem"
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
"20": {
|
|
100
|
+
"$type": "dimension",
|
|
101
|
+
"$description": "Font size 20px (1.25rem) — the step name is the px value at the default root font size.",
|
|
102
|
+
"$value": {
|
|
103
|
+
"value": 1.25,
|
|
104
|
+
"unit": "rem"
|
|
105
|
+
}
|
|
106
|
+
},
|
|
107
|
+
"22": {
|
|
108
|
+
"$type": "dimension",
|
|
109
|
+
"$description": "Font size 22px (1.375rem) — the step name is the px value at the default root font size.",
|
|
110
|
+
"$value": {
|
|
111
|
+
"value": 1.375,
|
|
112
|
+
"unit": "rem"
|
|
113
|
+
}
|
|
114
|
+
},
|
|
115
|
+
"24": {
|
|
116
|
+
"$type": "dimension",
|
|
117
|
+
"$description": "Font size 24px (1.5rem) — the step name is the px value at the default root font size.",
|
|
118
|
+
"$value": {
|
|
119
|
+
"value": 1.5,
|
|
120
|
+
"unit": "rem"
|
|
121
|
+
}
|
|
122
|
+
},
|
|
123
|
+
"30": {
|
|
124
|
+
"$type": "dimension",
|
|
125
|
+
"$description": "Font size 30px (1.875rem) — the step name is the px value at the default root font size.",
|
|
126
|
+
"$value": {
|
|
127
|
+
"value": 1.875,
|
|
128
|
+
"unit": "rem"
|
|
129
|
+
}
|
|
130
|
+
},
|
|
131
|
+
"36": {
|
|
132
|
+
"$type": "dimension",
|
|
133
|
+
"$description": "Font size 36px (2.25rem) — the step name is the px value at the default root font size.",
|
|
134
|
+
"$value": {
|
|
135
|
+
"value": 2.25,
|
|
136
|
+
"unit": "rem"
|
|
137
|
+
}
|
|
138
|
+
},
|
|
139
|
+
"48": {
|
|
140
|
+
"$type": "dimension",
|
|
141
|
+
"$description": "Font size 48px (3rem) — the step name is the px value at the default root font size.",
|
|
142
|
+
"$value": {
|
|
143
|
+
"value": 3,
|
|
144
|
+
"unit": "rem"
|
|
145
|
+
}
|
|
146
|
+
},
|
|
147
|
+
"56": {
|
|
148
|
+
"$type": "dimension",
|
|
149
|
+
"$description": "Font size 56px (3.5rem) — the step name is the px value at the default root font size.",
|
|
150
|
+
"$value": {
|
|
151
|
+
"value": 3.5,
|
|
152
|
+
"unit": "rem"
|
|
153
|
+
}
|
|
154
|
+
},
|
|
155
|
+
"64": {
|
|
156
|
+
"$type": "dimension",
|
|
157
|
+
"$description": "Font size 64px (4rem) — the step name is the px value at the default root font size.",
|
|
158
|
+
"$value": {
|
|
159
|
+
"value": 4,
|
|
160
|
+
"unit": "rem"
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
},
|
|
164
|
+
"font-weight": {
|
|
165
|
+
"light": {
|
|
166
|
+
"$type": "fontWeight",
|
|
167
|
+
"$description": "Light (300) — large display text only; avoid at body sizes for legibility.",
|
|
168
|
+
"$value": 300
|
|
169
|
+
},
|
|
170
|
+
"regular": {
|
|
171
|
+
"$type": "fontWeight",
|
|
172
|
+
"$description": "Regular (400) — default body text weight.",
|
|
173
|
+
"$value": 400
|
|
174
|
+
},
|
|
175
|
+
"medium": {
|
|
176
|
+
"$type": "fontWeight",
|
|
177
|
+
"$description": "Medium (500) — subtle emphasis, labels, and navigation.",
|
|
178
|
+
"$value": 500
|
|
179
|
+
},
|
|
180
|
+
"semibold": {
|
|
181
|
+
"$type": "fontWeight",
|
|
182
|
+
"$description": "Semibold (600) — headings and strong emphasis.",
|
|
183
|
+
"$value": 600
|
|
184
|
+
},
|
|
185
|
+
"bold": {
|
|
186
|
+
"$type": "fontWeight",
|
|
187
|
+
"$description": "Bold (700) — highest emphasis; key figures and primary headings.",
|
|
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
|
|
194
|
+
}
|
|
195
|
+
},
|
|
196
|
+
"line-height": {
|
|
197
|
+
"none": {
|
|
198
|
+
"$type": "number",
|
|
199
|
+
"$description": "Solid (1) — display headings set at their own size (48/48, 56/56, 64/64 in the prose scale).",
|
|
200
|
+
"$value": 1
|
|
201
|
+
},
|
|
202
|
+
"tight": {
|
|
203
|
+
"$type": "number",
|
|
204
|
+
"$description": "Tight (1.2) — large headings (36/30 in the prose scale).",
|
|
205
|
+
"$value": 1.2
|
|
206
|
+
},
|
|
207
|
+
"snug": {
|
|
208
|
+
"$type": "number",
|
|
209
|
+
"$description": "Snug (1.3333333) — mid-size headings (32/24, 40/30 in the prose scale).",
|
|
210
|
+
"$value": 1.3333333
|
|
211
|
+
},
|
|
212
|
+
"base": {
|
|
213
|
+
"$type": "number",
|
|
214
|
+
"$description": "Base (1.5) — default for UI text and dense content (24/16, 36/24 in the prose scale); meets WCAG 1.4.12 text-spacing.",
|
|
215
|
+
"$value": 1.5
|
|
216
|
+
},
|
|
217
|
+
"relaxed": {
|
|
218
|
+
"$type": "number",
|
|
219
|
+
"$description": "Relaxed (1.6) — subheadings and lead text (32/20 in the prose scale).",
|
|
220
|
+
"$value": 1.6
|
|
221
|
+
},
|
|
222
|
+
"loose": {
|
|
223
|
+
"$type": "number",
|
|
224
|
+
"$description": "Loose (1.75) — long-form body text (28/16 in the prose scale).",
|
|
225
|
+
"$value": 1.75
|
|
226
|
+
}
|
|
227
|
+
},
|
|
228
|
+
"letter-spacing": {
|
|
229
|
+
"tight": {
|
|
230
|
+
"$type": "number",
|
|
231
|
+
"$description": "Tight tracking (-0.0125em) — large display headings. Value is an em multiplier; string outputs render it with the em unit.",
|
|
232
|
+
"$value": -0.0125
|
|
233
|
+
},
|
|
234
|
+
"normal": {
|
|
235
|
+
"$type": "number",
|
|
236
|
+
"$description": "Normal tracking (0em) — default for body text. Value is an em multiplier; string outputs render it with the em unit.",
|
|
237
|
+
"$value": 0
|
|
238
|
+
},
|
|
239
|
+
"wide": {
|
|
240
|
+
"$type": "number",
|
|
241
|
+
"$description": "Wide tracking (0.025em) — small caps, overlines, and small labels. Value is an em multiplier; string outputs render it with the em unit.",
|
|
242
|
+
"$value": 0.025
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
}
|
|
@@ -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
|
+
}
|
|
@@ -0,0 +1,245 @@
|
|
|
1
|
+
{
|
|
2
|
+
"font-family": {
|
|
3
|
+
"sans": {
|
|
4
|
+
"$type": "fontFamily",
|
|
5
|
+
"$description": "Primary typeface — Public Sans (the NSW Government brand typeface) with system, Helvetica/Arial, and emoji fallbacks. Use for all UI and body text.",
|
|
6
|
+
"$value": [
|
|
7
|
+
"Public Sans",
|
|
8
|
+
"-apple-system",
|
|
9
|
+
"BlinkMacSystemFont",
|
|
10
|
+
"Segoe UI",
|
|
11
|
+
"Noto Sans",
|
|
12
|
+
"Helvetica",
|
|
13
|
+
"Arial",
|
|
14
|
+
"sans-serif",
|
|
15
|
+
"Apple Color Emoji",
|
|
16
|
+
"Segoe UI Emoji"
|
|
17
|
+
]
|
|
18
|
+
},
|
|
19
|
+
"display": {
|
|
20
|
+
"$type": "fontFamily",
|
|
21
|
+
"$description": "Display typeface — currently the same stack as sans; a separate token so display/heading type can diverge from body text later without a breaking change.",
|
|
22
|
+
"$value": [
|
|
23
|
+
"Public Sans",
|
|
24
|
+
"-apple-system",
|
|
25
|
+
"BlinkMacSystemFont",
|
|
26
|
+
"Segoe UI",
|
|
27
|
+
"Noto Sans",
|
|
28
|
+
"Helvetica",
|
|
29
|
+
"Arial",
|
|
30
|
+
"sans-serif",
|
|
31
|
+
"Apple Color Emoji",
|
|
32
|
+
"Segoe UI Emoji"
|
|
33
|
+
]
|
|
34
|
+
},
|
|
35
|
+
"system": {
|
|
36
|
+
"$type": "fontFamily",
|
|
37
|
+
"$description": "System typeface — currently the same stack as sans; a separate token for system-chrome contexts (toasts, native-feeling UI) that may diverge later.",
|
|
38
|
+
"$value": [
|
|
39
|
+
"Public Sans",
|
|
40
|
+
"-apple-system",
|
|
41
|
+
"BlinkMacSystemFont",
|
|
42
|
+
"Segoe UI",
|
|
43
|
+
"Noto Sans",
|
|
44
|
+
"Helvetica",
|
|
45
|
+
"Arial",
|
|
46
|
+
"sans-serif",
|
|
47
|
+
"Apple Color Emoji",
|
|
48
|
+
"Segoe UI Emoji"
|
|
49
|
+
]
|
|
50
|
+
},
|
|
51
|
+
"mono": {
|
|
52
|
+
"$type": "fontFamily",
|
|
53
|
+
"$description": "Monospace stack — JetBrains Mono with ui-monospace and system fallbacks for code, tabular data, and technical content.",
|
|
54
|
+
"$value": [
|
|
55
|
+
"JetBrains Mono",
|
|
56
|
+
"ui-monospace",
|
|
57
|
+
"SFMono-Regular",
|
|
58
|
+
"SF Mono",
|
|
59
|
+
"Menlo",
|
|
60
|
+
"Consolas",
|
|
61
|
+
"Liberation Mono",
|
|
62
|
+
"monospace"
|
|
63
|
+
]
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
"font-size": {
|
|
67
|
+
"12": {
|
|
68
|
+
"$type": "dimension",
|
|
69
|
+
"$description": "Font size 12px (0.75rem) — the step name is the px value at the default root font size.",
|
|
70
|
+
"$value": {
|
|
71
|
+
"value": 0.75,
|
|
72
|
+
"unit": "rem"
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
"14": {
|
|
76
|
+
"$type": "dimension",
|
|
77
|
+
"$description": "Font size 14px (0.875rem) — the step name is the px value at the default root font size.",
|
|
78
|
+
"$value": {
|
|
79
|
+
"value": 0.875,
|
|
80
|
+
"unit": "rem"
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
"16": {
|
|
84
|
+
"$type": "dimension",
|
|
85
|
+
"$description": "Font size 16px (1rem) — the step name is the px value at the default root font size.",
|
|
86
|
+
"$value": {
|
|
87
|
+
"value": 1,
|
|
88
|
+
"unit": "rem"
|
|
89
|
+
}
|
|
90
|
+
},
|
|
91
|
+
"18": {
|
|
92
|
+
"$type": "dimension",
|
|
93
|
+
"$description": "Font size 18px (1.125rem) — the step name is the px value at the default root font size.",
|
|
94
|
+
"$value": {
|
|
95
|
+
"value": 1.125,
|
|
96
|
+
"unit": "rem"
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
"20": {
|
|
100
|
+
"$type": "dimension",
|
|
101
|
+
"$description": "Font size 20px (1.25rem) — the step name is the px value at the default root font size.",
|
|
102
|
+
"$value": {
|
|
103
|
+
"value": 1.25,
|
|
104
|
+
"unit": "rem"
|
|
105
|
+
}
|
|
106
|
+
},
|
|
107
|
+
"22": {
|
|
108
|
+
"$type": "dimension",
|
|
109
|
+
"$description": "Font size 22px (1.375rem) — the step name is the px value at the default root font size.",
|
|
110
|
+
"$value": {
|
|
111
|
+
"value": 1.375,
|
|
112
|
+
"unit": "rem"
|
|
113
|
+
}
|
|
114
|
+
},
|
|
115
|
+
"24": {
|
|
116
|
+
"$type": "dimension",
|
|
117
|
+
"$description": "Font size 24px (1.5rem) — the step name is the px value at the default root font size.",
|
|
118
|
+
"$value": {
|
|
119
|
+
"value": 1.5,
|
|
120
|
+
"unit": "rem"
|
|
121
|
+
}
|
|
122
|
+
},
|
|
123
|
+
"30": {
|
|
124
|
+
"$type": "dimension",
|
|
125
|
+
"$description": "Font size 30px (1.875rem) — the step name is the px value at the default root font size.",
|
|
126
|
+
"$value": {
|
|
127
|
+
"value": 1.875,
|
|
128
|
+
"unit": "rem"
|
|
129
|
+
}
|
|
130
|
+
},
|
|
131
|
+
"36": {
|
|
132
|
+
"$type": "dimension",
|
|
133
|
+
"$description": "Font size 36px (2.25rem) — the step name is the px value at the default root font size.",
|
|
134
|
+
"$value": {
|
|
135
|
+
"value": 2.25,
|
|
136
|
+
"unit": "rem"
|
|
137
|
+
}
|
|
138
|
+
},
|
|
139
|
+
"48": {
|
|
140
|
+
"$type": "dimension",
|
|
141
|
+
"$description": "Font size 48px (3rem) — the step name is the px value at the default root font size.",
|
|
142
|
+
"$value": {
|
|
143
|
+
"value": 3,
|
|
144
|
+
"unit": "rem"
|
|
145
|
+
}
|
|
146
|
+
},
|
|
147
|
+
"56": {
|
|
148
|
+
"$type": "dimension",
|
|
149
|
+
"$description": "Font size 56px (3.5rem) — the step name is the px value at the default root font size.",
|
|
150
|
+
"$value": {
|
|
151
|
+
"value": 3.5,
|
|
152
|
+
"unit": "rem"
|
|
153
|
+
}
|
|
154
|
+
},
|
|
155
|
+
"64": {
|
|
156
|
+
"$type": "dimension",
|
|
157
|
+
"$description": "Font size 64px (4rem) — the step name is the px value at the default root font size.",
|
|
158
|
+
"$value": {
|
|
159
|
+
"value": 4,
|
|
160
|
+
"unit": "rem"
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
},
|
|
164
|
+
"font-weight": {
|
|
165
|
+
"light": {
|
|
166
|
+
"$type": "fontWeight",
|
|
167
|
+
"$description": "Light (300) — large display text only; avoid at body sizes for legibility.",
|
|
168
|
+
"$value": 300
|
|
169
|
+
},
|
|
170
|
+
"regular": {
|
|
171
|
+
"$type": "fontWeight",
|
|
172
|
+
"$description": "Regular (400) — default body text weight.",
|
|
173
|
+
"$value": 400
|
|
174
|
+
},
|
|
175
|
+
"medium": {
|
|
176
|
+
"$type": "fontWeight",
|
|
177
|
+
"$description": "Medium (500) — subtle emphasis, labels, and navigation.",
|
|
178
|
+
"$value": 500
|
|
179
|
+
},
|
|
180
|
+
"semibold": {
|
|
181
|
+
"$type": "fontWeight",
|
|
182
|
+
"$description": "Semibold (600) — headings and strong emphasis.",
|
|
183
|
+
"$value": 600
|
|
184
|
+
},
|
|
185
|
+
"bold": {
|
|
186
|
+
"$type": "fontWeight",
|
|
187
|
+
"$description": "Bold (700) — highest emphasis; key figures and primary headings.",
|
|
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
|
|
194
|
+
}
|
|
195
|
+
},
|
|
196
|
+
"line-height": {
|
|
197
|
+
"none": {
|
|
198
|
+
"$type": "number",
|
|
199
|
+
"$description": "Solid (1) — display headings set at their own size (48/48, 56/56, 64/64 in the prose scale).",
|
|
200
|
+
"$value": 1
|
|
201
|
+
},
|
|
202
|
+
"tight": {
|
|
203
|
+
"$type": "number",
|
|
204
|
+
"$description": "Tight (1.2) — large headings (36/30 in the prose scale).",
|
|
205
|
+
"$value": 1.2
|
|
206
|
+
},
|
|
207
|
+
"snug": {
|
|
208
|
+
"$type": "number",
|
|
209
|
+
"$description": "Snug (1.3333333) — mid-size headings (32/24, 40/30 in the prose scale).",
|
|
210
|
+
"$value": 1.3333333
|
|
211
|
+
},
|
|
212
|
+
"base": {
|
|
213
|
+
"$type": "number",
|
|
214
|
+
"$description": "Base (1.5) — default for UI text and dense content (24/16, 36/24 in the prose scale); meets WCAG 1.4.12 text-spacing.",
|
|
215
|
+
"$value": 1.5
|
|
216
|
+
},
|
|
217
|
+
"relaxed": {
|
|
218
|
+
"$type": "number",
|
|
219
|
+
"$description": "Relaxed (1.6) — subheadings and lead text (32/20 in the prose scale).",
|
|
220
|
+
"$value": 1.6
|
|
221
|
+
},
|
|
222
|
+
"loose": {
|
|
223
|
+
"$type": "number",
|
|
224
|
+
"$description": "Loose (1.75) — long-form body text (28/16 in the prose scale).",
|
|
225
|
+
"$value": 1.75
|
|
226
|
+
}
|
|
227
|
+
},
|
|
228
|
+
"letter-spacing": {
|
|
229
|
+
"tight": {
|
|
230
|
+
"$type": "number",
|
|
231
|
+
"$description": "Tight tracking (-0.0125em) — large display headings. Value is an em multiplier; string outputs render it with the em unit.",
|
|
232
|
+
"$value": -0.0125
|
|
233
|
+
},
|
|
234
|
+
"normal": {
|
|
235
|
+
"$type": "number",
|
|
236
|
+
"$description": "Normal tracking (0em) — default for body text. Value is an em multiplier; string outputs render it with the em unit.",
|
|
237
|
+
"$value": 0
|
|
238
|
+
},
|
|
239
|
+
"wide": {
|
|
240
|
+
"$type": "number",
|
|
241
|
+
"$description": "Wide tracking (0.025em) — small caps, overlines, and small labels. Value is an em multiplier; string outputs render it with the em unit.",
|
|
242
|
+
"$value": 0.025
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
export const fontFamily = {
|
|
2
|
+
sans: "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
3
|
+
display:
|
|
4
|
+
"'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
5
|
+
system:
|
|
6
|
+
"'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
7
|
+
mono: "'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
|
|
8
|
+
}
|
|
9
|
+
export const fontSize = {
|
|
10
|
+
'12': '0.75rem',
|
|
11
|
+
'14': '0.875rem',
|
|
12
|
+
'16': '1rem',
|
|
13
|
+
'18': '1.125rem',
|
|
14
|
+
'20': '1.25rem',
|
|
15
|
+
'22': '1.375rem',
|
|
16
|
+
'24': '1.5rem',
|
|
17
|
+
'30': '1.875rem',
|
|
18
|
+
'36': '2.25rem',
|
|
19
|
+
'48': '3rem',
|
|
20
|
+
'56': '3.5rem',
|
|
21
|
+
'64': '4rem',
|
|
22
|
+
}
|
|
23
|
+
export const fontWeight = {
|
|
24
|
+
light: 300,
|
|
25
|
+
regular: 400,
|
|
26
|
+
medium: 500,
|
|
27
|
+
semibold: 600,
|
|
28
|
+
bold: 700,
|
|
29
|
+
extrabold: 800,
|
|
30
|
+
}
|
|
31
|
+
export const lineHeight = {
|
|
32
|
+
none: 1,
|
|
33
|
+
tight: 1.2,
|
|
34
|
+
snug: 1.3333333,
|
|
35
|
+
base: 1.5,
|
|
36
|
+
relaxed: 1.6,
|
|
37
|
+
loose: 1.75,
|
|
38
|
+
}
|
|
39
|
+
export const letterSpacing = {
|
|
40
|
+
tight: '-0.0125em',
|
|
41
|
+
normal: '0em',
|
|
42
|
+
wide: '0.025em',
|
|
43
|
+
}
|