@carbon/ibmdotcom-styles 2.11.1 → 2.12.0-rc.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-styles",
   "description": "Carbon for IBM.com Styles",
-  "version": "2.11.1",
+  "version": "2.12.0-rc.1",
   "license": "Apache-2.0",
   "main": "dist/ibm-dotcom-styles.min.css",
   "module": "src/scss",
@@ -30,14 +30,14 @@
     "upgrade-carbon": "yarn upgrade-interactive @carbon/layout @carbon/styles @carbon/themes @carbon/icons-react --latest --exact"
   },
   "dependencies": {
-    "@carbon/icons-react": "11.45.0",
-    "@carbon/layout": "11.23.1",
-    "@carbon/styles": "1.61.0",
-    "@carbon/type": "11.28.1",
+    "@carbon/icons-react": "11.47.1",
+    "@carbon/layout": "11.24.0",
+    "@carbon/styles": "1.63.1",
+    "@carbon/type": "11.29.0",
     "@ibm/telemetry-js": "^1.5.0"
   },
   "devDependencies": {
-    "@carbon/themes": "11.37.1",
+    "@carbon/themes": "11.38.0",
     "del": "^6.0.0",
     "gulp": "^4.0.2",
     "gulp-autoprefixer": "^6.1.0",
@@ -48,5 +48,5 @@
     "sass": "~1.77.0",
     "sass-loader": "^13.0.0"
   },
-  "gitHead": "ca824e92598a3965c4bc1917d1e41b08628db772"
+  "gitHead": "c4fda9d7a9f2c8cbb88226be6cbacb20d58eb708"
 }

package/scss/components/card/_card.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -120,7 +120,7 @@
       display: flex;
       flex: 1;
       justify-content: space-between;
-      min-block-size: carbon--mini-units(20);
+      min-block-size: $spacing-13;
       transition: $duration-moderate-01 motion(standard, productive);
 
       @include ratio-base(2, 1, false);

package/scss/components/card-group/_card-group.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -64,7 +64,7 @@
 
     .#{$prefix}--image {
       &__img {
-        block-size: carbon--mini-units(30);
+        block-size: to-rem(240px);
       }
 
       @include breakpoint(lg) {

package/scss/components/card-in-card/_card-in-card.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -157,7 +157,7 @@
   :host(#{$c4d-prefix}-card-in-card)[grid-mode='narrow'],
   .#{$prefix}--card-in-card--narrow {
     @include breakpoint(lg) {
-      inline-size: calc(100% - #{carbon--mini-units(2)});
+      inline-size: calc(100% - #{$spacing-05});
     }
 
     .#{$prefix}--card__wrapper {

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -39,7 +39,7 @@
     }
 
     .#{$prefix}--content-block__cta-col {
-      max-inline-size: carbon--mini-units(40);
+      max-inline-size: to-rem(320px);
     }
   }
 }

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -155,7 +155,7 @@
       padding-block-end: $spacing-09;
 
       @include breakpoint(lg) {
-        padding-block-end: carbon--mini-units(10);
+        padding-block-end: $spacing-11;
       }
 
       .#{$prefix}--cta-block__cta {

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -154,7 +154,7 @@
       padding-block-end: $spacing-09;
 
       @include breakpoint(lg) {
-        padding-block-end: carbon--mini-units(10);
+        padding-block-end: $spacing-11;
       }
 
       .#{$prefix}--cta-section__cta {

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

@@ -21,7 +21,6 @@
 @use '../../components/card';
 @use '../../globals/utils/aspect-ratio' as *;
 @use '../../globals/utils/hang' as *;
-@use '../../../../web-components/src/components/card/card' as *;
 
 $fcb-large-custom-bp-copy: 992px;
 $fcb-large-custom-bp-nocopy: 752px;
@@ -169,12 +168,12 @@ $feature-flags: (
     @include breakpoint-down(md) {
       .#{$prefix}--card__content {
         justify-content: space-between;
-        padding: carbon--mini-units(2);
+        padding: $spacing-05;
         block-size: 100%;
       }
 
       #{$prefix}--card__heading {
-        padding: carbon--mini-units(2);
+        padding: $spacing-05;
         margin: 0;
         inline-size: 100%;
         padding-block-end: $spacing-07;
@@ -182,7 +181,7 @@ $feature-flags: (
       }
 
       .#{$prefix}--card__footer {
-        margin-block-start: carbon--mini-units(-4);
+        margin-block-start: -1 * $spacing-07;
         padding-block-start: 0;
       }
 

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -65,7 +65,7 @@
       }
 
       @include breakpoint(md) {
-        min-inline-size: carbon--mini-units(27);
+        min-inline-size: to-rem(216px);
 
         .#{$prefix}--footer--short & {
           float: inline-end;
@@ -86,7 +86,7 @@
     @include breakpoint(md) {
       @include make-col(4, 8);
 
-      margin-block-end: carbon--mini-units(2);
+      margin-block-end: $spacing-05;
 
       .#{$prefix}--footer--short & {
         @include make-col-offset(2, 8);

package/scss/components/image/_image.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -48,18 +48,7 @@
 
   :host(#{$c4d-prefix}-image)[card-group-item],
   :host(#{$c4d-prefix}-image) {
-    @include ratio-base(4, 3, true);
-
     overflow: hidden;
-    block-size: 0;
-
-    padding-block-start: 75%;
-
-    .#{$c4d-prefix}--image__img {
-      position: absolute;
-      block-size: 100%;
-      inset-block-start: 0;
-    }
   }
 
   .#{$c4d-prefix}--image__longdescription {
@@ -74,7 +63,7 @@
   :host(#{$c4d-prefix}-image)[heading] {
     display: block;
     margin-block: $spacing-07;
-    max-inline-size: carbon--mini-units(80);
+    max-inline-size: to-rem(640px);
 
     @include breakpoint(md) {
       margin-block: $spacing-07;

package/scss/components/leadspace-block/_leadspace-block.scss

@@ -90,14 +90,14 @@
     padding-block-end: $spacing-09;
 
     @include breakpoint(md) {
-      max-inline-size: carbon--mini-units(80);
+      max-inline-size: to-rem(640px);
     }
   }
 
   :host(#{$c4d-prefix}-leadspace-block-media),
   .#{$prefix}--leadspace-block .#{$prefix}--leadspace-block__media {
     display: block;
-    max-inline-size: carbon--mini-units(80);
+    max-inline-size: to-rem(640px);
     padding-block-end: $spacing-07;
 
     ::slotted(#{$c4d-prefix}-image) {

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -258,7 +258,7 @@
         flex: 1;
         padding: 0 $spacing-05;
         background-color: $layer-01;
-        block-size: carbon--mini-units(6);
+        block-size: $spacing-09;
         color: $text-primary;
         outline: $spacing-01 solid transparent;
         outline-offset: -#{$spacing-01};

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -16,7 +16,7 @@
 @use '@carbon/styles/scss/components/button' as *;
 @use '../../globals/vars' as *;
 @use '@carbon/styles/scss/components/tabs/vars' as *;
-@use '../../../../carbon-web-components/src/components/tabs/tabs';
+@use '@carbon/web-components/scss/components/tabs/tabs';
 
 @mixin tabs-extended {
   :host(#{$c4d-prefix}-tabs-extended),

package/scss/globals/utils/_content-width.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -8,10 +8,10 @@
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/spacing' as *;
 
-//Sets the Width and Max-Width of the Card to 90% / carbon--mini-units(80)
+// Sets the Width and Max-Width of the Card to 90% / 640px.
 @mixin content-width {
   inline-size: 90%;
-  max-inline-size: carbon--mini-units(80);
+  max-inline-size: to-rem(640px);
 
   @include breakpoint(md) {
     inline-size: calc(100% - #{$spacing-07});

package/scss/patterns/blocks/callout-data/_callout-data.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -32,7 +32,7 @@
           color: $text-helper;
 
           inline-size: 90%;
-          max-inline-size: carbon--mini-units(80);
+          max-inline-size: to-rem(640px);
 
           padding-block: $spacing-03 $layout-03;
 
@@ -50,19 +50,19 @@
         block-size: auto;
 
         @include breakpoint(md) {
-          block-size: carbon--mini-units(40);
+          block-size: to-rem(320px);
         }
 
         @include breakpoint(lg) {
-          block-size: carbon--mini-units(50);
+          block-size: to-rem(400px);
         }
 
         @include breakpoint(xlg) {
-          block-size: carbon--mini-units(60);
+          block-size: to-rem(480px);
         }
 
         @include breakpoint(max) {
-          block-size: carbon--mini-units(70);
+          block-size: to-rem(560px);
         }
       }
 

package/scss/patterns/blocks/leadspace-block/_leadspace-block.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -28,7 +28,7 @@
 
     &__media {
       inline-size: 100%;
-      max-inline-size: carbon--mini-units(80);
+      max-inline-size: to-rem(640px);
     }
 
     .#{$prefix}--content-block {
@@ -52,7 +52,7 @@
       }
 
       .#{$prefix}--link-list {
-        max-inline-size: carbon--mini-units(80);
+        max-inline-size: to-rem(640px);
         padding-block: $spacing-09;
 
         &__list__CTA {

package/scss/patterns/sections/cta-section/_cta-section.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -128,7 +128,7 @@
       padding-block-end: $spacing-09;
 
       @include breakpoint(lg) {
-        padding-block-end: carbon--mini-units(10);
+        padding-block-end: $spacing-11;
       }
 
       .#{$prefix}--cta-section {

package/scss/patterns/sections/leadspace/_leadspace.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -141,7 +141,7 @@ $btn-min-width: 26;
     }
 
     .#{$prefix}--btn {
-      min-inline-size: carbon--mini-units($btn-min-width);
+      min-inline-size: to-rem($btn-min-width * 8px);
     }
 
     .#{$c4d-prefix}--leadspace__desc {
@@ -251,7 +251,7 @@ $btn-min-width: 26;
     }
 
     &--mobile__image {
-      block-size: carbon--mini-units(20);
+      block-size: $spacing-13;
       inline-size: 100%;
 
       img {
@@ -285,7 +285,7 @@ $btn-min-width: 26;
   @include breakpoint(md) {
     .#{$c4d-prefix}--leadspace--centered {
       &__overlay {
-        padding-block-end: carbon--mini-units(20);
+        padding-block-end: $spacing-13;
       }
 
       &--content__container {
@@ -302,7 +302,7 @@ $btn-min-width: 26;
 
       &__title,
       &__desc {
-        max-inline-size: carbon--mini-units(80);
+        max-inline-size: to-rem(640px);
       }
 
       &__desc {
@@ -316,7 +316,7 @@ $btn-min-width: 26;
 
     .#{$c4d-prefix}--leadspace--centered__image
       .#{$c4d-prefix}--leadspace--centered__overlay {
-      padding-block-end: carbon--mini-units(32);
+      padding-block-end: to-rem(256px);
     }
   }