@carbon/styles 1.7.0 → 1.9.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.7.0",
+  "version": "1.9.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -32,13 +32,13 @@
     "sass": "^1.33.0"
   },
   "dependencies": {
-    "@carbon/colors": "^11.3.0",
+    "@carbon/colors": "^11.4.0-rc.0",
     "@carbon/feature-flags": "^0.8.0",
-    "@carbon/grid": "^11.3.0",
-    "@carbon/layout": "^11.3.0",
-    "@carbon/motion": "^11.2.0",
-    "@carbon/themes": "^11.4.0",
-    "@carbon/type": "^11.4.0",
+    "@carbon/grid": "^11.5.0-rc.0",
+    "@carbon/layout": "^11.5.0-rc.0",
+    "@carbon/motion": "^11.3.0-rc.0",
+    "@carbon/themes": "^11.6.0-rc.0",
+    "@carbon/type": "^11.6.0-rc.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
@@ -59,5 +59,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "65f0882c8fbf9f52f9acf8cf899b124f9cbab720"
+  "gitHead": "5a23e3960d9bf5b652b96b6a051ae2b04cfa9a08"
 }

package/scss/components/aspect-ratio/_aspect-ratio.scss

@@ -63,11 +63,7 @@ $aspect-ratios: (
     $height: list.nth($aspect-ratio, 2);
 
     .#{$prefix}--aspect-ratio--#{$width}x#{$height}::before {
-      @if meta.function-exists('div', 'math') {
-        padding-top: math.percentage(math.div($height, $width));
-      } @else {
-        padding-top: math.percentage(($height / $width));
-      }
+      padding-top: math.percentage(math.div($height, $width));
     }
   }
 }

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

@@ -348,7 +348,7 @@
 
   .#{$prefix}--data-table thead th.#{$prefix}--table-column-checkbox,
   .#{$prefix}--data-table tbody td.#{$prefix}--table-column-checkbox {
-    width: 2.5rem;
+    min-width: 2.5rem;
     // spacing between checkbox / chevron and next cell should be 8px / 0.5rem
     padding-right: rem(4px);
     padding-left: 1rem;

package/scss/components/list-box/_list-box.scss

@@ -146,6 +146,8 @@ $list-box-menu-width: rem(300px);
   }
 
   .#{$prefix}--list-box[data-invalid].#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__field,
+  .#{$prefix}--list-box.#{$prefix}--list-box--warning.#{$prefix}--list-box--inline
     .#{$prefix}--list-box__field {
     padding-right: rem(56px);
   }

package/scss/components/search/_search.scss

@@ -367,6 +367,10 @@
     fill: $icon-secondary;
   }
 
+  .#{$prefix}--search--expandable.#{$prefix}--search--disabled svg {
+    fill: $icon-disabled;
+  }
+
   // Windows HCM fix
   .#{$prefix}--search-close svg,
   .#{$prefix}--search-magnifier-icon {

package/scss/utilities/_convert.scss

@@ -23,11 +23,7 @@ $base-font-size: 16px !default;
     @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @if meta.function-exists('div', 'math') {
-    @return math.div($px, $base-font-size) * 1rem;
-  } @else {
-    @return ($px / $base-font-size) * 1rem;
-  }
+  @return math.div($px, $base-font-size) * 1rem;
 }
 
 /// Convert a given px unit to a em unit
@@ -40,9 +36,5 @@ $base-font-size: 16px !default;
     @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @if meta.function-exists('div', 'math') {
-    @return math.div($px, $base-font-size) * 1em;
-  } @else {
-    @return ($px / $base-font-size) * 1em;
-  }
+  @return math.div($px, $base-font-size) * 1em;
 }

package/scss/utilities/_hide-at-breakpoint.scss

@@ -0,0 +1,44 @@
+@use '../breakpoint' as *;
+@use '../config';
+
+// Mixins that can be used to hide elements only at specific breakpoints.
+// Helpful for when you would like to hide elements outside of a Grid context
+@mixin hide-at-sm {
+  padding: 2rem 1rem;
+  background: #8a3ffc;
+  @include breakpoint-between('sm', 'md') {
+    display: none;
+  }
+}
+
+@mixin hide-at-md {
+  padding: 2rem 1rem;
+  background: #4589ff;
+  @include breakpoint-between('md', 'lg') {
+    display: none;
+  }
+}
+
+@mixin hide-at-lg {
+  padding: 2rem 1rem;
+  background: #42be65;
+  @include breakpoint-between('lg', 'xlg') {
+    display: none;
+  }
+}
+
+@mixin hide-at-xlg {
+  padding: 2rem 1rem;
+  background: #f1c21b;
+  @include breakpoint-between('xlg', 'max') {
+    display: none;
+  }
+}
+
+@mixin hide-at-max {
+  padding: 2rem 1rem;
+  background: #da1e28;
+  @include breakpoint-up('max') {
+    display: none;
+  }
+}

package/scss/utilities/_index.scss

@@ -10,6 +10,7 @@
 @forward 'component-reset' as component-*;
 @forward 'convert' show em, rem;
 @forward 'focus-outline';
+@forward 'hide-at-breakpoint';
 @forward 'high-contrast-mode';
 @forward 'keyframes';
 @forward 'placeholder-colors';