mirror of https://github.com/gorhill/uBlock.git
Limit saturation of accent color for button surface
This commit is contained in:
parent
efec9aa69e
commit
3b350cc844
|
@ -221,6 +221,9 @@
|
|||
--accent-ink-3: var(--ink-1);
|
||||
--accent-surface-1: rgb(var(--primary-40));
|
||||
|
||||
/* buttons */
|
||||
--button-surface-rgb: var(--gray-80);
|
||||
|
||||
/* popup panel */
|
||||
--popup-cell-cname-ink: #0054d7; /* h260 S:100 Luv:40 */;
|
||||
--popup-cell-label-mixed-surface: #c29100; /* TODO: fix */
|
||||
|
@ -298,6 +301,9 @@
|
|||
|
||||
--accent-surface-1: rgb(var(--primary-70));
|
||||
|
||||
/* buttons */
|
||||
--button-surface-rgb: var(--gray-30);
|
||||
|
||||
/* popup panel */
|
||||
--popup-cell-cname-ink: #93a6ff; /* h260 S:100 Luv:70 */;
|
||||
--popup-cell-label-mixed-surface: hsla(45, 100%, 38%, 1); /* TODO: fix */
|
||||
|
@ -363,7 +369,7 @@
|
|||
--fieldset-header-ink: var(--ink-2);
|
||||
|
||||
--button-ink: var(--ink-1);
|
||||
--button-surface: var(--surface-3);
|
||||
--button-surface: rgb(var(--button-surface-rgb));
|
||||
--button-border-radius: 5px;
|
||||
--button-preferred-ink: var(--accent-ink-1);
|
||||
--button-preferred-surface: var(--accent-surface-1);
|
||||
|
@ -433,14 +439,6 @@
|
|||
--popup-cell-noop-surface-rgb: 94 94 94; /* h:0 S:0 Luv:40 */
|
||||
}
|
||||
|
||||
:root.accented {
|
||||
--button-surface: rgb(var(--primary-80));
|
||||
}
|
||||
|
||||
:root.dark.accented {
|
||||
--button-surface: rgb(var(--primary-30));
|
||||
}
|
||||
|
||||
/*
|
||||
* Source for color-blind color scheme:
|
||||
* https://davidmathlogic.com/colorblind/
|
||||
|
|
|
@ -100,6 +100,7 @@ DOMListFactory.setTheme = function(theme) {
|
|||
|
||||
DOMListFactory.setAccentColor = function(accentEnabled, accentColor, stylesheet = '') {
|
||||
if ( accentEnabled && stylesheet === '' && self.hsluv !== undefined ) {
|
||||
const toRGB = hsl => self.hsluv.hsluvToRgb(hsl).map(a => Math.round(a * 255)).join(' ');
|
||||
// Normalize first
|
||||
const hsl = self.hsluv.hexToHsluv(accentColor);
|
||||
hsl[0] = Math.round(hsl[0] * 10) / 10;
|
||||
|
@ -110,10 +111,23 @@ DOMListFactory.setAccentColor = function(accentEnabled, accentColor, stylesheet
|
|||
text.push(':root.accented {');
|
||||
for ( const shade of shades ) {
|
||||
hsl[2] = shade;
|
||||
const rgb = self.hsluv.hsluvToRgb(hsl).map(a => Math.round(a * 255));
|
||||
text.push(` --primary-${shade}: ${rgb.join(' ')};`);
|
||||
text.push(` --primary-${shade}: ${toRGB(hsl)};`);
|
||||
}
|
||||
text.push('}', '');
|
||||
text.push('}');
|
||||
hsl[1] = Math.min(25, hsl[1]);
|
||||
hsl[2] = 80;
|
||||
text.push(
|
||||
':root.light.accented {',
|
||||
` --button-surface-rgb: ${toRGB(hsl)};`,
|
||||
'}',
|
||||
);
|
||||
hsl[2] = 30;
|
||||
text.push(
|
||||
':root.dark.accented {',
|
||||
` --button-surface-rgb: ${toRGB(hsl)};`,
|
||||
'}',
|
||||
);
|
||||
text.push('');
|
||||
stylesheet = text.join('\n');
|
||||
vAPI.messaging.send('uDom', { what: 'uiAccentStylesheet', stylesheet });
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue