@carbon/styles 1.34.1 → 1.35.0-rc.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 (8) hide show
  1. package/css/styles.css +81 -96
  2. package/css/styles.min.css +1 -1
  3. package/package.json +11 -10
  4. package/scss/_layout.scss +5 -1
  5. package/scss/components/contained-list/_contained-list.scss +1 -0
  6. package/scss/components/data-table/action/_data-table-action.scss +5 -1
  7. package/scss/components/data-table/expandable/_data-table-expandable.scss +1 -1
  8. package/scss/components/popover/_popover.scss +106 -38
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.34.1",
4
+ "version": "1.35.0-rc.0",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
7
7
  "type": "git",
@@ -22,7 +22,8 @@
22
22
  "index.scss"
23
23
  ],
24
24
  "publishConfig": {
25
- "access": "public"
25
+ "access": "public",
26
+ "provenance": true
26
27
  },
27
28
  "scripts": {
28
29
  "build": "yarn clean && node tasks/build-css.js",
@@ -37,13 +38,13 @@
37
38
  }
38
39
  },
39
40
  "dependencies": {
40
- "@carbon/colors": "^11.18.1",
41
- "@carbon/feature-flags": "^0.15.0",
42
- "@carbon/grid": "^11.17.1",
43
- "@carbon/layout": "^11.17.1",
44
- "@carbon/motion": "^11.14.1",
45
- "@carbon/themes": "^11.22.1",
46
- "@carbon/type": "^11.21.1",
41
+ "@carbon/colors": "^11.19.0-rc.0",
42
+ "@carbon/feature-flags": "^0.16.0-rc.0",
43
+ "@carbon/grid": "^11.18.0-rc.0",
44
+ "@carbon/layout": "^11.18.0-rc.0",
45
+ "@carbon/motion": "^11.15.0-rc.0",
46
+ "@carbon/themes": "^11.23.0-rc.0",
47
+ "@carbon/type": "^11.22.0-rc.0",
47
48
  "@ibm/plex": "6.0.0-next.6"
48
49
  },
49
50
  "devDependencies": {
@@ -64,5 +65,5 @@
64
65
  "scss/**/*.css",
65
66
  "css/**/*.css"
66
67
  ],
67
- "gitHead": "22b28f5d05e6caa4565e4e84308abcf2fd977aec"
68
+ "gitHead": "39f36c63d5cb77a525e0a82f0e565b8d6ef658e9"
68
69
  }
package/scss/_layout.scss CHANGED
@@ -32,7 +32,7 @@ $layout-tokens: (
32
32
  ),
33
33
  );
34
34
 
35
- :root {
35
+ @mixin emit-layout-tokens {
36
36
  @each $group, $properties in $layout-tokens {
37
37
  @each $property, $steps in $properties {
38
38
  @each $step, $value in $steps {
@@ -102,3 +102,7 @@ $layout-tokens: (
102
102
  }
103
103
  }
104
104
  }
105
+
106
+ :root {
107
+ @include emit-layout-tokens();
108
+ }
package/scss/components/contained-list/_contained-list.scss CHANGED
@@ -134,6 +134,7 @@
134
134
 
135
135
  .#{$prefix}--contained-list-item {
136
136
  position: relative;
137
+ display: list-item;
137
138
  list-style: none;
138
139
  }
139
140
 
package/scss/components/data-table/action/_data-table-action.scss CHANGED
@@ -27,6 +27,7 @@
27
27
  .#{$prefix}--table-toolbar {
28
28
  // Need for batch actions
29
29
  position: relative;
30
+ z-index: 1;
30
31
  display: flex;
31
32
  width: 100%;
32
33
  min-height: $spacing-09;
@@ -388,6 +389,7 @@
388
389
  justify-content: space-between;
389
390
  background-color: $background-brand;
390
391
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
392
+ opacity: 0;
391
393
  pointer-events: none;
392
394
  transform: translate3d(0, 48px, 0);
393
395
  transition: transform $duration-fast-02 motion(standard, productive),
@@ -401,7 +403,9 @@
401
403
  }
402
404
  // 200% to allow tooltips
403
405
  .#{$prefix}--batch-actions--active {
404
- clip-path: polygon(0 0, 200% 0, 200% 200%, 0 200%);
406
+ z-index: 1;
407
+ clip-path: polygon(0 0, 300% 0, 300% 300%, 0 300%);
408
+ opacity: 1;
405
409
  pointer-events: all;
406
410
  transform: translate3d(0, 0, 0);
407
411
  }
package/scss/components/data-table/expandable/_data-table-expandable.scss CHANGED
@@ -69,7 +69,7 @@
69
69
  }
70
70
 
71
71
  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] td {
72
- padding-left: 4rem;
72
+ padding-left: 3.5rem;
73
73
  border-bottom: 1px solid $border-subtle;
74
74
  transition: padding-bottom $duration-fast-02 motion(standard, productive),
75
75
  transform $duration-fast-02 motion(standard, productive),
package/scss/components/popover/_popover.scss CHANGED
@@ -173,7 +173,7 @@ $popover-caret-height: custom-property.get-var(
173
173
  }
174
174
 
175
175
  .#{$prefix}--popover--tab-tip
176
- .#{$prefix}--popover
176
+ > .#{$prefix}--popover
177
177
  .#{$prefix}--popover-caret {
178
178
  display: none;
179
179
  }
@@ -183,13 +183,17 @@ $popover-caret-height: custom-property.get-var(
183
183
  //-----------------------------------------------------------------------------
184
184
 
185
185
  // Popover content placement
186
- .#{$prefix}--popover--bottom .#{$prefix}--popover-content {
186
+ .#{$prefix}--popover--bottom
187
+ > .#{$prefix}--popover
188
+ .#{$prefix}--popover-content {
187
189
  bottom: 0;
188
190
  left: 50%;
189
191
  transform: translate(-50%, calc(100% + $popover-offset));
190
192
  }
191
193
 
192
- .#{$prefix}--popover--bottom-left .#{$prefix}--popover-content {
194
+ .#{$prefix}--popover--bottom-left
195
+ > .#{$prefix}--popover
196
+ .#{$prefix}--popover-content {
193
197
  bottom: 0;
194
198
  left: 0;
195
199
  transform: translate(
@@ -198,16 +202,24 @@ $popover-caret-height: custom-property.get-var(
198
202
  );
199
203
  }
200
204
 
201
- .#{$prefix}--popover--bottom-right .#{$prefix}--popover-content {
205
+ .#{$prefix}--popover--bottom-right
206
+ > .#{$prefix}--popover
207
+ .#{$prefix}--popover-content {
202
208
  right: 0;
203
209
  bottom: 0;
204
210
  transform: translate($popover-offset, calc(100% + $popover-offset));
205
211
  }
206
212
 
207
213
  // Popover hover area placement
208
- .#{$prefix}--popover--bottom .#{$prefix}--popover-content::before,
209
- .#{$prefix}--popover--bottom-left .#{$prefix}--popover-content::before,
210
- .#{$prefix}--popover--bottom-right .#{$prefix}--popover-content::before {
214
+ .#{$prefix}--popover--bottom
215
+ > .#{$prefix}--popover
216
+ .#{$prefix}--popover-content::before,
217
+ .#{$prefix}--popover--bottom-left
218
+ > .#{$prefix}--popover
219
+ .#{$prefix}--popover-content::before,
220
+ .#{$prefix}--popover--bottom-right
221
+ > .#{$prefix}--popover
222
+ .#{$prefix}--popover-content::before {
211
223
  top: 0;
212
224
  right: 0;
213
225
  left: 0;
@@ -216,9 +228,15 @@ $popover-caret-height: custom-property.get-var(
216
228
  }
217
229
 
218
230
  // Caret placement
219
- .#{$prefix}--popover--bottom .#{$prefix}--popover-caret,
220
- .#{$prefix}--popover--bottom-left .#{$prefix}--popover-caret,
221
- .#{$prefix}--popover--bottom-right .#{$prefix}--popover-caret {
231
+ .#{$prefix}--popover--bottom
232
+ > .#{$prefix}--popover
233
+ .#{$prefix}--popover-caret,
234
+ .#{$prefix}--popover--bottom-left
235
+ > .#{$prefix}--popover
236
+ .#{$prefix}--popover-caret,
237
+ .#{$prefix}--popover--bottom-right
238
+ > .#{$prefix}--popover
239
+ .#{$prefix}--popover-caret {
222
240
  bottom: 0;
223
241
  left: 50%;
224
242
  width: $popover-caret-width;
@@ -232,13 +250,17 @@ $popover-caret-height: custom-property.get-var(
232
250
  //-----------------------------------------------------------------------------
233
251
 
234
252
  // Popover content placement
235
- .#{$prefix}--popover--top .#{$prefix}--popover-content {
253
+ .#{$prefix}--popover--top
254
+ > .#{$prefix}--popover
255
+ .#{$prefix}--popover-content {
236
256
  top: 0;
237
257
  left: 50%;
238
258
  transform: translate(-50%, calc(-100% - $popover-offset));
239
259
  }
240
260
 
241
- .#{$prefix}--popover--top-left .#{$prefix}--popover-content {
261
+ .#{$prefix}--popover--top-left
262
+ > .#{$prefix}--popover
263
+ .#{$prefix}--popover-content {
242
264
  top: 0;
243
265
  left: 0;
244
266
  transform: translate(
@@ -247,16 +269,24 @@ $popover-caret-height: custom-property.get-var(
247
269
  );
248
270
  }
249
271
 
250
- .#{$prefix}--popover--top-right .#{$prefix}--popover-content {
272
+ .#{$prefix}--popover--top-right
273
+ > .#{$prefix}--popover
274
+ .#{$prefix}--popover-content {
251
275
  top: 0;
252
276
  right: 0;
253
277
  transform: translate($popover-offset, calc(-100% - $popover-offset));
254
278
  }
255
279
 
256
280
  // Popover hover area placement
257
- .#{$prefix}--popover--top .#{$prefix}--popover-content::before,
258
- .#{$prefix}--popover--top-left .#{$prefix}--popover-content::before,
259
- .#{$prefix}--popover--top-right .#{$prefix}--popover-content::before {
281
+ .#{$prefix}--popover--top
282
+ > .#{$prefix}--popover
283
+ .#{$prefix}--popover-content::before,
284
+ .#{$prefix}--popover--top-left
285
+ > .#{$prefix}--popover
286
+ .#{$prefix}--popover-content::before,
287
+ .#{$prefix}--popover--top-right
288
+ > .#{$prefix}--popover
289
+ .#{$prefix}--popover-content::before {
260
290
  right: 0;
261
291
  bottom: 0;
262
292
  left: 0;
@@ -265,9 +295,13 @@ $popover-caret-height: custom-property.get-var(
265
295
  }
266
296
 
267
297
  // Caret placement
268
- .#{$prefix}--popover--top .#{$prefix}--popover-caret,
269
- .#{$prefix}--popover--top-left .#{$prefix}--popover-caret,
270
- .#{$prefix}--popover--top-right .#{$prefix}--popover-caret {
298
+ .#{$prefix}--popover--top > .#{$prefix}--popover .#{$prefix}--popover-caret,
299
+ .#{$prefix}--popover--top-left
300
+ > .#{$prefix}--popover
301
+ .#{$prefix}--popover-caret,
302
+ .#{$prefix}--popover--top-right
303
+ > .#{$prefix}--popover
304
+ .#{$prefix}--popover-caret {
271
305
  top: 0;
272
306
  left: 50%;
273
307
  width: $popover-caret-width;
@@ -281,7 +315,9 @@ $popover-caret-height: custom-property.get-var(
281
315
  //-----------------------------------------------------------------------------
282
316
 
283
317
  // Popover content placement
284
- .#{$prefix}--popover--right .#{$prefix}--popover-content {
318
+ .#{$prefix}--popover--right
319
+ > .#{$prefix}--popover
320
+ .#{$prefix}--popover-content {
285
321
  top: 50%;
286
322
  left: 100%;
287
323
  // Add in 0.1px to prevent rounding errors where the content is
@@ -289,7 +325,9 @@ $popover-caret-height: custom-property.get-var(
289
325
  transform: translate($popover-offset, -50%);
290
326
  }
291
327
 
292
- .#{$prefix}--popover--right-top .#{$prefix}--popover-content {
328
+ .#{$prefix}--popover--right-top
329
+ > .#{$prefix}--popover
330
+ .#{$prefix}--popover-content {
293
331
  top: 50%;
294
332
  left: 100%;
295
333
  transform: translate(
@@ -298,16 +336,24 @@ $popover-caret-height: custom-property.get-var(
298
336
  );
299
337
  }
300
338
 
301
- .#{$prefix}--popover--right-bottom .#{$prefix}--popover-content {
339
+ .#{$prefix}--popover--right-bottom
340
+ > .#{$prefix}--popover
341
+ .#{$prefix}--popover-content {
302
342
  bottom: 50%;
303
343
  left: 100%;
304
344
  transform: translate($popover-offset, calc(0.5 * $popover-offset + 16px));
305
345
  }
306
346
 
307
347
  // Popover hover area placement
308
- .#{$prefix}--popover--right .#{$prefix}--popover-content::before,
309
- .#{$prefix}--popover--right-top .#{$prefix}--popover-content::before,
310
- .#{$prefix}--popover--right-bottom .#{$prefix}--popover-content::before {
348
+ .#{$prefix}--popover--right
349
+ > .#{$prefix}--popover
350
+ .#{$prefix}--popover-content::before,
351
+ .#{$prefix}--popover--right-top
352
+ > .#{$prefix}--popover
353
+ .#{$prefix}--popover-content::before,
354
+ .#{$prefix}--popover--right-bottom
355
+ > .#{$prefix}--popover
356
+ .#{$prefix}--popover-content::before {
311
357
  top: 0;
312
358
  bottom: 0;
313
359
  left: 0;
@@ -316,9 +362,13 @@ $popover-caret-height: custom-property.get-var(
316
362
  }
317
363
 
318
364
  // Caret placement
319
- .#{$prefix}--popover--right .#{$prefix}--popover-caret,
320
- .#{$prefix}--popover--right-top .#{$prefix}--popover-caret,
321
- .#{$prefix}--popover--right-bottom .#{$prefix}--popover-caret {
365
+ .#{$prefix}--popover--right > .#{$prefix}--popover .#{$prefix}--popover-caret,
366
+ .#{$prefix}--popover--right-top
367
+ > .#{$prefix}--popover
368
+ .#{$prefix}--popover-caret,
369
+ .#{$prefix}--popover--right-bottom
370
+ > .#{$prefix}--popover
371
+ .#{$prefix}--popover-caret {
322
372
  top: 50%;
323
373
  left: 100%;
324
374
  width: $popover-caret-height;
@@ -332,7 +382,9 @@ $popover-caret-height: custom-property.get-var(
332
382
  //-----------------------------------------------------------------------------
333
383
 
334
384
  // Popover content placement
335
- .#{$prefix}--popover--left .#{$prefix}--popover-content {
385
+ .#{$prefix}--popover--left
386
+ > .#{$prefix}--popover
387
+ .#{$prefix}--popover-content {
336
388
  top: 50%;
337
389
  right: 100%;
338
390
  // Add in 0.1px to prevent rounding errors where the content is
@@ -340,7 +392,9 @@ $popover-caret-height: custom-property.get-var(
340
392
  transform: translate(calc(-1 * $popover-offset + 0.1px), -50%);
341
393
  }
342
394
 
343
- .#{$prefix}--popover--left-top .#{$prefix}--popover-content {
395
+ .#{$prefix}--popover--left-top
396
+ > .#{$prefix}--popover
397
+ .#{$prefix}--popover-content {
344
398
  top: -50%;
345
399
  right: 100%;
346
400
  // Add in 0.1px to prevent rounding errors where the content is
@@ -351,7 +405,9 @@ $popover-caret-height: custom-property.get-var(
351
405
  );
352
406
  }
353
407
 
354
- .#{$prefix}--popover--left-bottom .#{$prefix}--popover-content {
408
+ .#{$prefix}--popover--left-bottom
409
+ > .#{$prefix}--popover
410
+ .#{$prefix}--popover-content {
355
411
  right: 100%;
356
412
  bottom: -50%;
357
413
  // Add in 0.1px to prevent rounding errors where the content is
@@ -363,9 +419,15 @@ $popover-caret-height: custom-property.get-var(
363
419
  }
364
420
 
365
421
  // Popover hover area placement
366
- .#{$prefix}--popover--left .#{$prefix}--popover-content::before,
367
- .#{$prefix}--popover--left-top .#{$prefix}--popover-content::before,
368
- .#{$prefix}--popover--left-bottom .#{$prefix}--popover-content::before {
422
+ .#{$prefix}--popover--left
423
+ > .#{$prefix}--popover
424
+ .#{$prefix}--popover-content::before,
425
+ .#{$prefix}--popover--left-top
426
+ > .#{$prefix}--popover
427
+ .#{$prefix}--popover-content::before,
428
+ .#{$prefix}--popover--left-bottom
429
+ > .#{$prefix}--popover
430
+ .#{$prefix}--popover-content::before {
369
431
  top: 0;
370
432
  right: 0;
371
433
  bottom: 0;
@@ -374,9 +436,13 @@ $popover-caret-height: custom-property.get-var(
374
436
  }
375
437
 
376
438
  // Caret placement
377
- .#{$prefix}--popover--left .#{$prefix}--popover-caret,
378
- .#{$prefix}--popover--left-top .#{$prefix}--popover-caret,
379
- .#{$prefix}--popover--left-bottom .#{$prefix}--popover-caret {
439
+ .#{$prefix}--popover--left > .#{$prefix}--popover .#{$prefix}--popover-caret,
440
+ .#{$prefix}--popover--left-top
441
+ > .#{$prefix}--popover
442
+ .#{$prefix}--popover-caret,
443
+ .#{$prefix}--popover--left-bottom
444
+ > .#{$prefix}--popover
445
+ .#{$prefix}--popover-caret {
380
446
  top: 50%;
381
447
  right: 100%;
382
448
  width: $popover-caret-height;
@@ -388,7 +454,9 @@ $popover-caret-height: custom-property.get-var(
388
454
  //-----------------------------------------------------------------------------
389
455
  // Tab Tip Variant
390
456
  //-----------------------------------------------------------------------------
391
- .#{$prefix}--popover--tab-tip .#{$prefix}--popover-content {
457
+ .#{$prefix}--popover--tab-tip
458
+ > .#{$prefix}--popover
459
+ .#{$prefix}--popover-content {
392
460
  border-radius: 0;
393
461
  }
394
462