CR2023: Update cr-checkbox color IDs.

Bug: 1400863
Change-Id: Id19d16ba9a36db32a30fffa1c49db7ea3f513c51
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4265676
Reviewed-by: John Lee <johntlee@chromium.org>
Commit-Queue: Cole Horvitz <colehorvitz@chromium.org>
Reviewed-by: Thomas Lukaszewicz <tluk@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1108701}

ui/color/color_id.h

@@ -222,6 +222,10 @@
   E_CPONLY(kColorMultitaskFeedbackButtonLabelBackground) \
   E_CPONLY(kColorMultitaskFeedbackButtonLabelForeground) \
   E_CPONLY(kColorMultitaskMenuNudgePulse) \
+  E_CPONLY(kColorCheckboxBackgroundDisabled) \
+  E_CPONLY(kColorCheckboxForegroundChecked) \
+  E_CPONLY(kColorCheckboxForegroundDisabled) \
+  E_CPONLY(kColorCheckboxForegroundUnchecked) \
   E_CPONLY(kColorComboboxBackground) \
   E_CPONLY(kColorComboboxBackgroundDisabled) \
   E_CPONLY(kColorCustomFrameCaptionForeground) \

ui/color/material_ui_color_mixer.cc

@@ -38,6 +38,10 @@ void AddMaterialUiColorMixer(ColorProvider* provider,
   mixer[kColorButtonForegroundDisabled] = {kColorSysStateDisabled};
   mixer[kColorButtonForegroundProminent] = {kColorSysOnPrimary};
   mixer[kColorButtonForegroundUnchecked] = {kColorSysOnSurfaceVariant};
+  mixer[kColorCheckboxBackgroundDisabled] = {kColorSysStateDisabledContainer};
+  mixer[kColorCheckboxForegroundChecked] = {kColorSysOnSurfacePrimary};
+  mixer[kColorCheckboxForegroundDisabled] = {kColorSysStateDisabled};
+  mixer[kColorCheckboxForegroundUnchecked] = {kColorSysOnSurfaceVariant};
   mixer[kColorComboboxBackground] = {kColorSysSurface};
   mixer[kColorComboboxBackgroundDisabled] = {GetResultingPaintColor(
       {kColorSysStateDisabledContainer}, {kColorComboboxBackground})};

ui/color/ui_color_mixer.cc

@@ -54,6 +54,8 @@ void AddUiColorMixer(ColorProvider* provider,
       GetColorWithMaxContrast(kColorButtonBackgroundProminent);
   mixer[kColorButtonForegroundTonal] = {kColorSysOnPrimaryContainer};
   mixer[kColorButtonForegroundUnchecked] = {kColorSecondaryForeground};
+  mixer[kColorCheckboxForegroundUnchecked] = {kColorSecondaryForeground};
+  mixer[kColorCheckboxForegroundChecked] = {kColorButtonForeground};
   mixer[kColorMultitaskFeedbackButtonLabelBackground] = {
       dark_mode ? SetAlpha(SK_ColorWHITE, 0x1A)
                 : SetAlpha(SK_ColorBLACK, 0x0D)};

ui/views/controls/button/checkbox.cc

@@ -189,9 +189,10 @@ SkPath Checkbox::GetFocusRingPath() const {
 }
 
 SkColor Checkbox::GetIconImageColor(int icon_state) const {
-  SkColor active_color = GetColorProvider()->GetColor(
-      (icon_state & IconState::CHECKED) ? ui::kColorButtonForegroundChecked
-                                        : ui::kColorButtonForegroundUnchecked);
+  SkColor active_color =
+      GetColorProvider()->GetColor((icon_state & IconState::CHECKED)
+                                       ? ui::kColorCheckboxForegroundChecked
+                                       : ui::kColorCheckboxForegroundUnchecked);
 
   // TODO(crbug.com/1394575): Remove block and update the above ColorIds
   if (features::IsChromeRefresh2023()) {

ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.html

@@ -41,9 +41,9 @@
 
       :host-context([chrome-refresh-2023]):host {
         --cr-checkbox-ripple-size: 32px;
-        --cr-checkbox-checked-box-color: var(--color-button-foreground-checked,
+        --cr-checkbox-checked-box-color: var(--color-checkbox-foreground-checked,
             var(--cr-fallback-color-primary));
-        --cr-checkbox-unchecked-box-color: var(--color-button-foreground-unchecked,
+        --cr-checkbox-unchecked-box-color: var(--color-checkbox-foreground-unchecked,
             var(--cr-fallback-color-on-surface-variant));
         --cr-checkbox-ripple-checked-color: var(--cr-active-background-color);
         --cr-checkbox-ripple-unchecked-color: var(--cr-active-background-color);
@@ -58,9 +58,11 @@
 
       :host-context([chrome-refresh-2023]):host([disabled]) {
         opacity: 1;
-        --cr-checkbox-checked-box-color: var(--color-button-foreground-disabled,
-            rgba(var(--cr-fallback-color-on-surface-rgb), var(--cr-disabled-opacity)));
-        --cr-checkbox-unchecked-box-color: var(--color-button-foreground-disabled,
+        --cr-checkbox-checked-box-color: var(--color-checkbox-background-disabled,
+            rgba(var(--cr-fallback-color-on-surface-rgb), .12));
+        --cr-checkbox-unchecked-box-color: var(--color-checkbox-background-disabled,
+            rgba(var(--cr-fallback-color-on-surface-rgb), .12));
+        --cr-checkbox-mark-color: var(--color-checkbox-foreground-disabled,
             rgba(var(--cr-fallback-color-on-surface-rgb), var(--cr-disabled-opacity)));
       }