@carbon/styles 1.38.0 → 1.39.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.38.0",
+  "version": "1.39.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -65,5 +65,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "33f414ff39064f1c432898ab8204b89b7b02cfb4"
+  "gitHead": "39b377be9e59d22de4a45c874227a6e2fe578557"
 }

package/scss/components/button/_button.scss

@@ -23,7 +23,7 @@
 
 @mixin button {
   .#{$prefix}--btn {
-    @include layout.use('size', $default: 'lg');
+    @include layout.use('size', $min: 'sm', $default: 'lg', $max: '2xl');
     @include layout.use('density', $default: 'normal');
 
     @include button-base;

package/scss/components/button/_mixins.scss

@@ -48,9 +48,9 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
   display: inline-flex;
   flex-shrink: 0;
   justify-content: space-between;
+  border-radius: $button-border-radius;
   // Fix to remove added margins on buttons in safari (see #5155)
   margin: 0;
-  border-radius: $button-border-radius;
   cursor: pointer;
   inline-size: max-content;
   max-inline-size: convert.to-rem(320px);

package/scss/components/checkbox/_checkbox.scss

@@ -23,12 +23,12 @@
   // Spacing between checkboxes
   .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper {
     position: relative;
-    margin-block-end: $spacing-02;
+    margin-block-end: convert.to-rem(6px);
   }
 
   // Spacing above collection of checkboxes
   .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:first-of-type {
-    margin-block-start: convert.to-rem(3px);
+    margin-block-start: 0;
   }
 
   // Shift collection of checkboxes up if label is present
@@ -61,15 +61,15 @@
     position: relative;
     display: flex;
     cursor: pointer;
-    min-block-size: convert.to-rem(24px);
-    padding-block-start: convert.to-rem(3px);
+    min-block-size: convert.to-rem(20px);
+    padding-block-start: convert.to-rem(2px);
     padding-inline-start: convert.to-rem(20px);
     user-select: none;
   }
 
   .#{$prefix}--checkbox-label-text {
     // Add extra spacing when label is present
-    padding-inline-start: convert.to-rem(6px);
+    padding-inline-start: convert.to-rem(10px);
   }
 
   // Required because `$css--reset: true` cannot currently apply to this `::before` and `::after`
@@ -86,14 +86,11 @@
     // text overflows.
     position: absolute;
     border: 1px solid $icon-primary;
-    // increase left margin for #6480
-    margin: convert.to-rem(2px) convert.to-rem(2px) convert.to-rem(2px)
-      convert.to-rem(3px);
+    border-radius: 2px;
 
     // Checkboxes with a background color look visually off against a parent container.
     background-color: transparent;
     block-size: convert.to-rem(16px);
-    border-radius: 2px;
     content: '';
 
     // According to the spec, we'll want the bounding box for our checkbox to
@@ -102,6 +99,10 @@
     inline-size: convert.to-rem(16px);
     inset-block-start: convert.to-rem(2px);
     inset-inline-start: 0;
+
+    // increase left margin for #6480
+    margin-block: convert.to-rem(1px) convert.to-rem(2px);
+    margin-inline: convert.to-rem(3px) 0;
   }
 
   // Create the appearance of the check in the `after` pseudo-element
@@ -113,7 +114,7 @@
     border-inline-start: 1.5px solid $icon-inverse;
     content: '';
     inline-size: convert.to-rem(9px);
-    inset-block-start: convert.to-rem(7.5px);
+    inset-block-start: convert.to-rem(6.5px);
     inset-inline-start: convert.to-rem(7px);
     margin-block-start: convert.to-rem(-3px);
     transform: scale(0) rotate(-45deg);
@@ -189,8 +190,8 @@
   //----------------------------------------------
   // Invalid + warn
   // ---------------------------------------------
-  .#{$prefix}--checkbox-group[data-invalid] .cds--checkbox-label::before,
-  .#{$prefix}--checkbox-wrapper--invalid .cds--checkbox-label::before,
+  .#{$prefix}--checkbox-group[data-invalid] .#{$prefix}--checkbox-label::before,
+  .#{$prefix}--checkbox-wrapper--invalid .#{$prefix}--checkbox-label::before,
   .#{$prefix}--checkbox-wrapper--invalid
     .#{$prefix}--checkbox:checked
     + .#{$prefix}--checkbox-label::before {
@@ -212,7 +213,7 @@
 
   .#{$prefix}--checkbox-group:not(.#{$prefix}--checkbox-group[data-invalid])
     .#{$prefix}--checkbox-wrapper--invalid
-    .cds--checkbox-label::before,
+    .#{$prefix}--checkbox-label::before,
   .#{$prefix}--checkbox-group:not(.#{$prefix}--checkbox-group[data-invalid])
     .#{$prefix}--checkbox-wrapper--invalid
     .#{$prefix}--checkbox:checked

package/scss/components/code-snippet/_code-snippet.scss

@@ -71,8 +71,8 @@ $copy-btn-feedback: $background-inverse !default;
     display: inline;
     padding: 0;
     border: 1px solid transparent;
-    background-color: $layer;
     border-radius: 4px;
+    background-color: $layer;
     color: $text-primary;
     cursor: pointer;
 

package/scss/components/data-table/_data-table.scss

@@ -367,9 +367,18 @@
   // Select
   //----------------------------------------------------------------------------
   .#{$prefix}--table-column-checkbox .#{$prefix}--checkbox-label {
+    min-block-size: $spacing-06;
     padding-inline-start: 0;
   }
 
+  .#{$prefix}--table-column-checkbox .#{$prefix}--checkbox-label::before {
+    margin-block-start: convert.to-rem(2px);
+  }
+
+  .#{$prefix}--table-column-checkbox .#{$prefix}--checkbox-label::after {
+    inset-block-start: convert.to-rem(7.5px);
+  }
+
   .#{$prefix}--data-table th.#{$prefix}--table-column-checkbox {
     // Do not use `position: relative`, as its behavior is undefined for many table elements: https://www.w3.org/TR/CSS21/visuren.html#propdef-position
     position: static;

package/scss/components/date-picker/_flatpickr.scss

@@ -95,8 +95,8 @@
     box-sizing: border-box;
     padding: 0;
     border: 0;
-    animation: none;
     border-radius: 0;
+    animation: none;
     direction: ltr;
     inline-size: convert.to-rem(315px);
     max-block-size: 0;

package/scss/components/list-box/_list-box.scss

@@ -464,9 +464,9 @@ $list-box-menu-width: convert.to-rem(300px);
     align-items: center;
     justify-content: space-between;
     padding: convert.to-rem(8px);
+    border-radius: convert.to-rem(12px);
     background-color: $background-inverse;
     block-size: convert.to-rem(24px);
-    border-radius: convert.to-rem(12px);
     color: $text-inverse;
     inline-size: auto;
     inset-block-start: auto;
@@ -485,8 +485,8 @@ $list-box-menu-width: convert.to-rem(300px);
     margin-inline-start: convert.to-rem(4px);
 
     &:hover {
-      background-color: $button-secondary-hover;
       border-radius: 50%;
+      background-color: $button-secondary-hover;
     }
   }
 

package/scss/components/number-input/_number-input.scss

@@ -45,6 +45,7 @@
     display: inline-flex;
     box-sizing: border-box;
     border: 0;
+    border-radius: 0;
 
     // Firefox: Hide spinner (up and down buttons)
     -moz-appearance: textfield;
@@ -52,7 +53,6 @@
     background-color: $field;
     block-size: convert.to-rem(40px);
     border-block-end: convert.to-rem(1px) solid $border-strong;
-    border-radius: 0;
     color: $text-primary;
     font-family: font-family('sans');
     font-weight: 400;

package/scss/components/popover/_popover.scss

@@ -130,8 +130,8 @@ $popover-caret-height: custom-property.get-var(
     position: absolute;
     z-index: z('floating');
     display: none;
-    background-color: $popover-background-color;
     border-radius: $popover-border-radius;
+    background-color: $popover-background-color;
     color: $popover-text-color;
     inline-size: max-content;
     max-inline-size: convert.to-rem(368px);

package/scss/components/progress-indicator/_progress-indicator.scss

@@ -70,8 +70,8 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     position: relative;
     z-index: 1;
     flex-shrink: 0;
-    block-size: $spacing-05;
     border-radius: 50%;
+    block-size: $spacing-05;
     fill: $interactive;
     inline-size: $spacing-05;
     margin-block-start: convert.to-rem(10px);

package/scss/components/radio-button/_radio-button.scss

@@ -54,7 +54,6 @@ $radio-border-width: 1px !default;
     }
 
     .#{$prefix}--radio-button__label {
-      line-height: 1.25;
       margin-inline-end: 0;
     }
 
@@ -70,25 +69,32 @@ $radio-border-width: 1px !default;
   }
 
   .#{$prefix}--radio-button__label {
-    @include type.type-style('body-compact-01');
-
     display: flex;
     align-items: center;
     cursor: pointer;
     margin-inline-end: $spacing-05;
   }
 
+  .#{$prefix}--radio-button__label-text {
+    @include type.type-style('body-compact-01');
+  }
+
   .#{$prefix}--radio-button__appearance {
     @include reset;
 
     flex-shrink: 0;
     border: $radio-border-width solid $icon-primary;
+    border-radius: 50%;
     background-color: transparent;
     block-size: convert.to-rem(18px);
-    border-radius: 50%;
     inline-size: convert.to-rem(18px);
     margin-block: convert.to-rem(1px) convert.to-rem(2px);
-    margin-inline: convert.to-rem(2px) $spacing-03;
+    margin-inline: convert.to-rem(2px) convert.to-rem(10px);
+  }
+
+  .#{$prefix}--radio-button-group--vertical
+    .#{$prefix}--radio-button__appearance {
+    margin-block: 0;
   }
 
   .#{$prefix}--radio-button:checked
@@ -102,9 +108,9 @@ $radio-border-width: 1px !default;
     &::before {
       position: relative;
       display: inline-block;
+      border-radius: 50%;
       background-color: $icon-primary;
       block-size: 100%;
-      border-radius: 50%;
       content: '';
       inline-size: 100%;
       transform: scale(0.5);
@@ -244,12 +250,17 @@ $radio-border-width: 1px !default;
     margin-inline-end: $spacing-05;
   }
 
-  .#{$prefix}--radio-button-group--vertical
-    .#{$prefix}--radio-button-wrapper:not(:last-of-type) {
-    margin-block-end: $spacing-03;
+  .#{$prefix}--radio-button-group--vertical .#{$prefix}--radio-button-wrapper {
+    margin-block-end: convert.to-rem(6px);
     margin-inline-end: 0;
   }
 
+  .#{$prefix}--radio-button-group--vertical
+    .#{$prefix}--radio-button-wrapper
+    .#{$prefix}--radio-button__label {
+    padding-block-start: convert.to-rem(2px);
+  }
+
   .#{$prefix}--radio-button-group--label-right .#{$prefix}--radio-button__label,
   .#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-right
     .#{$prefix}--radio-button__label {

package/scss/components/select/_select.scss

@@ -45,11 +45,11 @@
 
     display: block;
     border: none;
+    border-radius: 0;
     appearance: none;
     background-color: $field;
     block-size: convert.to-rem(40px);
     border-block-end: 1px solid $border-strong;
-    border-radius: 0;
     color: $text-primary;
     cursor: pointer;
     font-family: inherit;

package/scss/components/slider/_slider.scss

@@ -88,9 +88,9 @@
   .#{$prefix}--slider__thumb {
     position: absolute;
     z-index: 3;
+    border-radius: 50%;
     background: $layer-selected-inverse;
     block-size: convert.to-rem(14px);
-    border-radius: 50%;
     box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px transparent;
     inline-size: convert.to-rem(14px);
     outline: none;

package/scss/components/tag/_tag.scss

@@ -44,8 +44,8 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    margin: $spacing-02;
     border-radius: convert.to-rem(15px);
+    margin: $spacing-02;
     cursor: default;
     // restricts size of contained elements
     max-inline-size: 100%;
@@ -186,10 +186,10 @@
     justify-content: center;
     padding: 0;
     border: 0;
+    border-radius: 50%;
     margin: 0 0 0 convert.to-rem(2px);
     background-color: transparent;
     block-size: layout.size('height');
-    border-radius: 50%;
     color: currentColor;
     cursor: pointer;
     inline-size: layout.size('height');

package/scss/components/toggle/_toggle.scss

@@ -51,17 +51,17 @@
 
   .#{$prefix}--toggle__switch {
     position: relative;
+    border-radius: convert.to-rem(12px);
     background-color: $toggle-off;
     block-size: convert.to-rem(24px);
-    border-radius: convert.to-rem(12px);
     inline-size: convert.to-rem(48px);
     transition: background-color $duration-fast-01 motion(exit, productive);
 
     &::before {
       position: absolute;
+      border-radius: 50%;
       background-color: $icon-on-color;
       block-size: convert.to-rem(18px);
-      border-radius: 50%;
       content: '';
       inline-size: convert.to-rem(18px);
       inset-block-start: convert.to-rem(3px);
@@ -204,9 +204,8 @@
   .#{$prefix}--toggle--skeleton .#{$prefix}--toggle__skeleton-circle {
     @include circular-skeleton;
 
-    block-size: convert.to-rem(18px);
     border-radius: 50%;
-
+    block-size: convert.to-rem(18px);
     inline-size: convert.to-rem(18px);
   }
 
@@ -214,7 +213,6 @@
     @include skeleton;
 
     block-size: convert.to-rem(8px);
-
     inline-size: convert.to-rem(24px);
     margin-inline-start: convert.to-rem(8px);
   }

package/scss/components/tooltip/_tooltip.scss

@@ -35,9 +35,7 @@ $tooltip-padding-inline: custom-property.get-var(
     @include type.type-style('body-01');
 
     padding: $tooltip-padding-block $tooltip-padding-inline;
-
     color: theme.$text-inverse;
-
     max-inline-size: convert.to-rem(288px);
   }
 }
@@ -46,9 +44,8 @@ $tooltip-padding-inline: custom-property.get-var(
   .#{$prefix}--definition-term {
     @include button-reset.reset;
 
-    border-block-end: 1px dotted theme.$border-strong;
     border-radius: 0;
-
+    border-block-end: 1px dotted theme.$border-strong;
     color: theme.$text-primary;
   }
 
@@ -66,7 +63,6 @@ $tooltip-padding-inline: custom-property.get-var(
     @include type.type-style('body-01');
 
     padding: convert.to-rem(8px) convert.to-rem(16px);
-
     max-inline-size: convert.to-rem(176px);
   }
 }

package/scss/utilities/_skeleton.scss

@@ -50,8 +50,8 @@
 @mixin circular-skeleton {
   position: relative;
   overflow: hidden;
-  background: $skeleton-background;
   border-radius: 50%;
+  background: $skeleton-background;
 
   &::before {
     position: absolute;

package/scss/utilities/_tooltip.scss

@@ -41,9 +41,9 @@
     convert.to-rem(8px) convert.to-rem(16px),
     convert.to-rem(3px) convert.to-rem(16px)
   );
+  border-radius: convert.to-rem(2px);
   background-color: $background-inverse;
   block-size: auto;
-  border-radius: convert.to-rem(2px);
   color: $text-inverse;
   font-weight: 400;
   inline-size: max-content;