@ni/nimble-tokens 3.0.13 → 3.2.1

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 (9) hide show
  1. package/README.md +4 -0
  2. package/dist/styledictionary/css/variables.css +17 -3
  3. package/dist/styledictionary/js/tokens.d.ts +17 -3
  4. package/dist/styledictionary/js/tokens.js +18 -4
  5. package/dist/styledictionary/properties/colors.json +9 -0
  6. package/dist/styledictionary/properties/custom.json +5 -1
  7. package/dist/styledictionary/properties/fonts.json +11 -0
  8. package/dist/styledictionary/scss/variables.scss +18 -4
  9. package/package.json +6 -3
package/README.md CHANGED
@@ -65,6 +65,10 @@ Tokens values are also available as:
65
65
  - [C# strings](/packages/nimble-tokens/dist/styledictionary/csharp/colors.cs)
66
66
  - [XAML resources](/packages/nimble-tokens/dist/styledictionary/xaml/colors.xaml)
67
67
 
68
+ #### Icons
69
+
70
+ Icons are included in the `nimble-tokens` package, but (like tokens) icons should primarily consumed through framework-specific components. If your desktop application requires icons as `.ico` files, ask a Nimble team member for a copy of the `NimbleTokens.x.x.xx.nupkg` file.
71
+
68
72
 
69
73
  #### Font Faces
70
74
 
package/dist/styledictionary/css/variables.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 01 Mar 2022 15:26:47 GMT
3
+ * Generated on Tue, 10 May 2022 14:21:51 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -37,6 +37,17 @@
37
37
  --ni-nimble-base-digital-green-dark: #006b46;
38
38
  --ni-nimble-base-power-green: #32eb96;
39
39
  --ni-nimble-base-black-22: #e6e6e6;
40
+ --ni-nimble-base-cmyk-ni-pale-green: #ccdcc8;
41
+ --ni-nimble-base-rgb-ni-pale-green: #cddcc8;
42
+ --ni-nimble-base-rgb-ni-forest-green: #044123;
43
+ --ni-nimble-base-cmyk-ni-nickel: #aea19a;
44
+ --ni-nimble-base-cmyk-ni-forest-green: #044123;
45
+ --ni-nimble-base-rgb-ni-green: #03b585;
46
+ --ni-nimble-base-cmyk-ni-green: #03b585;
47
+ --ni-nimble-base-cmyk-ni-honey-dark-3: #292011;
48
+ --ni-nimble-base-black-82: #434445;
49
+ --ni-nimble-base-indigo-dark-1: #57539e;
50
+ --ni-nimble-base-indigo-dark-2: #312e7f;
40
51
  --ni-nimble-base-title-2-family: Source Sans Pro;
41
52
  --ni-nimble-base-title-2-weight: 400;
42
53
  --ni-nimble-base-control-label-1-family: Source Sans Pro;
@@ -77,7 +88,6 @@
77
88
  --ni-nimble-base-link-light-ui-weight: 400;
78
89
  --ni-nimble-base-headline-1-family: Noto Serif;
79
90
  --ni-nimble-base-headline-1-weight: 400;
80
- --ni-nimble-base-legacy-content-family: 'Roboto', 'Microsoft YaHei', 'Hiragino Kaku Gothic Pro', sans-serif;
81
91
  --ni-nimble-base-control-label-1-chinese-mac-family: Noto Sans;
82
92
  --ni-nimble-base-control-label-1-chinese-mac-weight: 700;
83
93
  --ni-nimble-base-button-label-1-chinese-mac-family: Noto Sans;
@@ -94,6 +104,8 @@
94
104
  --ni-nimble-base-error-dark-ui-weight: 400;
95
105
  --ni-nimble-base-link-selection-100-light-ui-family: Source Sans Pro;
96
106
  --ni-nimble-base-link-selection-100-light-ui-weight: 400;
107
+ --ni-nimble-base-grid-header-family: Source Sans Pro;
108
+ --ni-nimble-base-grid-header-weight: 600;
97
109
  --ni-nimble-base-title-2-size: 22px;
98
110
  --ni-nimble-base-control-label-1-size: 11px;
99
111
  --ni-nimble-base-body-size: 14px;
@@ -122,6 +134,7 @@
122
134
  --ni-nimble-base-error-light-ui-size: 9px;
123
135
  --ni-nimble-base-error-dark-ui-size: 9px;
124
136
  --ni-nimble-base-link-selection-100-light-ui-size: 14px;
137
+ --ni-nimble-base-grid-header-size: 12.800000190734863px;
125
138
  --ni-nimble-base-body-line-height: 18px;
126
139
  --ni-nimble-base-control-label-1-line-height: 16px;
127
140
  --ni-nimble-base-group-label-1-line-height: 16px;
@@ -137,6 +150,7 @@
137
150
  --ni-nimble-base-body-emphasized-line-height: 18px;
138
151
  --ni-nimble-base-button-label-1-line-height: 16px;
139
152
  --ni-nimble-base-tooltip-caption-line-height: 14px;
140
- --ni-nimble-base-small-delay: 0.1s; /* Short animation delay used for control state change animation */
153
+ --ni-nimble-base-small-delay: 0.075s; /* Short animation delay used for control state change animation */
141
154
  --ni-nimble-base-medium-delay: 0.15s; /* Medium animation delay for control state change animation */
155
+ --ni-nimble-base-large-delay: 0.25s; /* Long animation delay used for control state change animation */
142
156
  }
package/dist/styledictionary/js/tokens.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 01 Mar 2022 15:26:47 GMT
3
+ * Generated on Tue, 10 May 2022 14:21:51 GMT
4
4
  */
5
5
 
6
6
  export const SlLegacyBlue : string;
@@ -36,6 +36,17 @@ export const Black50 : string;
36
36
  export const DigitalGreenDark : string;
37
37
  export const PowerGreen : string;
38
38
  export const Black22 : string;
39
+ export const CmykNiPaleGreen : string;
40
+ export const RgbNiPaleGreen : string;
41
+ export const RgbNiForestGreen : string;
42
+ export const CmykNiNickel : string;
43
+ export const CmykNiForestGreen : string;
44
+ export const RgbNiGreen : string;
45
+ export const CmykNiGreen : string;
46
+ export const CmykNiHoneyDark3 : string;
47
+ export const Black82 : string;
48
+ export const IndigoDark1 : string;
49
+ export const IndigoDark2 : string;
39
50
  export const Title2Family : string;
40
51
  export const Title2Weight : string;
41
52
  export const ControlLabel1Family : string;
@@ -76,7 +87,6 @@ export const LinkLightUiFamily : string;
76
87
  export const LinkLightUiWeight : string;
77
88
  export const Headline1Family : string;
78
89
  export const Headline1Weight : string;
79
- export const LegacyContentFamily : string;
80
90
  export const ControlLabel1ChineseMacFamily : string;
81
91
  export const ControlLabel1ChineseMacWeight : string;
82
92
  export const ButtonLabel1ChineseMacFamily : string;
@@ -93,6 +103,8 @@ export const ErrorDarkUiFamily : string;
93
103
  export const ErrorDarkUiWeight : string;
94
104
  export const LinkSelection100LightUiFamily : string;
95
105
  export const LinkSelection100LightUiWeight : string;
106
+ export const GridHeaderFamily : string;
107
+ export const GridHeaderWeight : string;
96
108
  export const Title2Size : string;
97
109
  export const ControlLabel1Size : string;
98
110
  export const BodySize : string;
@@ -121,6 +133,7 @@ export const LinkVisitedLightUiSize : string;
121
133
  export const ErrorLightUiSize : string;
122
134
  export const ErrorDarkUiSize : string;
123
135
  export const LinkSelection100LightUiSize : string;
136
+ export const GridHeaderSize : string;
124
137
  export const BodyLineHeight : string;
125
138
  export const ControlLabel1LineHeight : string;
126
139
  export const GroupLabel1LineHeight : string;
@@ -137,4 +150,5 @@ export const BodyEmphasizedLineHeight : string;
137
150
  export const ButtonLabel1LineHeight : string;
138
151
  export const TooltipCaptionLineHeight : string;
139
152
  export const SmallDelay : string; // Short animation delay used for control state change animation
140
- export const MediumDelay : string; // Medium animation delay for control state change animation
153
+ export const MediumDelay : string; // Medium animation delay for control state change animation
154
+ export const LargeDelay : string; // Long animation delay used for control state change animation
package/dist/styledictionary/js/tokens.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 01 Mar 2022 15:26:47 GMT
3
+ * Generated on Tue, 10 May 2022 14:21:51 GMT
4
4
  */
5
5
 
6
6
  export const SlLegacyBlue = "#009ff5";
@@ -36,6 +36,17 @@ export const Black50 = "#aeb0b3";
36
36
  export const DigitalGreenDark = "#006b46";
37
37
  export const PowerGreen = "#32eb96";
38
38
  export const Black22 = "#e6e6e6";
39
+ export const CmykNiPaleGreen = "#ccdcc8";
40
+ export const RgbNiPaleGreen = "#cddcc8";
41
+ export const RgbNiForestGreen = "#044123";
42
+ export const CmykNiNickel = "#aea19a";
43
+ export const CmykNiForestGreen = "#044123";
44
+ export const RgbNiGreen = "#03b585";
45
+ export const CmykNiGreen = "#03b585";
46
+ export const CmykNiHoneyDark3 = "#292011";
47
+ export const Black82 = "#434445";
48
+ export const IndigoDark1 = "#57539e";
49
+ export const IndigoDark2 = "#312e7f";
39
50
  export const Title2Family = "Source Sans Pro";
40
51
  export const Title2Weight = "400";
41
52
  export const ControlLabel1Family = "Source Sans Pro";
@@ -76,7 +87,6 @@ export const LinkLightUiFamily = "Source Sans Pro";
76
87
  export const LinkLightUiWeight = "400";
77
88
  export const Headline1Family = "Noto Serif";
78
89
  export const Headline1Weight = "400";
79
- export const LegacyContentFamily = "'Roboto', 'Microsoft YaHei', 'Hiragino Kaku Gothic Pro', sans-serif";
80
90
  export const ControlLabel1ChineseMacFamily = "Noto Sans";
81
91
  export const ControlLabel1ChineseMacWeight = "700";
82
92
  export const ButtonLabel1ChineseMacFamily = "Noto Sans";
@@ -93,6 +103,8 @@ export const ErrorDarkUiFamily = "Source Sans Pro";
93
103
  export const ErrorDarkUiWeight = "400";
94
104
  export const LinkSelection100LightUiFamily = "Source Sans Pro";
95
105
  export const LinkSelection100LightUiWeight = "400";
106
+ export const GridHeaderFamily = "Source Sans Pro";
107
+ export const GridHeaderWeight = "600";
96
108
  export const Title2Size = "22px";
97
109
  export const ControlLabel1Size = "11px";
98
110
  export const BodySize = "14px";
@@ -121,6 +133,7 @@ export const LinkVisitedLightUiSize = "14px";
121
133
  export const ErrorLightUiSize = "9px";
122
134
  export const ErrorDarkUiSize = "9px";
123
135
  export const LinkSelection100LightUiSize = "14px";
136
+ export const GridHeaderSize = "12.800000190734863px";
124
137
  export const BodyLineHeight = "18px";
125
138
  export const ControlLabel1LineHeight = "16px";
126
139
  export const GroupLabel1LineHeight = "16px";
@@ -136,5 +149,6 @@ export const PlaceholderLineHeight = "18px";
136
149
  export const BodyEmphasizedLineHeight = "18px";
137
150
  export const ButtonLabel1LineHeight = "16px";
138
151
  export const TooltipCaptionLineHeight = "14px";
139
- export const SmallDelay = "0.1s"; // Short animation delay used for control state change animation
140
- export const MediumDelay = "0.15s"; // Medium animation delay for control state change animation
152
+ export const SmallDelay = "0.075s"; // Short animation delay used for control state change animation
153
+ export const MediumDelay = "0.15s"; // Medium animation delay for control state change animation
154
+ export const LargeDelay = "0.25s"; // Long animation delay used for control state change animation
package/dist/styledictionary/properties/colors.json CHANGED
@@ -122,6 +122,15 @@
122
122
  },
123
123
  "CMYK NI Honey Dark 3": {
124
124
  "value": "#292011ff"
125
+ },
126
+ "Black82": {
127
+ "value": "#434445ff"
128
+ },
129
+ "IndigoDark1": {
130
+ "value": "#57539Eff"
131
+ },
132
+ "IndigoDark2": {
133
+ "value": "#312E7Fff"
125
134
  }
126
135
  }
127
136
  }
package/dist/styledictionary/properties/custom.json CHANGED
@@ -1,12 +1,16 @@
1
1
  {
2
2
  "custom": {
3
3
  "small-delay": {
4
- "value": "0.1s",
4
+ "value": "0.075s",
5
5
  "comment": "Short animation delay used for control state change animation"
6
6
  },
7
7
  "medium-delay": {
8
8
  "value": "0.15s",
9
9
  "comment": "Medium animation delay for control state change animation"
10
+ },
11
+ "large-delay": {
12
+ "value": "0.25s",
13
+ "comment": "Long animation delay used for control state change animation"
10
14
  }
11
15
  }
12
16
  }
package/dist/styledictionary/properties/fonts.json CHANGED
@@ -223,6 +223,14 @@
223
223
  "weight": {
224
224
  "value": "Regular"
225
225
  }
226
+ },
227
+ "Grid_Header": {
228
+ "family": {
229
+ "value": "Source Sans Pro"
230
+ },
231
+ "weight": {
232
+ "value": "Semibold"
233
+ }
226
234
  }
227
235
  },
228
236
  "size": {
@@ -310,6 +318,9 @@
310
318
  },
311
319
  "Link_Selection100_LightUI": {
312
320
  "value": "14"
321
+ },
322
+ "Grid_Header": {
323
+ "value": "12.800000190734863"
313
324
  }
314
325
  }
315
326
  }
package/dist/styledictionary/scss/variables.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 01 Mar 2022 15:26:47 GMT
3
+ // Generated on Tue, 10 May 2022 14:21:51 GMT
4
4
 
5
5
  $ni-nimble-base-sl-legacy-blue: #009ff5;
6
6
  $ni-nimble-base-information-100-dark-ui: #a46eff;
@@ -35,6 +35,17 @@ $ni-nimble-base-black-50: #aeb0b3;
35
35
  $ni-nimble-base-digital-green-dark: #006b46;
36
36
  $ni-nimble-base-power-green: #32eb96;
37
37
  $ni-nimble-base-black-22: #e6e6e6;
38
+ $ni-nimble-base-cmyk-ni-pale-green: #ccdcc8;
39
+ $ni-nimble-base-rgb-ni-pale-green: #cddcc8;
40
+ $ni-nimble-base-rgb-ni-forest-green: #044123;
41
+ $ni-nimble-base-cmyk-ni-nickel: #aea19a;
42
+ $ni-nimble-base-cmyk-ni-forest-green: #044123;
43
+ $ni-nimble-base-rgb-ni-green: #03b585;
44
+ $ni-nimble-base-cmyk-ni-green: #03b585;
45
+ $ni-nimble-base-cmyk-ni-honey-dark-3: #292011;
46
+ $ni-nimble-base-black-82: #434445;
47
+ $ni-nimble-base-indigo-dark-1: #57539e;
48
+ $ni-nimble-base-indigo-dark-2: #312e7f;
38
49
  $ni-nimble-base-title-2-family: Source Sans Pro;
39
50
  $ni-nimble-base-title-2-weight: 400;
40
51
  $ni-nimble-base-control-label-1-family: Source Sans Pro;
@@ -75,7 +86,6 @@ $ni-nimble-base-link-light-ui-family: Source Sans Pro;
75
86
  $ni-nimble-base-link-light-ui-weight: 400;
76
87
  $ni-nimble-base-headline-1-family: Noto Serif;
77
88
  $ni-nimble-base-headline-1-weight: 400;
78
- $ni-nimble-base-legacy-content-family: 'Roboto', 'Microsoft YaHei', 'Hiragino Kaku Gothic Pro', sans-serif;
79
89
  $ni-nimble-base-control-label-1-chinese-mac-family: Noto Sans;
80
90
  $ni-nimble-base-control-label-1-chinese-mac-weight: 700;
81
91
  $ni-nimble-base-button-label-1-chinese-mac-family: Noto Sans;
@@ -92,6 +102,8 @@ $ni-nimble-base-error-dark-ui-family: Source Sans Pro;
92
102
  $ni-nimble-base-error-dark-ui-weight: 400;
93
103
  $ni-nimble-base-link-selection-100-light-ui-family: Source Sans Pro;
94
104
  $ni-nimble-base-link-selection-100-light-ui-weight: 400;
105
+ $ni-nimble-base-grid-header-family: Source Sans Pro;
106
+ $ni-nimble-base-grid-header-weight: 600;
95
107
  $ni-nimble-base-title-2-size: 22px;
96
108
  $ni-nimble-base-control-label-1-size: 11px;
97
109
  $ni-nimble-base-body-size: 14px;
@@ -120,6 +132,7 @@ $ni-nimble-base-link-visited-light-ui-size: 14px;
120
132
  $ni-nimble-base-error-light-ui-size: 9px;
121
133
  $ni-nimble-base-error-dark-ui-size: 9px;
122
134
  $ni-nimble-base-link-selection-100-light-ui-size: 14px;
135
+ $ni-nimble-base-grid-header-size: 12.800000190734863px;
123
136
  $ni-nimble-base-body-line-height: 18px;
124
137
  $ni-nimble-base-control-label-1-line-height: 16px;
125
138
  $ni-nimble-base-group-label-1-line-height: 16px;
@@ -135,5 +148,6 @@ $ni-nimble-base-placeholder-line-height: 18px;
135
148
  $ni-nimble-base-body-emphasized-line-height: 18px;
136
149
  $ni-nimble-base-button-label-1-line-height: 16px;
137
150
  $ni-nimble-base-tooltip-caption-line-height: 14px;
138
- $ni-nimble-base-small-delay: 0.1s; // Short animation delay used for control state change animation
139
- $ni-nimble-base-medium-delay: 0.15s; // Medium animation delay for control state change animation
151
+ $ni-nimble-base-small-delay: 0.075s; // Short animation delay used for control state change animation
152
+ $ni-nimble-base-medium-delay: 0.15s; // Medium animation delay for control state change animation
153
+ $ni-nimble-base-large-delay: 0.25s; // Long animation delay used for control state change animation
package/package.json CHANGED
@@ -1,10 +1,11 @@
1
1
  {
2
2
  "name": "@ni/nimble-tokens",
3
- "version": "3.0.13",
3
+ "version": "3.2.1",
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",
6
+ "build": "npm run build:svg-to-ts && npm run build:ts && npm run build:svg-to-ico",
7
7
  "build:svg-to-ts": "svg-to-ts --config source/build/svg-to-ts-config.js",
8
+ "build:svg-to-ico": "node source/build/svg-to-ico.js",
8
9
  "build:ts": "tsc -p ./tsconfig.json",
9
10
  "build:ts:watch": "tsc -p ./tsconfig.json -w",
10
11
  "pack": "npm run pack:npm && npm run pack:nuget",
@@ -28,8 +29,10 @@
28
29
  "devDependencies": {
29
30
  "@ni/eslint-config-javascript": "^3.1.0",
30
31
  "cross-env": "^7.0.3",
31
- "hex-rgb": "^4.0.0",
32
+ "glob": "^8.0.1",
33
+ "hex-rgb": "^5.0.0",
32
34
  "style-dictionary": "^3.7.0",
35
+ "svg-to-ico": "1.0.8",
33
36
  "svg-to-ts": "^6.0.1",
34
37
  "typescript": "^4.3.2"
35
38
  },