@carbon/ibmdotcom-styles 2.16.0-rc.0 → 2.16.0-rc.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-styles",
   "description": "Carbon for IBM.com Styles",
-  "version": "2.16.0-rc.0",
+  "version": "2.16.0-rc.2",
   "license": "Apache-2.0",
   "main": "dist/ibm-dotcom-styles.min.css",
   "module": "src/scss",
@@ -48,5 +48,5 @@
     "sass": "~1.79.0",
     "sass-loader": "^13.0.0"
   },
-  "gitHead": "850b531f80c907c8818579e78dbf318ba2769b64"
+  "gitHead": "5dc558ef59da8d102e6c4df024604832e9706a46"
 }

package/scss/components/callout-with-media/_callout-with-media.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.
@@ -96,6 +96,8 @@
   :host(#{$c4d-prefix}-callout-with-media-video)
     ::slotted(#{$c4d-prefix}-video-player) {
     @extend :host(#{$c4d-prefix}-callout-caption);
+
+    margin-block-end: 0;
   }
 
   :host(#{$c4d-prefix}-callout-with-media-image[color-scheme='inverse'])
@@ -159,7 +161,7 @@
   .#{$prefix}--callout-with-media
     .#{$prefix}--callout__content
     .#{$prefix}--content-block {
-    padding-block-end: $spacing-10;
+    padding-block-end: $spacing-07;
   }
 
   :host(#{$c4d-prefix}-callout-with-media-image),

package/scss/components/card/_card.scss

@@ -281,12 +281,6 @@
       flex-direction: column;
       gap: $spacing-05;
     }
-
-    ::slotted(div) {
-      /* stylelint-disable declaration-no-important */
-      // need the !important to prevent CSS reset styles from overwritting margin for tags
-      margin-inline-start: -$spacing-02 !important;
-    }
   }
 
   :host(#{$c4d-prefix}-card[aspect-ratio='1:1']) .#{$prefix}--card__wrapper {

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

@@ -77,11 +77,18 @@
         &::after {
           content: revert;
         }
+
+        &::after {
+          display: block;
+          aspect-ratio: 16 / 9;
+          content: '';
+          grid-area: 1 / 1 / -1 / -1;
+        }
       }
 
       .#{$prefix}--card__content {
         display: grid;
-        grid-row: span 10;
+        grid-area: 1 / 1 / -1 / -1;
         grid-template-rows: subgrid;
         row-gap: 0;
       }

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

@@ -86,6 +86,10 @@ $feature-flags: (
       flex: 1 0 50%;
     }
 
+    .#{$prefix}--card__image-wrapper {
+      aspect-ratio: 1 / 1;
+    }
+
     .#{$prefix}--card__wrapper {
       &::before,
       &::after {
@@ -125,6 +129,7 @@ $feature-flags: (
     ::slotted([slot='image']),
     #{$c4d-prefix}-image {
       z-index: 0;
+      block-size: 100%;
 
       // Opacity is adjusted on hover. See above.
       &::before {
@@ -246,10 +251,27 @@ $feature-flags: (
     }
   }
 
-  :host(#{$c4d-prefix}-feature-card-footer)[color-scheme='inverse']
-    .#{$c4d-prefix}-ce--card__footer
-    ::slotted(svg[slot='icon']) {
-    fill: $link-inverse;
+  :host(#{$c4d-prefix}-feature-card-footer)[color-scheme='inverse'] {
+    .#{$c4d-prefix}-ce--card__footer {
+      .#{$c4d-prefix}-ce--cta__icon,
+      ::slotted(svg[slot='icon']) {
+        fill: $link-inverse;
+      }
+
+      &:hover {
+        .#{$c4d-prefix}-ce--cta__icon,
+        ::slotted(svg[slot='icon']) {
+          fill: $link-inverse-hover;
+        }
+      }
+
+      &:active {
+        .#{$c4d-prefix}-ce--cta__icon,
+        ::slotted(svg[slot='icon']) {
+          fill: $link-inverse-active;
+        }
+      }
+    }
   }
 
   :host(#{$c4d-prefix}-feature-card[size='large']) {

package/scss/components/feature-section/_feature-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.
@@ -121,6 +121,7 @@
 
     ::slotted(#{$c4d-prefix}-image) {
       overflow: hidden;
+      block-size: 100%;
 
       @include breakpoint(sm) {
         block-size: aspect-ratio(1, 1);

package/scss/components/footer/_footer.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.
@@ -112,7 +112,7 @@
 
   :host(#{$c4d-prefix}-footer-nav-item),
   :host(#{$c4d-prefix}-legal-nav-item),
-  :host(#{$c4d-prefix}-legal-nav-cookie-preferences-placeholder) div {
+  :host(#{$c4d-prefix}-legal-nav-cookie-preferences-placeholder) {
     @include theme($g100, feature-flag-enabled('enable-css-custom-properties'));
 
     display: list-item;
@@ -142,6 +142,12 @@
     }
   }
 
+  :host(#{$c4d-prefix}-legal-nav-cookie-preferences-placeholder) {
+    .#{$prefix}--footer__link.#{$prefix}--link {
+      cursor: pointer;
+    }
+  }
+
   :host(#{$c4d-prefix}-legal-nav) {
     @include theme($g100, feature-flag-enabled('enable-css-custom-properties'));
 
@@ -220,7 +226,7 @@
         @include make-container;
       }
     }
-    .#{$prefix}--adjunct-links__container--hidden {
+    .#{$c4d-prefix}--adjunct-links__container--hidden {
       display: none;
     }
   }

package/scss/components/footer/_legal-nav.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.
@@ -198,7 +198,7 @@
   }
 
   :host(#{$c4d-prefix}-legal-nav-item),
-  :host(#{$c4d-prefix}-legal-nav-cookie-preferences-placeholder) div,
+  :host(#{$c4d-prefix}-legal-nav-cookie-preferences-placeholder),
   .#{$prefix}--legal-nav__list-item {
     padding: $spacing-03 0 0 0;
     margin-inline-end: $spacing-07;

package/scss/components/leadspace/_leadspace.scss

@@ -464,6 +464,7 @@ $btn-min-width: 26;
 
   :host(#{$c4d-prefix}-leadspace) ::slotted([slot='navigation']) {
     z-index: 1;
+    max-inline-size: 40rem;
     // need the !important to prevent CSS reset styles from overwritting margin for tags
     /* stylelint-disable declaration-no-important */
     padding-block-end: $spacing-05 !important;

package/scss/components/notice-choice/_notice-choice.scss

@@ -9,6 +9,9 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities/convert';
+@use '@carbon/type';
+
+@include type.reset();
 
 @mixin notice-choice {
   .#{$prefix}--nc {
@@ -17,6 +20,7 @@
     p,
     .#{$prefix}--checkbox-group {
       margin-block-end: $spacing-06;
+      @include type.type-style('legal-02');
     }
 
     a {

package/scss/components/tableofcontents/_table-of-contents.scss

@@ -112,7 +112,6 @@ $hover-transition-timing: 95ms;
     @extend .#{$prefix}--col-lg-12;
 
     box-sizing: border-box;
-    padding-block: $spacing-05 $spacing-09;
   }
 
   .#{$prefix}--tableofcontents {

package/scss/internal/content-block/_content-block.scss

@@ -86,6 +86,7 @@
     }
 
     ::slotted(#{$c4d-prefix}-content-group:not([slot])),
+    ::slotted(#{$c4d-prefix}-cta-block-item-row:not([slot])),
     ::slotted([data-autoid^='c4d--tabs-']:not([slot])),
     ::slotted([data-autoid^='c4d--card']:not([slot])) {
       margin-inline-start: 0;