@ni/nimble-tokens 1.0.0-beta.34 → 1.0.0-beta.38

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.
Files changed (6) hide show
  1. package/README.md +55 -2
  2. package/dist/styledictionary/css/variables.css +94 -94
  3. package/dist/styledictionary/js/tokens.d.ts +1 -1
  4. package/dist/styledictionary/js/tokens.js +1 -1
  5. package/dist/styledictionary/scss/variables.scss +94 -48
  6. package/package.json +3 -3
package/README.md CHANGED
@@ -6,16 +6,69 @@
6
6
 
7
7
  [![NPM Version](https://img.shields.io/npm/v/@ni/nimble-tokens.svg)](https://www.npmjs.com/package/@ni/nimble-tokens)
8
8
 
9
- NI design tokens to use across NI applications. Design tokens are primitive elements of component style like color, typography, and spacing.
9
+ NI base design tokens. Design tokens are primitive elements of component style like color, typography, and spacing.
10
10
 
11
11
  ## Getting Started
12
12
 
13
- If you are using one of the following frameworks you should consume tokens via components implemented in the following libraries:
13
+ If you are using one of the following frameworks you should consume tokens via components implemented in the following libraries. These libraries provide styled components that use the design tokens to implement several color themes.
14
14
 
15
15
  1. Angular: See the [nimble-angular](/angular-workspace/projects/ni/nimble-angular) documentation.
16
16
  2. Blazor WebAssembly or Blazor Server: See the [nimble-blazor](/packages/nimble-blazor) documentation.
17
17
  3. Vanilla / Frameworkless: See the [nimble-components](/packages/nimble-components) documentation.
18
18
 
19
+ ## Using Theme-Aware Tokens
20
+
21
+ The above libraries also offer a theming system which is independent of other components from the library. Adopting this theming system can be a cheaper way to update a legacy application to approximate the NI brand without the development and testing burden of adopting a new component library. Applications should typically use this theming system rather than depending on `nimble-tokens` directly. See [the theming documentation in `nimble-components`](/packages/nimble-components/README.md#theming) for more information.
22
+
23
+ ## Using Nimble Base Tokens Directly
24
+
25
+ In limited special cases, you may consume base Nimble tokens directly. This is only recommended in cases where the theme-aware tokens don't work (for example desktop applications or legacy browsers that don't support custom elements) as these tokens are unaware of themes and don't contain guidance mapping them to specific component parts.
26
+
27
+ To add the Nimble tokens package to your application, install it from [the public NPM registry](https://www.npmjs.com/package/@ni/nimble-tokens) by running `npm install @ni/nimble-tokens`.
28
+
29
+ ### Understanding Base Color Tokens
30
+
31
+ You can [view the available color tokens here](https://xd.adobe.com/view/8ce280ab-1559-4961-945c-182955c7780b-d9b1/screen/fed406fd-7568-40a9-8b1a-359f54c23186/). To understand their meaning, explore other pages of the document in Specs Mode (click the `</>` icon on the right side) and view how color tokens are applied to Nimble components.
32
+
33
+ ### Using Base Tokens
34
+
35
+ The tokens are available in several formats:
36
+
37
+ #### CSS and SCSS variables
38
+
39
+ Tokens like colors, font families, and spacing are available as CSS and SCSS variables.
40
+
41
+ 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).
42
+ 2. Use the variables from that file to style your UI:
43
+ ```css
44
+ body { background-color: var(--ni-nimble-base-white); }
45
+ ```
46
+
47
+ #### JavaScript and TypeScript
48
+
49
+ Tokens like colors, font families, and spacing are also available as JavaScript and TypeScript string constants.
50
+ - colors are represented as hex RGB strings like `"#ff8126"`
51
+ - font families and fallbacks are represented as comma separated strings like `"'Roboto', 'Microsoft YaHei', 'Hiragino Kaku Gothic Pro', sans-serif"`
52
+ - spacing is represented in CSS units like `"12px"`
53
+
54
+ In your application JavaScript or TypeScript code, import the token strings you want to use:
55
+
56
+ ```js
57
+ import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
58
+ ```
59
+
60
+ #### Other formats
61
+
62
+ Tokens values are also available as:
63
+ - [C# strings](/packages/nimble-tokens/dist/styledictionary/csharp/colors.cs)
64
+ - [XAML resources](/packages/nimble-tokens/dist/styledictionary/xaml/colors.xaml)
65
+
66
+
67
+ #### Font Faces
68
+
69
+ Nimble provides font definitions for every font family used by a token. To ensure these fonts are available to your application, include `'@ni/nimble-tokens/source/fonts.css'` in your application code.
70
+
71
+
19
72
  ## Contributing
20
73
 
21
74
  Follow the instructions in [CONTRIBUTING.md](/packages/nimble-tokens/CONTRIBUTING.md) to modify this library.
package/dist/styledictionary/css/variables.css CHANGED
@@ -1,100 +1,100 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 24 Nov 2021 20:33:32 GMT
3
+ * Generated on Thu, 13 Jan 2022 15:57:37 GMT
4
4
  */
5
5
 
6
6
  :root {
7
- --sl-legacy-blue: #009ff5;
8
- --information-100-dark-ui: #a46eff;
9
- --information-100-light-ui: #804ad9;
10
- --warning-100-dark-ui: #ff8126;
11
- --pass-100-light-ui: #009921;
12
- --pass-100-dark-ui: #00c12b;
13
- --warning-typography-light-ui: #d3440d;
14
- --pass-typography-light-ui: #00801c;
15
- --fail-100-light-ui: #c4000c;
16
- --fail-100-dark-ui: #ff4646;
17
- --black-75: #818386;
18
- --black-15: #f1f1f2;
19
- --black-7: #f5f5f5;
20
- --white: #ffffff;
21
- --black-88: #252526;
22
- --black-85: #363738;
23
- --black-80: #505153;
24
- --black: #000000;
25
- --black-95: #0e0f0f;
26
- --black-91: #161617;
27
- --enterprise: #074023;
28
- --selection-100: #00b888;
29
- --brand-85: #26a97c;
30
- --brand-100: #009b65;
31
- --fail-85: #cf1a37;
32
- --rgb-ni-sky: #3cb4e7;
33
- --banner-fail-100-dark-ui: #d63434;
34
- --warning-100-light-ui: #ff4b00;
35
- --black-30: #d3d5d6;
36
- --black-50: #aeb0b3;
37
- --title-2-family: Source Sans Pro;
38
- --title-2-weight: 400;
39
- --control-label-1-family: Source Sans Pro;
40
- --control-label-1-weight: 600;
41
- --body-family: Source Sans Pro;
42
- --body-weight: 400;
43
- --header-0-family: Noto Serif;
44
- --header-0-weight: 400;
45
- --sub-header-family: Source Sans Pro;
46
- --sub-header-weight: 400;
47
- --header-1-family: Noto Serif;
48
- --header-1-weight: 400;
49
- --group-label-1-family: Space Mono;
50
- --group-label-1-weight: 400;
51
- --button-label-1-family: Source Sans Pro;
52
- --button-label-1-weight: 400;
53
- --title-1-family: Source Sans Pro;
54
- --title-1-weight: 400;
55
- --link-color-ui-family: Source Sans Pro;
56
- --link-color-ui-weight: 400;
57
- --link-dark-ui-family: Source Sans Pro;
58
- --link-dark-ui-weight: 400;
59
- --headline-2-family: Noto Serif;
60
- --headline-2-weight: 400;
61
- --placeholder-family: Source Sans Pro;
62
- --placeholder-weight: 400;
63
- --tooltip-caption-family: Source Sans Pro;
64
- --tooltip-caption-weight: 400;
65
- --body-emphasized-family: Source Sans Pro;
66
- --body-emphasized-weight: 600;
67
- --subtitle-1-family: Source Sans Pro;
68
- --subtitle-1-weight: 300;
69
- --title-3-family: Source Sans Pro;
70
- --title-3-weight: 400;
71
- --subtitle-2-family: Source Sans Pro;
72
- --subtitle-2-weight: 300;
73
- --link-light-ui-family: Source Sans Pro;
74
- --link-light-ui-weight: 400;
75
- --headline-1-family: Noto Serif;
76
- --headline-1-weight: 400;
77
- --legacy-content-family: 'Roboto', 'Microsoft YaHei', 'Hiragino Kaku Gothic Pro', sans-serif;
78
- --title-2-size: 22px;
79
- --control-label-1-size: 11px;
80
- --body-size: 14px;
81
- --header-0-size: 36px;
82
- --sub-header-size: 12px;
83
- --header-1-size: 24px;
84
- --group-label-1-size: 11px;
85
- --button-label-1-size: 12.800000190734863px;
86
- --title-1-size: 19px;
87
- --link-color-ui-size: 14px;
88
- --link-dark-ui-size: 14px;
89
- --headline-2-size: 29.100000381469727px;
90
- --placeholder-size: 14px;
91
- --tooltip-caption-size: 11px;
92
- --body-emphasized-size: 14px;
93
- --subtitle-1-size: 12.800000190734863px;
94
- --title-3-size: 25px;
95
- --subtitle-2-size: 16px;
96
- --link-light-ui-size: 14px;
97
- --headline-1-size: 25px;
98
- --small-delay: 0.1s; /* Short animation delay used for control state change animation */
99
- --medium-delay: 0.15s; /* Medium animation delay for control state change animation */
7
+ --ni-nimble-base-sl-legacy-blue: #009ff5;
8
+ --ni-nimble-base-information-100-dark-ui: #a46eff;
9
+ --ni-nimble-base-information-100-light-ui: #804ad9;
10
+ --ni-nimble-base-warning-100-dark-ui: #ff8126;
11
+ --ni-nimble-base-pass-100-light-ui: #009921;
12
+ --ni-nimble-base-pass-100-dark-ui: #00c12b;
13
+ --ni-nimble-base-warning-typography-light-ui: #d3440d;
14
+ --ni-nimble-base-pass-typography-light-ui: #00801c;
15
+ --ni-nimble-base-fail-100-light-ui: #c4000c;
16
+ --ni-nimble-base-fail-100-dark-ui: #ff4646;
17
+ --ni-nimble-base-black-75: #818386;
18
+ --ni-nimble-base-black-15: #f1f1f2;
19
+ --ni-nimble-base-black-7: #f5f5f5;
20
+ --ni-nimble-base-white: #ffffff;
21
+ --ni-nimble-base-black-88: #252526;
22
+ --ni-nimble-base-black-85: #363738;
23
+ --ni-nimble-base-black-80: #505153;
24
+ --ni-nimble-base-black: #000000;
25
+ --ni-nimble-base-black-95: #0e0f0f;
26
+ --ni-nimble-base-black-91: #161617;
27
+ --ni-nimble-base-enterprise: #074023;
28
+ --ni-nimble-base-selection-100: #00b888;
29
+ --ni-nimble-base-brand-85: #26a97c;
30
+ --ni-nimble-base-brand-100: #009b65;
31
+ --ni-nimble-base-fail-85: #cf1a37;
32
+ --ni-nimble-base-rgb-ni-sky: #3cb4e7;
33
+ --ni-nimble-base-banner-fail-100-dark-ui: #d63434;
34
+ --ni-nimble-base-warning-100-light-ui: #ff4b00;
35
+ --ni-nimble-base-black-30: #d3d5d6;
36
+ --ni-nimble-base-black-50: #aeb0b3;
37
+ --ni-nimble-base-title-2-family: Source Sans Pro;
38
+ --ni-nimble-base-title-2-weight: 400;
39
+ --ni-nimble-base-control-label-1-family: Source Sans Pro;
40
+ --ni-nimble-base-control-label-1-weight: 600;
41
+ --ni-nimble-base-body-family: Source Sans Pro;
42
+ --ni-nimble-base-body-weight: 400;
43
+ --ni-nimble-base-header-0-family: Noto Serif;
44
+ --ni-nimble-base-header-0-weight: 400;
45
+ --ni-nimble-base-sub-header-family: Source Sans Pro;
46
+ --ni-nimble-base-sub-header-weight: 400;
47
+ --ni-nimble-base-header-1-family: Noto Serif;
48
+ --ni-nimble-base-header-1-weight: 400;
49
+ --ni-nimble-base-group-label-1-family: Space Mono;
50
+ --ni-nimble-base-group-label-1-weight: 400;
51
+ --ni-nimble-base-button-label-1-family: Source Sans Pro;
52
+ --ni-nimble-base-button-label-1-weight: 400;
53
+ --ni-nimble-base-title-1-family: Source Sans Pro;
54
+ --ni-nimble-base-title-1-weight: 400;
55
+ --ni-nimble-base-link-color-ui-family: Source Sans Pro;
56
+ --ni-nimble-base-link-color-ui-weight: 400;
57
+ --ni-nimble-base-link-dark-ui-family: Source Sans Pro;
58
+ --ni-nimble-base-link-dark-ui-weight: 400;
59
+ --ni-nimble-base-headline-2-family: Noto Serif;
60
+ --ni-nimble-base-headline-2-weight: 400;
61
+ --ni-nimble-base-placeholder-family: Source Sans Pro;
62
+ --ni-nimble-base-placeholder-weight: 400;
63
+ --ni-nimble-base-tooltip-caption-family: Source Sans Pro;
64
+ --ni-nimble-base-tooltip-caption-weight: 400;
65
+ --ni-nimble-base-body-emphasized-family: Source Sans Pro;
66
+ --ni-nimble-base-body-emphasized-weight: 600;
67
+ --ni-nimble-base-subtitle-1-family: Source Sans Pro;
68
+ --ni-nimble-base-subtitle-1-weight: 300;
69
+ --ni-nimble-base-title-3-family: Source Sans Pro;
70
+ --ni-nimble-base-title-3-weight: 400;
71
+ --ni-nimble-base-subtitle-2-family: Source Sans Pro;
72
+ --ni-nimble-base-subtitle-2-weight: 300;
73
+ --ni-nimble-base-link-light-ui-family: Source Sans Pro;
74
+ --ni-nimble-base-link-light-ui-weight: 400;
75
+ --ni-nimble-base-headline-1-family: Noto Serif;
76
+ --ni-nimble-base-headline-1-weight: 400;
77
+ --ni-nimble-base-legacy-content-family: 'Roboto', 'Microsoft YaHei', 'Hiragino Kaku Gothic Pro', sans-serif;
78
+ --ni-nimble-base-title-2-size: 22px;
79
+ --ni-nimble-base-control-label-1-size: 11px;
80
+ --ni-nimble-base-body-size: 14px;
81
+ --ni-nimble-base-header-0-size: 36px;
82
+ --ni-nimble-base-sub-header-size: 12px;
83
+ --ni-nimble-base-header-1-size: 24px;
84
+ --ni-nimble-base-group-label-1-size: 11px;
85
+ --ni-nimble-base-button-label-1-size: 12.800000190734863px;
86
+ --ni-nimble-base-title-1-size: 19px;
87
+ --ni-nimble-base-link-color-ui-size: 14px;
88
+ --ni-nimble-base-link-dark-ui-size: 14px;
89
+ --ni-nimble-base-headline-2-size: 29.100000381469727px;
90
+ --ni-nimble-base-placeholder-size: 14px;
91
+ --ni-nimble-base-tooltip-caption-size: 11px;
92
+ --ni-nimble-base-body-emphasized-size: 14px;
93
+ --ni-nimble-base-subtitle-1-size: 12.800000190734863px;
94
+ --ni-nimble-base-title-3-size: 25px;
95
+ --ni-nimble-base-subtitle-2-size: 16px;
96
+ --ni-nimble-base-link-light-ui-size: 14px;
97
+ --ni-nimble-base-headline-1-size: 25px;
98
+ --ni-nimble-base-small-delay: 0.1s; /* Short animation delay used for control state change animation */
99
+ --ni-nimble-base-medium-delay: 0.15s; /* Medium animation delay for control state change animation */
100
100
  }
package/dist/styledictionary/js/tokens.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 24 Nov 2021 20:33:32 GMT
3
+ * Generated on Thu, 13 Jan 2022 15:57:37 GMT
4
4
  */
5
5
 
6
6
  export const SlLegacyBlue : string;
package/dist/styledictionary/js/tokens.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 24 Nov 2021 20:33:32 GMT
3
+ * Generated on Thu, 13 Jan 2022 15:57:37 GMT
4
4
  */
5
5
 
6
6
  export const SlLegacyBlue = "#009ff5";
package/dist/styledictionary/scss/variables.scss CHANGED
@@ -1,51 +1,97 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 26 Aug 2021 18:52:38 GMT
3
+ // Generated on Thu, 13 Jan 2022 15:57:37 GMT
4
4
 
5
- $sl-legacy-blue: #009ff5;
6
- $information-100-dark-ui: #a46eff;
7
- $information-100-light-ui: #804ad9;
8
- $warning-100-dark-ui: #ff8126;
9
- $pass-100-light-ui: #009921;
10
- $pass-100-dark-ui: #00c12b;
11
- $warning-typography-light-ui: #d3440d;
12
- $pass-typography-light-ui: #00801c;
13
- $fail-100-light-ui: #c4000c;
14
- $fail-100-dark-ui: #ff4646;
15
- $black-75: #818386;
16
- $black-15: #f1f1f2;
17
- $black-7: #f5f5f5;
18
- $white: #ffffff;
19
- $black-88: #252526;
20
- $black-85: #363738;
21
- $black-80: #505153;
22
- $black: #000000;
23
- $black-95: #0e0f0f;
24
- $black-91: #161617;
25
- $enterprise: #074023;
26
- $selection-100: #00b888;
27
- $brand-85: #26a97c;
28
- $brand-100: #009b65;
29
- $fail-85: #cf1a37;
30
- $rgb-ni-sky: #3cb4e7;
31
- $banner-fail-100-dark-ui: #b3000c;
32
- $warning-100-light-ui: #ff4b00;
33
- $header-2-family: Source Sans Pro;
34
- $header-2-weight: Light;
35
- $overline-capitalized-family: Space Mono;
36
- $overline-capitalized-weight: Regular;
37
- $body-family: Source Sans Pro;
38
- $body-weight: Regular;
39
- $header-0-family: Noto Serif;
40
- $header-0-weight: Regular;
41
- $sub-header-family: Source Sans Pro;
42
- $sub-header-weight: Regular;
43
- $header-1-family: Noto Serif;
44
- $header-1-weight: Regular;
45
- $header-2-size: 22rem;
46
- $overline-capitalized-size: 11rem;
47
- $body-size: 14rem;
48
- $header-0-size: 36rem;
49
- $sub-header-size: 12rem;
50
- $header-1-size: 24rem;
51
- $small-delay: 0.1s; // Short animation delay used for control state change animation
5
+ $ni-nimble-base-sl-legacy-blue: #009ff5;
6
+ $ni-nimble-base-information-100-dark-ui: #a46eff;
7
+ $ni-nimble-base-information-100-light-ui: #804ad9;
8
+ $ni-nimble-base-warning-100-dark-ui: #ff8126;
9
+ $ni-nimble-base-pass-100-light-ui: #009921;
10
+ $ni-nimble-base-pass-100-dark-ui: #00c12b;
11
+ $ni-nimble-base-warning-typography-light-ui: #d3440d;
12
+ $ni-nimble-base-pass-typography-light-ui: #00801c;
13
+ $ni-nimble-base-fail-100-light-ui: #c4000c;
14
+ $ni-nimble-base-fail-100-dark-ui: #ff4646;
15
+ $ni-nimble-base-black-75: #818386;
16
+ $ni-nimble-base-black-15: #f1f1f2;
17
+ $ni-nimble-base-black-7: #f5f5f5;
18
+ $ni-nimble-base-white: #ffffff;
19
+ $ni-nimble-base-black-88: #252526;
20
+ $ni-nimble-base-black-85: #363738;
21
+ $ni-nimble-base-black-80: #505153;
22
+ $ni-nimble-base-black: #000000;
23
+ $ni-nimble-base-black-95: #0e0f0f;
24
+ $ni-nimble-base-black-91: #161617;
25
+ $ni-nimble-base-enterprise: #074023;
26
+ $ni-nimble-base-selection-100: #00b888;
27
+ $ni-nimble-base-brand-85: #26a97c;
28
+ $ni-nimble-base-brand-100: #009b65;
29
+ $ni-nimble-base-fail-85: #cf1a37;
30
+ $ni-nimble-base-rgb-ni-sky: #3cb4e7;
31
+ $ni-nimble-base-banner-fail-100-dark-ui: #d63434;
32
+ $ni-nimble-base-warning-100-light-ui: #ff4b00;
33
+ $ni-nimble-base-black-30: #d3d5d6;
34
+ $ni-nimble-base-black-50: #aeb0b3;
35
+ $ni-nimble-base-title-2-family: Source Sans Pro;
36
+ $ni-nimble-base-title-2-weight: 400;
37
+ $ni-nimble-base-control-label-1-family: Source Sans Pro;
38
+ $ni-nimble-base-control-label-1-weight: 600;
39
+ $ni-nimble-base-body-family: Source Sans Pro;
40
+ $ni-nimble-base-body-weight: 400;
41
+ $ni-nimble-base-header-0-family: Noto Serif;
42
+ $ni-nimble-base-header-0-weight: 400;
43
+ $ni-nimble-base-sub-header-family: Source Sans Pro;
44
+ $ni-nimble-base-sub-header-weight: 400;
45
+ $ni-nimble-base-header-1-family: Noto Serif;
46
+ $ni-nimble-base-header-1-weight: 400;
47
+ $ni-nimble-base-group-label-1-family: Space Mono;
48
+ $ni-nimble-base-group-label-1-weight: 400;
49
+ $ni-nimble-base-button-label-1-family: Source Sans Pro;
50
+ $ni-nimble-base-button-label-1-weight: 400;
51
+ $ni-nimble-base-title-1-family: Source Sans Pro;
52
+ $ni-nimble-base-title-1-weight: 400;
53
+ $ni-nimble-base-link-color-ui-family: Source Sans Pro;
54
+ $ni-nimble-base-link-color-ui-weight: 400;
55
+ $ni-nimble-base-link-dark-ui-family: Source Sans Pro;
56
+ $ni-nimble-base-link-dark-ui-weight: 400;
57
+ $ni-nimble-base-headline-2-family: Noto Serif;
58
+ $ni-nimble-base-headline-2-weight: 400;
59
+ $ni-nimble-base-placeholder-family: Source Sans Pro;
60
+ $ni-nimble-base-placeholder-weight: 400;
61
+ $ni-nimble-base-tooltip-caption-family: Source Sans Pro;
62
+ $ni-nimble-base-tooltip-caption-weight: 400;
63
+ $ni-nimble-base-body-emphasized-family: Source Sans Pro;
64
+ $ni-nimble-base-body-emphasized-weight: 600;
65
+ $ni-nimble-base-subtitle-1-family: Source Sans Pro;
66
+ $ni-nimble-base-subtitle-1-weight: 300;
67
+ $ni-nimble-base-title-3-family: Source Sans Pro;
68
+ $ni-nimble-base-title-3-weight: 400;
69
+ $ni-nimble-base-subtitle-2-family: Source Sans Pro;
70
+ $ni-nimble-base-subtitle-2-weight: 300;
71
+ $ni-nimble-base-link-light-ui-family: Source Sans Pro;
72
+ $ni-nimble-base-link-light-ui-weight: 400;
73
+ $ni-nimble-base-headline-1-family: Noto Serif;
74
+ $ni-nimble-base-headline-1-weight: 400;
75
+ $ni-nimble-base-legacy-content-family: 'Roboto', 'Microsoft YaHei', 'Hiragino Kaku Gothic Pro', sans-serif;
76
+ $ni-nimble-base-title-2-size: 22px;
77
+ $ni-nimble-base-control-label-1-size: 11px;
78
+ $ni-nimble-base-body-size: 14px;
79
+ $ni-nimble-base-header-0-size: 36px;
80
+ $ni-nimble-base-sub-header-size: 12px;
81
+ $ni-nimble-base-header-1-size: 24px;
82
+ $ni-nimble-base-group-label-1-size: 11px;
83
+ $ni-nimble-base-button-label-1-size: 12.800000190734863px;
84
+ $ni-nimble-base-title-1-size: 19px;
85
+ $ni-nimble-base-link-color-ui-size: 14px;
86
+ $ni-nimble-base-link-dark-ui-size: 14px;
87
+ $ni-nimble-base-headline-2-size: 29.100000381469727px;
88
+ $ni-nimble-base-placeholder-size: 14px;
89
+ $ni-nimble-base-tooltip-caption-size: 11px;
90
+ $ni-nimble-base-body-emphasized-size: 14px;
91
+ $ni-nimble-base-subtitle-1-size: 12.800000190734863px;
92
+ $ni-nimble-base-title-3-size: 25px;
93
+ $ni-nimble-base-subtitle-2-size: 16px;
94
+ $ni-nimble-base-link-light-ui-size: 14px;
95
+ $ni-nimble-base-headline-1-size: 25px;
96
+ $ni-nimble-base-small-delay: 0.1s; // Short animation delay used for control state change animation
97
+ $ni-nimble-base-medium-delay: 0.15s; // Medium animation delay for control state change animation
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ni/nimble-tokens",
3
- "version": "1.0.0-beta.34",
3
+ "version": "1.0.0-beta.38",
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",
@@ -9,7 +9,7 @@
9
9
  "build:ts:watch": "tsc -p ./tsconfig.json -w",
10
10
  "pack": "npm pack",
11
11
  "pack:nuget": "cross-env-shell dotnet pack ./source/NimbleTokens --configuration Release -p:PackageVersion=$npm_package_version",
12
- "publish": "npm publish",
12
+ "invoke-publish": "npm publish",
13
13
  "lint": "eslint ."
14
14
  },
15
15
  "repository": {
@@ -25,7 +25,7 @@
25
25
  },
26
26
  "homepage": "https://github.com/ni/nimble#readme",
27
27
  "devDependencies": {
28
- "@ni/eslint-config-javascript": "^3.0.0",
28
+ "@ni/eslint-config-javascript": "^3.1.0",
29
29
  "cross-env": "^7.0.3",
30
30
  "hex-rgb": "^4.0.0",
31
31
  "style-dictionary": "^3.0.3",