ash/webui/personalization_app/resources/js/wallpaper/wallpaper_collections_element.html

<style include="common wallpaper">
  wallpaper-grid-item[aria-disabled='true'][data-online]::part(image) {
    filter: grayscale(100%);
    opacity: 0.3;
  }

  wallpaper-grid-item[data-google-photos]::part(image) {
    height: 64px;
    margin: 12px;
    position: absolute;
    top: 0;
    width: 64px;
  }

  wallpaper-grid-item[data-google-photos][aria-disabled='true']::part(image) {
    /* Background color should stay light even in dark mode. */
    background-color: white;
    border-radius: 100%;
    box-sizing: border-box;
    filter: grayscale(100%);
    height: 54px;
    padding: 4px;
    width: 54px;
  }

  wallpaper-grid-item[data-google-photos][aria-disabled='true']::part(textShadow) {
    display: none;
  }

  wallpaper-grid-item[data-google-photos] .primary-text {
    align-items: center;
    bottom: calc(8px + var(--cros-annotation-2-line-height));
    display: flex;
    flex-direction: row;
  }

  wallpaper-grid-item[data-google-photos] iron-icon[icon='personalization:managed'] {
    --iron-icon-fill-color: var(--cros-icon-color-secondary);
    --iron-icon-height: 16px;
    --iron-icon-width: 16px;
    display: none;
    flex: 0 0 auto;
    margin-inline-end: 8px;
  }

  wallpaper-grid-item[data-google-photos][aria-disabled='true'] iron-icon[icon='personalization:managed'] {
    /* Icon color should stay light even in dark mode.
     * All of the google photos tile is always light.
     */
    --iron-icon-fill-color: var(--cros-icon-color-secondary-light);
    display: block;
  }

  wallpaper-grid-item[data-google-photos][aria-disabled='true'] p {
    /* Text color should stay light even in dark mode.
     * All of the google photos tile is always light.
     */
    color: var(--cros-text-color-secondary-light);
    text-shadow: none;
  }

  .outer-container {
    height: calc(var(--personalization-app-grid-item-height) +
      var(--personalization-app-grid-item-spacing));
    /* Media queries in trusted and untrusted code will resize to 25% at
     * correct widths.  Subtract 0.34px to fix subpixel rounding issues with
     * iron-list. This makes sure all photo containers on a row add up to at
     * least 1px smaller than the parent width.*/
    width: calc(100% / 3 - 0.34px);
  }

  @media(min-width: 720px) {
    .outer-container {
      width: calc(100% / 4 - 0.25px);
    }
  }

  wallpaper-grid-item {
    --wallpaper-grid-item-width: 100%;
  }

  wallpaper-grid-item[data-google-photos]:not([aria-disabled='true']):not([placeholder]) {
    /* Always white, even in dark mode.
     * All of the google photos tile is always light.
     */
    --personalization-app-grid-item-background-color: white;
  }

  wallpaper-grid-item[data-google-photos][aria-disabled='true']:not([placeholder]) {
    /* Disabled background color should stay light even in dark mode.
     * All of the google photos tile is always light.
     */
    --personalization-app-grid-item-background-color: var(--google-grey-200);
  }

  :host-context(body.jelly-enabled) wallpaper-grid-item[is-local-no-images]::part(item) {
    background: linear-gradient(var(--cros-sys-primary), var(--cros-sys-primary_container));
  }

  :host-context(body.jelly-enabled) wallpaper-grid-item[is-local-no-images]::part(image) {
    display: none;
  }

  wallpaper-grid-item[data-is-time-of-day-collection] {
    --personalization-app-grid-item-border-radius: 80px;
  }
</style>
<template is="dom-if" if="[[hasError_]]">
  <wallpaper-error></wallpaper-error>
</template>
<main aria-label="$i18n{wallpaperCollections}" hidden$="[[hasError_]]">
  <iron-list aria-setsize$="[[tiles_.length]]"
      grid
      items="[[tiles_]]"
      role="listbox">
    <template>
      <div class="outer-container">
        <template is="dom-if" if="[[isLoadingTile_(item)]]" restamp>
          <wallpaper-grid-item
              aria-label="$i18n{ariaLabelLoading}"
              aria-posinset$="[[getAriaIndex_(index)]]"
              disabled
              index="[[index]]"
              role="option"
              tabindex$="[[tabIndex]]">
          </wallpaper-grid-item>
        </template>
        <template is="dom-if" if="[[isGooglePhotosTile_(item)]]">
          <wallpaper-grid-item
              data-google-photos
              aria-posinset$="[[getAriaIndex_(index)]]"
              disabled="[[!isSelectableTile_(item)]]"
              index="[[index]]"
              primary-text="[[item.name]]"
              on-wallpaper-grid-item-selected="onCollectionSelected_"
              role="option"
              src="[[item.preview]]"
              tabindex$="[[tabIndex]]">
            <template is="dom-if" if="[[!isSelectableTile_(item)]]" restamp>
              <div slot="text" class="primary-text">
                <iron-icon icon="personalization:managed"
                    title$="$i18n{managedSetting}">
                </iron-icon>
                <p title$="[[item.name]]">[[item.name]]</p>
              </div>
            </template>
          </wallpaper-grid-item>
        </template>
        <template is="dom-if" if="[[isLocalTile_(item)]]">
          <wallpaper-grid-item
              aria-posinset$="[[getAriaIndex_(index)]]"
              collage
              disabled="[[!isSelectableTile_(item)]]"
              index="[[index]]"
              is-local-no-images$="[[isLocalNoImagesTile_(item)]]"
              on-wallpaper-grid-item-selected="onCollectionSelected_"
              primary-text="[[item.name]]"
              role="option"
              secondary-text="[[item.count]]"
              src="[[item.preview]]"
              tabindex$="[[tabIndex]]">
          </wallpaper-grid-item>
        </template>
        <template is="dom-if" if="[[isOnlineTile_(item)]]">
          <wallpaper-grid-item aria-posinset$="[[getAriaIndex_(index)]]"
              data-online
              data-is-time-of-day-collection$="[[isTimeOfDayCollection_(item)]]"
              disabled="[[!isSelectableTile_(item)]]"
              index="[[index]]"
              info-text="[[item.info]]"
              on-wallpaper-grid-item-selected="onCollectionSelected_"
              primary-text="[[item.name]]"
              role="option"
              secondary-text="[[item.count]]"
              src="[[item.preview]]"
              tabindex$="[[tabIndex]]">
          </wallpaper-grid-item>
        </template>
      </div>
    </template>
  </iron-list>
</main>