@carbon/styles 1.30.0 → 1.31.0-rc.0

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/tabs/_tabs.scss

@@ -332,6 +332,13 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
       }
     }
 
+    .#{$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);
+}