| /* |
| * 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); |
| --color-token-pseudo-element: rgb(17 85 204); |
| |
| /* 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); |
| } |
| |
| .-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); |
| --color-token-pseudo-element: rgb(237 119 229); |
| |
| /* 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); |
| } |