@carbon/styles 1.30.0 → 1.31.0

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

@@ -123,6 +123,46 @@
     text-align: left;
     vertical-align: middle;
   }
+  .#{$prefix}--data-table.#{$prefix}--data-table--top-aligned-body {
+    &.#{$prefix}--data-table--lg
+      tr:not([data-child-row])
+      td:not(.#{$prefix}--table-expand) {
+      padding-top: $spacing-05;
+      padding-bottom: $spacing-05;
+
+      &.#{$prefix}--table-column-menu {
+        padding-top: $spacing-03;
+      }
+
+      &.#{$prefix}--table-column-checkbox:not(.#{$prefix}--table-column-radio) {
+        padding-top: rem(13px);
+      }
+    }
+
+    td {
+      vertical-align: top;
+    }
+  }
+
+  .#{$prefix}--data-table.#{$prefix}--data-table--top-aligned-header {
+    &.#{$prefix}--data-table--lg
+      th:not(.#{$prefix}--table-expand):not(.#{$prefix}--table-sort__header) {
+      padding-top: $spacing-05;
+      padding-bottom: $spacing-05;
+
+      &.#{$prefix}--table-column-menu {
+        padding-top: $spacing-03;
+      }
+
+      &.#{$prefix}--table-column-checkbox {
+        padding-top: rem(13px);
+      }
+    }
+
+    th {
+      vertical-align: top;
+    }
+  }
 
   .#{$prefix}--data-table th[align='right'],
   .#{$prefix}--data-table td[align='right'] {
@@ -495,8 +535,14 @@
     height: calc(100% + 1px);
   }
 
-  .#{$prefix}--data-table.#{$prefix}--data-table--xs
-    .#{$prefix}--table-column-checkbox {
+  .#{$prefix}--data-table.#{$prefix}--data-table--xs:not(
+      .#{$prefix}--data-table--top-aligned-body
+    )
+    td.#{$prefix}--table-column-checkbox,
+  .#{$prefix}--data-table.#{$prefix}--data-table--xs:not(
+      .#{$prefix}--data-table--top-aligned-header
+    )
+    th.#{$prefix}--table-column-checkbox {
     padding-top: 0;
     padding-bottom: 0;
   }
@@ -524,13 +570,21 @@
   }
 
   .#{$prefix}--data-table--sm td,
-  .#{$prefix}--data-table--sm tbody tr th {
+  .#{$prefix}--data-table--sm tbody tr th,
+  .#{$prefix}--data-table--sm.#{$prefix}--data-table--top-aligned-header
+    th.#{$prefix}--table-column-checkbox {
     padding-top: rem(7px);
     padding-bottom: rem(6px);
   }
 
-  .#{$prefix}--data-table.#{$prefix}--data-table--sm
-    .#{$prefix}--table-column-checkbox {
+  .#{$prefix}--data-table.#{$prefix}--data-table--sm:not(
+      .#{$prefix}--data-table--top-aligned-body
+    )
+    td.#{$prefix}--table-column-checkbox,
+  .#{$prefix}--data-table.#{$prefix}--data-table--sm:not(
+      .#{$prefix}--data-table--top-aligned-header
+    )
+    th.#{$prefix}--table-column-checkbox {
     padding-top: rem(3px);
     padding-bottom: rem(3px);
   }
@@ -548,7 +602,9 @@
     height: rem(40px);
   }
 
-  .#{$prefix}--data-table--md .#{$prefix}--table-header-label {
+  .#{$prefix}--data-table--md .#{$prefix}--table-header-label,
+  .#{$prefix}--data-table--md.#{$prefix}--data-table--top-aligned-header
+    th.#{$prefix}--table-column-checkbox {
     padding-top: rem(7px);
     padding-bottom: rem(7px);
   }
@@ -559,8 +615,14 @@
     padding-bottom: rem(6px);
   }
 
-  .#{$prefix}--data-table.#{$prefix}--data-table--md
-    .#{$prefix}--table-column-checkbox {
+  .#{$prefix}--data-table.#{$prefix}--data-table--md:not(
+      .#{$prefix}--data-table--top-aligned-body
+    )
+    td.#{$prefix}--table-column-checkbox,
+  .#{$prefix}--data-table.#{$prefix}--data-table--md:not(
+      .#{$prefix}--data-table--top-aligned-header
+    )
+    th.#{$prefix}--table-column-checkbox {
     padding-top: rem(3px);
     padding-bottom: rem(3px);
   }
@@ -586,7 +648,8 @@
 
   .#{$prefix}--data-table--xl td,
   .#{$prefix}--data-table--xl tbody tr th {
-    padding-top: 1rem;
+    padding-top: $spacing-05;
+    padding-bottom: $spacing-05;
   }
 
   .#{$prefix}--data-table--xl th,

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

@@ -216,10 +216,41 @@
     height: calc(100% + 1px);
     align-items: center;
     justify-content: center;
-    padding: 0 0.5rem;
+    padding: 0 $spacing-03;
     vertical-align: inherit;
   }
 
+  .#{$prefix}--data-table--top-aligned-body
+    td
+    .#{$prefix}--table-expand__button,
+  .#{$prefix}--data-table--top-aligned-header
+    th
+    .#{$prefix}--table-expand__button {
+    height: rem(32px);
+    align-items: start;
+    padding-top: $spacing-03;
+  }
+
+  .#{$prefix}--data-table--top-aligned-body.#{$prefix}--data-table--xs
+    td
+    .#{$prefix}--table-expand__button,
+  .#{$prefix}--data-table--top-aligned-header.#{$prefix}--data-table--xs
+    th
+    .#{$prefix}--table-expand__button {
+    height: rem(24px);
+    padding-top: $spacing-02;
+  }
+
+  .#{$prefix}--data-table--top-aligned-body.#{$prefix}--data-table--md
+    td
+    .#{$prefix}--table-expand__button,
+  .#{$prefix}--data-table--top-aligned-header.#{$prefix}--data-table--md
+    th
+    .#{$prefix}--table-expand__button {
+    padding-top: $spacing-03;
+    margin-top: -$spacing-02;
+  }
+
   .#{$prefix}--table-expand__button:focus {
     box-shadow: inset 0 0 0 2px $focus;
     outline: none;
@@ -233,7 +264,6 @@
 
   .#{$prefix}--data-table--xl .#{$prefix}--table-expand__button {
     width: rem(32px);
-    padding: 0;
   }
 
   // fix expanded parent separating border length

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

@@ -90,6 +90,39 @@
     justify-content: space-between;
   }
 
+  .#{$prefix}--data-table--top-aligned-header th .#{$prefix}--table-sort__flex {
+    align-items: start;
+  }
+
+  .#{$prefix}--data-table.#{$prefix}--data-table--top-aligned-header.#{$prefix}--data-table--lg
+    th.#{$prefix}--table-sort__header {
+    padding-top: $spacing-05;
+  }
+
+  .#{$prefix}--data-table.#{$prefix}--data-table--top-aligned-header.#{$prefix}--data-table--sm
+    th.#{$prefix}--table-sort__header
+    .#{$prefix}--table-sort__flex
+    .#{$prefix}--table-header-label,
+  .#{$prefix}--data-table.#{$prefix}--data-table--top-aligned-header.#{$prefix}--data-table--xs
+    th.#{$prefix}--table-sort__header
+    .#{$prefix}--table-sort__flex
+    .#{$prefix}--table-header-label {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .#{$prefix}--data-table.#{$prefix}--data-table--top-aligned-header.#{$prefix}--data-table--sm
+    th.#{$prefix}--table-sort__header {
+    padding-top: rem(7px);
+    padding-bottom: rem(7px);
+  }
+
+  .#{$prefix}--data-table.#{$prefix}--data-table--top-aligned-header.#{$prefix}--data-table--xs
+    th.#{$prefix}--table-sort__header {
+    padding-top: rem(2px);
+    padding-bottom: rem(2px);
+  }
+
   .#{$prefix}--data-table--sort:not(.#{$prefix}--data-table--xs):not(
       .#{$prefix}--data-table--sm
     ):not(.#{$prefix}--data-table--md):not(.#{$prefix}--data-table--xl)

package/scss/components/form/_form.scss

@@ -140,6 +140,7 @@ $input-label-weight: 400 !default;
   .#{$prefix}--date-picker-input__wrapper--warn,
   .#{$prefix}--date-picker-input__wrapper--invalid,
   .#{$prefix}--time-picker--invalid,
+  .#{$prefix}--time-picker--warning,
   .#{$prefix}--text-input__field-wrapper[data-invalid],
   .#{$prefix}--text-input__field-wrapper--warning,
   .#{$prefix}--text-input__field-wrapper--warning > .#{$prefix}--text-input,

package/scss/components/menu/_menu.scss

@@ -106,6 +106,10 @@
     white-space: nowrap;
   }
 
+  .#{$prefix}--menu-item__shortcut {
+    display: flex;
+  }
+
   .#{$prefix}--menu--with-icons > .#{$prefix}--menu-item,
   .#{$prefix}--menu--with-icons
     > .#{$prefix}--menu-item-group

package/scss/components/overflow-menu/_overflow-menu.scss

@@ -47,6 +47,10 @@
     }
   }
 
+  .#{$prefix}--overflow-menu > :first-child {
+    margin-block-start: 0;
+  }
+
   .#{$prefix}--overflow-menu--sm {
     width: rem(32px);
     height: rem(32px);

package/scss/components/pagination/_pagination.scss

@@ -217,6 +217,11 @@
       background-color $duration-fast-02 motion(standard, productive);
   }
 
+  .#{$prefix}--pagination__button > svg,
+  .#{$prefix}--btn--ghost.#{$prefix}--pagination__button > svg {
+    margin-block-start: 0;
+  }
+
   .#{$prefix}--pagination--sm .#{$prefix}--pagination__button,
   .#{$prefix}--pagination--sm
     .#{$prefix}--btn--ghost.#{$prefix}--pagination__button {

package/scss/components/popover/_popover.scss

@@ -14,6 +14,7 @@
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/' as *;
 @use '../../utilities/convert' as *;
+@use '../../utilities/layout';
 
 /// The Popover component is used for triggering a pop-up next to a trigger
 /// element, typically a button, in a given direction. It is made up of several

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

@@ -12,19 +12,24 @@
 @use '../../type' as *;
 @use '../../utilities/convert' as *;
 @use '../../utilities/visually-hidden' as *;
+@use '../../utilities/layout';
 
 /// Progress Bar styles
 /// @access public
 /// @group progress-bar
 @mixin progress-bar {
+  .#{$prefix}--progress-bar {
+    @include layout.use('density', $default: 'normal');
+  }
+
   .#{$prefix}--progress-bar__label {
     @include type-style('body-compact-01');
 
     display: flex;
     min-width: rem(48px);
     justify-content: space-between;
-    margin-bottom: $spacing-03;
     color: $text-primary;
+    margin-block-end: $spacing-03;
   }
 
   .#{$prefix}--progress-bar__label-text {
@@ -90,7 +95,7 @@
 
   .#{$prefix}--progress-bar__status-icon {
     flex-shrink: 0;
-    margin-left: $spacing-05;
+    margin-inline-start: layout.density('padding-inline');
   }
 
   .#{$prefix}--progress-bar--finished .#{$prefix}--progress-bar__bar,
@@ -122,7 +127,7 @@
     .#{$prefix}--progress-bar__label {
     flex-shrink: 1;
     justify-content: flex-start;
-    margin-right: 0;
+    margin-inline-end: 0;
   }
 
   @keyframes progress-bar-indeterminate {
@@ -144,7 +149,7 @@
   .#{$prefix}--progress-bar--inline .#{$prefix}--progress-bar__label {
     flex-shrink: 0;
     margin-bottom: 0;
-    margin-inline-end: $spacing-05;
+    margin-inline-end: layout.density('padding-inline');
   }
 
   .#{$prefix}--progress-bar--inline .#{$prefix}--progress-bar__track {
@@ -158,6 +163,6 @@
 
   .#{$prefix}--progress-bar--indented .#{$prefix}--progress-bar__label,
   .#{$prefix}--progress-bar--indented .#{$prefix}--progress-bar__helper-text {
-    padding-inline: $spacing-05;
+    padding-inline: layout.density('padding-inline');
   }
 }

package/scss/components/slider/_slider.scss

@@ -46,7 +46,7 @@
   }
 
   .#{$prefix}--slider__range-label {
-    @include type-style('code-02');
+    @include type-style('body-compact-01');
 
     color: $text-primary;
     white-space: nowrap;

package/scss/components/tabs/_tabs.scss

@@ -326,12 +326,18 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
       .#{$prefix}--tabs__nav-item--close-icon {
         padding: $spacing-02;
         margin: -$spacing-02;
-        cursor: pointer;
         line-height: 0;
         pointer-events: auto;
       }
     }
 
+    .#{$prefix}--tabs__nav-item--icon-left {
+      display: flex;
+      align-items: center;
+      padding-right: $spacing-03;
+      margin-top: -2px;
+    }
+
     &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--icon {
       padding-left: $spacing-05;
     }

package/scss/components/tag/_tag.scss

@@ -13,6 +13,7 @@
 @use '../../utilities/component-tokens' as *;
 @use '../../utilities/convert' as *;
 @use '../../utilities/high-contrast-mode' as *;
+@use '../../utilities/layout';
 @use '../../spacing' as *;
 @use './tokens' as *;
 @use './mixins' as *;
@@ -23,6 +24,20 @@
 /// @group tag
 @mixin tag {
   .#{$prefix}--tag {
+    @include layout.redefine-tokens(
+      (
+        size: (
+          height: (
+            xs: rem(18px),
+            sm: rem(18px),
+            md: rem(24px),
+          ),
+        ),
+      )
+    );
+
+    @include layout.use('size', $default: 'md', $min: 'sm', $max: 'md');
+
     @include type-style('label-01');
     @include tag-theme($tag-background-gray, $tag-color-gray, $tag-hover-gray);
 
@@ -31,13 +46,13 @@
     min-width: rem(32px);
     // restricts size of contained elements
     max-width: 100%;
-    min-height: rem(24px);
+    min-height: layout.size('height');
     align-items: center;
     justify-content: center;
-    padding: $spacing-02 $spacing-03;
     margin: $spacing-02;
     border-radius: rem(15px);
     cursor: default;
+    padding-inline: $spacing-03;
     vertical-align: middle;
     word-break: break-word;
 
@@ -166,8 +181,8 @@
 
   .#{$prefix}--tag__close-icon {
     display: flex;
-    width: rem(24px);
-    height: rem(24px);
+    width: layout.size('height');
+    height: layout.size('height');
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
@@ -225,19 +240,11 @@
     fill: $icon-disabled;
   }
 
-  // small tags
-  .#{$prefix}--tag--sm {
-    min-height: rem(18px);
-    padding: 0 $spacing-03;
-  }
-
   .#{$prefix}--tag--sm.#{$prefix}--tag--filter {
     padding-right: 0;
   }
 
   .#{$prefix}--tag--sm .#{$prefix}--tag__close-icon {
-    width: rem(18px);
-    height: rem(18px);
     margin-left: rem(5px);
   }
 

package/scss/components/text-input/_text-input.scss

@@ -21,6 +21,7 @@
 @use '../../utilities/skeleton' as *;
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/convert' as *;
+@use '../../utilities/layout';
 
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/button-reset';
@@ -31,13 +32,16 @@
 /// @group text-input
 @mixin text-input {
   .#{$prefix}--text-input {
+    @include layout.use('size', $default: 'md', $min: 'sm', $max: 'lg');
+    @include layout.use('density', $default: 'normal');
+
     @include reset;
     @include type-style('body-compact-01');
     @include focus-outline('reset');
 
     width: 100%;
-    height: rem(40px);
-    padding: 0 $spacing-05;
+    height: layout.size('height');
+    padding: 0 layout.density('padding-inline');
     border: none;
     border-bottom: 1px solid $border-strong;
     background-color: $field;
@@ -56,14 +60,6 @@
     }
   }
 
-  .#{$prefix}--text-input--lg {
-    height: rem(48px);
-  }
-
-  .#{$prefix}--text-input--sm {
-    height: rem(32px);
-  }
-
   .#{$prefix}--password-input {
     padding-right: $spacing-08;
   }

package/scss/components/time-picker/_time-picker.scss

@@ -32,10 +32,22 @@
   }
 
   .#{$prefix}--time-picker__input {
+    position: relative;
     display: flex;
     flex-direction: column;
   }
 
+  .#{$prefix}--time-picker__error__icon {
+    position: absolute;
+    top: 50%;
+    right: 1rem;
+    display: flex;
+    height: 100%;
+    place-items: center;
+    // top/transform used to center invalid icon in IE11
+    transform: translateY(-50%);
+  }
+
   .#{$prefix}--time-picker .#{$prefix}--select-input {
     width: auto;
     min-width: auto;
@@ -60,6 +72,10 @@
     }
   }
 
+  .#{$prefix}--time-picker__input-field-error {
+    width: 6.175rem;
+  }
+
   // V11: Possibly deprecate
   .#{$prefix}--time-picker--light .#{$prefix}--select-input {
     background-color: $field-02;

package/scss/components/ui-shell/header/_header.scss

@@ -48,6 +48,10 @@
     }
   }
 
+  .#{$prefix}--header__action > :first-child {
+    margin-block-start: 0;
+  }
+
   .#{$prefix}--header__action
     > svg.#{$prefix}--navigation-menu-panel-collapse-icon,
   .#{$prefix}--header__action--active

package/scss/components/ui-shell/side-nav/_side-nav.scss

@@ -68,9 +68,6 @@
     width: 0;
   }
 
-  .#{$prefix}--side-nav.#{$prefix}--side-nav--rail:not(
-      .#{$prefix}--side-nav--fixed
-    ):hover,
   .#{$prefix}--side-nav--expanded {
     width: mini-units(32);
   }

package/scss/utilities/_index.scss

@@ -13,6 +13,7 @@
 @forward 'hide-at-breakpoint';
 @forward 'high-contrast-mode';
 @forward 'keyframes';
+@forward 'layout';
 @forward 'placeholder-colors';
 @forward 'rotate';
 @forward 'skeleton';

package/scss/utilities/_layout.scss

@@ -0,0 +1,134 @@
+//
+// Copyright IBM Corp. 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use 'sass:map';
+
+@use '../config';
+@use '../spacing' as *;
+@use './custom-property';
+@use './convert' as *;
+
+$tokens: (
+  size: (
+    height: (
+      xs: rem(24px),
+      sm: rem(32px),
+      md: rem(40px),
+      lg: rem(48px),
+      xl: rem(64px),
+      2xl: rem(80px),
+    ),
+  ),
+  density: (
+    padding-inline: (
+      condensed: $spacing-03,
+      normal: $spacing-05,
+    ),
+  ),
+);
+
+/// Enables the use of contextual layout tokens within a component. This mixin should be
+/// included on the outermost selector of the component.
+/// @param {String} $group - The layout group to use for this component
+/// @param {String} $default - The default step if the component is not within a layout
+/// @param {String} $min - The minimum step supported by this component (optional)
+/// @param {String} $max - The maximum step supported by this component (optional)
+/// @example @include use('size', $default: 'md', $min: 'sm', $max: 'lg')
+/// @group utilities
+/// @access public
+@mixin use($group, $default, $min: null, $max: null) {
+  $properties: map.get($tokens, $group);
+
+  @each $property, $steps in $properties {
+    $minValue: custom-property.get-var('layout-#{$group}-#{$property}-min');
+    @if $min {
+      $minValue: max(
+        $minValue,
+        custom-property.get-var('layout-#{$group}-#{$property}-#{$min}')
+      );
+    }
+
+    $maxValue: custom-property.get-var('layout-#{$group}-#{$property}-max');
+    @if $max {
+      $maxValue: min(
+        $maxValue,
+        custom-property.get-var('layout-#{$group}-#{$property}-#{$max}')
+      );
+    }
+
+    $value: clamp(
+      $minValue,
+      custom-property.get-var(
+        'layout-#{$group}-#{$property}',
+        custom-property.get-var('layout-#{$group}-#{$property}-#{$default}')
+      ),
+      $maxValue
+    );
+
+    @include custom-property.declaration(
+      'layout-#{$group}-#{$property}-local',
+      $value
+    );
+  }
+}
+
+/// Allows to redefine any token values of the layout module in case a component is using
+/// non-standard values and should still participate in the layout context
+/// @param {Map} $overrides - The map of overrides. Must follow ( group: ( property: ( step: value ) ) )
+/// @example @include redefine-tokens(( size: ( height: ( sm: 1.125rem, md: 1.5rem ) ) ))
+/// @group utilities
+/// @access public
+@mixin redefine-tokens($overrides) {
+  @each $group, $properties in $overrides {
+    @each $property, $steps in $properties {
+      @each $step, $value in $steps {
+        @include custom-property.declaration(
+          'layout-#{$group}-#{$property}-#{$step}',
+          $value
+        );
+
+        .#{config.$prefix}--layout--#{$group}-#{$step} & {
+          $token: custom-property.get-var(
+            'layout-#{$group}-#{$property}-#{$step}'
+          );
+          @include custom-property.declaration(
+            'layout-#{$group}-#{$property}',
+            $token
+          );
+        }
+      }
+    }
+  }
+}
+
+/// Internal base function for retrieving a property from a layout group.
+/// @param {String} $group - The group name as defined in the $tokens
+/// @param {String} $property - The property name
+/// @example @include -group('size', $property)
+/// @group utilities
+/// @access private
+@function -group($group, $property) {
+  @return custom-property.get-var('layout-#{$group}-#{$property}-local');
+}
+
+/// Retrieves the current value for a property token in the layout size.
+/// @param {String} $property - The property name
+/// @example height: size('height');
+/// @group utilities
+/// @access public
+@function size($property) {
+  @return -group('size', $property);
+}
+
+/// Retrieves the current value for a property token in the layout density.
+/// @param {String} $property - The property name
+/// @example padding-inline: density('padding-inline');
+/// @group utilities
+/// @access public
+@function density($property) {
+  @return -group('density', $property);
+}