@ni/nimble-components 2.1.3 → 3.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/dist/esm/breadcrumb/index.d.ts +12 -0
- package/dist/esm/breadcrumb/index.js +16 -0
- package/dist/esm/breadcrumb/index.js.map +1 -0
- package/dist/esm/breadcrumb/styles.d.ts +1 -0
- package/dist/esm/breadcrumb/styles.js +25 -0
- package/dist/esm/breadcrumb/styles.js.map +1 -0
- package/dist/esm/breadcrumb-item/index.d.ts +12 -0
- package/dist/esm/breadcrumb-item/index.js +20 -0
- package/dist/esm/breadcrumb-item/index.js.map +1 -0
- package/dist/esm/breadcrumb-item/styles.d.ts +1 -0
- package/dist/esm/breadcrumb-item/styles.js +65 -0
- package/dist/esm/breadcrumb-item/styles.js.map +1 -0
- package/dist/esm/button/index.js +1 -1
- package/dist/esm/button/index.js.map +1 -1
- package/dist/esm/button/styles.d.ts +1 -0
- package/dist/esm/button/styles.js +82 -0
- package/dist/esm/button/styles.js.map +1 -0
- package/dist/esm/checkbox/styles.js +11 -13
- package/dist/esm/checkbox/styles.js.map +1 -1
- package/dist/esm/drawer/index.js +2 -2
- package/dist/esm/drawer/index.js.map +1 -1
- package/dist/esm/drawer/styles.js +4 -6
- package/dist/esm/drawer/styles.js.map +1 -1
- package/dist/esm/icon-base/styles.js +1 -2
- package/dist/esm/icon-base/styles.js.map +1 -1
- package/dist/esm/listbox-option/styles.js +7 -8
- package/dist/esm/listbox-option/styles.js.map +1 -1
- package/dist/esm/menu/styles.js +4 -7
- package/dist/esm/menu/styles.js.map +1 -1
- package/dist/esm/menu-item/styles.js +6 -7
- package/dist/esm/menu-item/styles.js.map +1 -1
- package/dist/esm/nimble-components/src/breadcrumb/index.d.ts +12 -0
- package/dist/esm/nimble-components/src/breadcrumb/styles.d.ts +1 -0
- package/dist/esm/nimble-components/src/breadcrumb-item/index.d.ts +12 -0
- package/dist/esm/nimble-components/src/breadcrumb-item/styles.d.ts +1 -0
- package/dist/esm/nimble-components/src/button/styles.d.ts +1 -0
- package/dist/esm/nimble-components/src/theme-provider/design-token-names.d.ts +4 -0
- package/dist/esm/nimble-components/src/theme-provider/design-tokens.d.ts +56 -25
- package/dist/esm/number-field/styles.js +13 -19
- package/dist/esm/number-field/styles.js.map +1 -1
- package/dist/esm/patterns/button/styles.js +20 -21
- package/dist/esm/patterns/button/styles.js.map +1 -1
- package/dist/esm/select/styles.js +10 -12
- package/dist/esm/select/styles.js.map +1 -1
- package/dist/esm/tab/styles.js +6 -7
- package/dist/esm/tab/styles.js.map +1 -1
- package/dist/esm/tab-panel/styles.js +3 -4
- package/dist/esm/tab-panel/styles.js.map +1 -1
- package/dist/esm/tabs/styles.js +2 -2
- package/dist/esm/tabs-toolbar/styles.js +4 -5
- package/dist/esm/tabs-toolbar/styles.js.map +1 -1
- package/dist/esm/text-area/styles.js +18 -23
- package/dist/esm/text-area/styles.js.map +1 -1
- package/dist/esm/text-field/styles.js +27 -32
- package/dist/esm/text-field/styles.js.map +1 -1
- package/dist/esm/theme-provider/design-token-comments.js +73 -42
- package/dist/esm/theme-provider/design-token-comments.js.map +1 -1
- package/dist/esm/theme-provider/design-token-names.d.ts +4 -0
- package/dist/esm/theme-provider/design-token-names.js +60 -25
- package/dist/esm/theme-provider/design-token-names.js.map +1 -1
- package/dist/esm/theme-provider/design-tokens.d.ts +56 -25
- package/dist/esm/theme-provider/design-tokens.js +60 -30
- package/dist/esm/theme-provider/design-tokens.js.map +1 -1
- package/dist/esm/tree-item/styles.js +8 -9
- package/dist/esm/tree-item/styles.js.map +1 -1
- package/dist/tokens-internal.scss +267 -81
- package/dist/tokens.scss +138 -45
- package/package.json +2 -2
package/dist/tokens.scss
CHANGED
|
@@ -5,128 +5,221 @@
|
|
|
5
5
|
|
|
6
6
|
@import './tokens-internal';
|
|
7
7
|
|
|
8
|
+
/// DEPRECATED: *-partial tokens are used with rgba() to set color transparency in component stylesheets
|
|
9
|
+
$ni-nimble-action-rgb-partial-color: var($ni-nimble-internal-action-rgb-partial-color);
|
|
8
10
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
/// Background color for the application.
|
|
11
|
+
/// Primary background color for the application
|
|
12
12
|
$ni-nimble-application-background-color: var($ni-nimble-internal-application-background-color);
|
|
13
13
|
|
|
14
|
+
/// Background color for application headers
|
|
15
|
+
$ni-nimble-header-background-color: var($ni-nimble-internal-header-background-color);
|
|
14
16
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
$ni-nimble-fill-color-selected-rgb-partial: var($ni-nimble-internal-fill-color-selected-rgb-partial);
|
|
17
|
+
/// Background color for dialogs and menus
|
|
18
|
+
$ni-nimble-section-background-color: var($ni-nimble-internal-section-background-color);
|
|
19
19
|
|
|
20
|
+
/// Control fill color when a control is selected
|
|
21
|
+
$ni-nimble-fill-color-selected: var($ni-nimble-internal-fill-color-selected);
|
|
20
22
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
+
/// DEPRECATED: *-partial tokens are used with rgba() to set color transparency in component stylesheets
|
|
24
|
+
$ni-nimble-fill-selected-rgb-partial-color: var($ni-nimble-internal-fill-selected-rgb-partial-color);
|
|
23
25
|
|
|
24
|
-
|
|
26
|
+
/// Control fill color when hovering a selected control
|
|
27
|
+
$ni-nimble-fill-selected-hover-color: var($ni-nimble-internal-fill-selected-hover-color);
|
|
25
28
|
|
|
29
|
+
/// Control fill color when hovering component
|
|
30
|
+
$ni-nimble-fill-hover-color: var($ni-nimble-internal-fill-hover-color);
|
|
26
31
|
|
|
32
|
+
/// Standard control outline or border color
|
|
27
33
|
$ni-nimble-border-color: var($ni-nimble-internal-border-color);
|
|
28
34
|
|
|
35
|
+
/// DEPRECATED: *-partial tokens are used with rgba() to set color transparency in component stylesheets
|
|
36
|
+
$ni-nimble-border-rgb-partial-color: var($ni-nimble-internal-border-rgb-partial-color);
|
|
29
37
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
38
|
+
/// Used to highlight errors or invalid input
|
|
33
39
|
$ni-nimble-fail-color: var($ni-nimble-internal-fail-color);
|
|
34
40
|
|
|
35
|
-
|
|
41
|
+
/// Used to highlight invalid input or for icons to indicate that a process errored or failed
|
|
36
42
|
$ni-nimble-warning-color: var($ni-nimble-internal-warning-color);
|
|
37
43
|
|
|
38
|
-
|
|
44
|
+
/// Used to highlight a correct state or the successful completion of a process
|
|
39
45
|
$ni-nimble-pass-color: var($ni-nimble-internal-pass-color);
|
|
40
46
|
|
|
47
|
+
/// Border color when hovering component
|
|
48
|
+
$ni-nimble-border-hover-color: var($ni-nimble-internal-border-hover-color);
|
|
41
49
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
50
|
+
/// Equivalent to the font color for icons
|
|
45
51
|
$ni-nimble-icon-color: var($ni-nimble-internal-icon-color);
|
|
46
52
|
|
|
47
|
-
|
|
53
|
+
/// Shadow color for menus and dialog boxes
|
|
48
54
|
$ni-nimble-popup-box-shadow-color: var($ni-nimble-internal-popup-box-shadow-color);
|
|
49
55
|
|
|
50
|
-
|
|
56
|
+
/// Border color for menus and dialog boxes
|
|
51
57
|
$ni-nimble-popup-border-color: var($ni-nimble-internal-popup-border-color);
|
|
52
58
|
|
|
53
|
-
|
|
59
|
+
/// Standard layout height for all controls. Add "labelHeight" for labels on top.
|
|
54
60
|
$ni-nimble-control-height: var($ni-nimble-internal-control-height);
|
|
55
61
|
|
|
62
|
+
/// Small layout padding for components
|
|
63
|
+
$ni-nimble-small-padding: var($ni-nimble-internal-small-padding);
|
|
56
64
|
|
|
65
|
+
/// Standard layout padding for components
|
|
57
66
|
$ni-nimble-standard-padding: var($ni-nimble-internal-standard-padding);
|
|
58
67
|
|
|
59
|
-
|
|
68
|
+
/// Standard label height for components
|
|
60
69
|
$ni-nimble-label-height: var($ni-nimble-internal-label-height);
|
|
61
70
|
|
|
62
|
-
|
|
71
|
+
/// Standard border width for most components
|
|
63
72
|
$ni-nimble-border-width: var($ni-nimble-internal-border-width);
|
|
64
73
|
|
|
65
|
-
|
|
74
|
+
/// Standard layout height for all icons
|
|
66
75
|
$ni-nimble-icon-size: var($ni-nimble-internal-icon-size);
|
|
67
76
|
|
|
77
|
+
/// CSS text-transform string to use for headers
|
|
78
|
+
$ni-nimble-group-header-text-transform: var($ni-nimble-internal-group-header-text-transform);
|
|
68
79
|
|
|
80
|
+
/// TODO: delete when able
|
|
69
81
|
$ni-nimble-drawer-width: var($ni-nimble-internal-drawer-width);
|
|
70
82
|
|
|
83
|
+
/// Elements with small transition areas, such as icons and selection controls, have short durations.
|
|
84
|
+
$ni-nimble-small-delay: var($ni-nimble-internal-small-delay);
|
|
71
85
|
|
|
72
|
-
|
|
86
|
+
/// Elements with larger transition areas, such as bottom sheets and expanding chips, have slightly longer durations.
|
|
87
|
+
$ni-nimble-medium-delay: var($ni-nimble-internal-medium-delay);
|
|
73
88
|
|
|
89
|
+
/// Animated elements that traverse a large portion of the screen have the longest durations.
|
|
90
|
+
$ni-nimble-large-delay: var($ni-nimble-internal-large-delay);
|
|
74
91
|
|
|
75
|
-
|
|
92
|
+
/// Font shorthand for the "Headline_2" base token
|
|
93
|
+
$ni-nimble-headline-plus-1-font: var($ni-nimble-internal-headline-plus-1-font);
|
|
76
94
|
|
|
95
|
+
/// Font shorthand for the "Headline_1" base token
|
|
96
|
+
$ni-nimble-headline-font: var($ni-nimble-internal-headline-font);
|
|
77
97
|
|
|
78
|
-
|
|
98
|
+
/// Font shorthand for the "Title_3" base token
|
|
99
|
+
$ni-nimble-title-plus-2-font: var($ni-nimble-internal-title-plus-2-font);
|
|
79
100
|
|
|
101
|
+
/// Font shorthand for the "Title_2" base token
|
|
102
|
+
$ni-nimble-title-plus-1-font: var($ni-nimble-internal-title-plus-1-font);
|
|
80
103
|
|
|
81
|
-
|
|
104
|
+
/// Font shorthand for the "Title_1" base token
|
|
105
|
+
$ni-nimble-title-font: var($ni-nimble-internal-title-font);
|
|
82
106
|
|
|
107
|
+
/// Font shorthand for the "Subtitle_2" base token
|
|
108
|
+
$ni-nimble-subtitle-plus-1-font: var($ni-nimble-internal-subtitle-plus-1-font);
|
|
83
109
|
|
|
84
|
-
|
|
110
|
+
/// Font shorthand for the "Subtitle_1" base token
|
|
111
|
+
$ni-nimble-subtitle-font: var($ni-nimble-internal-subtitle-font);
|
|
85
112
|
|
|
113
|
+
/// Font shorthand for the "Link_standard_1" base token
|
|
114
|
+
$ni-nimble-link-standard-font: var($ni-nimble-internal-link-standard-font);
|
|
86
115
|
|
|
87
|
-
|
|
116
|
+
/// Font shorthand for the "Placeholder" base token
|
|
117
|
+
$ni-nimble-placeholder-font: var($ni-nimble-internal-placeholder-font);
|
|
88
118
|
|
|
119
|
+
/// Font shorthand for the "Body_Emphasized" base token
|
|
120
|
+
$ni-nimble-body-emphasized-font: var($ni-nimble-internal-body-emphasized-font);
|
|
89
121
|
|
|
90
|
-
|
|
122
|
+
/// Font shorthand for the "Body" base token
|
|
123
|
+
$ni-nimble-body-font: var($ni-nimble-internal-body-font);
|
|
91
124
|
|
|
125
|
+
/// Font shorthand for the "Group_Header_1" base token
|
|
126
|
+
$ni-nimble-group-header-font: var($ni-nimble-internal-group-header-font);
|
|
92
127
|
|
|
93
|
-
|
|
128
|
+
/// Font shorthand for the "Control_Label_1" base token
|
|
129
|
+
$ni-nimble-control-label-font: var($ni-nimble-internal-control-label-font);
|
|
94
130
|
|
|
131
|
+
/// Font shorthand for the "Button_Label_1" base token
|
|
132
|
+
$ni-nimble-button-label-font: var($ni-nimble-internal-button-label-font);
|
|
95
133
|
|
|
96
|
-
|
|
134
|
+
/// Font shorthand for the "Tooltip_Caption" base token
|
|
135
|
+
$ni-nimble-tooltip-caption-font: var($ni-nimble-internal-tooltip-caption-font);
|
|
97
136
|
|
|
137
|
+
/// Font color for "Headline_2" base token
|
|
138
|
+
$ni-nimble-headline-plus-1-font-color: var($ni-nimble-internal-headline-plus-1-font-color);
|
|
98
139
|
|
|
99
|
-
|
|
140
|
+
/// Font color for "Headline_1" base token
|
|
141
|
+
$ni-nimble-headline-font-color: var($ni-nimble-internal-headline-font-color);
|
|
100
142
|
|
|
143
|
+
/// Font color for "Title_3" base token
|
|
144
|
+
$ni-nimble-title-plus-2-font-color: var($ni-nimble-internal-title-plus-2-font-color);
|
|
101
145
|
|
|
102
|
-
|
|
146
|
+
/// Font color for "Title_2" base token
|
|
147
|
+
$ni-nimble-title-plus-1-font-color: var($ni-nimble-internal-title-plus-1-font-color);
|
|
103
148
|
|
|
149
|
+
/// Font color for "Title_1" base token
|
|
150
|
+
$ni-nimble-title-font-color: var($ni-nimble-internal-title-font-color);
|
|
104
151
|
|
|
105
|
-
|
|
152
|
+
/// Font color for "Subtitle_2" base token
|
|
153
|
+
$ni-nimble-subtitle-plus-1-font-color: var($ni-nimble-internal-subtitle-plus-1-font-color);
|
|
106
154
|
|
|
155
|
+
/// Font color for "Subtitle_1" base token
|
|
156
|
+
$ni-nimble-subtitle-font-color: var($ni-nimble-internal-subtitle-font-color);
|
|
107
157
|
|
|
108
|
-
|
|
158
|
+
/// Font color for "Link_Standard_1" base token
|
|
159
|
+
$ni-nimble-link-standard-font-color: var($ni-nimble-internal-link-standard-font-color);
|
|
109
160
|
|
|
161
|
+
/// Font color for "Placeholder" base token
|
|
162
|
+
$ni-nimble-placeholder-font-color: var($ni-nimble-internal-placeholder-font-color);
|
|
110
163
|
|
|
111
|
-
|
|
164
|
+
/// Font color for "Body_Emphasized" base token
|
|
165
|
+
$ni-nimble-body-emphasized-font-color: var($ni-nimble-internal-body-emphasized-font-color);
|
|
112
166
|
|
|
167
|
+
/// Font color for "Body" base token
|
|
168
|
+
$ni-nimble-body-font-color: var($ni-nimble-internal-body-font-color);
|
|
113
169
|
|
|
114
|
-
|
|
170
|
+
/// Font color for "Group_Header_1" base token
|
|
171
|
+
$ni-nimble-group-header-font-color: var($ni-nimble-internal-group-header-font-color);
|
|
115
172
|
|
|
173
|
+
/// Font color for "Control_Label_1" base token
|
|
174
|
+
$ni-nimble-control-label-font-color: var($ni-nimble-internal-control-label-font-color);
|
|
116
175
|
|
|
117
|
-
|
|
176
|
+
/// Font color for "Button_Label_1" base token
|
|
177
|
+
$ni-nimble-button-label-font-color: var($ni-nimble-internal-button-label-font-color);
|
|
118
178
|
|
|
179
|
+
/// Font color for "Tooltip_Caption" base token
|
|
180
|
+
$ni-nimble-tooltip-caption-font-color: var($ni-nimble-internal-tooltip-caption-font-color);
|
|
119
181
|
|
|
120
|
-
|
|
182
|
+
/// Disabled font color for "Headline_2" base token
|
|
183
|
+
$ni-nimble-headline-plus-1-disabled-font-color: var($ni-nimble-internal-headline-plus-1-disabled-font-color);
|
|
121
184
|
|
|
185
|
+
/// Disabled font color for "Headline_1" base token
|
|
186
|
+
$ni-nimble-headline-disabled-font-color: var($ni-nimble-internal-headline-disabled-font-color);
|
|
122
187
|
|
|
123
|
-
|
|
188
|
+
/// Disabled font color for "Title_3" base token
|
|
189
|
+
$ni-nimble-title-plus-2-disabled-font-color: var($ni-nimble-internal-title-plus-2-disabled-font-color);
|
|
124
190
|
|
|
191
|
+
/// Disabled font color for "Title_2" base token
|
|
192
|
+
$ni-nimble-title-plus-1-disabled-font-color: var($ni-nimble-internal-title-plus-1-disabled-font-color);
|
|
125
193
|
|
|
126
|
-
|
|
194
|
+
/// Disabled font color for "Title_1" base token
|
|
195
|
+
$ni-nimble-title-disabled-font-color: var($ni-nimble-internal-title-disabled-font-color);
|
|
127
196
|
|
|
197
|
+
/// Disabled font color for "Subtitle_2" base token
|
|
198
|
+
$ni-nimble-subtitle-plus-1-disabled-font-color: var($ni-nimble-internal-subtitle-plus-1-disabled-font-color);
|
|
128
199
|
|
|
129
|
-
|
|
200
|
+
/// Disabled font color for "Subtitle_1" base token
|
|
201
|
+
$ni-nimble-subtitle-disabled-font-color: var($ni-nimble-internal-subtitle-disabled-font-color);
|
|
202
|
+
|
|
203
|
+
/// Disabled font color for "Link_Standard_1" base token
|
|
204
|
+
$ni-nimble-link-standard-disabled-font-color: var($ni-nimble-internal-link-standard-disabled-font-color);
|
|
205
|
+
|
|
206
|
+
/// Disabled font color for "Placeholder" base token
|
|
207
|
+
$ni-nimble-placeholder-disabled-font-color: var($ni-nimble-internal-placeholder-disabled-font-color);
|
|
208
|
+
|
|
209
|
+
/// Disabled font color for "Body_Emphasized" base token
|
|
210
|
+
$ni-nimble-body-emphasized-disabled-font-color: var($ni-nimble-internal-body-emphasized-disabled-font-color);
|
|
211
|
+
|
|
212
|
+
/// Disabled font color for "Body" base token
|
|
213
|
+
$ni-nimble-body-disabled-font-color: var($ni-nimble-internal-body-disabled-font-color);
|
|
214
|
+
|
|
215
|
+
/// Disabled font color for "Group_Header_1" base token
|
|
216
|
+
$ni-nimble-group-header-disabled-font-color: var($ni-nimble-internal-group-header-disabled-font-color);
|
|
217
|
+
|
|
218
|
+
/// Disabled font color for "Control_Label_1" base token
|
|
219
|
+
$ni-nimble-control-label-disabled-font-color: var($ni-nimble-internal-control-label-disabled-font-color);
|
|
130
220
|
|
|
221
|
+
/// Disabled font color for "Button_Label_1" base token
|
|
222
|
+
$ni-nimble-button-label-disabled-font-color: var($ni-nimble-internal-button-label-disabled-font-color);
|
|
131
223
|
|
|
132
|
-
|
|
224
|
+
/// Disabled font color for "Tooltip_Caption" base token
|
|
225
|
+
$ni-nimble-tooltip-caption-disabled-font-color: var($ni-nimble-internal-tooltip-caption-disabled-font-color);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/nimble-components",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "3.2.0",
|
|
4
4
|
"description": "Styled web components for the NI Nimble Design System",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "npm run build-components && npm run generate-scss && npm run build-storybook",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"@microsoft/fast-element": "^1.7.0",
|
|
47
47
|
"@microsoft/fast-foundation": "^2.28.0 <2.29.0",
|
|
48
48
|
"@microsoft/fast-web-utilities": "^5.1.0",
|
|
49
|
-
"@ni/nimble-tokens": "^2.
|
|
49
|
+
"@ni/nimble-tokens": "^2.1.0",
|
|
50
50
|
"hex-rgb": "^5.0.0"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|