// Copyright 2023 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.
// IMPORTANT: this file is auto generated. Please do not edit this file.
/* istanbul ignore file */
export default {
  cssContent: `/*
 * 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.
 */

/**
 * These are the new set of colors for the new Light/Dark themes. See
 * https://crbug.com/1122511 and
 * https://docs.google.com/document/d/1QrSSRsJRzaQBY3zz73ZL84bTcFUV60yMtE5cuu6ED14
 * for details.
*/
:root {
  --color-primary-old: rgb(26 115 232);
  --color-primary-variant: rgb(66 133 244);
  --color-background: rgb(255 255 255);
  --color-background-inverted: rgb(0 0 0);
  --color-background-inverted-opacity-0: rgb(0 0 0 / 0%);
  --color-background-inverted-opacity-2: rgb(0 0 0 / 2%);
  --color-background-inverted-opacity-30: rgb(0 0 0 / 30%);
  --color-background-inverted-opacity-50: rgb(0 0 0 / 50%);
  --color-background-opacity-50: rgb(255 255 255 / 50%);
  --color-background-opacity-80: rgb(255 255 255 / 80%);
  --color-background-elevation-0: rgb(248 249 249);
  --color-background-elevation-1: rgb(241 243 244);
  --color-background-elevation-2: rgb(222 225 230);
  /** Used when the elevation is visible only on dark theme */
  --color-background-elevation-dark-only: var(--color-background);
  --color-background-highlight: rgb(218 220 224);
  /** To draw grid lines behind elements */
  --divider-line: rgb(0 0 0 / 10%);
  /**
   * When hovering over an element and the background should be a little
   * bit darker. For example, when hovering over a node in the flame chart
   * tree in the performance panel. This color is intentionally opague,
   * since the color of the underlying element should still be dominant.
   */
  --color-background-hover-overlay: rgb(56 121 217 / 10%);
  /**
   * Used when selecting a range of a section, for example when
   * selecting a range in the performance panel timeline.
   */
  --color-selection-highlight: rgb(56 121 217 / 30%);
  --color-selection-highlight-border: rgb(16 81 177);
  /**
   * When showing matching elements of a particular search filter (for example
   * when showing all matching css selectors/rules in the elements style
   * pane). The highlight is intended to be used on top of the original background
   * color and text color.
   */
  --color-match-highlight: rgb(56 121 217 / 20%);
  --color-text-primary: rgb(32 33 36);
  --color-text-secondary: rgb(95 99 104);
  --color-text-secondary-selected: rgb(188 185 182);
  --color-text-disabled: rgb(128 134 139);
  --color-details-hairline: rgb(202 205 209);
  --color-details-hairline-light: rgb(223 225 227);
  --color-accent-red: rgb(217 48 37);
  --color-red: rgb(238 68 47);
  --color-accent-green: rgb(24 128 56);
  --color-accent-green-background: rgb(24 128 56 / 10%);
  --color-green: rgb(99 172 190);
  --color-link: var(--color-primary-old);
  --color-syntax-1: rgb(200 0 0);
  --color-syntax-2: rgb(136 18 128);
  --color-syntax-3: rgb(26 26 166);
  --color-syntax-4: rgb(153 69 0);
  --color-syntax-5: rgb(132 240 255);
  --color-syntax-6: rgb(35 110 37);
  --color-syntax-7: rgb(48 57 66);
  --color-syntax-8: rgb(168 148 166);
  --drop-shadow:
    0 0 0 1px rgb(0 0 0 / 5%),
    0 2px 4px rgb(0 0 0 / 20%),
    0 2px 6px rgb(0 0 0 / 10%);
  --drop-shadow-depth-1:
    0 1px 2px rgb(60 64 67 / 30%),
    0 1px 3px 1px rgb(60 64 67 / 15%);
  --drop-shadow-depth-2:
    0 1px 2px rgb(60 64 67 / 30%),
    0 2px 6px 2px rgb(60 64 67 / 15%);
  --drop-shadow-depth-3:
    0 4px 8px 3px rgb(60 64 67 / 15%),
    0 1px 3px rgb(60 64 67 / 30%);
  --drop-shadow-depth-4:
    0 6px 10px 4px rgb(60 64 67 / 15%),
    0 2px 3px rgb(60 64 67 / 30%);
  --drop-shadow-depth-5:
    0 8px 12px 6px rgb(60 64 67 / 15%),
    0 4px 4px rgb(60 64 67 / 30%);
  --box-shadow-outline-color: rgb(0 0 0 / 50%);
  /** These are the colors of the native Mac scrollbars */
  --color-scrollbar-mac: rgb(143 143 143 / 60%);
  --color-scrollbar-mac-hover: rgb(64 64 64 / 60%);
  /** These colors are used on all non-Mac platforms for scrollbars */
  --color-scrollbar-other: rgb(0 0 0 / 50%);
  --color-scrollbar-other-hover: rgb(0 0 0 / 50%);
  /** These colors have the same value in dark mode */
  --lighthouse-red: rgb(255 78 67);
  --lighthouse-orange: rgb(255 164 0);
  --lighthouse-green: rgb(12 206 106);
  /** The colors are for issue icons and related highlights */
  --issue-color-red: rgb(235 57 65);
  --issue-color-yellow: rgb(242 153 0);
  --issue-color-blue: rgb(26 115 232);
  /** Used to indicate an input box */
  --input-outline: rgb(202 205 209);

  /** These colors are used to show errors */
  --color-error-text: #f00;
  --color-error-border: hsl(0deg 100% 92%);
  --color-error-background: hsl(0deg 100% 97%);
  --color-checkbox-accent-color: var(--color-primary-old);
  --color-image-preview-background: rgb(255 255 255);

  /* Colors for styling inputs */
  --color-input-outline: rgb(218 220 224);
  --color-input-outline-active: rgb(26 115 232);
  --color-input-outline-error: rgb(217 48 37);
  --color-input-outline-disabled: rgba(128 134 139 / 20%);
  --color-input-text-disabled: rgba(128 134 139 / 50%);

  /* Colors for styling buttons */
  --color-button-outline-focus: rgb(26 115 232 / 50%);
  --color-button-primary-background-hovering: rgb(77 134 225 / 100%);
  --color-button-primary-background-pressed: rgb(88 132 205);
  --color-button-primary-text: rgb(255 255 255);
  --color-button-primary-text-hover: rgb(218 220 224);
  --color-button-secondary-background-hovering: rgb(26 115 232 / 10%);
  --color-button-secondary-background-pressed: rgb(26 92 178 / 25%);
  --color-button-secondary-border: rgb(218 220 224);
  --color-iconbutton-hover: rgb(0 0 0 / 10%);
  --color-iconbutton-pressed: rgb(0 0 0 / 15%);

  /* Colors for file icons */
  --color-ic-file-document: rgb(39 116 240);
  --color-ic-file-image: rgb(46 184 83);
  --color-ic-file-font: rgb(18 192 226);
  --color-ic-file-script: rgb(240 179 0);
  --color-ic-file-stylesheet: rgb(174 82 255);
  --color-ic-file-webbundle: rgb(128 134 139);
  --color-ic-file-default: rgb(128 134 139);

  /* Code highlighting colors */
  --color-token-variable: inherit;
  --color-token-property: inherit;
  --color-token-type: rgb(0 136 119);
  --color-token-definition: var(--color-token-attribute-value);
  --color-token-variable-special: rgb(0 85 170);
  --color-token-builtin: rgb(50 0 170);
  --color-token-keyword: rgb(171 13 144);
  --color-token-number: rgb(50 0 255);
  --color-token-string: rgb(170 17 17);
  --color-token-string-special: rgb(200 0 0);
  --color-token-atom: rgb(34 17 153);
  --color-token-tag: rgb(136 18 128);
  --color-token-attribute: rgb(153 69 0);
  --color-token-attribute-value: rgb(26 26 168);
  --color-token-comment: rgb(0 117 0);
  --color-token-meta: rgb(85 85 85);
  --color-token-deleted: rgb(221 68 68);
  --color-token-inserted: rgb(34 153 34);

  /* Colors used by the code editor */
  --color-secondary-cursor: #c0c0c0;
  --color-line-number: hsl(0deg 0% 46%);
  --color-matching-bracket-underline: rgb(0 0 0 / 50%);
  --color-matching-bracket-background: rgb(0 0 0 / 7%);
  --color-nonmatching-bracket-underline: rgb(255 0 0 / 50%);
  --color-nonmatching-bracket-background: rgb(255 0 0 / 7%);
  --color-editor-selection: #cfe8fc;
  --color-editor-selection-blurred: #e0e0e0;
  --color-trailing-whitespace: rgb(255 0 0 / 5%);
  --color-selected-option: #fff;
  --color-selected-option-background: #1a73e8;
  --color-selected-option-outline: rgb(255 255 255 / 50%);
  --color-highlighted-line: rgb(255 255 0 / 50%);
  --color-completion-hover: rgb(56 121 217 / 10%);
  --color-search-match-border: rgb(128 128 128);
  --color-selected-search-match: var(--color-text-primary);
  --color-selected-search-match-background: rgb(241 234 0);
  --color-coverage-used: #63acbe;
  --color-execution-line-background: rgb(0 59 255 / 10%);
  --color-execution-line-outline: rgb(64 115 244);
  --color-execution-token-background: rgb(15 72 252 / 35%);
  --color-continue-to-location: rgb(5 65 255 / 10%);
  --color-continue-to-location-hover: rgb(15 72 252 / 35%);
  --color-continue-to-location-hover-border: rgb(121 141 254);
  --color-continue-to-location-async: rgb(58 162 8 / 30%);
  --color-continue-to-location-async-hover: rgb(75 179 6 / 55%);
  --color-continue-to-location-async-hover-border: rgb(100 154 100);
  --color-evaluated-expression: rgb(255 255 11 / 25%);
  --color-evaluated-expression-border: rgb(163 41 34);
  --color-variable-values: #ffe3c7;
  --color-non-breakable-line: rgb(128 128 128 / 40%);

  /* Color tokens for icons */
  --color-on-surface: rgb(32 33 36);
  --color-on-surface-variant: rgb(110 110 110);
  --color-primary: rgb(11 87 208);
  --color-primary-bright: rgb(27 110 243);
  --color-on-primary: rgb(255 255 255);
  --color-orange: rgb(169 91 18);
  --color-orange-bright: rgb(232 143 33);
  --color-tertiary: rgb(20 108 46);
  --color-tertiary-bright: rgb(25 134 57);
  --color-error: rgb(179 38 30);
  --color-error-bright: rgb(220 54 46);
  --color-purple: rgb(140 30 211);
  --color-purple-bright: rgb(167 67 238);
  --color-turqoise: rgb(0 103 127);
  --color-turqoise-bright: rgb(0 152 196);
  --color-yellow: rgb(121 89 0);
  --color-yellow-bright: rgb(186 130 14);

  /* Chrome Desktop Design System */

  /* Use on all surfaces */

  --sys-color-on-surface: var(--ref-palette-neutral10);
  --sys-color-on-surface-subtle: var(--ref-palette-neutral30);
  --sys-color-on-surface-secondary: var(--ref-palette-neutral30);
  --sys-color-on-surface-primary: var(--ref-palette-primary10);

  /* Universal surfaces */

  --sys-color-surface: var(--ref-palette-neutral100);
  --sys-color-surface-variant: var(--ref-palette-neutral-variant90);

  /* Containers */

  --sys-color-tonal-container: var(--ref-palette-primary90);
  --sys-color-on-tonal-container: var(--ref-palette-primary10);
  --sys-color-tertiary-container: var(--ref-palette-tertiary90);
  --sys-color-on-tertiary-container: var(--ref-palette-tertiary10);
  --sys-color-error-container: var(--ref-palette-error90);
  --sys-color-on-error-container: var(--ref-palette-error10);
  --sys-color-neutral-container: var(--ref-palette-neutral95);
  --sys-color-omnibox-container: var(--sys-color-surface4);

  /* Prominent accent colors */

  --sys-color-primary: var(--ref-palette-primary40);
  --sys-color-on-primary: var(--ref-palette-primary100);
  --sys-color-secondary: var(--ref-palette-secondary40);
  --sys-color-on-secondary: var(--ref-palette-secondary100);
  --sys-color-tertiary: var(--ref-palette-tertiary40);
  --sys-color-on-tertiary: var(--ref-palette-tertiary100);
  --sys-color-error: var(--ref-palette-error40);
  --sys-color-on-error: var(--ref-palette-error100);

  /* Chrome base surface */

  --sys-color-base: var(--ref-palette-neutral100);
  --sys-color-base-container: var(--sys-color-surface4);
  --sys-color-base-container-elevated: var(--ref-palette-neutral100);

  /* Corresponding base on colors */

  --sys-color-on-base: var(--ref-palette-neutral10);
  --sys-color-on-base-divider: var(--ref-palette-primary90);
  /* Inverse */

  --sys-color-inverse-surface: var(--ref-palette-neutral20);
  --sys-color-inverse-primary: var(--ref-palette-primary80);
  --sys-color-inverse-on-surface: var(--ref-palette-neutral95);

  /* Outlines */

  --sys-color-color-outline: var(--ref-palette-neutral-variant50);
  --sys-color-tonal-outline: var(--ref-palette-primary80);
  --sys-color-neutral-outline: var(--ref-palette-neutral80);
  --sys-color-divider: var(--ref-palette-primary90);

  /* States */

  --sys-color-state-hover-on-prominent: rgb(253 252 251 / 10%);
  --sys-color-state-hover-on-subtle: rgb(31 31 31 / 6%);
  --sys-color-state-hover-dim-blend-protection: rgb(6 46 111 / 18%);
  --sys-color-state-hover-bright-blend-protection: rgb(31 31 31 / 6%);
  --sys-color-state-ripple-neutral-on-prominent: rgb(253 252 251 / 16%);
  --sys-color-state-ripple-neutral-on-subtle: rgb(31 31 31 / 8%);
  --sys-color-state-ripple-primary: rgb(124 172 248 / 32%);
  --sys-color-state-focus-ring: var(--ref-palette-primary40);
  --sys-color-state-focus-highlight: rgb(31 31 31 / 6%);
  --sys-color-state-disabled: rgb(31 31 31 / 38%);
  --sys-color-state-disabled-container: rgb(31 31 31 / 12%);
  --sys-color-state-header-hover: var(--ref-palette-primary80);
  --sys-color-state-on-header-hover: var(--ref-palette-primary20);

  /* Surfaces */

  --sys-color-surface5: rgb(234 240 249 / 100%);
  --sys-color-surface4: rgb(237 239 246 / 100%);
  --sys-color-surface3: rgb(238 243 250 / 100%);
  --sys-color-surface2: rgb(243 246 252 / 100%);
  --sys-color-surface1: rgb(247 249 253 / 100%);

  /* Chrome DevTools Design System */

  /* Prominent accent colors for icons */

  --sys-color-primary-bright: var(--ref-palette-primary50);
  --sys-color-blue-bright: var(--ref-palette-blue50);
  --sys-color-green-bright: var(--ref-palette-green50);
  --sys-color-error-bright: var(--ref-palette-error50);
  --sys-color-orange-bright: var(--ref-palette-orange65);
  --sys-color-yellow-bright: var(--ref-palette-yellow55);
  --sys-color-cyan-bright: var(--ref-palette-cyan50);
  --sys-color-purple-bright: var(--ref-palette-purple50);
  --sys-color-neutral-bright: var(--ref-palette-neutral70);

  /* Prominent accent colors for text */

  --sys-color-blue: var(--ref-palette-blue40);
  --sys-color-on-blue: var(--ref-palette-blue100);
  --sys-color-green: var(--ref-palette-green40);
  --sys-color-on-green: var(--ref-palette-green100);
  --sys-color-orange: var(--ref-palette-orange40);
  --sys-color-on-orange: var(--ref-palette-orange100);
  --sys-color-yellow: var(--ref-palette-yellow40);
  --sys-color-on-yellow: var(--ref-palette-yellow100);
  --sys-color-cyan: var(--ref-palette-cyan40);
  --sys-color-on-cyan: var(--ref-palette-cyan100);
  --sys-color-purple: var(--ref-palette-purple40);
  --sys-color-on-purple: var(--ref-palette-purple100);

  /* Containers */

  --sys-color-yellow-container: var(--ref-palette-yellow90);
  --sys-color-on-yellow-container: var(--ref-palette-yellow10);

  /* Universal surfaces */

  --sys-color-cdt-base: var(--sys-color-base-container);
  --sys-color-cdt-base-container: var(--sys-color-base);

  /* Tinted surfaces */

  --sys-color-surface-yellow: rgb(254 243 220 / 100%);
  --sys-color-surface-error: rgb(252 235 235 / 100%);

  /* Corresponding on colors */

  --sys-color-on-surface-yellow: var(--ref-palette-yellow20);
  --sys-color-on-surface-error: var(--ref-palette-error30);

  /* Syntax highlighting */

  --sys-color-token-variable: var(--sys-color-on-surface);
  --sys-color-token-property: var(--sys-color-on-surface);
  --sys-color-token-property-special: var(--ref-palette-error50);
  --sys-color-token-type: var(--ref-palette-tertiary50);
  --sys-color-token-definition: var(--ref-palette-primary30);
  --sys-color-token-variable-special: var(--ref-palette-primary30);
  --sys-color-token-builtin: var(--ref-palette-primary20);
  --sys-color-token-keyword: var(--ref-palette-pink40);
  --sys-color-token-number: var(--ref-palette-primary40);
  --sys-color-token-string: var(--ref-palette-error40);
  --sys-color-token-string-special: var(--ref-palette-error50);
  --sys-color-token-atom: var(--ref-palette-primary20);
  --sys-color-token-tag: var(--ref-palette-pink30);
  --sys-color-token-attribute: var(--ref-palette-orange40);
  --sys-color-token-attribute-value: var(--ref-palette-primary30);
  --sys-color-token-comment: var(--ref-palette-tertiary40);
  --sys-color-token-meta: var(--ref-palette-neutral60);
  --sys-color-token-deleted: var(--ref-palette-error50);
  --sys-color-token-inserted: var(--ref-palette-tertiary60);
  --sys-color-token-pseudo-element: var(--ref-palette-primary40);
  --sys-color-token-subtle: var(--ref-palette-neutral60);
}

.-theme-with-dark-background {
  --color-primary-old: rgb(138 180 248);
  --color-primary-variant: rgb(102 157 246);
  --color-background: rgb(32 33 36);
  --color-background-inverted: rgb(255 255 255);
  --color-background-inverted-opacity-2: rgb(255 255 255 / 2%);
  --color-background-inverted-opacity-30: rgb(255 255 255 / 30%);
  --color-background-inverted-opacity-50: rgb(255 255 255 / 50%);
  --color-background-opacity-50: rgb(32 33 36 / 50%);
  --color-background-opacity-80: rgb(32 33 36 / 80%);
  --color-background-elevation-0: rgb(32 32 35);
  --color-background-elevation-1: rgb(41 42 45);
  --color-background-elevation-2: rgb(53 54 58);
  --color-background-elevation-dark-only: var(--color-background-elevation-1);
  --color-background-highlight: rgb(69 69 69);
  --divider-line: rgb(255 255 255 / 10%);
  --color-background-hover-overlay: rgb(56 121 217 / 10%);
  --color-selection-highlight: rgb(251 202 70 / 20%);
  --color-selection-highlight-border: rgb(251 202 70);
  --color-match-highlight: rgb(56 121 217 / 35%);
  --color-text-primary: rgb(232 234 237);
  --color-text-secondary: rgb(154 160 166);
  --color-text-secondary-selected: rgb(188 185 182);
  --color-text-disabled: rgb(128 134 139);
  --color-details-hairline: rgb(73 76 80);
  --color-details-hairline-light: rgb(54 57 59);
  --color-accent-red: rgb(242 139 130);
  --color-red: rgb(237 78 76);
  --color-accent-green: rgb(129 201 149);
  --color-accent-green-background: rgb(129 201 149 / 20%);
  --color-link: var(--color-primary-old);
  --color-syntax-1: rgb(53 212 199);
  --color-syntax-2: rgb(93 176 215);
  --color-syntax-2-rgb: 93 176 215;
  --color-syntax-3: rgb(242 151 102);
  --color-syntax-4: rgb(155 187 220);
  --color-syntax-5: rgb(132 240 255);
  --color-syntax-6: rgb(171 171 171);
  --color-syntax-7: rgb(207 208 208);
  --color-syntax-8: rgb(93 176 215);
  --drop-shadow:
    0 0 0 1px rgb(255 255 255 / 20%),
    0 2px 4px 2px rgb(0 0 0 / 20%),
    0 2px 6px 2px rgb(0 0 0 / 10%);
  --drop-shadow-depth-1:
    0 1px 2px rgb(0 0 0 / 30%),
    0 1px 3px 1px rgb(0 0 0 / 15%);
  --drop-shadow-depth-2:
    0 1px 2px rgb(0 0 0 / 30%),
    0 2px 6px 2px rgb(0 0 0 / 15%);
  --drop-shadow-depth-3:
    0 4px 8px 3px rgb(0 0 0 / 15%),
    0 1px 3px rgb(0 0 0 / 30%);
  --drop-shadow-depth-4:
    0 6px 10px 4px rgb(0 0 0 / 15%),
    0 2px 3px rgb(0 0 0 / 30%);
  --drop-shadow-depth-5:
    0 8px 12px 6px rgb(0 0 0 / 15%),
    0 4px 4px rgb(0 0 0 / 30%);
  --box-shadow-outline-color: rgb(0 0 0 / 50%);
  --color-scrollbar-mac: rgb(51 51 51);
  --color-scrollbar-mac-hover: rgb(75 76 79);
  --color-scrollbar-other: rgb(51 51 51);
  --color-scrollbar-other-hover: rgb(75 76 79);
  --color-error-text: hsl(0deg 100% 75%);
  --color-error-border: rgb(92 0 0);
  --color-error-background: hsl(0deg 100% 8%);
  --color-checkbox-accent-color: rgb(255 165 0);
  /* Colors for styling inputs */
  --color-input-outline: rgb(60 64 67);
  --color-input-outline-active: rgb(138 180 248);
  --color-input-outline-error: rgb(242 139 130);
  --color-input-outline-disabled: rgba(189 193 198 / 20%);
  --color-input-text-disabled: rgba(128 134 139 / 70%);
  /* Colors for styling buttons */
  --color-button-outline-focus: rgb(138 180 248 / 75%);
  --color-button-primary-background-hovering: rgb(174 203 250 / 100%);
  --color-button-primary-background-pressed: rgb(210 227 252 / 100%);
  --color-button-primary-text: rgb(0 0 0);
  --color-button-primary-text-hover: rgb(60 61 65);
  --color-button-secondary-background-hovering: rgb(138 180 248 / 15%);
  --color-button-secondary-background-pressed: rgb(138 180 248 / 23%);
  --color-button-secondary-border: rgb(60 61 65);
  --color-iconbutton-hover: rgb(255 255 255 / 12%);
  --color-iconbutton-pressed: rgb(255 255 255 / 20%);

  /* Colors for file icons */
  --color-ic-file-document: rgb(39 116 240);
  --color-ic-file-image: rgb(30 142 62);
  --color-ic-file-font: rgb(18 181 203);
  --color-ic-file-script: rgb(234 134 0);
  --color-ic-file-stylesheet: rgb(161 66 244);
  --color-ic-file-webbundle: rgb(128 134 139);
  --color-ic-file-default: rgb(128 134 139);

  /* Code highlighting colors */
  --color-token-variable: rgb(217 217 217);
  --color-token-property: rgb(210 192 87);
  --color-token-type: var(--color-token-tag);
  --color-token-definition: var(--color-token-tag);
  --color-token-builtin: rgb(159 180 214);
  --color-token-variable-special: rgb(0 85 170);
  --color-token-keyword: rgb(154 127 213);
  --color-token-string: rgb(242 139 84);
  --color-token-string-special: var(--color-token-string);
  --color-token-atom: rgb(161 247 181);
  --color-token-number: var(--color-token-atom);
  --color-token-comment: var(--color-syntax-6);
  --color-token-tag: rgb(93 176 215);
  --color-token-attribute: rgb(155 187 220);
  --color-token-attribute-value: rgb(242 151 102);
  --color-token-meta: rgb(221 251 85);

  /* Colors used by the code editor */
  --color-secondary-cursor: rgb(63 63 63);
  --color-line-number: rgb(138 138 138);
  --color-matching-bracket-underline: rgb(217 217 217);
  --color-matching-bracket-background: initial;
  --color-nonmatching-bracket-underline: rgb(255 26 26);
  --color-nonmatching-bracket-background: initial;
  --color-editor-selection: hsl(207deg 88% 22%);
  --color-editor-selection-blurred: #454545;
  --color-trailing-whitespace: rgb(255 0 0 / 5%);
  --color-selected-option: #fff;
  --color-selected-option-background: #0e639c;
  --color-selected-option-outline: rgb(0 0 0 / 50%);
  --color-highlighted-line: hsl(133deg 100% 30% / 50%);
  --color-completion-hover: rgb(56 121 217 / 10%);
  --color-search-match-border: rgb(128 128 128);
  --color-selected-search-match: #eee;
  --color-selected-search-match-background: hsl(133deg 100% 30%);
  --color-coverage-used: rgb(65 138 156);
  --color-execution-line-background: rgb(0 154 17 / 30%);
  --color-execution-line-outline: #33cc6b;
  --color-execution-token-background: rgb(132 237 78 / 20%);
  --color-continue-to-location: rgb(0 173 56 / 35%);
  --color-continue-to-location-hover: rgb(0 173 56 / 35%);
  --color-continue-to-location-hover-border: #33cc6b;
  --color-continue-to-location-async: rgb(87 238 0 / 20%);
  --color-continue-to-location-async-hover: rgb(128 241 48 / 50%);
  --color-continue-to-location-async-hover-border: rgb(101 155 101);
  --color-evaluated-expression: rgb(71 70 0 / 75%);
  --color-evaluated-expression-border: rgb(221 99 92);
  --color-variable-values: rgb(56 28 0);
  --color-non-breakable-line: rgb(127 127 127 / 40%);

  /* Color tokens for icons */
  --color-on-surface: rgb(232 234 237);
  --color-on-surface-variant: rgb(145 145 145);
  --color-primary: rgb(168 199 250);
  --color-primary-bright: rgb(124 172 248);
  --color-on-primary: rgb(255 255 255);
  --color-orange: rgb(255 184 113);
  --color-orange-bright: rgb(238 152 54);
  --color-tertiary: rgb(109 213 140);
  --color-tertiary-bright: rgb(55 190 95);
  --color-error: rgb(242 184 181);
  --color-error-bright: rgb(228 105 98);
  --color-purple: rgb(226 182 255);
  --color-purple-bright: rgb(209 144 255);
  --color-turqoise: rgb(92 213 251);
  --color-turqoise-bright: rgb(56 185 222);
  --color-yellow: rgb(251 188 5);
  --color-yellow-bright: rgb(217 162 0);

  /* Chrome Desktop Design System */

  /* Use on all surfaces */

  --sys-color-on-surface: var(--ref-palette-neutral90);
  --sys-color-on-surface-subtle: var(--ref-palette-neutral80);
  --sys-color-on-surface-secondary: var(--ref-palette-neutral80);
  --sys-color-on-surface-primary: var(--ref-palette-primary90);

  /* Universal surfaces */

  --sys-color-surface: var(--ref-palette-neutral10);
  --sys-color-surface-variant: var(--ref-palette-neutral-variant30);

  /* Containers */

  --sys-color-tonal-container: var(--ref-palette-secondary30);
  --sys-color-on-tonal-container: var(--ref-palette-secondary90);
  --sys-color-tertiary-container: var(--ref-palette-tertiary30);
  --sys-color-on-tertiary-container: var(--ref-palette-tertiary90);
  --sys-color-error-container: var(--ref-palette-error30);
  --sys-color-on-error-container: var(--ref-palette-error90);
  --sys-color-neutral-container: var(--ref-palette-neutral15);
  --sys-color-omnibox-container: var(--ref-palette-neutral15);

  /* Prominent accent colors */

  --sys-color-primary: var(--ref-palette-primary80);
  --sys-color-on-primary: var(--ref-palette-primary20);
  --sys-color-secondary: var(--ref-palette-secondary80);
  --sys-color-on-secondary: var(--ref-palette-secondary20);
  --sys-color-tertiary: var(--ref-palette-tertiary80);
  --sys-color-on-tertiary: var(--ref-palette-tertiary20);
  --sys-color-error: var(--ref-palette-error80);
  --sys-color-on-error: var(--ref-palette-error20);

  /* Chrome base surface */

  --sys-color-base: var(--ref-palette-neutral25);
  --sys-color-base-container: var(--ref-palette-neutral15);
  --sys-color-base-container-elevated: var(--ref-palette-neutral25);

  /* Corresponding base on colors */

  --sys-color-on-base: var(--ref-palette-neutral90);
  --sys-color-on-base-divider: var(--ref-palette-neutral40);

  /* Inverse */

  --sys-color-inverse-surface: var(--ref-palette-neutral90);
  --sys-color-inverse-primary: var(--ref-palette-primary40);
  --sys-color-inverse-on-surface: var(--ref-palette-neutral10);

  /* Outlines */

  --sys-color-outline: var(--ref-palette-neutral-variant60);
  --sys-color-tonal-outline: var(--ref-palette-secondary40);
  --sys-color-neutral-outline: var(--ref-palette-neutral40);
  --sys-color-divider: var(--ref-palette-neutral30);

  /* States */

  --sys-color-state-hover-on-prominent: rgb(31 31 31 / 6%);
  --sys-color-state-hover-on-subtle: rgb(253 252 251 / 10%);
  --sys-color-state-hover-dim-blend-protection: rgb(31 31 31 / 10%);
  --sys-color-state-hover-bright-blend-protection: rgb(31 31 31 / 16%);
  --sys-color-state-ripple-neutral-on-prominent: rgb(31 31 31 / 12%);
  --sys-color-state-ripple-neutral-on-subtle: rgb(253 252 251 / 16%);
  --sys-color-state-ripple-primary: rgb(76 141 246 / 32%);
  --sys-color-state-focus-ring: var(--ref-palette-primary80);
  --sys-color-state-focus-highlight: rgb(253 252 251 / 10%);
  --sys-color-state-disabled: rgb(227 227 227 / 100%);
  --sys-color-state-disabled-container: rgb(227 227 227 / 12%);
  --sys-color-state-header-hover: var(--ref-palette-secondary30);
  --sys-color-state-on-header-hover: var(--ref-palette-secondary90);

  /* Surfaces */

  --sys-color-surface5: rgb(56 58 62 / 100%);
  --sys-color-surface4: rgb(52 54 58 / 100%);
  --sys-color-surface3: rgb(51 52 56 / 100%);
  --sys-color-surface2: rgb(45 47 49 / 100%);
  --sys-color-surface1: rgb(40 41 42 / 100%);

  /* Chrome DevTools Design System */

  /* Prominent accent colors for icons */

  --sys-color-primary-bright: var(--ref-palette-primary70);
  --sys-color-blue-bright: var(--ref-palette-blue70);
  --sys-color-green-bright: var(--ref-palette-tertiary70);
  --sys-color-error-bright: var(--ref-palette-error60);
  --sys-color-orange-bright: var(--ref-palette-orange70);
  --sys-color-yellow-bright: var(--ref-palette-yellow70);
  --sys-color-cyan-bright: var(--ref-palette-cyan70);
  --sys-color-purple-bright: var(--ref-palette-purple70);
  --sys-color-neutral-bright: var(--ref-palette-neutral50);

  /* Prominent accent colors for text */

  --sys-color-blue: var(--ref-palette-blue80);
  --sys-color-on-blue: var(--ref-palette-blue20);
  --sys-color-green: var(--ref-palette-green80);
  --sys-color-on-green: var(--ref-palette-green20);
  --sys-color-orange: var(--ref-palette-orange80);
  --sys-color-on-orange: var(--ref-palette-orange20);
  --sys-color-yellow: var(--ref-palette-yellow80);
  --sys-color-on-yellow: var(--ref-palette-yellow20);
  --sys-color-cyan: var(--ref-palette-cyan80);
  --sys-color-on-cyan: var(--ref-palette-cyan20);
  --sys-color-purple: var(--ref-palette-purple80);
  --sys-color-on-purple: var(--ref-palette-purple20);

  /* Containers */

  --sys-color-yellow-container: var(--ref-palette-yellow30);
  --sys-color-on-yellow-container: var(--ref-palette-yellow90);

  /* Universal surfaces */

  --sys-color-cdt-base: var(--sys-color-base);
  --sys-color-cdt-base-container: var(--sys-color-base-container);

  /* Tinted surfaces */

  --sys-color-surface-yellow: rgb(65 58 42 / 100%);
  --sys-color-surface-error: rgb(78 53 52 / 100%);

  /* Corresponding on colors */

  --sys-color-on-surface-yellow: var(--ref-palette-yellow90);
  --sys-color-on-surface-error: var(--ref-palette-error90);

  /* Syntax highlighting */

  --sys-color-token-variable: var(--ref-palette-neutral80);
  --sys-color-token-property: var(--ref-palette-yellow70);
  --sys-color-token-property-special: var(--ref-palette-cyan80);
  --sys-color-token-type: var(--ref-palette-primary70);
  --sys-color-token-definition: var(--ref-palette-primary70);
  --sys-color-token-variable-special: var(--ref-palette-primary40);
  --sys-color-token-builtin: var(--ref-palette-primary80);
  --sys-color-token-keyword: var(--ref-palette-primary40);
  --sys-color-token-number: var(--ref-palette-tertiary90);
  --sys-color-token-string: var(--ref-palette-orange70);
  --sys-color-token-string-special: var(--ref-palette-orange70);
  --sys-color-token-atom: var(--ref-palette-tertiary90);
  --sys-color-token-tag: var(--ref-palette-primary70);
  --sys-color-token-attribute: var(--ref-palette-primary80);
  --sys-color-token-attribute-value: var(--ref-palette-orange70);
  --sys-color-token-comment: var(--ref-palette-neutral70);
  --sys-color-token-meta: var(--ref-palette-neutral60);
  --sys-color-token-deleted: var(--ref-palette-error50);
  --sys-color-token-inserted: var(--ref-palette-tertiary60);
  --sys-color-token-pseudo-element: var(--ref-palette-pink70);
  --sys-color-token-subtle: var(--ref-palette-neutral60);
}
`
};
