From 622c9d388e0df1f53c544c34b7def2bb6fe498cd Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 12 Jan 2020 03:44:06 +0200 Subject: Refactoring, forgotten files --- src/services/theme_data/theme_data.service.js | 315 ++++++++++++++++++++++++++ 1 file changed, 315 insertions(+) create mode 100644 src/services/theme_data/theme_data.service.js (limited to 'src/services/theme_data') diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js new file mode 100644 index 00000000..c9c80727 --- /dev/null +++ b/src/services/theme_data/theme_data.service.js @@ -0,0 +1,315 @@ +import { convert, brightness, contrastRatio } from 'chromatism' +import { alphaBlend, alphaBlendLayers, getTextColor, mixrgb } from '../color_convert/color_convert.js' + +export const CURRENT_VERSION = 3 +/* This is a definition of all layer combinations + * each key is a topmost layer, each value represents layer underneath + * this is essentially a simplified tree + */ +export const LAYERS = { + undelay: null, // root + topBar: null, // no transparency support + badge: null, // no transparency support + fg: null, + bg: 'underlay', + panel: 'bg', + btn: 'bg', + btnPanel: 'panel', + btnTopBar: 'topBar', + input: 'bg', + inputPanel: 'panel', + inputTopBar: 'topBar', + alert: 'bg', + alertPanel: 'panel' +} + +export const SLOT_INHERITANCE = { + bg: null, + fg: null, + text: null, + underlay: '#000000', + link: '--accent', + accent: '--link', + faint: '--text', + faintLink: '--link', + + cBlue: '#0000ff', + cRed: '#FF0000', + cGreen: '#00FF00', + cOrange: '#E3FF00', + + lightBg: { + depends: ['bg'], + color: (mod, bg) => brightness(5 * mod, bg).rgb + }, + lightText: { + depends: ['text'], + color: (mod, text) => brightness(20 * mod, text).rgb + }, + + border: { + depends: 'fg', + color: (mod, fg) => brightness(2 * mod, fg).rgb + }, + + linkBg: { + depends: ['accent', 'bg'], + color: (mod, accent, bg) => alphaBlend(accent, 0.4, bg).rgb + }, + + icon: { + depends: ['bg', 'text'], + color: (mod, bg, text) => mixrgb(bg, text) + }, + + // Foreground + fgText: { + depends: ['text'], + layer: 'fg', + textColor: true + }, + fgLink: { + depends: ['link'], + layer: 'fg', + textColor: 'preserve' + }, + + // Panel header + panel: '--fg', + panelText: { + depends: ['fgText'], + layer: 'panel', + textColor: true + }, + panelFaint: { + depends: ['fgText'], + layer: 'panel', + textColor: true + }, + panelLink: { + depends: ['fgLink'], + layer: 'panel', + textColor: 'preserve' + }, + + // Top bar + topBar: '--fg', + topBarText: { + depends: ['fgText'], + layer: 'topBar', + textColor: true + }, + topBarLink: { + depends: ['fgLink'], + layer: 'topBar', + textColor: 'preserve' + }, + + // Buttons + btn: '--fg', + btnText: { + depends: ['fgText'], + layer: 'btn' + }, + btnPanelText: { + depends: ['panelText'], + layer: 'btnPanel', + variant: 'btn', + textColor: true + }, + btnTopBarText: { + depends: ['topBarText'], + layer: 'btnTopBar', + variant: 'btn', + textColor: true + }, + + // Input fields + input: '--fg', + inputText: { + depends: ['text'], + layer: 'input', + textColor: true + }, + inputPanelText: { + depends: ['panelText'], + layer: 'inputPanel', + variant: 'input', + textColor: true + }, + inputTopbarText: { + depends: ['topBarText'], + layer: 'inputTopBar', + variant: 'input', + textColor: true + }, + + alertError: '--cRed', + alertErrorText: { + depends: ['text', 'alertError'], + layer: 'alert', + variant: 'alertError', + textColor: true + }, + alertErrorPanelText: { + depends: ['panelText', 'alertError'], + layer: 'alertPanel', + variant: 'alertError', + textColor: true + }, + + alertWarning: '--cOrange', + alertWarningText: { + depends: ['text', 'alertWarning'], + layer: 'alert', + variant: 'alertWarning', + textColor: true + }, + alertWarningPanelText: { + depends: ['panelText', 'alertWarning'], + layer: 'alertPanel', + variant: 'alertWarning', + textColor: true + }, + + badgeNotification: '--cRed', + badgeNotificationText: { + depends: ['text', 'badgeNotification'], + layer: 'badge', + variant: 'badgeNotification', + textColor: 'bw' + } +} + +export const getLayersArray = (layer, data = LAYERS) => { + let array = [layer] + let parent = data[layer] + while (parent) { + array.unshift(parent) + parent = data[parent] + } + return array +} + +export const getLayers = (layer, variant = layer, colors, opacity) => { + return getLayersArray(layer).map((currentLayer) => ([ + currentLayer === layer + ? colors[variant] + : colors[currentLayer], + opacity[currentLayer] + ])) +} + +const getDependencies = (key, inheritance) => { + const data = inheritance[key] + if (typeof data === 'string' && data.startsWith('--')) { + return [data.substring(2)] + } else { + if (data === null) return [] + const { depends, layer, variant } = data + const layerDeps = layer + ? getLayersArray(layer).map(currentLayer => { + return currentLayer === layer + ? variant || layer + : currentLayer + }) + : [] + if (Array.isArray(depends)) { + return [...depends, ...layerDeps] + } else { + return [...layerDeps] + } + } +} + +export const topoSort = ( + inheritance = SLOT_INHERITANCE, + getDeps = getDependencies +) => { + // This is an implementation of https://en.wikipedia.org/wiki/Tarjan%27s_strongly_connected_components_algorithm + + const allKeys = Object.keys(inheritance) + const whites = new Set(allKeys) + const grays = new Set() + const blacks = new Set() + const unprocessed = [...allKeys] + const output = [] + + const step = (node) => { + if (whites.has(node)) { + // Make node "gray" + whites.delete(node) + grays.add(node) + // Do step for each node connected to it (one way) + getDeps(node, inheritance).forEach(step) + // Make node "black" + grays.delete(node) + blacks.add(node) + // Put it into the output list + output.push(node) + } else if (grays.has(node)) { + console.debug('Cyclic depenency in topoSort, ignoring') + output.push(node) + } else if (blacks.has(node)) { + // do nothing + } else { + throw new Error('Unintended condition in topoSort!') + } + } + while (unprocessed.length > 0) { + step(unprocessed.pop()) + } + return output +} + +export const SLOT_ORDERED = topoSort(SLOT_INHERITANCE) + +export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.reduce((acc, key) => { + const value = SLOT_INHERITANCE[key] + if (sourceColors[key]) { + return { ...acc, [key]: { ...sourceColors[key] } } + } else if (typeof value === 'string' && value.startsWith('#')) { + return { ...acc, [key]: convert(value).rgb } + } else { + const isObject = typeof value === 'object' + const defaultColorFunc = (mod, dep) => ({ ...dep }) + const deps = getDependencies(key, SLOT_INHERITANCE) + const colorFunc = (isObject && value.color) || defaultColorFunc + + if (value.textColor) { + const bg = alphaBlendLayers( + { ...acc[deps[0]] }, + getLayers( + value.layer, + value.variant || value.layer, + acc, + sourceOpacity + ) + ) + if (value.textColor === 'bw') { + return { + ...acc, + [key]: contrastRatio(bg) + } + } else { + return { + ...acc, + [key]: getTextColor( + bg, + { ...acc[deps[0]] }, + value.textColor === 'preserve' + ) + } + } + } else { + console.log('BENIS', key, deps, deps.map((dep) => ({ ...acc[dep] }))) + return { + ...acc, + [key]: colorFunc( + mod, + ...deps.map((dep) => ({ ...acc[dep] })) + ) + } + } + } +}, {}) -- cgit v1.2.3-70-g09d2 From 1aea1f217e150f36020ab1902ee959c15775d299 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 12 Jan 2020 04:01:31 +0200 Subject: remove debug --- src/services/theme_data/theme_data.service.js | 1 - 1 file changed, 1 deletion(-) (limited to 'src/services/theme_data') diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js index c9c80727..a4df97c2 100644 --- a/src/services/theme_data/theme_data.service.js +++ b/src/services/theme_data/theme_data.service.js @@ -302,7 +302,6 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu } } } else { - console.log('BENIS', key, deps, deps.map((dep) => ({ ...acc[dep] }))) return { ...acc, [key]: colorFunc( -- cgit v1.2.3-70-g09d2 From d52d1812273ff21bc0436dd261e8934c6010d52f Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 12 Jan 2020 15:04:05 +0200 Subject: more fixes --- src/components/shadow_control/shadow_control.js | 3 +-- src/services/theme_data/theme_data.service.js | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) (limited to 'src/services/theme_data') diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js index 44e4a22f..7e82b9c0 100644 --- a/src/components/shadow_control/shadow_control.js +++ b/src/components/shadow_control/shadow_control.js @@ -1,7 +1,6 @@ import ColorInput from '../color_input/color_input.vue' import OpacityInput from '../opacity_input/opacity_input.vue' -import { getCssShadow } from '../../services/style_setter/style_setter.js' -import { hex2rgb } from '../../services/color_convert/color_convert.js' +import { hex2rgb, getCssShadow } from '../../services/color_convert/color_convert.js' export default { // 'Value' and 'Fallback' can be undefined, but if they are diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js index a4df97c2..1117ab05 100644 --- a/src/services/theme_data/theme_data.service.js +++ b/src/services/theme_data/theme_data.service.js @@ -48,7 +48,7 @@ export const SLOT_INHERITANCE = { }, border: { - depends: 'fg', + depends: ['fg'], color: (mod, fg) => brightness(2 * mod, fg).rgb }, -- cgit v1.2.3-70-g09d2 From 88f83fc9fa3652efdbe6aa622d3e0089883e8057 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 12 Jan 2020 17:46:07 +0200 Subject: overhaul how style-switcher makes state, removed tons of copy-paste --- src/components/style_switcher/style_switcher.js | 214 ++++++----------------- src/components/style_switcher/style_switcher.vue | 12 ++ src/services/style_setter/style_setter.js | 15 +- src/services/theme_data/theme_data.service.js | 15 +- 4 files changed, 85 insertions(+), 171 deletions(-) (limited to 'src/services/theme_data') diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index 4749d3f7..9c6f3266 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -14,7 +14,12 @@ import { composePreset, getThemes } from '../../services/style_setter/style_setter.js' -import { CURRENT_VERSION } from '../../services/theme_data/theme_data.service.js' +import { + CURRENT_VERSION, + SLOT_INHERITANCE, + DEFAULT_OPACITY, + getLayers +} from '../../services/theme_data/theme_data.service.js' import ColorInput from '../color_input/color_input.vue' import RangeInput from '../range_input/range_input.vue' import OpacityInput from '../opacity_input/opacity_input.vue' @@ -67,55 +72,13 @@ export default { keepRoundness: false, keepFonts: false, - textColorLocal: '', - accentColorLocal: undefined, - linkColorLocal: undefined, - - bgColorLocal: '', - bgOpacityLocal: undefined, - - underlayColorLocal: '', - underlayOpacityLocal: undefined, - - fgColorLocal: '', - fgTextColorLocal: undefined, - fgLinkColorLocal: undefined, - - btnColorLocal: undefined, - btnTextColorLocal: undefined, - btnOpacityLocal: undefined, - - inputColorLocal: undefined, - inputTextColorLocal: undefined, - inputOpacityLocal: undefined, - - panelColorLocal: undefined, - panelTextColorLocal: undefined, - panelLinkColorLocal: undefined, - panelFaintColorLocal: undefined, - panelOpacityLocal: undefined, - - topBarColorLocal: undefined, - topBarTextColorLocal: undefined, - topBarLinkColorLocal: undefined, - - alertErrorColorLocal: undefined, - alertWarningColorLocal: undefined, - - badgeOpacityLocal: undefined, - badgeNotificationColorLocal: undefined, + ...Object.keys(SLOT_INHERITANCE) + .map(key => [key, '']) + .reduce((acc, [key, val]) => ({ ...acc, [ key + 'ColorLocal' ]: val }), {}), - borderColorLocal: undefined, - borderOpacityLocal: undefined, - - faintColorLocal: undefined, - faintOpacityLocal: undefined, - faintLinkColorLocal: undefined, - - cRedColorLocal: '', - cBlueColorLocal: '', - cGreenColorLocal: '', - cOrangeColorLocal: '', + ...Object.keys(DEFAULT_OPACITY) + .map(key => [key, undefined]) + .reduce((acc, [key, val]) => ({ ...acc, [ key + 'OpacityLocal' ]: val }), {}), shadowSelected: undefined, shadowsLocal: {}, @@ -149,59 +112,14 @@ export default { return Array.isArray(this.selected) ? 1 : 2 }, currentColors () { - return { - bg: this.bgColorLocal, - text: this.textColorLocal, - link: this.linkColorLocal, - - fg: this.fgColorLocal, - fgText: this.fgTextColorLocal, - fgLink: this.fgLinkColorLocal, - - accent: this.accentColorLocal, - - underlay: this.underlayColorLocal, - - panel: this.panelColorLocal, - panelText: this.panelTextColorLocal, - panelLink: this.panelLinkColorLocal, - panelFaint: this.panelFaintColorLocal, - - input: this.inputColorLocal, - inputText: this.inputTextColorLocal, - - topBar: this.topBarColorLocal, - topBarText: this.topBarTextColorLocal, - topBarLink: this.topBarLinkColorLocal, - - btn: this.btnColorLocal, - btnText: this.btnTextColorLocal, - - alertError: this.alertErrorColorLocal, - alertWarning: this.alertWarningColorLocal, - badgeNotification: this.badgeNotificationColorLocal, - - faint: this.faintColorLocal, - faintLink: this.faintLinkColorLocal, - border: this.borderColorLocal, - - cRed: this.cRedColorLocal, - cBlue: this.cBlueColorLocal, - cGreen: this.cGreenColorLocal, - cOrange: this.cOrangeColorLocal - } + return Object.keys(SLOT_INHERITANCE) + .map(key => [key, this[key + 'ColorLocal']]) + .reduce((acc, [key, val]) => ({ ...acc, [ key ]: val }), {}) }, currentOpacity () { - return { - bg: this.bgOpacityLocal, - btn: this.btnOpacityLocal, - input: this.inputOpacityLocal, - panel: this.panelOpacityLocal, - topBar: this.topBarOpacityLocal, - border: this.borderOpacityLocal, - faint: this.faintOpacityLocal, - underlay: this.underlayOpacityLocal - } + return Object.keys(DEFAULT_OPACITY) + .map(key => [key, this[key + 'OpacityLocal']]) + .reduce((acc, [key, val]) => ({ ...acc, [ key + 'OpacityLocal' ]: val }), {}) }, currentRadii () { return { @@ -237,63 +155,45 @@ export default { laa: ratio >= 3, laaa: ratio >= 4.5 }) - - // fgsfds :DDDD - const fgs = { - text: colorConvert(colors.text), - panelText: colorConvert(colors.panelText), - panelLink: colorConvert(colors.panelLink), - btnText: colorConvert(colors.btnText), - topBarText: colorConvert(colors.topBarText), - inputText: colorConvert(colors.inputText), - - link: colorConvert(colors.link), - topBarLink: colorConvert(colors.topBarLink), - - red: colorConvert(colors.cRed), - green: colorConvert(colors.cGreen), - blue: colorConvert(colors.cBlue), - orange: colorConvert(colors.cOrange) - } - - const bgs = { - bg: colorConvert(colors.bg), - underlay: colorConvert(colors.underlay), - btn: colorConvert(colors.btn), - panel: colorConvert(colors.panel), - topBar: colorConvert(colors.topBar), - input: colorConvert(colors.input), - alertError: colorConvert(colors.alertError), - alertWarning: colorConvert(colors.alertWarning), - badgeNotification: colorConvert(colors.badgeNotification) - } - - const bg = [bgs.bg, opacity.bg] - const underlay = [bgs.underlay || colorConvert('#000000'), opacity.underlay] - - const panel = [underlay, bg] - - const ratios = { - bgText: getContrastRatioLayers(fgs.text, panel, fgs.text), - bgLink: getContrastRatioLayers(fgs.link, panel, fgs.link), - bgRed: getContrastRatioLayers(fgs.red, panel, fgs.red), - bgGreen: getContrastRatioLayers(fgs.green, panel, fgs.green), - bgBlue: getContrastRatioLayers(fgs.blue, panel, fgs.blue), - bgOrange: getContrastRatioLayers(fgs.orange, panel, fgs.orange), - - // TODO what's this? - tintText: getContrastRatio(alphaBlend(bgs.bg, 0.5, fgs.panelText), fgs.text), - - panelText: getContrastRatioLayers(fgs.text, [...panel, [bgs.panel, opacity.panel]], fgs.panelText), - panelLink: getContrastRatioLayers(fgs.link, [...panel, [bgs.panel, opacity.panel]], fgs.panelLink), - - btnText: getContrastRatioLayers(fgs.text, [...panel, [bgs.btn, opacity.btn]], fgs.btnText), - - inputText: getContrastRatioLayers(fgs.text, [...panel, [bgs.input, opacity.input]], fgs.inputText), - - topBarText: getContrastRatioLayers(fgs.text, [...panel, [bgs.topBar, opacity.topBar]], fgs.topBarText), - topBarLink: getContrastRatioLayers(fgs.link, [...panel, [bgs.topBar, opacity.topBar]], fgs.topBarLink) - } + const colorsConverted = Object.entries(colors).reduce((acc, [key, value]) => ({ ...acc, [key]: colorConvert(value) }), {}) + + const ratios = Object.entries(SLOT_INHERITANCE).reduce((acc, [key, value]) => { + const slotIsBaseText = key === 'text' || key === 'link' + const slotIsText = slotIsBaseText || ( + typeof value === 'object' && value !== null && value.textColor + ) + if (!slotIsText) return acc + const { layer, variant } = slotIsBaseText ? { layer: 'bg' } : value + const background = variant || layer + const textColors = [ + key, + ...(background === 'bg' ? ['cRed', 'cGreen', 'cBlue', 'cOrange'] : []) + ] + + const layers = getLayers( + layer, + variant || layer, + colorsConverted, + opacity + ) + + return { + ...acc, + ...textColors.reduce((acc, textColorKey) => { + const newKey = slotIsBaseText + ? 'bg' + textColorKey[0].toUpperCase() + textColorKey.slice(1) + : textColorKey + return { + ...acc, + [newKey]: getContrastRatioLayers( + colorsConverted[textColorKey], + layers, + colorsConverted[textColorKey] + ) + } + }, {}) + } + }, {}) return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {}) }, diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 82b85bd5..b059eb8a 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -209,6 +209,12 @@ :label="$t('settings.style.advanced_colors.alert_error')" :fallback="previewTheme.colors.alertError" /> + +

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

diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 516fb5f6..e11516c0 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -1,7 +1,7 @@ import { times } from 'lodash' import { convert } from 'chromatism' import { rgb2hex, hex2rgb, rgba2css, getCssColor } from '../color_convert/color_convert.js' -import { getColors } from '../theme_data/theme_data.service.js' +import { getColors, DEFAULT_OPACITY } from '../theme_data/theme_data.service.js' // While this is not used anymore right now, I left it in if we want to do custom // styles that aren't just colors, so user can pick from a few different distinct @@ -115,18 +115,7 @@ const getCssShadowFilter = (input) => { } export const generateColors = (themeData) => { - const rawOpacity = Object.assign({ - panel: 1, - btn: 1, - border: 1, - bg: 1, - badge: 1, - text: 1, - alert: 0.5, - input: 0.5, - faint: 0.5, - underlay: 0.15 - }, Object.entries(themeData.opacity || {}).reduce((acc, [k, v]) => { + const rawOpacity = Object.assign({ ...DEFAULT_OPACITY }, Object.entries(themeData.opacity || {}).reduce((acc, [k, v]) => { if (typeof v !== 'undefined') { acc[k] = v } diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js index 1117ab05..297d0223 100644 --- a/src/services/theme_data/theme_data.service.js +++ b/src/services/theme_data/theme_data.service.js @@ -23,6 +23,19 @@ export const LAYERS = { alertPanel: 'panel' } +export const DEFAULT_OPACITY = { + panel: 1, + btn: 1, + border: 1, + bg: 1, + badge: 1, + text: 1, + alert: 0.5, + input: 0.5, + faint: 0.5, + underlay: 0.15 +} + export const SLOT_INHERITANCE = { bg: null, fg: null, @@ -289,7 +302,7 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu if (value.textColor === 'bw') { return { ...acc, - [key]: contrastRatio(bg) + [key]: contrastRatio(bg).rgb } } else { return { -- cgit v1.2.3-70-g09d2 From 39dd08e69423722a172bcc3cec3791ae172a8175 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 12 Jan 2020 17:58:26 +0200 Subject: replace hsl's l with relative luminance for better lightness detection --- src/components/style_switcher/style_switcher.js | 5 +---- src/i18n/en.json | 3 ++- src/services/color_convert/color_convert.js | 6 +++--- src/services/theme_data/theme_data.service.js | 8 ++++---- 4 files changed, 10 insertions(+), 12 deletions(-) (limited to 'src/services/theme_data') diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index 9c6f3266..49b34405 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -2,9 +2,7 @@ import { set, delete as del } from 'vue' import { rgb2hex, hex2rgb, - getContrastRatio, - getContrastRatioLayers, - alphaBlend + getContrastRatioLayers } from '../../services/color_convert/color_convert.js' import { generateColors, @@ -265,7 +263,6 @@ export default { const theme = this.previewTheme - console.log(source) return { // To separate from other random JSON files and possible future source formats _pleroma_theme_version: 2, theme, source diff --git a/src/i18n/en.json b/src/i18n/en.json index 323813f6..d97b4909 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -430,7 +430,8 @@ "borders": "Borders", "buttons": "Buttons", "inputs": "Input fields", - "faint_text": "Faded text" + "faint_text": "Faded text", + "underlay": "Underlay" }, "radii": { "_tab_label": "Roundness" diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js index 576bf902..c727a9fe 100644 --- a/src/services/color_convert/color_convert.js +++ b/src/services/color_convert/color_convert.js @@ -1,4 +1,4 @@ -import { invertLightness, convert, contrastRatio } from 'chromatism' +import { invertLightness, contrastRatio } from 'chromatism' // useful for visualizing color when debugging export const consoleColor = (color) => console.log('%c##########', 'background: ' + color + '; color: ' + color) @@ -185,8 +185,8 @@ export const rgba2css = function (rgba) { * @param {Boolean} preserve - try to preserve intended text color's hue/saturation (i.e. no BW) */ export const getTextColor = function (bg, text, preserve) { - const bgIsLight = convert(bg).hsl.l > 50 - const textIsLight = convert(text).hsl.l > 50 + const bgIsLight = relativeLuminance(bg) > 0.5 + const textIsLight = relativeLuminance(text) > 0.5 if ((bgIsLight && textIsLight) || (!bgIsLight && !textIsLight)) { const base = typeof text.a !== 'undefined' ? { a: text.a } : {} diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js index 297d0223..e2e9331c 100644 --- a/src/services/theme_data/theme_data.service.js +++ b/src/services/theme_data/theme_data.service.js @@ -159,13 +159,13 @@ export const SLOT_INHERITANCE = { alertError: '--cRed', alertErrorText: { - depends: ['text', 'alertError'], + depends: ['text'], layer: 'alert', variant: 'alertError', textColor: true }, alertErrorPanelText: { - depends: ['panelText', 'alertError'], + depends: ['panelText'], layer: 'alertPanel', variant: 'alertError', textColor: true @@ -173,13 +173,13 @@ export const SLOT_INHERITANCE = { alertWarning: '--cOrange', alertWarningText: { - depends: ['text', 'alertWarning'], + depends: ['text'], layer: 'alert', variant: 'alertWarning', textColor: true }, alertWarningPanelText: { - depends: ['panelText', 'alertWarning'], + depends: ['panelText'], layer: 'alertPanel', variant: 'alertWarning', textColor: true -- cgit v1.2.3-70-g09d2 From 40ba3e225209539639b65c2f636fa1b5af9861ff Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 12 Jan 2020 23:41:11 +0200 Subject: added more slots to UI --- src/components/poll/poll.vue | 4 ++- src/components/style_switcher/style_switcher.vue | 37 ++++++++++++++++++++++-- src/i18n/en.json | 4 ++- src/services/theme_data/theme_data.service.js | 15 +++++++--- 4 files changed, 51 insertions(+), 9 deletions(-) (limited to 'src/services/theme_data') diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue index db8e33b3..56e91cca 100644 --- a/src/components/poll/poll.vue +++ b/src/components/poll/poll.vue @@ -104,8 +104,10 @@ .result-fill { height: 100%; position: absolute; + color: $fallback--text; + color: var(--pollText, $fallback--text); background-color: $fallback--lightBg; - background-color: var(--linkBg, $fallback--lightBg); + background-color: var(--poll, $fallback--lightBg); border-radius: $fallback--panelRadius; border-radius: var(--panelRadius, $fallback--panelRadius); top: 0; diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index ff6a8264..e0894b6d 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -215,20 +215,20 @@ :label="$t('settings.text')" :fallback="previewTheme.colors.alertErrorText" /> - + - +

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

@@ -238,6 +238,13 @@ :label="$t('settings.style.advanced_colors.badge_notification')" :fallback="previewTheme.colors.badgeNotification" /> + +

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

@@ -388,7 +395,7 @@ v-model="underlayColorLocal" name="underlay" :label="$t('settings.style.advanced_colors.underlay')" - fallback="#000000" + :fallback="previewTheme.colors.underlay" />
+
+

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

+ + +
+
+

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

+ +
brightness(2 * mod, fg).rgb }, - linkBg: { + poll: { depends: ['accent', 'bg'], - color: (mod, accent, bg) => alphaBlend(accent, 0.4, bg).rgb + color: (mod, accent, bg) => alphaBlend(accent, 0.4, bg) + }, + pollText: { + depends: ['text'], + layer: 'poll', + textColor: true }, icon: { -- cgit v1.2.3-70-g09d2 From 8f63bbb64fa2860e73d8562de9d6c62629a8668f Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 13 Jan 2020 00:33:04 +0200 Subject: poll slot renamed, lightBg customization implemented --- src/App.scss | 4 ++++ src/components/autosuggest/autosuggest.vue | 4 ++-- src/components/dialog_modal/dialog_modal.vue | 12 +++++----- src/components/emoji_input/emoji_input.vue | 4 ++++ src/components/nav_panel/nav_panel.vue | 10 ++++++++ src/components/selectable_list/selectable_list.vue | 4 ++++ src/components/side_drawer/side_drawer.vue | 5 ++++ src/components/status/status.vue | 7 ++++-- src/components/style_switcher/style_switcher.vue | 27 ++++++++++++++++++++-- src/services/style_setter/style_setter.js | 4 +++- src/services/theme_data/theme_data.service.js | 26 +++++++++++++++++++++ 11 files changed, 94 insertions(+), 13 deletions(-) (limited to 'src/services/theme_data') diff --git a/src/App.scss b/src/App.scss index 7c9c91af..7da3688a 100644 --- a/src/App.scss +++ b/src/App.scss @@ -495,6 +495,10 @@ main-router { color: $fallback--faint; color: var(--panelFaint, $fallback--faint); } + .faint-link { + color: $fallback--faint; + color: var(--faintLink, $fallback--faint); + } .alert { white-space: nowrap; diff --git a/src/components/autosuggest/autosuggest.vue b/src/components/autosuggest/autosuggest.vue index 1f86e996..f283ab82 100644 --- a/src/components/autosuggest/autosuggest.vue +++ b/src/components/autosuggest/autosuggest.vue @@ -40,8 +40,8 @@ top: 100%; right: 0; max-height: 400px; - background-color: $fallback--lightBg; - background-color: var(--lightBg, $fallback--lightBg); + background-color: $fallback--bg; + background-color: var(--bg, $fallback--bg); border-style: solid; border-width: 1px; border-color: $fallback--border; diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue index 55d7a7d2..3241ce3e 100644 --- a/src/components/dialog_modal/dialog_modal.vue +++ b/src/components/dialog_modal/dialog_modal.vue @@ -75,18 +75,18 @@ .dialog-modal-content { margin: 0; padding: 1rem 1rem; - background-color: $fallback--lightBg; - background-color: var(--lightBg, $fallback--lightBg); + background-color: $fallback--bg; + background-color: var(--bg, $fallback--bg); white-space: normal; } .dialog-modal-footer { margin: 0; padding: .5em .5em; - background-color: $fallback--lightBg; - background-color: var(--lightBg, $fallback--lightBg); - border-top: 1px solid $fallback--bg; - border-top: 1px solid var(--bg, $fallback--bg); + background-color: $fallback--bg; + background-color: var(--bg, $fallback--bg); + border-top: 1px solid $fallback--border; + border-top: 1px solid var(--border, $fallback--border); display: flex; justify-content: flex-end; diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue index a7215670..dcf51ff9 100644 --- a/src/components/emoji_input/emoji_input.vue +++ b/src/components/emoji_input/emoji_input.vue @@ -158,6 +158,10 @@ &.highlighted { background-color: $fallback--fg; background-color: var(--lightBg, $fallback--fg); + color: var(--lightBgText, $fallback--text); + --faint: var(--lightBgFaintText, $fallback--faint); + --faintLink: var(--lightBgFaintLink, $fallback--faint); + --icon: var(--lightBgIcon, $fallback--icon); } } } diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index 034259d9..0886bf8c 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -101,12 +101,22 @@ &:hover { background-color: $fallback--lightBg; background-color: var(--lightBg, $fallback--lightBg); + color: $fallback--link; + color: var(--lightBgText, $fallback--link); + --faint: var(--lightBgFaintText, $fallback--faint); + --faintLink: var(--lightBgFaintLink, $fallback--faint); + --icon: var(--lightBgIcon, $fallback--icon); } &.router-link-active { font-weight: bolder; background-color: $fallback--lightBg; background-color: var(--lightBg, $fallback--lightBg); + color: $fallback--text; + color: var(--lightBgText, $fallback--text); + --faint: var(--lightBgFaintText, $fallback--faint); + --faintLink: var(--lightBgFaintLink, $fallback--faint); + --icon: var(--lightBgIcon, $fallback--icon); &:hover { text-decoration: underline; diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue index d9ec7ece..416c9b6a 100644 --- a/src/components/selectable_list/selectable_list.vue +++ b/src/components/selectable_list/selectable_list.vue @@ -69,6 +69,10 @@ &-item-selected-inner { background-color: $fallback--lightBg; background-color: var(--lightBg, $fallback--lightBg); + color: var(--lightBgText, $fallback--text); + --faint: var(--lightBgFaintText, $fallback--faint); + --faintLink: var(--lightBgFaintLink, $fallback--faint); + --icon: var(--lightBgIcon, $fallback--icon); } &-header { diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue index 3fba9058..6d75221f 100644 --- a/src/components/side_drawer/side_drawer.vue +++ b/src/components/side_drawer/side_drawer.vue @@ -290,6 +290,11 @@ &:hover { background-color: $fallback--lightBg; background-color: var(--lightBg, $fallback--lightBg); + color: $fallback--text; + color: var(--lightBgText, $fallback--text); + --faint: var(--lightBgFaintText, $fallback--faint); + --faintLink: var(--lightBgFaintLink, $fallback--faint); + --icon: var(--lightBgIcon, $fallback--icon); } } } diff --git a/src/components/status/status.vue b/src/components/status/status.vue index d291e762..72e9b25a 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -446,6 +446,11 @@ $status-margin: 0.75em; &_focused { background-color: $fallback--lightBg; background-color: var(--lightBg, $fallback--lightBg); + color: $fallback--text; + color: var(--lightBgText, $fallback--text); + --faint: var(--lightBgFaintText, $fallback--faint); + --faintLink: var(--lightBgFaintLink, $fallback--faint); + --icon: var(--lightBgIcon, $fallback--icon); } .timeline & { @@ -573,8 +578,6 @@ $status-margin: 0.75em; overflow: hidden; text-overflow: ellipsis; margin: 0 0.4em 0 0.2em; - color: $fallback--faint; - color: var(--faint, $fallback--faint); } .replies-separator { diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index e0894b6d..1381f1fb 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -414,7 +414,7 @@ /> @@ -423,11 +423,34 @@

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

+
+

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

+ + + + + +
{ return } if (k === 'faint') { - colors[k + 'Link'].a = v + colors['faintLink'].a = v colors['panelFaint'].a = v + colors['lightBgFaintText'].a = v + colors['lightBgFaintLink'].a = v } if (k === 'bg') { colors['lightBg'].a = v diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js index 21bab1a2..808f67d5 100644 --- a/src/services/theme_data/theme_data.service.js +++ b/src/services/theme_data/theme_data.service.js @@ -12,6 +12,7 @@ export const LAYERS = { badge: null, // no transparency support fg: null, bg: 'underlay', + lightBg: 'bg', panel: 'bg', btn: 'bg', btnPanel: 'panel', @@ -57,6 +58,31 @@ export const SLOT_INHERITANCE = { depends: ['bg'], color: (mod, bg) => brightness(5 * mod, bg).rgb }, + lightBgFaintText: { + depends: ['faint'], + layer: 'lightBg', + textColor: true + }, + lightBgFaintLink: { + depends: ['faintLink'], + layer: 'lightBg', + textColor: 'preserve' + }, + lightBgText: { + depends: ['text'], + layer: 'lightBg', + textColor: true + }, + lightBgLink: { + depends: ['link'], + layer: 'lightBg', + textColor: 'preserve' + }, + lightBgIcon: { + depends: ['lightBg', 'lightBgText'], + color: (mod, bg, text) => mixrgb(bg, text) + }, + lightText: { depends: ['text'], color: (mod, text) => brightness(20 * mod, text).rgb -- cgit v1.2.3-70-g09d2 From 8d2f2866f6d32b4ada155d76e07910b92c218146 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 13 Jan 2020 01:56:29 +0200 Subject: computed colors support --- src/App.scss | 4 ++ src/components/style_switcher/style_switcher.js | 6 ++- src/components/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(-) (limited to 'src/services/theme_data') 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 { -- cgit v1.2.3-70-g09d2 From 8a7f3fc16a511e6c5917c0e25cba1f6163659264 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 13 Jan 2020 20:40:16 +0200 Subject: selectedPost and selectedMenu support --- src/components/emoji_input/emoji_input.vue | 10 ++--- src/components/nav_panel/nav_panel.vue | 20 ++++----- src/components/selectable_list/selectable_list.vue | 10 ++--- src/components/side_drawer/side_drawer.vue | 10 ++--- src/components/status/status.vue | 10 ++--- src/components/style_switcher/style_switcher.vue | 46 +++++++++++++++++++ src/services/theme_data/theme_data.service.js | 52 ++++++++++++++++++++++ 7 files changed, 128 insertions(+), 30 deletions(-) (limited to 'src/services/theme_data') diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue index dcf51ff9..46ed6f25 100644 --- a/src/components/emoji_input/emoji_input.vue +++ b/src/components/emoji_input/emoji_input.vue @@ -157,11 +157,11 @@ &.highlighted { background-color: $fallback--fg; - background-color: var(--lightBg, $fallback--fg); - color: var(--lightBgText, $fallback--text); - --faint: var(--lightBgFaintText, $fallback--faint); - --faintLink: var(--lightBgFaintLink, $fallback--faint); - --icon: var(--lightBgIcon, $fallback--icon); + background-color: var(--selectedMenu, $fallback--fg); + color: var(--selectedMenuText, $fallback--text); + --faint: var(--selectedMenuFaintText, $fallback--faint); + --faintLink: var(--selectedMenuFaintLink, $fallback--faint); + --icon: var(--selectedMenuIcon, $fallback--icon); } } } diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index 0886bf8c..afc611ea 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -100,23 +100,23 @@ &:hover { background-color: $fallback--lightBg; - background-color: var(--lightBg, $fallback--lightBg); + background-color: var(--selectedMenu, $fallback--lightBg); color: $fallback--link; - color: var(--lightBgText, $fallback--link); - --faint: var(--lightBgFaintText, $fallback--faint); - --faintLink: var(--lightBgFaintLink, $fallback--faint); - --icon: var(--lightBgIcon, $fallback--icon); + color: var(--selectedMenuText, $fallback--link); + --faint: var(--selectedMenuFaintText, $fallback--faint); + --faintLink: var(--selectedMenuFaintLink, $fallback--faint); + --icon: var(--selectedMenuIcon, $fallback--icon); } &.router-link-active { font-weight: bolder; background-color: $fallback--lightBg; - background-color: var(--lightBg, $fallback--lightBg); + background-color: var(--selectedMenu, $fallback--lightBg); color: $fallback--text; - color: var(--lightBgText, $fallback--text); - --faint: var(--lightBgFaintText, $fallback--faint); - --faintLink: var(--lightBgFaintLink, $fallback--faint); - --icon: var(--lightBgIcon, $fallback--icon); + color: var(--selectedMenuText, $fallback--text); + --faint: var(--selectedMenuFaintText, $fallback--faint); + --faintLink: var(--selectedMenuFaintLink, $fallback--faint); + --icon: var(--selectedMenuIcon, $fallback--icon); &:hover { text-decoration: underline; diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue index 416c9b6a..2d1e44a3 100644 --- a/src/components/selectable_list/selectable_list.vue +++ b/src/components/selectable_list/selectable_list.vue @@ -68,11 +68,11 @@ &-item-selected-inner { background-color: $fallback--lightBg; - background-color: var(--lightBg, $fallback--lightBg); - color: var(--lightBgText, $fallback--text); - --faint: var(--lightBgFaintText, $fallback--faint); - --faintLink: var(--lightBgFaintLink, $fallback--faint); - --icon: var(--lightBgIcon, $fallback--icon); + background-color: var(--selectedMenu, $fallback--lightBg); + color: var(--selectedMenuText, $fallback--text); + --faint: var(--selectedMenuFaintText, $fallback--faint); + --faintLink: var(--selectedMenuFaintLink, $fallback--faint); + --icon: var(--selectedMenuIcon, $fallback--icon); } &-header { diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue index 6d75221f..3188fd59 100644 --- a/src/components/side_drawer/side_drawer.vue +++ b/src/components/side_drawer/side_drawer.vue @@ -289,12 +289,12 @@ &:hover { background-color: $fallback--lightBg; - background-color: var(--lightBg, $fallback--lightBg); + background-color: var(--selectedMenu, $fallback--lightBg); color: $fallback--text; - color: var(--lightBgText, $fallback--text); - --faint: var(--lightBgFaintText, $fallback--faint); - --faintLink: var(--lightBgFaintLink, $fallback--faint); - --icon: var(--lightBgIcon, $fallback--icon); + color: var(--selectedMenuText, $fallback--text); + --faint: var(--selectedMenuFaintText, $fallback--faint); + --faintLink: var(--selectedMenuFaintLink, $fallback--faint); + --icon: var(--selectedMenuIcon, $fallback--icon); } } } diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 72e9b25a..38d091ed 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -445,12 +445,12 @@ $status-margin: 0.75em; &_focused { background-color: $fallback--lightBg; - background-color: var(--lightBg, $fallback--lightBg); + background-color: var(--selectedPost, $fallback--lightBg); color: $fallback--text; - color: var(--lightBgText, $fallback--text); - --faint: var(--lightBgFaintText, $fallback--faint); - --faintLink: var(--lightBgFaintLink, $fallback--faint); - --icon: var(--lightBgIcon, $fallback--icon); + color: var(--selectedPostText, $fallback--text); + --faint: var(--selectedPostFaintText, $fallback--faint); + --faintLink: var(--selectedPostFaintLink, $fallback--faint); + --icon: var(--selectedPostIcon, $fallback--icon); } .timeline & { diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index f2fdfea2..613abd1f 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -465,6 +465,52 @@ />
+
+

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

+ + + + + +
+
+

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

+ + + + + +
mixrgb(bg, text) }, + selectedPost: '--lightBg', + selectedPostFaintText: { + depends: ['lightBgFaintText'], + layer: 'lightBg', + textColor: true + }, + selectedPostFaintLink: { + depends: ['lightBgFaintLink'], + layer: 'lightBg', + textColor: 'preserve' + }, + selectedPostText: { + depends: ['lightBgText'], + layer: 'lightBg', + textColor: true + }, + selectedPostLink: { + depends: ['lightBgLink'], + layer: 'lightBg', + textColor: 'preserve' + }, + selectedPostIcon: { + depends: ['selectedPost', 'selectedPostText'], + color: (mod, bg, text) => mixrgb(bg, text) + }, + + selectedMenu: '--lightBg', + selectedMenuFaintText: { + depends: ['lightBgFaintText'], + layer: 'lightBg', + textColor: true + }, + selectedMenuFaintLink: { + depends: ['lightBgFaintLink'], + layer: 'lightBg', + textColor: 'preserve' + }, + selectedMenuText: { + depends: ['lightBgText'], + layer: 'lightBg', + textColor: true + }, + selectedMenuLink: { + depends: ['lightBgLink'], + layer: 'lightBg', + textColor: 'preserve' + }, + selectedMenuIcon: { + depends: ['selectedMenu', 'selectedMenuText'], + color: (mod, bg, text) => mixrgb(bg, text) + }, + lightText: { depends: ['text'], color: (mod, text) => brightness(20 * mod, text).rgb -- cgit v1.2.3-70-g09d2 From 4b8e0f0afa2c7f1d0f4f0c2f39f289b75b3cae08 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 13 Jan 2020 21:30:55 +0200 Subject: buttonPressed & buttonDisabled slots --- src/App.scss | 44 ++++++++++++++++++++++- src/components/style_switcher/style_switcher.vue | 16 ++++++++- src/services/theme_data/theme_data.service.js | 46 +++++++++++++++++++++--- 3 files changed, 100 insertions(+), 6 deletions(-) (limited to 'src/services/theme_data') diff --git a/src/App.scss b/src/App.scss index ef139e88..7f404bc6 100644 --- a/src/App.scss +++ b/src/App.scss @@ -107,7 +107,10 @@ button { &:disabled { cursor: not-allowed; - opacity: 0.5; + color: $fallback--text; + color: var(--btnDisabledText, $fallback--text); + background-color: $fallback--fg; + background-color: var(--btnDisabled, $fallback--fg) } &.pressed { @@ -365,6 +368,26 @@ i[class*=icon-] { height: 50px; box-sizing: border-box; + button { + &, i[class*=icon-] { + color: $fallback--text; + color: var(--btnTopBarText, $fallback--text); + } + + &:active { + background-color: $fallback--fg; + background-color: var(--btnTopBarPressed, $fallback--fg); + color: $fallback--text; + color: var(--btnTopBarPressedText, $fallback--text); + } + + &:disabled { + color: $fallback--text; + color: var(--btnTopBarDisabledText, $fallback--text); + } + } + + .logo { display: flex; position: absolute; @@ -525,6 +548,25 @@ main-router { align-self: stretch; } + button { + &, i[class*=icon-] { + color: $fallback--text; + color: var(--btnPanelText, $fallback--text); + } + + &:active { + background-color: $fallback--fg; + background-color: var(--btnPanelPressed, $fallback--fg); + color: $fallback--text; + color: var(--btnPanelPressedText, $fallback--text); + } + + &:disabled { + color: $fallback--text; + color: var(--btnPanelDisabledText, $fallback--text); + } + } + a { color: $fallback--link; color: var(--panelLink, $fallback--link) diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 613abd1f..3921c953 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -360,7 +360,21 @@ :fallback="previewTheme.colors.btnPressedText" :label="$t('settings.text')" /> - + +

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

+ + +

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

diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js index dd5f8fd0..c5dd8047 100644 --- a/src/services/theme_data/theme_data.service.js +++ b/src/services/theme_data/theme_data.service.js @@ -36,7 +36,8 @@ export const DEFAULT_OPACITY = { input: 0.5, faint: 0.5, underlay: 0.15, - poll: 1 + poll: 1, + topBar: 1 } export const SLOT_INHERITANCE = { @@ -222,7 +223,8 @@ export const SLOT_INHERITANCE = { btn: '--fg', btnText: { depends: ['fgText'], - layer: 'btn' + layer: 'btn', + textColor: true }, btnPanelText: { depends: ['panelText'], @@ -257,6 +259,32 @@ export const SLOT_INHERITANCE = { textColor: true }, + btnDisabled: { + depends: ['btn', 'bg'], + color: (mod, btn, bg) => alphaBlend(btn, 0.5, bg) + }, + btnDisabledText: { + depends: ['btnText'], + layer: 'btn', + variant: 'btnDisabled', + textColor: true, + color: (mod, text) => brightness(mod * -60, text).rgb + }, + btnDisabledPanelText: { + depends: ['btnPanelText'], + layer: 'btnPanel', + variant: 'btnDisabled', + textColor: true, + color: (mod, text) => brightness(mod * -60, text).rgb + }, + btnDisabledTopBarText: { + depends: ['btnTopBarText'], + layer: 'btnTopBar', + variant: 'btnDisabled', + textColor: true, + color: (mod, text) => brightness(mod * -60, text).rgb + }, + // Input fields input: '--fg', inputText: { @@ -329,7 +357,10 @@ export const getLayers = (layer, variant = layer, colors, opacity) => { currentLayer === layer ? colors[variant] : colors[currentLayer], - opacity[currentLayer] + // TODO: Remove this hack when opacities/layers system is improved + currentLayer.startsWith('btn') + ? opacity.btn + : opacity[currentLayer] ])) } @@ -443,11 +474,18 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu [key]: contrastRatio(bg).rgb } } else { + let color = { ...acc[deps[0]] } + if (value.color) { + const isLightOnDark = convert(bg).hsl.l < convert(color).hsl.l + const mod = isLightOnDark ? 1 : -1 + color = value.color(mod, ...deps.map((dep) => ({ ...acc[dep] }))) + } + return { ...acc, [key]: getTextColor( bg, - { ...acc[deps[0]] }, + { ...color }, value.textColor === 'preserve' ) } -- cgit v1.2.3-70-g09d2 From 9f7af191e8a77a0c5620c8698cc7b26dde02868b Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 13 Jan 2020 22:19:19 +0200 Subject: tabs & toggled (ex pressed) buttons --- src/App.scss | 22 +++++++++--- src/components/follow_button/follow_button.vue | 2 +- .../moderation_tools/moderation_tools.vue | 2 +- src/components/style_switcher/style_switcher.vue | 23 +++++++++++++ src/components/tab_switcher/tab_switcher.scss | 7 ++++ src/components/user_card/user_card.vue | 10 ++---- src/services/theme_data/theme_data.service.js | 39 ++++++++++++++++++++++ 7 files changed, 90 insertions(+), 15 deletions(-) (limited to 'src/services/theme_data') diff --git a/src/App.scss b/src/App.scss index 7f404bc6..70983fe2 100644 --- a/src/App.scss +++ b/src/App.scss @@ -113,11 +113,11 @@ button { background-color: var(--btnDisabled, $fallback--fg) } - &.pressed { - color: $fallback--faint; - color: var(--faint, $fallback--faint); - background-color: $fallback--bg; - background-color: var(--bg, $fallback--bg) + &.toggled { + color: $fallback--text; + color: var(--btnToggledText, $fallback--text); + background-color: $fallback--fg; + background-color: var(--btnToggled, $fallback--fg) } &.danger { @@ -385,6 +385,13 @@ i[class*=icon-] { color: $fallback--text; color: var(--btnTopBarDisabledText, $fallback--text); } + + &.toggled { + color: $fallback--text; + color: var(--btnTopBarToggledText, $fallback--text); + background-color: $fallback--fg; + background-color: var(--btnTopBarToggled, $fallback--fg) + } } @@ -565,6 +572,11 @@ main-router { color: $fallback--text; color: var(--btnPanelDisabledText, $fallback--text); } + + &.toggled { + color: $fallback--text; + color: var(--btnPanelToggledText, $fallback--text); + } } a { diff --git a/src/components/follow_button/follow_button.vue b/src/components/follow_button/follow_button.vue index f0cbb94b..bfdc137b 100644 --- a/src/components/follow_button/follow_button.vue +++ b/src/components/follow_button/follow_button.vue @@ -1,7 +1,7 @@