@carbon/styles 1.24.0 → 1.26.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 (25) hide show
  1. package/css/styles.css +369 -42
  2. package/css/styles.min.css +1 -1
  3. package/package.json +2 -2
  4. package/scss/components/_index.scss +2 -0
  5. package/scss/components/checkbox/_checkbox.scss +4 -4
  6. package/scss/components/code-snippet/_code-snippet.scss +6 -0
  7. package/scss/components/combo-button/_combo-button.scss +47 -0
  8. package/scss/components/combo-button/_index.scss +11 -0
  9. package/scss/components/data-table/action/_data-table-action.scss +2 -3
  10. package/scss/components/file-uploader/_file-uploader.scss +3 -0
  11. package/scss/components/fluid-multiselect/_fluid-multiselect.scss +10 -0
  12. package/scss/components/fluid-number-input/_fluid-number-input.scss +4 -1
  13. package/scss/components/fluid-select/_fluid-select.scss +1 -1
  14. package/scss/components/fluid-text-area/_fluid-text-area.scss +45 -13
  15. package/scss/components/form/_form.scss +2 -1
  16. package/scss/components/menu/_menu.scss +10 -2
  17. package/scss/components/menu-button/_index.scss +11 -0
  18. package/scss/components/menu-button/_menu-button.scss +27 -0
  19. package/scss/components/modal/_modal.scss +43 -1
  20. package/scss/components/multiselect/_multiselect.scss +17 -6
  21. package/scss/components/popover/_popover.scss +48 -0
  22. package/scss/components/radio-button/_radio-button.scss +57 -0
  23. package/scss/components/tabs/_tabs.scss +27 -3
  24. package/scss/components/text-area/_text-area.scss +10 -0
  25. package/scss/components/treeview/_treeview.scss +11 -6
package/scss/components/tabs/_tabs.scss CHANGED
@@ -279,7 +279,6 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
279
279
  }
280
280
 
281
281
  overflow: hidden;
282
- max-width: 10rem;
283
282
  padding: $spacing-04 $spacing-05 $spacing-03;
284
283
  border-bottom: $tab-underline-color;
285
284
  color: $text-secondary;
@@ -300,10 +299,25 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
300
299
  height: rem(48px);
301
300
  padding: $spacing-03 $spacing-05;
302
301
  border-bottom: 0;
302
+ }
303
+
304
+ &.#{$prefix}--tabs--contained:not(.#{$prefix}--tabs--tall)
305
+ .#{$prefix}--tabs__nav-item-label {
303
306
  // height - vertical padding
304
307
  line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
305
308
  }
306
309
 
310
+ &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item-secondary-label {
311
+ @include type-style('label-01');
312
+
313
+ min-height: rem(16px);
314
+ }
315
+
316
+ &.#{$prefix}--tabs--contained.#{$prefix}--tabs--tall
317
+ .#{$prefix}--tabs__nav-link {
318
+ height: rem(64px);
319
+ }
320
+
307
321
  //-----------------------------
308
322
  // Icon Item
309
323
  //-----------------------------
@@ -320,6 +334,10 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
320
334
  align-items: center;
321
335
  justify-content: center;
322
336
  padding: 0;
337
+
338
+ .#{$prefix}--tabs__nav-item-label {
339
+ line-height: 0;
340
+ }
323
341
  }
324
342
 
325
343
  &.#{$prefix}--tabs__icon--lg {
@@ -364,11 +382,17 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
364
382
  color: $text-primary;
365
383
  }
366
384
 
385
+ &.#{$prefix}--tabs--contained:not(.#{$prefix}--tabs--tall)
386
+ .#{$prefix}--tabs__nav-item--selected,
387
+ &.#{$prefix}--tabs--contained:not(.#{$prefix}--tabs--tall)
388
+ .#{$prefix}--tabs__nav-item--selected:hover {
389
+ // height - vertical padding
390
+ line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
391
+ }
392
+
367
393
  &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--selected,
368
394
  &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--selected:hover {
369
395
  background-color: $layer;
370
- // height - vertical padding
371
- line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
372
396
 
373
397
  .#{$prefix}--tabs__nav-link:focus,
374
398
  .#{$prefix}--tabs__nav-link:active {
package/scss/components/text-area/_text-area.scss CHANGED
@@ -6,6 +6,7 @@
6
6
  //
7
7
 
8
8
  @use '../form';
9
+ @use '../../colors' as *;
9
10
  @use '../../config' as *;
10
11
  @use '../../motion' as *;
11
12
  @use '../../spacing' as *;
@@ -71,6 +72,15 @@
71
72
  fill: $support-error;
72
73
  }
73
74
 
75
+ .#{$prefix}--text-area__invalid-icon--warning {
76
+ fill: $support-warning;
77
+ }
78
+
79
+ .#{$prefix}--text-area__invalid-icon--warning path[fill] {
80
+ fill: $black-100;
81
+ opacity: 1;
82
+ }
83
+
74
84
  .#{$prefix}--text-area__counter-alert {
75
85
  position: absolute;
76
86
  overflow: hidden;
package/scss/components/treeview/_treeview.scss CHANGED
@@ -73,9 +73,6 @@
73
73
  min-height: rem(32px);
74
74
  flex: 1;
75
75
  align-items: center;
76
- // (min-height 32px - single line text height 18px) / 2 = 7px
77
- padding-top: rem(7px);
78
- padding-bottom: rem(7px);
79
76
 
80
77
  &:hover {
81
78
  background-color: $layer-hover-01;
@@ -83,6 +80,12 @@
83
80
  }
84
81
  }
85
82
 
83
+ .cds--tree-node:not(.cds--tree-parent-node) .#{$prefix}--tree-node__label {
84
+ // (min-height 32px - single line text height 18px) / 2 = 7px
85
+ padding-top: rem(7px);
86
+ padding-bottom: rem(7px);
87
+ }
88
+
86
89
  .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__label__details {
87
90
  color: $text-primary;
88
91
  }
@@ -113,12 +116,14 @@
113
116
 
114
117
  .#{$prefix}--tree-parent-node__toggle {
115
118
  display: flex;
119
+ width: rem(24px);
120
+ height: rem(24px);
116
121
  align-items: center;
117
122
  align-self: flex-start;
118
- // increase 16px container height to 18px to match text bounding box
119
- padding: rem(1px) 0;
123
+ padding-left: $spacing-02;
120
124
  border: 0;
121
- margin-right: $spacing-03;
125
+ margin-top: $spacing-02;
126
+ margin-right: $spacing-02;
122
127
 
123
128
  &:hover {
124
129
  cursor: pointer;