@carbon/styles 1.15.0 → 1.16.0

package/scss/components/_index.scss

@@ -23,8 +23,11 @@
 @use 'date-picker';
 @use 'dropdown';
 @use 'file-uploader';
+@use 'fluid-combo-box';
 @use 'fluid-dropdown';
 @use 'fluid-list-box';
+@use 'fluid-multiselect';
+@use 'fluid-select';
 @use 'fluid-text-area';
 @use 'fluid-text-input';
 @use 'form';

package/scss/components/button/_tokens.scss

@@ -9,333 +9,334 @@
 @use '../../config';
 @use '../../themes';
 @use '../../utilities/component-tokens';
+@use '@carbon/themes/scss/component-tokens' as button;
 
 $button-separator: (
-  fallback: #e0e0e0,
+  fallback: map.get(button.$button-separator, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: #e0e0e0,
+      value: map.get(button.$button-separator, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: #e0e0e0,
+      value: map.get(button.$button-separator, g-10),
     ),
     (
       theme: themes.$g90,
-      value: #161616,
+      value: map.get(button.$button-separator, g-90),
     ),
     (
       theme: themes.$g100,
-      value: #161616,
+      value: map.get(button.$button-separator, g-100),
     ),
   ),
 ) !default;
 
 $button-primary: (
-  fallback: #0f62fe,
+  fallback: map.get(button.$button-primary, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: #0f62fe,
+      value: map.get(button.$button-primary, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: #0f62fe,
+      value: map.get(button.$button-primary, g-10),
     ),
     (
       theme: themes.$g90,
-      value: #0f62fe,
+      value: map.get(button.$button-primary, g-90),
     ),
     (
       theme: themes.$g100,
-      value: #0f62fe,
+      value: map.get(button.$button-primary, g-100),
     ),
   ),
 ) !default;
 
 $button-secondary: (
-  fallback: #393939,
+  fallback: map.get(button.$button-secondary, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: #393939,
+      value: map.get(button.$button-secondary, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: #393939,
+      value: map.get(button.$button-secondary, g-10),
     ),
     (
       theme: themes.$g90,
-      value: #6f6f6f,
+      value: map.get(button.$button-secondary, g-90),
     ),
     (
       theme: themes.$g100,
-      value: #6f6f6f,
+      value: map.get(button.$button-secondary, g-100),
     ),
   ),
 ) !default;
 
 $button-tertiary: (
-  fallback: #0f62fe,
+  fallback: map.get(button.$button-tertiary, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: #0f62fe,
+      value: map.get(button.$button-tertiary, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: #0f62fe,
+      value: map.get(button.$button-tertiary, g-10),
     ),
     (
       theme: themes.$g90,
-      value: #ffffff,
+      value: map.get(button.$button-tertiary, g-90),
     ),
     (
       theme: themes.$g100,
-      value: #ffffff,
+      value: map.get(button.$button-tertiary, g-100),
     ),
   ),
 ) !default;
 
 $button-danger-primary: (
-  fallback: #da1e28,
+  fallback: map.get(button.$button-danger-primary, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: #da1e28,
+      value: map.get(button.$button-danger-primary, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: #da1e28,
+      value: map.get(button.$button-danger-primary, g-10),
     ),
     (
       theme: themes.$g90,
-      value: #da1e28,
+      value: map.get(button.$button-danger-primary, g-90),
     ),
     (
       theme: themes.$g100,
-      value: #da1e28,
+      value: map.get(button.$button-danger-primary, g-100),
     ),
   ),
 ) !default;
 
 $button-danger-secondary: (
-  fallback: #da1e28,
+  fallback: map.get(button.$button-danger-secondary, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: #da1e28,
+      value: map.get(button.$button-danger-secondary, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: #da1e28,
+      value: map.get(button.$button-danger-secondary, g-10),
     ),
     (
       theme: themes.$g90,
-      value: #ff8389,
+      value: map.get(button.$button-danger-secondary, g-90),
     ),
     (
       theme: themes.$g100,
-      value: #fa4d56,
+      value: map.get(button.$button-danger-secondary, g-100),
     ),
   ),
 ) !default;
 
 $button-danger-active: (
-  fallback: #750e13,
+  fallback: map.get(button.$button-danger-active, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: #750e13,
+      value: map.get(button.$button-danger-active, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: #750e13,
+      value: map.get(button.$button-danger-active, g-10),
     ),
     (
       theme: themes.$g90,
-      value: #750e13,
+      value: map.get(button.$button-danger-active, g-90),
     ),
     (
       theme: themes.$g100,
-      value: #750e13,
+      value: map.get(button.$button-danger-active, g-100),
     ),
   ),
 ) !default;
 
 $button-primary-active: (
-  fallback: #002d9c,
+  fallback: map.get(button.$button-primary-active, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: #002d9c,
+      value: map.get(button.$button-primary-active, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: #002d9c,
+      value: map.get(button.$button-primary-active, g-10),
     ),
     (
       theme: themes.$g90,
-      value: #002d9c,
+      value: map.get(button.$button-primary-active, g-90),
     ),
     (
       theme: themes.$g100,
-      value: #002d9c,
+      value: map.get(button.$button-primary-active, g-100),
     ),
   ),
 ) !default;
 
 $button-secondary-active: (
-  fallback: #6f6f6f,
+  fallback: map.get(button.$button-secondary-active, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: #6f6f6f,
+      value: map.get(button.$button-secondary-active, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: #6f6f6f,
+      value: map.get(button.$button-secondary-active, g-10),
     ),
     (
       theme: themes.$g90,
-      value: #393939,
+      value: map.get(button.$button-secondary-active, g-90),
     ),
     (
       theme: themes.$g100,
-      value: #393939,
+      value: map.get(button.$button-secondary-active, g-100),
     ),
   ),
 ) !default;
 
 $button-tertiary-active: (
-  fallback: #002d9c,
+  fallback: map.get(button.$button-tertiary-active, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: #002d9c,
+      value: map.get(button.$button-tertiary-active, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: #002d9c,
+      value: map.get(button.$button-tertiary-active, g-10),
     ),
     (
       theme: themes.$g90,
-      value: #c6c6c6,
+      value: map.get(button.$button-tertiary-active, g-90),
     ),
     (
       theme: themes.$g100,
-      value: #c6c6c6,
+      value: map.get(button.$button-tertiary-active, g-100),
     ),
   ),
 ) !default;
 
 $button-danger-hover: (
-  fallback: #b81922,
+  fallback: map.get(button.$button-danger-hover, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: #b81922,
+      value: map.get(button.$button-danger-hover, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: #b81922,
+      value: map.get(button.$button-danger-hover, g-10),
     ),
     (
       theme: themes.$g90,
-      value: #b81921,
+      value: map.get(button.$button-danger-hover, g-90),
     ),
     (
       theme: themes.$g100,
-      value: #b81921,
+      value: map.get(button.$button-danger-hover, g-100),
     ),
   ),
 ) !default;
 
 $button-primary-hover: (
-  fallback: #0050e6,
+  fallback: map.get(button.$button-primary-hover, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: #0050e6,
+      value: map.get(button.$button-primary-hover, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: #0050e6,
+      value: map.get(button.$button-primary-hover, g-10),
     ),
     (
       theme: themes.$g90,
-      value: #0050e6,
+      value: map.get(button.$button-primary-hover, g-90),
     ),
     (
       theme: themes.$g100,
-      value: #0050e6,
+      value: map.get(button.$button-primary-hover, g-100),
     ),
   ),
 ) !default;
 
 $button-secondary-hover: (
-  fallback: #474747,
+  fallback: map.get(button.$button-secondary-hover, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: #474747,
+      value: map.get(button.$button-secondary-hover, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: #474747,
+      value: map.get(button.$button-secondary-hover, g-10),
     ),
     (
       theme: themes.$g90,
-      value: #5e5e5e,
+      value: map.get(button.$button-secondary-hover, g-90),
     ),
     (
       theme: themes.$g100,
-      value: #5e5e5e,
+      value: map.get(button.$button-secondary-hover, g-100),
     ),
   ),
 ) !default;
 
 $button-tertiary-hover: (
-  fallback: #0050e6,
+  fallback: map.get(button.$button-tertiary-hover, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: #0050e6,
+      value: map.get(button.$button-tertiary-hover, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: #0050e6,
+      value: map.get(button.$button-tertiary-hover, g-10),
     ),
     (
       theme: themes.$g90,
-      value: #f4f4f4,
+      value: map.get(button.$button-tertiary-hover, g-90),
     ),
     (
       theme: themes.$g100,
-      value: #f4f4f4,
+      value: map.get(button.$button-tertiary-hover, g-100),
     ),
   ),
 ) !default;
 
 $button-disabled: (
-  fallback: #c6c6c6,
+  fallback: map.get(button.$button-disabled, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: #c6c6c6,
+      value: map.get(button.$button-disabled, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: #c6c6c6,
+      value: map.get(button.$button-disabled, g-10),
     ),
     (
       theme: themes.$g90,
-      value: rgb(141 141 141 / 30%),
+      value: map.get(button.$button-disabled, g-90),
     ),
     (
       theme: themes.$g100,
-      value: rgb(141 141 141 / 30%),
+      value: map.get(button.$button-disabled, g-100),
     ),
   ),
 ) !default;

package/scss/components/data-table/sort/_data-table-sort.scss

@@ -158,7 +158,7 @@
     opacity: 1;
   }
 
-  .#{$prefix}--table-sort--ascending .#{$prefix}--table-sort__icon {
+  .#{$prefix}--table-sort--descending .#{$prefix}--table-sort__icon {
     transform: rotate(180deg);
   }
 

package/scss/components/fluid-combo-box/_fluid-combo-box.scss

@@ -0,0 +1,71 @@
+//
+// Copyright IBM Corp. 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+//-----------------------------
+// Fluid ComboBox
+//-----------------------------
+@use '../../config' as *;
+@use '../../motion' as *;
+@use '../../spacing' as *;
+@use '../../theme' as *;
+@use '../../utilities/convert' as *;
+@use '../../utilities/focus-outline' as *;
+@use '../dropdown';
+@use '../fluid-list-box';
+
+@mixin fluid-combo-box {
+  // Style overrides can be added here as needed
+  .#{$prefix}--list-box__wrapper--fluid
+    .#{$prefix}--combo-box
+    .#{$prefix}--list-box__field {
+    overflow: visible;
+    padding: 0;
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid
+    .#{$prefix}--combo-box
+    .#{$prefix}--text-input {
+    overflow: hidden;
+    padding: rem(33px) $spacing-10 rem(13px) $spacing-05;
+    text-overflow: ellipsis;
+    transition: none;
+    white-space: nowrap;
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid
+    .#{$prefix}--combo-box
+    .#{$prefix}--text-input:focus {
+    outline: none;
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid
+    .#{$prefix}--combo-box
+    .#{$prefix}--list-box__selection {
+    top: auto;
+    bottom: rem(10px);
+    transform: none;
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid
+    .#{$prefix}--combo-box
+    .#{$prefix}--list-box__menu-icon {
+    bottom: rem(14px);
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid
+    .#{$prefix}--list-box[data-invalid]
+    .#{$prefix}--list-box__field
+    .#{$prefix}--text-input
+    + .#{$prefix}--list-box__invalid-icon,
+  .#{$prefix}--list-box__wrapper--fluid
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__field
+    .#{$prefix}--text-input
+    + .#{$prefix}--list-box__invalid-icon {
+    right: 1rem;
+  }
+}

package/scss/components/fluid-combo-box/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'fluid-combo-box';
+@use 'fluid-combo-box';
+
+@include fluid-combo-box.fluid-combo-box;

package/scss/components/fluid-list-box/_fluid-list-box.scss

@@ -87,6 +87,7 @@
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--focus {
     @include focus-outline('outline');
 
+    z-index: 2;
     outline-offset: 0;
   }
 
@@ -95,22 +96,41 @@
     outline-offset: 0;
   }
 
+  .#{$prefix}--list-box__wrapper--fluid
+    :not(.#{$prefix}--list-box--up)
+    .#{$prefix}--list-box__menu {
+    top: calc(100% + rem(3px));
+  }
+
   // Invalid / Warning styles
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid:not(.#{$prefix}--list-box__wrapper--fluid--focus) {
     @include focus-outline('invalid');
 
+    z-index: 2;
     outline-offset: 0;
   }
 
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--focus
-    .#{$prefix}--list-box:not(.#{$prefix}--list-box--invalid) {
+    .#{$prefix}--list-box:not(.#{$prefix}--list-box--invalid),
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--focus
+    .#{$prefix}--list-box
+    .#{$prefix}--text-input,
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid
+    .#{$prefix}--list-box
+    .#{$prefix}--text-input,
+  .#{$prefix}--list-box__wrapper--fluid
+    .#{$prefix}--combo-box.#{$prefix}--list-box--warning
+    .#{$prefix}--text-input {
     border-bottom: 1px solid transparent;
   }
 
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid
     .#{$prefix}--list-box,
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid
-    .#{$prefix}--list-box__field:focus {
+    .#{$prefix}--list-box__field:focus,
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid
+    .#{$prefix}--combo-box[data-invalid]
+    .#{$prefix}--text-input {
     outline: none;
     outline-offset: 0;
   }
@@ -134,6 +154,12 @@
     margin-top: 0;
   }
 
+  .#{$prefix}--list-box__wrapper--fluid
+    .#{$prefix}--list-box--warning
+    ~ .#{$prefix}--form-requirement {
+    border-bottom: 1px solid $border-strong;
+  }
+
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid
     .#{$prefix}--list-box__invalid-icon,
   .#{$prefix}--list-box__wrapper--fluid
@@ -144,6 +170,18 @@
     pointer-events: none;
   }
 
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid
+    .#{$prefix}--list-box[data-invalid]:not(.#{$prefix}--combo-box)
+    .#{$prefix}--list-box__field {
+    padding-right: $spacing-09;
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid
+    .#{$prefix}--list-box[data-invalid].#{$prefix}--combo-box
+    .#{$prefix}--text-input {
+    padding-right: $spacing-10;
+  }
+
   // Error + Warning divider
   .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box__divider {
     display: none;
@@ -163,10 +201,10 @@
   }
 
   .#{$prefix}--list-box__wrapper--fluid
-    .#{$prefix}--list-box--invalid:hover
+    .#{$prefix}--list-box--invalid:hover:not(.#{$prefix}--combo-box)
     ~ .#{$prefix}--list-box__divider,
   .#{$prefix}--list-box__wrapper--fluid
-    .#{$prefix}--list-box--warning:hover
+    .#{$prefix}--list-box--warning:hover:not(.#{$prefix}--combo-box)
     ~ .#{$prefix}--list-box__divider {
     border-color: transparent;
   }

package/scss/components/fluid-multiselect/_fluid-multiselect.scss

@@ -0,0 +1,41 @@
+//
+// Copyright IBM Corp. 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+//-----------------------------
+// Fluid ComboBox
+//-----------------------------
+@use '../../config' as *;
+@use '../../motion' as *;
+@use '../../spacing' as *;
+@use '../../theme' as *;
+@use '../../utilities/convert' as *;
+@use '../../utilities/focus-outline' as *;
+@use '../dropdown';
+@use '../fluid-list-box';
+@use '../fluid-combo-box';
+
+@mixin fluid-multiselect {
+  // Filterable
+  .#{$prefix}--list-box__wrapper--fluid
+    .#{$prefix}--multi-select--filterable--input-focused {
+    outline: none;
+    outline-offset: 0;
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid
+    .#{$prefix}--multi-select--filterable
+    .#{$prefix}--list-box__field
+    .#{$prefix}--text-input {
+    border-bottom: 1px solid transparent;
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid
+    .#{$prefix}--multi-select--filterable.#{$prefix}--combo-box
+    .#{$prefix}--list-box__field {
+    align-items: baseline;
+  }
+}

package/scss/components/fluid-multiselect/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'fluid-multiselect';
+@use 'fluid-multiselect';
+
+@include fluid-multiselect.fluid-multiselect;