@carbon/styles 1.19.0-rc.0 → 1.20.0

package/scss/components/fluid-number-input/_fluid-number-input.scss

@@ -0,0 +1,273 @@
+//
+// 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 Number Input
+//-----------------------------
+@use '../../config' as *;
+@use '../../motion' as *;
+@use '../../spacing' as *;
+@use '../../theme' as *;
+@use '../../utilities/convert' as *;
+@use '../../utilities/focus-outline' as *;
+@use '../number-input';
+
+@mixin fluid-number-input {
+  .#{$prefix}--number-input--fluid {
+    position: relative;
+    height: 100%;
+    background: $field;
+  }
+
+  .#{$prefix}--number-input--fluid .#{$prefix}--label {
+    position: absolute;
+    z-index: 1;
+    top: rem(13px);
+    left: $spacing-05;
+    display: flex;
+    width: calc(100% - 2rem);
+    height: rem(16px);
+    align-items: center;
+    margin: 0;
+  }
+
+  .#{$prefix}--number-input--fluid .#{$prefix}--label::-webkit-scrollbar,
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--label
+    .#{$prefix}--toggletip-label::-webkit-scrollbar {
+    display: none;
+  }
+
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--label:not(:has(.#{$prefix}--toggletip-label)),
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--label
+    .#{$prefix}--toggletip-label {
+    -ms-overflow-style: none;
+    overflow-x: scroll;
+    scrollbar-width: none;
+    white-space: nowrap;
+  }
+
+  .#{$prefix}--number-input--fluid input[type='number'] {
+    min-height: rem(64px);
+    padding: rem(32px) rem(80px) rem(13px) $spacing-05;
+    background: transparent;
+    outline: none;
+  }
+
+  .#{$prefix}--number-input--fluid .#{$prefix}--number__controls {
+    top: rem(23px);
+    height: rem(40px);
+    transform: translate(0);
+  }
+
+  .#{$prefix}--number-input--fluid .#{$prefix}--number__control-btn,
+  .#{$prefix}--number-input--fluid
+    input[type='number']:focus
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn {
+    border-bottom: 1px solid transparent;
+  }
+
+  // Focus Overrides
+  .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--focus
+    .#{$prefix}--number {
+    @include focus-outline('outline');
+  }
+
+  // Weird overrides (needed to override focus borders on stepper buttons when hovered while input has focus)
+  .#{$prefix}--number-input--fluid:not(.#{$prefix}--number-input--fluid--invalid)
+    .#{$prefix}--number
+    .#{$prefix}--number__input-wrapper:not(.#{$prefix}--number__input-wrapper--warning)
+    input[type='number']:focus
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:hover {
+    outline: 2px solid transparent;
+  }
+
+  .#{$prefix}--number-input--fluid:not(.#{$prefix}--number-input--fluid--invalid)
+    .#{$prefix}--number
+    .#{$prefix}--number__input-wrapper:not(.#{$prefix}--number__input-wrapper--warning)
+    input[type='number']:focus
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:hover::before {
+    top: auto;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background: $focus;
+  }
+  // End weirdness
+
+  .#{$prefix}--number-input--fluid:not(.#{$prefix}--number-input--fluid--invalid)
+    .#{$prefix}--number-input-wrapper:not(.#{$prefix}--number-input-wrapper__warning)
+    input[type='number']:focus
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:hover {
+    border-bottom: 1px solid $focus;
+    outline: none;
+  }
+
+  .#{$prefix}--number-input--fluid
+    input[type='number']
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn::after {
+    top: 0;
+    height: calc(100% - rem(1px));
+  }
+
+  .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--focus
+    input[type='number']
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn.up-icon::after {
+    background: $focus;
+  }
+
+  .#{$prefix}--number-input--fluid
+    input[type='number']
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn.up-icon::after {
+    height: calc(100%);
+  }
+
+  .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--focus
+    input[type='number']
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn.up-icon:hover::after {
+    height: calc(100%);
+    background-color: $focus;
+  }
+
+  .#{$prefix}--number-input--fluid--invalid
+    input[type='number'][data-invalid]
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:focus,
+  .#{$prefix}--number-input--fluid--invalid
+    .#{$prefix}--number
+    input[type='number'][data-invalid]
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:focus:hover {
+    @include focus-outline('outline');
+  }
+
+  // Invalid styles
+  .#{$prefix}--number-input--fluid .#{$prefix}--number-input__divider {
+    display: none;
+  }
+
+  .#{$prefix}--number-input--fluid .#{$prefix}--number__invalid {
+    top: rem(73px);
+    right: $spacing-05;
+    pointer-events: none;
+  }
+
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__controls
+    .#{$prefix}--number__rule-divider:first-of-type {
+    display: none;
+  }
+
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--warning
+    input[type='number'] {
+    border-bottom: 1px solid transparent;
+  }
+
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--warning
+    input[type='number']:focus {
+    outline: none;
+  }
+
+  .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--invalid
+    .#{$prefix}--number-input__divider,
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--warning
+    + .#{$prefix}--number-input__divider {
+    position: absolute;
+    top: rem(63px);
+    display: block;
+    width: calc(100% - 2rem);
+    height: rem(1px);
+    border: none;
+    border-bottom: 1px solid $border-subtle;
+    margin: 0 1rem;
+  }
+
+  .#{$prefix}--number-input--fluid .#{$prefix}--form-requirement {
+    padding: $spacing-03 rem(40px) $spacing-03 $spacing-05;
+    margin: 0;
+  }
+
+  .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--invalid:not(.#{$prefix}--number-input--fluid--focus)
+    .#{$prefix}--number {
+    @include focus-outline('invalid');
+  }
+
+  .#{$prefix}--number-input--fluid--invalid
+    .#{$prefix}--number[data-invalid]
+    input[type='number'] {
+    border-bottom: 1px solid transparent;
+  }
+
+  .#{$prefix}--number-input--fluid--invalid
+    .#{$prefix}--number[data-invalid]
+    input[type='number'],
+  .#{$prefix}--number-input--fluid--invalid
+    .#{$prefix}--number
+    input[type='number'][data-invalid]
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:hover,
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--warning
+    input[type='number']
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:hover:not(:focus) {
+    outline: none;
+  }
+
+  .#{$prefix}--number-input--fluid.#{$prefix}--number-input--invalid
+    .#{$prefix}--number__input-wrapper
+    input[type='number']
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn,
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--warning
+    input[type='number']
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn {
+    border-bottom: none;
+  }
+
+  .#{$prefix}--number-input--fluid--invalid
+    .#{$prefix}--number
+    input[type='number'][data-invalid]
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn,
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number
+    input[type='number']
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn {
+    border: initial;
+    border-bottom-width: rem(1px);
+  }
+
+  // Disabled states
+  .#{$prefix}--number-input--fluid--disabled:not(.#{$prefix}--number-input--fluid--invalid)
+    .#{$prefix}--number {
+    border-bottom: 1px solid $border-subtle;
+  }
+
+  .#{$prefix}--number-input--fluid--disabled.#{$prefix}--number-input--fluid--invalid
+    .#{$prefix}--number
+    input[type='number']:disabled {
+    background-color: transparent;
+  }
+}

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

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

@@ -0,0 +1,141 @@
+//
+// 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 Search
+//-----------------------------
+@use '../../config' as *;
+@use '../../motion' as *;
+@use '../../spacing' as *;
+@use '../../theme' as *;
+@use '../../utilities/convert' as *;
+@use '../../utilities/focus-outline' as *;
+@use '../search';
+
+@mixin fluid-search {
+  .#{$prefix}--search--fluid {
+    height: rem(64px);
+  }
+
+  .#{$prefix}--search--fluid .#{$prefix}--label {
+    position: absolute;
+    z-index: 1;
+    top: rem(13px);
+    left: $spacing-05;
+    display: flex;
+    overflow: initial;
+    width: calc(100% - 2rem);
+    height: rem(16px);
+    align-items: center;
+    margin: 0;
+    clip: initial;
+    white-space: initial;
+  }
+
+  .#{$prefix}--search--fluid .#{$prefix}--label::-webkit-scrollbar,
+  .#{$prefix}--search--fluid
+    .#{$prefix}--label
+    .#{$prefix}--toggletip-label::-webkit-scrollbar {
+    display: none;
+  }
+
+  .#{$prefix}--search--fluid
+    .#{$prefix}--label:not(:has(.#{$prefix}--toggletip-label)),
+  .#{$prefix}--search--fluid .#{$prefix}--label .#{$prefix}--toggletip-label {
+    -ms-overflow-style: none;
+    overflow-x: scroll;
+    scrollbar-width: none;
+    white-space: nowrap;
+  }
+
+  .#{$prefix}--search--fluid .#{$prefix}--search-input {
+    height: 100%;
+    padding: rem(32px) rem(88px) rem(13px) $spacing-05;
+  }
+
+  .#{$prefix}--search--fluid .#{$prefix}--search-magnifier-icon {
+    top: auto;
+    right: 1rem;
+    bottom: rem(13px);
+    left: auto;
+    transform: none;
+  }
+
+  .#{$prefix}--search--fluid .#{$prefix}--search-close {
+    top: auto;
+    right: rem(48px);
+    bottom: 0;
+    left: auto;
+    width: rem(40px);
+    height: rem(40px);
+    border: none;
+    transition: background-color $duration-fast-01 motion(standard, productive);
+  }
+
+  .#{$prefix}--search--fluid .#{$prefix}--search-close::before {
+    position: absolute;
+    top: auto;
+    right: rem(-1px);
+    bottom: rem(14px);
+    left: auto;
+    display: block;
+    width: rem(1px);
+    height: 1rem;
+    background: $border-subtle;
+    content: '';
+  }
+
+  .#{$prefix}--search--fluid
+    .#{$prefix}--search-input:focus
+    ~ .#{$prefix}--search-close:hover {
+    outline: none;
+  }
+
+  .#{$prefix}--search--fluid .#{$prefix}--search-close::after {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    display: block;
+    width: 100%;
+    height: rem(2px);
+    content: '';
+  }
+
+  .#{$prefix}--search--fluid
+    .#{$prefix}--search-input:focus
+    ~ .#{$prefix}--search-close::after {
+    background: $focus;
+  }
+
+  .#{$prefix}--search--fluid
+    .#{$prefix}--search-input:not(:focus)
+    ~ .#{$prefix}--search-close:not([disabled])::after {
+    height: rem(1px);
+    background: $border-strong;
+  }
+
+  .#{$prefix}--search--fluid .#{$prefix}--search-close svg {
+    margin-bottom: rem(2px);
+  }
+
+  // Disabled styles
+  .#{$prefix}--search--fluid
+    .#{$prefix}--search-input:disabled
+    ~ .#{$prefix}--search-close:hover::before {
+    background: $border-subtle;
+  }
+
+  .#{$prefix}--search--fluid.#{$prefix}--search--disabled .#{$prefix}--label {
+    color: $text-disabled;
+    cursor: not-allowed;
+  }
+
+  .#{$prefix}--search--fluid.#{$prefix}--search--disabled
+    .#{$prefix}--search-input[disabled] {
+    border-bottom: 1px solid $border-subtle;
+  }
+}

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

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

@@ -31,11 +31,28 @@
     top: rem(13px);
     left: $spacing-05;
     display: flex;
+    width: calc(100% - 2rem);
     height: rem(16px);
     align-items: center;
     margin: 0;
   }
 
+  .#{$prefix}--select--fluid .#{$prefix}--label::-webkit-scrollbar,
+  .#{$prefix}--select--fluid
+    .#{$prefix}--label
+    .#{$prefix}--toggletip-label::-webkit-scrollbar {
+    display: none;
+  }
+
+  .#{$prefix}--select--fluid
+    .#{$prefix}--label:not(:has(.#{$prefix}--toggletip-label)),
+  .#{$prefix}--select--fluid .#{$prefix}--label .#{$prefix}--toggletip-label {
+    -ms-overflow-style: none;
+    overflow-x: scroll;
+    scrollbar-width: none;
+    white-space: nowrap;
+  }
+
   .#{$prefix}--select--fluid .#{$prefix}--select-input {
     min-height: rem(64px);
     padding: rem(32px) rem(32px) rem(13px) $spacing-05;

package/scss/components/fluid-text-area/_fluid-text-area.scss

@@ -39,11 +39,30 @@
     top: rem(13px);
     left: $spacing-05;
     display: flex;
+    width: calc(100% - 2rem);
     height: rem(16px);
     align-items: center;
     margin: 0;
   }
 
+  .#{$prefix}--text-area--fluid .#{$prefix}--label::-webkit-scrollbar,
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--label
+    .#{$prefix}--toggletip-label::-webkit-scrollbar {
+    display: none;
+  }
+
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--label:not(:has(.#{$prefix}--toggletip-label)),
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--label
+    .#{$prefix}--toggletip-label {
+    -ms-overflow-style: none;
+    overflow-x: scroll;
+    scrollbar-width: none;
+    white-space: nowrap;
+  }
+
   //counter
   .#{$prefix}--text-area--fluid div.#{$prefix}--label {
     right: 1rem;

package/scss/components/fluid-text-input/_fluid-text-input.scss

@@ -35,16 +35,26 @@
     height: rem(16px);
     align-items: center;
     margin: 0;
+  }
+
+  .#{$prefix}--text-input--fluid .#{$prefix}--label::-webkit-scrollbar,
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--label
+    .#{$prefix}--toggletip-label::-webkit-scrollbar {
+    display: none;
+  }
+
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--label:not(:has(.#{$prefix}--toggletip-label)),
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--label
+    .#{$prefix}--toggletip-label {
     -ms-overflow-style: none;
     overflow-x: scroll;
     scrollbar-width: none;
     white-space: nowrap;
   }
 
-  .#{$prefix}--text-input--fluid .#{$prefix}--label::-webkit-scrollbar {
-    display: none;
-  }
-
   .#{$prefix}--text-input--fluid .#{$prefix}--form__helper-text {
     display: none;
   }

package/scss/components/form/_form.scss

@@ -110,7 +110,7 @@ $input-label-weight: 400 !default;
   }
 
   input[type='number'] {
-    font-family: carbon--font-family('mono');
+    font-family: font-family('sans');
   }
 
   input[data-invalid]:not(:focus),

package/scss/components/modal/_modal.scss

@@ -146,7 +146,7 @@
 
   //TO-DO: remove .#{$prefix}--modal-content__regular-content in v11 since hasForm has been deprecated
   // text/p gets 20% right padding
-  .#{$prefix}--modal-content p,
+  .#{$prefix}--modal-content > p,
   .#{$prefix}--modal-content__regular-content {
     @include type-style('body-01');
     // padding should take into account the left and right padding of modal container
@@ -193,7 +193,7 @@
       padding-right: $spacing-05;
     }
 
-    .#{$prefix}--modal-content p {
+    .#{$prefix}--modal-content > p {
       //.#{$prefix}--modal-content already has 16px padding so this doesn't need any
       padding-right: 0;
     }
@@ -221,7 +221,7 @@
       padding-right: $spacing-05;
     }
 
-    .#{$prefix}--modal-content p {
+    .#{$prefix}--modal-content > p {
       //.#{$prefix}--modal-content already has 16px padding so this doesn't need any
       padding-right: 0;
     }
@@ -234,7 +234,7 @@
       width: 42%;
       max-height: 72%;
 
-      .#{$prefix}--modal-content p,
+      .#{$prefix}--modal-content > p,
       .#{$prefix}--modal-content__regular-content {
         padding-right: 20%;
       }

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

@@ -32,7 +32,7 @@
   }
 
   .#{$prefix}--number input[type='number'] {
-    @include type-style('code-01');
+    @include type-style('body-compact-01');
     @include focus-outline('reset');
 
     display: inline-flex;
@@ -50,7 +50,7 @@
     background-color: $field;
     border-radius: 0;
     color: $text-primary;
-    font-family: font-family('mono');
+    font-family: font-family('sans');
     font-weight: 400;
     transition: background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);

package/scss/components/popover/_popover.scss

@@ -107,6 +107,7 @@ $popover-caret-height: custom-property.get-var(
   // Popover, this element contains both the caret and the popover content
   .#{$prefix}--popover {
     position: absolute;
+    z-index: z('floating');
     top: 0;
     right: 0;
     bottom: 0;

package/scss/components/slider/_slider.scss

@@ -134,6 +134,10 @@
     }
   }
 
+  .#{$prefix}--slider-text-input--hidden {
+    display: none;
+  }
+
   .#{$prefix}--slider-text-input.#{$prefix}--text-input--invalid {
     padding-right: 1rem;
   }

package/scss/components/tile/_tile.scss

@@ -6,6 +6,7 @@
 //
 
 @use '../../config' as *;
+@use '../../feature-flags' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
@@ -19,7 +20,7 @@
 /// Tile styles
 /// @access public
 /// @group tile
-@mixin tile {
+@mixin tile($local-enable-experimental-tile-contrast: false) {
   .#{$prefix}--tile-group {
     @include reset;
   }
@@ -62,6 +63,13 @@
     color: $text-primary;
     text-decoration: none;
 
+    @if (
+      enabled('enable-experimental-tile-contrast') or
+        $local-enable-experimental-tile-contrast
+    ) {
+      border: 1px solid $border-tile;
+    }
+
     &:focus {
       @include focus-outline('outline');
     }
@@ -99,6 +107,13 @@
   .#{$prefix}--tile--selectable {
     padding-right: $spacing-09;
     border: 1px solid transparent;
+
+    @if (
+      enabled('enable-experimental-tile-contrast') or
+        $local-enable-experimental-tile-contrast
+    ) {
+      border: 1px solid $border-tile;
+    }
   }
 
   .#{$prefix}--tile__checkmark {
@@ -190,6 +205,13 @@
 
     @include type-style('body-compact-01');
 
+    @if (
+      enabled('enable-experimental-tile-contrast') or
+        $local-enable-experimental-tile-contrast
+    ) {
+      border: 1px solid $border-tile;
+    }
+
     &:hover {
       background: $layer-hover;
     }

package/scss/layer/_layer-sets.scss

@@ -74,6 +74,11 @@ $-default-layer-sets: (
     theme.$border-strong-02,
     theme.$border-strong-03,
   ),
+  border-tile: (
+    theme.$border-tile-01,
+    theme.$border-tile-02,
+    theme.$border-tile-03,
+  ),
 );
 
 /// Define a map of layer sets, each set should have values for each layer in

package/scss/theme/_theme.scss

@@ -38,3 +38,4 @@ $field-hover: custom-property.get-var('field-hover');
 $border-subtle: custom-property.get-var('border-subtle');
 $border-subtle-selected: custom-property.get-var('border-subtle-selected');
 $border-strong: custom-property.get-var('border-strong');
+$border-tile: custom-property.get-var('border-tile');