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

<style include="common">
  :host {
    color: var(--cros-text-color-primary);
    font: var(--personalization-app-label-font);
  }

  /* Header */
  #themeHeader {
    align-items: center;
    display: flex;
  }

  #themeTitle {
    flex-grow: 1;
  }

  #dynamicColorToggleDescription {
    font-weight: var(--cros-body-1-font-weight);
    margin-inline-end: 12px;
  }

  /* Buttons */
  iron-selector {
    display: flex;
    justify-content: space-between;
    margin: 16px 0;
  }

  cr-button {
    /* TODO(b/254487168): Replace the background color with one that makes more
       sense. Neutral95. */
    background-color: var(--cros-sys-input_field_dark);
    border: none;
    border-radius: 16px;
    height: 76px;
    padding: 0;
    width: 76px;
  }

  /* TODO(b/254478525) Replace with an icon button component. */
  cr-button[aria-checked='true']::before {
    background-color: var(--cros-button-background-color-primary);
    border-radius: 50%;
    color: var(--cros-button-icon-color-primary);
    content: '✓';
    font-size: 16px;
    height: 32px;
    line-height: 32px;
    position: absolute;
    text-align: center;
    width: 32px;
  }

  color-scheme-icon-svg,
  svg {
    height: 48px;
    width: 48px;
  }
</style>
<div id="container">
  <div id="themeHeader">
    <!-- TODO(b/253089237): Add the final translated text. -->
    <div id="themeTitle">[temp]Theme color</div>
    <!-- TODO(b/253089237): Add the final translated text. -->
    <div id="dynamicColorToggleDescription">[temp]Auto</div>
    <!-- TODO(b/253089237): Add the translated aria label. -->
    <cr-toggle checked="{{automaticSeedColorEnabled}}" on-change="onToggleChanged_">
    </cr-toggle>
  </div>
  <iron-a11y-keys id="colorSchemeKeys" keys="left right" on-keys-pressed="onColorSchemeKeysPress_">
  </iron-a11y-keys>
  <iron-a11y-keys id="staticColorKeys" keys="left right" on-keys-pressed="onStaticColorKeysPress_">
  </iron-a11y-keys>
  <iron-selector
      id="colorSchemeSelector"
      selected="0"
      selected-item="{{colorSchemeHighlightedButton_}}"
      hidden$="[[!automaticSeedColorEnabled]]">
    <template is="dom-repeat" items="[[colorSchemes_]]" as="colorScheme">
      <cr-button
          tabindex$="[[getTabIndex_(colorScheme.id)]]"
          on-click="onClickColorSchemeButton_"
          data-color-scheme-id$="[[colorScheme.id]]"
          aria-checked$="[[getColorSchemeAriaChecked_(colorScheme.id, colorSchemeSelected_)]]">
        <color-scheme-icon-svg scheme="[[colorScheme]]"></color-scheme-icon-svg>
      </cr-button>
    </template>
  </iron-selector>
  <iron-selector
      id="staticColorSelector"
      selected="0"
      selected-item="{{staticColorHighlightedButton_}}"
      hidden$="[[automaticSeedColorEnabled]]">
    <template is="dom-repeat" items="[[staticColors_]]" as="staticColor">
      <cr-button
          tabindex$="[[getTabIndex_(staticColor)]]"
          on-click="onClickStaticColorButton_"
          aria-checked$="[[getStaticColorAriaChecked_(staticColor, staticColorSelected_)]]"
          data-static-color$="[[staticColor]]">
        <svg>
          <circle style$="fill: [[staticColor]]" cx="24" cy="24" r="24"></circle>
        </svg>
      </cr-button>
    </template>
  </iron-selector>
</div>