/* 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. */

/* #css_wrapper_metadata_start
 * #type=vars
 * #css_wrapper_metadata_end */

/*
 * TODO(romanarora): Move to cr_elements folder when another component needs
 * to reference the file.
 */

/* Matches colors specified in ThemeHelper::GetTabGroupColors. */
html {
  /* TODO(romanarora): Consider moving colors to shared_vars_css.html. Only
   * adds colors not already present in shared_vars_css.html.
   */
  --google-blue-300-rgb: 123, 170, 247;
  --google-blue-300: rgb(var(--google-blue-300-rgb));
  --google-cyan-300-rgb: 120, 217, 236; /* #78d9ec */
  --google-cyan-300: rgb(var(--google-cyan-300-rgb));
  --google-cyan-900-rgb: 0, 123, 131; /* #007b83 */
  --google-cyan-900: rgb(var(--google-cyan-900-rgb));
  --google-green-300-rgb: 87, 187, 138;  /* #57bb8a */
  --google-green-300: rgb(var(--google-green-300-rgb));
  --google-green-600-rgb: 30, 142, 62; /* #1e8e3e */
  --google-green-600: rgb(var(--google-green-600-rgb));
  --google-pink-300-rgb: 255, 139, 203; /* #ff8bcb */
  --google-pink-300: rgb(var(--google-pink-300-rgb));
  --google-pink-700-rgb: 208, 24, 132; /* #d01884 */
  --google-pink-700: rgb(var(--google-pink-700-rgb));
  --google-purple-200-rgb: 215, 174, 251; /* #d7aefb */
  --google-purple-200: rgb(var(--google-purple-200-rgb));
  --google-purple-600-rgb: 147, 52, 230; /* #9334e6 */
  --google-purple-600: rgb(var(--google-purple-600-rgb));
  --google-red-300-rgb: 230, 124, 115;  /* #e67c73 */
  --google-red-300: rgb(var(--google-red-300-rgb));
  --google-yellow-300-rgb: 247, 203, 77;  /* #f7cb4d */
  --google-yellow-300: rgb(var(--google-yellow-300-rgb));
  --google-yellow-900-rgb: 227, 116, 0; /* #e37400 */
  --google-yellow-900: rgb(var(--google-yellow-900-rgb));
  --google-orange-300-rgb: 252, 173, 112; /* #fcad70 */
  --google-orange-300: rgb(var(--google-orange-300-rgb));
  --google-orange-400-rgb: 250, 144, 62; /* #fa903e */
  --google-orange-400: rgb(var(--google-orange-400-rgb));

  --tab-group-color-grey: var(--google-grey-700);
  --tab-group-color-blue: var(--google-blue-600);
  --tab-group-color-red: var(--google-red-600);
  --tab-group-color-yellow: var(--google-yellow-900);
  --tab-group-color-green: var(--google-green-600);
  --tab-group-color-pink: var(--google-pink-700);
  --tab-group-color-purple: var(--google-purple-600);
  --tab-group-color-cyan: var(--google-cyan-900);
  --tab-group-color-orange: var(--google-orange-400);

  --tab-group-refresh-color-grey-rgb: 73, 77, 82; /* #494d52 */
  --tab-group-refresh-color-blue-rgb: 50, 92, 205; /* #325ccd */
  --tab-group-refresh-color-red-rgb: 223, 0, 12; /* #df000c */
  --tab-group-refresh-color-pink-rgb: 204, 6, 171; /* #cc06ab */
  --tab-group-refresh-color-green-rgb: 26, 119, 54; /* #1a7736 */
  --tab-group-refresh-color-yellow-rgb: 99, 117, 5; /* #637505 */
  --tab-group-refresh-color-purple-rgb: 124, 49, 230; /* #7c31e6 */
  --tab-group-refresh-color-cyan-rgb: 5, 124, 132; /* #057c84 */
  --tab-group-refresh-color-orange-rgb: 204, 78, 0; /* #cc4e00 */

  --tab-group-refresh-color-grey: rgb(
    var(--tab-group-refresh-color-grey-rgb));
  --tab-group-refresh-color-blue: rgb(
    var(--tab-group-refresh-color-blue-rgb));
  --tab-group-refresh-color-red: rgb(
    var(--tab-group-refresh-color-red-rgb));
  --tab-group-refresh-color-pink: rgb(
    var(--tab-group-refresh-color-pink-rgb));
  --tab-group-refresh-color-green: rgb(
    var(--tab-group-refresh-color-green-rgb));
  --tab-group-refresh-color-yellow: rgb(
    var(--tab-group-refresh-color-yellow-rgb));
  --tab-group-refresh-color-purple: rgb(
    var(--tab-group-refresh-color-purple-rgb));
  --tab-group-refresh-color-cyan: rgb(
    var(--tab-group-refresh-color-cyan-rgb));
  --tab-group-refresh-color-orange: rgb(
    var(--tab-group-refresh-color-orange-rgb));
}

@media (prefers-color-scheme: dark) {
  html {
    --tab-group-color-grey: var(--google-grey-400);
    --tab-group-color-blue: var(--google-blue-300);
    --tab-group-color-red: var(--google-red-300);
    --tab-group-color-yellow: var(--google-yellow-300);
    --tab-group-color-green: var(--google-green-300);
    --tab-group-color-pink: var(--google-pink-300);
    --tab-group-color-purple: var(--google-purple-200);
    --tab-group-color-cyan: var(--google-cyan-300);
    --tab-group-color-orange: var(--google-orange-300);

    --tab-group-refresh-color-grey-rgb: 208, 213, 221; /* #d0d5dd */
    --tab-group-refresh-color-blue-rgb: 200, 211, 255; /* #c8d3ff */
    --tab-group-refresh-color-red-rgb: 255, 199, 193; /* #ffc7c1 */
    --tab-group-refresh-color-pink-rgb: 255, 195, 232; /* #ffc3e8 */
    --tab-group-refresh-color-green-rgb: 198, 255, 199; /* #c6ffc7 */
    --tab-group-refresh-color-yellow-rgb: 238, 255, 165; /* #eeffa5 */
    --tab-group-refresh-color-purple-rgb: 224, 203, 255; /* #e0cbff */
    --tab-group-refresh-color-cyan-rgb: 199, 250, 255; /* #c7faff */
    --tab-group-refresh-color-orange-rgb: 255, 222, 167; /* #ffdea7 */

    --tab-group-refresh-color-grey: rgb(
      var(--tab-group-refresh-color-grey-rgb));
    --tab-group-refresh-color-blue: rgb(
      var(--tab-group-refresh-color-blue-rgb));
    --tab-group-refresh-color-red: rgb(
      var(--tab-group-refresh-color-red-rgb));
    --tab-group-refresh-color-pink: rgb(
      var(--tab-group-refresh-color-pink-rgb));
    --tab-group-refresh-color-green: rgb(
      var(--tab-group-refresh-color-green-rgb));
    --tab-group-refresh-color-yellow: rgb(
      var(--tab-group-refresh-color-yellow-rgb));
    --tab-group-refresh-color-purple: rgb(
      var(--tab-group-refresh-color-purple-rgb));
    --tab-group-refresh-color-cyan: rgb(
      var(--tab-group-refresh-color-cyan-rgb));
    --tab-group-refresh-color-orange: rgb(
      var(--tab-group-refresh-color-orange-rgb));
  }
}