Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Cleaned up style vars

Browse Source
This commit is contained in:
Brian Vaughn
2019-02-05 11:23:37 +00:00
parent 1566141177
commit 6dc3fa6fbd
10 changed files with 101 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/devtools/views/Element.css
+14 -12
View File
@@ -10,18 +10,20 @@
align-items: center;
}
.Element:hover {
background-color: var(--color-state03);
background-color: var(--color-tree-node-hover);
}
.SelectedElement {
background-color: var(--color-state00);
background-color: var(--color-tree-node-selected);
/* Invert colors */
--color-component: var(--color-base00);
--color-arrow: var(--color-base00);
--color-tree-tag: rgba(255, 255, 255, 0.8);
--color-tree-attr-name: #b3e5fc;
--color-tree-attr-value: #fff;
--color-component-name: var(--color-component-name-inverted);
--color-arrow: var(--color-arrow-inverted);
--color-tree-jsx-arrow-brackets: var(
--color-tree-jsx-arrow-brackets-inverted
);
--color-attribute-name: #b3e5fc;
--color-attribute-value: #fff;
}
.ArrowClosed,
@@ -37,23 +39,23 @@
}
.Component {
color: var(--color-component);
color: var(--color-component-name);
}
.Component:before {
white-space: nowrap;
content: '<';
color: var(--color-tree-tag);
color: var(--color-tree-jsx-arrow-brackets);
}
.Component:after {
white-space: nowrap;
content: '>';
color: var(--color-tree-tag);
color: var(--color-tree-jsx-arrow-brackets);
}
.AttributeName {
color: var(--color-tree-attr-name);
color: var(--color-attribute-name);
}
.AttributeValue {
color: var(--color-tree-attr-value);
color: var(--color-attribute-value);
}
src/devtools/views/Elements.css
+1 -1
View File
@@ -3,7 +3,7 @@
height: 100%;
display: flex;
flex-direction: row;
background-color: var(--color-background);
font-family: var(--font-family-sans);
}
src/devtools/views/HooksTree.css
+4 -4
View File
@@ -1,6 +1,6 @@
.HooksTreeView {
padding: 0.25rem;
border-bottom: 1px solid var(--color-base02);
border-bottom: 1px solid var(--color-border);
}
.HooksNode {
@@ -11,14 +11,14 @@
}
.Name {
color: var(--color-tree-attr-name);
color: var(--color-attribute-name);
}
.Value {
color: var(--color-tree-attr-value);
color: var(--color-attribute-value);
}
.None {
color: var(--color-base03);
color: var(--color-deemphasized);
font-style: italic;
}
src/devtools/views/InspectedElementTree.css
+10 -4
View File
@@ -1,20 +1,26 @@
.InspectedElementTree {
padding: 0.25rem;
border-bottom: 1px solid var(--color-base02);
border-bottom: 1px solid var(--color-border);
}
.Item {
}
.Name {
color: var(--color-tree-attr-name);
color: var(--color-attribute-name);
}
.Value {
color: var(--color-tree-attr-value);
color: var(--color-attribute-value);
}
.None {
color: var(--color-base03);
color: var(--color-deemphasized);
font-style: italic;
}
.Empty {
color: var(--color-deemphasized);
font-style: italic;
padding-left: 1rem;
}
src/devtools/views/InspectedElementTree.js
+15 -6
View File
@@ -6,12 +6,19 @@ import { meta } from '../../hydration';
import styles from './InspectedElementTree.css';
type Props = {|
label: string,
data: Object | null,
label: string,
showWhenEmpty?: boolean,
|};
export default function InspectedElementTree({ data, label }: Props) {
if (data === null || Object.keys(data).length === 0) {
export default function InspectedElementTree({
data,
label,
showWhenEmpty = false,
}: Props) {
const isEmpty = data === null || Object.keys(data).length === 0;
if (isEmpty && !showWhenEmpty) {
return null;
} else {
// TODO Add click and key handlers for toggling element open/close state.
@@ -19,9 +26,11 @@ export default function InspectedElementTree({ data, label }: Props) {
return (
<div className={styles.InspectedElementTree}>
<div className={styles.Item}>{label}</div>
{Object.keys(data).map(name => (
<KeyValue key={name} depth={1} name={name} value={data[name]} />
))}
{isEmpty && <div className={styles.Empty}>None</div>}
{!isEmpty &&
Object.keys((data: any)).map(name => (
<KeyValue key={name} depth={1} name={name} value={(data: any)[name]} />
))}
</div>
);
}
src/devtools/views/SelectedElement.css
+11 -11
View File
@@ -3,8 +3,8 @@
flex-direction: column;
height: 100%;
width: 100%;
border-left: 1px solid var(--color-base02);
border-top: 1px solid var(--color-base02);
border-left: 1px solid var(--color-border);
border-top: 1px solid var(--color-border);
}
.TitleRow {
@@ -12,7 +12,7 @@
display: flex;
align-items: center;
font-size: 16px;
border-bottom: 1px solid var(--color-base02);
border-bottom: 1px solid var(--color-border);
padding: 0.5rem;
}
@@ -24,10 +24,10 @@
align-items: center;
padding: 0.25rem;
cursor: pointer;
color: var(--color-state00);
color: var(--color-button);
}
.IconButton:hover {
color: var(--color-special02);
color: var(--color-button-hover);
}
.SelectedComponentName {
@@ -44,19 +44,19 @@
.Owner {
overflow: hidden;
text-overflow: ellipsis;
color: var(--color-component);
color: var(--color-component-name);
}
.Component:before,
.Owner:before {
white-space: nowrap;
content: '<';
color: var(--color-tree-tag);
color: var(--color-tree-jsx-arrow-brackets);
}
.Component:after,
.Owner:after {
white-space: nowrap;
content: '>';
color: var(--color-tree-tag);
color: var(--color-tree-jsx-arrow-brackets);
}
.Component {
@@ -66,8 +66,8 @@
.InspectedElement {
overflow: auto;
font-family: var(--font-family-monospace);
font-size: var(--font-size-tree-compact);
line-height: var(--line-height-compact);
font-size: var(--font-size-normal);
line-height: var(--line-height-data);
}
.Owner {
@@ -77,6 +77,6 @@
.Loading {
padding: 0.25rem;
color: var(--color-base03);
color: var(--color-deemphasized);
font-style: italic;
}
src/devtools/views/SelectedElement.js
+1 -1
View File
@@ -87,7 +87,7 @@ function InspectedElementView({
return (
<div className={styles.InspectedElement}>
<InspectedElementTree label="props" data={props} />
<InspectedElementTree label="props" data={props} showWhenEmpty />
<InspectedElementTree label="state" data={state} />
<HooksTree hooksTree={hooks} />
<InspectedElementTree label="context" data={context} />
src/devtools/views/Tree.css
+6 -6
View File
@@ -3,7 +3,7 @@
width: 100%;
display: flex;
flex-direction: column;
border-top: 1px solid var(--color-base02);
border-top: 1px solid var(--color-border);
}
.SearchRow {
@@ -11,7 +11,7 @@
display: flex;
align-items: center;
font-size: 16px;
border-bottom: 1px solid var(--color-base02);
border-bottom: 1px solid var(--color-border);
padding: 0.5rem;
}
@@ -34,11 +34,11 @@
align-items: center;
padding: 0.25rem;
cursor: pointer;
color: var(--color-state00);
color: var(--color-button);
flex: 0 0 auto;
}
.IconButton:hover {
color: var(--color-special02);
color: var(--color-button-hover);
}
.AutoSizerWrapper {
@@ -50,6 +50,6 @@
.List {
font-family: var(--font-family-monospace);
font-size: var(--font-size-tree-compact);
line-height: var(--line-height-tree-compact);
font-size: var(--font-size-normal);
line-height: var(--line-height-data);
}
src/devtools/views/root.css
+38 -33
View File
@@ -1,45 +1,50 @@
:root {
/* TODO */
--color-base00: #ffffff;
--color-base01: #f3f3f3;
--color-base02: #eeeeee;
--color-base03: #cfd1d5;
--color-base04: #333333;
--color-base05: #5a5a5a;
--color-special00: #8155cb;
--color-special01: #222222;
--color-special02: #1a1aa6;
--color-special03: #c80000;
--color-special04: #236e25;
--color-special05: #aa0d91;
--color-special06: #ef6632;
--color-special07: #777d88;
--color-state00: #0088fa;
--color-state01: #dadada;
--color-state02: #ffffff;
--color-state03: #ebf1fb;
--color-state04: #ffff00;
--color-state05: #222222;
--color-state06: #222222;
/* Light theme */
--theme-light-arrow: #777d88;
--theme-light-arrow-inverted: #ffffff;
--theme-light-attribute-name: #ef6632;
--theme-light-attribute-value: #1a1aa6;
--theme-light-background: #ffffff;
--theme-light-button: #0088fa;
--theme-light-button-hover: #1a1aa6;
--theme-light-color-border: #eeeeee;
--theme-light-component-name: #8155cb;
--theme-light-component-name-inverted: #ffffff;
--theme-light-deemphasized: #cfd1d5;
--theme-light-jsx-arrow-brackets: #333333;
--theme-light-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.8);
--theme-light-tree-node-selected: #0088fa;
--theme-light-tree-node-hover: #ebf1fb;
--color-arrow: var(--color-special07);
--color-component: var(--color-special00);
--color-tree-tag: var(--color-base04);
--color-tree-attr-name: var(--color-special06);
--color-tree-attr-value: var(--color-special02);
/* TODO Dark theme */
--line-height-tree-compact: 1.5;
--line-height-tree-normal: 1.5;
/* "theme" values referenced by other stylesheets */
--color-arrow: var(--theme-light-arrow);
--color-arrow-inverted: var(--theme-light-arrow-inverted);
--color-attribute-name: var(--theme-light-attribute-name);
--color-attribute-value: var(--theme-light-attribute-value);
--color-background: var(--theme-light-background);
--color-border: var(--theme-light-color-border);
--color-button: var(--theme-light-button);
--color-button-hover: var(--theme-light-button-hover);
--color-component-name: var(--theme-light-component-name);
--color-component-name-inverted: var(--theme-light-component-name-inverted);
--color-deemphasized: var(--theme-light-deemphasized);
--color-tree-jsx-arrow-brackets: var(--theme-light-jsx-arrow-brackets);
--color-tree-jsx-arrow-brackets-inverted: var(
--theme-light-jsx-arrow-brackets-inverted
);
--color-tree-node-selected: var(--theme-light-tree-node-selected);
--color-tree-node-hover: var(--theme-light-tree-node-hover);
--font-size-normal: 12px;
--line-height-data: 1.5rem;
/* GitHub.com system fonts */
--font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
Courier, monospace;
--font-family-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
--font-size-tree-compact: 12px;
--font-size-tree-normal: 14px;
--line-height-compact: 20px;
--line-height-normal: 24px;
}
* {
src/devtools/views/utils.js
+1 -1
View File
@@ -5,7 +5,7 @@ import { meta } from '../../hydration';
export function getMetaValueLabel(data: Object): string | null {
switch (data[meta.type]) {
case 'react_element':
return `<${data[meta.name]} />`;
return `<${data[meta.name]}/>`;
case 'function':
return `${data[meta.name] || 'fn'}()`;
case 'object':