Limit saturation of accent color for button surface

This commit is contained in:
Raymond Hill 2022-02-03 08:56:08 -05:00
parent efec9aa69e
commit 3b350cc844
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
2 changed files with 24 additions and 12 deletions

View File

@ -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/

View File

@ -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 });
}