@ni/nimble-tokens 4.7.1 → 4.7.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.
- package/dist/fonts/README.md +2 -0
- package/dist/fonts/scss/fonts.scss +63 -0
- package/package.json +4 -3
package/dist/fonts/README.md
CHANGED
|
@@ -11,6 +11,8 @@ Converted to WOFF2 format using [a tff to woff2](https://everythingfonts.com/ttf
|
|
|
11
11
|
|
|
12
12
|
New font assets should be added to the `nimble-tokens/dist/fonts/assets` directory and referenced in from `nimble-tokens/dist/fonts/css/fonts.css` so that they will be loaded by applications using nimble.
|
|
13
13
|
|
|
14
|
+
A `nimble-tokens/dist/fonts/scss/fonts.scss` will be generated by the `npm run build` command automatically from the `fonts.css` file contents.
|
|
15
|
+
|
|
14
16
|
## Fallback fonts
|
|
15
17
|
|
|
16
18
|
When adding new fonts, you should also create size-adjusted fallback fonts to use with them. Follow the pattern being used in `nimble-tokens/dist/fonts/css/fonts.css` to define new `@font-face`s that utilize the `size-adjust` descriptor. There is an [online tool](https://www.industrialempathy.com/perfect-ish-font-fallback/) you can use to automatically select a value for `size-adjust` which the tool's author says is sufficient to avoid cumulative layout shift. (There are also `ascent-override`, `descent-override`, and `line-gap-override` descriptors, but we don't need to use those.) For different `font-weight` versions of the fallback font, you can use the same `size-adjust` value.
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
@font-face {
|
|
2
|
+
font-family: 'Source Sans Pro';
|
|
3
|
+
font-style: normal;
|
|
4
|
+
font-weight: 400;
|
|
5
|
+
src: url('../assets/SourceSansPro-Regular.woff2') format('woff2');
|
|
6
|
+
font-display: swap;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
@font-face {
|
|
10
|
+
font-family: "Source Sans Pro Fallback";
|
|
11
|
+
font-style: normal;
|
|
12
|
+
font-weight: 400;
|
|
13
|
+
size-adjust: 93.75%;
|
|
14
|
+
src: local("Arial");
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@font-face {
|
|
18
|
+
font-family: 'Source Sans Pro';
|
|
19
|
+
font-style: normal;
|
|
20
|
+
font-weight: 300;
|
|
21
|
+
src: url('../assets/SourceSansPro-Light.woff2') format('woff2');
|
|
22
|
+
font-display: swap;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
@font-face {
|
|
26
|
+
font-family: "Source Sans Pro Fallback";
|
|
27
|
+
font-style: normal;
|
|
28
|
+
font-weight: 300;
|
|
29
|
+
size-adjust: 93.75%;
|
|
30
|
+
src: local("Arial");
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@font-face {
|
|
34
|
+
font-family: 'Source Sans Pro';
|
|
35
|
+
font-style: normal;
|
|
36
|
+
font-weight: 600;
|
|
37
|
+
src: url('../assets/SourceSansPro-SemiBold.woff2') format('woff2');
|
|
38
|
+
font-display: swap;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
@font-face {
|
|
42
|
+
font-family: "Source Sans Pro Fallback";
|
|
43
|
+
font-style: normal;
|
|
44
|
+
font-weight: 600;
|
|
45
|
+
size-adjust: 93.75%;
|
|
46
|
+
src: local("Arial");
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
@font-face {
|
|
50
|
+
font-family: 'Noto Serif';
|
|
51
|
+
font-style: normal;
|
|
52
|
+
font-weight: 400;
|
|
53
|
+
src: url('../assets/NotoSerif-Regular.woff2') format('woff2');
|
|
54
|
+
font-display: swap;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
@font-face {
|
|
58
|
+
font-family: "Noto Serif Fallback";
|
|
59
|
+
font-style: normal;
|
|
60
|
+
font-weight: 400;
|
|
61
|
+
size-adjust: 119%;
|
|
62
|
+
src: local("Times New Roman");
|
|
63
|
+
}
|
package/package.json
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/nimble-tokens",
|
|
3
|
-
"version": "4.7.
|
|
3
|
+
"version": "4.7.3",
|
|
4
4
|
"description": "Design tokens for the NI Nimble Design System",
|
|
5
5
|
"scripts": {
|
|
6
|
-
"build": "npm run build:svg-to-ts && npm run build:ts && npm run build:svg-to-ico",
|
|
6
|
+
"build": "npm run build:svg-to-ts && npm run build:ts && npm run build:svg-to-ico && npm run build:generate-font-scss",
|
|
7
7
|
"build:svg-to-ts": "svg-to-ts-constants --config build/svg-to-ts-config.js",
|
|
8
8
|
"build:svg-to-ico": "node build/svg-to-ico.js",
|
|
9
|
+
"build:generate-font-scss": "node build/generate-font-scss.js",
|
|
9
10
|
"build:ts": "tsc -p ./tsconfig.json",
|
|
10
11
|
"build:ts:watch": "tsc -p ./tsconfig.json -w",
|
|
11
12
|
"format": "eslint . --fix",
|
|
@@ -39,7 +40,7 @@
|
|
|
39
40
|
"style-dictionary": "3.7.2",
|
|
40
41
|
"svg-to-ico": "^1.0.11",
|
|
41
42
|
"svg-to-ts": "^9.0.0",
|
|
42
|
-
"typescript": "~4.
|
|
43
|
+
"typescript": "~4.7.4"
|
|
43
44
|
},
|
|
44
45
|
"files": [
|
|
45
46
|
"dist/styledictionary/css/**",
|