From e255ce19e2e380486ee4d15b2b268d74be4440a4 Mon Sep 17 00:00:00 2001 From: Cole Horvitz Date: Fri, 19 May 2023 23:08:11 +0000 Subject: [PATCH] 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 Reviewed-by: John Lee Commit-Queue: Cole Horvitz Cr-Commit-Position: refs/heads/main@{#1146764} --- .../bookmarks/power_bookmark_row.html | 2 +- .../side_panel/shared/sp_shared_style.css | 5 - .../signin/profile_picker/profile_card.html | 5 + .../webui_gallery/demos/cr_input/index.html | 2 +- chrome/browser/ui/color/chrome_color_id.h | 1 - .../color/material_side_panel_color_mixer.cc | 2 - ui/color/color_id.h | 6 + ui/color/material_ui_color_mixer.cc | 8 ++ .../cr_elements/cr_input/cr_input.html | 60 +++++++--- .../cr_elements/cr_input/cr_input_style.css | 103 +++++++++++++++++- .../resources/cr_elements/cr_shared_vars.css | 3 + 11 files changed, 168 insertions(+), 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 index 3573c177de48af..a5745dad896c6c 100644 --- 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; } diff --git a/chrome/browser/resources/side_panel/shared/sp_shared_style.css b/chrome/browser/resources/side_panel/shared/sp_shared_style.css index f6cd51fd8fc656..9259541f88f6fc 100644 --- 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 index 81e78f36d73229..71cfcdc8ea1394 100644 --- 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 index 831f5a2171e9eb..6a4ef4a926f2bd 100644 --- 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 @@ - + cr-input demo diff --git a/chrome/browser/ui/color/chrome_color_id.h b/chrome/browser/ui/color/chrome_color_id.h index bb72856b0b0ac1..33b8ad32e8983d 100644 --- 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 index fb74500e3cb7de..c199667b3d3f21 100644 --- 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 index bec6ee84fd3766..112fccec57bdeb 100644 --- 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 index 654f0f25df94bc..2cc1c354e4fa8d 100644 --- 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 index f74ae4986a6a87..79571534b6b5a0 100644 --- 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 and 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 @@
- - - - +
+
+ + + + +
+
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 index 33e67a5bf5fb09..69f29e317e87ac 100644 --- 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 index 70ce36bc012a67..34f88acc66f3e3 100644 --- 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);