@carbon/styles 0.8.0-rc.0 → 0.10.0-rc.0

package/scss/components/number-input/_number-input.scss

@@ -9,7 +9,7 @@
 @use '../../config' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
-@use '../../compat/theme' as *;
+@use '../../theme' as *;
 @use '../../type' as *;
 @use '../../utilities/skeleton' as *;
 @use '../../utilities/button-reset';
@@ -280,7 +280,7 @@
     .#{$prefix}--number__invalid
     + .#{$prefix}--number__controls
     .#{$prefix}--number__rule-divider:first-of-type {
-    background-color: $decorative-01;
+    background-color: $border-subtle-02;
   }
 
   .#{$prefix}--number
@@ -385,7 +385,7 @@
   .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover,
   .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover::before,
   .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover::after {
-    background-color: $hover-light-ui;
+    background-color: $layer-hover-02;
   }
 
   .#{$prefix}--number--light .#{$prefix}--number__control-btn:focus::before,

package/scss/components/overflow-menu/_overflow-menu.scss

@@ -8,7 +8,7 @@
 @use '../../config' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
-@use '../../compat/theme' as *;
+@use '../../theme' as *;
 @use '../../type' as *;
 @use '../button/tokens' as button;
 @use '../../utilities/box-shadow' as *;
@@ -16,6 +16,7 @@
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/convert' as *;
+@use '../../utilities/z-index' as *;
 
 /// Overflow menu styles
 /// @access public
@@ -230,7 +231,7 @@
   }
 
   .#{$prefix}--overflow-menu--light .#{$prefix}--overflow-menu--divider {
-    border-top: 1px solid $decorative-01;
+    border-top: 1px solid $border-subtle-02;
   }
 
   a.#{$prefix}--overflow-menu-options__btn::before {
@@ -252,7 +253,7 @@
     padding: 0 $spacing-05;
     border: none;
     background-color: transparent;
-    color: $text-02;
+    color: $text-secondary;
     cursor: pointer;
     font-family: inherit;
     font-weight: 400;
@@ -262,7 +263,7 @@
       color $duration-fast-02 motion(entrance, productive);
 
     &:hover {
-      color: $text-01;
+      color: $text-primary;
     }
 
     &:focus {

package/scss/components/popover/_popover.scss

@@ -5,319 +5,361 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '../../theme' as *;
 @use '../../config' as *;
-@use '../../compat/theme' as *;
+@use '../../theme';
 @use '../../utilities/box-shadow' as *;
+@use '../../utilities/custom-property';
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/' as *;
 @use '../../utilities/convert' as *;
 
-/// Popover component
-/// @access private
-/// @group components
+/// The Popover component is used for triggering a pop-up next to a trigger
+/// element, typically a button, in a given direction. It is made up of several
+/// parts and includes a handful of modifiers to change the appearance.
+///
+/// The parts of a popover include:
+///   The popover container `.cds-popover-container`
+///   This container contains the trigger and the popover and is used to
+///   coordinate positioning relative to the trigger button
+///
+///   The popover
+///   This is an intermediate container that is used for the
+///   `filter: drop-shadow()` effect on the popover content and the caret. It is
+///   an absolutely positioned container that matches the dimensions of the
+///   container so that popover content and caret can be positioned absolutely.
+///
+///   Popover content
+///   This is the containing element for user-provided content and sets the
+///   background and text color for the area.
+///
+///   Popover caret
+///   This caret is an optional modifier that displays a character centered with
+///   respect to the trigger element
+
+// The background color for the popover container
+$popover-background-color: custom-property.get-var(
+  'popover-background-color',
+  theme.$layer
+);
+
+// The drop shadow value used for the popover container
+$popover-drop-shadow: custom-property.get-var('popover-drop-shadow', 'none');
+
+// The border radius value for the popover container
+$popover-border-radius: custom-property.get-var('popover-border-radius', 2px);
+
+// The text color used for text placed inside of the popover
+$popover-text-color: custom-property.get-var(
+  'popover-text-color',
+  theme.$text-primary
+);
+
+// The distance between the popover container and the triggering element
+// Specify the distance between the popover and the trigger. This value must
+// have a unit otherwise the `calc()` expression will not work
+// stylelint-disable-next-line length-zero-no-unit
+$popover-offset: custom-property.get-var('popover-offset', 0rem);
+
+// Customize the dimensions of the caret by specifying its width or height.
+// These values will be flipped in left or right directions to have the
+// correct dimensions
+$popover-caret-width: custom-property.get-var('popover-caret-width', rem(12px));
+$popover-caret-height: custom-property.get-var(
+  'popover-caret-height',
+  rem(6px)
+);
+
 @mixin popover {
-  $popover-text-color: $text-01;
-  $popover-caret-offset: 1rem;
-  $popover-offset: 8px;
+  // Container
+  .#{$prefix}--popover-container {
+    position: relative;
+    display: inline-block;
+  }
 
-  .#{$prefix}--popover {
-    // Specify the distance between the popover and the trigger. This value must
-    // have a unit otherwise the `calc()` expression will not work
-    // stylelint-disable-next-line length-zero-no-unit
-    --cds-popover-offset: 0rem;
+  /// Modifiers
 
-    // Specify the distance that the caret should be offset from the side of the
-    // popover when not centered
-    --cds-popover-caret-offset: 1rem;
+  // Light modifier
+  .#{$prefix}--popover--light .#{$prefix}--popover-content {
+    @include custom-property.declaration(
+      'popover-background-color',
+      theme.$layer-02
+    );
+  }
 
-    position: absolute;
-    z-index: z('floating');
-    display: none;
+  // High contrast modifier
+  .#{$prefix}--popover--high-contrast .#{$prefix}--popover {
+    @include custom-property.declaration(
+      'popover-background-color',
+      theme.$background-inverse
+    );
+    @include custom-property.declaration(
+      'popover-text-color',
+      theme.$text-inverse
+    );
   }
 
-  // We use a pseudo element inside of the popover to create a space between the
-  // target and the popover. This helps in situations like tooltips where you do
-  // not want the tooltip to disappear when the user moves from the target to
-  // the popover.
-  .#{$prefix}--popover::before {
-    position: absolute;
-    display: block;
-    content: '';
+  // Drop shadow modifier
+  .#{$prefix}--popover--drop-shadow .#{$prefix}--popover {
+    @include custom-property.declaration(
+      'popover-drop-shadow',
+      drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2))
+    );
   }
 
-  .#{$prefix}--popover--open {
-    display: block;
+  // Caret tip modifier
+  .#{$prefix}--popover--caret {
+    @include custom-property.declaration('popover-offset', rem(10px));
   }
 
-  .#{$prefix}--popover-contents {
-    @include box-shadow;
+  // Popover, this element contains both the caret and the popover content
+  .#{$prefix}--popover {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    filter: $popover-drop-shadow;
+    pointer-events: none;
+  }
 
-    position: relative;
+  // Popover content
+  .#{$prefix}--popover-content {
+    position: absolute;
+    z-index: z('floating');
+    display: none;
     width: max-content;
     max-width: rem(368px);
-    background-color: $ui-01;
-    border-radius: 2px;
+    background-color: $popover-background-color;
+    border-radius: $popover-border-radius;
     color: $popover-text-color;
+    pointer-events: auto;
   }
 
-  .#{$prefix}--popover--light .#{$prefix}--popover-contents {
-    background-color: $background;
+  .#{$prefix}--popover--open .#{$prefix}--popover-content {
+    display: block;
   }
 
-  .#{$prefix}--popover--high-contrast .#{$prefix}--popover-contents {
-    background-color: $background-inverse;
-    color: $icon-inverse;
+  // We use a pseudo element inside of the popover to create a space between the
+  // target and the popover. This helps in situations like toolcarets where you do
+  // not want the toolcaret to disappear when the user moves from the target to
+  // the popover.
+  .#{$prefix}--popover-content::before {
+    position: absolute;
+    display: none;
+    content: '';
   }
 
-  .#{$prefix}--popover--caret {
-    --cds-popover-offset: 0.5rem;
+  .#{$prefix}--popover--open .#{$prefix}--popover-content::before {
+    display: block;
   }
 
-  .#{$prefix}--popover--caret .#{$prefix}--popover-contents::before,
-  .#{$prefix}--popover--caret .#{$prefix}--popover-contents::after {
+  // Popover caret
+  .#{$prefix}--popover-caret {
     position: absolute;
-    display: inline-block;
-    width: rem(8px);
-    height: rem(8px);
-    background-color: inherit;
-    content: '';
+    z-index: z('floating');
+    display: none;
+    background-color: $popover-background-color;
+    // We use `will-change: transform` to prevent antialiasing when our caret
+    // has subpixel rendering. When this happens, a single pixel line appears
+    // between the caret and popover-content that we would like to avoid
+    will-change: transform;
   }
 
-  .#{$prefix}--popover--caret .#{$prefix}--popover-contents::before {
-    z-index: -1;
-    box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.2);
+  .#{$prefix}--popover--open.#{$prefix}--popover--caret
+    .#{$prefix}--popover-caret {
+    display: block;
   }
 
-  // The popover's tooltip is created by drawing two 8px x 8px boxes, one for
-  // rendering the box-shadow that the popover content uses and another for
-  // layering on top of this box to create an effect of a popover caret with a
-  // box-shadow. The layer with the box-shadow is rendered behind the popover
-  // content, while the other is rendered above of the popover content.
-
   //-----------------------------------------------------------------------------
   // Bottom
   //-----------------------------------------------------------------------------
-  .#{$prefix}--popover--bottom {
-    bottom: 0;
-    left: 50%;
-    transform: translate(-50%, calc(100% + var(--cds-popover-offset)));
-  }
 
-  @include place-caret(bottom) {
-    top: 0;
+  // Popover content placement
+  .#{$prefix}--popover--bottom .#{$prefix}--popover-content {
+    bottom: 0;
     left: 50%;
-    transform: translate(-50%, -50%) rotate(45deg);
+    transform: translate(-50%, calc(100% + $popover-offset));
   }
 
-  // Bottom left
-  .#{$prefix}--popover--bottom-left {
+  .#{$prefix}--popover--bottom-left .#{$prefix}--popover-content {
     bottom: 0;
     left: 0;
-    transform: translateY(calc(100% + var(--cds-popover-offset)));
+    transform: translate(0, calc(100% + $popover-offset));
   }
 
-  @include place-caret(bottom-left) {
-    top: 0;
-    left: 0;
-    transform: translate(var(--cds-popover-caret-offset), -50%) rotate(45deg);
-  }
-
-  // Bottom right
-  .#{$prefix}--popover--bottom-right {
+  .#{$prefix}--popover--bottom-right .#{$prefix}--popover-content {
     right: 0;
     bottom: 0;
-    transform: translateY(calc(100% + var(--cds-popover-offset)));
-  }
-
-  @include place-caret(bottom-right) {
-    top: 0;
-    right: 0;
-    transform: translate(calc(-1 * var(--cds-popover-caret-offset)), -50%)
-      rotate(45deg);
+    transform: translate(0, calc(100% + $popover-offset));
   }
 
-  // Hover area
-  .#{$prefix}--popover--bottom.#{$prefix}--popover::before,
-  .#{$prefix}--popover--bottom-left.#{$prefix}--popover::before,
-  .#{$prefix}--popover--bottom-right.#{$prefix}--popover::before {
+  // Popover hover area placement
+  .#{$prefix}--popover--bottom .#{$prefix}--popover-content::before,
+  .#{$prefix}--popover--bottom-left .#{$prefix}--popover-content::before,
+  .#{$prefix}--popover--bottom-right .#{$prefix}--popover-content::before {
     top: 0;
     right: 0;
     left: 0;
-    height: var(--cds-popover-offset);
+    height: $popover-offset;
     transform: translateY(-100%);
   }
 
-  //-----------------------------------------------------------------------------
-  // TOP
-  //-----------------------------------------------------------------------------
-  .#{$prefix}--popover--top {
-    bottom: 100%;
-    left: 50%;
-    transform: translate(-50%, calc(-1 * var(--cds-popover-offset)));
-  }
-
-  @include place-caret(top) {
+  // Caret placement
+  .#{$prefix}--popover--bottom .#{$prefix}--popover-caret,
+  .#{$prefix}--popover--bottom-left .#{$prefix}--popover-caret,
+  .#{$prefix}--popover--bottom-right .#{$prefix}--popover-caret {
     bottom: 0;
     left: 50%;
-    transform: translate(-50%, 50%) rotate(45deg);
+    width: $popover-caret-width;
+    height: $popover-caret-height;
+    clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
+    transform: translate(-50%, $popover-offset);
   }
 
-  // Top left
-  .#{$prefix}--popover--top-left {
-    bottom: 100%;
-    left: 0;
-    transform: translateY(calc(-1 * var(--cds-popover-offset)));
-  }
+  //-----------------------------------------------------------------------------
+  // Top
+  //-----------------------------------------------------------------------------
 
-  @include place-caret(top-left) {
-    bottom: 0;
-    left: 0;
-    transform: translate(var(--cds-popover-caret-offset), 50%) rotate(45deg);
+  // Popover content placement
+  .#{$prefix}--popover--top .#{$prefix}--popover-content {
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, calc(-100% - $popover-offset));
   }
 
-  // Top right
-  .#{$prefix}--popover--top-right {
-    right: 0;
-    bottom: 100%;
-    transform: translateY(calc(-1 * var(--cds-popover-offset)));
+  .#{$prefix}--popover--top-left .#{$prefix}--popover-content {
+    top: 0;
+    left: 0;
+    transform: translate(0, calc(-100% - $popover-offset));
   }
 
-  @include place-caret(top-right) {
+  .#{$prefix}--popover--top-right .#{$prefix}--popover-content {
+    top: 0;
     right: 0;
-    bottom: 0;
-    transform: translate(calc(-1 * var(--cds-popover-caret-offset)), 50%)
-      rotate(45deg);
+    transform: translate(0, calc(-100% - $popover-offset));
   }
 
-  // Hover area
-  .#{$prefix}--popover--top.#{$prefix}--popover::before,
-  .#{$prefix}--popover--top-left.#{$prefix}--popover::before,
-  .#{$prefix}--popover--top-right.#{$prefix}--popover::before {
+  // Popover hover area placement
+  .#{$prefix}--popover--top .#{$prefix}--popover-content::before,
+  .#{$prefix}--popover--top-left .#{$prefix}--popover-content::before,
+  .#{$prefix}--popover--top-right .#{$prefix}--popover-content::before {
     right: 0;
     bottom: 0;
     left: 0;
-    height: var(--cds-popover-offset);
+    height: $popover-offset;
     transform: translateY(100%);
   }
 
+  // Caret placement
+  .#{$prefix}--popover--top .#{$prefix}--popover-caret,
+  .#{$prefix}--popover--top-left .#{$prefix}--popover-caret,
+  .#{$prefix}--popover--top-right .#{$prefix}--popover-caret {
+    top: 0;
+    left: 50%;
+    width: $popover-caret-width;
+    height: $popover-caret-height;
+    clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
+    transform: translate(-50%, calc(-1 * $popover-offset));
+  }
+
   //-----------------------------------------------------------------------------
   // Right
   //-----------------------------------------------------------------------------
-  .#{$prefix}--popover--right {
-    top: 50%;
-    left: 100%;
-    transform: translate(var(--cds-popover-offset), -50%);
-  }
 
-  @include place-caret(right) {
+  // Popover content placement
+  .#{$prefix}--popover--right .#{$prefix}--popover-content {
     top: 50%;
-    left: 0;
-    transform: translate(-50%, -50%) rotate(45deg);
-  }
-
-  // Right top
-  .#{$prefix}--popover--right-top {
-    top: 0;
     left: 100%;
-    transform: translateX($popover-offset);
+    // Add in 0.1px to prevent rounding errors where the content is
+    // moved farther than the caret
+    transform: translate($popover-offset, -50%);
   }
 
-  @include place-caret(right-top) {
+  .#{$prefix}--popover--right-top .#{$prefix}--popover-content {
     top: 0;
-    left: 0;
-    transform: translate(-50%, var(--cds-popover-caret-offset)) rotate(45deg);
-  }
-
-  // Right bottom
-  .#{$prefix}--popover--right-bottom {
-    bottom: 0;
     left: 100%;
-    transform: translateX(var(--cds-popover-offset));
+    transform: translate($popover-offset, 0);
   }
 
-  @include place-caret(right-bottom) {
+  .#{$prefix}--popover--right-bottom .#{$prefix}--popover-content {
     bottom: 0;
-    left: 0;
-    transform: translate(-50%, calc(-1 * var(--cds-popover-caret-offset)))
-      rotate(45deg);
+    left: 100%;
+    transform: translate($popover-offset, 0);
   }
 
-  // Hover area
-  .#{$prefix}--popover--right.#{$prefix}--popover::before,
-  .#{$prefix}--popover--right-top.#{$prefix}--popover::before,
-  .#{$prefix}--popover--right-bottom.#{$prefix}--popover::before {
+  // Popover hover area placement
+  .#{$prefix}--popover--right .#{$prefix}--popover-content::before,
+  .#{$prefix}--popover--right-top .#{$prefix}--popover-content::before,
+  .#{$prefix}--popover--right-bottom .#{$prefix}--popover-content::before {
     top: 0;
     bottom: 0;
     left: 0;
-    width: var(--cds-popover-offset);
+    width: $popover-offset;
     transform: translateX(-100%);
   }
 
+  // Caret placement
+  .#{$prefix}--popover--right .#{$prefix}--popover-caret,
+  .#{$prefix}--popover--right-top .#{$prefix}--popover-caret,
+  .#{$prefix}--popover--right-bottom .#{$prefix}--popover-caret {
+    top: 50%;
+    left: 100%;
+    width: $popover-caret-height;
+    height: $popover-caret-width;
+    clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
+    transform: translate(calc($popover-offset - 100%), -50%);
+  }
+
   //-----------------------------------------------------------------------------
   // Left
   //-----------------------------------------------------------------------------
-  .#{$prefix}--popover--left {
-    top: 50%;
-    right: 100%;
-    transform: translate(calc(-1 * var(--cds-popover-offset)), -50%);
-  }
 
-  @include place-caret(left) {
+  // Popover content placement
+  .#{$prefix}--popover--left .#{$prefix}--popover-content {
     top: 50%;
-    right: 0;
-    transform: translate(50%, -50%) rotate(45deg);
-  }
-
-  // Left top
-  .#{$prefix}--popover--left-top {
-    top: 0;
     right: 100%;
-    transform: translateX(calc(-1 * var(--cds-popover-offset)));
+    // Add in 0.1px to prevent rounding errors where the content is
+    // moved farther than the caret
+    transform: translate(calc(-1 * $popover-offset + 0.1px), -50%);
   }
 
-  @include place-caret(left-top) {
+  .#{$prefix}--popover--left-top .#{$prefix}--popover-content {
     top: 0;
-    right: 0;
-    transform: translate(50%, var(--cds-popover-caret-offset)) rotate(45deg);
-  }
-
-  // Left bottom
-  .#{$prefix}--popover--left-bottom {
     right: 100%;
-    bottom: 0;
-    transform: translateX(calc(-1 * var(--cds-popover-offset)));
+    // Add in 0.1px to prevent rounding errors where the content is
+    // moved farther than the caret
+    transform: translate(calc(-1 * $popover-offset + 0.1px), 0);
   }
 
-  @include place-caret(left-bottom) {
-    right: 0;
+  .#{$prefix}--popover--left-bottom .#{$prefix}--popover-content {
+    right: 100%;
     bottom: 0;
-    transform: translate(50%, calc(-1 * var(--cds-popover-caret-offset)))
-      rotate(45deg);
+    // Add in 0.1px to prevent rounding errors where the content is
+    // moved farther than the caret
+    transform: translate(calc(-1 * $popover-offset + 0.1px), 0);
   }
 
-  // Hover area
-  .#{$prefix}--popover--left.#{$prefix}--popover::before,
-  .#{$prefix}--popover--left-top.#{$prefix}--popover::before,
-  .#{$prefix}--popover--left-bottom.#{$prefix}--popover::before {
+  // Popover hover area placement
+  .#{$prefix}--popover--left .#{$prefix}--popover-content::before,
+  .#{$prefix}--popover--left-top .#{$prefix}--popover-content::before,
+  .#{$prefix}--popover--left-bottom .#{$prefix}--popover-content::before {
     top: 0;
     right: 0;
     bottom: 0;
-    width: var(--cds-popover-offset);
+    width: $popover-offset;
     transform: translateX(100%);
   }
-}
 
-/// Helper for placing the caret inside a popover. The selectors here can get
-/// distracting in the main stylesheet, but ultimately they target the ::before
-/// and ::after pseudo-elements for the given direction. The @content block
-/// passed in should appropriately position the caret for the given direction.
-@mixin place-caret($direction) {
-  .#{$prefix}--popover--caret.#{$prefix}--popover--#{$direction}
-    .#{$prefix}--popover-contents::before,
-  .#{$prefix}--popover--caret.#{$prefix}--popover--#{$direction}
-    .#{$prefix}--popover-contents::after {
-    @content;
+  // Caret placement
+  .#{$prefix}--popover--left .#{$prefix}--popover-caret,
+  .#{$prefix}--popover--left-top .#{$prefix}--popover-caret,
+  .#{$prefix}--popover--left-bottom .#{$prefix}--popover-caret {
+    top: 50%;
+    right: 100%;
+    width: $popover-caret-height;
+    height: $popover-caret-width;
+    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
+    transform: translate(calc(-1 * $popover-offset + 100%), -50%);
   }
 }