[Switch Access] Update focus ring colors

Per the bug filed by our UX designer, change the colors of the Switch
Access focus rings. Note that these colors do not change, regardless of
whether the device is in dark or light mode.

Bug: 1152610
Change-Id: I4884b30d8a8cddaf3f0da3fb52276587a5ec8ef2
AX-Relnotes: Changes the colors of the Switch Access focus rings.
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2623170
Commit-Queue: Anastasia Helfinstein <anastasi@google.com>
Reviewed-by: Josiah Krutz <josiahk@google.com>
Reviewed-by: James Cook <jamescook@chromium.org>
Cr-Commit-Position: refs/heads/master@{#843938}

ash/style/ash_color_provider.cc

@@ -234,7 +234,6 @@ SkColor AshColorProvider::GetContentLayerColor(ContentLayerType type) const {
     case ContentLayerType::kButtonLabelColorBlue:
     case ContentLayerType::kSliderColorActive:
     case ContentLayerType::kRadioColorActive:
-    case ContentLayerType::kSwitchAccessInnerStrokeColor:
     case ContentLayerType::kSwitchKnobColorActive:
       return is_dark_mode ? gfx::kGoogleBlue300 : gfx::kGoogleBlue600;
     case ContentLayerType::kSwitchTrackColorActive:
@@ -249,8 +248,10 @@ SkColor AshColorProvider::GetContentLayerColor(ContentLayerType type) const {
           GetContentLayerColor(ContentLayerType::kAppStateIndicatorColor));
     case ContentLayerType::kCurrentDeskColor:
       return is_dark_mode ? SK_ColorWHITE : SK_ColorBLACK;
+    case ContentLayerType::kSwitchAccessInnerStrokeColor:
+      return gfx::kGoogleBlue300;
     case ContentLayerType::kSwitchAccessOuterStrokeColor:
-      return is_dark_mode ? SK_ColorBLACK : SK_ColorWHITE;
+      return gfx::kGoogleBlue900;
     default:
       return ResolveColor(type, is_dark_mode);
   }

chrome/browser/resources/chromeos/accessibility/switch_access/focus_ring_manager.js

@@ -148,15 +148,15 @@ export class FocusRingManager {
       rects: [],
       type: chrome.accessibilityPrivate.FocusType.SOLID,
       color: SAConstants.Focus.PRIMARY_COLOR,
-      secondaryColor: SAConstants.Focus.SECONDARY_COLOR
+      secondaryColor: SAConstants.Focus.OUTER_COLOR
     };
 
     const previewRing = {
       id: SAConstants.Focus.ID.PREVIEW,
       rects: [],
       type: chrome.accessibilityPrivate.FocusType.DASHED,
-      color: SAConstants.Focus.PRIMARY_COLOR,
-      secondaryColor: SAConstants.Focus.SECONDARY_COLOR
+      color: SAConstants.Focus.PREVIEW_COLOR,
+      secondaryColor: SAConstants.Focus.OUTER_COLOR
     };
 
     return new Map([

chrome/browser/resources/chromeos/accessibility/switch_access/switch_access_constants.js

@@ -134,23 +134,28 @@ export const SAConstants = {
       PRIMARY: 'primary',
       // The ID for the ring showing a preview of the next focus, if the user
       // selects the current element.
-      PREVIEW: 'preview',
-      // The ID for the area where text is being input.
-      TEXT: 'text'
+      PREVIEW: 'preview'
     },
 
     /**
-     * The inner color of the focus rings.
+     * The inner color of the primary focus ring.
      * @type {string}
      * @const
      */
-    PRIMARY_COLOR: '#8AB4F8',
+    PRIMARY_COLOR: '#8AB4F8',  // Google Blue 300
+
+    /**
+     * The inner color of the preview focus ring
+     * @type {string}
+     * @const
+     */
+    PREVIEW_COLOR: '#8AB4F880',  // Google Blue 300, 50% opacity
 
     /**
      * The outer color of the focus rings.
      * @type {string}
      * @const
      */
-    SECONDARY_COLOR: '#000',
+    OUTER_COLOR: '#174EA6',  // Google Blue 900
   },
 };