CSS tweaks
Brian Vaughn committed
May 13, 2019 at 14:51 UTC
6b4c75833835d4985908abdd95ab1f08f3ba8722
3 files changed
+26
-9
src/devtools/views/Components/Element.css
+12
-9
@@ -28,6 +28,9 @@
28
29
/* Invert colors */
30
--color-component-name: var(--color-component-name-inverted);
31
+ --color-component-badge-background: var(
32
+ --color-component-badge-background-inverted
33
+ );
34
--color-jsx-arrow-brackets: var(--color-jsx-arrow-brackets-inverted);
35
--color-attribute-name: var(--color-background-hover);
36
--color-attribute-value: var(--color-component-name-inverted);
@@ -74,12 +77,12 @@
77
color: var(--color-expand-collapse-toggle);
78
}
79
77
-.Badge{
78
- background: var(--color-component-name);
79
- color: #000;
80
- line-height: calc(var(--line-height-data) - 0.25rem);
81
- padding: 0 0.55rem;
82
- border-radius: 5px;
83
- margin-left: 0.5rem;
84
- font-size: calc(var(--font-size-monospace-normal) - 2px);
85
-}
\ No newline at end of file
80
+.Badge {
81
+ background-color: var(--color-component-badge-background);
82
+ padding: 0.125rem 0.25rem;
83
+ line-height: normal;
84
+ border-radius: 0.125rem;
85
+ margin-left: 0.25rem;
86
+ font-family: var(--font-family-monospace);
87
+ font-size: var(--font-size-monospace-small);
88
+}
src/devtools/views/Settings/SettingsContext.js
+10
@@ -228,6 +228,16 @@ function updateThemeVariables(
228
updateStyleHelper(theme, 'color-commit-gradient-text', documentElements);
229
updateStyleHelper(theme, 'color-component-name', documentElements);
230
updateStyleHelper(theme, 'color-component-name-inverted', documentElements);
231
+ updateStyleHelper(
232
+ theme,
233
+ 'color-component-badge-background',
234
+ documentElements
235
+ );
236
+ updateStyleHelper(
237
+ theme,
238
+ 'color-component-badge-background-inverted',
239
+ documentElements
240
+ );
241
updateStyleHelper(theme, 'color-dim', documentElements);
242
updateStyleHelper(theme, 'color-dimmer', documentElements);
243
updateStyleHelper(theme, 'color-dimmest', documentElements);
src/devtools/views/root.css
+4
@@ -33,6 +33,8 @@
33
--light-color-commit-gradient-text: #000000;
34
--light-color-component-name: #6a51b2;
35
--light-color-component-name-inverted: #ffffff;
36
+ --light-color-component-badge-background: rgba(0, 0, 0, 0.15);
37
+ --light-color-component-badge-background-inverted: rgba(255, 255, 255, 0.25);
38
--light-color-dim: #777d88;
39
--light-color-dimmer: #cfd1d5;
40
--light-color-dimmest: #eff0f1;
@@ -85,6 +87,8 @@
87
--dark-color-commit-gradient-text: #000000;
88
--dark-color-component-name: #61dafb;
89
--dark-color-component-name-inverted: ##282828;
90
+ --dark-color-component-badge-background: rgba(255, 255, 255, 0.25);
91
+ --dark-color-component-badge-background-inverted: rgba(0, 0, 0, 0.25);
92
--dark-color-dim: #8f949d;
93
--dark-color-dimmer: #777d88;
94
--dark-color-dimmest: #4f5766;