@carbon/styles 1.15.0 → 1.16.0

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

@@ -0,0 +1,158 @@
+//
+// 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 Select
+//-----------------------------
+@use '../../config' as *;
+@use '../../motion' as *;
+@use '../../spacing' as *;
+@use '../../theme' as *;
+@use '../../utilities/convert' as *;
+@use '../../utilities/focus-outline' as *;
+@use '../select';
+
+@mixin fluid-select {
+  .#{$prefix}--select--fluid .#{$prefix}--select {
+    position: relative;
+    height: 100%;
+    background: $field;
+    transition: background-color $duration-fast-01 motion(standard, productive),
+      outline $duration-fast-01 motion(standard, productive);
+  }
+
+  .#{$prefix}--select--fluid .#{$prefix}--label {
+    position: absolute;
+    z-index: 1;
+    top: rem(13px);
+    left: $spacing-05;
+    display: flex;
+    height: rem(16px);
+    align-items: center;
+    margin: 0;
+  }
+
+  .#{$prefix}--select--fluid .#{$prefix}--select-input {
+    min-height: rem(64px);
+    padding: rem(32px) $spacing-05 rem(13px);
+    outline: none;
+  }
+
+  .#{$prefix}--select--fluid .#{$prefix}--select__arrow {
+    top: auto;
+    bottom: 1rem;
+    height: 1rem;
+  }
+
+  .#{$prefix}--select--fluid .#{$prefix}--select__divider {
+    display: none;
+    transition: border-color $duration-fast-01 motion(standard, productive);
+  }
+
+  // Invalid + Warn states
+  .#{$prefix}--select--fluid .#{$prefix}--select--invalid {
+    @include focus-outline('invalid');
+
+    outline-offset: 0;
+  }
+
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select--invalid
+    .#{$prefix}--select__divider,
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select--warning
+    .#{$prefix}--select__divider {
+    display: block;
+    width: calc(100% - 2rem);
+    border: none;
+    border-bottom: 1px solid $border-subtle;
+    margin: 0 1rem;
+  }
+
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select-input__wrapper[data-invalid]
+    .#{$prefix}--select-input,
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select--warning
+    .#{$prefix}--select-input {
+    border-bottom: 1px solid transparent;
+  }
+
+  .#{$prefix}--select--fluid .#{$prefix}--select--warning {
+    border-bottom: 1px solid $border-strong;
+  }
+
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select-input__wrapper[data-invalid]
+    .#{$prefix}--select-input:not(:focus),
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select--warning
+    .#{$prefix}--select-input:not(:focus) {
+    outline: none;
+  }
+
+  .#{$prefix}--select--fluid .#{$prefix}--form-requirement {
+    padding: $spacing-03 rem(40px) $spacing-03 $spacing-05;
+    margin: 0;
+  }
+
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select-input__wrapper[data-invalid]:hover
+    + .#{$prefix}--select__divider,
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select--warning
+    .#{$prefix}--select-input__wrapper:hover
+    + .#{$prefix}--select__divider {
+    border-color: transparent;
+  }
+
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select--invalid
+    .#{$prefix}--select__invalid-icon,
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select--warning
+    .#{$prefix}--select__invalid-icon {
+    top: rem(73px);
+    right: $spacing-05;
+    pointer-events: none;
+  }
+
+  // Focus styles
+  .#{$prefix}--select--fluid .#{$prefix}--select--fluid--focus {
+    @include focus-outline('outline');
+
+    outline-offset: 0;
+  }
+
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select--fluid--focus
+    .#{$prefix}--select-input,
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select--fluid--focus.#{$prefix}--select--warning {
+    border-bottom: 1px solid transparent;
+  }
+
+  // Disabled state
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select--disabled
+    .#{$prefix}--toggletip-label {
+    color: $text-disabled;
+  }
+
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select--disabled
+    .#{$prefix}--toggletip-button {
+    pointer-events: none;
+  }
+
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select--disabled
+    .#{$prefix}--toggletip-button
+    svg {
+    fill: $icon-disabled;
+  }
+}

package/scss/components/fluid-select/_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-select';
+@use 'fluid-select';
+
+@include fluid-select.fluid-select;

package/scss/components/notification/_tokens.scss

@@ -13,106 +13,123 @@
 @use '../../themes';
 @use '../../theme';
 @use '../../utilities/component-tokens';
+@use '@carbon/themes/scss/component-tokens' as notification;
+
 @use '../button/tokens' as button-tokens;
 
 $notification-background-error: (
-  fallback: colors.$red-10,
+  fallback: map.get(notification.$notification-background-error, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$red-10,
+      value: map.get(notification.$notification-background-error, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$red-10,
+      value: map.get(notification.$notification-background-error, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$gray-80,
+      value: map.get(notification.$notification-background-error, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$gray-90,
+      value: map.get(notification.$notification-background-error, g-100),
     ),
   ),
 ) !default;
 
 $notification-background-success: (
-  fallback: colors.$green-10,
+  fallback: map.get(notification.$notification-background-success, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$green-10,
+      value: map.get(notification.$notification-background-success, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$green-10,
+      value: map.get(notification.$notification-background-success, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$gray-80,
+      value: map.get(notification.$notification-background-success, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$gray-90,
+      value: map.get(notification.$notification-background-success, g-100),
     ),
   ),
 ) !default;
 
 $notification-background-info: (
-  fallback: colors.$blue-10,
+  fallback: map.get(notification.$notification-background-info, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$blue-10,
+      value: map.get(notification.$notification-background-info, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$blue-10,
+      value: map.get(notification.$notification-background-info, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$gray-80,
+      value: map.get(notification.$notification-background-info, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$gray-90,
+      value: map.get(notification.$notification-background-info, g-100),
     ),
   ),
 ) !default;
 
 $notification-background-warning: (
-  fallback: color.mix(colors.$yellow-30, colors.$white-0, 15%),
+  fallback:
+    color.mix(
+      map.get(notification.$color-map, yellow-30),
+      map.get(notification.$color-map, white-0),
+      15%
+    ),
   values: (
     (
       theme: themes.$white,
-      value: color.mix(colors.$yellow-30, colors.$white-0, 15%),
+      value:
+        color.mix(
+          map.get(notification.$color-map, yellow-30),
+          map.get(notification.$color-map, white-0),
+          15%
+        ),
     ),
     (
       theme: themes.$g10,
-      value: color.mix(colors.$yellow-30, colors.$white-0, 15%),
+      value:
+        color.mix(
+          map.get(notification.$color-map, yellow-30),
+          map.get(notification.$color-map, white-0),
+          15%
+        ),
     ),
     (
       theme: themes.$g90,
-      value: colors.$gray-80,
+      value: map.get(notification.$notification-background-warning, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$gray-90,
+      value: map.get(notification.$notification-background-warning, g-100),
     ),
   ),
 ) !default;
 
 $notification-action-hover: (
-  fallback: colors.$white-0,
+  fallback: map.get(notification.$notification-background-info, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$white-0,
+      value: map.get(notification.$notification-background-info, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$white-0,
+      value: map.get(notification.$notification-background-info, g-10),
     ),
     (
       theme: themes.$g90,
@@ -127,70 +144,161 @@ $notification-action-hover: (
 
 $notification-action-tertiary-inverse: (
   fallback: map.get(button-tokens.$button-tokens, button-tertiary, fallback),
-  values:
-    component-tokens.get-inverse-theme-values(
-      map.get(button-tokens.$button-tokens, button-tertiary)
+  values: (
+    (
+      theme: themes.$white,
+      value:
+        map.get(notification.$notification-action-tertiary-inverse, white-theme),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(notification.$notification-action-tertiary-inverse, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(notification.$notification-action-tertiary-inverse, g-90),
     ),
+    (
+      theme: themes.$g100,
+      value: map.get(notification.$notification-action-tertiary-inverse, g-100),
+    ),
+  ),
 ) !default;
 
 $notification-action-tertiary-inverse-active: (
   fallback:
     map.get(button-tokens.$button-tokens, button-tertiary-active, fallback),
-  values:
-    component-tokens.get-inverse-theme-values(
-      map.get(button-tokens.$button-tokens, button-tertiary-active)
+  values: (
+    (
+      theme: themes.$white,
+      value:
+        map.get(
+          notification.$notification-action-tertiary-inverse-active,
+          white-theme
+        ),
+    ),
+    (
+      theme: themes.$g10,
+      value:
+        map.get(notification.$notification-action-tertiary-inverse-active, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value:
+        map.get(notification.$notification-action-tertiary-inverse-active, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value:
+        map.get(
+          notification.$notification-action-tertiary-inverse-active,
+          g-100
+        ),
     ),
+  ),
 ) !default;
 
 $notification-action-tertiary-inverse-hover: (
   fallback:
     map.get(button-tokens.$button-tokens, button-tertiary-hover, fallback),
-  values:
-    component-tokens.get-inverse-theme-values(
-      map.get(button-tokens.$button-tokens, button-tertiary-hover)
+  values: (
+    (
+      theme: themes.$white,
+      value:
+        map.get(
+          notification.$notification-action-tertiary-inverse-hover,
+          white-theme
+        ),
+    ),
+    (
+      theme: themes.$g10,
+      value:
+        map.get(notification.$notification-action-tertiary-inverse-hover, g-10),
     ),
+    (
+      theme: themes.$g90,
+      value:
+        map.get(notification.$notification-action-tertiary-inverse-hover, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value:
+        map.get(notification.$notification-action-tertiary-inverse-hover, g-100),
+    ),
+  ),
 ) !default;
 
 $notification-action-tertiary-inverse-text: (
-  fallback: map.get(themes.$white, text-inverse),
+  fallback:
+    map.get(
+      notification.$notification-action-tertiary-inverse-text,
+      white-theme
+    ),
   values: (
     (
       theme: themes.$white,
-      value: map.get(themes.$g100, text-inverse),
+      value:
+        map.get(
+          notification.$notification-action-tertiary-inverse-text,
+          white-theme
+        ),
     ),
     (
       theme: themes.$g10,
-      value: map.get(themes.$g90, text-inverse),
+      value:
+        map.get(notification.$notification-action-tertiary-inverse-text, g-10),
     ),
     (
       theme: themes.$g90,
-      value: map.get(themes.$g10, text-inverse),
+      value:
+        map.get(notification.$notification-action-tertiary-inverse-text, g-90),
     ),
     (
       theme: themes.$g100,
-      value: map.get(themes.$white, text-inverse),
+      value:
+        map.get(notification.$notification-action-tertiary-inverse-text, g-100),
     ),
   ),
 ) !default;
 
 $notification-action-tertiary-inverse-text-on-color-disabled: (
-  fallback: map.get(themes.$white, text-on-color-disabled),
+  fallback:
+    map.get(
+      notification.$notification-action-tertiary-inverse-text-on-color-disabled,
+      white-theme
+    ),
   values: (
     (
       theme: themes.$white,
-      value: map.get(themes.$g100, text-on-color-disabled),
+      value:
+        map.get(
+          notification.$notification-action-tertiary-inverse-text-on-color-disabled,
+          white-theme
+        ),
     ),
     (
       theme: themes.$g10,
-      value: map.get(themes.$g90, text-on-color-disabled),
+      value:
+        map.get(
+          notification.$notification-action-tertiary-inverse-text-on-color-disabled,
+          g-10
+        ),
     ),
     (
       theme: themes.$g90,
-      value: map.get(themes.$g10, text-on-color-disabled),
+      value:
+        map.get(
+          notification.$notification-action-tertiary-inverse-text-on-color-disabled,
+          g-90
+        ),
     ),
     (
       theme: themes.$g100,
-      value: map.get(themes.$white, text-on-color-disabled),
+      value:
+        map.get(
+          notification.$notification-action-tertiary-inverse-text-on-color-disabled,
+          g-100
+        ),
     ),
   ),
 ) !default;

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

@@ -51,7 +51,7 @@
     border-radius: 0;
     color: $text-primary;
     font-family: font-family('mono');
-    font-weight: 300;
+    font-weight: 400;
     transition: background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
 

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

@@ -313,7 +313,7 @@
   .#{$prefix}--overflow-menu-options__option--disabled
     .#{$prefix}--overflow-menu-options__btn {
     color: $text-disabled;
-    pointer-events: none;
+    cursor: not-allowed;
 
     &:hover,
     &:active,

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

@@ -273,6 +273,11 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     margin-top: 0.625rem;
   }
 
+  .#{$prefix}--progress.#{$prefix}--progress--vertical.#{$prefix}--skeleton
+    .#{$prefix}--progress-label {
+    margin-top: 0.0625rem;
+  }
+
   // Vertical Variant
 
   .#{$prefix}--progress--vertical {