@carbon/styles 1.100.0 → 1.101.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.100.0",
+  "version": "1.101.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,13 +40,13 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.47.0",
-    "@carbon/feature-flags": "1.0.0",
-    "@carbon/grid": "^11.50.0",
-    "@carbon/layout": "^11.48.0",
-    "@carbon/motion": "^11.41.0",
-    "@carbon/themes": "^11.68.0",
-    "@carbon/type": "^11.54.0",
+    "@carbon/colors": "^11.48.0",
+    "@carbon/feature-flags": "^1.0.0",
+    "@carbon/grid": "^11.51.0",
+    "@carbon/layout": "^11.49.0",
+    "@carbon/motion": "^11.42.0",
+    "@carbon/themes": "^11.69.0",
+    "@carbon/type": "^11.55.0",
     "@ibm/plex": "6.0.0-next.6",
     "@ibm/plex-mono": "1.1.0",
     "@ibm/plex-sans": "1.1.0",
@@ -75,5 +75,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "6dde90f9edfb378e1585f1954c92484a37f22f02"
+  "gitHead": "4f48ac426be7302a57460b1c81d74dd5d6071ad6"
 }

package/scss/__tests__/theme-test.js

@@ -261,6 +261,7 @@ describe('@carbon/styles/scss/theme', () => {
         "chat-button-text-selected",
         "highlight",
         "overlay",
+        "color-scheme",
         "toggle-off",
         "shadow",
         "focus",

package/scss/_reset.scss

@@ -113,6 +113,10 @@
     font-family: inherit;
   }
 
+  :root {
+    color-scheme: custom-property.get-var('color-scheme', light);
+  }
+
   /* HTML5 display-role reset for older browsers */
   article,
   aside,

package/scss/_theme.scss

@@ -15,6 +15,8 @@
 @mixin theme($args...) {
   @include theme.theme($args...);
 
+  color-scheme: custom-property.get-var('color-scheme', light);
+
   // If the system is in high-contrast mode, use the system defined colors.  This mostly happens automatically, but
   // we need to do it manually for icons and selected backgrounds.  Importantly, the custom properties we set here
   // need to override the CSS custom properties set above.  See:

package/scss/_zone.scss

@@ -44,7 +44,11 @@ $-components: (
     color: custom-property.get-var('text-primary');
 
     @each $key, $value in $theme {
-      @if meta.type-of($value) == color {
+      @if $key == 'color-scheme' {
+        @include custom-property.declaration($key, $value);
+
+        color-scheme: custom-property.get-var($key, $value);
+      } @else if meta.type-of($value) == color {
         @include custom-property.declaration($key, $value);
       }
     }

package/scss/components/button/_button.scss

@@ -253,6 +253,13 @@
       position: static;
     }
 
+    &.#{$prefix}--btn--ghost {
+      &:focus {
+        background-color: $background-active;
+        box-shadow: inset 0 0 0 $button-outline-width $button-focus-color;
+      }
+    }
+
     &.#{$prefix}--btn--ghost .#{$prefix}--btn__icon,
     &.#{$prefix}--btn--danger--ghost .#{$prefix}--btn__icon {
       margin: 0;

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

@@ -208,9 +208,9 @@
   }
 
   //----------------------------------------------------------------------------
-  // Compact, Short, Tall Sortable
+  // Extra small, Short, Tall Sortable
   //----------------------------------------------------------------------------
-  // Sortable compact
+  // Sortable Extra small
   .#{$prefix}--data-table--xs.#{$prefix}--data-table--sort th {
     block-size: convert.to-rem(24px);
   }

package/scss/components/modal/_modal.scss

@@ -155,7 +155,7 @@
     margin-inline: -$spacing-05 - $spacing-05;
   }
 
-  //TO-DO: remove .#{$prefix}--modal-content__regular-content in v11 since hasForm has been deprecated
+  // TODO: remove .#{$prefix}--modal-content__regular-content in v11 since hasForm has been deprecated
   // text/p gets 20% right padding
   .#{$prefix}--modal-content > p,
   .#{$prefix}--modal-content__regular-content {
@@ -164,7 +164,7 @@
     padding-inline-end: calc(20% - $spacing-07);
   }
 
-  //TO-DO: remove .#{$prefix}--modal-content--with-form in v11 since hasForm has been deprecated\
+  // TODO: remove .#{$prefix}--modal-content--with-form in v11 since hasForm has been deprecated\
   // anything besides text/p spans full width, with just 16px padding
   .#{$prefix}--modal-content--with-form {
     padding-inline-end: $spacing-05;

package/scss/components/popover/_popover.scss

@@ -304,6 +304,103 @@ $popover-caret-height: custom-property.get-var(
     transform: translate(-50%, calc(100% + $popover-offset));
   }
 
+  .#{$prefix}--popover--bottom:not(.#{$prefix}--popover--caret):not(
+      .#{$prefix}--popover--auto-align
+    ):not(.#{$prefix}--popover--tab-tip)
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content,
+  .#{$prefix}--popover--bottom-start:not(.#{$prefix}--popover--caret):not(
+      .#{$prefix}--popover--auto-align
+    ):not(.#{$prefix}--popover--tab-tip)
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content,
+  .#{$prefix}--popover--bottom-end:not(.#{$prefix}--popover--caret):not(
+      .#{$prefix}--popover--auto-align
+    ):not(.#{$prefix}--popover--tab-tip)
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content {
+    inset-block-end: -$spacing-02;
+  }
+
+  .#{$prefix}--popover--top:not(.#{$prefix}--popover--caret):not(
+      .#{$prefix}--popover--auto-align
+    ):not(.#{$prefix}--popover--tab-tip)
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content,
+  .#{$prefix}--popover--top-start:not(.#{$prefix}--popover--caret):not(
+      .#{$prefix}--popover--auto-align
+    ):not(.#{$prefix}--popover--tab-tip)
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content,
+  .#{$prefix}--popover--top-end:not(.#{$prefix}--popover--caret):not(
+      .#{$prefix}--popover--auto-align
+    ):not(.#{$prefix}--popover--tab-tip)
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content {
+    inset-block-start: -$spacing-02;
+  }
+
+  .#{$prefix}--popover--top-start:not(.#{$prefix}--popover--caret):not(
+      .#{$prefix}--popover--auto-align
+    ):not(.#{$prefix}--popover--tab-tip)
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content,
+  .#{$prefix}--popover--bottom-start:not(.#{$prefix}--popover--caret):not(
+      .#{$prefix}--popover--auto-align
+    ):not(.#{$prefix}--popover--tab-tip)
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content {
+    inset-inline-start: calc(50% - $popover-offset - 1rem);
+  }
+  .#{$prefix}--popover--top-end:not(.#{$prefix}--popover--caret):not(
+      .#{$prefix}--popover--auto-align
+    ):not(.#{$prefix}--popover--tab-tip)
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content,
+  .#{$prefix}--popover--bottom-end:not(.#{$prefix}--popover--caret):not(
+      .#{$prefix}--popover--auto-align
+    ):not(.#{$prefix}--popover--tab-tip)
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content {
+    inset-inline-end: calc(50% - $popover-offset - 1rem);
+  }
+
+  .#{$prefix}--popover--right:not(.#{$prefix}--popover--caret):not(
+      .#{$prefix}--popover--auto-align
+    ):not(.#{$prefix}--popover--tab-tip)
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content,
+  .#{$prefix}--popover--right-start:not(.#{$prefix}--popover--caret):not(
+      .#{$prefix}--popover--auto-align
+    ):not(.#{$prefix}--popover--tab-tip)
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content,
+  .#{$prefix}--popover--right-end:not(.#{$prefix}--popover--caret):not(
+      .#{$prefix}--popover--auto-align
+    ):not(.#{$prefix}--popover--tab-tip)
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content {
+    inset-inline-start: calc(100% + $spacing-02);
+  }
+
+  .#{$prefix}--popover--left:not(.#{$prefix}--popover--caret):not(
+      .#{$prefix}--popover--auto-align
+    ):not(.#{$prefix}--popover--tab-tip)
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content,
+  .#{$prefix}--popover--left-start:not(.#{$prefix}--popover--caret):not(
+      .#{$prefix}--popover--auto-align
+    ):not(.#{$prefix}--popover--tab-tip)
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content,
+  .#{$prefix}--popover--left-end:not(.#{$prefix}--popover--caret):not(
+      .#{$prefix}--popover--auto-align
+    ):not(.#{$prefix}--popover--tab-tip)
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content {
+    inset-inline-end: calc(100% + $spacing-02);
+  }
+
   [dir='rtl']
     .#{$prefix}--popover--bottom:not(.#{$prefix}--popover--auto-align)
     > .#{$prefix}--popover

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

@@ -87,6 +87,7 @@ $progress-indicator-bar-width: 1px inset transparent !default;
   .#{$prefix}--progress-label {
     @include type-style('body-compact-01');
 
+    display: block;
     overflow: hidden;
     margin: $spacing-03 0 0 0;
     color: $text-primary;
@@ -115,9 +116,7 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     max-inline-size: 100%;
   }
 
-  .#{$prefix}--progress-step-button:not(
-      .#{$prefix}--progress-step-button--unclickable
-    ) {
+  .#{$prefix}--progress-step-button {
     &:focus {
       outline: none;
     }
@@ -125,10 +124,14 @@ $progress-indicator-bar-width: 1px inset transparent !default;
       color: $focus;
       outline: convert.to-rem(1px) solid $focus;
     }
+  }
+
+  .#{$prefix}--progress-step-button:not(
+      .#{$prefix}--progress-step-button--unclickable
+    )
     .#{$prefix}--progress-label:active {
-      box-shadow: 0 convert.to-rem(1px) 0 0 $text-primary;
-      color: $text-primary;
-    }
+    box-shadow: 0 convert.to-rem(1px) 0 0 $text-primary;
+    color: $text-primary;
   }
 
   //OVERFLOW STYLING
@@ -178,6 +181,7 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     @include type-style('label-01');
 
     position: absolute;
+    display: block;
     color: $text-secondary;
     inset-inline-start: 0;
     margin-block-start: convert.to-rem(28px);

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

@@ -121,7 +121,7 @@
 
   .#{$prefix}--header__menu-trigger:hover > svg {
     fill: $icon-primary;
-    //TO-DO: ask design if this color changes on hover, missing spec for it
+    // TODO: ask design if this color changes on hover, missing spec for it
   }
 
   .#{$prefix}--header__menu-toggle {
@@ -161,7 +161,7 @@
 
   a.#{$prefix}--header__name:focus {
     border-color: $focus;
-    //TO-DO: follow up with design to see if this is correct, missing focus spec for it
+    // TODO: follow up with design to see if this is correct, missing focus spec for it
   }
 
   .#{$prefix}--header__name--prefix {
@@ -434,7 +434,7 @@
     inline-size: auto;
     inset-block-start: 0;
     inset-inline-start: 0;
-    //TO-DO: double check with design that these tokens are correct, missing spec for it
+    // TODO: double check with design that these tokens are correct, missing spec for it
     outline: none;
   }
 }

package/scss/components/ui-shell/switcher/_switcher.scss

@@ -74,7 +74,7 @@
   }
 
   .#{$prefix}--switcher__item-link--selected {
-    //TO-DO: should we add a 3px left border-interactive here too? Doesn't currently have it, but specs have it
+    // TODO: should we add a 3px left border-interactive here too? Doesn't currently have it, but specs have it
     background: $layer-selected;
     color: $text-primary;
   }

package/scss/utilities/_tooltip.scss

@@ -161,7 +161,7 @@
   }
 
   // content box
-  // @todo Simplify CSS selectors on next major release
+  // TODO: Simplify CSS selectors on next major release
   &::after,
   .#{$prefix}--assistive-text,
   + .#{$prefix}--assistive-text {
@@ -279,7 +279,7 @@
     }
   }
 
-  // @todo Simplify CSS selectors on next major release
+  // TODO: Simplify CSS selectors on next major release
   &::before,
   &::after,
   .#{$prefix}--assistive-text,
@@ -339,7 +339,7 @@
   }
 
   // alignment options available only for top and bottom tooltip position
-  // @todo Simplify CSS selectors on next major release
+  // TODO: Simplify CSS selectors on next major release
   &::after,
   .#{$prefix}--assistive-text,
   + .#{$prefix}--assistive-text {
@@ -378,7 +378,7 @@
     }
   }
 
-  // @todo simplify on next major release to move the ::before pseudo element within the tooltip instead of the trigger
+  // TODO: simplify on next major release to move the ::before pseudo element within the tooltip instead of the trigger
   @if $tooltip-type == 'definition' {
     &.#{$prefix}--tooltip--a11y + .#{$prefix}--assistive-text {
       @if ($position == 'bottom') {