mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Ruslan LesiutinandFacebook GitHub Bot
0dd3f803d8
Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/51963 Changelog: [Internal] - Update `react-native/debugger-frontend` from 41bf86b...68cfd0a Resyncs `react-native/debugger-frontend` from GitHub - see `rn-chrome-devtools-frontend` [changelog](https://github.com/facebook/react-native-devtools-frontend/compare/41bf86bdbb3e59e7711f11527efac67c050bca75...68cfd0ae84acb0ed8e47b421afd64ae3b0b5b727). ### Changelog | Commit | Author | Date/Time | Subject | | ------ | ------ | --------- | ------- | | [68cfd0ae8](https://github.com/facebook/react-native-devtools-frontend/commit/68cfd0ae8) | Ruslan Lesiutin (rdlesyutin@gmail.com) | 2025-06-11T19:20:10+01:00 | [feat: restore Performance landing page (#179)](https://github.com/facebook/react-native-devtools-frontend/commit/68cfd0ae8) | | [bc3bd7f55](https://github.com/facebook/react-native-devtools-frontend/commit/bc3bd7f55) | Ruslan Lesiutin (rdlesyutin@gmail.com) | 2025-06-11T12:19:18+01:00 | [chore: hide unsupported Detached elements memory profiling option (#178)](https://github.com/facebook/react-native-devtools-frontend/commit/bc3bd7f55) | | [1f9eb6528](https://github.com/facebook/react-native-devtools-frontend/commit/1f9eb6528) | Ruslan Lesiutin (rdlesyutin@gmail.com) | 2025-06-11T10:05:12+01:00 | [ci: minor naming and formatting fixes (#177)](https://github.com/facebook/react-native-devtools-frontend/commit/1f9eb6528) | | [42526665c](https://github.com/facebook/react-native-devtools-frontend/commit/42526665c) | Ruslan Lesiutin (rdlesyutin@gmail.com) | 2025-06-11T10:02:00+01:00 | [ci: split build workflow (#176)](https://github.com/facebook/react-native-devtools-frontend/commit/42526665c) | | [7307e9532](https://github.com/facebook/react-native-devtools-frontend/commit/7307e9532) | Ruslan Lesiutin (rdlesyutin@gmail.com) | 2025-06-10T19:43:08+01:00 | [chore: added lint GitHub workflow (#174)](https://github.com/facebook/react-native-devtools-frontend/commit/7307e9532) | | [8d613dd1c](https://github.com/facebook/react-native-devtools-frontend/commit/8d613dd1c) | Ruslan Lesiutin (rdlesyutin@gmail.com) | 2025-06-10T19:42:53+01:00 | [chore: more instructions on repository syncing (#173)](https://github.com/facebook/react-native-devtools-frontend/commit/8d613dd1c) | | [d449be9e2](https://github.com/facebook/react-native-devtools-frontend/commit/d449be9e2) | Ruslan Lesiutin (rdlesyutin@gmail.com) | 2025-06-10T18:48:14+01:00 | [Merge pull request #172 from facebook/repo-sync-7103](https://github.com/facebook/react-native-devtools-frontend/commit/d449be9e2) | Reviewed By: huntie Differential Revision: D76455694 fbshipit-source-id: e44a016afe25ae62d72cf4b02e620ba166a9eeb9
408 lines
16 KiB
CSS
408 lines
16 KiB
CSS
/*
|
|
* 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.
|
|
*/
|
|
|
|
/**
|
|
* Application-specific tokens list tokens that differ from our core design system.
|
|
*
|
|
* Before adding to this file, make sure that there's really no usable --sys-* definition
|
|
* in design_system_tokens.css. Additions to this file should be an exception.
|
|
*/
|
|
:root {
|
|
/* Colors */
|
|
|
|
--icon-action: var(--sys-color-primary-bright);
|
|
--icon-arrow-main-thread: var(--sys-color-primary-bright);
|
|
--icon-checkmark-green: var(--sys-color-green-bright);
|
|
--icon-default: var(--sys-color-on-surface-subtle);
|
|
--icon-default-hover: var(--sys-color-on-surface);
|
|
--icon-disabled: var(--sys-color-state-disabled);
|
|
--icon-error: var(--sys-color-error-bright);
|
|
--icon-file-authored: var(--sys-color-orange-bright);
|
|
--icon-file-default: var(--sys-color-on-surface-subtle);
|
|
--icon-file-document: var(--sys-color-blue-bright);
|
|
--icon-file-font: var(--sys-color-cyan-bright);
|
|
--icon-file-media: var(--sys-color-green-bright);
|
|
--icon-file-image: var(--sys-color-green-bright);
|
|
--icon-file-script: var(--sys-color-orange-bright);
|
|
--icon-file-styles: var(--sys-color-purple-bright);
|
|
--icon-fold-marker: var(--sys-color-on-surface-subtle);
|
|
--icon-folder-authored: var(--sys-color-orange);
|
|
--icon-folder-primary: var(--sys-color-on-surface-subtle);
|
|
--icon-folder-deployed: var(--sys-color-primary-bright);
|
|
--icon-folder-workspace: var(--sys-color-orange);
|
|
--icon-gap-focus-selected: var(--sys-color-tonal-container);
|
|
--icon-gap-default: var(--sys-color-cdt-base-container);
|
|
--icon-gap-inactive: var(--sys-color-neutral-container);
|
|
--icon-gap-hover: var(--sys-color-state-hover-on-subtle);
|
|
--icon-gap-toolbar: var(--sys-color-surface1);
|
|
--icon-gap-toolbar-hover: var(--sys-color-state-header-hover);
|
|
--icon-info: var(--sys-color-primary-bright);
|
|
--icon-link: var(--sys-color-primary-bright);
|
|
--icon-no-request: var(--sys-color-orange-bright);
|
|
--icon-primary: var(--sys-color-primary-bright);
|
|
--icon-request-response: var(--sys-color-primary-bright);
|
|
--icon-request: var(--sys-color-on-surface-subtle);
|
|
--icon-css: var(--sys-color-purple-bright);
|
|
--icon-css-hover: var(--sys-color-purple);
|
|
--icon-toggled: var(--sys-color-primary-bright);
|
|
--icon-warning: var(--sys-color-orange-bright);
|
|
--ui-text: var(--sys-color-on-surface-subtle);
|
|
--text-disabled: var(--ref-palette-neutral60);
|
|
--text-primary: var(--sys-color-on-surface);
|
|
--text-secondary: var(--sys-color-token-subtle);
|
|
--text-link: var(--sys-color-primary);
|
|
--color-grid-stripe: var(--sys-color-surface1);
|
|
--color-grid-default: var(--sys-color-surface);
|
|
--color-grid-focus-selected: var(--sys-color-tonal-container);
|
|
--color-grid-selected: var(--sys-color-surface-variant);
|
|
--color-grid-hovered: var(--sys-color-state-hover-on-subtle);
|
|
--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-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);
|
|
/** To draw grid lines behind elements */
|
|
--divider-line: rgb(0 0 0 / 10%);
|
|
--color-text-primary: rgb(32 33 36);
|
|
--color-text-secondary: rgb(95 99 104);
|
|
--color-text-disabled: rgb(128 134 139);
|
|
--color-red: rgb(238 68 47);
|
|
--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-3:
|
|
0 4px 8px 3px rgb(60 64 67 / 15%),
|
|
0 1px 3px 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%);
|
|
/** 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;
|
|
|
|
/* Colors used by the code editor */
|
|
--color-continue-to-location: var(--ref-palette-blue90);
|
|
--color-continue-to-location-hover: var(--ref-palette-blue80);
|
|
--color-continue-to-location-hover-border: var(--ref-palette-blue70);
|
|
--color-continue-to-location-async: var(--ref-palette-green90);
|
|
--color-continue-to-location-async-hover: var(--ref-palette-green80);
|
|
--color-continue-to-location-async-hover-border: var(--ref-palette-green70);
|
|
--color-evaluated-expression: var(--ref-palette-yellow95);
|
|
--color-evaluated-expression-border: var(--ref-palette-yellow70);
|
|
--color-variable-values: var(--ref-palette-orange90);
|
|
|
|
/* Color tokens for icons */
|
|
--color-primary: rgb(11 87 208);
|
|
--legacy-accent-color: #1a73e8;
|
|
--legacy-focus-ring-inactive-shadow-color: #e0e0e0;
|
|
--legacy-input-validation-error: #db1600;
|
|
--legacy-selection-bg-color: var(--legacy-accent-color);
|
|
--legacy-focus-ring-inactive-shadow: 0 0 0 1px var(--legacy-focus-ring-inactive-shadow-color);
|
|
--legacy-focus-ring-active-shadow: 0 0 0 1px var(--legacy-accent-color);
|
|
|
|
/* Color for strokestyle of canvas in flame chart */
|
|
/* It is the same color as sys-color-primary but with a 10% opacity */
|
|
--app-color-strokestyle: rgb(11 87 208 / 10%);
|
|
|
|
/* Colors for data grid in Performance Panel */
|
|
|
|
--app-color-selected-progress-bar: var(--ref-palette-primary80);
|
|
--app-border-selected-progress-bar: var(--ref-palette-primary70);
|
|
|
|
/* Colors for timeline in Performance Panel */
|
|
|
|
--app-color-loading: var(--ref-palette-blue70);
|
|
--app-color-loading-children: var(--ref-palette-blue80);
|
|
--app-color-scripting: var(--ref-palette-yellow70);
|
|
--app-color-scripting-children: var(--ref-palette-yellow80);
|
|
--app-color-rendering: var(--ref-palette-purple70);
|
|
--app-color-rendering-children: var(--ref-palette-purple80);
|
|
--app-color-painting: var(--ref-palette-green70);
|
|
--app-color-painting-children: var(--ref-palette-green80);
|
|
--app-color-messaging: var(--ref-palette-cyan70);
|
|
--app-color-messaging-children: var(--ref-palette-cyan80);
|
|
--app-color-task: var(--ref-palette-neutral80);
|
|
--app-color-task-children: var(--ref-palette-neutral90);
|
|
--app-color-system: var(--ref-palette-neutral80);
|
|
--app-color-system-children: var(--ref-palette-neutral90);
|
|
--app-color-idle: var(--ref-palette-neutral90);
|
|
--app-color-idle-children: var(--ref-palette-neutral100);
|
|
--app-color-async: var(--ref-palette-error60);
|
|
--app-color-async-children: var(--ref-palette-error70);
|
|
--app-color-other: var(--ref-palette-neutral87);
|
|
--app-color-doc: var(--ref-palette-blue60);
|
|
--app-color-css: var(--ref-palette-purple60);
|
|
--app-color-image: var(--ref-palette-green80);
|
|
--app-color-media: var(--ref-palette-green60);
|
|
--app-color-font: var(--ref-palette-cyan60);
|
|
--app-color-wasm: var(--ref-palette-indigo60);
|
|
|
|
/**
|
|
* Color for the active breadcrumb in the Performance Panel timeline.
|
|
*/
|
|
--app-color-active-breadcrumb: var(--ref-palette-blue40);
|
|
|
|
/**
|
|
* Colors for the pie chart in the Memory panel.
|
|
*/
|
|
--app-color-code: var(--ref-palette-cyan70);
|
|
--app-color-strings: var(--ref-palette-purple70);
|
|
--app-color-js-arrays: var(--ref-palette-green70);
|
|
--app-color-typed-arrays: var(--ref-palette-indigo60);
|
|
--app-color-other-js-objects: var(--ref-palette-blue70);
|
|
--app-color-other-non-js-objects: var(--ref-palette-yellow70);
|
|
|
|
/**
|
|
* Colors for Coverage visualization.
|
|
*/
|
|
--app-color-coverage-used: var(--ref-palette-neutral80);
|
|
--app-color-coverage-unused: var(--sys-color-error-bright);
|
|
--app-color-toolbar-background: var(--sys-color-surface4);
|
|
|
|
/**
|
|
* Colors for menus.
|
|
*/
|
|
--app-color-menu-background: var(--sys-color-surface);
|
|
|
|
/**
|
|
* Colors for navigation drawers.
|
|
*/
|
|
--app-color-navigation-drawer-label-selected: var(--sys-color-on-surface);
|
|
--app-color-navigation-drawer-background-selected: var(--ref-palette-primary95);
|
|
|
|
/**
|
|
* Colors for performance panel metric ratings.
|
|
*/
|
|
--app-color-performance-bad: var(--sys-color-error-bright);
|
|
--app-color-performance-ok: var(--sys-color-orange-bright);
|
|
--app-color-performance-good: var(--sys-color-green-bright);
|
|
--app-color-performance-bad-dim: var(--sys-color-error);
|
|
--app-color-performance-ok-dim: var(--sys-color-orange);
|
|
--app-color-performance-good-dim: var(--sys-color-green);
|
|
|
|
/**
|
|
* Colors for performance panel annotations list in sidebar.
|
|
*/
|
|
--app-color-performance-sidebar-time-range: var(--ref-palette-pink60);
|
|
--app-color-performance-sidebar-label-text-dark: var(--ref-palette-neutral10);
|
|
--app-color-performance-sidebar-label-text-light: var(--ref-palette-neutral100);
|
|
|
|
/**
|
|
* Colors for cards.
|
|
*/
|
|
--app-color-card-background: var(--sys-color-base-container-elevated);
|
|
--app-color-card-divider: color-mix(in srgb, var(--ref-palette-neutral0) 6%, transparent);
|
|
|
|
/**
|
|
* Colors for element panel sidebar subtitle
|
|
*/
|
|
--app-color-element-sidebar-subtitle: var(--ref-palette-neutral50);
|
|
|
|
/**
|
|
* Color for input driver for AI assistance chat
|
|
*/
|
|
--app-color-ai-assistance-input-divider: rgb(0 0 0 / 10%);
|
|
|
|
&.baseline-default {
|
|
/**
|
|
* Color for navigation drawers.
|
|
*/
|
|
--app-color-navigation-drawer-label-selected: var(--sys-color-primary);
|
|
|
|
&.theme-with-dark-background {
|
|
/**
|
|
* Color for navigation drawers.
|
|
*/
|
|
--app-color-navigation-drawer-label-selected: var(--sys-color-surface);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Combobox image.
|
|
*/
|
|
--combobox-dropdown-arrow: var(--image-file-arrow-drop-down-light);
|
|
|
|
&.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-1: rgb(41 42 45);
|
|
--color-background-elevation-2: rgb(53 54 58);
|
|
--color-background-elevation-dark-only: var(--color-background-elevation-1);
|
|
--divider-line: rgb(255 255 255 / 10%);
|
|
--color-text-primary: rgb(232 234 237);
|
|
--color-text-secondary: rgb(154 160 166);
|
|
--color-text-disabled: rgb(128 134 139);
|
|
--color-red: rgb(237 78 76);
|
|
--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-3:
|
|
0 4px 8px 3px rgb(0 0 0 / 15%),
|
|
0 1px 3px 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%);
|
|
|
|
/* Colors used by the code editor */
|
|
--color-continue-to-location: var(--ref-palette-yellow30);
|
|
--color-continue-to-location-hover: var(--ref-palette-yellow40);
|
|
--color-continue-to-location-hover-border: var(--ref-palette-yellow50);
|
|
--color-continue-to-location-async: var(--ref-palette-green30);
|
|
--color-continue-to-location-async-hover: var(--ref-palette-green4);
|
|
--color-continue-to-location-async-hover-border: var(--ref-palette-green50);
|
|
--color-evaluated-expression: var(--ref-palette-yellow30);
|
|
--color-evaluated-expression-border: var(--ref-palette-yellow40);
|
|
--color-variable-values: var(--sys-color-surface-error);
|
|
|
|
/* Color tokens for icons */
|
|
--color-primary: rgb(168 199 250);
|
|
|
|
/**
|
|
* Inherit the native form control colors when using a dark theme.
|
|
* Override them using CSS variables if needed.
|
|
*/
|
|
color-scheme: dark;
|
|
|
|
--legacy-accent-color: #0e639c;
|
|
--legacy-focus-ring-inactive-shadow-color: #5a5a5a;
|
|
--legacy-focus-ring-inactive-shadow: 0 0 0 1px var(--legacy-focus-ring-inactive-shadow-color);
|
|
|
|
/* Color for strokestyle of canvas in flame chart */
|
|
/* It is the same color as sys-color-primary but with a 10% opacity */
|
|
--app-color-strokestyle: rgb(168 199 250 / 10%);
|
|
|
|
/* Colors for data grid in Performance Panel */
|
|
|
|
--app-color-selected-progress-bar: var(--ref-palette-secondary40);
|
|
--app-border-selected-progress-bar: var(--ref-palette-secondary50);
|
|
|
|
/* Colors for timeline in Performance Panel */
|
|
|
|
--app-color-loading: var(--ref-palette-blue60);
|
|
--app-color-loading-children: var(--ref-palette-blue50);
|
|
--app-color-scripting: var(--ref-palette-yellow70);
|
|
--app-color-scripting-children: var(--ref-palette-yellow60);
|
|
--app-color-rendering: var(--ref-palette-purple60);
|
|
--app-color-rendering-children: var(--ref-palette-purple50);
|
|
--app-color-painting: var(--ref-palette-green70);
|
|
--app-color-painting-children: var(--ref-palette-green60);
|
|
--app-color-task: var(--ref-palette-neutral80);
|
|
--app-color-task-children: var(--ref-palette-neutral70);
|
|
--app-color-system: var(--ref-palette-neutral50);
|
|
--app-color-system-children: var(--ref-palette-neutral40);
|
|
--app-color-idle: var(--ref-palette-neutral30);
|
|
--app-color-idle-children: var(--ref-palette-neutral20);
|
|
--app-color-async: var(--ref-palette-error60);
|
|
--app-color-async-children: var(--ref-palette-error50);
|
|
--app-color-other: var(--ref-palette-neutral60);
|
|
--app-color-doc: var(--ref-palette-blue60);
|
|
--app-color-css: var(--ref-palette-purple60);
|
|
--app-color-image: var(--ref-palette-green80);
|
|
--app-color-media: var(--ref-palette-green60);
|
|
--app-color-font: var(--ref-palette-cyan60);
|
|
--app-color-wasm: var(--ref-palette-indigo60);
|
|
|
|
/**
|
|
* Color for the active breadcrumb in the Performance Panel timeline.
|
|
*/
|
|
--app-color-active-breadcrumb: var(--ref-palette-blue40);
|
|
|
|
/**
|
|
* Colors for the pie chart in the Memory panel.
|
|
*/
|
|
--app-color-code: var(--ref-palette-cyan70);
|
|
--app-color-strings: var(--ref-palette-purple60);
|
|
--app-color-js-arrays: var(--ref-palette-green70);
|
|
--app-color-typed-arrays: var(--ref-palette-indigo60);
|
|
--app-color-other-js-objects: var(--ref-palette-blue60);
|
|
--app-color-other-non-js-objects: var(--ref-palette-yellow70);
|
|
|
|
/**
|
|
* Gradients
|
|
*/
|
|
--sys-color-gradient-primary: var(--ref-palette-primary30);
|
|
--sys-color-gradient-tertiary: var(--ref-palette-tertiary30);
|
|
|
|
/**
|
|
* Colors for Coverage visualization.
|
|
*/
|
|
--app-color-coverage-used: var(--ref-palette-neutral40);
|
|
--app-color-coverage-unused: var(--sys-color-error-bright);
|
|
--app-color-toolbar-background: var(--sys-color-base);
|
|
|
|
/**
|
|
* Colors for menus.
|
|
*/
|
|
--app-color-menu-background: var(--sys-color-surface3);
|
|
|
|
/**
|
|
* Colors for navigation drawers.
|
|
*/
|
|
--app-color-navigation-drawer-label-selected: var(--sys-color-surface);
|
|
--app-color-navigation-drawer-background-selected: var(--ref-palette-primary70);
|
|
|
|
/**
|
|
* Colors for cards.
|
|
*/
|
|
--app-color-card-divider: color-mix(in srgb, var(--ref-palette-neutral100) 10%, transparent);
|
|
--app-color-card-background: var(--sys-color-surface2);
|
|
|
|
/**
|
|
* Colors for element panel sidebar subtitle
|
|
*/
|
|
--app-color-element-sidebar-subtitle: var(--sys-color-token-subtle);
|
|
|
|
/**
|
|
* Color for input driver for AI assistance chat
|
|
*/
|
|
--app-color-ai-assistance-input-divider: rgb(255 255 255 / 15%);
|
|
|
|
/**
|
|
* Combobox image.
|
|
*/
|
|
--combobox-dropdown-arrow: var(--image-file-arrow-drop-down-dark);
|
|
}
|
|
|
|
/* Colors end */
|
|
}
|