@carbon/styles 0.7.0 → 0.9.0

package/scss/components/treeview/_treeview.scss

@@ -8,7 +8,7 @@
 @use '../../config' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
-@use '../../compat/theme' as *;
+@use '../../theme' as *;
 @use '../../type' as *;
 @use '../../utilities/convert' as *;
 @use '../../utilities/focus-outline' as *;
@@ -23,8 +23,8 @@
 
     .#{$prefix}--tree-node {
       padding-left: $spacing-05;
-      background-color: $ui-01;
-      color: $text-02;
+      background-color: $layer-01;
+      color: $text-secondary;
 
       &:focus {
         outline: none;
@@ -44,8 +44,8 @@
     .#{$prefix}--tree-node--disabled
       .#{$prefix}--tree-node__label:hover
       .#{$prefix}--tree-node__label__details {
-      background-color: $disabled-01;
-      color: $disabled-02;
+      background-color: $field-01;
+      color: $text-disabled;
     }
 
     .#{$prefix}--tree-node--disabled .#{$prefix}--tree-parent-node__toggle-icon,
@@ -56,7 +56,7 @@
     .#{$prefix}--tree-node--disabled
       .#{$prefix}--tree-node__label:hover
       .#{$prefix}--tree-node__icon {
-      fill: $disabled-02;
+      fill: $icon-disabled;
     }
 
     .#{$prefix}--tree-node--disabled,
@@ -74,19 +74,19 @@
       align-items: center;
 
       &:hover {
-        background-color: $hover-ui;
-        color: $text-01;
+        background-color: $layer-hover-01;
+        color: $text-primary;
       }
     }
 
     .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__label__details {
-      color: $text-01;
+      color: $text-primary;
     }
 
     .#{$prefix}--tree-node__label:hover
       .#{$prefix}--tree-parent-node__toggle-icon,
     .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__icon {
-      fill: $icon-01;
+      fill: $icon-primary;
     }
 
     .#{$prefix}--tree-leaf-node {
@@ -122,7 +122,7 @@
     }
 
     .#{$prefix}--tree-parent-node__toggle-icon {
-      fill: $icon-02;
+      fill: $icon-secondary;
       transform: rotate(-90deg);
       transition: all $duration-fast-02 motion(standard, productive);
     }
@@ -135,15 +135,15 @@
       min-width: 1rem;
       min-height: 1rem;
       margin-right: $spacing-03;
-      fill: $icon-02;
+      fill: $icon-secondary;
     }
 
     .#{$prefix}--tree-node--selected > .#{$prefix}--tree-node__label {
-      background-color: $selected-ui;
-      color: $text-01;
+      background-color: $layer-selected-01;
+      color: $text-primary;
 
       &:hover {
-        background-color: $hover-selected-ui;
+        background-color: $layer-selected-hover-01;
       }
     }
 
@@ -153,7 +153,7 @@
     .#{$prefix}--tree-node--selected
       > .#{$prefix}--tree-node__label
       .#{$prefix}--tree-node__icon {
-      fill: $icon-01;
+      fill: $icon-primary;
     }
 
     .#{$prefix}--tree-node--active > .#{$prefix}--tree-node__label {
@@ -165,7 +165,7 @@
         left: 0;
         width: rem(4px);
         height: 100%;
-        background-color: $interactive-04;
+        background-color: $interactive;
         content: '';
       }
     }

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

@@ -269,6 +269,25 @@
     position: relative;
   }
 
+  .#{$prefix}--header__submenu--current::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    border-bottom: 3px solid $border-interactive;
+    content: '';
+  }
+
+  .#{$prefix}--header__submenu--current:focus {
+    border: 2px solid $focus;
+  }
+
+  .#{$prefix}--header__submenu--current:focus::after {
+    border: 0;
+  }
+
   .#{$prefix}--header__menu-title[aria-haspopup='true'] {
     position: relative;
   }

package/scss/utilities/_convert.scss

@@ -5,11 +5,12 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'sass:meta';
+@use "sass:math";
+
 /// Default font size
 /// @type Number
 /// @access public
-@use "sass:math";
-
 $base-font-size: 16px !default;
 
 /// Convert a given px unit to a rem unit
@@ -23,7 +24,11 @@ $base-font-size: 16px !default;
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @return math.div($px, $base-font-size) * 1rem;
+  @if meta.function-exists('div', 'math') {
+    @return math.div($px, $base-font-size) * 1rem;
+  } @else {
+    @return ($px / $base-font-size) * 1rem;
+  }
 }
 
 /// Convert a given px unit to a em unit
@@ -37,5 +42,9 @@ $base-font-size: 16px !default;
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @return math.div($px, $base-font-size) * 1em;
+  @if meta.function-exists('div', 'math') {
+    @return math.div($px, $base-font-size) * 1em;
+  } @else {
+    @return ($px / $base-font-size) * 1em;
+  }
 }