mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-11 14:14:36 +08:00
Tim van der Lippe
3fa8654ce6
For all of these files, there was no occurrence of the word "color" in them. Therefore, most of these files were complete noops. There were two exceptions: some white backgrounds and a box shadow used for image previews in the sources panel. For the latter, a new CSS variable is extracted into themeColors.css R=jacktfranklin@chromium.org Bug: 1152736 Change-Id: I40f2f1e28cc3c7038b831003f1eb32cc923b411a Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2567113 Reviewed-by: Jack Franklin <jacktfranklin@chromium.org> Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
69 lines
2.1 KiB
CSS
69 lines
2.1 KiB
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.
|
|
*/
|
|
|
|
/**
|
|
* 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: #1a73e8;
|
|
--color-primary-variant: #4285f4;
|
|
--color-background: #fff;
|
|
--color-background-elevation-1: #f1f3f4;
|
|
--color-background-elevation-2: #dee1e6;
|
|
--color-background-highlight: #cacdd1;
|
|
--color-text-primary: #202124;
|
|
--color-text-secondary: #5f6368;
|
|
--color-text-disabled: #80868b;
|
|
--color-details-hairline: #cacdd1;
|
|
--color-accent-red: #d93025;
|
|
--color-accent-green: #188038;
|
|
--color-link: var(--color-primary);
|
|
--color-syntax-1: #c80000;
|
|
--color-syntax-2: #881280;
|
|
--color-syntax-3: #1a1aa6;
|
|
--color-syntax-4: #994500;
|
|
--color-syntax-5: #84f0ff;
|
|
--color-syntax-6: #236e25;
|
|
--color-syntax-7: #303942;
|
|
--color-syntax-8: #a894a6;
|
|
--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%);
|
|
--box-shadow-outline-color: rgb(0 0 0 / 50%);
|
|
}
|
|
|
|
.-theme-with-dark-background {
|
|
--color-primary: #8ab4f8;
|
|
--color-primary-variant: #669df6;
|
|
--color-background: #202124;
|
|
--color-background-elevation-1: #292a2d;
|
|
--color-background-elevation-2: #35363a;
|
|
--color-background-highlight: #4b4c4f;
|
|
--color-text-primary: #e8eaed;
|
|
--color-text-secondary: #9aa0a6;
|
|
--color-text-disabled: #80868b;
|
|
--color-details-hairline: #494c50;
|
|
--color-accent-red: #f28b82;
|
|
--color-accent-green: #81c995;
|
|
--color-link: var(--color-primary);
|
|
--color-syntax-1: #35d4c7;
|
|
--color-syntax-2: #5db0d7;
|
|
--color-syntax-3: #f29766;
|
|
--color-syntax-4: #9bbbdc;
|
|
--color-syntax-5: #84f0ff;
|
|
--color-syntax-6: #898989;
|
|
--color-syntax-7: #cfd0d0;
|
|
--color-syntax-8: #5db0d7;
|
|
--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%);
|
|
--box-shadow-outline-color: rgb(0 0 0 / 50%);
|
|
}
|