@carbon/ibmdotcom-styles 1.52.0 → 1.53.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-styles",
   "description": "Carbon for IBM.com Styles",
-  "version": "1.52.0",
+  "version": "1.53.0-rc.0",
   "license": "Apache-2.0",
   "main": "dist/ibm-dotcom-styles.min.css",
   "module": "src/scss",
@@ -34,15 +34,15 @@
     "@carbon/grid": "10.43.2",
     "@carbon/icons-react": "10.49.2",
     "@carbon/import-once": "10.7.0",
-    "@carbon/layout": "10.37.1",
+    "@carbon/layout": "10.37.2",
     "@carbon/motion": "10.29.2",
     "@carbon/telemetry": "0.1.0",
     "@carbon/themes": "10.55.3",
-    "@carbon/type": "10.45.2",
-    "carbon-components": "10.58.8"
+    "@carbon/type": "10.45.3",
+    "carbon-components": "10.58.12"
   },
   "devDependencies": {
-    "carbon-components-react": "7.59.8",
+    "carbon-components-react": "7.59.16",
     "del": "^6.0.0",
     "gulp": "^4.0.2",
     "gulp-autoprefixer": "^6.1.0",
@@ -53,5 +53,5 @@
     "node-sass": "^8.0.0",
     "require-dir": "^1.2.0"
   },
-  "gitHead": "5bd3f59378ffc24915edab67f3fa102d921f258b"
+  "gitHead": "af3f800ae4236d13d49a16c3d0e2633acf6cb700"
 }

package/scss/components/buttongroup/_buttongroup.scss

@@ -60,7 +60,7 @@
 
       @media print {
         background: $white-0;
-        border: carbon--rem(1px) solid $gray-100;
+        border: rem(1px) solid $gray-100;
         color: $gray-100;
         font-weight: 600;
         display: block;

package/scss/components/callout-with-media/_callout-with-media.scss

@@ -45,7 +45,7 @@
   :host(#{$dds-prefix}-callout-with-media) ::slotted([slot='copy']),
   .#{$prefix}--callout-with-media .#{$prefix}--callout-with-media-copy {
     padding-right: $spacing-07;
-    max-width: carbon--rem(640px);
+    max-width: rem(640px);
     width: auto;
   }
 

package/scss/components/expressive-modal/_expressive-modal.scss

@@ -16,8 +16,8 @@
 
 @mixin expressive-model {
   $modal: '.#{$prefix}--modal';
-  $button-size: carbon--rem(48px);
-  $icon-size: carbon--rem(20px);
+  $button-size: rem(48px);
+  $icon-size: rem(20px);
   $offset-close-icon: $carbon--spacing-07 - (($button-size - $icon-size) / 2);
 
   :host(#{$dds-prefix}-expressive-modal),
@@ -77,7 +77,7 @@
   #{$modal}--expressive--fullwidth #{$modal}-content {
     padding-right: 0;
     height: auto;
-    min-height: carbon--rem(500px);
+    min-height: rem(500px);
   }
 }
 

package/scss/components/feature-card/_feature-card.scss

@@ -18,7 +18,7 @@ $fcb-large-custom-bp-nocopy: 752px;
 $fcb-breakpoint-up--lg: map-get(
     map-get($carbon--grid-breakpoints, 'lg'),
     'width'
-  ) - carbon--rem(1px);
+  ) - rem(1px);
 
 @mixin card {
   @include carbon--breakpoint-down('md') {
@@ -215,8 +215,8 @@ $fcb-breakpoint-up--lg: map-get(
         fill: $inverse-link;
 
         @include carbon--breakpoint('sm') {
-          width: carbon--rem(20px);
-          height: carbon--rem(20px);
+          width: rem(20px);
+          height: rem(20px);
         }
 
         @include carbon--breakpoint('md') {
@@ -312,7 +312,7 @@ $fcb-breakpoint-up--lg: map-get(
       ::slotted(#{$dds-prefix}-card-heading) {
         width: 100%;
         color: $inverse-01;
-        max-width: carbon--rem(480px);
+        max-width: rem(480px);
 
         @include carbon--breakpoint('md') {
           width: 90%;
@@ -399,8 +399,8 @@ $fcb-breakpoint-up--lg: map-get(
     fill: $inverse-link;
 
     @include carbon--breakpoint('sm') {
-      width: carbon--rem(20px);
-      height: carbon--rem(20px);
+      width: rem(20px);
+      height: rem(20px);
     }
 
     @include carbon--breakpoint('md') {

package/scss/components/feature-card-block-large/_feature-card-block-large.scss

@@ -18,7 +18,7 @@ $fcb-large-custom-bp-nocopy: 752px;
 $fcb-breakpoint-up--lg: map-get(
     map-get($carbon--grid-breakpoints, 'lg'),
     'width'
-  ) - carbon--rem(1px);
+  ) - rem(1px);
 
 @mixin feature-card-block-large {
   :host(#{$dds-prefix}-feature-card-block-large),
@@ -111,7 +111,7 @@ $fcb-breakpoint-up--lg: map-get(
       ::slotted(#{$dds-prefix}-card-eyebrow),
       ::slotted(#{$dds-prefix}-card-heading) {
         width: 100%;
-        max-width: carbon--rem(480px);
+        max-width: rem(480px);
         @include carbon--breakpoint('md') {
           width: 90%;
         }

package/scss/components/filter-panel/_filter-panel.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2022
+ * Copyright IBM Corp. 2016, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -237,18 +237,7 @@
   }
 
   :host(#{$dds-prefix}-filter-panel-heading) {
-    @include carbon--type-style('heading-01');
-    @include carbon--breakpoint('sm') {
-      margin-left: $spacing-05;
-      margin-bottom: $spacing-05;
-    }
-    @include carbon--breakpoint('lg') {
-      margin: 0;
-    }
-
-    @include carbon--breakpoint-down('lg') {
-      display: none;
-    }
+    display: none;
   }
 
   :host(#{$dds-prefix}-filter-group:first-of-type) {

package/scss/components/horizontalrule/_horizontalrule.scss

@@ -12,7 +12,7 @@
   $low-contrast: $ui-03;
   $medium-contrast: $ui-04;
   $high-contrast: $ui-05;
-  $thin-weight: carbon--rem(1px);
+  $thin-weight: rem(1px);
 
   :host(#{$dds-prefix}-hr)[size='small'] {
     @extend .#{$prefix}--hr--small;
@@ -56,7 +56,7 @@
     }
 
     &.#{$prefix}--hr--thick {
-      height: carbon--rem(2px);
+      height: rem(2px);
     }
 
     &.#{$prefix}--hr--low-contrast {

package/scss/components/image/_image.scss

@@ -44,7 +44,7 @@
   :host(#{$dds-prefix}-image-logo) {
     background-color: $ui-02;
     margin: $spacing-05 $spacing-05 $spacing-03 $spacing-05;
-    max-width: carbon--rem(160px);
+    max-width: rem(160px);
 
     @include ratio-base(2, 1, false);
 

package/scss/components/masthead/_masthead-megamenu.scss

@@ -276,7 +276,7 @@
       text-decoration: none;
       width: 100%;
       margin: 0 $spacing-05;
-      border-top: carbon--rem(1px) solid $ui-03;
+      border-top: rem(1px) solid $ui-03;
       height: $spacing-09;
 
       &:hover,
@@ -286,7 +286,7 @@
       }
 
       &:hover {
-        border-top: carbon--rem(1px) solid transparent;
+        border-top: rem(1px) solid transparent;
         color: $hover-primary-text;
       }
     }
@@ -337,7 +337,7 @@
   .#{$prefix}--masthead__megamenu__highlight-section {
     min-height: 100%;
     padding-top: rem(18px);
-    border-right: carbon--rem(1px) solid $ui-03;
+    border-right: rem(1px) solid $ui-03;
     @include carbon--make-col(4, 16);
   }
 
@@ -349,7 +349,7 @@
     :host(#{$dds-prefix}-megamenu-left-navigation),
     .#{$prefix}--masthead__megamenu__highlight-section {
       border-right: none;
-      border-bottom: carbon--rem(1px) solid $ui-03;
+      border-bottom: rem(1px) solid $ui-03;
       column-count: 2;
       column-gap: 0;
       @include carbon--make-col(8, 8);

package/scss/components/masthead/_masthead.scss

@@ -73,11 +73,11 @@ $search-transition-timing: 95ms;
         content: '';
         display: block;
         position: absolute;
-        right: carbon--rem(-3px);
+        right: rem(-3px);
         top: 50%;
         transform: translateY(-50%);
-        height: carbon--rem(24px);
-        width: carbon--rem(1px);
+        height: rem(24px);
+        width: rem(1px);
         background-color: $ui-03;
       }
     }

package/scss/components/search-with-typeahead/_search-with-typeahead.scss

@@ -306,10 +306,10 @@ $button-transition: background-color 110ms, border-color 110ms, color 110ms;
       }
 
       .react-autosuggest__suggestions-container {
-        top: carbon--rem(50px);
+        top: rem(50px);
 
         @include carbon--breakpoint('md') {
-          top: carbon--rem(66px);
+          top: rem(66px);
         }
       }
 
@@ -359,17 +359,17 @@ $button-transition: background-color 110ms, border-color 110ms, color 110ms;
         }
 
         .react-autosuggest__suggestions-container {
-          top: carbon--rem(50px);
+          top: rem(50px);
 
           @include carbon--breakpoint('md') {
-            top: carbon--rem(50px);
+            top: rem(50px);
           }
         }
       }
     }
 
     &[sticky-search] {
-      top: carbon--rem(80px);
+      top: rem(80px);
     }
 
     &[theme-sticky] {

package/scss/components/tableofcontents/_tableofcontents.scss

@@ -27,7 +27,7 @@ $hover-transition-timing: 95ms;
 
   .#{$prefix}--tableofcontents__desktop__item {
     a {
-      border-left: carbon--rem(4px) solid $ui-03;
+      border-left: rem(4px) solid $ui-03;
       color: $text-02;
 
       &:hover {
@@ -129,7 +129,7 @@ $hover-transition-timing: 95ms;
     border: none;
     background-color: transparent;
     color: $text-01;
-    height: carbon--rem(48px);
+    height: rem(48px);
     appearance: none;
     @include carbon--type-style(body-short-02);
     @include focus-outline('reset');
@@ -145,7 +145,7 @@ $hover-transition-timing: 95ms;
   }
 
   .#{$prefix}--tableofcontents__mobile__select__wrapper {
-    height: carbon--rem(47px);
+    height: rem(47px);
     position: relative;
     display: flex;
     align-items: center;
@@ -173,9 +173,9 @@ $hover-transition-timing: 95ms;
       text-decoration: none;
       display: inline-block;
       width: 100%;
-      padding-top: carbon--rem(12px);
-      padding-bottom: carbon--rem(12px);
-      padding-left: carbon--rem(12px);
+      padding-top: rem(12px);
+      padding-bottom: rem(12px);
+      padding-left: rem(12px);
       @include carbon--type-style('body-long-02');
     }
 
@@ -256,7 +256,7 @@ $hover-transition-timing: 95ms;
     @include carbon--breakpoint('lg') {
       filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
       border-bottom: 1px solid $ui-04;
-      height: carbon--rem(49px);
+      height: rem(49px);
       background-color: $ui-01;
     }
 
@@ -269,7 +269,7 @@ $hover-transition-timing: 95ms;
 
         &:focus {
           outline: 2px solid $focus;
-          height: carbon--rem(48px);
+          height: rem(48px);
           outline-offset: -2px;
         }
       }
@@ -277,7 +277,7 @@ $hover-transition-timing: 95ms;
 
     .#{$prefix}--tableofcontents__desktop__item--active a {
       border-bottom: 2px solid $interactive-04;
-      padding-bottom: carbon--rem(10px);
+      padding-bottom: rem(10px);
     }
 
     .#{$prefix}--tableofcontents__desktop {

package/scss/components/tabs-extended/_tabs-extended.scss

@@ -44,7 +44,7 @@
         .#{$prefix}--tabs__nav-link,
         .#{$prefix}--tabs__nav-link:focus,
         .#{$prefix}--tabs__nav-link:active {
-          border-bottom: carbon--rem(2px) solid $border-interactive;
+          border-bottom: rem(2px) solid $border-interactive;
 
           p {
             @include type-style('productive-heading-02');
@@ -68,7 +68,7 @@
         white-space: normal;
         background: none;
         border: initial;
-        border-bottom: carbon--rem(2px) solid $ui-03;
+        border-bottom: rem(2px) solid $ui-03;
         display: inline-flex;
         width: 100%;
         text-align: left;
@@ -151,13 +151,13 @@
         .#{$prefix}--tabs__nav-link {
           width: auto;
           padding: 0;
-          border-bottom: carbon--rem(2px) solid transparent;
+          border-bottom: rem(2px) solid transparent;
         }
 
         .#{$prefix}--tabs__nav-item {
           width: max-content;
           max-width: calc(100% - #{$spacing-06});
-          min-height: carbon--rem(26px);
+          min-height: rem(26px);
           margin-top: $spacing-06;
         }
       }
@@ -250,7 +250,7 @@ button.#{$prefix}--tabs__nav-link {
     &:focus,
     &:active {
       width: rem(160px);
-      border-bottom: carbon--rem(2px);
+      border-bottom: rem(2px);
     }
   }
 }

package/scss/components/tag-link/_tag-link.scss

@@ -11,8 +11,8 @@
 :host(#{$dds-prefix}-tag-link) a {
   @include carbon--type-style(body-long-01, true);
 
-  padding: carbon--rem(6px) $carbon--spacing-05;
-  border-radius: carbon--rem(15px);
+  padding: rem(6px) $carbon--spacing-05;
+  border-radius: rem(15px);
   background-color: $ui-01;
   color: $text-02;
   text-decoration: none;

package/scss/components/universal-banner/_universal-banner.scss

@@ -37,8 +37,8 @@
 
       &:focus,
       &:active {
-        outline: carbon--rem(1px) solid $ui-background;
-        outline-offset: carbon--rem(-1px);
+        outline: rem(1px) solid $ui-background;
+        outline-offset: rem(-1px);
         border-color: $focus;
       }
     }