@carbon/styles 1.26.0 → 1.27.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.26.0",
+  "version": "1.27.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -32,21 +32,21 @@
     "sass": "^1.33.0"
   },
   "dependencies": {
-    "@carbon/colors": "^11.13.0",
+    "@carbon/colors": "^11.14.0-rc.0",
     "@carbon/feature-flags": "^0.13.0",
-    "@carbon/grid": "^11.12.0",
-    "@carbon/layout": "^11.12.0",
+    "@carbon/grid": "^11.13.0-rc.0",
+    "@carbon/layout": "^11.13.0-rc.0",
     "@carbon/motion": "^11.10.0",
-    "@carbon/themes": "^11.17.0",
-    "@carbon/type": "^11.16.0",
+    "@carbon/themes": "^11.18.0-rc.0",
+    "@carbon/type": "^11.17.0-rc.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
-    "@carbon/test-utils": "^10.27.0",
+    "@carbon/test-utils": "^10.28.0-rc.0",
     "autoprefixer": "^10.4.7",
     "browserslist-config-carbon": "^11.1.0",
     "css": "^3.0.0",
-    "cssnano": "^5.1.9",
+    "cssnano": "^6.0.0",
     "lodash.isequal": "^4.5.0",
     "postcss": "^8.4.14",
     "postcss-flexbugs-fixes": "^5.0.2",
@@ -59,5 +59,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "a95ac1dfed8959765c963e5dbec340694cb60b57"
+  "gitHead": "af6bbf9ea6a025c19a041ea352dfde798e1cd22f"
 }

package/scss/components/button/_vars.scss

@@ -30,17 +30,20 @@ $button-height: 3rem !default;
 /// @type Value
 /// @access public
 /// @group button
-$button-padding: calc(0.875rem - 3px) 63px calc(0.875rem - 3px) 15px !default;
+$button-padding: calc(0.875rem - 3px) calc(#{$spacing-10} - 1px)
+  calc(0.875rem - 3px) calc(#{$spacing-05} - 1px) !default;
 
 /// @type Value
 /// @access public
 /// @group button
-$button-padding-field: calc(0.675rem - 3px) 60px calc(0.675rem - 3px) 12px !default;
+$button-padding-field: calc(0.675rem - 3px) calc(#{$spacing-10} - 4px)
+  calc(0.675rem - 3px) calc(#{$spacing-05} - 4px) !default;
 
 /// @type Value
 /// @access public
 /// @group button
-$button-padding-sm: calc(0.375rem - 3px) 60px calc(0.375rem - 3px) 12px !default;
+$button-padding-sm: calc(0.375rem - 3px) calc(#{$spacing-10} - 4px)
+  calc(0.375rem - 3px) calc(#{$spacing-05} - 4px) !default;
 
 /// @type Number
 /// @access public
@@ -51,19 +54,19 @@ $button-padding-lg: $spacing-04 !default;
 /// @access public
 /// @group button
 /// Uses the same padding-y as normal buttons, but removes extra padding-right
-$button-padding-ghost: calc(0.875rem - 3px) 16px !default;
+$button-padding-ghost: calc(0.875rem - 3px) $spacing-05 !default;
 
 /// @type Number
 /// @access public
 /// @group button
 /// Uses the same padding-y as field buttons, but removes extra padding-right
-$button-padding-ghost-field: calc(0.675rem - 3px) 16px !default;
+$button-padding-ghost-field: calc(0.675rem - 3px) $spacing-05 !default;
 
 /// @type Number
 /// @access public
 /// @group button
 /// Uses the same padding-y as small buttons, but removes extra padding-right
-$button-padding-ghost-sm: calc(0.375rem - 3px) 16px !default;
+$button-padding-ghost-sm: calc(0.375rem - 3px) $spacing-05 !default;
 
 /// @type Number
 /// @access public

package/scss/components/checkbox/_checkbox.scss

@@ -15,6 +15,10 @@
 @use '../../utilities/visually-hidden' as *;
 
 @mixin checkbox {
+  .#{$prefix}--checkbox-group {
+    @include reset;
+  }
+
   // Spacing between checkboxes
   .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper {
     position: relative;
@@ -180,24 +184,125 @@
     background-color: $icon-disabled;
   }
 
+  //----------------------------------------------
+  // Invalid + warn
+  // ---------------------------------------------
+  .#{$prefix}--checkbox-group[data-invalid] .cds--checkbox-label::before,
+  .#{$prefix}--checkbox-wrapper--invalid .cds--checkbox-label::before,
+  .#{$prefix}--checkbox-wrapper--invalid
+    .#{$prefix}--checkbox:checked
+    + .#{$prefix}--checkbox-label::before {
+    border: 1px solid $support-error;
+  }
+
+  // checkbox group overrides for individual validation checkbox
+  .#{$prefix}--checkbox-group
+    .#{$prefix}--checkbox-wrapper--invalid
+    > .#{$prefix}--checkbox__validation-msg,
+  .#{$prefix}--checkbox-group
+    .#{$prefix}--checkbox-wrapper--warning
+    > .#{$prefix}--checkbox__validation-msg,
+  .#{$prefix}--checkbox-group
+    .#{$prefix}--checkbox-wrapper
+    > .#{$prefix}--form__helper-text {
+    display: none;
+  }
+
+  .#{$prefix}--checkbox-group:not(.#{$prefix}--checkbox-group[data-invalid])
+    .#{$prefix}--checkbox-wrapper--invalid
+    .cds--checkbox-label::before,
+  .#{$prefix}--checkbox-group:not(.#{$prefix}--checkbox-group[data-invalid])
+    .#{$prefix}--checkbox-wrapper--invalid
+    .#{$prefix}--checkbox:checked
+    + .#{$prefix}--checkbox-label::before {
+    border: 1px solid $icon-primary;
+  }
+
+  .#{$prefix}--checkbox-group__validation-msg,
+  .#{$prefix}--checkbox__validation-msg {
+    display: none;
+    align-items: flex-end;
+    margin-top: $spacing-02;
+  }
+
+  .#{$prefix}--checkbox__invalid-icon {
+    margin: 0 rem(1px) 0 rem(3px);
+    fill: $support-error;
+  }
+
+  .#{$prefix}--checkbox__invalid-icon--warning {
+    fill: $support-warning;
+  }
+
+  .#{$prefix}--checkbox__invalid-icon--warning path:first-of-type {
+    fill: #000000;
+  }
+
+  .#{$prefix}--checkbox-group--invalid
+    .#{$prefix}--checkbox-group__validation-msg,
+  .#{$prefix}--checkbox-group--warning
+    .#{$prefix}--checkbox-group__validation-msg,
+  .#{$prefix}--checkbox-wrapper--invalid
+    > .#{$prefix}--checkbox__validation-msg,
+  .#{$prefix}--checkbox-wrapper--warning
+    > .#{$prefix}--checkbox__validation-msg {
+    display: flex;
+  }
+
+  .#{$prefix}--checkbox-group--invalid
+    .#{$prefix}--checkbox-group__validation-msg
+    .#{$prefix}--form-requirement,
+  .#{$prefix}--checkbox-group--warning
+    .#{$prefix}--checkbox-group__validation-msg
+    .#{$prefix}--form-requirement,
+  .#{$prefix}--checkbox-wrapper--invalid
+    .#{$prefix}--checkbox__validation-msg
+    .#{$prefix}--form-requirement,
+  .#{$prefix}--checkbox-wrapper--warning
+    .#{$prefix}--checkbox__validation-msg
+    .#{$prefix}--form-requirement {
+    display: block;
+    overflow: visible;
+    max-height: 100%;
+    margin-top: 0;
+    margin-left: $spacing-03;
+  }
+
+  .#{$prefix}--checkbox-group--invalid
+    .#{$prefix}--checkbox-group__validation-msg
+    .#{$prefix}--form-requirement,
+  .#{$prefix}--checkbox-wrapper--invalid
+    .#{$prefix}--checkbox__validation-msg
+    .#{$prefix}--form-requirement {
+    color: $text-error;
+  }
+
   //----------------------------------------------
   // Read-only
   // ---------------------------------------------
+  .#{$prefix}--checkbox-group--readonly .#{$prefix}--checkbox-label,
   .#{$prefix}--checkbox-wrapper--readonly .#{$prefix}--checkbox-label {
     cursor: default;
   }
 
+  .#{$prefix}--checkbox-group--readonly .#{$prefix}--checkbox-label-text,
   .#{$prefix}--checkbox-wrapper--readonly .#{$prefix}--checkbox-label-text {
     cursor: text;
     user-select: text;
   }
 
+  .#{$prefix}--checkbox-group--readonly
+    .#{$prefix}--checkbox
+    + .#{$prefix}--checkbox-label::before,
   .#{$prefix}--checkbox-wrapper--readonly
     .#{$prefix}--checkbox
     + .#{$prefix}--checkbox-label::before {
     border-color: $icon-disabled;
   }
 
+  .#{$prefix}--checkbox-group--readonly
+    .#{$prefix}--checkbox:checked
+    + .#{$prefix}--checkbox-label::before,
   .#{$prefix}--checkbox-wrapper--readonly
     .#{$prefix}--checkbox:checked
     + .#{$prefix}--checkbox-label::before {
@@ -205,6 +310,9 @@
     background: transparent;
   }
 
+  .#{$prefix}--checkbox-group--readonly
+    .#{$prefix}--checkbox:checked
+    + .#{$prefix}--checkbox-label::after,
   .#{$prefix}--checkbox-wrapper--readonly
     .#{$prefix}--checkbox:checked
     + .#{$prefix}--checkbox-label::after {

package/scss/components/combo-box/_combo-box.scss

@@ -54,6 +54,10 @@
     background-color: transparent;
   }
 
+  .#{$prefix}--combo-box--readonly .#{$prefix}--text-input {
+    border-bottom-color: $border-subtle;
+  }
+
   .#{$prefix}--combo-box--readonly .#{$prefix}--list-box__menu-icon,
   .#{$prefix}--combo-box--readonly .#{$prefix}--list-box__selection {
     cursor: default;

package/scss/components/content-switcher/_content-switcher.scss

@@ -113,21 +113,36 @@
     }
   }
 
-  .#{$prefix}--content-switcher-btn:first-child {
+  .#{$prefix}--content-switcher:not(.#{$prefix}--content-switcher--icon-only)
+    .#{$prefix}--content-switcher-btn:first-child {
     border-left: rem(1px) solid $border-inverse;
     border-bottom-left-radius: rem(4px);
     border-top-left-radius: rem(4px);
+
+    &:disabled {
+      border-color: $border-disabled;
+      color: $text-disabled;
+    }
   }
 
-  .#{$prefix}--content-switcher-btn:last-child {
+  .#{$prefix}--content-switcher:not(.#{$prefix}--content-switcher--icon-only)
+    .#{$prefix}--content-switcher-btn:last-child {
     border-right: rem(1px) solid $border-inverse;
     border-bottom-right-radius: rem(4px);
     border-top-right-radius: rem(4px);
+
+    &:disabled {
+      border-color: $border-disabled;
+      color: $text-disabled;
+    }
   }
 
-  .#{$prefix}--content-switcher--selected,
-  .#{$prefix}--content-switcher--selected:first-child,
-  .#{$prefix}--content-switcher--selected:last-child {
+  .#{$prefix}--content-switcher
+    .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected,
+  .#{$prefix}--content-switcher
+    .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected:first-child,
+  .#{$prefix}--content-switcher
+    .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected:last-child {
     border: 0;
   }
 
@@ -142,7 +157,8 @@
     content: '';
   }
 
-  .#{$prefix}--content-switcher-btn:first-of-type::before {
+  .#{$prefix}--content-switcher:not(.#{$prefix}--content-switcher--icon-only)
+    .#{$prefix}--content-switcher-btn:first-of-type::before {
     display: none;
   }
 
@@ -218,4 +234,119 @@
   .#{$prefix}--content-switcher-btn:focus {
     @include high-contrast-mode('focus');
   }
+
+  // Icon Only overrides
+  .#{$prefix}--content-switcher--icon-only {
+    justify-content: flex-start;
+  }
+
+  .#{$prefix}--content-switcher--icon-only
+    .#{$prefix}--content-switcher-popover__wrapper:first-child
+    .#{$prefix}--content-switcher-btn {
+    border-left: rem(1px) solid $border-inverse;
+    border-bottom-left-radius: rem(4px);
+    border-top-left-radius: rem(4px);
+  }
+
+  .#{$prefix}--content-switcher--icon-only
+    .#{$prefix}--content-switcher-popover__wrapper:first-child
+    .#{$prefix}--content-switcher--selected[disabled],
+  .#{$prefix}--content-switcher--icon-only
+    .#{$prefix}--content-switcher-popover__wrapper:last-child
+    .#{$prefix}--content-switcher--selected[disabled] {
+    border-color: $layer-selected-disabled;
+  }
+
+  .#{$prefix}--content-switcher--icon-only
+    .#{$prefix}--content-switcher-popover__wrapper:last-child
+    .#{$prefix}--content-switcher-btn {
+    border-right: rem(1px) solid $border-inverse;
+    border-bottom-right-radius: rem(4px);
+    border-top-right-radius: rem(4px);
+  }
+
+  .#{$prefix}--content-switcher--icon-only
+    .#{$prefix}--content-switcher-popover__wrapper:last-child
+    .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected,
+  .#{$prefix}--content-switcher--icon-only
+    .#{$prefix}--content-switcher-popover__wrapper:first-child
+    .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected {
+    border-color: $background;
+  }
+
+  .#{$prefix}--content-switcher--lg .#{$prefix}--content-switcher-btn {
+    // accounts for the larger icon sizes to keep the switcher at 48px
+    padding-right: rem(14px);
+    padding-left: rem(14px);
+  }
+
+  .#{$prefix}--content-switcher--lg .#{$prefix}--content-switcher-btn svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  .#{$prefix}--content-switcher--icon-only
+    .#{$prefix}--content-switcher-btn
+    svg {
+    fill: $icon-primary;
+  }
+
+  .#{$prefix}--content-switcher--icon-only
+    .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected
+    svg {
+    z-index: 1;
+    fill: $icon-inverse;
+  }
+
+  .#{$prefix}--content-switcher--icon-only.#{$prefix}--content-switcher--sm
+    .#{$prefix}--btn--sm {
+    height: 2rem;
+  }
+
+  // Subtle border overrides
+  .#{$prefix}--content-switcher--icon-only
+    .#{$prefix}--content-switcher-popover__wrapper:first-of-type
+    .#{$prefix}--content-switcher-btn::before {
+    display: none;
+  }
+
+  .#{$prefix}--content-switcher-btn:focus::before,
+  .#{$prefix}--content-switcher-popover__wrapper:focus-within
+    + .#{$prefix}--content-switcher-popover__wrapper
+    .#{$prefix}--content-switcher-btn::before,
+  .#{$prefix}--content-switcher-btn:hover::before,
+  .#{$prefix}--content-switcher-popover__wrapper:not(.#{$prefix}--content-switcher-popover--disabled):hover
+    + .#{$prefix}--content-switcher-popover__wrapper
+    .#{$prefix}--content-switcher-btn::before,
+  .#{$prefix}--content-switcher--selected::before,
+  .#{$prefix}--content-switcher-popover--selected
+    + .#{$prefix}--content-switcher-popover__wrapper
+    .#{$prefix}--content-switcher-btn::before {
+    background-color: transparent;
+  }
+
+  .#{$prefix}--content-switcher--icon-only
+    .#{$prefix}--content-switcher-btn[disabled] {
+    border-color: $border-inverse;
+  }
+
+  .#{$prefix}--content-switcher--icon-only
+    .#{$prefix}--content-switcher-btn[disabled]
+    svg {
+    fill: $icon-disabled;
+  }
+
+  .#{$prefix}--content-switcher--icon-only
+    .#{$prefix}--content-switcher-btn[disabled]:not(.#{$prefix}--content-switcher--selected):hover,
+  .#{$prefix}--content-switcher--icon-only
+    .#{$prefix}--content-switcher-popover--selected
+    + .#{$prefix}--content-switcher-popover--disabled
+    .#{$prefix}--content-switcher-btn[disabled]:hover::before {
+    background-color: transparent;
+  }
+
+  .#{$prefix}--content-switcher--icon-only
+    .#{$prefix}--content-switcher-btn[disabled]:hover::before {
+    background-color: $border-subtle;
+  }
 }

package/scss/components/date-picker/_date-picker.scss

@@ -213,6 +213,7 @@
 
   // readonly
   .#{$prefix}--date-picker__input[readonly] {
+    border-bottom-color: $border-subtle;
     background: transparent;
     cursor: text;
   }

package/scss/components/dropdown/_dropdown.scss

@@ -477,6 +477,7 @@
   // readonly
   .#{$prefix}--dropdown--readonly,
   .#{$prefix}--dropdown--readonly:hover {
+    border-bottom-color: $border-subtle;
     background-color: transparent;
   }
 

package/scss/components/fluid-date-picker/_fluid-date-picker.scss

@@ -360,4 +360,21 @@
     .#{$prefix}--date-picker__icon {
     bottom: $spacing-03;
   }
+
+  // Readonly
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--readonly:not(.#{$prefix}--date-picker--fluid--invalid):not(.#{$prefix}--date-picker--fluid--warn)
+    .#{$prefix}--date-picker
+    > .#{$prefix}--date-picker-container,
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--readonly:not(.#{$prefix}--date-picker--fluid--invalid):not(.#{$prefix}--date-picker--fluid--warn)
+    .#{$prefix}--date-picker
+    .#{$prefix}--date-picker__input {
+    border-bottom-color: $border-subtle;
+  }
+
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--readonly:not(.#{$prefix}--date-picker--fluid--invalid):not(.#{$prefix}--date-picker--fluid--warn)
+    .#{$prefix}--date-picker--range
+    > .#{$prefix}--date-picker-container:last-child
+    .#{$prefix}--date-picker__input {
+    border-left-color: $border-subtle;
+  }
 }

package/scss/components/list-box/_list-box.scss

@@ -516,10 +516,12 @@ $list-box-menu-width: rem(300px);
   .#{$prefix}--list-box
     .#{$prefix}--list-box__field[aria-expanded='false']
     + .#{$prefix}--list-box__menu {
+    display: none;
     max-height: 0;
   }
 
   .#{$prefix}--list-box--expanded .#{$prefix}--list-box__menu {
+    display: block;
     // 40px item height * 5.5 items shown
     max-height: rem(220px);
   }

package/scss/components/modal/_modal.scss

@@ -222,6 +222,8 @@
   .#{$prefix}--modal-header__heading {
     @include type-style('heading-03');
 
+    // padding should take into account the left and right padding of modal container
+    padding-right: calc(20% - $spacing-09);
     color: $text-primary;
   }
 

package/scss/components/multiselect/_multiselect.scss

@@ -119,6 +119,7 @@
 
   .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly,
   .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly:hover {
+    border-bottom-color: $border-subtle;
     background-color: transparent;
   }
 

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

@@ -198,12 +198,10 @@
     input[type='number']:focus
     ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn {
-    border-bottom-width: 0;
+    border-bottom-color: transparent;
 
     &:hover {
       @include focus-outline('outline');
-
-      border: 0;
     }
   }
 
@@ -211,7 +209,7 @@
     input[type='number'][data-invalid]
     ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn {
-    border-bottom-width: 0;
+    border-bottom-color: transparent;
   }
 
   // add invalid outline to number controls only when invalid input is not focused
@@ -437,6 +435,7 @@
 
   // Readonly
   .#{$prefix}--number--readonly input[type='number'] {
+    border-bottom-color: $border-subtle;
     background: transparent;
   }
 

package/scss/components/select/_select.scss

@@ -254,6 +254,7 @@
 
   // readonly
   .#{$prefix}--select--readonly .#{$prefix}--select-input {
+    border-bottom-color: $border-subtle;
     background-color: transparent;
     cursor: default;
   }

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

@@ -81,24 +81,52 @@
 
   .#{$prefix}--structured-list-row {
     display: table-row;
-    border-bottom: 1px solid $border-subtle;
+    border-top: 1px solid $border-subtle;
     transition: background-color motion.$duration-fast-02
       motion.motion(standard, productive);
   }
 
+  .#{$prefix}--structured-list-tbody
+    .#{$prefix}--structured-list-row:last-child {
+    border-bottom: 1px solid $border-subtle;
+  }
+
+  .#{$prefix}--structured-list-row--header-row {
+    border: none;
+  }
+
   .#{$prefix}--structured-list--selection
     .#{$prefix}--structured-list-row:hover:not(.#{$prefix}--structured-list-row--header-row):not(.#{$prefix}--structured-list-row--selected) {
-    border-bottom: 1px solid $background-hover;
-    background-color: $background-hover;
+    border-color: $layer-hover;
+    background-color: $layer-hover;
     cursor: pointer;
   }
 
-  .#{$prefix}--structured-list-row.#{$prefix}--structured-list-row--selected {
-    background-color: $background-selected;
+  .#{$prefix}--structured-list--selection
+    .#{$prefix}--structured-list-row:hover:not(.#{$prefix}--structured-list-row--header-row):not(.#{$prefix}--structured-list-row--selected)
+    + .#{$prefix}--structured-list-row {
+    border-color: $layer-hover;
+  }
+
+  .#{$prefix}--structured-list--selection
+    .#{$prefix}--structured-list-row.#{$prefix}--structured-list-row--selected {
+    border-color: $layer-selected;
+    background-color: $layer-selected;
+  }
+
+  .#{$prefix}--structured-list--selection
+    .#{$prefix}--structured-list-row--selected
+    + .#{$prefix}--structured-list-row {
+    border-color: $layer-selected;
+  }
+
+  .#{$prefix}--structured-list--selection
+    .#{$prefix}--structured-list-row.#{$prefix}--structured-list-row--selected
+    .#{$prefix}--structured-list-td {
+    color: $text-primary;
   }
 
   .#{$prefix}--structured-list-row.#{$prefix}--structured-list-row--header-row {
-    border-bottom: 1px solid $background-selected;
     cursor: inherit;
   }
 
@@ -110,19 +138,10 @@
   .#{$prefix}--structured-list--selection
     .#{$prefix}--structured-list-row:hover:not(.#{$prefix}--structured-list-row--header-row)
     > .#{$prefix}--structured-list-td,
-  .#{$prefix}--structured-list-row.#{$prefix}--structured-list-row--selected
-    > .#{$prefix}--structured-list-td {
-    color: $text-primary;
-  }
-
   .#{$prefix}--structured-list--selection
-    .#{$prefix}--structured-list-row:hover:not(.#{$prefix}--structured-list-row--header-row)
+    .#{$prefix}--structured-list-row.#{$prefix}--structured-list-row--selected
     > .#{$prefix}--structured-list-td {
-    @if enabled('enable-v11-release') {
-      border-top: 1px solid $border-subtle;
-    } @else {
-      border-top: 1px solid $layer;
-    }
+    color: $text-primary;
   }
 
   .#{$prefix}--structured-list-thead {
@@ -158,9 +177,6 @@
     display: table-cell;
     max-width: 36rem;
     color: $text-secondary;
-    @if enabled('enable-v11-release') {
-      border-top: 1px solid $border-subtle;
-    }
 
     transition: color motion.$duration-fast-02
       motion.motion(standard, productive);

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

@@ -112,6 +112,7 @@
   // Readonly
   //-----------------------------
   .#{$prefix}--text-area__wrapper--readonly .#{$prefix}--text-area {
+    border-bottom-color: $border-subtle;
     background: transparent;
   }
 

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

@@ -415,6 +415,7 @@
 
   .#{$prefix}--form--fluid .#{$prefix}--text-input-wrapper--readonly,
   .#{$prefix}--text-input-wrapper--readonly .#{$prefix}--text-input {
+    border-bottom-color: $border-subtle;
     background: transparent;
   }
 

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

@@ -91,10 +91,12 @@
 
   // readonly
   .#{$prefix}--time-picker--readonly .#{$prefix}--time-picker__input-field {
+    border-bottom-color: $border-subtle;
     background-color: transparent;
   }
 
   .#{$prefix}--time-picker--readonly .#{$prefix}--select-input {
+    border-bottom-color: $border-subtle;
     background-color: transparent;
     cursor: default;
   }

package/scss/layer/_layer-sets.scss

@@ -60,6 +60,7 @@ $-default-layer-sets: (
     theme.$field-hover-03,
   ),
   border-subtle: (
+    theme.$border-subtle-00,
     theme.$border-subtle-01,
     theme.$border-subtle-02,
     theme.$border-subtle-03,