@kiva/kv-tokens 3.4.1 → 3.5.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/CHANGELOG.md +11 -0
- package/configs/kivaTypography.js +219 -0
- package/configs/tailwind.config.js +2 -4
- package/package.json +2 -2
- package/primitives.js +4 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [3.5.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-tokens@3.4.1...@kiva/kv-tokens@3.5.0) (2025-09-26)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* fallback font styles adjusted to match primary styles ([c57ddc1](https://github.com/kiva/kv-ui-elements/commit/c57ddc1190153dc4d5db264df52f2f0b45738c5b))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## [3.4.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-tokens@3.4.0...@kiva/kv-tokens@3.4.1) (2025-08-25)
|
|
7
18
|
|
|
8
19
|
|
|
@@ -11,10 +11,107 @@ const {
|
|
|
11
11
|
space,
|
|
12
12
|
} = designTokens;
|
|
13
13
|
|
|
14
|
+
/**
|
|
15
|
+
* Calculates the necessary font adjustments for a fallback font to match
|
|
16
|
+
* the appearance of a web font as closely as possible.
|
|
17
|
+
* For more info, see https://developer.chrome.com/blog/font-fallbacks
|
|
18
|
+
*
|
|
19
|
+
* @param {Object} params - The parameters for the calculation.
|
|
20
|
+
* @param {number} params.ascent - The ascent value of the web font.
|
|
21
|
+
* @param {number} params.descent - The descent value of the web font.
|
|
22
|
+
* @param {number} params.lineGap - The line gap value of the web font.
|
|
23
|
+
* @param {number} params.unitsPerEm - The units per em value of the web font.
|
|
24
|
+
* @param {number} params.avgCharWidth - The average character width of the web font.
|
|
25
|
+
* @param {number} params.fallbackUnitsPerEm - The units per em value of the fallback font.
|
|
26
|
+
* @param {number} params.fallbackAvgCharWidth - The average character width of the fallback font.
|
|
27
|
+
* @returns {Object} CSS properties for font adjustments to be spread into a @font-face rule.
|
|
28
|
+
*/
|
|
29
|
+
export const adjustFallbackFont = ({
|
|
30
|
+
ascent,
|
|
31
|
+
descent,
|
|
32
|
+
lineGap,
|
|
33
|
+
unitsPerEm,
|
|
34
|
+
avgCharWidth = 1,
|
|
35
|
+
fallbackUnitsPerEm = unitsPerEm,
|
|
36
|
+
fallbackAvgCharWidth = avgCharWidth,
|
|
37
|
+
} = {}) => {
|
|
38
|
+
const asPercent = (value) => `${value * 100}%`;
|
|
39
|
+
// avgCharacterWidth of web font / avgCharacterWidth of fallback font
|
|
40
|
+
const sizeAdjust = ((avgCharWidth / unitsPerEm) / (fallbackAvgCharWidth / fallbackUnitsPerEm));
|
|
41
|
+
return {
|
|
42
|
+
sizeAdjust: asPercent(sizeAdjust),
|
|
43
|
+
// web font ascent / (web font UPM * size-adjust)
|
|
44
|
+
ascentOverride: asPercent(ascent / (unitsPerEm * sizeAdjust)),
|
|
45
|
+
// web font descent / (web font UPM * size-adjust)
|
|
46
|
+
descentOverride: asPercent(descent / (unitsPerEm * sizeAdjust)),
|
|
47
|
+
// web font lineGap / (web font UPM * size-adjust)
|
|
48
|
+
lineGapOverride: asPercent(lineGap / (unitsPerEm * sizeAdjust)),
|
|
49
|
+
};
|
|
50
|
+
};
|
|
51
|
+
|
|
14
52
|
/**
|
|
15
53
|
WEB FONT DEFINITIONS
|
|
16
54
|
*/
|
|
17
55
|
export const webFonts = [
|
|
56
|
+
/**
|
|
57
|
+
* Fallback for Dovetail MVB Medium
|
|
58
|
+
*
|
|
59
|
+
* Dovetail MVB Medium metrics:
|
|
60
|
+
* - ascent: 1081
|
|
61
|
+
* - descent: -253
|
|
62
|
+
* - lineGap: 0
|
|
63
|
+
* - unitsPerEm: 1000
|
|
64
|
+
* - xWidthAvg: 453
|
|
65
|
+
*
|
|
66
|
+
* Georgia metrics:
|
|
67
|
+
* - unitPerEm: 2048
|
|
68
|
+
* - xWidthAvg: 913
|
|
69
|
+
*/
|
|
70
|
+
{
|
|
71
|
+
'@font-face': {
|
|
72
|
+
fontFamily: 'dovetail-mvb-fallback',
|
|
73
|
+
src: 'local("Georgia")',
|
|
74
|
+
...adjustFallbackFont({
|
|
75
|
+
ascent: 1081,
|
|
76
|
+
descent: 253,
|
|
77
|
+
lineGap: 0,
|
|
78
|
+
unitsPerEm: 1000,
|
|
79
|
+
avgCharWidth: 453,
|
|
80
|
+
fallbackUnitsPerEm: 2048,
|
|
81
|
+
fallbackAvgCharWidth: 913,
|
|
82
|
+
}),
|
|
83
|
+
},
|
|
84
|
+
},
|
|
85
|
+
/**
|
|
86
|
+
* Fallback for Dovetail MVB Medium Italic
|
|
87
|
+
*
|
|
88
|
+
* Dovetail MVB Medium Italic metrics:
|
|
89
|
+
* - ascent: 1081
|
|
90
|
+
* - descent: -253
|
|
91
|
+
* - lineGap: 0
|
|
92
|
+
* - unitsPerEm: 1000
|
|
93
|
+
* - xWidthAvg: 430
|
|
94
|
+
*
|
|
95
|
+
* Georgia Italic metrics:
|
|
96
|
+
* - unitPerEm: 2048
|
|
97
|
+
* - xWidthAvg: 931
|
|
98
|
+
*/
|
|
99
|
+
{
|
|
100
|
+
'@font-face': {
|
|
101
|
+
fontFamily: 'dovetail-mvb-fallback',
|
|
102
|
+
src: 'local("Georgia Italic")',
|
|
103
|
+
fontStyle: 'italic',
|
|
104
|
+
...adjustFallbackFont({
|
|
105
|
+
ascent: 1081,
|
|
106
|
+
descent: 253,
|
|
107
|
+
lineGap: 0,
|
|
108
|
+
unitsPerEm: 1000,
|
|
109
|
+
avgCharWidth: 430,
|
|
110
|
+
fallbackUnitsPerEm: 2048,
|
|
111
|
+
fallbackAvgCharWidth: 931,
|
|
112
|
+
}),
|
|
113
|
+
},
|
|
114
|
+
},
|
|
18
115
|
// Note corresponding font weight in Tailwind is "normal"
|
|
19
116
|
{
|
|
20
117
|
'@font-face': {
|
|
@@ -26,6 +123,36 @@ export const webFonts = [
|
|
|
26
123
|
src: 'url(//www.kiva.org/static/fonts/PostGrotesk-Medium.8c8a585.woff2) format(\'woff2\')',
|
|
27
124
|
},
|
|
28
125
|
},
|
|
126
|
+
/**
|
|
127
|
+
* Fallback for Post Grotesk Medium
|
|
128
|
+
*
|
|
129
|
+
* Post Grotesk Medium metrics:
|
|
130
|
+
* - ascent:948
|
|
131
|
+
* - descent: -262
|
|
132
|
+
* - lineGap: 0
|
|
133
|
+
* - unitsPerEm: 1000
|
|
134
|
+
* - xWidthAvg: 451
|
|
135
|
+
*
|
|
136
|
+
* Arial Bold metrics:
|
|
137
|
+
* - unitsPerEm: 2048
|
|
138
|
+
* - xWidthAvg: 983
|
|
139
|
+
*/
|
|
140
|
+
{
|
|
141
|
+
'@font-face': {
|
|
142
|
+
fontFamily: 'PostGrotesk-fallback',
|
|
143
|
+
src: 'local("Arial Bold")',
|
|
144
|
+
fontWeight: '400',
|
|
145
|
+
...adjustFallbackFont({
|
|
146
|
+
ascent: 948,
|
|
147
|
+
descent: 262,
|
|
148
|
+
lineGap: 0,
|
|
149
|
+
unitsPerEm: 1000,
|
|
150
|
+
avgCharWidth: 451,
|
|
151
|
+
fallbackUnitsPerEm: 2048,
|
|
152
|
+
fallbackAvgCharWidth: 983,
|
|
153
|
+
}),
|
|
154
|
+
},
|
|
155
|
+
},
|
|
29
156
|
// Note corresponding font weight in Tailwind is "normal"
|
|
30
157
|
{
|
|
31
158
|
'@font-face': {
|
|
@@ -37,6 +164,37 @@ export const webFonts = [
|
|
|
37
164
|
src: 'url(//www.kiva.org/static/fonts/PostGrotesk-MediumItalic.133f41d.woff2) format(\'woff2\')',
|
|
38
165
|
},
|
|
39
166
|
},
|
|
167
|
+
/**
|
|
168
|
+
* Fallback for Post Grotesk Medium Italic
|
|
169
|
+
*
|
|
170
|
+
* Post Grotesk Medium Italic metrics:
|
|
171
|
+
* - ascent: 949
|
|
172
|
+
* - descent: -259
|
|
173
|
+
* - lineGap: 0
|
|
174
|
+
* - unitsPerEm: 1000
|
|
175
|
+
* - xWidthAvg: 451
|
|
176
|
+
*
|
|
177
|
+
* Arial Bold Italic metrics:
|
|
178
|
+
* - unitsPerEm: 2048
|
|
179
|
+
* - xWidthAvg: 983
|
|
180
|
+
*/
|
|
181
|
+
{
|
|
182
|
+
'@font-face': {
|
|
183
|
+
fontFamily: 'PostGrotesk-fallback',
|
|
184
|
+
src: 'local("Arial Bold Italic")',
|
|
185
|
+
fontWeight: '400',
|
|
186
|
+
fontStyle: 'italic',
|
|
187
|
+
...adjustFallbackFont({
|
|
188
|
+
ascent: 949,
|
|
189
|
+
descent: 259,
|
|
190
|
+
lineGap: 0,
|
|
191
|
+
unitsPerEm: 1000,
|
|
192
|
+
avgCharWidth: 451,
|
|
193
|
+
fallbackUnitsPerEm: 2048,
|
|
194
|
+
fallbackAvgCharWidth: 983,
|
|
195
|
+
}),
|
|
196
|
+
},
|
|
197
|
+
},
|
|
40
198
|
// Note corresponding font weight in Tailwind is "light"
|
|
41
199
|
{
|
|
42
200
|
'@font-face': {
|
|
@@ -47,6 +205,36 @@ export const webFonts = [
|
|
|
47
205
|
src: 'url(//www.kiva.org/static/fonts/PostGrotesk-Book.246fc8e.woff2) format(\'woff2\')',
|
|
48
206
|
},
|
|
49
207
|
},
|
|
208
|
+
/**
|
|
209
|
+
* Fallback for Post Grotesk Book
|
|
210
|
+
*
|
|
211
|
+
* Post Grotesk Book metrics:
|
|
212
|
+
* - ascent: 927
|
|
213
|
+
* - descent: -252
|
|
214
|
+
* - lineGap: 0
|
|
215
|
+
* - unitsPerEm: 1000
|
|
216
|
+
* - xWidthAvg: 440
|
|
217
|
+
*
|
|
218
|
+
* Arial metrics:
|
|
219
|
+
* - unitsPerEm: 2048
|
|
220
|
+
* - xWidthAvg: 913
|
|
221
|
+
*/
|
|
222
|
+
{
|
|
223
|
+
'@font-face': {
|
|
224
|
+
fontFamily: 'PostGrotesk-fallback',
|
|
225
|
+
src: 'local("Arial")',
|
|
226
|
+
fontWeight: '300',
|
|
227
|
+
...adjustFallbackFont({
|
|
228
|
+
ascent: 927,
|
|
229
|
+
descent: 252,
|
|
230
|
+
lineGap: 0,
|
|
231
|
+
unitsPerEm: 1000,
|
|
232
|
+
avgCharWidth: 440,
|
|
233
|
+
fallbackUnitsPerEm: 2048,
|
|
234
|
+
fallbackAvgCharWidth: 913,
|
|
235
|
+
}),
|
|
236
|
+
},
|
|
237
|
+
},
|
|
50
238
|
// Note corresponding font weight in Tailwind is "light"
|
|
51
239
|
{
|
|
52
240
|
'@font-face': {
|
|
@@ -58,6 +246,37 @@ export const webFonts = [
|
|
|
58
246
|
src: 'url(//www.kiva.org/static/fonts/PostGrotesk-BookItalic.4d06d39.woff2) format(\'woff2\')',
|
|
59
247
|
},
|
|
60
248
|
},
|
|
249
|
+
/**
|
|
250
|
+
* Fallback for Post Grotesk Book Italic
|
|
251
|
+
*
|
|
252
|
+
* Post Grotesk Book Italic metrics:
|
|
253
|
+
* - ascent: 927
|
|
254
|
+
* - descent: -251
|
|
255
|
+
* - lineGap: 0
|
|
256
|
+
* - unitsPerEm: 1000
|
|
257
|
+
* - xWidthAvg: 439
|
|
258
|
+
*
|
|
259
|
+
* Arial Italic metrics:
|
|
260
|
+
* - unitsPerEm: 2048
|
|
261
|
+
* - xWidthAvg: 913
|
|
262
|
+
*/
|
|
263
|
+
{
|
|
264
|
+
'@font-face': {
|
|
265
|
+
fontFamily: 'PostGrotesk-fallback',
|
|
266
|
+
src: 'local("Arial Italic")',
|
|
267
|
+
fontWeight: '300',
|
|
268
|
+
fontStyle: 'italic',
|
|
269
|
+
...adjustFallbackFont({
|
|
270
|
+
ascent: 927,
|
|
271
|
+
descent: 251,
|
|
272
|
+
lineGap: 0,
|
|
273
|
+
unitsPerEm: 1000,
|
|
274
|
+
avgCharWidth: 439,
|
|
275
|
+
fallbackUnitsPerEm: 2048,
|
|
276
|
+
fallbackAvgCharWidth: 913,
|
|
277
|
+
}),
|
|
278
|
+
},
|
|
279
|
+
},
|
|
61
280
|
];
|
|
62
281
|
|
|
63
282
|
/** BASE TEXT COLOR */
|
|
@@ -89,10 +89,8 @@ export default {
|
|
|
89
89
|
16: rem(space['16']),
|
|
90
90
|
},
|
|
91
91
|
fontFamily: {
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
// eslint-disable-next-line max-len
|
|
95
|
-
serif: [`${fonts.serif}, ui-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Palatino', Georgia, 'Times New Roman', serif`],
|
|
92
|
+
sans: [fonts.sans],
|
|
93
|
+
serif: [fonts.serif],
|
|
96
94
|
},
|
|
97
95
|
fontWeight: {
|
|
98
96
|
// Keeping "book" defined here for backwards compatibility
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kiva/kv-tokens",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.5.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -15,5 +15,5 @@
|
|
|
15
15
|
"@tailwindcss/typography": "^0.5.1",
|
|
16
16
|
"tailwindcss": "^3.4.3"
|
|
17
17
|
},
|
|
18
|
-
"gitHead": "
|
|
18
|
+
"gitHead": "15bdecc29426c24efdaafb35efc0aa4f19e5a56f"
|
|
19
19
|
}
|
package/primitives.js
CHANGED
|
@@ -414,8 +414,10 @@ export default {
|
|
|
414
414
|
16: 128,
|
|
415
415
|
},
|
|
416
416
|
fonts: {
|
|
417
|
-
|
|
418
|
-
|
|
417
|
+
// eslint-disable-next-line max-len
|
|
418
|
+
sans: "PostGrotesk, PostGrotesk-fallback, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif",
|
|
419
|
+
// eslint-disable-next-line max-len
|
|
420
|
+
serif: "dovetail-mvb, dovetail-mvb-fallback, ui-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Palatino', Georgia, 'Times New Roman', serif",
|
|
419
421
|
},
|
|
420
422
|
fontSizes: {
|
|
421
423
|
base: {
|