@ni/nimble-tokens 4.1.3 → 4.2.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/README.md +2 -2
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -40,7 +40,7 @@ The tokens are available in several formats:
|
|
|
40
40
|
|
|
41
41
|
Tokens like colors, font families, and spacing are available as CSS and SCSS variables.
|
|
42
42
|
|
|
43
|
-
1. Assuming your application uses the [Webpack css-loader](https://webpack.js.org/loaders/css-loader/#url), in your application CSS, add `@import url('
|
|
43
|
+
1. Assuming your application uses the [Webpack css-loader](https://webpack.js.org/loaders/css-loader/#url), in your application CSS, add `@import url('@ni/nimble-tokens/dist/styledictionary/css/variables.css');` (replacing `css` with `scss` as needed).
|
|
44
44
|
2. Use the variables from that file to style your UI:
|
|
45
45
|
```css
|
|
46
46
|
body { background-color: var(--ni-nimble-base-white); }
|
|
@@ -48,7 +48,7 @@ body { background-color: var(--ni-nimble-base-white); }
|
|
|
48
48
|
|
|
49
49
|
#### JavaScript and TypeScript
|
|
50
50
|
|
|
51
|
-
Tokens like colors, font families, and spacing are also available as JavaScript and TypeScript string constants.
|
|
51
|
+
Tokens like colors, font families, and spacing are also available as JavaScript and TypeScript string constants.
|
|
52
52
|
- colors are represented as hex RGB strings like: `#ff8126`
|
|
53
53
|
- font families and fallbacks are represented as comma separated strings like: `Roboto, Microsoft YaHei, Hiragino Kaku Gothic Pro, sans-serif`
|
|
54
54
|
- spacing is represented in CSS units like: `12px`
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/nimble-tokens",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.2.0",
|
|
4
4
|
"description": "Design tokens for the NI Nimble Design System",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "npm run build:svg-to-ts && npm run build:ts && npm run build:svg-to-ico",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
},
|
|
30
30
|
"homepage": "https://github.com/ni/nimble#readme",
|
|
31
31
|
"devDependencies": {
|
|
32
|
-
"@ni/eslint-config-javascript": "^
|
|
32
|
+
"@ni/eslint-config-javascript": "^4.0.0",
|
|
33
33
|
"cross-env": "^7.0.3",
|
|
34
34
|
"glob": "^8.0.1",
|
|
35
35
|
"hex-rgb": "4.3.0",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"style-dictionary": "3.7.0",
|
|
38
38
|
"svg-to-ico": "1.0.8",
|
|
39
39
|
"svg-to-ts": "^6.0.1",
|
|
40
|
-
"typescript": "
|
|
40
|
+
"typescript": "~4.6.4"
|
|
41
41
|
},
|
|
42
42
|
"files": [
|
|
43
43
|
"dist/styledictionary/css/**",
|