@carbon/ibmdotcom-styles 2.49.0 → 2.50.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-styles",
   "description": "Carbon for IBM.com Styles",
-  "version": "2.49.0",
+  "version": "2.50.1",
   "license": "Apache-2.0",
   "main": "dist/ibm-dotcom-styles.min.css",
   "module": "src/scss",
@@ -31,13 +31,13 @@
   },
   "dependencies": {
     "@carbon/icons-react": "11.80.0",
-    "@carbon/layout": "11.49.0",
+    "@carbon/layout": "11.52.0",
     "@carbon/styles": "1.65.0",
     "@carbon/type": "11.56.0",
     "@ibm/telemetry-js": "^1.5.0"
   },
   "devDependencies": {
-    "@carbon/themes": "11.72.0",
+    "@carbon/themes": "11.73.0",
     "del": "^6.0.0",
     "gulp": "^4.0.2",
     "gulp-autoprefixer": "^6.1.0",
@@ -48,5 +48,5 @@
     "sass": "~1.99.0",
     "sass-loader": "^13.0.0"
   },
-  "gitHead": "ec99dc47af545a8ebac1c8f10da9d8cdc15cff9b"
+  "gitHead": "90004ae02a5848126f877e64512cb6d6464fba18"
 }

package/scss/components/lightbox-media-viewer/_lightbox-media-viewer.scss

@@ -222,7 +222,7 @@
     }
   }
 
-  ::slotted(#{$c4d-prefix}-video-player-container) {
+  ::slotted(#{$c4d-prefix}-video-player-container-v7) {
     inline-size: 100%;
   }
 }

package/scss/components/pricing-table/_pricing-table.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2022, 2025
+// Copyright IBM Corp. 2022, 2026
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -12,6 +12,7 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/colors' as *;
 @use '../../globals/vars' as *;
 @use '../../globals/imports' as *;
 @use '../button-group' as *;
@@ -130,6 +131,21 @@
     }
   }
 
+  :host(#{$c4d-prefix}-pricing-table-group) tr {
+    border: none;
+    border-radius: 4px;
+    background-color: $purple-20;
+
+    @include breakpoint-down(lg) {
+      box-shadow: 50vw 0 $purple-20;
+    }
+
+    &::after {
+      background-color: $purple-20;
+      block-size: 0;
+    }
+  }
+
   .#{$prefix}--pricing-table-header-row,
   .#{$prefix}--pricing-table-row,
   :host(#{$c4d-prefix}-pricing-table-header-row),
@@ -159,7 +175,7 @@
     background-color: $background;
 
     &.highlighted {
-      background-color: $layer-01;
+      background-color: $purple-10;
     }
 
     .#{$prefix}--pricing-table-cell-inner {
@@ -261,7 +277,7 @@
 
   :host(#{$c4d-prefix}-pricing-table-cell[icon]) {
     &[icon='checkmark'] svg {
-      color: $support-success;
+      color: $purple-60;
     }
 
     svg {
@@ -278,7 +294,8 @@
 
     display: none;
     padding: $spacing-03 $spacing-05;
-    background-color: $border-inverse;
+    border-radius: 4px 4px 0 0;
+    background-color: $purple-60;
     color: $icon-inverse;
     inset-block-end: 100%;
     inset-inline: 0;
@@ -287,7 +304,9 @@
   .#{$prefix}--pricing-table-header-cell-headline,
   :host(#{$c4d-prefix}-pricing-table-header-cell-headline) {
     display: block;
-    // @include type-style('fluid-heading-03');
+
+    @include type-style('heading-03');
+
     color: $text-primary;
   }
 
@@ -369,4 +388,10 @@
   :host(.overflowing-left) .overflow-indicator.left {
     opacity: 1;
   }
+
+  :host([last-row]) {
+    ::slotted(.highlighted) {
+      border-radius: 0 0 10px 10px;
+    }
+  }
 }

package/scss/components/video-player/_video-player.scss

@@ -22,11 +22,11 @@ $aspect-ratios: ((16, 9), (9, 16), (2, 1), (1, 2), (4, 3), (3, 4), (1, 1));
 @mixin video-player {
   // Make the video player container a block for purposes of the intersection
   // observer.
-  :host(#{$c4d-prefix}-video-player-container) {
+  :host(#{$c4d-prefix}-video-player-container-v7) {
     display: block;
   }
 
-  :host(#{$c4d-prefix}-video-player),
+  :host(#{$c4d-prefix}-video-player-v7),
   .#{$c4d-prefix}--video-player {
     color: var(--#{$c4d-prefix}--video-caption--color, $text-secondary);
 
@@ -40,7 +40,7 @@ $aspect-ratios: ((16, 9), (9, 16), (2, 1), (1, 2), (4, 3), (3, 4), (1, 1));
     }
   }
 
-  :host(#{$c4d-prefix}-video-player[background-mode]),
+  :host(#{$c4d-prefix}-video-player-v7[background-mode]),
   .#{$c4d-prefix}--video-player[background-mode] {
     .#{$c4d-prefix}--video-player__video-container {
       block-size: 100%;
@@ -55,6 +55,7 @@ $aspect-ratios: ((16, 9), (9, 16), (2, 1), (1, 2), (4, 3), (3, 4), (1, 1));
     ::slotted(.#{$c4d-prefix}--video-player__video),
     .#{$c4d-prefix}--video-player__video {
       aspect-ratio: var(--native-file-aspect-ratio, 16 / 9);
+      block-size: 100%;
       inset: 50% 0 0 50%;
       min-block-size: 100%;
       min-inline-size: 100%;
@@ -84,7 +85,7 @@ $aspect-ratios: ((16, 9), (9, 16), (2, 1), (1, 2), (4, 3), (3, 4), (1, 1));
     outline: $spacing-01 solid $focus;
   }
 
-  :host(#{$c4d-prefix}-video-player) #{$c4d-prefix}-image,
+  :host(#{$c4d-prefix}-video-player-v7) #{$c4d-prefix}-image,
   .#{$c4d-prefix}--video-player .#{$c4d-prefix}--image {
     position: relative;
     block-size: 100%;
@@ -208,7 +209,7 @@ $aspect-ratios: ((16, 9), (9, 16), (2, 1), (1, 2), (4, 3), (3, 4), (1, 1));
     }
   }
 
-  :host(#{$c4d-prefix}-video-player)
+  :host(#{$c4d-prefix}-video-player-v7)
     .#{$c4d-prefix}--video-player__image-overlay,
   .#{$c4d-prefix}--video-player .#{$c4d-prefix}--video-player__image-overlay {
     &:active {
@@ -263,7 +264,7 @@ $aspect-ratios: ((16, 9), (9, 16), (2, 1), (1, 2), (4, 3), (3, 4), (1, 1));
 
   // Prevent any pointer events from getting through to the slotted player div
   // when in intersection mode.
-  :host(#{$c4d-prefix}-video-player[intersection-mode]) {
+  :host(#{$c4d-prefix}-video-player-v7[intersection-mode]) {
     ::slotted(.#{$c4d-prefix}--video-player__video) {
       pointer-events: none;
     }