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

Tidied up CSS variables

Browse Source
This commit is contained in:
Brian Vaughn
2019-04-21 08:38:58 -07:00
parent 66df03d179
commit 09b995ab1c
11 changed files with 35 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/devtools/views/Components/Element.css
+5 -5
View File
@@ -11,10 +11,10 @@
user-select: none;
}
.HoveredElement {
background-color: var(--color-hover-background);
background-color: var(--color-background-hover);
}
.InactiveSelectedElement {
background-color: var(--color-inactive-background);
background-color: var(--color-background-inactive);
}
.ScrollAnchor {
@@ -23,13 +23,13 @@
}
.SelectedElement {
background-color: var(--color-selected-background);
color: var(--color-selected-foreground);
background-color: var(--color-background-selected);
color: var(--color-text-selected);
/* Invert colors */
--color-component-name: var(--color-component-name-inverted);
--color-jsx-arrow-brackets: var(--color-jsx-arrow-brackets-inverted);
--color-attribute-name: var(--color-hover-background);
--color-attribute-name: var(--color-background-hover);
--color-attribute-value: var(--color-component-name-inverted);
--color-expand-collapse-toggle: var(--color-component-name-inverted);
}
src/devtools/views/Components/OwnersStack.css
+2 -2
View File
@@ -17,8 +17,8 @@
.Component[data-reach-menu-item][data-selected],
.Component[data-reach-menu-item][data-selected]:hover {
color: var(--color-selected-foreground);
background: var(--color-selected-background);
color: var(--color-text-selected);
background: var(--color-background-selected);
}
.Component[data-reach-menu-item][data-selected]:focus {
outline: none;
src/devtools/views/Profiler/InteractionListItem.css
+2 -2
View File
@@ -7,11 +7,11 @@
}
.Interaction:hover {
background-color: var(--color-hover-background);
background-color: var(--color-background-hover);
}
.SelectedInteraction {
background-color: var(--color-hover-background);
background-color: var(--color-background-hover);
}
.Name {
src/devtools/views/Profiler/SidebarCommitInfo.css
+1 -1
View File
@@ -41,7 +41,7 @@
.Interaction:focus,
.Interaction:hover {
outline: none;
background-color: var(--color-hover-background);
background-color: var(--color-background-hover);
}
.Label {
src/devtools/views/Profiler/SidebarInteractions.css
+1 -1
View File
@@ -44,7 +44,7 @@
padding: 0.25rem 0.5rem;
}
.ListItem:hover {
background-color: var(--color-hover-background);
background-color: var(--color-background-hover);
}
.CommitBox {
src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
+3 -3
View File
@@ -46,12 +46,12 @@
.Commit:focus,
.Commit:hover {
outline: none;
background-color: var(--color-hover-background);
background-color: var(--color-background-hover);
}
.CurrentCommit {
background-color: var(--color-selected-background);
color: var(--color-selected-foreground);
background-color: var(--color-background-selected);
color: var(--color-text-selected);
}
.CurrentCommit:focus {
outline: none;
src/devtools/views/Profiler/SnapshotCommitListItem.js
+1 -1
View File
@@ -52,7 +52,7 @@ function SnapshotCommitListItem({ data: itemData, index, style }: Props) {
...style,
width,
borderBottom: isSelected
? '3px solid var(--color-selected-border)'
? '3px solid var(--color-tab-selected-border)'
: undefined,
}}
title={`Duration ${formatDuration(commitDuration)}ms at ${formatTime(
src/devtools/views/Settings/Settings.css
+2 -2
View File
@@ -39,7 +39,7 @@
}
.Option:hover {
background-color: var(--color-hover-background);
background-color: var(--color-background-hover);
}
.Option:first-of-type {
@@ -54,7 +54,7 @@
}
.ScreenshotThrottling {
background-color: var(--color-hover-background);
background-color: var(--color-background-hover);
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
}
src/devtools/views/Settings/SettingsContext.js
+5 -5
View File
@@ -203,6 +203,9 @@ function updateThemeVariables(
updateStyleHelper(theme, 'color-attribute-value', documentElements);
updateStyleHelper(theme, 'color-attribute-editable-value', documentElements);
updateStyleHelper(theme, 'color-background', documentElements);
updateStyleHelper(theme, 'color-background-hover', documentElements);
updateStyleHelper(theme, 'color-background-inactive', documentElements);
updateStyleHelper(theme, 'color-background-selected', documentElements);
updateStyleHelper(theme, 'color-border', documentElements);
updateStyleHelper(theme, 'color-button-background', documentElements);
updateStyleHelper(theme, 'color-button-background-focus', documentElements);
@@ -229,8 +232,6 @@ function updateThemeVariables(
updateStyleHelper(theme, 'color-dimmer', documentElements);
updateStyleHelper(theme, 'color-dimmest', documentElements);
updateStyleHelper(theme, 'color-expand-collapse-toggle', documentElements);
updateStyleHelper(theme, 'color-hover-background', documentElements);
updateStyleHelper(theme, 'color-inactive-background', documentElements);
updateStyleHelper(theme, 'color-jsx-arrow-brackets', documentElements);
updateStyleHelper(
theme,
@@ -241,12 +242,11 @@ function updateThemeVariables(
updateStyleHelper(theme, 'color-record-active', documentElements);
updateStyleHelper(theme, 'color-record-hover', documentElements);
updateStyleHelper(theme, 'color-record-inactive', documentElements);
updateStyleHelper(theme, 'color-selected-background', documentElements);
updateStyleHelper(theme, 'color-selected-border', documentElements);
updateStyleHelper(theme, 'color-selected-foreground', documentElements);
updateStyleHelper(theme, 'color-search-match', documentElements);
updateStyleHelper(theme, 'color-search-match-current', documentElements);
updateStyleHelper(theme, 'color-tab-selected-border', documentElements);
updateStyleHelper(theme, 'color-text', documentElements);
updateStyleHelper(theme, 'color-text-selected', documentElements);
updateStyleHelper(theme, 'color-tooltip-background', documentElements);
updateStyleHelper(theme, 'color-tooltip-text', documentElements);
src/devtools/views/TabBar.css
+3 -3
View File
@@ -13,15 +13,15 @@
}
.Tab:hover,
.TabCurrent:hover {
background-color: var(--color-hover-background);
background-color: var(--color-background-hover);
}
.Tab:focus-within,
.TabCurrent:focus-within {
background-color: var(--color-hover-background);
background-color: var(--color-background-hover);
}
.TabCurrent {
border-bottom: 3px solid var(--color-selected-border);
border-bottom: 3px solid var(--color-tab-selected-border);
}
.TabDisabled {
src/devtools/views/root.css
+10 -10
View File
@@ -8,6 +8,9 @@
--light-color-attribute-value: #1a1aa6;
--light-color-attribute-editable-value: #1a1aa6;
--light-color-background: #ffffff;
--light-color-background-hover: #ebf1fb;
--light-color-background-inactive: #e5e5e5;
--light-color-background-selected: #0088fa;
--light-color-button-background: #ffffff;
--light-color-button-background-focus: #ededed;
--light-color-button: #5f6673;
@@ -34,8 +37,6 @@
--light-color-dimmer: #cfd1d5;
--light-color-dimmest: #eff0f1;
--light-color-expand-collapse-toggle: #777d88;
--light-color-hover-background: #ebf1fb;
--light-color-inactive-background: #e5e5e5;
--light-color-jsx-arrow-brackets: #333333;
--light-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
--light-color-modal-background: rgba(255, 255, 255, 0.75);
@@ -44,10 +45,9 @@
--light-color-record-inactive: #0088fa;
--light-color-search-match: yellow;
--light-color-search-match-current: #f7923b;
--light-color-selected-background: #0088fa;
--light-color-selected-border: #0088fa;
--light-color-selected-foreground: #ffffff;
--light-color-tab-selected-border: #0088fa;
--light-color-text: #000000;
--light-color-text-selected: #ffffff;
--light-color-tooltip-background: rgba(0, 0, 0, 0.9);
--light-color-tooltip-text: #ffffff;
@@ -56,6 +56,9 @@
--dark-color-attribute-value: #cedae0;
--dark-color-attribute-editable-value: yellow;
--dark-color-background: #282c34;
--dark-color-background-hover: #3d424a;
--dark-color-background-inactive: #3d424a;
--dark-color-background-selected: #178fb9;
--dark-color-button-background: #282c34;
--dark-color-button-background-focus: #3d424a;
--dark-color-button: #afb3b9;
@@ -82,8 +85,6 @@
--dark-color-dimmer: #777d88;
--dark-color-dimmest: #4f5766;
--dark-color-expand-collapse-toggle: #8f949d;
--dark-color-hover-background: #3d424a;
--dark-color-inactive-background: #3d424a;
--dark-color-jsx-arrow-brackets: #777d88;
--dark-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
--dark-color-modal-background: rgba(0, 0, 0, 0.75);
@@ -92,10 +93,9 @@
--dark-color-record-inactive: #61dafb;
--dark-color-search-match: yellow;
--dark-color-search-match-current: #f7923b;
--dark-color-selected-background: #178fb9;
--dark-color-selected-border: #178fb9;
--dark-color-selected-foreground: #ffffff;
--dark-color-tab-selected-border: #178fb9;
--dark-color-text: #ffffff;
--dark-color-text-selected: #ffffff;
--dark-color-tooltip-background: rgba(255, 255, 255, 0.9);
--dark-color-tooltip-text: #000000;