CR2023: Update filled cr-input styles.

This replaces the former default style for cr-input. This also removes the hover state that was implemented on cr-input in side panel, since this case is covered by the new default behavior. Additionally updates the cr-input used on profile-picker's profile-card. This usage looked incorrect with the new style, so updated the styling to look as it did before. There may be other instances of custom cr-inputs which do not look correct under the CR2023 flag. Bug: 1400860 Change-Id: I266d2bd39ca1db6e9efbfca1721f87ef0909bf42 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4514181 Code-Coverage: Findit <findit-for-me@appspot.gserviceaccount.com> Reviewed-by: John Lee <johntlee@chromium.org> Commit-Queue: Cole Horvitz <colehorvitz@chromium.org> Cr-Commit-Position: refs/heads/main@{#1146764}
chromium · May 19, 2023 · e255ce1 · e255ce1
1 parent 9916bc0
commit e255ce1
Show file tree

Hide file tree

Showing 11 changed files with 168 additions and 29 deletions.
diff --git a/chrome/browser/resources/side_panel/bookmarks/power_bookmark_row.html b/chrome/browser/resources/side_panel/bookmarks/power_bookmark_row.html
@@ -34,7 +34,7 @@
   }
 
   :host-context([chrome-refresh-2023]) .sp-labelless-input:hover {
-    --cr-input-background-color: transparent;
+    --cr-input-hover-background-color: transparent;
   }
 </style>
 

diff --git a/chrome/browser/resources/side_panel/shared/sp_shared_style.css b/chrome/browser/resources/side_panel/shared/sp_shared_style.css
@@ -87,11 +87,6 @@
   --cr-input-padding-top: 8px;
 }
 
-:host-context([chrome-refresh-2023]) .sp-labelless-input:hover {
-  --cr-input-background-color:
-      var(--color-side-panel-textfield-background-hover);
-}
-
 .sp-icon-buttons-row {
   align-items: center;
   display: grid;

diff --git a/chrome/browser/resources/signin/profile_picker/profile_card.html b/chrome/browser/resources/signin/profile_picker/profile_card.html
@@ -80,6 +80,11 @@
     top: 0;
   }
 
+  :host-context([chrome-refresh-2023]) cr-input {
+    --cr-input-hover-background-color: transparent;
+    --cr-input-border-bottom: none;
+  }
+
   #hoverUnderline {
     border-bottom: 2px solid var(--google-grey-300);
     border-radius: 0;

diff --git a/chrome/browser/resources/webui_gallery/demos/cr_input/index.html b/chrome/browser/resources/webui_gallery/demos/cr_input/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html>
+<html $i18n{chromeRefresh2023Attribute}>
   <head>
     <meta charset="utf-8">
     <title>cr-input demo</title>

diff --git a/chrome/browser/ui/color/chrome_color_id.h b/chrome/browser/ui/color/chrome_color_id.h
@@ -366,7 +366,6 @@
   E_CPONLY(kColorSidePanelFilterChipBackgroundHover) \
   E_CPONLY(kColorSidePanelFilterChipBackgroundSelected) \
   E_CPONLY(kColorSidePanelScrollbarThumb) \
-  E_CPONLY(kColorSidePanelTextfieldBackgroundHover) \
   E_CPONLY(kColorSidePanelTextfieldBorder) \
   /* Status bubble colors. */ \
   E_CPONLY(kColorStatusBubbleBackgroundFrameActive) \

diff --git a/chrome/browser/ui/color/material_side_panel_color_mixer.cc b/chrome/browser/ui/color/material_side_panel_color_mixer.cc
@@ -42,8 +42,6 @@ void AddMaterialSidePanelColorMixer(ui::ColorProvider* provider,
   mixer[kColorSidePanelFilterChipBackgroundSelected] = {
       ui::kColorSysTonalContainer};
 
-  mixer[kColorSidePanelTextfieldBackgroundHover] = {
-      ui::kColorSysStateHoverOnSubtle};
   mixer[kColorSidePanelTextfieldBorder] = {ui::kColorSysNeutralOutline};
 
   /* Customize Chrome */

diff --git a/ui/color/color_id.h b/ui/color/color_id.h
@@ -402,8 +402,14 @@
   E_CPONLY(kColorSuggestionChipIcon) \
   E_CPONLY(kColorTextfieldBackground) \
   E_CPONLY(kColorTextfieldBackgroundDisabled) \
+  E_CPONLY(kColorTextfieldFilledBackground) \
+  E_CPONLY(kColorTextfieldFilledForegroundInvalid) \
+  E_CPONLY(kColorTextfieldFilledUnderline) \
+  E_CPONLY(kColorTextfieldFilledUnderlineFocused) \
   E_CPONLY(kColorTextfieldForeground) \
   E_CPONLY(kColorTextfieldForegroundDisabled) \
+  E_CPONLY(kColorTextfieldForegroundIcon) \
+  E_CPONLY(kColorTextfieldForegroundLabel) \
   E_CPONLY(kColorTextfieldForegroundPlaceholderInvalid) \
   E_CPONLY(kColorTextfieldForegroundPlaceholder) \
   E_CPONLY(kColorTextfieldSelectionBackground) \

diff --git a/ui/color/material_ui_color_mixer.cc b/ui/color/material_ui_color_mixer.cc
@@ -82,14 +82,22 @@ void AddMaterialUiColorMixer(ColorProvider* provider,
   mixer[kColorSliderTrackMinimal] = {kColorSysOnSecondary};
   mixer[kColorSuggestionChipBorder] = {kColorSysTonalOutline};
   mixer[kColorSuggestionChipIcon] = {kColorSysPrimary};
+  // TODO(colehorvitz): Rename textfield color IDs to specify which
+  // textfield variation they are used for ('filled' or 'stroked').
   mixer[kColorTextfieldBackground] = {kColorSysSurface};
   mixer[kColorTextfieldBackgroundDisabled] = {GetResultingPaintColor(
       {kColorSysStateDisabledContainer}, {kColorTextfieldBackground})};
+  mixer[kColorTextfieldFilledUnderline] = {kColorSysOutline};
+  mixer[kColorTextfieldFilledUnderlineFocused] = {kColorSysPrimary};
+  mixer[kColorTextfieldFilledBackground] = {kColorSysSurfaceVariant};
+  mixer[kColorTextfieldFilledForegroundInvalid] = {kColorSysError};
   mixer[kColorTextfieldForeground] = {kColorSysOnSurface};
   mixer[kColorTextfieldForegroundPlaceholderInvalid] = {
       BlendForMinContrast(kColorSysError, kColorTextfieldBackground)};
   mixer[kColorTextfieldForegroundDisabled] = {kColorSysStateDisabled};
+  mixer[kColorTextfieldForegroundLabel] = {kColorSysOnSurfaceSubtle};
   mixer[kColorTextfieldForegroundPlaceholder] = {kColorSysOnSurfaceSubtle};
+  mixer[kColorTextfieldForegroundIcon] = {kColorSysOnSurfaceSubtle};
   mixer[kColorTextfieldOutline] = {kColorSysNeutralOutline};
   mixer[kColorTextfieldDisabledOutline] = {SK_ColorTRANSPARENT};
   mixer[kColorTextfieldInvalidOutline] = {

diff --git a/ui/webui/resources/cr_elements/cr_input/cr_input.html b/ui/webui/resources/cr_elements/cr_input/cr_input.html
@@ -31,6 +31,11 @@
         pointer-events: none;
       }
 
+      :host-context([chrome-refresh-2023]):host([disabled])
+          :is(#label, #error, #input-container) {
+        opacity: 1;
+      }
+
       /* Margin between <input> and <cr-button> in the 'suffix' slot */
       :host ::slotted(cr-button[slot=suffix]) {
         margin-inline-start: var(--cr-button-edge-spacing) !important;
@@ -45,6 +50,10 @@
         letter-spacing: var(--cr-input-letter-spacing);
       }
 
+      :host-context([chrome-refresh-2023]) #input {
+        border-bottom: none;
+      }
+
       :host-context([chrome-refresh-2023]) #input-container {
         border: var(--cr-input-border, none);
       }
@@ -90,12 +99,18 @@
         white-space: var(--cr-input-error-white-space);
       }
 
+      :host-context([chrome-refresh-2023]) #error {
+        font-size: 11px;
+        line-height: 16px;
+        margin: 4px 10px;
+      }
+
       :host([invalid]) #error {
         visibility: visible;
       }
 
       #row-container,
-      #inner-input-container {
+      #inner-input-content {
         align-items: center;
         display: flex;
         /* This will spread the input field and the suffix apart only if the
@@ -104,6 +119,11 @@
         position: relative;
       }
 
+      :host-context([chrome-refresh-2023]) #inner-input-content {
+        /* Ensures content sits above the hover layer */
+        z-index: 1;
+      }
+
       #input[type='search']::-webkit-search-cancel-button {
         display: none;
       }
@@ -123,24 +143,28 @@
     <div id="row-container" part="row-container">
       <div id="input-container">
         <div id="inner-input-container">
-          <slot name="inline-prefix"></slot>
-          <!-- Only attributes that are named inconsistently between html and js
-              need to use attr$="", such as |readonly| vs .readOnly. -->
-          <input id="input" disabled="[[disabled]]" autofocus="[[autofocus]]"
-              value="{{value::input}}" tabindex$="[[inputTabindex]]"
-              type="[[type]]"
-              readonly$="[[readonly]]" maxlength$="[[maxlength]]"
-              pattern$="[[pattern]]" required="[[required]]"
-              minlength$="[[minlength]]" inputmode$="[[inputmode]]"
-              aria-description$="[[ariaDescription]]"
-              aria-label$="[[getAriaLabel_(ariaLabel, label, placeholder)]]"
-              aria-invalid$="[[getAriaInvalid_(invalid)]]"
-              max="[[max]]" min="[[min]]" on-focus="onInputFocus_"
-              on-blur="onInputBlur_" on-change="onInputChange_"
-              part="input"
-              autocomplete="off">
-          <slot name="inline-suffix"></slot>
+          <div id="hover-layer"></div>
+          <div id="inner-input-content">
+            <slot name="inline-prefix"></slot>
+            <!-- Only attributes that are named inconsistently between html and js
+                need to use attr$="", such as |readonly| vs .readOnly. -->
+            <input id="input" disabled="[[disabled]]" autofocus="[[autofocus]]"
+                value="{{value::input}}" tabindex$="[[inputTabindex]]"
+                type="[[type]]"
+                readonly$="[[readonly]]" maxlength$="[[maxlength]]"
+                pattern$="[[pattern]]" required="[[required]]"
+                minlength$="[[minlength]]" inputmode$="[[inputmode]]"
+                aria-description$="[[ariaDescription]]"
+                aria-label$="[[getAriaLabel_(ariaLabel, label, placeholder)]]"
+                aria-invalid$="[[getAriaInvalid_(invalid)]]"
+                max="[[max]]" min="[[min]]" on-focus="onInputFocus_"
+                on-blur="onInputBlur_" on-change="onInputChange_"
+                part="input"
+                autocomplete="off">
+            <slot name="inline-suffix"></slot>
+          </div>
         </div>
+        <div id="underline-base"></div>
         <div id="underline"></div>
       </div>
       <slot name="suffix"></slot>

diff --git a/ui/webui/resources/cr_elements/cr_input/cr_input_style.css b/ui/webui/resources/cr_elements/cr_input/cr_input_style.css
@@ -18,6 +18,29 @@
         outline: none;
       }
 
+      :host-context([chrome-refresh-2023]):host {
+        --cr-input-background-color: var(--color-textfield-filled-background,
+            var(--cr-fallback-color-surface-variant));
+        --cr-input-border-bottom: 1px solid
+            var(--color-textfield-filled-underline,
+                var(--cr-fallback-color-outline));
+        --cr-input-border-radius: 8px 8px 0 0;
+        --cr-input-error-color: var(--color-textfield-filled-error,
+            var(--cr-fallback-color-error));
+        --cr-input-focus-color: var(--color-textfield-filled-underline-focused,
+            var(--cr-fallback-color-primary));
+        --cr-input-hover-background-color: var(--cr-hover-background-color);
+        --cr-input-padding-bottom: 10px;
+        --cr-input-padding-top: 10px;
+        --cr-input-placeholder-color:
+            var(--color-textfield-foreground-placeholder,
+                var(--cr-fallback-on-surface-subtle));
+      }
+
+      :host-context([chrome-refresh-2023]):host([readonly]) {
+        --cr-input-border-radius: 8px 8px;
+      }
+
       @media (prefers-color-scheme: dark) {
         :host {
           --cr-input-background-color: rgba(0, 0, 0, .3);
@@ -26,10 +49,17 @@
         }
       }
 
-      :host([focused_]:not([readonly]):not([invalid])) #label {
+      :host-context(html:not([chrome-refresh-2023])):host([focused_]:not([readonly]):not([invalid]))
+          #label {
         color: var(--cr-input-focus-color);
       }
 
+      :host-context([chrome-refresh-2023]) #label {
+        color: var(--color-textfield-foreground-label,
+            var(--cr-fallback-color-on-surface-subtle));
+        font-size: 11px;
+      }
+
       /* Input styling below. */
       #input-container {
         border-radius: var(--cr-input-border-radius, 4px);
@@ -44,6 +74,36 @@
         padding: 0;
       }
 
+      :host-context([chrome-refresh-2023]) #inner-input-content ::slotted(*) {
+        --cr-icon-button-fill-color: var(--color-textfield-foreground-icon,
+            var(--cr-fallback-color-on-surface-subtle));
+        --cr-icon-color: var(--color-textfield-foreground-icon,
+            var(--cr-fallback-color-on-surface-subtle));
+      }
+
+      :host-context([chrome-refresh-2023]):host([invalid])
+          #inner-input-content ::slotted(*) {
+        --cr-icon-color: var(--cr-input-error-color);
+        --cr-icon-button-fill-color: var(--cr-input-error-color);
+      }
+
+      #hover-layer {
+        display: none;
+      }
+
+      :host-context([chrome-refresh-2023]) #hover-layer {
+        background-color: var(--cr-input-hover-background-color);
+        inset: 0;
+        pointer-events: none;
+        position: absolute;
+        z-index: 0;
+      }
+
+      :host-context([chrome-refresh-2023]):host(:not([readonly]))
+          #input-container:hover #hover-layer {
+        display: block;
+      }
+
       #input {
         -webkit-appearance: none;
         /* Transparent, #inner-input-container will apply background. */
@@ -77,6 +137,11 @@
         width: 100%;
       }
 
+      :host-context([chrome-refresh-2023]) #input {
+        font-size: 12px;
+        line-height: 16px;
+      }
+
       /* Underline styling below. */
       #underline {
         border-bottom: 2px solid var(--cr-input-focus-color);
@@ -101,3 +166,39 @@
         transition: opacity 120ms ease-in, width 180ms ease-out;
         width: 100%;
       }
+
+      #underline-base {
+        display: none;
+      }
+
+      :host-context([chrome-refresh-2023]):host([readonly]) #underline {
+        display: none;
+      }
+
+      :host-context([chrome-refresh-2023]):host(:not([readonly]))
+          #underline-base {
+        border-bottom: var(--cr-input-border-bottom);
+        bottom: 0;
+        display: block;
+        left: 0;
+        position: absolute;
+        right: 0;
+      }
+
+      :host-context([chrome-refresh-2023]):host([disabled]) {
+        color: var(--color-textfield-foreground-disabled,
+              rgba(var(--cr-fallback-color-on-surface-rgb),
+                  var(--cr-disabled-opacity)));
+        --cr-input-border-bottom: 1px solid currentColor;
+        --cr-input-placeholder-color: currentColor;
+        --cr-input-color: currentColor;
+        --cr-input-background-color: var(--color-textfield-background-disabled,
+            rgba(var(--cr-fallback-color-on-surface-rgb), .12));
+      }
+
+      :host-context([chrome-refresh-2023]):host([disabled])
+          #inner-input-content ::slotted(*) {
+        --cr-icon-color: currentColor;
+        --cr-icon-button-fill-color: currentColor;
+      }
+
diff --git a/ui/webui/resources/cr_elements/cr_shared_vars.css b/ui/webui/resources/cr_elements/cr_shared_vars.css
@@ -275,6 +275,8 @@ html[chrome-refresh-2023] {
 
   --cr-fallback-color-tonal-outline: rgb(168, 199, 250);
 
+  --cr-fallback-color-error: rgb(179, 38, 30);
+
   --cr-fallback-color-state-on-subtle-rgb: 31, 31, 31;
   --cr-fallback-color-state-hover-on-subtle: rgba(
       var(--cr-fallback-color-state-on-subtle-rgb), .06);
@@ -321,6 +323,7 @@ html[chrome-refresh-2023] {
     --cr-fallback-color-tonal-container: rgb(0, 74, 119);
     --cr-fallback-color-on-tonal-container: rgb(194, 231, 255);
     --cr-fallback-color-tonal-outline: rgb(0, 99, 155);
+    --cr-fallback-color-error: rgb(242, 184, 181);
     --cr-fallback-color-state-on-subtle-rgb: 253, 252, 251;
     --cr-fallback-color-state-hover-on-subtle: rgba(
         var(--cr-fallback-color-state-on-subtle-rgb), .10);