@carbon/styles 1.44.0-rc.0 → 1.44.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.44.0-rc.0",
+  "version": "1.44.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -43,7 +43,7 @@
     "@carbon/grid": "^11.21.0",
     "@carbon/layout": "^11.20.0",
     "@carbon/motion": "^11.16.0",
-    "@carbon/themes": "^11.27.0",
+    "@carbon/themes": "^11.28.0",
     "@carbon/type": "^11.25.0",
     "@ibm/plex": "6.0.0-next.6"
   },
@@ -65,5 +65,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "c9e8c54239275eb4451b25f7f11c4b8bf40ddd43"
+  "gitHead": "d9121f17b1dd935a5734c6eae10af275f72f6dc7"
 }

package/scss/__tests__/theme-test.js

@@ -136,6 +136,16 @@ describe('@carbon/styles/scss/theme', () => {
         "slug-callout-gradient-bottom",
         "slug-callout-aura-start",
         "slug-callout-aura-end",
+        "slug-callout-gradient-top-hover",
+        "slug-callout-gradient-bottom-hover",
+        "slug-callout-aura-start-hover-01",
+        "slug-callout-aura-start-hover-02",
+        "slug-callout-aura-end-hover-01",
+        "slug-callout-aura-end-hover-02",
+        "slug-callout-gradient-top-selected",
+        "slug-callout-gradient-bottom-selected",
+        "slug-callout-aura-start-selected",
+        "slug-callout-aura-end-selected",
         "ai-gradient-start-01",
         "ai-gradient-start-02",
         "ai-gradient-end",

package/scss/components/accordion/_accordion.scss

@@ -59,7 +59,6 @@ $content-padding: 0 0 0 $spacing-05 !default;
     display: list-item;
     overflow: visible;
     border-block-start: 1px solid $border-subtle;
-    transition: all $duration-fast-02 motion(standard, productive);
 
     &:last-child {
       border-block-end: 1px solid $border-subtle;
@@ -144,11 +143,18 @@ $content-padding: 0 0 0 $spacing-05 !default;
     text-align: start;
   }
 
+  .#{$prefix}--accordion__wrapper {
+    // Properties for when the accordion closes
+    padding: 0;
+    max-block-size: 0;
+    opacity: 0;
+    transition: all $duration-fast-02 motion(entrance, productive);
+    writing-mode: horizontal-tb;
+  }
+
   .#{$prefix}--accordion__content {
-    display: none;
+    overflow: hidden;
     padding-inline: layout.density('padding-inline');
-    // Transition property for when the accordion closes
-    transition: padding motion(standard, productive) $duration-fast-02;
 
     // Custom breakpoints based on issue #4993
     @include breakpoint-up(480px) {
@@ -189,44 +195,14 @@ $content-padding: 0 0 0 $spacing-05 !default;
     display: block;
   }
 
-  @keyframes collapse-accordion {
-    0% {
-      @include -content-visible;
-    }
-
-    100% {
-      @include -content-hidden;
-    }
-  }
-
-  @keyframes expand-accordion {
-    0% {
-      @include -content-hidden;
-    }
-
-    100% {
-      @include -content-visible;
-    }
-  }
-
-  .#{$prefix}--accordion__item--collapsing .#{$prefix}--accordion__content {
-    animation: $duration-fast-02 motion(standard, productive) collapse-accordion;
-  }
-
-  .#{$prefix}--accordion__item--expanding .#{$prefix}--accordion__content {
-    animation: $duration-fast-02 motion(standard, productive) expand-accordion;
-  }
-
   .#{$prefix}--accordion__item--active {
     overflow: visible;
 
-    .#{$prefix}--accordion__content {
-      display: block;
+    .#{$prefix}--accordion__wrapper {
+      // Properties for when the accordion opens
+      opacity: 1;
       padding-block: $spacing-03;
       padding-block-end: $spacing-06;
-      // Transition property for when the accordion opens
-      transition: padding-top motion(entrance, productive) $duration-fast-02,
-        padding-bottom motion(entrance, productive) $duration-fast-02;
     }
 
     .#{$prefix}--accordion__arrow {

package/scss/components/checkbox/_checkbox.scss

@@ -361,4 +361,24 @@
     .#{$prefix}--checkbox-label[data-contained-checkbox-state='true']::after {
     transform: scale(1.2) rotate3d(0.5, 1, 0, 158deg);
   }
+
+  // Slug styles
+  .#{$prefix}--checkbox-group--slug legend.#{$prefix}--label,
+  .#{$prefix}--checkbox-wrapper--slug .#{$prefix}--checkbox-label-text {
+    display: flex;
+  }
+
+  .#{$prefix}--checkbox-group--slug legend.#{$prefix}--label .#{$prefix}--slug,
+  .#{$prefix}--checkbox-wrapper--slug
+    .#{$prefix}--checkbox-label-text
+    .#{$prefix}--slug {
+    margin-inline-start: $spacing-03;
+  }
+
+  .#{$prefix}--checkbox-wrapper--slug
+    .#{$prefix}--checkbox-label-text
+    .#{$prefix}--slug__button--inline {
+    line-height: inherit;
+    margin-block-start: convert.to-rem(-1px);
+  }
 }

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

@@ -280,4 +280,27 @@ $radio-border-width: 1px !default;
     margin-inline-end: 0;
     margin-inline-start: $spacing-03;
   }
+
+  // Slug styles
+  .#{$prefix}--radio-button-group--slug legend.#{$prefix}--label,
+  .#{$prefix}--radio-button-wrapper--slug
+    .#{$prefix}--radio-button__label-text {
+    display: flex;
+  }
+
+  .#{$prefix}--radio-button-group--slug
+    legend.#{$prefix}--label
+    .#{$prefix}--slug,
+  .#{$prefix}--radio-button-wrapper--slug
+    .#{$prefix}--radio-button__label-text
+    .#{$prefix}--slug {
+    margin-inline-start: $spacing-03;
+  }
+
+  .#{$prefix}--radio-button-wrapper--slug
+    .#{$prefix}--radio-button__label-text
+    .#{$prefix}--slug__button--inline {
+    line-height: inherit;
+    margin-block-start: convert.to-rem(-1px);
+  }
 }

package/scss/components/slug/_slug.scss

@@ -4,6 +4,7 @@
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
+@use '../../utilities/ai-gradient' as *;
 @use '../../utilities/convert';
 
 $sizes: (
@@ -324,22 +325,12 @@ $sizes: (
 
   // Slug callout styles
   .#{$prefix}--slug.#{$prefix}--slug--enabled .#{$prefix}--slug-content {
+    @include callout-gradient();
+
     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));

package/scss/components/tile/_tile.scss

@@ -13,6 +13,7 @@
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
+@use '../../utilities/ai-gradient' as *;
 @use '../../utilities/button-reset';
 @use '../../utilities/component-reset';
 @use '../../utilities/focus-outline' as *;
@@ -368,6 +369,107 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     fill: $icon-disabled;
   }
 
+  // Slug styles
+  .#{$prefix}--tile > .#{$prefix}--slug,
+  .#{$prefix}--tile--expandable > div > .#{$prefix}--slug,
+  .#{$prefix}--tile--clickable .#{$prefix}--tile--slug-icon {
+    position: absolute;
+    inset-block-start: $spacing-05;
+    inset-inline-end: $spacing-05;
+  }
+
+  .#{$prefix}--tile.#{$prefix}--tile--selectable > .#{$prefix}--slug {
+    inset-inline-end: $spacing-08;
+  }
+
+  .#{$prefix}--tile.#{$prefix}--tile--clickable > .#{$prefix}--slug {
+    pointer-events: none;
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile {
+    @include callout-gradient();
+
+    border: 1px solid $border-tile;
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--expandable:hover {
+    @include callout-gradient();
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::before,
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::after,
+  .#{$prefix}--tile--slug.#{$prefix}--tile--clickable::before {
+    position: absolute;
+    display: block;
+    block-size: 100%;
+    content: '';
+    inline-size: 100%;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    opacity: 0;
+    transition: opacity $duration-fast-02 motion(standard, productive);
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::before,
+  .#{$prefix}--tile--slug.#{$prefix}--tile--clickable::before {
+    @include callout-gradient('hover');
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable:hover::before,
+  .#{$prefix}--tile--slug.#{$prefix}--tile--clickable:hover::before {
+    opacity: 1;
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::after {
+    @include callout-gradient('selected');
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--is-selected::after {
+    opacity: 1;
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--is-selected {
+    border-color: $border-inverse;
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
+    .#{$prefix}--tile-content,
+  .#{$prefix}--tile--slug.#{$prefix}--tile--clickable
+    .#{$prefix}--tile-content {
+    position: relative;
+    z-index: 1;
+    cursor: pointer;
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable > .#{$prefix}--slug,
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
+    > .#{$prefix}--tile__checkmark {
+    z-index: 1;
+  }
+
+  .#{$prefix}--tile--expandable:has(
+      .#{$prefix}--slug > .#{$prefix}--popover--open
+    ) {
+    overflow: visible;
+  }
+
+  // To Do: Replace svg overrides with actual AI icon
+  .#{$prefix}--tile--clickable .#{$prefix}--tile--slug-icon rect {
+    stroke: $icon-primary;
+  }
+
+  .#{$prefix}--tile--clickable .#{$prefix}--tile--slug-icon path {
+    fill: $icon-primary;
+  }
+
+  // Tile with slug and rounded corners
+  .#{$prefix}--tile--slug-rounded,
+  .#{$prefix}--tile--slug-rounded.#{$prefix}--tile--selectable::before,
+  .#{$prefix}--tile--slug-rounded.#{$prefix}--tile--selectable::after,
+  .#{$prefix}--tile--slug-rounded.#{$prefix}--tile--clickable::before {
+    border-radius: $spacing-05;
+  }
+
   // Windows HCM fix
   .#{$prefix}--tile__chevron svg,
   .#{$prefix}--tile__checkmark svg,

package/scss/utilities/_ai-gradient.scss

@@ -9,12 +9,11 @@
 
 /// Experimental - name and structure subject to change. Use at your own risk!
 /// Adds AI gradient styles to a component
-/// @access public
+/// @access private
 /// @param {String} $direction  - Direction of gradient from: `left`, `right`, `top`, and `bottom`
 /// @param {Number} $width - Percentage width of gradient with regards to parent component
 /// @example @include ai-gradient('right', '33%');
 /// @group utilities
-
 @mixin ai-gradient($direction: 'right', $width: 33%) {
   $deg: 0;
   @if $direction == 'bottom' {
@@ -40,3 +39,58 @@
       transparent 100%
     );
 }
+
+/// Experimental - name and structure subject to change. Use at your own risk!
+/// Adds callout gradient styles to a component
+/// @access private
+/// @example @include callout-gradient();
+/// @param {String} $type  - Type of gradient, either 'default', 'selected' or 'hover'
+/// @group utilities
+@mixin callout-gradient($type: 'default') {
+  @if $type == 'hover' {
+    background: linear-gradient(
+        0deg,
+        theme.$slug-callout-aura-start-hover-01 0%,
+        theme.$slug-callout-aura-end-hover-01 50%,
+        transparent 50%
+      ),
+      linear-gradient(
+        0deg,
+        theme.$slug-callout-aura-start-hover-02 0%,
+        theme.$slug-callout-aura-end-hover-02 50%,
+        transparent 50%
+      ),
+      linear-gradient(
+          180deg,
+          theme.$slug-callout-gradient-top-hover 0%,
+          theme.$slug-callout-gradient-bottom-hover 100%
+        )
+        rgba(0, 0, 0, 0.01);
+  } @else if $type == 'selected' {
+    background: linear-gradient(
+        0deg,
+        theme.$slug-callout-aura-start-selected 0%,
+        theme.$slug-callout-aura-end-selected 50%,
+        transparent 50%
+      ),
+      linear-gradient(
+          180deg,
+          theme.$slug-callout-gradient-top-selected 0%,
+          theme.$slug-callout-gradient-bottom-selected 100%
+        )
+        rgba(0, 0, 0, 0.01);
+  } @else {
+    background: linear-gradient(
+        0deg,
+        theme.$slug-callout-aura-start 0%,
+        theme.$slug-callout-aura-end 50%,
+        transparent 50%
+      ),
+      linear-gradient(
+          180deg,
+          theme.$slug-callout-gradient-top 0%,
+          theme.$slug-callout-gradient-bottom 100%
+        )
+        rgba(0, 0, 0, 0.01);
+  }
+}