[personalization] Add SVG to dynamic color buttons

Replace the placeholder svg with the actual SVG.

BUG=b:254481177
TEST=https://screenshot.googleplex.com/AjEbothEbDRZUdA

Change-Id: I564464806984220e256567fbf8a6daf6ba516e7f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3999811
Reviewed-by: Jeffrey Young <cowmoo@chromium.org>
Commit-Queue: Erica Lee <ericamlee@google.com>
Cr-Commit-Position: refs/heads/main@{#1067353}

ash/webui/personalization_app/resources/BUILD.gn

@@ -88,6 +88,7 @@ web_component_files = [
   "js/personalization_toast_element.ts",
   "js/personalization_breadcrumb_element.ts",
   "js/theme/personalization_theme_element.ts",
+  "js/theme/color_scheme_icon_svg_element.ts",
   "js/theme/dynamic_color_element.ts",
   "js/user/avatar_camera_element.ts",
   "js/user/avatar_list_element.ts",

ash/webui/personalization_app/resources/js/personalization_app.ts

@@ -27,6 +27,7 @@ import './personalization_test_api.js';
 import './personalization_toast_element.js';
 import './personalization_breadcrumb_element.js';
 import './personalization_main_element.js';
+import './theme/color_scheme_icon_svg_element.js';
 import './theme/personalization_theme_element.js';
 import './theme/dynamic_color_element.js';
 import './user/avatar_camera_element.js';
@@ -79,6 +80,7 @@ export {PersonalizationThemeElement} from './theme/personalization_theme_element
 export {PersonalizationToastElement} from './personalization_toast_element.js';
 export {setDarkModeEnabledAction, SetDarkModeEnabledAction, ThemeActionName, ThemeActions} from './theme/theme_actions.js';
 export {setThemeProviderForTesting} from './theme/theme_interface_provider.js';
+export {ColorSchemeIconSvgElement} from './theme/color_scheme_icon_svg_element.js';
 export {DynamicColorElement} from './theme/dynamic_color_element.js';
 export {ThemeObserver} from './theme/theme_observer.js';
 export {AvatarCamera, AvatarCameraMode} from './user/avatar_camera_element.js';

ash/webui/personalization_app/resources/js/theme/color_scheme_icon_svg_element.html

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
+    <path fill$="[[scheme.primaryColor]]" d="M0.000120163 24C0.000120742 10.7452 10.7453 -2.48674e-06 24.0001 -1.90735e-06C37.255 -1.32796e-06 48.0001 10.7452 48.0001 24L0.000120163 24Z"/>
+    <path fill$="[[scheme.secondaryColor]]" d="M24 48C37.2548 48 48.0001 37.2548 48.0001 24L24 24L24 48Z"/>
+    <path fill$="[[scheme.tertiaryColor]]" d="M0.000120163 24C0.000118997 37.3335 10.7451 48 24 48L24 24L0.000120163 24Z"/>
+</svg>

ash/webui/personalization_app/resources/js/theme/color_scheme_icon_svg_element.ts

@@ -0,0 +1,34 @@
+// Copyright 2022 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview This component is for the color scheme icon svg.
+ */
+
+import {WithPersonalizationStore} from '../personalization_store.js';
+
+import {getTemplate} from './color_scheme_icon_svg_element.html.js';
+import {DynamicColorScheme} from './dynamic_color_element.js';
+
+export class ColorSchemeIconSvgElement extends WithPersonalizationStore {
+  static get is() {
+    return 'color-scheme-icon-svg';
+  }
+
+  static get template() {
+    return getTemplate();
+  }
+
+  static get properties() {
+    return {
+      scheme_: {
+        type: Object,
+        readOnly: true,
+      },
+    };
+  }
+  private scheme_: DynamicColorScheme;
+}
+
+customElements.define(ColorSchemeIconSvgElement.is, ColorSchemeIconSvgElement);

ash/webui/personalization_app/resources/js/theme/dynamic_color_element.html

@@ -37,6 +37,7 @@
     width: 76px;
   }
 
+  color-scheme-icon-svg,
   svg {
     height: 48px;
     width: 48px;
@@ -56,10 +57,7 @@
     <template is="dom-if" if="[[automaticSeedColorEnabled]]">
       <template is="dom-repeat" items="[[schemes_]]" as="scheme">
         <cr-button>
-          <!-- TODO(b/254481177): Replace with the real SVG. -->
-          <svg>
-            <circle style$="fill: [[scheme.primaryColor]]" cx="24" cy="24" r="24"></circle>
-          </svg>
+          <color-scheme-icon-svg scheme="[[scheme]]"></color-scheme-icon-svg>
         </cr-button>
       </template>
     </template>

ash/webui/personalization_app/resources/js/theme/dynamic_color_element.ts

@@ -13,6 +13,13 @@ import {WithPersonalizationStore} from '../personalization_store.js';
 
 import {getTemplate} from './dynamic_color_element.html.js';
 
+export interface DynamicColorScheme {
+  id: string;
+  primaryColor: string;
+  secondaryColor: string;
+  tertiaryColor: string;
+}
+
 export class DynamicColorElement extends WithPersonalizationStore {
   static get is() {
     return 'dynamic-color';
@@ -45,20 +52,43 @@ export class DynamicColorElement extends WithPersonalizationStore {
       schemes_: {
         type: Object,
         readOnly: true,
-        value: [
-          // TODO(254479725): Replace with colors fetched from the backend.
-          {id: 'tonal', primaryColor: 'var(--google-blue-500)'},
-          {id: 'neutral', primaryColor: 'var(--google-red-500)'},
-          {id: 'vibrant', primaryColor: 'var(--google-green-500)'},
-          {id: 'expressive', primaryColor: 'var(--google-orange-500)'},
-        ],
+        value(): DynamicColorScheme[] {
+          return [
+            // TODO(254479725): Replace with colors fetched from the
+            // backend.
+            {
+              id: 'tonal',
+              primaryColor: 'var(--google-blue-500)',
+              secondaryColor: 'var(--google-red-500)',
+              tertiaryColor: 'var(--google-green-500)',
+            },
+            {
+              id: 'neutral',
+              primaryColor: 'var(--google-red-500)',
+              secondaryColor: 'var(--google-blue-500)',
+              tertiaryColor: 'var(--google-green-500)',
+            },
+            {
+              id: 'vibrant',
+              primaryColor: 'var(--google-green-500)',
+              secondaryColor: 'var(--google-red-500)',
+              tertiaryColor: 'var(--google-blue-500)',
+            },
+            {
+              id: 'expressive',
+              primaryColor: 'var(--google-orange-500)',
+              secondaryColor: 'var(--google-red-500)',
+              tertiaryColor: 'var(--google-green-500)',
+            },
+          ];
+        },
       },
     };
   }
 
   automaticSeedColorEnabled: boolean;
   private staticColors_: string[];
-  private schemes_: Object[];
+  private schemes_: DynamicColorScheme[];
 }
 
 customElements.define(DynamicColorElement.is, DynamicColorElement);