From 8d2f2866f6d32b4ada155d76e07910b92c218146 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 13 Jan 2020 01:56:29 +0200 Subject: [PATCH] computed colors support --- src/App.scss | 4 ++ .../style_switcher/style_switcher.js | 6 +- .../style_switcher/style_switcher.vue | 16 ++++- src/i18n/en.json | 4 +- src/services/style_setter/style_setter.js | 6 +- src/services/theme_data/theme_data.service.js | 69 ++++++++++++++++--- 6 files changed, 92 insertions(+), 13 deletions(-) diff --git a/src/App.scss b/src/App.scss index 7da3688a..ef139e88 100644 --- a/src/App.scss +++ b/src/App.scss @@ -99,6 +99,10 @@ button { &:active { box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset; box-shadow: var(--buttonPressedShadow); + color: $fallback--text; + color: var(--btnPressedText, $fallback--text); + background-color: $fallback--fg; + background-color: var(--btnPressed, $fallback--fg) } &:disabled { diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index 49b34405..b84d2489 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -42,7 +42,7 @@ const v1OnlyNames = [ ].map(_ => _ + 'ColorLocal') const colorConvert = (color) => { - if (color === 'transparent') { + if (color.startsWith('--') || color === 'transparent') { return color } else { return hex2rgb(color) @@ -409,7 +409,9 @@ export default { } keys.forEach(key => { - this[key + 'ColorLocal'] = rgb2hex(colors[key]) + const color = colors[key] + const hex = rgb2hex(colors[key]) + this[key + 'ColorLocal'] = hex === '#aN' ? color : hex }) } diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index c1ec7c9a..f2fdfea2 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -347,6 +347,20 @@ :label="$t('settings.text')" /> +

{{ $t('settings.style.advanced_colors.pressed') }}

+ + +

{{ $t('settings.style.advanced_colors.borders') }}

@@ -433,7 +447,7 @@ { // TODO: hack to keep rest of the code from complaining value = '#FF00FF' } - acc[k] = hex2rgb(value) + if (!value || value.startsWith('--')) { + acc[k] = value + } else { + acc[k] = hex2rgb(value) + } } return acc }, {}) diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js index 808f67d5..221c3b48 100644 --- a/src/services/theme_data/theme_data.service.js +++ b/src/services/theme_data/theme_data.service.js @@ -40,12 +40,27 @@ export const DEFAULT_OPACITY = { } export const SLOT_INHERITANCE = { - bg: null, - fg: null, - text: null, + bg: { + depends: [], + priority: 1 + }, + fg: { + depends: [], + priority: 1 + }, + text: { + depends: [], + priority: 1 + }, underlay: '#000000', - link: '--accent', - accent: '--link', + link: { + depends: ['accent'], + priority: 1 + }, + accent: { + depends: ['link'], + priority: 1 + }, faint: '--text', faintLink: '--link', @@ -170,6 +185,26 @@ export const SLOT_INHERITANCE = { textColor: true }, + btnPressed: '--btn', + btnPressedText: { + depends: ['btnText'], + layer: 'btn', + variant: 'btnPressed', + textColor: true + }, + btnPressedPanelText: { + depends: ['btnPanelText'], + layer: 'btnPanel', + variant: 'btnPressed', + textColor: true + }, + btnPressedTopBarText: { + depends: ['btnTopBarText'], + layer: 'btnTopBar', + variant: 'btnPressed', + textColor: true + }, + // Input fields input: '--fg', inputText: { @@ -308,12 +343,30 @@ export const topoSort = ( return output } -export const SLOT_ORDERED = topoSort(SLOT_INHERITANCE) +export const SLOT_ORDERED = topoSort( + Object.entries(SLOT_INHERITANCE) + .sort(([aK, aV], [bK, bV]) => ((aV && aV.priority) || 0) - ((bV && bV.priority) || 0)) + .reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {}) +) + +console.log(SLOT_ORDERED) export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.reduce((acc, key) => { const value = SLOT_INHERITANCE[key] - if (sourceColors[key]) { - return { ...acc, [key]: { ...sourceColors[key] } } + const sourceColor = sourceColors[key] + if (sourceColor) { + let targetColor = sourceColor + if (typeof sourceColor === 'string' && sourceColor.startsWith('--')) { + const [variable, modifier] = sourceColor.split(/,/g).map(str => str.trim()) + const variableSlot = variable.substring(2) + targetColor = acc[variableSlot] || sourceColors[variableSlot] + if (modifier) { + console.log(targetColor, acc, variableSlot) + targetColor = brightness(Number.parseFloat(modifier) * mod, targetColor).rgb + } + console.log(targetColor, acc, variableSlot) + } + return { ...acc, [key]: { ...targetColor } } } else if (typeof value === 'string' && value.startsWith('#')) { return { ...acc, [key]: convert(value).rgb } } else {