@carbon/ibmdotcom-styles 2.0.0-rc.1 → 2.0.0-rc.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-styles",
   "description": "Carbon for IBM.com Styles",
-  "version": "2.0.0-rc.1",
+  "version": "2.0.0-rc.3",
   "license": "Apache-2.0",
   "main": "dist/ibm-dotcom-styles.min.css",
   "module": "src/scss",
@@ -48,5 +48,5 @@
     "sass": "~1.62.0",
     "sass-loader": "^13.0.0"
   },
-  "gitHead": "8031fcca05de52ae7519434beb5a80294491a06a"
+  "gitHead": "ee79c52acbd22e927393c520f195f291de9b549d"
 }

package/scss/components/button-group/_button-group.scss

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

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

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

package/scss/components/card-section-offset/_card-section-offset.scss

@@ -72,7 +72,7 @@
 
     ::slotted([slot='action']) {
       width: 90%;
-      max-width: rem(640px);
+      max-width: to-rem(640px);
 
       @include breakpoint(md) {
         width: calc(100% - $spacing-07);

package/scss/components/content-block-media/_content-block-media.scss

@@ -37,7 +37,7 @@
     }
 
     .#{$prefix}--feature-card {
-      max-width: rem(640px);
+      max-width: to-rem(640px);
     }
   }
 

package/scss/components/content-block-simple/_content-block-simple.scss

@@ -13,7 +13,7 @@
 
 @mixin content-block-simple {
   .#{$prefix}--content-block-simple__media-video {
-    max-width: rem(640px);
+    max-width: to-rem(640px);
   }
 
   .#{$prefix}--content-block-simple__content {

package/scss/components/content-item-row/_content-item-row.scss

@@ -161,7 +161,7 @@
   }
 
   :host(#{$c4d-prefix}-content-item-row-copy) ::slotted(:not([slot])) {
-    max-width: rem(640px);
+    max-width: to-rem(640px);
   }
 
   :host(#{$c4d-prefix}-content-item-row-eyebrow) {
@@ -193,18 +193,18 @@
     grid-auto-flow: dense;
 
     @include breakpoint(md) {
-      min-height: rem(306px);
+      min-height: to-rem(306px);
       grid-template-columns: repeat(8, 1fr);
       column-gap: $spacing-07;
     }
 
     @include breakpoint(lg) {
-      min-height: rem(272px);
+      min-height: to-rem(272px);
       grid-template-columns: repeat(12, 1fr);
     }
 
     @include breakpoint(xlg) {
-      min-height: rem(252px);
+      min-height: to-rem(252px);
     }
   }
 

package/scss/components/content-item-row-media/_content-item-row-media.scss

@@ -67,7 +67,7 @@
   }
 
   :host(#{$c4d-prefix}-content-item-row-media-copy) ::slotted(:not([slot])) {
-    max-width: rem(640px);
+    max-width: to-rem(640px);
     p {
       color: $text-primary;
     }

package/scss/components/cta-block/_cta-block.scss

@@ -79,7 +79,7 @@
     .#{$prefix}--content-block__heading,
     .#{$prefix}--content-block__copy {
       width: 90%;
-      max-width: rem(640px);
+      max-width: to-rem(640px);
 
       @include breakpoint(sm) {
         width: 100%;

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

@@ -10,12 +10,12 @@
 @use '../../globals/vars' as *;
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/components/modal' as *;
-@use '../../../../carbon-web-components/src/components/modal/modal';
 
 /// Expressive modal
 /// @access private
@@ -23,12 +23,10 @@
 
 @mixin expressive-modal {
   $modal: '.#{$prefix}--modal';
-  $button-size: rem(48px);
-  $icon-size: rem(20px);
-  $offset-close-icon: $spacing-07 - math.div($button-size - $icon-size, 2);
+  $icon-size: to-rem(20px);
 
   :host(#{$c4d-prefix}-expressive-modal) {
-    @extend :host(#{$prefix}-modal);
+    @extend .#{$prefix}--modal;
 
     .#{$prefix}--modal-container {
       grid-template-rows: 1fr;
@@ -60,7 +58,21 @@
   }
 
   :host(#{$c4d-prefix}-expressive-modal[open]) {
-    @extend :host(#{$prefix}-modal[open]);
+    @extend .#{$prefix}--modal;
+
+    opacity: 1;
+    transition: opacity $duration-moderate-02 motion(entrance, expressive),
+      visibility 0ms linear;
+    visibility: inherit;
+
+    .#{$prefix}--modal-container {
+      transform: translate3d(0, 0, 0);
+      transition: transform $duration-moderate-02 motion(entrance, expressive);
+    }
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 
   :host(#{$c4d-prefix}-expressive-modal-footer) .#{$prefix}--modal-footer {
@@ -122,6 +134,6 @@
   .#{$prefix}--modal--expressive--fullwidth .#{$prefix}--modal-content {
     padding-right: 0;
     height: auto;
-    min-height: rem(500px);
+    min-height: to-rem(500px);
   }
 }

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

@@ -26,7 +26,7 @@
 $fcb-large-custom-bp-copy: 992px;
 $fcb-large-custom-bp-nocopy: 752px;
 $fcb-breakpoint-up--lg: map.get(map.get($grid-breakpoints, 'lg'), 'width') -
-  rem(1px);
+  to-rem(1px);
 
 $feature-flags: (
   enable-experimental-tile-contrast: true,
@@ -235,8 +235,8 @@ $feature-flags: (
 
       svg {
         @include breakpoint(sm) {
-          width: rem(20px);
-          height: rem(20px);
+          width: to-rem(20px);
+          height: to-rem(20px);
         }
 
         @include breakpoint(md) {
@@ -347,7 +347,7 @@ $feature-flags: (
       ::slotted(#{$c4d-prefix}-card-eyebrow),
       ::slotted(#{$c4d-prefix}-card-heading) {
         width: 100%;
-        max-width: rem(480px);
+        max-width: to-rem(480px);
 
         @include breakpoint(md) {
           width: 90%;
@@ -460,8 +460,8 @@ $feature-flags: (
     float: none;
 
     @include breakpoint(sm) {
-      width: rem(20px);
-      height: rem(20px);
+      width: to-rem(20px);
+      height: to-rem(20px);
     }
 
     @include breakpoint(md) {

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

@@ -28,7 +28,7 @@
   .#{$prefix}--filter-panel__section {
     box-sizing: border-box;
     background-color: $layer-01;
-    padding-bottom: rem(112px);
+    padding-bottom: to-rem(112px);
     margin-top: $spacing-05;
     overflow: initial;
 
@@ -67,14 +67,14 @@
       outline: $spacing-01 solid $focus;
       margin-left: $spacing-01;
       margin-right: $spacing-01;
-      padding-left: rem(14px);
+      padding-left: to-rem(14px);
       z-index: 1;
     }
 
     .#{$prefix}--close__icon {
       position: absolute;
       right: $spacing-05;
-      top: rem(10px);
+      top: to-rem(10px);
     }
   }
 
@@ -161,8 +161,8 @@
   }
 
   :host(#{$c4d-prefix}-filter-panel-checkbox) {
-    padding-left: rem(14px);
-    padding-bottom: rem(6px);
+    padding-left: to-rem(14px);
+    padding-bottom: to-rem(6px);
     @extend .#{$prefix}--checkbox-label;
     @include type-style('body-compact-01');
 
@@ -225,7 +225,7 @@
     .#{$prefix}--close__icon {
       position: absolute;
       right: $spacing-05;
-      top: rem(10px);
+      top: to-rem(10px);
     }
   }
 

package/scss/components/footer/_footer-logo.scss

@@ -64,12 +64,19 @@
   }
 
   :host(#{$c4d-prefix}-footer-logo[size='micro']) {
-    align-self: center;
-    margin: 0;
+    position: relative;
 
-    @include breakpoint-between(md, lg) {
+    .#{$c4d-prefix}--footer-logo__link {
       position: absolute;
-      bottom: rem(58.5px);
+      top: -37px;
+
+      @include breakpoint(lg) {
+        position: relative;
+        top: 0;
+      }
     }
+
+    align-self: center;
+    margin: 0;
   }
 }

package/scss/components/footer/_footer.scss

@@ -486,7 +486,7 @@
     }
 
     .#{$prefix}--list-box__menu {
-      bottom: rem($spacing-09);
+      bottom: to-rem($spacing-09);
     }
 
     .#{$prefix}--dropdown,

package/scss/components/footer/_language-selector.scss

@@ -113,7 +113,7 @@
     .#{$prefix}--list-box--up {
       .#{$prefix}--list-box__menu {
         z-index: 1;
-        bottom: rem(47px);
+        bottom: to-rem(47px);
       }
     }
 

package/scss/components/global-banner/_global-banner.scss

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

package/scss/components/horizontal-rule/_horizontal-rule.scss

@@ -14,7 +14,7 @@
 @mixin horizontal-rule {
   $subtle-contrast: $border-subtle-01;
   $strong-contrast: $border-strong-01;
-  $thin-weight: rem(1px);
+  $thin-weight: to-rem(1px);
 
   :host(#{$c4d-prefix}-hr) {
     display: block;