@carbon/styles 1.23.0 → 1.24.0-rc.0

package/scss/components/menu/_menu.scss

@@ -10,15 +10,18 @@
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
-@use '../button/tokens' as button;
+@use '../button/tokens' as button-tokens;
 @use '../../utilities/box-shadow' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/z-index' as *;
+@use '../../utilities/convert' as *;
 
 /// Menu styles
 /// @access public
 /// @group menu
 @mixin menu {
+  // Menu
+
   .#{$prefix}--menu {
     @include box-shadow;
 
@@ -28,6 +31,7 @@
     max-width: 18rem;
     padding: $spacing-02 0;
     background-color: $layer;
+    opacity: 0;
     visibility: hidden;
   }
 
@@ -39,19 +43,27 @@
     }
   }
 
-  .#{$prefix}--menu--invisible {
-    opacity: 0;
-    pointer-events: none;
+  .#{$prefix}--menu:not(.#{$prefix}--menu--open) .#{$prefix}--menu--open {
+    visibility: hidden;
+  }
+
+  .#{$prefix}--menu--shown {
+    opacity: 1;
   }
 
-  .#{$prefix}--menu-option {
-    position: relative;
-    display: list-item;
-    // $size-sm
+  // MenuItem
+
+  .#{$prefix}--menu-item {
+    @include type-style('body-short-01');
+
+    display: grid;
     height: 2rem;
-    background-color: $layer;
+    align-items: center;
     color: $text-primary;
+    column-gap: $spacing-03;
     cursor: pointer;
+    grid-template-columns: 0 1fr max-content;
+    padding-inline: $spacing-05;
     transition: background-color $duration-fast-01 motion(standard, productive);
 
     &:focus {
@@ -59,88 +71,69 @@
     }
   }
 
-  .#{$prefix}--menu-option--active,
-  .#{$prefix}--menu-option:hover {
+  .#{$prefix}--menu-item:hover {
     background-color: $layer-hover;
   }
 
-  .#{$prefix}--menu-option--danger:hover,
-  .#{$prefix}--menu-option--danger:focus {
-    background-color: button.$button-danger-primary;
-    color: $text-on-color;
-  }
+  $supported-sizes: (
+    'xs': 1.5rem,
+    'sm': 2rem,
+    'md': 2.5rem,
+    'lg': 3rem,
+  );
 
-  .#{$prefix}--menu-option > .#{$prefix}--menu {
-    margin-top: calc(#{$spacing-02} * -1);
+  @each $size, $value in $supported-sizes {
+    .#{$prefix}--menu--#{$size} .#{$prefix}--menu-item {
+      height: $value;
+    }
   }
 
-  .#{$prefix}--menu-option__content {
+  .#{$prefix}--menu-item__icon {
     display: flex;
-    height: 100%;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 $spacing-05;
   }
 
-  .#{$prefix}--menu-option__content--disabled {
-    background-color: $layer;
-    color: $text-disabled;
-    cursor: not-allowed;
+  .#{$prefix}--menu-item__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
-  .#{$prefix}--menu-option__content--disabled .#{$prefix}--menu-option__label,
-  .#{$prefix}--menu-option__content--disabled .#{$prefix}--menu-option__info,
-  .#{$prefix}--menu-option__content--disabled .#{$prefix}--menu-option__icon {
-    color: $text-disabled;
+  .#{$prefix}--menu--with-icons > .#{$prefix}--menu-item,
+  .#{$prefix}--menu--with-icons
+    > .#{$prefix}--menu-item-group
+    > ul
+    > .#{$prefix}--menu-item,
+  .#{$prefix}--menu--with-icons
+    > .#{$prefix}--menu-item-radio-group
+    > ul
+    > .#{$prefix}--menu-item {
+    grid-template-columns: 1rem 1fr max-content;
   }
 
-  .#{$prefix}--menu-option__content--indented .#{$prefix}--menu-option__label {
-    margin-left: $spacing-05;
+  .#{$prefix}--menu-item--disabled {
+    color: $text-disabled;
+    cursor: not-allowed;
   }
 
-  .#{$prefix}--menu-option__label {
-    @include type-style('body-compact-01');
-
-    overflow: hidden;
-    flex-grow: 1;
-    // add top/bottom padding to make sure letters are not cut off by hidden overflow
-    padding: $spacing-02 0;
-    text-align: start;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  .#{$prefix}--menu-item--disabled:hover,
+  .#{$prefix}--menu-item--disabled.#{$prefix}--menu-item--danger:hover {
+    background-color: $layer;
+    color: $text-disabled;
   }
 
-  .#{$prefix}--menu-option__info {
-    display: inline-flex;
-    margin-left: $spacing-05;
+  .#{$prefix}--menu-item--danger:focus,
+  .#{$prefix}--menu-item--danger:hover {
+    background-color: button-tokens.$button-danger-primary;
+    color: $text-on-color;
   }
 
-  .#{$prefix}--menu-option__icon {
-    display: flex;
-    width: 1rem;
-    height: 1rem;
-    align-items: center;
-    margin-right: $spacing-03;
-  }
+  // MenuItemDivider
 
-  .#{$prefix}--menu-divider {
-    display: list-item;
+  .#{$prefix}--menu-item-divider {
+    display: block;
     width: 100%;
-    height: 1px;
-    margin: $spacing-02 0;
+    height: rem(1px);
     background-color: $border-subtle;
-  }
-
-  $supported-sizes: (
-    // $size-md
-    'md': 2.5rem,
-    // $size-lg
-    'lg': 3rem
-  );
-
-  @each $size, $value in $supported-sizes {
-    .#{$prefix}--menu--#{$size} .#{$prefix}--menu-option {
-      height: $value;
-    }
+    margin-block: $spacing-02;
   }
 }

package/scss/components/modal/_index.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2018, 2018
+// Copyright IBM Corp. 2018, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/modal/_modal.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2018
+// Copyright IBM Corp. 2016, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/multiselect/_index.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2018, 2018
+// Copyright IBM Corp. 2018, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/multiselect/_multiselect.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2018
+// Copyright IBM Corp. 2016, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/notification/_actionable-notification.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2018
+// Copyright IBM Corp. 2016, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/notification/_index.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2018, 2018
+// Copyright IBM Corp. 2018, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/notification/_inline-notification.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2018
+// Copyright IBM Corp. 2016, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/notification/_mixins.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2018
+// Copyright IBM Corp. 2016, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/notification/_toast-notification.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2018
+// Copyright IBM Corp. 2016, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/notification/_tokens.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2018, 2018
+// Copyright IBM Corp. 2018, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2018, 2018
+// Copyright IBM Corp. 2018, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2018
+// Copyright IBM Corp. 2016, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2018, 2018
+// Copyright IBM Corp. 2018, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2018
+// Copyright IBM Corp. 2016, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/pagination/_index.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2018, 2018
+// Copyright IBM Corp. 2018, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/pagination/_pagination.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2018
+// Copyright IBM Corp. 2016, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/pagination/_unstable_pagination.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2020
+// Copyright IBM Corp. 2016, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/pagination-nav/_index.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2018, 2018
+// Copyright IBM Corp. 2018, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/pagination-nav/_mixins.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2018
+// Copyright IBM Corp. 2016, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/pagination-nav/_pagination-nav.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2018
+// Copyright IBM Corp. 2016, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/popover/_index.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2018, 2018
+// Copyright IBM Corp. 2018, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/popover/_popover.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2018
+// Copyright IBM Corp. 2016, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -333,7 +333,7 @@ $popover-caret-height: custom-property.get-var(
     // moved farther than the caret
     transform: translate(
       calc(-1 * $popover-offset),
-      calc(-1 * 0.5 * $popover-offset)
+      calc(-1 * 0.5 * $popover-offset + 16px)
     );
   }
 
@@ -344,7 +344,7 @@ $popover-caret-height: custom-property.get-var(
     // moved farther than the caret
     transform: translate(
       calc(-1 * $popover-offset),
-      calc(0.5 * $popover-offset)
+      calc(0.5 * $popover-offset - 16px)
     );
   }
 

package/scss/components/progress-bar/_index.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2018, 2018
+// Copyright IBM Corp. 2018, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/progress-indicator/_index.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2018, 2018
+// Copyright IBM Corp. 2018, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/progress-indicator/_progress-indicator.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2018
+// Copyright IBM Corp. 2016, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/radio-button/_radio-button.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2018
+// Copyright IBM Corp. 2016, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/search/_search.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2018
+// Copyright IBM Corp. 2016, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/select/_index.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2018, 2018
+// Copyright IBM Corp. 2018, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/select/_select.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2018
+// Copyright IBM Corp. 2016, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/skeleton-styles/_index.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2018, 2018
+// Copyright IBM Corp. 2018, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/skeleton-styles/_skeleton-styles.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2018
+// Copyright IBM Corp. 2016, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/slider/_slider.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2018
+// Copyright IBM Corp. 2016, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/stack/_index.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2018, 2018
+// Copyright IBM Corp. 2018, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/stack/_stack.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2018, 2018
+// Copyright IBM Corp. 2018, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2018, 2018
+// Copyright IBM Corp. 2018, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2018
+// Copyright IBM Corp. 2016, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2018
+// Copyright IBM Corp. 2016, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/tabs/_tabs.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2018
+// Copyright IBM Corp. 2016, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/tag/_index.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2018, 2018
+// Copyright IBM Corp. 2018, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/tag/_mixins.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2018
+// Copyright IBM Corp. 2016, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/tag/_tag.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2018
+// Copyright IBM Corp. 2016, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/text-area/_index.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2018, 2018
+// Copyright IBM Corp. 2018, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/text-area/_text-area.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2018
+// Copyright IBM Corp. 2016, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/text-input/_index.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2018, 2018
+// Copyright IBM Corp. 2018, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/text-input/_text-input.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2018
+// Copyright IBM Corp. 2016, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/tile/_index.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2018, 2018
+// Copyright IBM Corp. 2018, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/tile/_tile.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2018
+// Copyright IBM Corp. 2016, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/time-picker/_index.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2018, 2018
+// Copyright IBM Corp. 2018, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/time-picker/_time-picker.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2018
+// Copyright IBM Corp. 2016, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/toggle/_index.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2018, 2018
+// Copyright IBM Corp. 2018, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/toggle/_toggle.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2018
+// Copyright IBM Corp. 2016, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/toggletip/_index.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2018, 2018
+// Copyright IBM Corp. 2018, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.