@carbon/ibmdotcom-styles 2.16.2 → 2.17.0-rc.0

package/scss/components/pictogram-item/_pictogram-item.scss

@@ -11,6 +11,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../globals/vars' as *;
+@use '../../globals/imports' as *;
 @use '../../internal/content-item/content-item';
 @use '../link-with-icon';
 

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

@@ -13,6 +13,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '../../globals/vars' as *;
+@use '../../globals/imports' as *;
 @use '../button-group' as *;
 @use '../structured-list' as *;
 

package/scss/components/quote/_quote.scss

@@ -12,6 +12,7 @@
 @use '@carbon/styles/scss/type' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../globals/vars' as *;
+@use '../../globals/imports' as *;
 @use '../../globals/utils/hang' as *;
 @use '../../components/horizontal-rule';
 @use '../../components/link-with-icon' as *;

package/scss/components/scroll-into-view/_scroll-into-view.scss

@@ -9,6 +9,7 @@
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '../../globals/vars' as *;
+@use '../../globals/imports' as *;
 
 @mixin scroll-into-view {
   :root {

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

@@ -17,6 +17,7 @@
 @use '@carbon/styles/scss/components/dropdown';
 @use '@carbon/styles/scss/components/select';
 @use '../../globals/vars' as *;
+@use '../../globals/imports' as *;
 @use '../masthead/vars' as *;
 
 @mixin react-autosuggest-suggestion {

package/scss/components/structured-list/_structured-list.scss

@@ -12,6 +12,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../globals/vars' as *;
+@use '../../globals/imports' as *;
 
 // Overridden column spanning
 @mixin structured-list-colspan($colNumber) {

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

@@ -17,6 +17,7 @@
 @use '../../globals/utils/flex-grid' as *;
 @use '../../globals/carbon-grid' as *;
 @use '../../globals/vars' as *;
+@use '../../globals/imports' as *;
 @use '../../globals/utils/hang' as *;
 @use '../layout/layout';
 

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

@@ -16,6 +16,7 @@
 @use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/components/button' as *;
 @use '../../globals/vars' as *;
+@use '../../globals/imports' as *;
 @use '@carbon/styles/scss/components/tabs/vars' as *;
 @use '@carbon/web-components/scss/components/tabs/tabs';
 

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

@@ -12,6 +12,7 @@
 @use '@carbon/styles/scss/components/tabs';
 @use '../link-list';
 @use '../../globals/vars' as *;
+@use '../../globals/imports' as *;
 
 @mixin tabs-extended-media {
   :host(#{$c4d-prefix}-tabs-extended-media) {

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

@@ -8,6 +8,7 @@
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '../../globals/vars' as *;
+@use '../../globals/imports' as *;
 
 @mixin tag-group {
   :host(#{$c4d-prefix}-tag-group) {

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

@@ -11,6 +11,7 @@
 @use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/vars' as *;
+@use '../../globals/imports' as *;
 
 @mixin tag-link {
   :host(#{$c4d-prefix}-tag-link) a {

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

@@ -1,11 +1,12 @@
 /**
- * Copyright IBM Corp. 2016, 2024
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 @use '../../globals/vars' as *;
+@use '../../globals/imports' as *;
 @use '../../globals/utils/ratio-base' as *;
 @use '@carbon/styles/scss/colors' as *;
 @use '@carbon/styles/scss/config' as *;
@@ -13,9 +14,18 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
+@use '@carbon/styles/scss/components/button/vars' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
 $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) {
+    display: block;
+  }
+
   :host(#{$c4d-prefix}-video-player),
   .#{$c4d-prefix}--video-player {
     color: var(--#{$c4d-prefix}--video-caption--color, $text-secondary);
@@ -25,19 +35,6 @@ $aspect-ratios: ((16, 9), (9, 16), (2, 1), (1, 2), (4, 3), (3, 4), (1, 1));
       inline-size: 100%;
     }
 
-    &:focus {
-      outline: none;
-      .#{$c4d-prefix}--video-player__video-container {
-        &::before {
-          position: absolute;
-          z-index: 1;
-          border: 1px solid $focus-inverse;
-          content: ' ';
-          inset: $spacing-01;
-          outline: $spacing-01 solid $focus;
-        }
-      }
-    }
     #{$c4d-prefix}-image {
       padding-block-start: 0;
     }
@@ -64,6 +61,18 @@ $aspect-ratios: ((16, 9), (9, 16), (2, 1), (1, 2), (4, 3), (3, 4), (1, 1));
       min-inline-size: 100%;
       translate: -50% -50%;
     }
+
+    /**
+     * overwriting inset property so the video player is centered in the container when in RTL mode
+     */
+    ::slotted(.#{$c4d-prefix}--video-player__video[dir-mode='rtl']),
+    .#{$c4d-prefix}--video-player__video[dir-mode='rtl'] {
+      inset: 50% -50% 0 50%;
+
+      @include breakpoint-down('lg') {
+        inset: 50% -67% 0 50%;
+      }
+    }
   }
 
   .#{$c4d-prefix}--video-player
@@ -128,6 +137,8 @@ $aspect-ratios: ((16, 9), (9, 16), (2, 1), (1, 2), (4, 3), (3, 4), (1, 1));
       &.#{$c4d-prefix}--video-player__aspect-ratio {
         &--#{$width}x#{$height} {
           @include ratio-base($width, $height, true);
+
+          overflow: visible;
         }
       }
     }
@@ -201,4 +212,54 @@ $aspect-ratios: ((16, 9), (9, 16), (2, 1), (1, 2), (4, 3), (3, 4), (1, 1));
       }
     }
   }
+
+  .#{$c4d-prefix}--video-player__toggle-playback {
+    position: absolute;
+    z-index: 100;
+    padding: 0.875rem;
+    border: 0;
+    background-color: $overlay;
+    block-size: $spacing-09;
+    color: #ffffff;
+    inline-size: $spacing-09;
+
+    &--top-left {
+      inset-block-start: 0;
+      inset-inline-start: 0;
+    }
+
+    &--top-right {
+      inset-block-start: 0;
+      inset-inline-end: 0;
+    }
+
+    &--bottom-right {
+      inset-block-end: 0;
+      inset-inline-end: 0;
+    }
+
+    &--bottom-left {
+      inset-block-end: 0;
+      inset-inline-start: 0;
+    }
+
+    /* stylelint-disable-next-line caem/require-color-with-bg */
+    &:hover {
+      // Grey 100, more opaque.
+      background-color: rgba(22, 22, 22, 0.9);
+      cursor: pointer;
+    }
+
+    &:focus {
+      outline: 2px solid $focus;
+    }
+  }
+
+  // Prevent any pointer events from getting through to the slotted player div
+  // when in intersection mode.
+  :host(#{$c4d-prefix}-video-player[intersection-mode]) {
+    ::slotted(.#{$c4d-prefix}--video-player__video) {
+      pointer-events: none;
+    }
+  }
 }