@carbon/styles 1.16.0-rc.0 → 1.16.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.
Files changed (7) hide show
  1. package/css/styles.css +37 -12
  2. package/css/styles.min.css +1 -1
  3. package/package.json +5 -5
  4. package/scss/components/notification/_tokens.scss +150 -42
  5. package/scss/components/progress-indicator/_progress-indicator.scss +5 -0
  6. package/scss/components/text-input/_text-input.scss +3 -8
  7. package/scss/components/ui-shell/header/_header.scss +16 -0
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/styles",
3
3
  "description": "Styles for the Carbon Design System",
4
- "version": "1.16.0-rc.0",
4
+ "version": "1.16.0",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
7
7
  "type": "git",
@@ -32,13 +32,13 @@
32
32
  "sass": "^1.33.0"
33
33
  },
34
34
  "dependencies": {
35
- "@carbon/colors": "^11.7.0-rc.0",
35
+ "@carbon/colors": "^11.7.0",
36
36
  "@carbon/feature-flags": "^0.9.0",
37
37
  "@carbon/grid": "^11.7.0",
38
38
  "@carbon/layout": "^11.7.0",
39
39
  "@carbon/motion": "^11.5.0",
40
- "@carbon/themes": "^11.11.0-rc.0",
41
- "@carbon/type": "^11.11.0-rc.0",
40
+ "@carbon/themes": "^11.11.0",
41
+ "@carbon/type": "^11.11.0",
42
42
  "@ibm/plex": "6.0.0-next.6"
43
43
  },
44
44
  "devDependencies": {
@@ -59,5 +59,5 @@
59
59
  "scss/**/*.css",
60
60
  "css/**/*.css"
61
61
  ],
62
- "gitHead": "a55b418b5a33d88d224b9c35f62ebd09c9586764"
62
+ "gitHead": "c77cccfd9ee14e87f60daefbc518d63204606e2b"
63
63
  }
package/scss/components/notification/_tokens.scss CHANGED
@@ -13,106 +13,123 @@
13
13
  @use '../../themes';
14
14
  @use '../../theme';
15
15
  @use '../../utilities/component-tokens';
16
+ @use '@carbon/themes/scss/component-tokens' as notification;
17
+
16
18
  @use '../button/tokens' as button-tokens;
17
19
 
18
20
  $notification-background-error: (
19
- fallback: colors.$red-10,
21
+ fallback: map.get(notification.$notification-background-error, white-theme),
20
22
  values: (
21
23
  (
22
24
  theme: themes.$white,
23
- value: colors.$red-10,
25
+ value: map.get(notification.$notification-background-error, white-theme),
24
26
  ),
25
27
  (
26
28
  theme: themes.$g10,
27
- value: colors.$red-10,
29
+ value: map.get(notification.$notification-background-error, g-10),
28
30
  ),
29
31
  (
30
32
  theme: themes.$g90,
31
- value: colors.$gray-80,
33
+ value: map.get(notification.$notification-background-error, g-90),
32
34
  ),
33
35
  (
34
36
  theme: themes.$g100,
35
- value: colors.$gray-90,
37
+ value: map.get(notification.$notification-background-error, g-100),
36
38
  ),
37
39
  ),
38
40
  ) !default;
39
41
 
40
42
  $notification-background-success: (
41
- fallback: colors.$green-10,
43
+ fallback: map.get(notification.$notification-background-success, white-theme),
42
44
  values: (
43
45
  (
44
46
  theme: themes.$white,
45
- value: colors.$green-10,
47
+ value: map.get(notification.$notification-background-success, white-theme),
46
48
  ),
47
49
  (
48
50
  theme: themes.$g10,
49
- value: colors.$green-10,
51
+ value: map.get(notification.$notification-background-success, g-10),
50
52
  ),
51
53
  (
52
54
  theme: themes.$g90,
53
- value: colors.$gray-80,
55
+ value: map.get(notification.$notification-background-success, g-90),
54
56
  ),
55
57
  (
56
58
  theme: themes.$g100,
57
- value: colors.$gray-90,
59
+ value: map.get(notification.$notification-background-success, g-100),
58
60
  ),
59
61
  ),
60
62
  ) !default;
61
63
 
62
64
  $notification-background-info: (
63
- fallback: colors.$blue-10,
65
+ fallback: map.get(notification.$notification-background-info, white-theme),
64
66
  values: (
65
67
  (
66
68
  theme: themes.$white,
67
- value: colors.$blue-10,
69
+ value: map.get(notification.$notification-background-info, white-theme),
68
70
  ),
69
71
  (
70
72
  theme: themes.$g10,
71
- value: colors.$blue-10,
73
+ value: map.get(notification.$notification-background-info, g-10),
72
74
  ),
73
75
  (
74
76
  theme: themes.$g90,
75
- value: colors.$gray-80,
77
+ value: map.get(notification.$notification-background-info, g-90),
76
78
  ),
77
79
  (
78
80
  theme: themes.$g100,
79
- value: colors.$gray-90,
81
+ value: map.get(notification.$notification-background-info, g-100),
80
82
  ),
81
83
  ),
82
84
  ) !default;
83
85
 
84
86
  $notification-background-warning: (
85
- fallback: color.mix(colors.$yellow-30, colors.$white-0, 15%),
87
+ fallback:
88
+ color.mix(
89
+ map.get(notification.$color-map, yellow-30),
90
+ map.get(notification.$color-map, white-0),
91
+ 15%
92
+ ),
86
93
  values: (
87
94
  (
88
95
  theme: themes.$white,
89
- value: color.mix(colors.$yellow-30, colors.$white-0, 15%),
96
+ value:
97
+ color.mix(
98
+ map.get(notification.$color-map, yellow-30),
99
+ map.get(notification.$color-map, white-0),
100
+ 15%
101
+ ),
90
102
  ),
91
103
  (
92
104
  theme: themes.$g10,
93
- value: color.mix(colors.$yellow-30, colors.$white-0, 15%),
105
+ value:
106
+ color.mix(
107
+ map.get(notification.$color-map, yellow-30),
108
+ map.get(notification.$color-map, white-0),
109
+ 15%
110
+ ),
94
111
  ),
95
112
  (
96
113
  theme: themes.$g90,
97
- value: colors.$gray-80,
114
+ value: map.get(notification.$notification-background-warning, g-90),
98
115
  ),
99
116
  (
100
117
  theme: themes.$g100,
101
- value: colors.$gray-90,
118
+ value: map.get(notification.$notification-background-warning, g-100),
102
119
  ),
103
120
  ),
104
121
  ) !default;
105
122
 
106
123
  $notification-action-hover: (
107
- fallback: colors.$white-0,
124
+ fallback: map.get(notification.$notification-background-info, white-theme),
108
125
  values: (
109
126
  (
110
127
  theme: themes.$white,
111
- value: colors.$white-0,
128
+ value: map.get(notification.$notification-background-info, white-theme),
112
129
  ),
113
130
  (
114
131
  theme: themes.$g10,
115
- value: colors.$white-0,
132
+ value: map.get(notification.$notification-background-info, g-10),
116
133
  ),
117
134
  (
118
135
  theme: themes.$g90,
@@ -127,70 +144,161 @@ $notification-action-hover: (
127
144
 
128
145
  $notification-action-tertiary-inverse: (
129
146
  fallback: map.get(button-tokens.$button-tokens, button-tertiary, fallback),
130
- values:
131
- component-tokens.get-inverse-theme-values(
132
- map.get(button-tokens.$button-tokens, button-tertiary)
147
+ values: (
148
+ (
149
+ theme: themes.$white,
150
+ value:
151
+ map.get(notification.$notification-action-tertiary-inverse, white-theme),
152
+ ),
153
+ (
154
+ theme: themes.$g10,
155
+ value: map.get(notification.$notification-action-tertiary-inverse, g-10),
156
+ ),
157
+ (
158
+ theme: themes.$g90,
159
+ value: map.get(notification.$notification-action-tertiary-inverse, g-90),
133
160
  ),
161
+ (
162
+ theme: themes.$g100,
163
+ value: map.get(notification.$notification-action-tertiary-inverse, g-100),
164
+ ),
165
+ ),
134
166
  ) !default;
135
167
 
136
168
  $notification-action-tertiary-inverse-active: (
137
169
  fallback:
138
170
  map.get(button-tokens.$button-tokens, button-tertiary-active, fallback),
139
- values:
140
- component-tokens.get-inverse-theme-values(
141
- map.get(button-tokens.$button-tokens, button-tertiary-active)
171
+ values: (
172
+ (
173
+ theme: themes.$white,
174
+ value:
175
+ map.get(
176
+ notification.$notification-action-tertiary-inverse-active,
177
+ white-theme
178
+ ),
179
+ ),
180
+ (
181
+ theme: themes.$g10,
182
+ value:
183
+ map.get(notification.$notification-action-tertiary-inverse-active, g-10),
184
+ ),
185
+ (
186
+ theme: themes.$g90,
187
+ value:
188
+ map.get(notification.$notification-action-tertiary-inverse-active, g-90),
189
+ ),
190
+ (
191
+ theme: themes.$g100,
192
+ value:
193
+ map.get(
194
+ notification.$notification-action-tertiary-inverse-active,
195
+ g-100
196
+ ),
142
197
  ),
198
+ ),
143
199
  ) !default;
144
200
 
145
201
  $notification-action-tertiary-inverse-hover: (
146
202
  fallback:
147
203
  map.get(button-tokens.$button-tokens, button-tertiary-hover, fallback),
148
- values:
149
- component-tokens.get-inverse-theme-values(
150
- map.get(button-tokens.$button-tokens, button-tertiary-hover)
204
+ values: (
205
+ (
206
+ theme: themes.$white,
207
+ value:
208
+ map.get(
209
+ notification.$notification-action-tertiary-inverse-hover,
210
+ white-theme
211
+ ),
212
+ ),
213
+ (
214
+ theme: themes.$g10,
215
+ value:
216
+ map.get(notification.$notification-action-tertiary-inverse-hover, g-10),
151
217
  ),
218
+ (
219
+ theme: themes.$g90,
220
+ value:
221
+ map.get(notification.$notification-action-tertiary-inverse-hover, g-90),
222
+ ),
223
+ (
224
+ theme: themes.$g100,
225
+ value:
226
+ map.get(notification.$notification-action-tertiary-inverse-hover, g-100),
227
+ ),
228
+ ),
152
229
  ) !default;
153
230
 
154
231
  $notification-action-tertiary-inverse-text: (
155
- fallback: map.get(themes.$white, text-inverse),
232
+ fallback:
233
+ map.get(
234
+ notification.$notification-action-tertiary-inverse-text,
235
+ white-theme
236
+ ),
156
237
  values: (
157
238
  (
158
239
  theme: themes.$white,
159
- value: map.get(themes.$g100, text-inverse),
240
+ value:
241
+ map.get(
242
+ notification.$notification-action-tertiary-inverse-text,
243
+ white-theme
244
+ ),
160
245
  ),
161
246
  (
162
247
  theme: themes.$g10,
163
- value: map.get(themes.$g90, text-inverse),
248
+ value:
249
+ map.get(notification.$notification-action-tertiary-inverse-text, g-10),
164
250
  ),
165
251
  (
166
252
  theme: themes.$g90,
167
- value: map.get(themes.$g10, text-inverse),
253
+ value:
254
+ map.get(notification.$notification-action-tertiary-inverse-text, g-90),
168
255
  ),
169
256
  (
170
257
  theme: themes.$g100,
171
- value: map.get(themes.$white, text-inverse),
258
+ value:
259
+ map.get(notification.$notification-action-tertiary-inverse-text, g-100),
172
260
  ),
173
261
  ),
174
262
  ) !default;
175
263
 
176
264
  $notification-action-tertiary-inverse-text-on-color-disabled: (
177
- fallback: map.get(themes.$white, text-on-color-disabled),
265
+ fallback:
266
+ map.get(
267
+ notification.$notification-action-tertiary-inverse-text-on-color-disabled,
268
+ white-theme
269
+ ),
178
270
  values: (
179
271
  (
180
272
  theme: themes.$white,
181
- value: map.get(themes.$g100, text-on-color-disabled),
273
+ value:
274
+ map.get(
275
+ notification.$notification-action-tertiary-inverse-text-on-color-disabled,
276
+ white-theme
277
+ ),
182
278
  ),
183
279
  (
184
280
  theme: themes.$g10,
185
- value: map.get(themes.$g90, text-on-color-disabled),
281
+ value:
282
+ map.get(
283
+ notification.$notification-action-tertiary-inverse-text-on-color-disabled,
284
+ g-10
285
+ ),
186
286
  ),
187
287
  (
188
288
  theme: themes.$g90,
189
- value: map.get(themes.$g10, text-on-color-disabled),
289
+ value:
290
+ map.get(
291
+ notification.$notification-action-tertiary-inverse-text-on-color-disabled,
292
+ g-90
293
+ ),
190
294
  ),
191
295
  (
192
296
  theme: themes.$g100,
193
- value: map.get(themes.$white, text-on-color-disabled),
297
+ value:
298
+ map.get(
299
+ notification.$notification-action-tertiary-inverse-text-on-color-disabled,
300
+ g-100
301
+ ),
194
302
  ),
195
303
  ),
196
304
  ) !default;
package/scss/components/progress-indicator/_progress-indicator.scss CHANGED
@@ -273,6 +273,11 @@ $progress-indicator-bar-width: 1px inset transparent !default;
273
273
  margin-top: 0.625rem;
274
274
  }
275
275
 
276
+ .#{$prefix}--progress.#{$prefix}--progress--vertical.#{$prefix}--skeleton
277
+ .#{$prefix}--progress-label {
278
+ margin-top: 0.0625rem;
279
+ }
280
+
276
281
  // Vertical Variant
277
282
 
278
283
  .#{$prefix}--progress--vertical {
package/scss/components/text-input/_text-input.scss CHANGED
@@ -94,17 +94,13 @@
94
94
  width: 100%;
95
95
  }
96
96
 
97
- .#{$prefix}--text-input__invalid-icon,
98
- .#{$prefix}--text-input__readonly-icon {
97
+ .#{$prefix}--text-input__invalid-icon {
99
98
  position: absolute;
100
99
  // top/transform used to center invalid icon in IE11
101
100
  top: 50%;
102
101
  right: $spacing-05;
103
- transform: translateY(-50%);
104
- }
105
-
106
- .#{$prefix}--text-input__invalid-icon {
107
102
  fill: $support-error;
103
+ transform: translateY(-50%);
108
104
  }
109
105
 
110
106
  .#{$prefix}--text-input__invalid-icon--warning {
@@ -175,8 +171,7 @@
175
171
  }
176
172
 
177
173
  .#{$prefix}--text-input--invalid,
178
- .#{$prefix}--text-input--warning,
179
- .#{$prefix}--text-input-wrapper--readonly .#{$prefix}--text-input {
174
+ .#{$prefix}--text-input--warning {
180
175
  padding-right: $spacing-08;
181
176
  }
182
177
 
package/scss/components/ui-shell/header/_header.scss CHANGED
@@ -268,6 +268,22 @@
268
268
  border: 0;
269
269
  }
270
270
 
271
+ .#{$prefix}--header__submenu .#{$prefix}--header__menu {
272
+ a.#{$prefix}--header__menu-item[aria-current='page']::after,
273
+ .#{$prefix}--header__menu-item--current::after {
274
+ bottom: 0;
275
+ left: -2px;
276
+ border-bottom: none;
277
+ border-left: 3px solid $border-interactive;
278
+ }
279
+
280
+ a.#{$prefix}--header__menu-item[aria-current='page']:focus::after,
281
+ .#{$prefix}--header__menu-item--current:focus::after {
282
+ left: 0;
283
+ border-left: 3px solid $border-interactive;
284
+ }
285
+ }
286
+
271
287
  a.#{$prefix}--header__menu-item[aria-current='page']:focus,
272
288
  a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item--current:focus {
273
289
  border: 2px solid $focus;