zzos/react-native-devtools-frontend
1
0
Fork 0
mirror of https://github.com/react/react-native-devtools-frontend.git synced 2026-09-29 16:57:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

[DarkMode] filter.css

Browse Source 
Also discovered that the stylelint rule needs to allow
`rgb(var(...))`, so fixed that as a drive-by. This will change in time
but was the easiest path to getting the first migration stage done.

Bug: chromium:1152736
Change-Id: I70816edee5217dc3f52804877b04dd479a6edb15
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2909588
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
This commit is contained in:
Jack Franklin
2021-05-25 14:28:17 +00:00
committed by Devtools-frontend LUCI CQ
parent 7c94b5f29e
commit 8425afc1eb
4 changed files with 26 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front_end/ui/legacy/FilterBar.ts
+1 -1
View File
@@ -77,7 +77,7 @@ export class FilterBar extends HBox {
constructor(name: string, visibleByDefault?: boolean) {
super();
this.registerRequiredCSS('ui/legacy/filter.css', {enableLegacyPatching: true});
this.registerRequiredCSS('ui/legacy/filter.css', {enableLegacyPatching: false});
this._enabled = true;
this.element.classList.add('filter-bar');
front_end/ui/legacy/filter.css
+14 -14
View File
@@ -56,13 +56,14 @@
}
.filter-bitset-filter span {
--override-background-color-base: 0 0 0;
display: inline-block;
flex: none;
margin: auto 2px;
padding: 3px;
background: transparent;
text-shadow: rgb(255 255 255 / 50%) 0 1px 0; /* stylelint-disable-line plugin/use_theme_colors */
/* See: crbug.com/1152736 for color variable migration. */
text-shadow: var(--color-background-opacity-50) 0 1px 0;
border-radius: 6px;
overflow: hidden;
}
@@ -72,8 +73,7 @@
}
.filter-bitset-filter-divider {
background-color: #ccc; /* stylelint-disable-line plugin/use_theme_colors */
/* See: crbug.com/1152736 for color variable migration. */
background-color: var(--color-details-hairline);
height: 16px;
width: 1px;
margin: auto 2px;
@@ -83,25 +83,25 @@
.filter-bitset-filter span.selected,
.filter-bitset-filter span:hover,
.filter-bitset-filter span:active {
color: #fff; /* stylelint-disable-line plugin/use_theme_colors */
/* See: crbug.com/1152736 for color variable migration. */
text-shadow: rgb(0 0 0 / 40%) 0 1px 0; /* stylelint-disable-line plugin/use_theme_colors */
/* See: crbug.com/1152736 for color variable migration. */
color: var(--color-background);
text-shadow: rgb(var(--override-background-color-base) / 40%) 0 1px 0;
}
.filter-bitset-filter span:hover {
background: rgb(0 0 0 / 20%); /* stylelint-disable-line plugin/use_theme_colors */
/* See: crbug.com/1152736 for color variable migration. */
background: rgb(var(--override-background-color-base) / 20%);
}
.filter-bitset-filter span.selected {
background: rgb(0 0 0 / 30%); /* stylelint-disable-line plugin/use_theme_colors */
/* See: crbug.com/1152736 for color variable migration. */
background: rgb(var(--override-background-color-base) / 30%);
}
.filter-bitset-filter span:active {
background: rgb(0 0 0 / 50%); /* stylelint-disable-line plugin/use_theme_colors */
/* See: crbug.com/1152736 for color variable migration. */
background: rgb(var(--override-background-color-base) / 50%);
}
.-theme-with-dark-background .filter-bitset-filter span,
:host-context(.-theme-with-dark-background) .filter-bitset-filter span {
--override-background-color-base: 255 255 255;
}
.filter-checkbox-filter {
scripts/stylelint_rules/lib/use_theme_colors.js
+6 -1
View File
@@ -101,7 +101,12 @@ module.exports = stylelint.createPlugin(RULE_NAME, function(primary, secondary,
function checkColorValueIsValidOrError({declarationToErrorOn, cssValueToCheck, alreadyFixed}) {
for (const indicator of COLOR_INDICATOR_REGEXES) {
if (indicator.test(cssValueToCheck)) {
/**
* In rare situations in the codebase we allow
* rgb(var(--some-base-color) / 20%) so we don't want to error if we
* match that.
*/
if (indicator.test(cssValueToCheck) && !cssValueToCheck.startsWith('rgb(var')) {
reportError(declarationToErrorOn, !alreadyFixed);
}
}
scripts/stylelint_rules/tests/use_theme_colors_test.js
+5
View File
@@ -158,6 +158,11 @@ describe('use_theme_colors', () => {
assert.lengthOf(warnings, 0);
});
it('allows variables within rgb', async () => {
const warnings = await lint('p { background: rgb(var(--override-base-color) / 20%); }');
assert.lengthOf(warnings, 0);
});
it('allows any color to be used when in a :host-context dark theme block', async () => {
const code = `:host-context(.-theme-with-dark-background) p {
color: #fff;