@carbon/styles 1.40.0 → 1.41.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.40.0",
+  "version": "1.41.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -38,13 +38,13 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.19.0",
+    "@carbon/colors": "^11.20.0",
     "@carbon/feature-flags": "^0.16.0",
-    "@carbon/grid": "^11.20.0",
-    "@carbon/layout": "^11.19.0",
-    "@carbon/motion": "^11.15.0",
-    "@carbon/themes": "^11.25.0",
-    "@carbon/type": "^11.24.0",
+    "@carbon/grid": "^11.21.0",
+    "@carbon/layout": "^11.20.0",
+    "@carbon/motion": "^11.16.0",
+    "@carbon/themes": "^11.26.0",
+    "@carbon/type": "^11.25.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
@@ -65,5 +65,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "99314f69da3f5791c3c0f46564a47ef9ee7c9e0f"
+  "gitHead": "abe693e46a9b76731f51e47104f3634b6346f845"
 }

package/scss/__tests__/theme-test.js

@@ -127,6 +127,15 @@ describe('@carbon/styles/scss/theme', () => {
         "support-caution-major",
         "support-caution-minor",
         "support-caution-undefined",
+        "slug-background",
+        "slug-gradient",
+        "slug-background-hover",
+        "slug-gradient-hover",
+        "slug-hollow-hover",
+        "slug-callout-gradient-top",
+        "slug-callout-gradient-bottom",
+        "slug-callout-aura-start",
+        "slug-callout-aura-end",
         "highlight",
         "overlay",
         "toggle-off",

package/scss/_zone.scss

@@ -36,8 +36,8 @@ $-components: (
 
 @each $name, $theme in $zones {
   .#{config.$prefix}--#{'' + $name} {
-    background: var(--cds-background);
-    color: var(--cds-text-primary);
+    background-color: custom-property.get-var('background');
+    color: custom-property.get-var('text-primary');
 
     @each $key, $value in $theme {
       @if type-of($value) == color {

package/scss/components/_index.scss

@@ -58,6 +58,7 @@
 @use 'select';
 @use 'skeleton-styles';
 @use 'slider';
+@use 'slug';
 @use 'stack';
 @use 'structured-list';
 @use 'tabs';

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

@@ -51,11 +51,14 @@
   }
 
   .#{$prefix}--date-picker-input__wrapper {
-    position: relative;
     display: flex;
     align-items: center;
   }
 
+  .#{$prefix}--date-picker-input__wrapper span {
+    position: relative;
+  }
+
   .#{$prefix}--date-picker.#{$prefix}--date-picker--simple
     .#{$prefix}--date-picker__input,
   .#{$prefix}--date-picker.#{$prefix}--date-picker--simple .#{$prefix}--label {

package/scss/components/fluid-date-picker/_fluid-date-picker.scss

@@ -60,6 +60,12 @@
     white-space: nowrap;
   }
 
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker-input__wrapper
+    > span {
+    inline-size: 100%;
+  }
+
   .#{$prefix}--date-picker--fluid
     .#{$prefix}--date-picker-input__wrapper
     .#{$prefix}--date-picker__input {

package/scss/components/slider/_slider.scss

@@ -30,17 +30,21 @@
     position: relative;
     display: flex;
     align-items: center;
+    gap: 1rem;
     user-select: none;
   }
 
   .#{$prefix}--slider {
     position: relative;
     padding: $spacing-05 0;
-    margin: 0 $spacing-05;
     cursor: pointer;
     inline-size: 100%;
     max-inline-size: convert.to-rem(640px);
     min-inline-size: convert.to-rem(200px);
+
+    .#{$prefix}--slider-container--two-handles & {
+      margin-inline: rem(4px);
+    }
   }
 
   .#{$prefix}--slider__range-label {
@@ -48,10 +52,6 @@
 
     color: $text-primary;
     white-space: nowrap;
-
-    &:last-of-type {
-      margin-inline-end: $spacing-05;
-    }
   }
 
   .#{$prefix}--slider__track {
@@ -117,10 +117,102 @@
     }
   }
 
+  .#{$prefix}--slider__thumb-icon {
+    fill: $layer-selected-inverse;
+  }
+
+  .#{$prefix}--slider__thumb-icon--focus {
+    display: none;
+    fill: $interactive;
+  }
+
+  .#{$prefix}--slider__thumb--lower,
+  .#{$prefix}--slider__thumb--upper {
+    display: block;
+    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+    border-radius: unset;
+    background-color: transparent;
+    block-size: 24px;
+    box-shadow: none;
+    inline-size: 16px;
+    transform: translate(-100%, -50%);
+    transition: none;
+
+    &::before {
+      position: absolute;
+      z-index: -1;
+      display: block;
+      background: $background;
+      block-size: convert.to-rem(2px);
+      content: '';
+      inline-size: convert.to-rem(6px);
+      inset-block-start: calc(50% - #{convert.to-rem(2px) / 2});
+      inset-inline-end: 0;
+    }
+
+    &:hover {
+      transform: translate(-100%, -50%);
+
+      .#{$prefix}--slider__thumb-icon {
+        fill: $text-secondary;
+      }
+    }
+
+    &:active {
+      box-shadow: none;
+      transform: translate(-100%, -50%);
+    }
+
+    &:focus {
+      background-color: transparent;
+      box-shadow: none;
+      transform: translate(-100%, -50%);
+
+      .#{$prefix}--slider__thumb-icon {
+        display: none;
+        fill: $interactive;
+      }
+
+      .#{$prefix}--slider__thumb-icon--focus {
+        display: block;
+      }
+    }
+  }
+
+  .#{$prefix}--slider__thumb--lower:focus::before,
+  .#{$prefix}--slider__thumb--upper:focus::before {
+    inline-size: 100%;
+  }
+
+  .#{$prefix}--slider__thumb--upper {
+    transform: translate(0, -50%);
+
+    &::before {
+      inset-inline-end: auto;
+      inset-inline-start: 0;
+    }
+
+    &:hover {
+      transform: translate(0, -50%);
+    }
+
+    &:active {
+      transform: translate(0, -50%);
+    }
+
+    &:focus {
+      transform: translate(0, -50%);
+    }
+  }
+
   .#{$prefix}--slider__input {
     display: none;
   }
 
+  .#{$prefix}--slider-text-input-wrapper {
+    position: relative;
+  }
+
   .#{$prefix}--slider-text-input,
   .#{$prefix}-slider-text-input {
     -moz-appearance: textfield;
@@ -139,7 +231,7 @@
   }
 
   .#{$prefix}--slider__thumb:focus ~ .#{$prefix}--slider__filled-track {
-    background-color: $interactive;
+    background-color: $border-interactive;
   }
 
   // Invalid & warn state
@@ -161,7 +253,6 @@
   .#{$prefix}--slider__validation-msg.#{$prefix}--form-requirement {
     display: block;
     overflow: visible;
-    margin-block-start: 0;
     max-block-size: 100%;
   }
 
@@ -241,15 +332,26 @@
     cursor: default;
   }
 
-  .#{$prefix}--slider--readonly .#{$prefix}--slider__thumb {
+  .#{$prefix}--slider-container--readonly .#{$prefix}--slider__thumb {
     block-size: 0;
     inline-size: 0;
+
+    &::before,
+    &::after {
+      display: none;
+    }
   }
 
-  .#{$prefix}--slider--readonly ~ .#{$prefix}--slider-text-input {
+  .#{$prefix}--slider-container--readonly .#{$prefix}--slider-text-input {
     background-color: transparent;
   }
 
+  .#{$prefix}--slider__status-msg.#{$prefix}--form-requirement {
+    display: block;
+    overflow: visible;
+    max-block-size: 100%;
+  }
+
   // Skeleton state
   .#{$prefix}--slider-container.#{$prefix}--skeleton
     .#{$prefix}--slider__range-label {
@@ -265,11 +367,20 @@
     pointer-events: none;
   }
 
-  .#{$prefix}--slider-container.#{$prefix}--skeleton
+  .#{$prefix}--slider-container.#{$prefix}--skeleton {
     .#{$prefix}--slider__thumb {
-    cursor: default;
-    inset-inline-start: 50%;
-    pointer-events: none;
+      cursor: default;
+      inset-inline-start: 50%;
+      pointer-events: none;
+    }
+
+    .#{$prefix}--slider__thumb--lower {
+      inset-inline-start: 0;
+    }
+
+    .#{$prefix}--slider__thumb--upper {
+      inset-inline-start: 100%;
+    }
   }
 
   // Windows HCM fix

package/scss/components/slug/_index.scss

@@ -0,0 +1,4 @@
+@forward 'slug';
+@use 'slug';
+
+@include slug.slug;

package/scss/components/slug/_slug.scss

@@ -0,0 +1,346 @@
+@use '../../config' as *;
+@use '../../colors' as *;
+@use '../../motion' as *;
+@use '../../theme' as *;
+@use '../../type' as *;
+@use '../../utilities/convert';
+
+$sizes: (
+  mini: (
+    height: convert.to-rem(16px),
+    width: convert.to-rem(16px),
+    font-size: convert.to-rem(9px),
+    line-height: convert.to-rem(12px),
+    background: $slug-background,
+  ),
+  2xs: (
+    height: convert.to-rem(20px),
+    width: convert.to-rem(20px),
+    font-size: convert.to-rem(12px),
+    line-height: convert.to-rem(16px),
+    background: $slug-background,
+  ),
+  xs: (
+    height: convert.to-rem(24px),
+    width: convert.to-rem(24px),
+    font-size: convert.to-rem(12px),
+    line-height: convert.to-rem(16px),
+    background: $slug-gradient,
+  ),
+  sm: (
+    height: convert.to-rem(32px),
+    width: convert.to-rem(32px),
+    font-size: convert.to-rem(16px),
+    line-height: convert.to-rem(21px),
+    background: $slug-gradient,
+  ),
+  md: (
+    height: convert.to-rem(40px),
+    width: convert.to-rem(40px),
+    font-size: convert.to-rem(16px),
+    line-height: convert.to-rem(21px),
+    background: $slug-gradient,
+  ),
+  lg: (
+    height: convert.to-rem(48px),
+    width: convert.to-rem(48px),
+    font-size: convert.to-rem(16px),
+    line-height: convert.to-rem(21px),
+    background: $slug-gradient,
+  ),
+  xl: (
+    height: convert.to-rem(64px),
+    width: convert.to-rem(64px),
+    font-size: convert.to-rem(20px),
+    line-height: convert.to-rem(26px),
+    background: $slug-gradient,
+  ),
+);
+
+/// Slug styles
+/// @access public
+/// @group slider
+@mixin slug {
+  .#{$prefix}--slug {
+    display: flex;
+  }
+
+  .#{$prefix}--slug .#{$prefix}--slug__button {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $text-inverse;
+    font-weight: 600;
+    transition: color $duration-fast-01 motion(entrance, productive),
+      border-color $duration-fast-01 motion(entrance, productive),
+      box-shadow $duration-fast-01 motion(entrance, productive);
+
+    @each $group, $size in $sizes {
+      // Create a class for each size slug
+      &--#{$group} {
+        @each $property, $value in $size {
+          // Set correct properties for each size
+          #{$property}: $value;
+        }
+      }
+    }
+  }
+
+  .#{$prefix}--slug .#{$prefix}--slug__button:focus {
+    box-shadow: inset 0 0 0 2px $focus, inset 0 0 0 3px $focus-inset;
+    outline: none;
+  }
+
+  .#{$prefix}--slug__text {
+    position: relative;
+    z-index: 1;
+  }
+
+  // pseudo element to animate the hover transition
+  .#{$prefix}--slug__button::before {
+    position: absolute;
+    background: $slug-gradient-hover;
+    block-size: 100%;
+    content: '';
+    inline-size: 100%;
+    opacity: 0;
+    transition: opacity $duration-fast-01 motion(entrance, productive);
+  }
+
+  .#{$prefix}--slug__button:hover::before {
+    opacity: 1;
+  }
+
+  // Focus styles
+  .#{$prefix}--slug .#{$prefix}--slug__button:focus::before {
+    block-size: calc(100% - 6px);
+    inline-size: calc(100% - 6px);
+  }
+
+  .#{$prefix}--slug__button.#{$prefix}--slug__button--mini::before,
+  .#{$prefix}--slug__button.#{$prefix}--slug__button--2xs::before {
+    background: $slug-background-hover;
+  }
+
+  .#{$prefix}--slug__button.#{$prefix}--slug__button--mini:focus,
+  .#{$prefix}--slug__button.#{$prefix}--slug__button--2xs:focus {
+    box-shadow: inset 0 0 0 1px $focus, inset 0 0 0 2px $focus-inset;
+  }
+
+  .#{$prefix}--slug__button.#{$prefix}--slug__button--mini:focus::before,
+  .#{$prefix}--slug__button.#{$prefix}--slug__button--2xs:focus::before {
+    block-size: calc(100% - 4px);
+    inline-size: calc(100% - 4px);
+  }
+
+  // Hollow slug
+  // Only allow mini, 2xs, and xs sizes
+  .#{$prefix}--slug__button--hollow.#{$prefix}--slug__button--sm,
+  .#{$prefix}--slug__button--hollow.#{$prefix}--slug__button--md,
+  .#{$prefix}--slug__button--hollow.#{$prefix}--slug__button--lg,
+  .#{$prefix}--slug__button--hollow.#{$prefix}--slug__button--xl {
+    block-size: convert.to-rem(24px);
+    font-size: convert.to-rem(12px);
+    inline-size: convert.to-rem(24px);
+    line-height: convert.to-rem(16px);
+  }
+
+  .#{$prefix}--slug__button--hollow::before {
+    display: none;
+  }
+
+  .#{$prefix}--slug .#{$prefix}--slug__button--hollow {
+    border: 1px solid $border-inverse;
+    background: transparent;
+    color: $text-primary;
+  }
+
+  .#{$prefix}--slug__button--hollow:hover {
+    border-color: $slug-hollow-hover;
+    color: $slug-hollow-hover;
+  }
+
+  .#{$prefix}--slug__button--hollow:focus {
+    border-color: $focus;
+    box-shadow: inset 0 0 0 1px $focus;
+  }
+
+  // Inline slug
+  .#{$prefix}--slug .#{$prefix}--slug__button--inline {
+    border: 1px solid transparent;
+    border-radius: convert.to-rem(1px);
+    background: transparent;
+    block-size: initial;
+    color: $text-primary;
+    font-size: convert.to-rem(14px);
+    inline-size: initial;
+    line-height: initial;
+    padding-inline: convert.to-rem(4px);
+  }
+
+  .#{$prefix}--slug__button--inline::before {
+    display: none;
+  }
+
+  .#{$prefix}--slug .#{$prefix}--slug__button--inline:focus {
+    border-color: $focus;
+    box-shadow: none;
+  }
+
+  .#{$prefix}--slug .#{$prefix}--slug__button--inline:hover {
+    border-color: $icon-secondary;
+    color: $text-secondary;
+  }
+
+  .#{$prefix}--slug .#{$prefix}--slug__button--inline:focus:hover {
+    border-color: $focus;
+  }
+
+  .#{$prefix}--slug
+    .#{$prefix}--slug__button--inline:hover
+    .#{$prefix}--slug__text::before {
+    background: $icon-secondary;
+  }
+
+  .#{$prefix}--slug--hollow
+    .#{$prefix}--slug__button--inline:hover
+    .#{$prefix}--slug__text::before {
+    background: transparent;
+    box-shadow: inset 0 0 0 1px $icon-secondary;
+  }
+
+  .#{$prefix}--slug__button--inline .#{$prefix}--slug__text {
+    padding-inline-start: convert.to-rem(8px);
+  }
+
+  .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--lg
+    .#{$prefix}--slug__text {
+    padding-inline-start: convert.to-rem(12px);
+  }
+
+  .#{$prefix}--slug__button--inline .#{$prefix}--slug__text::before {
+    position: absolute;
+    display: inline-block;
+    background: $icon-primary;
+    block-size: convert.to-rem(4px);
+    content: '';
+    inline-size: convert.to-rem(4px);
+    inset-block-start: 50%;
+    inset-inline-start: 0;
+    opacity: 1;
+    transform: translateY(-50%);
+    transition: background $duration-fast-01 motion(entrance, productive),
+      box-shadow $duration-fast-01 motion(entrance, productive);
+  }
+
+  // Inline slug hollow dot
+  .#{$prefix}--slug--hollow .#{$prefix}--slug__text::before {
+    background: transparent;
+    block-size: convert.to-rem(6px);
+    box-shadow: inset 0 0 0 1px $icon-primary;
+    inline-size: convert.to-rem(6px);
+  }
+
+  .#{$prefix}--slug--hollow
+    .#{$prefix}--slug__button--sm
+    .#{$prefix}--slug__text,
+  .#{$prefix}--slug--hollow
+    .#{$prefix}--slug__button--md
+    .#{$prefix}--slug__text {
+    padding-inline-start: convert.to-rem(9px);
+  }
+
+  .#{$prefix}--slug__button--lg .#{$prefix}--slug__text::before,
+  .#{$prefix}--slug--hollow
+    .#{$prefix}--slug__button--lg
+    .#{$prefix}--slug__text::before {
+    block-size: convert.to-rem(8px);
+    inline-size: convert.to-rem(8px);
+  }
+
+  // Only allow sm, md, and lg sizes
+  .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--mini,
+  .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--mini
+    .#{$prefix}--slug__additional-text,
+  .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--2xs,
+  .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--2xs
+    .#{$prefix}--slug__additional-text,
+  .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--xs,
+  .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--xs
+    .#{$prefix}--slug__additional-text,
+  .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--sm,
+  .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--sm
+    .#{$prefix}--slug__additional-text {
+    font-size: convert.to-rem(12px);
+  }
+
+  .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--lg,
+  .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--xl {
+    font-size: convert.to-rem(16px);
+  }
+
+  // Inline slug with text
+  .#{$prefix}--slug .#{$prefix}--slug__button--inline-with-content {
+    border: 1px solid $border-inverse;
+    padding-block: convert.to-rem(2px);
+    padding-inline: convert.to-rem(8px);
+  }
+
+  .#{$prefix}--slug__button--inline-with-content
+    .#{$prefix}--slug__additional-text {
+    @include type-style('body-compact-02');
+
+    padding-inline-start: convert.to-rem(4px);
+  }
+
+  .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--md
+    .#{$prefix}--slug__additional-text {
+    font-size: convert.to-rem(14px);
+  }
+
+  .#{$prefix}--slug .#{$prefix}--slug__button--inline-with-content:focus {
+    box-shadow: inset 0 0 0 1px $focus;
+  }
+
+  // Default callout styles
+  .#{$prefix}--slug.#{$prefix}--slug--hollow .#{$prefix}--toggletip-content {
+    row-gap: 0;
+  }
+
+  // Slug callout styles
+  .#{$prefix}--slug.#{$prefix}--slug--enabled .#{$prefix}--popover-content {
+    border: 1px solid $border-subtle;
+    border-radius: 16px;
+    // 84px seems to make this fully opaque?
+    backdrop-filter: blur(25px);
+    background: linear-gradient(
+        0deg,
+        $slug-callout-aura-start 0%,
+        $slug-callout-aura-end 33%,
+        transparent 100%
+      ),
+      linear-gradient(
+          180deg,
+          $slug-callout-gradient-top 0%,
+          $slug-callout-gradient-bottom 100%
+        )
+        rgba(0, 0, 0, 0.01);
+    // box-shadow seems to match the spec better
+    // than the same values plugged into `drop-shadow`
+    // filter: drop-shadow(-45px 45px 100px rgba(0, 0, 0, 0.2));
+    box-shadow: -45px 45px 100px rgba(0, 0, 0, 0.2);
+    color: $text-primary;
+    min-inline-size: convert.to-rem(280px);
+  }
+
+  .#{$prefix}--slug.#{$prefix}--slug--enabled .#{$prefix}--popover-caret {
+    background: $border-subtle;
+  }
+
+  .#{$prefix}--slug.#{$prefix}--slug--enabled .#{$prefix}--toggletip-content {
+    padding-block-end: convert.to-rem(80px);
+    padding-block-start: convert.to-rem(32px);
+    padding-inline: convert.to-rem(32px);
+  }
+}

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

@@ -180,7 +180,7 @@
   }
 
   .#{$prefix}--side-nav__item--large {
-    block-size: mini-units(6);
+    block-size: auto;
   }
 
   //----------------------------------------------------------------------------