chrome/browser/resources/new_tab_page/shared_vars.css

/*
 * Copyright 2020 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

/* TODO(aee): this file should probably be turned into a module that imports
 * 'ui/webui/resources/shared_vars_css.m.js'.
 */
html {
  /* Colors: */
  --ntp-active-background-color: rgba(var(--google-grey-900-rgb), .16);
  --ntp-background-override-color-rgb: 255, 255, 255;
  --ntp-background-override-color:
      rgba(var(--ntp-background-override-color-rgb));
  --ntp-border-color: var(--google-grey-refresh-300);
  --ntp-focus-shadow-color: rgba(var(--google-blue-600-rgb), .4);
  --ntp-hover-background-color: rgba(var(--google-grey-900-rgb), .1);
  --ntp-selected-background-color: rgba(var(--google-blue-refresh-700-rgb), .16);
  --ntp-selected-border-color: var(--google-blue-600);
  --ntp-selected-light-background-color: rgba(var(--google-blue-600-rgb), .24);
  --ntp-selected-primary-text-color: var(--google-blue-refresh-700);
  --ntp-module-text-color: #616161;
  --ntp-chip-background-color: var(--google-blue-600);
  --ntp-chip-text-color: white;
  --ntp-icon-button-color-active: var(--google-grey-refresh-700);
  --ntp-icon-button-color: var(--google-grey-600);
  --ntp-module-scroll-button-color: var(--google-grey-refresh-100);
  --ntp-module-scroll-button-hover-color: var(--google-grey-refresh-300);

  /* Other: */
  --ntp-focus-shadow: 0 0 0 2px var(--ntp-focus-shadow-color);
  --ntp-module-text-size: 13px;
}

@media (prefers-color-scheme: dark) {
  html {
    /* Colors: */
    --ntp-active-background-color: rgba(var(--google-grey-200-rgb), .16);
    --ntp-background-override-color-rgb: var(--google-grey-900-rgb);
    --ntp-border-color: var(--google-grey-refresh-700);
    --ntp-focus-shadow-color: rgba(var(--google-blue-refresh-300-rgb), .5);
    --ntp-hover-background-color: rgba(var(--google-grey-200-rgb), .1);
    --ntp-selected-background-color: rgba(var(--google-blue-refresh-300-rgb), .16);
    --ntp-selected-border-color: var(--google-blue-refresh-300);
    --ntp-selected-light-background-color: rgba(var(--google-blue-refresh-300-rgb), .24);
    --ntp-selected-primary-text-color: var(--google-blue-refresh-300);
    --ntp-chip-background-color: var(--google-blue-300);
    --ntp-chip-text-color: var(--google-grey-900);
    --ntp-icon-button-color-active: var(--google-grey-refresh-300);
    --ntp-icon-button-color: white;
    --ntp-module-scroll-button-color: var(--google-grey-refresh-700);
    --ntp-module-scroll-button-hover-color: var(--google-grey-600);
  }
}