From e5a34870f0f7154712783fb6d9c20edf4c06ad35 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sat, 28 Dec 2019 15:55:42 +0200 Subject: Accent works --- static/themes/breezy-dark.json | 2 +- static/themes/breezy-light.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'static/themes') diff --git a/static/themes/breezy-dark.json b/static/themes/breezy-dark.json index 6119bf88..7ce41384 100644 --- a/static/themes/breezy-dark.json +++ b/static/themes/breezy-dark.json @@ -50,7 +50,7 @@ "y": "0", "blur": 0, "spread": "1", - "color": "--link", + "color": "--accent", "alpha": "0.3", "inset": true }, diff --git a/static/themes/breezy-light.json b/static/themes/breezy-light.json index becf704f..dc43f90e 100644 --- a/static/themes/breezy-light.json +++ b/static/themes/breezy-light.json @@ -50,7 +50,7 @@ "y": "0", "blur": 0, "spread": "1", - "color": "--link", + "color": "--accent", "alpha": "0.3", "inset": true }, -- cgit v1.2.3-70-g09d2 From 332d31dc02b83d6ca06837fdfb4f663050d9effd Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 30 Dec 2019 00:45:48 +0200 Subject: support for "transparent" color keyword --- src/components/style_switcher/style_switcher.js | 60 ++++++++++++++----------- src/services/color_convert/color_convert.js | 3 +- src/services/style_setter/style_setter.js | 50 ++++++++++++++------- static/themes/breezy-dark.json | 8 +++- static/themes/breezy-light.json | 5 +++ 5 files changed, 80 insertions(+), 46 deletions(-) (limited to 'static/themes') diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index 602a635e..9fe1bf59 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -25,6 +25,14 @@ const v1OnlyNames = [ 'cOrange' ].map(_ => _ + 'ColorLocal') +const colorConvert = (color) => { + if (color === 'transparent') { + return color + } else { + return hex2rgb(color) + } +} + export default { data () { return { @@ -228,36 +236,36 @@ export default { // fgsfds :DDDD const fgs = { - text: hex2rgb(colors.text), - panelText: hex2rgb(colors.panelText), - panelLink: hex2rgb(colors.panelLink), - btnText: hex2rgb(colors.btnText), - topBarText: hex2rgb(colors.topBarText), - inputText: hex2rgb(colors.inputText), - - link: hex2rgb(colors.link), - topBarLink: hex2rgb(colors.topBarLink), - - red: hex2rgb(colors.cRed), - green: hex2rgb(colors.cGreen), - blue: hex2rgb(colors.cBlue), - orange: hex2rgb(colors.cOrange) + 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: hex2rgb(colors.bg), - underlay: hex2rgb(colors.underlay), - btn: hex2rgb(colors.btn), - panel: hex2rgb(colors.panel), - topBar: hex2rgb(colors.topBar), - input: hex2rgb(colors.input), - alertError: hex2rgb(colors.alertError), - alertWarning: hex2rgb(colors.alertWarning), - badgeNotification: hex2rgb(colors.badgeNotification) + 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, opacity.underlay] + const underlay = [bgs.underlay || colorConvert('#000000'), opacity.underlay] const panel = [underlay, bg] @@ -443,7 +451,7 @@ export default { */ normalizeLocalState (originalInput, version = 0) { let input - if (typeof originalInput.v3compat !== undefined) { + if (typeof originalInput.v3compat !== 'undefined') { version = 3 input = merge(originalInput, originalInput.v3compat) } else { @@ -574,7 +582,7 @@ export default { this.previewColors = generateColors({ v3compat: this.currentCompat, opacity: this.currentOpacity, - colors: this.currentColors, + colors: this.currentColors }) } catch (e) { console.warn(e) diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js index 757a36bd..32b4d50e 100644 --- a/src/services/color_convert/color_convert.js +++ b/src/services/color_convert/color_convert.js @@ -7,7 +7,8 @@ const rgb2hex = (r, g, b) => { if (r === null || typeof r === 'undefined') { return undefined } - if (r[0] === '#') { + // TODO: clean up this mess + if (r[0] === '#' || r === 'transparent') { return r } if (typeof r === 'object') { diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 8740fc55..df22f94f 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -170,23 +170,32 @@ export const generateCompat = (input) => { } } -const generateColors = (input) => { +const generateColors = (themeData) => { const colors = {} - const opacity = Object.assign({ + const rawOpacity = Object.assign({ alert: 0.5, input: 0.5, faint: 0.5, underlay: 0.15 - }, Object.entries(input.opacity || {}).reduce((acc, [k, v]) => { + }, Object.entries(themeData.opacity || {}).reduce((acc, [k, v]) => { if (typeof v !== 'undefined') { acc[k] = v } return acc }, {})) - const inputColors = input.colors || input + const inputColors = themeData.colors || themeData - const compat = input.v3compat || {} + const transparentsOpacity = Object.entries(inputColors).reduce((acc, [k, v]) => { + if (v === 'transparent') { + acc[k] = 0 + } + return acc + }, {}) + + const opacity = { ...rawOpacity, ...transparentsOpacity } + + const compat = themeData.v3compat || {} const compatColors = Object.entries(compat.colors || {}).reduce((acc, [key, value]) => { const newVal = value === null ? undefined : value return { ...acc, [key]: newVal } @@ -196,15 +205,22 @@ const generateColors = (input) => { if (typeof v === 'object') { acc[k] = v } else { - acc[k] = hex2rgb(v) + let value = v + if (v === 'transparent') { + value = '#FF00FF' + } + acc[k] = hex2rgb(value) } return acc }, {}) - const isLightOnDark = convert(col.bg).hsl.l < convert(col.text).hsl.l + colors.bg = col.bg + colors.underlay = col.underlay || hex2rgb('#000000') + colors.text = col.text + + const isLightOnDark = convert(colors.bg).hsl.l < convert(colors.text).hsl.l const mod = isLightOnDark ? 1 : -1 - colors.text = col.text colors.lightText = brightness(20 * mod, colors.text).rgb colors.accent = col.accent || col.link @@ -212,17 +228,15 @@ const generateColors = (input) => { colors.faint = col.faint || Object.assign({}, col.text) - colors.bg = col.bg colors.lightBg = col.lightBg || brightness(5 * mod, colors.bg).rgb - const underlay = [col.underlay, opacity.underlay] + const underlay = [colors.underlay, opacity.underlay] const fg = [col.fg, opacity.fg] const bg = [col.bg, opacity.bg] colors.fg = col.fg colors.fgText = col.fgText || getTextColor(alphaBlendLayers(colors.text, [underlay, bg, fg]), colors.text) colors.fgLink = col.fgLink || getTextColor(alphaBlendLayers(colors.link, [underlay, bg, fg]), colors.link, true) - colors.underlay = col.underlay || hex2rgb('#000000') colors.border = col.border || brightness(2 * mod, colors.fg).rgb @@ -231,8 +245,8 @@ const generateColors = (input) => { colors.btnText = col.btnText || getTextColor(alphaBlendLayers(colors.fgText, [underlay, bg, fg, btn]), colors.fgText) colors.input = col.input || Object.assign({}, col.fg) - const inputCol = [colors.input, opacity.input] - colors.inputText = col.inputText || getTextColor(alphaBlendLayers(colors.lightText, [underlay, bg, fg, inputCol]), colors.lightText) + const input = [colors.input, opacity.input] + colors.inputText = col.inputText || getTextColor(alphaBlendLayers(colors.lightText, [underlay, bg, fg, input]), colors.lightText) colors.panel = col.panel || Object.assign({}, col.fg) const panel = [colors.panel, opacity.panel] @@ -256,12 +270,14 @@ const generateColors = (input) => { colors.cOrange = col.cOrange || hex2rgb('#E3FF00') colors.alertError = col.alertError || Object.assign({}, colors.cRed) - colors.alertErrorText = getTextColor(alphaBlend(colors.alertError, opacity.alert, colors.bg), colors.text) - colors.alertErrorPanelText = getTextColor(alphaBlend(colors.alertError, opacity.alert, colors.panel), colors.panelText) + const alertError = [colors.alertError, opacity.alert] + colors.alertErrorText = getTextColor(alphaBlendLayers(colors.text, [underlay, bg, alertError]), colors.text) + colors.alertErrorPanelText = getTextColor(alphaBlendLayers(colors.panelText, [underlay, bg, panel, panel, alertError]), colors.panelText) colors.alertWarning = col.alertWarning || Object.assign({}, colors.cOrange) - colors.alertWarningText = getTextColor(alphaBlend(colors.alertWarning, opacity.alert, colors.bg), colors.text) - colors.alertWarningPanelText = getTextColor(alphaBlend(colors.alertWarning, opacity.alert, colors.panel), colors.panelText) + const alertWarning = [colors.alertWarning, opacity.alert] + colors.alertWarningText = getTextColor(alphaBlendLayers(colors.text, [underlay, bg, alertWarning]), colors.text) + colors.alertWarningPanelText = getTextColor(alphaBlendLayers(colors.panelText, [underlay, bg, panel, panel, alertWarning]), colors.panelText) colors.badgeNotification = col.badgeNotification || Object.assign({}, colors.cRed) colors.badgeNotificationText = contrastRatio(colors.badgeNotification).rgb diff --git a/static/themes/breezy-dark.json b/static/themes/breezy-dark.json index 7ce41384..0ed55184 100644 --- a/static/themes/breezy-dark.json +++ b/static/themes/breezy-dark.json @@ -107,8 +107,12 @@ }, "fonts": {}, "opacity": { - "input": "1", - "panel": "0" + "input": "1" + }, + "v3compat": { + "colors": { + "panel": "transparent" + } }, "colors": { "bg": "#31363b", diff --git a/static/themes/breezy-light.json b/static/themes/breezy-light.json index dc43f90e..5db185dd 100644 --- a/static/themes/breezy-light.json +++ b/static/themes/breezy-light.json @@ -109,6 +109,11 @@ "opacity": { "input": "1" }, + "v3compat": { + "colors": { + "panel": "transparent" + } + }, "colors": { "bg": "#eff0f1", "text": "#232627", -- cgit v1.2.3-70-g09d2 From 4bb1c98e0f28bcf1d0dff2d90d01013cd5487522 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 2 Jan 2020 20:36:10 +0200 Subject: Replaced `v3compat` with `source` to reduce code complexity. Made more slots customizable. `theme` now contains a snapshot of theme generated for better compatiblity and future-proofing --- src/components/style_switcher/style_switcher.js | 68 ++++--- src/components/style_switcher/style_switcher.vue | 14 +- src/services/style_setter/style_setter.js | 42 ++--- static/themes/breezy-dark.json | 224 ++++++++++++++++++++++- static/themes/breezy-light.json | 220 +++++++++++++++++++++- 5 files changed, 488 insertions(+), 80 deletions(-) (limited to 'static/themes') diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index 9fe1bf59..f751260a 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -1,7 +1,15 @@ import { rgb2hex, hex2rgb, getContrastRatio, getContrastRatioLayers, alphaBlend } from '../../services/color_convert/color_convert.js' import { set, delete as del } from 'vue' import { merge } from 'lodash' -import { generateCompat, generateColors, generateShadows, generateRadii, generateFonts, composePreset, getThemes } from '../../services/style_setter/style_setter.js' +import { + generateColors, + generateShadows, + generateRadii, + generateFonts, + composePreset, + getThemes, + CURRENT_VERSION +} from '../../services/style_setter/style_setter.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' @@ -135,15 +143,6 @@ export default { selectedVersion () { return Array.isArray(this.selected) ? 1 : 2 }, - currentCompat () { - return generateCompat({ - shadows: this.shadowsLocal, - fonts: this.fontsLocal, - opacity: this.currentOpacity, - colors: this.currentColors, - radii: this.currentRadii - }) - }, currentColors () { return { bg: this.bgColorLocal, @@ -339,27 +338,32 @@ export default { !this.keepColor ) - const theme = {} + const source = { + themeEngineVersion: CURRENT_VERSION + } if (this.keepFonts || saveEverything) { - theme.fonts = this.fontsLocal + source.fonts = this.fontsLocal } if (this.keepShadows || saveEverything) { - theme.shadows = this.shadowsLocal + source.shadows = this.shadowsLocal } if (this.keepOpacity || saveEverything) { - theme.opacity = this.currentOpacity + source.opacity = this.currentOpacity } if (this.keepColor || saveEverything) { - theme.colors = this.currentColors + source.colors = this.currentColors } if (this.keepRoundness || saveEverything) { - theme.radii = this.currentRadii + source.radii = this.currentRadii } + const theme = this.previewTheme + + console.log(source) return { - // To separate from other random JSON files and possible future theme formats - _pleroma_theme_version: 2, theme: merge(theme, this.currentCompat) + // To separate from other random JSON files and possible future source formats + _pleroma_theme_version: 2, theme, source } } }, @@ -392,7 +396,7 @@ export default { if (parsed._pleroma_theme_version === 1) { this.normalizeLocalState(parsed, 1) } else if (parsed._pleroma_theme_version >= 2) { - this.normalizeLocalState(parsed.theme, 2) + this.normalizeLocalState(parsed.theme, 2, parsed.source) } }, importValidator (parsed) { @@ -402,7 +406,7 @@ export default { clearAll () { const state = this.$store.getters.mergedConfig.customTheme const version = state.colors ? 2 : 'l1' - this.normalizeLocalState(this.$store.getters.mergedConfig.customTheme, version) + this.normalizeLocalState(this.$store.getters.mergedConfig.customTheme, version, this.$store.getters.mergedConfig.customThemeSource) }, // Clears all the extra stuff when loading V1 theme @@ -441,24 +445,30 @@ export default { /** * This applies stored theme data onto form. Supports three versions of data: - * v3 (version = 3) - same as 2 but with some incompatible changes + * v3 (version >= 3) - newest version of themes which supports snapshots for better compatiblity * v2 (version = 2) - newer version of themes. * v1 (version = 1) - older version of themes (import from file) * v1l (version = l1) - older version of theme (load from local storage) * v1 and v1l differ because of way themes were stored/exported. - * @param {Object} input - input data + * @param {Object} theme - theme data (snapshot) * @param {Number} version - version of data. 0 means try to guess based on data. "l1" means v1, locastorage type + * @param {Object} source - theme source - this will be used if compatible + * @param {Boolean} source - by default source won't be used if version doesn't match since it might render differently + * this allows importing source anyway */ - normalizeLocalState (originalInput, version = 0) { + normalizeLocalState (theme, version = 0, source, forceSource = false) { let input - if (typeof originalInput.v3compat !== 'undefined') { - version = 3 - input = merge(originalInput, originalInput.v3compat) + if (typeof source !== 'undefined') { + if (forceSource || source.themeEngineVersion === CURRENT_VERSION) { + input = source + version = source.themeEngineVersion + } else { + input = theme + } } else { - input = originalInput + input = theme } - const compat = input.v3compat const radii = input.radii || input const opacity = input.opacity const shadows = input.shadows || {} @@ -615,7 +625,7 @@ export default { this.cOrangeColorLocal = this.selected[8] } } else if (this.selectedVersion >= 2) { - this.normalizeLocalState(this.selected.theme, 2) + this.normalizeLocalState(this.selected.theme, 2, this.selected.source) } } } diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 38ca2017..2eadbe25 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -106,7 +106,7 @@
@@ -363,7 +363,7 @@
@@ -377,7 +377,7 @@
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index df22f94f..e8a64517 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -2,6 +2,8 @@ import { times } from 'lodash' import { brightness, invertLightness, convert, contrastRatio } from 'chromatism' import { rgb2hex, hex2rgb, mixrgb, getContrastRatio, alphaBlend, alphaBlendLayers } from '../color_convert/color_convert.js' +export const CURRENT_VERSION = 3 + // 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 // styles as well as set their own colors in the future. @@ -150,29 +152,13 @@ const getCssColor = (input, a) => { return rgb2rgba({ ...rgb, a }) } -// Generates a "patch" for theme to make it compatible with v2 -export const generateCompat = (input) => { - const { colors } = input - const v3compat = { - colors: {} - } - const v2colorsPatch = {} - - // # Link became optional in v3 - if (typeof colors.link === 'undefined') { - v2colorsPatch.link = colors.accent - v3compat.colors.link = null - } - - return { - v3compat, - colors: v2colorsPatch - } -} - const generateColors = (themeData) => { const colors = {} const rawOpacity = Object.assign({ + panel: 1, + btn: 1, + border: 1, + bg: 1, alert: 0.5, input: 0.5, faint: 0.5, @@ -207,6 +193,7 @@ const generateColors = (themeData) => { } else { let value = v if (v === 'transparent') { + // TODO: hack to keep rest of the code from complaining value = '#FF00FF' } acc[k] = hex2rgb(value) @@ -221,7 +208,7 @@ const generateColors = (themeData) => { const isLightOnDark = convert(colors.bg).hsl.l < convert(colors.text).hsl.l const mod = isLightOnDark ? 1 : -1 - colors.lightText = brightness(20 * mod, colors.text).rgb + colors.lightText = col.lightText || brightness(20 * mod, colors.text).rgb colors.accent = col.accent || col.link colors.link = col.link || col.accent @@ -231,7 +218,8 @@ const generateColors = (themeData) => { colors.lightBg = col.lightBg || brightness(5 * mod, colors.bg).rgb const underlay = [colors.underlay, opacity.underlay] - const fg = [col.fg, opacity.fg] + // Technically, foreground can't be transparent (descendants can) but let's keep it just in case + const fg = [col.fg, opacity.fg || 1] const bg = [col.bg, opacity.bg] colors.fg = col.fg @@ -271,16 +259,16 @@ const generateColors = (themeData) => { colors.alertError = col.alertError || Object.assign({}, colors.cRed) const alertError = [colors.alertError, opacity.alert] - colors.alertErrorText = getTextColor(alphaBlendLayers(colors.text, [underlay, bg, alertError]), colors.text) - colors.alertErrorPanelText = getTextColor(alphaBlendLayers(colors.panelText, [underlay, bg, panel, panel, alertError]), colors.panelText) + colors.alertErrorText = col.alertErrorText || getTextColor(alphaBlendLayers(colors.text, [underlay, bg, alertError]), colors.text) + colors.alertErrorPanelText = col.alertErrorPanelText || getTextColor(alphaBlendLayers(colors.panelText, [underlay, bg, panel, panel, alertError]), colors.panelText) colors.alertWarning = col.alertWarning || Object.assign({}, colors.cOrange) const alertWarning = [colors.alertWarning, opacity.alert] - colors.alertWarningText = getTextColor(alphaBlendLayers(colors.text, [underlay, bg, alertWarning]), colors.text) - colors.alertWarningPanelText = getTextColor(alphaBlendLayers(colors.panelText, [underlay, bg, panel, panel, alertWarning]), colors.panelText) + colors.alertWarningText = col.alertWarningText || getTextColor(alphaBlendLayers(colors.text, [underlay, bg, alertWarning]), colors.text) + colors.alertWarningPanelText = col.alertWarningPanelText || getTextColor(alphaBlendLayers(colors.panelText, [underlay, bg, panel, panel, alertWarning]), colors.panelText) colors.badgeNotification = col.badgeNotification || Object.assign({}, colors.cRed) - colors.badgeNotificationText = contrastRatio(colors.badgeNotification).rgb + colors.badgeNotificationText = colors.badgeNotificationText || contrastRatio(colors.badgeNotification).rgb Object.entries(opacity).forEach(([ k, v ]) => { console.log(k) diff --git a/static/themes/breezy-dark.json b/static/themes/breezy-dark.json index 0ed55184..d447005f 100644 --- a/static/themes/breezy-dark.json +++ b/static/themes/breezy-dark.json @@ -2,6 +2,218 @@ "_pleroma_theme_version": 2, "name": "Breezy Dark (beta)", "theme": { + "shadows": { + "panel": [ + { + "x": "1", + "y": "2", + "blur": "6", + "spread": 0, + "color": "#000000", + "alpha": 0.6 + } + ], + "topBar": [ + { + "x": 0, + "y": 0, + "blur": 4, + "spread": 0, + "color": "#000000", + "alpha": 0.6 + } + ], + "popup": [ + { + "x": 2, + "y": 2, + "blur": 3, + "spread": 0, + "color": "#000000", + "alpha": 0.5 + } + ], + "avatar": [ + { + "x": 0, + "y": 1, + "blur": 8, + "spread": 0, + "color": "#000000", + "alpha": 0.7 + } + ], + "avatarStatus": [], + "panelHeader": [ + { + "x": 0, + "y": "40", + "blur": "40", + "spread": "-40", + "inset": true, + "color": "#ffffff", + "alpha": "0.1" + } + ], + "button": [ + { + "x": 0, + "y": "0", + "blur": "0", + "spread": "1", + "color": "#ffffff", + "alpha": "0.15", + "inset": true + }, + { + "x": "1", + "y": "1", + "blur": "1", + "spread": 0, + "color": "#000000", + "alpha": "0.3", + "inset": false + } + ], + "buttonHover": [ + { + "x": 0, + "y": "0", + "blur": 0, + "spread": "1", + "color": "--accent", + "alpha": "0.3", + "inset": true + }, + { + "x": "1", + "y": "1", + "blur": "1", + "spread": 0, + "color": "#000000", + "alpha": "0.3", + "inset": false + } + ], + "buttonPressed": [ + { + "x": 0, + "y": 0, + "blur": "0", + "spread": "50", + "color": "--faint", + "alpha": 1, + "inset": true + }, + { + "x": 0, + "y": "0", + "blur": 0, + "spread": "1", + "color": "#ffffff", + "alpha": 0.2, + "inset": true + }, + { + "x": "1", + "y": "1", + "blur": 0, + "spread": 0, + "color": "#000000", + "alpha": "0.3", + "inset": false + } + ], + "input": [ + { + "x": 0, + "y": "0", + "blur": 0, + "spread": "1", + "color": "#FFFFFF", + "alpha": "0.2", + "inset": true + } + ] + }, + "colors": { + "bg": "#31363b", + "underlay": "#000000", + "text": "#eff0f1", + "lightText": "#ffffff", + "accent": "#3daee9", + "link": "#3daee9", + "faint": "#eff0f1", + "lightBg": "#3d4349", + "fg": "#31363b", + "fgText": "#eff0f1", + "fgLink": "#3daee9", + "border": "#4c545b", + "btn": "#31363b", + "btnText": "#eff0f1", + "input": "#232629", + "inputText": "#ffffff", + "panel": "#ff00ff", + "panelText": "#eff0f1", + "panelLink": "#3daee9", + "panelFaint": "#eff0f1", + "topBar": "#31363b", + "topBarText": "#eff0f1", + "topBarLink": "#eff0f1", + "faintLink": "#3daee9", + "linkBg": "#366681", + "icon": "#909396", + "cBlue": "#3daee9", + "cRed": "#da4453", + "cGreen": "#27ae60", + "cOrange": "#f67400", + "alertError": "#da4453", + "alertErrorText": "#eff0f1", + "alertErrorPanelText": "#eff0f1", + "alertWarning": "#f67400", + "alertWarningText": "#eff0f1", + "alertWarningPanelText": "#eff0f1", + "badgeNotification": "#da4453", + "badgeNotificationText": "#ffffff" + }, + "opacity": { + "panel": 0, + "btn": 1, + "border": 1, + "bg": 1, + "alert": 0.5, + "input": 0.5, + "faint": 0.5, + "underlay": 0.15 + }, + "radii": { + "btn": "2", + "input": "2", + "checkbox": "1", + "panel": "2", + "avatar": "2", + "avatarAlt": "2", + "tooltip": "2", + "attachment": "2" + }, + "fonts": { + "interface": { + "family": "sans-serif" + }, + "input": { + "family": "inherit" + }, + "post": { + "family": "inherit" + }, + "postCode": { + "family": "monospace" + } + } + }, + "source": { + "themeEngineVersion": 3, + "fonts": {}, "shadows": { "panel": [ { @@ -105,21 +317,13 @@ } ] }, - "fonts": {}, - "opacity": { - "input": "1" - }, - "v3compat": { - "colors": { - "panel": "transparent" - } - }, + "opacity": {}, "colors": { "bg": "#31363b", "text": "#eff0f1", "link": "#3daee9", "fg": "#31363b", - "panel": "#31363b", + "panel": "transparent", "input": "#232629", "topBarLink": "#eff0f1", "btn": "#31363b", diff --git a/static/themes/breezy-light.json b/static/themes/breezy-light.json index 5db185dd..243b8593 100644 --- a/static/themes/breezy-light.json +++ b/static/themes/breezy-light.json @@ -2,6 +2,218 @@ "_pleroma_theme_version": 2, "name": "Breezy Light (beta)", "theme": { + "shadows": { + "panel": [ + { + "x": "1", + "y": "2", + "blur": "6", + "spread": 0, + "color": "#000000", + "alpha": 0.6 + } + ], + "topBar": [ + { + "x": 0, + "y": 0, + "blur": 4, + "spread": 0, + "color": "#000000", + "alpha": 0.6 + } + ], + "popup": [ + { + "x": 2, + "y": 2, + "blur": 3, + "spread": 0, + "color": "#000000", + "alpha": 0.5 + } + ], + "avatar": [ + { + "x": 0, + "y": 1, + "blur": 8, + "spread": 0, + "color": "#000000", + "alpha": 0.7 + } + ], + "avatarStatus": [], + "panelHeader": [ + { + "x": 0, + "y": "40", + "blur": "40", + "spread": "-40", + "inset": true, + "color": "#ffffff", + "alpha": "0.1" + } + ], + "button": [ + { + "x": 0, + "y": "0", + "blur": "0", + "spread": "1", + "color": "#000000", + "alpha": "0.3", + "inset": true + }, + { + "x": "1", + "y": "1", + "blur": "1", + "spread": 0, + "color": "#000000", + "alpha": "0.3", + "inset": false + } + ], + "buttonHover": [ + { + "x": 0, + "y": "0", + "blur": 0, + "spread": "1", + "color": "--accent", + "alpha": "0.3", + "inset": true + }, + { + "x": "1", + "y": "1", + "blur": "1", + "spread": 0, + "color": "#000000", + "alpha": "0.3", + "inset": false + } + ], + "buttonPressed": [ + { + "x": 0, + "y": 0, + "blur": "0", + "spread": "50", + "color": "--faint", + "alpha": 1, + "inset": true + }, + { + "x": 0, + "y": "0", + "blur": 0, + "spread": "1", + "color": "#ffffff", + "alpha": 0.2, + "inset": true + }, + { + "x": "1", + "y": "1", + "blur": 0, + "spread": 0, + "color": "#000000", + "alpha": "0.3", + "inset": false + } + ], + "input": [ + { + "x": 0, + "y": "0", + "blur": 0, + "spread": "1", + "color": "#000000", + "alpha": "0.2", + "inset": true + } + ] + }, + "colors": { + "bg": "#eff0f1", + "underlay": "#000000", + "text": "#232627", + "lightText": "#000000", + "accent": "#2980b9", + "link": "#2980b9", + "faint": "#232627", + "lightBg": "#e2e4e6", + "fg": "#bcc2c7", + "fgText": "#232627", + "fgLink": "#2980b9", + "border": "#b7bdc3", + "btn": "#eff0f1", + "btnText": "#232627", + "input": "#fcfcfc", + "inputText": "#000000", + "panel": "#475057", + "panelText": "#fcfcfc", + "panelLink": "#ffffff", + "panelFaint": "#d8dbdc", + "topBar": "#475057", + "topBarText": "#d8dbdc", + "topBarLink": "#eff0f1", + "faintLink": "#2980b9", + "linkBg": "#a0c4db", + "icon": "#898b8c", + "cBlue": "#2980b9", + "cRed": "#da4453", + "cGreen": "#27ae60", + "cOrange": "#f67400", + "alertError": "#da4453", + "alertErrorText": "#232627", + "alertErrorPanelText": "#fcfcfc", + "alertWarning": "#f67400", + "alertWarningText": "#232627", + "alertWarningPanelText": "#fcfcfc", + "badgeNotification": "#da4453", + "badgeNotificationText": "#ffffff" + }, + "opacity": { + "panel": 1, + "btn": 1, + "border": 1, + "bg": 1, + "alert": 0.5, + "input": "1", + "faint": 0.5, + "underlay": 0.15 + }, + "radii": { + "btn": "2", + "input": "2", + "checkbox": "1", + "panel": "2", + "avatar": "2", + "avatarAlt": "2", + "tooltip": "2", + "attachment": "2" + }, + "fonts": { + "interface": { + "family": "sans-serif" + }, + "input": { + "family": "inherit" + }, + "post": { + "family": "inherit" + }, + "postCode": { + "family": "monospace" + } + } + }, + "source": { + "themeEngineVersion": 3, + "fonts": {}, "shadows": { "panel": [ { @@ -105,20 +317,14 @@ } ] }, - "fonts": {}, "opacity": { "input": "1" }, - "v3compat": { - "colors": { - "panel": "transparent" - } - }, "colors": { "bg": "#eff0f1", "text": "#232627", - "link": "#2980b9", "fg": "#bcc2c7", + "accent": "#2980b9", "panel": "#475057", "panelText": "#fcfcfc", "input": "#fcfcfc", -- cgit v1.2.3-70-g09d2 From f31ed7e5a8a9248886837311d7407b01164724c1 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 12 Jan 2020 03:53:08 +0200 Subject: remove snapshot data from breezy --- static/themes/breezy-dark.json | 210 ---------------------------------------- static/themes/breezy-light.json | 210 ---------------------------------------- 2 files changed, 420 deletions(-) (limited to 'static/themes') diff --git a/static/themes/breezy-dark.json b/static/themes/breezy-dark.json index d447005f..580ce82c 100644 --- a/static/themes/breezy-dark.json +++ b/static/themes/breezy-dark.json @@ -1,216 +1,6 @@ { "_pleroma_theme_version": 2, "name": "Breezy Dark (beta)", - "theme": { - "shadows": { - "panel": [ - { - "x": "1", - "y": "2", - "blur": "6", - "spread": 0, - "color": "#000000", - "alpha": 0.6 - } - ], - "topBar": [ - { - "x": 0, - "y": 0, - "blur": 4, - "spread": 0, - "color": "#000000", - "alpha": 0.6 - } - ], - "popup": [ - { - "x": 2, - "y": 2, - "blur": 3, - "spread": 0, - "color": "#000000", - "alpha": 0.5 - } - ], - "avatar": [ - { - "x": 0, - "y": 1, - "blur": 8, - "spread": 0, - "color": "#000000", - "alpha": 0.7 - } - ], - "avatarStatus": [], - "panelHeader": [ - { - "x": 0, - "y": "40", - "blur": "40", - "spread": "-40", - "inset": true, - "color": "#ffffff", - "alpha": "0.1" - } - ], - "button": [ - { - "x": 0, - "y": "0", - "blur": "0", - "spread": "1", - "color": "#ffffff", - "alpha": "0.15", - "inset": true - }, - { - "x": "1", - "y": "1", - "blur": "1", - "spread": 0, - "color": "#000000", - "alpha": "0.3", - "inset": false - } - ], - "buttonHover": [ - { - "x": 0, - "y": "0", - "blur": 0, - "spread": "1", - "color": "--accent", - "alpha": "0.3", - "inset": true - }, - { - "x": "1", - "y": "1", - "blur": "1", - "spread": 0, - "color": "#000000", - "alpha": "0.3", - "inset": false - } - ], - "buttonPressed": [ - { - "x": 0, - "y": 0, - "blur": "0", - "spread": "50", - "color": "--faint", - "alpha": 1, - "inset": true - }, - { - "x": 0, - "y": "0", - "blur": 0, - "spread": "1", - "color": "#ffffff", - "alpha": 0.2, - "inset": true - }, - { - "x": "1", - "y": "1", - "blur": 0, - "spread": 0, - "color": "#000000", - "alpha": "0.3", - "inset": false - } - ], - "input": [ - { - "x": 0, - "y": "0", - "blur": 0, - "spread": "1", - "color": "#FFFFFF", - "alpha": "0.2", - "inset": true - } - ] - }, - "colors": { - "bg": "#31363b", - "underlay": "#000000", - "text": "#eff0f1", - "lightText": "#ffffff", - "accent": "#3daee9", - "link": "#3daee9", - "faint": "#eff0f1", - "lightBg": "#3d4349", - "fg": "#31363b", - "fgText": "#eff0f1", - "fgLink": "#3daee9", - "border": "#4c545b", - "btn": "#31363b", - "btnText": "#eff0f1", - "input": "#232629", - "inputText": "#ffffff", - "panel": "#ff00ff", - "panelText": "#eff0f1", - "panelLink": "#3daee9", - "panelFaint": "#eff0f1", - "topBar": "#31363b", - "topBarText": "#eff0f1", - "topBarLink": "#eff0f1", - "faintLink": "#3daee9", - "linkBg": "#366681", - "icon": "#909396", - "cBlue": "#3daee9", - "cRed": "#da4453", - "cGreen": "#27ae60", - "cOrange": "#f67400", - "alertError": "#da4453", - "alertErrorText": "#eff0f1", - "alertErrorPanelText": "#eff0f1", - "alertWarning": "#f67400", - "alertWarningText": "#eff0f1", - "alertWarningPanelText": "#eff0f1", - "badgeNotification": "#da4453", - "badgeNotificationText": "#ffffff" - }, - "opacity": { - "panel": 0, - "btn": 1, - "border": 1, - "bg": 1, - "alert": 0.5, - "input": 0.5, - "faint": 0.5, - "underlay": 0.15 - }, - "radii": { - "btn": "2", - "input": "2", - "checkbox": "1", - "panel": "2", - "avatar": "2", - "avatarAlt": "2", - "tooltip": "2", - "attachment": "2" - }, - "fonts": { - "interface": { - "family": "sans-serif" - }, - "input": { - "family": "inherit" - }, - "post": { - "family": "inherit" - }, - "postCode": { - "family": "monospace" - } - } - }, "source": { "themeEngineVersion": 3, "fonts": {}, diff --git a/static/themes/breezy-light.json b/static/themes/breezy-light.json index 243b8593..0c85a3c9 100644 --- a/static/themes/breezy-light.json +++ b/static/themes/breezy-light.json @@ -1,216 +1,6 @@ { "_pleroma_theme_version": 2, "name": "Breezy Light (beta)", - "theme": { - "shadows": { - "panel": [ - { - "x": "1", - "y": "2", - "blur": "6", - "spread": 0, - "color": "#000000", - "alpha": 0.6 - } - ], - "topBar": [ - { - "x": 0, - "y": 0, - "blur": 4, - "spread": 0, - "color": "#000000", - "alpha": 0.6 - } - ], - "popup": [ - { - "x": 2, - "y": 2, - "blur": 3, - "spread": 0, - "color": "#000000", - "alpha": 0.5 - } - ], - "avatar": [ - { - "x": 0, - "y": 1, - "blur": 8, - "spread": 0, - "color": "#000000", - "alpha": 0.7 - } - ], - "avatarStatus": [], - "panelHeader": [ - { - "x": 0, - "y": "40", - "blur": "40", - "spread": "-40", - "inset": true, - "color": "#ffffff", - "alpha": "0.1" - } - ], - "button": [ - { - "x": 0, - "y": "0", - "blur": "0", - "spread": "1", - "color": "#000000", - "alpha": "0.3", - "inset": true - }, - { - "x": "1", - "y": "1", - "blur": "1", - "spread": 0, - "color": "#000000", - "alpha": "0.3", - "inset": false - } - ], - "buttonHover": [ - { - "x": 0, - "y": "0", - "blur": 0, - "spread": "1", - "color": "--accent", - "alpha": "0.3", - "inset": true - }, - { - "x": "1", - "y": "1", - "blur": "1", - "spread": 0, - "color": "#000000", - "alpha": "0.3", - "inset": false - } - ], - "buttonPressed": [ - { - "x": 0, - "y": 0, - "blur": "0", - "spread": "50", - "color": "--faint", - "alpha": 1, - "inset": true - }, - { - "x": 0, - "y": "0", - "blur": 0, - "spread": "1", - "color": "#ffffff", - "alpha": 0.2, - "inset": true - }, - { - "x": "1", - "y": "1", - "blur": 0, - "spread": 0, - "color": "#000000", - "alpha": "0.3", - "inset": false - } - ], - "input": [ - { - "x": 0, - "y": "0", - "blur": 0, - "spread": "1", - "color": "#000000", - "alpha": "0.2", - "inset": true - } - ] - }, - "colors": { - "bg": "#eff0f1", - "underlay": "#000000", - "text": "#232627", - "lightText": "#000000", - "accent": "#2980b9", - "link": "#2980b9", - "faint": "#232627", - "lightBg": "#e2e4e6", - "fg": "#bcc2c7", - "fgText": "#232627", - "fgLink": "#2980b9", - "border": "#b7bdc3", - "btn": "#eff0f1", - "btnText": "#232627", - "input": "#fcfcfc", - "inputText": "#000000", - "panel": "#475057", - "panelText": "#fcfcfc", - "panelLink": "#ffffff", - "panelFaint": "#d8dbdc", - "topBar": "#475057", - "topBarText": "#d8dbdc", - "topBarLink": "#eff0f1", - "faintLink": "#2980b9", - "linkBg": "#a0c4db", - "icon": "#898b8c", - "cBlue": "#2980b9", - "cRed": "#da4453", - "cGreen": "#27ae60", - "cOrange": "#f67400", - "alertError": "#da4453", - "alertErrorText": "#232627", - "alertErrorPanelText": "#fcfcfc", - "alertWarning": "#f67400", - "alertWarningText": "#232627", - "alertWarningPanelText": "#fcfcfc", - "badgeNotification": "#da4453", - "badgeNotificationText": "#ffffff" - }, - "opacity": { - "panel": 1, - "btn": 1, - "border": 1, - "bg": 1, - "alert": 0.5, - "input": "1", - "faint": 0.5, - "underlay": 0.15 - }, - "radii": { - "btn": "2", - "input": "2", - "checkbox": "1", - "panel": "2", - "avatar": "2", - "avatarAlt": "2", - "tooltip": "2", - "attachment": "2" - }, - "fonts": { - "interface": { - "family": "sans-serif" - }, - "input": { - "family": "inherit" - }, - "post": { - "family": "inherit" - }, - "postCode": { - "family": "monospace" - } - } - }, "source": { "themeEngineVersion": 3, "fonts": {}, -- cgit v1.2.3-70-g09d2 From 9af00424529e2cb9ea9418034fa1d689f248192d Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 13 Jan 2020 02:02:40 +0200 Subject: updated breezy theme --- static/themes/breezy-dark.json | 13 +++---------- static/themes/breezy-light.json | 13 +++---------- 2 files changed, 6 insertions(+), 20 deletions(-) (limited to 'static/themes') diff --git a/static/themes/breezy-dark.json b/static/themes/breezy-dark.json index 580ce82c..ce0f10ab 100644 --- a/static/themes/breezy-dark.json +++ b/static/themes/breezy-dark.json @@ -67,15 +67,6 @@ } ], "buttonPressed": [ - { - "x": 0, - "y": 0, - "blur": "0", - "spread": "50", - "color": "--faint", - "alpha": 1, - "inset": true - }, { "x": 0, "y": "0", @@ -121,7 +112,9 @@ "cRed": "#da4453", "cBlue": "#3daee9", "cGreen": "#27ae60", - "cOrange": "#f67400" + "cOrange": "#f67400", + "btnPressed": "--accent", + "lightBg": "--accent,-20" }, "radii": { "btn": "2", diff --git a/static/themes/breezy-light.json b/static/themes/breezy-light.json index 0c85a3c9..c4e54c6d 100644 --- a/static/themes/breezy-light.json +++ b/static/themes/breezy-light.json @@ -67,15 +67,6 @@ } ], "buttonPressed": [ - { - "x": 0, - "y": 0, - "blur": "0", - "spread": "50", - "color": "--faint", - "alpha": 1, - "inset": true - }, { "x": 0, "y": "0", @@ -124,7 +115,9 @@ "cRed": "#da4453", "cBlue": "#2980b9", "cGreen": "#27ae60", - "cOrange": "#f67400" + "cOrange": "#f67400", + "btnPressed": "--accent", + "lightBg": "--accent,-20" }, "radii": { "btn": "2", -- cgit v1.2.3-70-g09d2 From 1f5ada08c156687c6a8de22f9f8acb6c5c15824b Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 16 Jan 2020 23:29:19 +0200 Subject: themes update --- static/themes/breezy-dark.json | 3 ++- static/themes/breezy-light.json | 3 ++- static/themes/redmond-xx-se.json | 5 ++++- static/themes/redmond-xx.json | 5 ++++- static/themes/redmond-xxi.json | 5 ++++- 5 files changed, 16 insertions(+), 5 deletions(-) (limited to 'static/themes') diff --git a/static/themes/breezy-dark.json b/static/themes/breezy-dark.json index ce0f10ab..97e81f3d 100644 --- a/static/themes/breezy-dark.json +++ b/static/themes/breezy-dark.json @@ -114,7 +114,8 @@ "cGreen": "#27ae60", "cOrange": "#f67400", "btnPressed": "--accent", - "lightBg": "--accent,-20" + "lightBg": "--accent", + "selectedPost": "--bg,10" }, "radii": { "btn": "2", diff --git a/static/themes/breezy-light.json b/static/themes/breezy-light.json index c4e54c6d..fd307b80 100644 --- a/static/themes/breezy-light.json +++ b/static/themes/breezy-light.json @@ -117,7 +117,8 @@ "cGreen": "#27ae60", "cOrange": "#f67400", "btnPressed": "--accent", - "lightBg": "--accent,-20" + "lightBg": "--accent", + "selectedPost": "--bg,10" }, "radii": { "btn": "2", diff --git a/static/themes/redmond-xx-se.json b/static/themes/redmond-xx-se.json index 70ee89d1..13ed3b0e 100644 --- a/static/themes/redmond-xx-se.json +++ b/static/themes/redmond-xx-se.json @@ -268,6 +268,7 @@ "bg": "#c0c0c0", "text": "#000000", "link": "#0000ff", + "accent": "#000080", "fg": "#c0c0c0", "panel": "#000080", "panelFaint": "#c0c0c0", @@ -281,7 +282,9 @@ "cRed": "#FF0000", "cBlue": "#008080", "cGreen": "#008000", - "cOrange": "#808000" + "cOrange": "#808000", + "lightBg": "--accent", + "selectedPost": "--bg,-10" }, "radii": { "btn": "0", diff --git a/static/themes/redmond-xx.json b/static/themes/redmond-xx.json index 4fd6a369..7c687ae0 100644 --- a/static/themes/redmond-xx.json +++ b/static/themes/redmond-xx.json @@ -259,6 +259,7 @@ "bg": "#c0c0c0", "text": "#000000", "link": "#0000ff", + "accent": "#000080", "fg": "#c0c0c0", "panel": "#000080", "panelFaint": "#c0c0c0", @@ -272,7 +273,9 @@ "cRed": "#FF0000", "cBlue": "#008080", "cGreen": "#008000", - "cOrange": "#808000" + "cOrange": "#808000", + "lightBg": "--accent", + "selectedPost": "--bg,-10" }, "radii": { "btn": "0", diff --git a/static/themes/redmond-xxi.json b/static/themes/redmond-xxi.json index d10bf138..5371ee64 100644 --- a/static/themes/redmond-xxi.json +++ b/static/themes/redmond-xxi.json @@ -241,6 +241,7 @@ "bg": "#d6d6ce", "text": "#000000", "link": "#0000ff", + "accent": "#0a246a", "fg": "#d6d6ce", "panel": "#042967", "panelFaint": "#FFFFFF", @@ -254,7 +255,9 @@ "cRed": "#c42726", "cBlue": "#6699cc", "cGreen": "#669966", - "cOrange": "#cc6633" + "cOrange": "#cc6633", + "lightBg": "--accent", + "selectedPost": "--bg,-10" }, "radii": { "btn": "0", -- cgit v1.2.3-70-g09d2 From 6e1c538e4182263a75fb65b0f3c5d1ad9de94541 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 20 Jan 2020 01:31:54 +0200 Subject: multiple fixes to make style switcher not die. Made shadows work, incuding compatibility --- src/components/style_switcher/style_switcher.js | 121 +++++++++++++----------- src/services/style_setter/style_setter.js | 23 ++++- src/services/theme_data/theme_data.service.js | 9 +- static/themes/breezy-dark.json | 2 +- static/themes/breezy-light.json | 2 +- 5 files changed, 96 insertions(+), 61 deletions(-) (limited to 'static/themes') diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index 2984873f..2a1e439b 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -11,7 +11,8 @@ import { generateRadii, generateFonts, composePreset, - getThemes + getThemes, + shadows2to3 } from '../../services/style_setter/style_setter.js' import { CURRENT_VERSION, @@ -159,62 +160,66 @@ export default { }, // This needs optimization maybe previewContrast () { - if (!this.previewTheme.colors.bg) return {} - const colors = this.previewTheme.colors - const opacity = this.previewTheme.opacity - if (!colors.bg) return {} - const hints = (ratio) => ({ - text: ratio.toPrecision(3) + ':1', - // AA level, AAA level - aa: ratio >= 4.5, - aaa: ratio >= 7, - // same but for 18pt+ texts - laa: ratio >= 3, - laaa: ratio >= 4.5 - }) - 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 opacitySlot = getOpacitySlot(SLOT_INHERITANCE[background]) - const textColors = [ - key, - ...(background === 'bg' ? ['cRed', 'cGreen', 'cBlue', 'cOrange'] : []) - ] - - const layers = getLayers( - layer, - variant || layer, - opacitySlot, - colorsConverted, - opacity - ) + try { + if (!this.previewTheme.colors.bg) return {} + const colors = this.previewTheme.colors + const opacity = this.previewTheme.opacity + if (!colors.bg) return {} + const hints = (ratio) => ({ + text: ratio.toPrecision(3) + ':1', + // AA level, AAA level + aa: ratio >= 4.5, + aaa: ratio >= 7, + // same but for 18pt+ texts + laa: ratio >= 3, + laaa: ratio >= 4.5 + }) + 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 opacitySlot = getOpacitySlot(SLOT_INHERITANCE[background]) + const textColors = [ + key, + ...(background === 'bg' ? ['cRed', 'cGreen', 'cBlue', 'cOrange'] : []) + ] + + const layers = getLayers( + layer, + variant || layer, + opacitySlot, + 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 { + ...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 }, {}) + return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {}) + } catch (e) { + console.warn('Failure computing contrasts', e) + } }, previewRules () { if (!this.preview.rules) return '' @@ -466,7 +471,11 @@ export default { if (!this.keepShadows) { this.clearShadows() - this.shadowsLocal = shadows + if (version === 2) { + this.shadowsLocal = shadows2to3(shadows) + } else { + this.shadowsLocal = shadows + } this.shadowSelected = this.shadowsAvailable[0] } diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 74af190c..ee264c49 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -291,8 +291,8 @@ export const generateShadows = (input, colors, mod) => { const shadows = Object.entries({ ...DEFAULT_SHADOWS, ...(input.shadows || {}) - }).reduce((shadowsAcc, [slotName, shadowdefs]) => { - const newShadow = shadowdefs.reduce((shadowAcc, def) => [ + }).reduce((shadowsAcc, [slotName, shadowDefs]) => { + const newShadow = shadowDefs.reduce((shadowAcc, def) => [ ...shadowAcc, { ...def, @@ -380,6 +380,25 @@ export const getThemes = () => { }) } +/** + * This handles compatibility issues when importing v2 theme's shadows to current format + * + * Back in v2 shadows allowed you to use dynamic colors however those used pure CSS3 variables + */ +export const shadows2to3 = (shadows) => { + return Object.entries(shadows).reduce((shadowsAcc, [slotName, shadowDefs]) => { + const isDynamic = ({ color }) => console.log(color) || color.startsWith('--') + const newShadow = shadowDefs.reduce((shadowAcc, def) => [ + ...shadowAcc, + { + ...def, + alpha: isDynamic(def) ? 1 : def.alpha + } + ], []) + return { ...shadowsAcc, [slotName]: newShadow } + }, {}) +} + export const setPreset = (val, commit) => { return getThemes() .then((themes) => themes[val] ? themes[val] : themes['pleroma-dark']) diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js index e4456b29..36837b44 100644 --- a/src/services/theme_data/theme_data.service.js +++ b/src/services/theme_data/theme_data.service.js @@ -663,7 +663,14 @@ 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 }), {}) -) +).sort((a, b) => { + const depsA = getDependencies(a, SLOT_INHERITANCE).length + const depsB = getDependencies(b, SLOT_INHERITANCE).length + + if (depsA === depsB || (depsB !== 0 && depsA !== 0)) return 0 + if (depsA === 0 && depsB !== 0) return -1 + if (depsB === 0 && depsA !== 0) return 1 +}) /** * Dictionary where keys are color slots and values are opacity associated diff --git a/static/themes/breezy-dark.json b/static/themes/breezy-dark.json index 97e81f3d..3aafda52 100644 --- a/static/themes/breezy-dark.json +++ b/static/themes/breezy-dark.json @@ -53,7 +53,7 @@ "blur": 0, "spread": "1", "color": "--accent", - "alpha": "0.3", + "alpha": "1", "inset": true }, { diff --git a/static/themes/breezy-light.json b/static/themes/breezy-light.json index fd307b80..df6e1a66 100644 --- a/static/themes/breezy-light.json +++ b/static/themes/breezy-light.json @@ -53,7 +53,7 @@ "blur": 0, "spread": "1", "color": "--accent", - "alpha": "0.3", + "alpha": "1", "inset": true }, { -- cgit v1.2.3-70-g09d2 From 644ce497a0f118b2e5050a2e45b67450915c53f0 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 22 Jan 2020 01:28:46 +0200 Subject: lightBg -> highlight because it causes issues with v2 --- src/components/style_switcher/style_switcher.vue | 24 +++++----- src/i18n/en.json | 2 +- src/services/theme_data/theme_data.service.js | 60 ++++++++++++------------ static/themes/breezy-dark.json | 2 +- static/themes/breezy-light.json | 2 +- static/themes/redmond-xx-se.json | 2 +- static/themes/redmond-xx.json | 2 +- static/themes/redmond-xxi.json | 2 +- 8 files changed, 48 insertions(+), 48 deletions(-) (limited to 'static/themes') diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 61f8800a..79c2fcd3 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -518,27 +518,27 @@ />
-

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

+

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

- + - +

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

diff --git a/src/i18n/en.json b/src/i18n/en.json index 815c11b1..2622157a 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -449,7 +449,7 @@ "underlay": "Underlay", "poll": "Poll graph", "icons": "Icons", - "lightBg": "Highlighted elements", + "highlight": "Highlighted elements", "pressed": "Pressed", "selectedPost": "Selected post", "selectedMenu": "Selected menu item", diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js index 63bfb5af..8c114004 100644 --- a/src/services/theme_data/theme_data.service.js +++ b/src/services/theme_data/theme_data.service.js @@ -47,7 +47,7 @@ export const LAYERS = { badge: null, // no transparency support fg: null, bg: 'underlay', - lightBg: 'bg', + highlight: 'bg', panel: 'bg', btn: 'bg', btnPanel: 'panel', @@ -148,57 +148,57 @@ export const SLOT_INHERITANCE = { cGreen: '#00FF00', cOrange: '#E3FF00', - lightBg: { + highlight: { depends: ['bg'], color: (mod, bg) => brightness(5 * mod, bg).rgb }, - lightBgFaintText: { + highlightFaintText: { depends: ['faint'], - layer: 'lightBg', + layer: 'highlight', textColor: true }, - lightBgFaintLink: { + highlightFaintLink: { depends: ['faintLink'], - layer: 'lightBg', + layer: 'highlight', textColor: 'preserve' }, - lightBgText: { + highlightText: { depends: ['text'], - layer: 'lightBg', + layer: 'highlight', textColor: true }, - lightBgLink: { + highlightLink: { depends: ['link'], - layer: 'lightBg', + layer: 'highlight', textColor: 'preserve' }, - lightBgIcon: { - depends: ['lightBg', 'lightBgText'], + highlightIcon: { + depends: ['highlight', 'highlightText'], color: (mod, bg, text) => mixrgb(bg, text) }, - selectedPost: '--lightBg', + selectedPost: '--highlight', selectedPostFaintText: { - depends: ['lightBgFaintText'], - layer: 'lightBg', + depends: ['highlightFaintText'], + layer: 'highlight', variant: 'selectedPost', textColor: true }, selectedPostFaintLink: { - depends: ['lightBgFaintLink'], - layer: 'lightBg', + depends: ['highlightFaintLink'], + layer: 'highlight', variant: 'selectedPost', textColor: 'preserve' }, selectedPostText: { - depends: ['lightBgText'], - layer: 'lightBg', + depends: ['highlightText'], + layer: 'highlight', variant: 'selectedPost', textColor: true }, selectedPostLink: { - depends: ['lightBgLink'], - layer: 'lightBg', + depends: ['highlightLink'], + layer: 'highlight', variant: 'selectedPost', textColor: 'preserve' }, @@ -207,28 +207,28 @@ export const SLOT_INHERITANCE = { color: (mod, bg, text) => mixrgb(bg, text) }, - selectedMenu: '--lightBg', + selectedMenu: '--highlight', selectedMenuFaintText: { - depends: ['lightBgFaintText'], - layer: 'lightBg', + depends: ['highlightFaintText'], + layer: 'highlight', variant: 'selectedMenu', textColor: true }, selectedMenuFaintLink: { - depends: ['lightBgFaintLink'], - layer: 'lightBg', + depends: ['highlightFaintLink'], + layer: 'highlight', variant: 'selectedMenu', textColor: 'preserve' }, selectedMenuText: { - depends: ['lightBgText'], - layer: 'lightBg', + depends: ['highlightText'], + layer: 'highlight', variant: 'selectedMenu', textColor: true }, selectedMenuLink: { - depends: ['lightBgLink'], - layer: 'lightBg', + depends: ['highlightLink'], + layer: 'highlight', variant: 'selectedMenu', textColor: 'preserve' }, diff --git a/static/themes/breezy-dark.json b/static/themes/breezy-dark.json index 3aafda52..c3bdcf65 100644 --- a/static/themes/breezy-dark.json +++ b/static/themes/breezy-dark.json @@ -114,7 +114,7 @@ "cGreen": "#27ae60", "cOrange": "#f67400", "btnPressed": "--accent", - "lightBg": "--accent", + "highlight": "--accent", "selectedPost": "--bg,10" }, "radii": { diff --git a/static/themes/breezy-light.json b/static/themes/breezy-light.json index df6e1a66..478407c9 100644 --- a/static/themes/breezy-light.json +++ b/static/themes/breezy-light.json @@ -117,7 +117,7 @@ "cGreen": "#27ae60", "cOrange": "#f67400", "btnPressed": "--accent", - "lightBg": "--accent", + "highlight": "--accent", "selectedPost": "--bg,10" }, "radii": { diff --git a/static/themes/redmond-xx-se.json b/static/themes/redmond-xx-se.json index 13ed3b0e..1a867fcc 100644 --- a/static/themes/redmond-xx-se.json +++ b/static/themes/redmond-xx-se.json @@ -283,7 +283,7 @@ "cBlue": "#008080", "cGreen": "#008000", "cOrange": "#808000", - "lightBg": "--accent", + "highlight": "--accent", "selectedPost": "--bg,-10" }, "radii": { diff --git a/static/themes/redmond-xx.json b/static/themes/redmond-xx.json index 7c687ae0..78c92f10 100644 --- a/static/themes/redmond-xx.json +++ b/static/themes/redmond-xx.json @@ -274,7 +274,7 @@ "cBlue": "#008080", "cGreen": "#008000", "cOrange": "#808000", - "lightBg": "--accent", + "highlight": "--accent", "selectedPost": "--bg,-10" }, "radii": { diff --git a/static/themes/redmond-xxi.json b/static/themes/redmond-xxi.json index 5371ee64..28f68351 100644 --- a/static/themes/redmond-xxi.json +++ b/static/themes/redmond-xxi.json @@ -256,7 +256,7 @@ "cBlue": "#6699cc", "cGreen": "#669966", "cOrange": "#cc6633", - "lightBg": "--accent", + "highlight": "--accent", "selectedPost": "--bg,-10" }, "radii": { -- cgit v1.2.3-70-g09d2 From b96993e4dd6b2d9197b430af404e8fa652888b51 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 24 Jan 2020 00:36:32 +0200 Subject: improved selectedMenu again --- src/components/emoji_input/emoji_input.vue | 12 +++-- src/components/emoji_picker/emoji_picker.scss | 9 ++++ src/components/nav_panel/nav_panel.vue | 2 + src/components/popper/popper.scss | 12 +++-- src/components/selectable_list/selectable_list.vue | 1 + src/components/side_drawer/side_drawer.vue | 12 +++-- src/components/status/status.vue | 1 + src/services/color_convert/color_convert.js | 2 +- src/services/theme_data/pleromafe.js | 63 +++++++++++++++++++++- src/services/theme_data/theme_data.service.js | 7 +-- static/themes/breezy-dark.json | 4 +- static/themes/breezy-light.json | 4 +- 12 files changed, 105 insertions(+), 24 deletions(-) (limited to 'static/themes') diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue index 9c2501a9..94eae560 100644 --- a/src/components/emoji_input/emoji_input.vue +++ b/src/components/emoji_input/emoji_input.vue @@ -115,6 +115,7 @@ color: var(--popoverText, $fallback--link); --faint: var(--popoverFaintText, $fallback--faint); --faintLink: var(--popoverFaintLink, $fallback--faint); + --lightText: var(--popoverLightText, $fallback--lightText); --icon: var(--popoverIcon, $fallback--icon); } } @@ -160,11 +161,12 @@ &.highlighted { background-color: $fallback--fg; - 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); + background-color: var(--selectedMenuPopover, $fallback--fg); + color: var(--selectedMenuPopoverText, $fallback--text); + --faint: var(--selectedMenuPopoverFaintText, $fallback--faint); + --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint); + --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText); + --icon: var(--selectedMenuPopoverIcon, $fallback--icon); } } } diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index 6608f393..8bd07e45 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -8,6 +8,15 @@ left: 0; margin: 0 !important; z-index: 1; + background-color: $fallback--bg; + background-color: var(--popover, $fallback--bg); + color: $fallback--link; + color: var(--popoverText, $fallback--link); + --lightText: var(--popoverLightText, $fallback--faint); + --faint: var(--popoverFaintText, $fallback--faint); + --faintLink: var(--popoverFaintLink, $fallback--faint); + --lightText: var(--popoverLightText, $fallback--lightText); + --icon: var(--popoverIcon, $fallback--icon); .keep-open, .too-many-emoji { diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index afc611ea..a934a411 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -105,6 +105,7 @@ color: var(--selectedMenuText, $fallback--link); --faint: var(--selectedMenuFaintText, $fallback--faint); --faintLink: var(--selectedMenuFaintLink, $fallback--faint); + --lightText: var(--selectedMenuLightText, $fallback--lightText); --icon: var(--selectedMenuIcon, $fallback--icon); } @@ -116,6 +117,7 @@ color: var(--selectedMenuText, $fallback--text); --faint: var(--selectedMenuFaintText, $fallback--faint); --faintLink: var(--selectedMenuFaintLink, $fallback--faint); + --lightText: var(--selectedMenuLightText, $fallback--lightText); --icon: var(--selectedMenuIcon, $fallback--icon); &:hover { diff --git a/src/components/popper/popper.scss b/src/components/popper/popper.scss index e70b277d..591be37e 100644 --- a/src/components/popper/popper.scss +++ b/src/components/popper/popper.scss @@ -14,6 +14,7 @@ color: var(--popoverText, $fallback--text); --faint: var(--popoverFaintText, $fallback--faint); --faintLink: var(--popoverFaintLink, $fallback--faint); + --lightText: var(--popoverLightText, $fallback--lightText); --icon: var(--popoverIcon, $fallback--icon); } @@ -144,12 +145,13 @@ &:active, &:hover { background-color: $fallback--lightBg; - background-color: var(--selectedMenu, $fallback--lightBg); + background-color: var(--selectedMenuPopover, $fallback--lightBg); color: $fallback--link; - color: var(--selectedMenuText, $fallback--link); - --faint: var(--selectedMenuFaintText, $fallback--faint); - --faintLink: var(--selectedMenuFaintLink, $fallback--faint); - --icon: var(--selectedMenuIcon, $fallback--icon); + color: var(--selectedMenuPopoverText, $fallback--link); + --faint: var(--selectedMenuPopoverFaintText, $fallback--faint); + --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint); + --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText); + --icon: var(--selectedMenuPopoverIcon, $fallback--icon); } } } diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue index 2d1e44a3..a9bb12a1 100644 --- a/src/components/selectable_list/selectable_list.vue +++ b/src/components/selectable_list/selectable_list.vue @@ -72,6 +72,7 @@ color: var(--selectedMenuText, $fallback--text); --faint: var(--selectedMenuFaintText, $fallback--faint); --faintLink: var(--selectedMenuFaintLink, $fallback--faint); + --lightText: var(--selectedMenuLightText, $fallback--lightText); --icon: var(--selectedMenuIcon, $fallback--icon); } diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue index a5b754d7..25e4de01 100644 --- a/src/components/side_drawer/side_drawer.vue +++ b/src/components/side_drawer/side_drawer.vue @@ -228,6 +228,7 @@ color: var(--popoverText, $fallback--link); --faint: var(--popoverFaintText, $fallback--faint); --faintLink: var(--popoverFaintLink, $fallback--faint); + --lightText: var(--popoverLightText, $fallback--lightText); --icon: var(--popoverIcon, $fallback--icon); .button-icon:before { @@ -294,12 +295,13 @@ &:hover { background-color: $fallback--lightBg; - background-color: var(--selectedMenu, $fallback--lightBg); + background-color: var(--selectedMenuPopover, $fallback--lightBg); color: $fallback--text; - color: var(--selectedMenuText, $fallback--text); - --faint: var(--selectedMenuFaintText, $fallback--faint); - --faintLink: var(--selectedMenuFaintLink, $fallback--faint); - --icon: var(--selectedMenuIcon, $fallback--icon); + color: var(--selectedMenuPopoverText, $fallback--text); + --faint: var(--selectedMenuPopoverFaintText, $fallback--faint); + --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint); + --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText); + --icon: var(--selectedMenuPopoverIcon, $fallback--icon); } } } diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 38d091ed..1997e187 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -448,6 +448,7 @@ $status-margin: 0.75em; background-color: var(--selectedPost, $fallback--lightBg); color: $fallback--text; color: var(--selectedPostText, $fallback--text); + --lightText: var(--selectedPostLightText, $fallback--light); --faint: var(--selectedPostFaintText, $fallback--faint); --faintLink: var(--selectedPostFaintLink, $fallback--faint); --icon: var(--selectedPostIcon, $fallback--icon); diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js index 93cb1ba6..0bf8f646 100644 --- a/src/services/color_convert/color_convert.js +++ b/src/services/color_convert/color_convert.js @@ -69,7 +69,7 @@ const srgbToLinear = (srgb) => { * @param {Object} srgb - sRGB color * @returns {Number} relative luminance */ -const relativeLuminance = (srgb) => { +export const relativeLuminance = (srgb) => { const { r, g, b } = srgbToLinear(srgb) return 0.2126 * r + 0.7152 * g + 0.0722 * b } diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js index 484874d7..a40d08a6 100644 --- a/src/services/theme_data/pleromafe.js +++ b/src/services/theme_data/pleromafe.js @@ -117,6 +117,11 @@ export const SLOT_INHERITANCE = { depends: ['bg'], color: (mod, bg) => brightness(5 * mod, bg).rgb }, + highlightLightText: { + depends: ['lightText'], + layer: 'highlight', + textColor: true + }, highlightFaintText: { depends: ['faint'], layer: 'highlight', @@ -146,6 +151,11 @@ export const SLOT_INHERITANCE = { depends: ['bg'], opacity: 'popover' }, + popoverLightText: { + depends: ['lightText'], + layer: 'popover', + textColor: true + }, popoverFaintText: { depends: ['faint'], layer: 'popover', @@ -178,6 +188,12 @@ export const SLOT_INHERITANCE = { variant: 'selectedPost', textColor: true }, + selectedPostLightText: { + depends: ['highlightLightText'], + layer: 'highlight', + variant: 'selectedPost', + textColor: true + }, selectedPostFaintLink: { depends: ['highlightFaintLink'], layer: 'highlight', @@ -202,9 +218,15 @@ export const SLOT_INHERITANCE = { }, selectedMenu: { - depends: ['popover'], + depends: ['bg'], color: (mod, bg) => brightness(5 * mod, bg).rgb }, + selectedMenuLightText: { + depends: ['highlightLightText'], + layer: 'selectedMenu', + variant: 'selectedMenu', + textColor: true + }, selectedMenuFaintText: { depends: ['highlightFaintText'], layer: 'selectedMenu', @@ -234,6 +256,45 @@ export const SLOT_INHERITANCE = { color: (mod, bg, text) => mixrgb(bg, text) }, + selectedMenuPopover: { + depends: ['popover'], + color: (mod, bg) => brightness(5 * mod, bg).rgb + }, + selectedMenuPopoverLightText: { + depends: ['selectedMenuLightText'], + layer: 'selectedMenuPopover', + variant: 'selectedMenuPopover', + textColor: true + }, + selectedMenuPopoverFaintText: { + depends: ['selectedMenuFaintText'], + layer: 'selectedMenuPopover', + variant: 'selectedMenuPopover', + textColor: true + }, + selectedMenuPopoverFaintLink: { + depends: ['selectedMenuFaintLink'], + layer: 'selectedMenuPopover', + variant: 'selectedMenuPopover', + textColor: 'preserve' + }, + selectedMenuPopoverText: { + depends: ['selectedMenuText'], + layer: 'selectedMenuPopover', + variant: 'selectedMenuPopover', + textColor: true + }, + selectedMenuPopoverLink: { + depends: ['selectedMenuLink'], + layer: 'selectedMenuPopover', + variant: 'selectedMenuPopover', + textColor: 'preserve' + }, + selectedMenuPopoverIcon: { + depends: ['selectedMenuPopover', 'selectedMenuText'], + color: (mod, bg, text) => mixrgb(bg, text) + }, + lightText: { depends: ['text'], color: (mod, text) => brightness(20 * mod, text).rgb diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js index ea28481b..c0861a4a 100644 --- a/src/services/theme_data/theme_data.service.js +++ b/src/services/theme_data/theme_data.service.js @@ -1,5 +1,5 @@ import { convert, brightness, contrastRatio } from 'chromatism' -import { alphaBlendLayers, getTextColor } from '../color_convert/color_convert.js' +import { alphaBlendLayers, getTextColor, relativeLuminance } from '../color_convert/color_convert.js' import { LAYERS, DEFAULT_OPACITY, SLOT_INHERITANCE } from './pleromafe.js' /* @@ -318,13 +318,14 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu opacity ) ) + const isLightOnDark = relativeLuminance(bg) > 127 + const mod = isLightOnDark ? 1 : -1 + if (value.textColor === 'bw') { outputColor = contrastRatio(bg).rgb } else { let color = { ...colors[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) => ({ ...colors[dep] }))) } diff --git a/static/themes/breezy-dark.json b/static/themes/breezy-dark.json index c3bdcf65..236b94ad 100644 --- a/static/themes/breezy-dark.json +++ b/static/themes/breezy-dark.json @@ -114,8 +114,8 @@ "cGreen": "#27ae60", "cOrange": "#f67400", "btnPressed": "--accent", - "highlight": "--accent", - "selectedPost": "--bg,10" + "selectedMenu": "--accent", + "selectedMenuPopover": "--accent" }, "radii": { "btn": "2", diff --git a/static/themes/breezy-light.json b/static/themes/breezy-light.json index 478407c9..d3f74cec 100644 --- a/static/themes/breezy-light.json +++ b/static/themes/breezy-light.json @@ -117,8 +117,8 @@ "cGreen": "#27ae60", "cOrange": "#f67400", "btnPressed": "--accent", - "highlight": "--accent", - "selectedPost": "--bg,10" + "selectedMenu": "--accent", + "selectedMenuPopover": "--accent" }, "radii": { "btn": "2", -- cgit v1.2.3-70-g09d2 From 7c074b87418602effac03c4bae34afffcfca283f Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 27 Jan 2020 04:20:13 +0200 Subject: fix rgba css generation, add some tests to automatically verify that themes are generated properly --- build/webpack.base.conf.js | 1 + src/services/color_convert/color_convert.js | 2 +- src/services/theme_data/theme_data.service.js | 2 +- static/themes/redmond-xx-se.json | 2 +- static/themes/redmond-xx.json | 2 +- static/themes/redmond-xxi.json | 2 +- .../services/theme_data/sanity_checks.spec.js | 28 ++++ .../specs/services/theme_data/theme_data.spec.js | 147 +++++++++++---------- 8 files changed, 109 insertions(+), 77 deletions(-) create mode 100644 test/unit/specs/services/theme_data/sanity_checks.spec.js (limited to 'static/themes') diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js index 5cc0135e..dfef37a6 100644 --- a/build/webpack.base.conf.js +++ b/build/webpack.base.conf.js @@ -35,6 +35,7 @@ module.exports = { ], alias: { 'vue$': 'vue/dist/vue.runtime.common', + 'static': path.resolve(__dirname, '../static'), 'src': path.resolve(__dirname, '../src'), 'assets': path.resolve(__dirname, '../src/assets'), 'components': path.resolve(__dirname, '../src/components') diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js index 0bf8f646..b5461038 100644 --- a/src/services/color_convert/color_convert.js +++ b/src/services/color_convert/color_convert.js @@ -171,7 +171,7 @@ export const mixrgb = (a, b) => { * @returns {String} CSS rgba() color */ export const rgba2css = function (rgba) { - return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})` + return `rgba(${Math.floor(rgba.r)}, ${Math.floor(rgba.g)}, ${Math.floor(rgba.b)}, .5)` } /** diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js index 0a6733a9..49b99148 100644 --- a/src/services/theme_data/theme_data.service.js +++ b/src/services/theme_data/theme_data.service.js @@ -353,7 +353,7 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu if (dependencySlot && sourceColors[dependencySlot] === 'transparent') { outputColor.a = 0 } else { - outputColor.a = sourceOpacity[opacitySlot] || OPACITIES[opacitySlot].defaultValue || 1 + outputColor.a = Number(sourceOpacity[opacitySlot]) || OPACITIES[opacitySlot].defaultValue || 1 } } if (opacitySlot) { diff --git a/static/themes/redmond-xx-se.json b/static/themes/redmond-xx-se.json index 1a867fcc..8deab7b7 100644 --- a/static/themes/redmond-xx-se.json +++ b/static/themes/redmond-xx-se.json @@ -1,7 +1,7 @@ { "_pleroma_theme_version": 2, "name": "Redmond XX SE", - "theme": { + "source": { "shadows": { "panel": [ { diff --git a/static/themes/redmond-xx.json b/static/themes/redmond-xx.json index 78c92f10..cdb89fe3 100644 --- a/static/themes/redmond-xx.json +++ b/static/themes/redmond-xx.json @@ -1,7 +1,7 @@ { "_pleroma_theme_version": 2, "name": "Redmond XX", - "theme": { + "source": { "shadows": { "panel": [ { diff --git a/static/themes/redmond-xxi.json b/static/themes/redmond-xxi.json index 28f68351..79a2cb26 100644 --- a/static/themes/redmond-xxi.json +++ b/static/themes/redmond-xxi.json @@ -1,7 +1,7 @@ { "_pleroma_theme_version": 2, "name": "Redmond XXI", - "theme": { + "source": { "shadows": { "panel": [ { diff --git a/test/unit/specs/services/theme_data/sanity_checks.spec.js b/test/unit/specs/services/theme_data/sanity_checks.spec.js new file mode 100644 index 00000000..f0072e7d --- /dev/null +++ b/test/unit/specs/services/theme_data/sanity_checks.spec.js @@ -0,0 +1,28 @@ +import { getColors } from 'src/services/theme_data/theme_data.service.js' + +const checkColors = (output) => { + expect(output).to.have.property('colors') + Object.entries(output.colors).forEach(([key, v]) => { + expect(v, key).to.be.an('object') + expect(v, key).to.include.all.keys('r', 'g', 'b') + 'rgba'.split('').forEach(k => { + if ((k === 'a' && v.hasOwnProperty('a')) || k !== 'a') { + expect(v[k], key + '.' + k).to.be.a('number') + expect(v[k], key + '.' + k).to.be.least(0) + expect(v[k], key + '.' + k).to.be.most(k === 'a' ? 1 : 255) + } + }) + }) +} + +describe('Theme Data utility functions', () => { + const context = require.context('static/themes/', false, /\.json$/) + context.keys().forEach((key) => { + it(`Should render all colors for ${key} properly`, () => { + const { theme, source } = context(key) + const data = source || theme + const colors = getColors(data.colors, data.opacity, 1) + checkColors(colors) + }) + }) +}) diff --git a/test/unit/specs/services/theme_data/theme_data.spec.js b/test/unit/specs/services/theme_data/theme_data.spec.js index d8a04ba7..67f4fd5a 100644 --- a/test/unit/specs/services/theme_data/theme_data.spec.js +++ b/test/unit/specs/services/theme_data/theme_data.spec.js @@ -1,87 +1,90 @@ import { getLayersArray, topoSort } from 'src/services/theme_data/theme_data.service.js' -describe('getLayersArray', () => { - const fixture = { - layer1: null, - layer2: 'layer1', - layer3a: 'layer2', - layer3b: 'layer2' - } +describe('Theme Data utility functions', () => { + describe('getLayersArray', () => { + const fixture = { + layer1: null, + layer2: 'layer1', + layer3a: 'layer2', + layer3b: 'layer2' + } - it('should expand layers properly (3b)', () => { - const out = getLayersArray('layer3b', fixture) - expect(out).to.eql(['layer1', 'layer2', 'layer3b']) - }) + it('should expand layers properly (3b)', () => { + const out = getLayersArray('layer3b', fixture) + expect(out).to.eql(['layer1', 'layer2', 'layer3b']) + }) - it('should expand layers properly (3a)', () => { - const out = getLayersArray('layer3a', fixture) - expect(out).to.eql(['layer1', 'layer2', 'layer3a']) - }) + it('should expand layers properly (3a)', () => { + const out = getLayersArray('layer3a', fixture) + expect(out).to.eql(['layer1', 'layer2', 'layer3a']) + }) - it('should expand layers properly (2)', () => { - const out = getLayersArray('layer2', fixture) - expect(out).to.eql(['layer1', 'layer2']) - }) + it('should expand layers properly (2)', () => { + const out = getLayersArray('layer2', fixture) + expect(out).to.eql(['layer1', 'layer2']) + }) - it('should expand layers properly (1)', () => { - const out = getLayersArray('layer1', fixture) - expect(out).to.eql(['layer1']) + it('should expand layers properly (1)', () => { + const out = getLayersArray('layer1', fixture) + expect(out).to.eql(['layer1']) + }) }) -}) -describe('topoSort', () => { - const fixture1 = { - layerA: [], - layer1A: ['layerA'], - layer2A: ['layer1A'], - layerB: [], - layer1B: ['layerB'], - layer2B: ['layer1B'], - layer3AB: ['layer2B', 'layer2A'] - } + describe('topoSort', () => { + const fixture1 = { + layerA: [], + layer1A: ['layerA'], + layer2A: ['layer1A'], + layerB: [], + layer1B: ['layerB'], + layer2B: ['layer1B'], + layer3AB: ['layer2B', 'layer2A'] + } - // Same thing but messed up order - const fixture2 = { - layer1A: ['layerA'], - layer1B: ['layerB'], - layer2A: ['layer1A'], - layerB: [], - layer3AB: ['layer2B', 'layer2A'], - layer2B: ['layer1B'], - layerA: [] - } + // Same thing but messed up order + const fixture2 = { + layer1A: ['layerA'], + layer1B: ['layerB'], + layer2A: ['layer1A'], + layerB: [], + layer3AB: ['layer2B', 'layer2A'], + layer2B: ['layer1B'], + layerA: [] + } - it('should make a topologically sorted array', () => { - const out = topoSort(fixture1, (node, inheritance) => inheritance[node]) - // This basically checks all ordering that matters - expect(out.indexOf('layerA')).to.be.below(out.indexOf('layer1A')) - expect(out.indexOf('layer1A')).to.be.below(out.indexOf('layer2A')) - expect(out.indexOf('layerB')).to.be.below(out.indexOf('layer1B')) - expect(out.indexOf('layer1B')).to.be.below(out.indexOf('layer2B')) - expect(out.indexOf('layer2A')).to.be.below(out.indexOf('layer3AB')) - expect(out.indexOf('layer2B')).to.be.below(out.indexOf('layer3AB')) - }) + it('should make a topologically sorted array', () => { + const out = topoSort(fixture1, (node, inheritance) => inheritance[node]) + // This basically checks all ordering that matters + expect(out.indexOf('layerA')).to.be.below(out.indexOf('layer1A')) + expect(out.indexOf('layer1A')).to.be.below(out.indexOf('layer2A')) + expect(out.indexOf('layerB')).to.be.below(out.indexOf('layer1B')) + expect(out.indexOf('layer1B')).to.be.below(out.indexOf('layer2B')) + expect(out.indexOf('layer2A')).to.be.below(out.indexOf('layer3AB')) + expect(out.indexOf('layer2B')).to.be.below(out.indexOf('layer3AB')) + }) - it('order in object shouldn\'t matter', () => { - const out = topoSort(fixture2, (node, inheritance) => inheritance[node]) - // This basically checks all ordering that matters - expect(out.indexOf('layerA')).to.be.below(out.indexOf('layer1A')) - expect(out.indexOf('layer1A')).to.be.below(out.indexOf('layer2A')) - expect(out.indexOf('layerB')).to.be.below(out.indexOf('layer1B')) - expect(out.indexOf('layer1B')).to.be.below(out.indexOf('layer2B')) - expect(out.indexOf('layer2A')).to.be.below(out.indexOf('layer3AB')) - expect(out.indexOf('layer2B')).to.be.below(out.indexOf('layer3AB')) - }) + it('order in object shouldn\'t matter', () => { + const out = topoSort(fixture2, (node, inheritance) => inheritance[node]) + // This basically checks all ordering that matters + expect(out.indexOf('layerA')).to.be.below(out.indexOf('layer1A')) + expect(out.indexOf('layer1A')).to.be.below(out.indexOf('layer2A')) + expect(out.indexOf('layerB')).to.be.below(out.indexOf('layer1B')) + expect(out.indexOf('layer1B')).to.be.below(out.indexOf('layer2B')) + expect(out.indexOf('layer2A')).to.be.below(out.indexOf('layer3AB')) + expect(out.indexOf('layer2B')).to.be.below(out.indexOf('layer3AB')) + }) - it('dependentless nodes should be first', () => { - const out = topoSort(fixture2, (node, inheritance) => inheritance[node]) - // This basically checks all ordering that matters - expect(out.indexOf('layerA')).to.eql(0) - expect(out.indexOf('layerB')).to.eql(1) - }) + it('dependentless nodes should be first', () => { + const out = topoSort(fixture2, (node, inheritance) => inheritance[node]) + // This basically checks all ordering that matters + expect(out.indexOf('layerA')).to.eql(0) + expect(out.indexOf('layerB')).to.eql(1) + }) - it('ignores cyclic dependencies', () => { - const out = topoSort({ a: 'b', b: 'a', c: 'a' }, (node, inheritance) => [inheritance[node]]) - expect(out.indexOf('a')).to.be.below(out.indexOf('c')) + it('ignores cyclic dependencies', () => { + const out = topoSort({ a: 'b', b: 'a', c: 'a' }, (node, inheritance) => [inheritance[node]]) + expect(out.indexOf('a')).to.be.below(out.indexOf('c')) + }) }) + }) -- cgit v1.2.3-70-g09d2 From 526b43eba66c597c78857da6ded3c7f672f96e49 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 28 Jan 2020 01:29:20 +0200 Subject: Kenomo (see: #624) theme. Ability to define link color for post contents. Fixes --- src/components/emoji_input/emoji_input.vue | 2 + src/components/notifications/notifications.scss | 3 + src/components/popper/popper.scss | 2 + src/components/status/status.vue | 7 +++ src/components/style_switcher/style_switcher.vue | 17 ++++++ src/components/user_card/user_card.vue | 5 ++ src/services/theme_data/pleromafe.js | 34 ++++++++++++ static/themes/kenomo.json | 71 ++++++++++++++++++++++++ 8 files changed, 141 insertions(+) create mode 100644 static/themes/kenomo.json (limited to 'static/themes') diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue index 94eae560..e9ac09c3 100644 --- a/src/components/emoji_input/emoji_input.vue +++ b/src/components/emoji_input/emoji_input.vue @@ -116,6 +116,8 @@ --faint: var(--popoverFaintText, $fallback--faint); --faintLink: var(--popoverFaintLink, $fallback--faint); --lightText: var(--popoverLightText, $fallback--lightText); + --postLink: var(--popoverPostLink, $fallback--link); + --postFaintLink: var(--popoverPostFaintLink, $fallback--link); --icon: var(--popoverIcon, $fallback--icon); } } diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 71876b14..ca762432 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -68,6 +68,9 @@ a { color: var(--faintLink); } + .status-content a { + color: var(--postFaintLink); + } } padding: 0; .media-body { diff --git a/src/components/popper/popper.scss b/src/components/popper/popper.scss index 341416c1..8e2dcd55 100644 --- a/src/components/popper/popper.scss +++ b/src/components/popper/popper.scss @@ -15,6 +15,8 @@ --faint: var(--popoverFaintText, $fallback--faint); --faintLink: var(--popoverFaintLink, $fallback--faint); --lightText: var(--popoverLightText, $fallback--lightText); + --postLink: var(--popoverPostLink, $fallback--link); + --postFaintLink: var(--popoverPostFaintLink, $fallback--link); --icon: var(--popoverIcon, $fallback--icon); } diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 1997e187..b1048832 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -451,6 +451,8 @@ $status-margin: 0.75em; --lightText: var(--selectedPostLightText, $fallback--light); --faint: var(--selectedPostFaintText, $fallback--faint); --faintLink: var(--selectedPostFaintLink, $fallback--faint); + --postLink: var(--selectedPostPostLink, $fallback--faint); + --postFaintLink: var(--selectedPostFaintPostLink, $fallback--faint); --icon: var(--selectedPostIcon, $fallback--icon); } @@ -640,6 +642,11 @@ $status-margin: 0.75em; line-height: 1.4em; white-space: pre-wrap; + a { + color: $fallback--link; + color: var(--postLink, $fallback--link); + } + img, video { max-width: 100%; max-height: 400px; diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 6e38bd8e..0b3b0fbf 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -248,6 +248,23 @@
+

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

+ + + +

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

brightness(20 * mod, text).rgb }, + postLink: { + depends: ['link'] + }, + border: { depends: ['fg'], opacity: 'border', diff --git a/static/themes/kenomo.json b/static/themes/kenomo.json new file mode 100644 index 00000000..98ddf974 --- /dev/null +++ b/static/themes/kenomo.json @@ -0,0 +1,71 @@ +{ + "_pleroma_theme_version": 2, + "name": "Kenomo", + "source": { + "themeEngineVersion": 3, + "fonts": {}, + "shadows": { + "panel": [], + "topBar": [], + "button": [ + { + "x": 0, + "y": 1, + "blur": 0, + "spread": 0, + "color": "#FFFFFF", + "alpha": 0.2, + "inset": true + }, + { + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "color": "#000000", + "alpha": 0.2, + "inset": true + } + ], + "input": [ + { + "x": 0, + "y": "0", + "blur": 0, + "spread": "1", + "color": "#576574", + "alpha": "1", + "inset": true + } + ] + }, + "opacity": { + "underlay": "1", + "border": "0" + }, + "colors": { + "bg": "#ffffff", + "fg": "#f6f6f6", + "text": "#494949", + "underlay": "#ffffff", + "link": "#818181", + "accent": "#818181", + "cBlue": "#2e86de", + "cRed": "#c96248", + "cGreen": "#0fa00f", + "cOrange": "#aa7623", + "postLink": "#2e86de", + "border": "#ffffff", + "icon": "#8a8a8a", + "panel": "transparent", + "topBarText": "#4b4b4b", + "tab": "--btn,-30", + "btn": "#576574" + }, + "radii": { + "panel": "0", + "avatar": "6", + "avatarAlt": "6" + } + } +} -- cgit v1.2.3-70-g09d2 From 846285326900a497c68dc994ce06dcb1d5d1ca9c Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 28 Jan 2020 22:40:15 +0200 Subject: update button toggled state, apply it to emoji reactions --- src/App.scss | 4 +++- src/components/emoji_reactions/emoji_reactions.vue | 8 +------- src/components/style_switcher/style_switcher.vue | 13 +++++++++++++ static/themes/redmond-xx-se.json | 2 ++ static/themes/redmond-xx.json | 2 ++ static/themes/redmond-xxi.json | 2 ++ 6 files changed, 23 insertions(+), 8 deletions(-) (limited to 'static/themes') diff --git a/src/App.scss b/src/App.scss index dd994a38..1fabaaa9 100644 --- a/src/App.scss +++ b/src/App.scss @@ -117,7 +117,9 @@ button { color: $fallback--text; color: var(--btnToggledText, $fallback--text); background-color: $fallback--fg; - background-color: var(--btnToggled, $fallback--fg) + background-color: var(--btnToggled, $fallback--fg); + 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); } &.danger { diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue index 00d6d2b7..f5d2e79a 100644 --- a/src/components/emoji_reactions/emoji_reactions.vue +++ b/src/components/emoji_reactions/emoji_reactions.vue @@ -4,7 +4,7 @@ v-for="(reaction) in emojiReactions" :key="reaction.emoji" class="emoji-reaction btn btn-default" - :class="{ 'picked-reaction': reactedWith(reaction.emoji) }" + :class="{ 'toggled': reactedWith(reaction.emoji) }" @click="emojiOnClick(reaction.emoji, $event)" > {{ reaction.emoji }} @@ -40,10 +40,4 @@ } } -.picked-reaction { - border: 1px solid var(--link, $fallback--link); - margin-left: -1px; // offset the border, can't use inset shadows either - margin-right: calc(0.5em - 1px); -} - diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 9de3a96c..5a42bba7 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -460,6 +460,19 @@ :label="$t('settings.text')" /> +

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

+ +

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

diff --git a/static/themes/redmond-xx-se.json b/static/themes/redmond-xx-se.json index 8deab7b7..7a4a29da 100644 --- a/static/themes/redmond-xx-se.json +++ b/static/themes/redmond-xx-se.json @@ -2,6 +2,7 @@ "_pleroma_theme_version": 2, "name": "Redmond XX SE", "source": { + "themeEngineVersion": 3, "shadows": { "panel": [ { @@ -276,6 +277,7 @@ "topBar": "#000080", "topBarLink": "#ffffff", "btn": "#c0c0c0", + "btnToggled": "--btn", "faint": "#3f3f3f", "faintLink": "#404080", "border": "#808080", diff --git a/static/themes/redmond-xx.json b/static/themes/redmond-xx.json index cdb89fe3..ff95b1e0 100644 --- a/static/themes/redmond-xx.json +++ b/static/themes/redmond-xx.json @@ -2,6 +2,7 @@ "_pleroma_theme_version": 2, "name": "Redmond XX", "source": { + "themeEngineVersion": 3, "shadows": { "panel": [ { @@ -267,6 +268,7 @@ "topBar": "#000080", "topBarLink": "#ffffff", "btn": "#c0c0c0", + "btnToggled": "--btn", "faint": "#3f3f3f", "faintLink": "#404080", "border": "#808080", diff --git a/static/themes/redmond-xxi.json b/static/themes/redmond-xxi.json index 79a2cb26..f788bdb8 100644 --- a/static/themes/redmond-xxi.json +++ b/static/themes/redmond-xxi.json @@ -2,6 +2,7 @@ "_pleroma_theme_version": 2, "name": "Redmond XXI", "source": { + "themeEngineVersion": 3, "shadows": { "panel": [ { @@ -249,6 +250,7 @@ "topBar": "#042967", "topBarLink": "#ffffff", "btn": "#d6d6ce", + "btnToggled": "--btn", "faint": "#3f3f3f", "faintLink": "#404080", "border": "#808080", -- cgit v1.2.3-70-g09d2 From 60446c56a5c8d4b4d669fbd4803e77ce686daac9 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 12 Feb 2020 00:45:37 +0200 Subject: fix v2 breezy themes having messed up pressed buttons. updated v2.1 breezy themes to have derived colors instead of fixed ones. --- src/components/style_switcher/style_switcher.js | 7 +++++-- src/services/color_convert/color_convert.js | 2 -- src/services/style_setter/style_setter.js | 9 +++++---- static/themes/breezy-dark.json | 14 +++++++------- static/themes/breezy-light.json | 19 ++++++++----------- 5 files changed, 25 insertions(+), 26 deletions(-) (limited to 'static/themes') diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index 17ae9f30..807f9efc 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -62,6 +62,7 @@ export default { selected: this.$store.getters.mergedConfig.theme, themeWarning: undefined, tempImportFile: undefined, + engineVersion: 0, previewShadows: {}, previewColors: {}, @@ -510,7 +511,7 @@ export default { colors: this.currentColors }) this.previewShadows = generateShadows( - { shadows: this.shadowsLocal }, + { shadows: this.shadowsLocal, opacity: this.previewTheme.opacity, themeEngineVersion: this.engineVersion }, this.previewColors.theme.colors, this.previewColors.mod ) @@ -607,6 +608,8 @@ export default { } } + this.engineVersion = version + // Stuff that differs between V1 and V2 if (version === 1) { this.fgColorLocal = rgb2hex(colors.btn) @@ -653,7 +656,7 @@ export default { if (!this.keepShadows) { this.clearShadows() if (version === 2) { - this.shadowsLocal = shadows2to3(shadows) + this.shadowsLocal = shadows2to3(shadows, this.previewTheme.opacity) } else { this.shadowsLocal = shadows } diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js index 3b6fdcc7..ec104269 100644 --- a/src/services/color_convert/color_convert.js +++ b/src/services/color_convert/color_convert.js @@ -214,8 +214,6 @@ export const getCssColor = (input, a) => { } else if (typeof input === 'string') { if (input.startsWith('#')) { rgb = hex2rgb(input) - } else if (input.startsWith('--')) { - return `var(${input})` } else { return input } diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 48f51c59..c8610507 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -1,6 +1,6 @@ import { convert } from 'chromatism' import { rgb2hex, hex2rgb, rgba2css, getCssColor, relativeLuminance } from '../color_convert/color_convert.js' -import { getColors, computeDynamicColor } from '../theme_data/theme_data.service.js' +import { getColors, computeDynamicColor, getOpacitySlot } from '../theme_data/theme_data.service.js' export const applyTheme = (input) => { const { rules } = generatePreset(input) @@ -242,7 +242,7 @@ export const generateShadows = (input, colors) => { input: 'input' } const inputShadows = input.shadows && !input.themeEngineVersion - ? shadows2to3(input.shadows) + ? shadows2to3(input.shadows, input.opacity) : input.shadows || {} const shadows = Object.entries({ ...DEFAULT_SHADOWS, @@ -368,14 +368,15 @@ export const colors2to3 = (colors) => { * * Back in v2 shadows allowed you to use dynamic colors however those used pure CSS3 variables */ -export const shadows2to3 = (shadows) => { +export const shadows2to3 = (shadows, opacity) => { return Object.entries(shadows).reduce((shadowsAcc, [slotName, shadowDefs]) => { const isDynamic = ({ color }) => color.startsWith('--') + const getOpacity = ({ color }) => opacity[getOpacitySlot(color.substring(2).split(',')[0])] const newShadow = shadowDefs.reduce((shadowAcc, def) => [ ...shadowAcc, { ...def, - alpha: isDynamic(def) ? 1 : def.alpha + alpha: isDynamic(def) ? getOpacity(def) || 1 : def.alpha } ], []) return { ...shadowsAcc, [slotName]: newShadow } diff --git a/static/themes/breezy-dark.json b/static/themes/breezy-dark.json index 236b94ad..76b962c5 100644 --- a/static/themes/breezy-dark.json +++ b/static/themes/breezy-dark.json @@ -21,7 +21,7 @@ "y": "0", "blur": "0", "spread": "1", - "color": "#ffffff", + "color": "--btn,900", "alpha": "0.15", "inset": true }, @@ -42,7 +42,7 @@ "blur": "40", "spread": "-40", "inset": true, - "color": "#ffffff", + "color": "--panel,900", "alpha": "0.1" } ], @@ -72,7 +72,7 @@ "y": "0", "blur": 0, "spread": "1", - "color": "#ffffff", + "color": "--btn,900", "alpha": 0.2, "inset": true }, @@ -92,7 +92,7 @@ "y": "0", "blur": 0, "spread": "1", - "color": "#FFFFFF", + "color": "--input,900", "alpha": "0.2", "inset": true } @@ -105,9 +105,9 @@ "link": "#3daee9", "fg": "#31363b", "panel": "transparent", - "input": "#232629", - "topBarLink": "#eff0f1", - "btn": "#31363b", + "input": "--bg,-6.47", + "topBarLink": "--topBarText", + "btn": "--bg", "border": "#4c545b", "cRed": "#da4453", "cBlue": "#3daee9", diff --git a/static/themes/breezy-light.json b/static/themes/breezy-light.json index d3f74cec..0968fff0 100644 --- a/static/themes/breezy-light.json +++ b/static/themes/breezy-light.json @@ -21,7 +21,7 @@ "y": "0", "blur": "0", "spread": "1", - "color": "#000000", + "color": "--btn,900", "alpha": "0.3", "inset": true }, @@ -42,7 +42,7 @@ "blur": "40", "spread": "-40", "inset": true, - "color": "#ffffff", + "color": "--panel,900", "alpha": "0.1" } ], @@ -72,7 +72,7 @@ "y": "0", "blur": 0, "spread": "1", - "color": "#ffffff", + "color": "--btn,900", "alpha": 0.2, "inset": true }, @@ -92,7 +92,7 @@ "y": "0", "blur": 0, "spread": "1", - "color": "#000000", + "color": "--input,900", "alpha": "0.2", "inset": true } @@ -104,14 +104,11 @@ "colors": { "bg": "#eff0f1", "text": "#232627", - "fg": "#bcc2c7", + "fg": "#475057", "accent": "#2980b9", - "panel": "#475057", - "panelText": "#fcfcfc", - "input": "#fcfcfc", - "topBar": "#475057", - "topBarLink": "#eff0f1", - "btn": "#eff0f1", + "input": "--bg,-6.47", + "topBarLink": "--topBarText", + "btn": "--bg", "cRed": "#da4453", "cBlue": "#2980b9", "cGreen": "#27ae60", -- cgit v1.2.3-70-g09d2 From 1e95a0795a6f7f1db49244430d1498987f6b3969 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 17 Feb 2020 23:59:52 +0200 Subject: paper theme, updated todo, lol --- src/services/style_setter/style_setter.js | 2 +- static/styles.json | 2 +- static/themes/kenomo.json | 71 ------------ static/themes/paper.json | 172 ++++++++++++++++++++++++++++++ 4 files changed, 174 insertions(+), 73 deletions(-) delete mode 100644 static/themes/kenomo.json create mode 100644 static/themes/paper.json (limited to 'static/themes') diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index c8610507..fbdcf562 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -270,7 +270,7 @@ export const generateShadows = (input, colors) => { rules: { shadows: Object .entries(shadows) - // TODO for v2.1: if shadow doesn't have non-inset shadows with spread > 0 - optionally + // TODO for v2.2: if shadow doesn't have non-inset shadows with spread > 0 - optionally // convert all non-inset shadows into filter: drop-shadow() to boost performance .map(([k, v]) => [ `--${k}Shadow: ${getCssShadow(v)}`, diff --git a/static/styles.json b/static/styles.json index 54c0335f..3349a837 100644 --- a/static/styles.json +++ b/static/styles.json @@ -13,5 +13,5 @@ "breezy-dark": "/static/themes/breezy-dark.json", "breezy-light": "/static/themes/breezy-light.json", "mammal": "/static/themes/mammal.json", - "kenomo": "/static/themes/kenomo.json" + "paper": "/static/themes/paper.json" } diff --git a/static/themes/kenomo.json b/static/themes/kenomo.json deleted file mode 100644 index 98ddf974..00000000 --- a/static/themes/kenomo.json +++ /dev/null @@ -1,71 +0,0 @@ -{ - "_pleroma_theme_version": 2, - "name": "Kenomo", - "source": { - "themeEngineVersion": 3, - "fonts": {}, - "shadows": { - "panel": [], - "topBar": [], - "button": [ - { - "x": 0, - "y": 1, - "blur": 0, - "spread": 0, - "color": "#FFFFFF", - "alpha": 0.2, - "inset": true - }, - { - "x": 0, - "y": -1, - "blur": 0, - "spread": 0, - "color": "#000000", - "alpha": 0.2, - "inset": true - } - ], - "input": [ - { - "x": 0, - "y": "0", - "blur": 0, - "spread": "1", - "color": "#576574", - "alpha": "1", - "inset": true - } - ] - }, - "opacity": { - "underlay": "1", - "border": "0" - }, - "colors": { - "bg": "#ffffff", - "fg": "#f6f6f6", - "text": "#494949", - "underlay": "#ffffff", - "link": "#818181", - "accent": "#818181", - "cBlue": "#2e86de", - "cRed": "#c96248", - "cGreen": "#0fa00f", - "cOrange": "#aa7623", - "postLink": "#2e86de", - "border": "#ffffff", - "icon": "#8a8a8a", - "panel": "transparent", - "topBarText": "#4b4b4b", - "tab": "--btn,-30", - "btn": "#576574" - }, - "radii": { - "panel": "0", - "avatar": "6", - "avatarAlt": "6" - } - } -} diff --git a/static/themes/paper.json b/static/themes/paper.json new file mode 100644 index 00000000..a3b90a0a --- /dev/null +++ b/static/themes/paper.json @@ -0,0 +1,172 @@ +{ + "_pleroma_theme_version": 2, + "name": "Paper", + "source": { + "themeEngineVersion": 3, + "fonts": {}, + "shadows": { + "panel": [ + { + "x": "0", + "y": "2", + "blur": "9", + "spread": 0, + "inset": false, + "color": "#668bb2", + "alpha": "0.1" + }, + { + "x": "0", + "y": "1", + "blur": "2", + "spread": "-1", + "inset": false, + "color": "#668bb2", + "alpha": "0.1" + } + ], + "topBar": [ + { + "x": 0, + "y": "3", + "blur": "8", + "spread": 0, + "inset": false, + "color": "#3e618e", + "alpha": "0.1" + }, + { + "x": 0, + "y": "1", + "blur": "4", + "spread": 0, + "inset": false, + "color": "#3e618e", + "alpha": "0.1" + } + ], + "button": [ + { + "x": 0, + "y": "2", + "blur": "5", + "spread": 0, + "color": "#463f78", + "alpha": "0.1", + "inset": false + } + ], + "input": [ + { + "x": 0, + "y": "1", + "blur": "2", + "spread": 0, + "inset": true, + "color": "#6277b7", + "alpha": "0.1" + } + ], + "buttonHover": [ + { + "x": 0, + "y": "2", + "blur": "5", + "spread": 0, + "color": "#494949", + "alpha": "0.1" + }, + { + "x": 0, + "y": "2", + "blur": "0", + "spread": "20", + "color": "#ffffff", + "alpha": "1", + "inset": true + } + ], + "buttonPressed": [ + { + "x": 0, + "y": 0, + "blur": "4", + "spread": "0", + "color": "#494949", + "alpha": "0.8", + "inset": false + } + ], + "avatarStatus": [ + { + "x": "0", + "y": "2", + "blur": "4", + "spread": "0", + "inset": false, + "color": "#3e618e", + "alpha": "0.1" + } + ], + "avatar": [ + { + "x": 0, + "y": "2", + "blur": "5", + "spread": "0", + "color": "#3e618e", + "alpha": "0.9" + } + ], + "popup": [ + { + "x": "0", + "y": "3", + "blur": "11", + "spread": 0, + "color": "#668bb2", + "alpha": "0.2" + }, + { + "x": "0", + "y": "2", + "blur": "3", + "spread": "-1", + "color": "#668bb2", + "alpha": "0.2" + } + ] + }, + "opacity": { + "underlay": "1", + "border": "0" + }, + "colors": { + "bg": "#ffffff", + "fg": "#f6f6f6", + "text": "#494949", + "underlay": "#ffffff", + "link": "#788ca1", + "accent": "#97a0aa", + "cBlue": "#788ca1", + "cRed": "#eed7ce", + "cGreen": "#788ca1", + "cOrange": "#788ca1", + "postLink": "#788ca1", + "border": "#ffffff", + "icon": "#b6c9c4", + "panel": "#ffffff", + "topBarText": "#4b4b4b" + }, + "radii": { + "btn": "0", + "input": "0", + "checkbox": "0", + "panel": "0", + "avatar": "2", + "avatarAlt": "2", + "tooltip": "0", + "attachment": "0" + } + } +} -- cgit v1.2.3-70-g09d2 From 8bb5d775b4ce24193f8372a9b541e1ce270e839f Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Thu, 20 Feb 2020 20:47:24 +0200 Subject: update pleroma-dark and pleroma-light --- static/styles.json | 4 +- static/themes/pleroma-dark.json | 543 +++++++++++++++++++++++++++++++++++++ static/themes/pleroma-light.json | 570 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 1115 insertions(+), 2 deletions(-) create mode 100644 static/themes/pleroma-dark.json create mode 100644 static/themes/pleroma-light.json (limited to 'static/themes') diff --git a/static/styles.json b/static/styles.json index 3349a837..23f57c65 100644 --- a/static/styles.json +++ b/static/styles.json @@ -1,6 +1,6 @@ { - "pleroma-dark": [ "Pleroma Dark", "#121a24", "#182230", "#b9b9ba", "#d8a070", "#d31014", "#0fa00f", "#0095ff", "#ffa500" ], - "pleroma-light": [ "Pleroma Light", "#f2f4f6", "#dbe0e8", "#304055", "#f86f0f", "#d31014", "#0fa00f", "#0095ff", "#ffa500" ], + "pleroma-dark": "/static/themes/pleroma-dark.json", + "pleroma-light": "/static/themes/pleroma-light.json", "pleroma-amoled": [ "Pleroma Dark AMOLED", "#000000", "#111111", "#b0b0b1", "#d8a070", "#aa0000", "#0fa00f", "#0095ff", "#d59500"], "classic-dark": [ "Classic Dark", "#161c20", "#282e32", "#b9b9b9", "#baaa9c", "#d31014", "#0fa00f", "#0095ff", "#ffa500" ], "bird": [ "Bird", "#f8fafd", "#e6ecf0", "#14171a", "#0084b8", "#e0245e", "#17bf63", "#1b95e0", "#fab81e"], diff --git a/static/themes/pleroma-dark.json b/static/themes/pleroma-dark.json new file mode 100644 index 00000000..2de001da --- /dev/null +++ b/static/themes/pleroma-dark.json @@ -0,0 +1,543 @@ +{ + "_pleroma_theme_version": 2, + "name": "Pleroma Dark", + "theme": { + "themeEngineVersion": 3, + "shadows": { + "panel": [ + { + "x": "0", + "y": "0", + "blur": "3", + "spread": 0, + "color": "#000000", + "alpha": "0.5" + }, + { + "x": "0", + "y": "4", + "blur": "6", + "spread": "3", + "inset": false, + "color": "#000000", + "alpha": "0.3" + } + ], + "topBar": [ + { + "x": 0, + "y": "1", + "blur": 4, + "spread": 0, + "color": "#000000", + "alpha": "0.4" + }, + { + "x": 0, + "y": "2", + "blur": "7", + "spread": 0, + "inset": false, + "color": "#000000", + "alpha": "0.3" + } + ], + "popup": [ + { + "x": 2, + "y": 2, + "blur": 3, + "spread": 0, + "color": "#000000", + "alpha": 0.5 + } + ], + "avatar": [ + { + "x": 0, + "y": 1, + "blur": 8, + "spread": 0, + "color": "#000000", + "alpha": 0.7 + } + ], + "avatarStatus": [], + "panelHeader": [ + { + "x": 0, + "y": "1", + "blur": "3", + "spread": 0, + "inset": false, + "color": "#000000", + "alpha": "0.4" + }, + { + "x": "0", + "y": "1", + "blur": "0", + "spread": 0, + "inset": true, + "color": "#ffffff", + "alpha": "0.2" + } + ], + "button": [ + { + "x": 0, + "y": 0, + "blur": 2, + "spread": 0, + "color": "#000000", + "alpha": 1 + }, + { + "x": 0, + "y": 1, + "blur": 0, + "spread": 0, + "color": "#FFFFFF", + "alpha": 0.2, + "inset": true + }, + { + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "color": "#000000", + "alpha": 0.2, + "inset": true + } + ], + "buttonHover": [ + { + "x": 0, + "y": 0, + "blur": "1", + "spread": "2", + "color": "#b9b9ba", + "alpha": "0.4", + "inset": true + }, + { + "x": 0, + "y": 1, + "blur": 0, + "spread": 0, + "color": "#FFFFFF", + "alpha": 0.2, + "inset": true + }, + { + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "color": "#000000", + "alpha": 0.2, + "inset": true + } + ], + "buttonPressed": [ + { + "x": 0, + "y": 0, + "blur": 4, + "spread": 0, + "color": "#000000", + "alpha": 1, + "inset": true + }, + { + "x": 0, + "y": 1, + "blur": 0, + "spread": 0, + "color": "#000000", + "alpha": 0.2, + "inset": true + }, + { + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "color": "#FFFFFF", + "alpha": 0.2, + "inset": true + }, + { + "x": 0, + "y": 0, + "blur": "2", + "spread": 0, + "inset": false, + "color": "#000000", + "alpha": 1 + } + ], + "input": [ + { + "x": 0, + "y": 1, + "blur": 0, + "spread": 0, + "color": "#000000", + "alpha": 0.2, + "inset": true + }, + { + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "color": "#FFFFFF", + "alpha": 0.2, + "inset": true + }, + { + "x": 0, + "y": 0, + "blur": 2, + "inset": true, + "spread": 0, + "color": "#000000", + "alpha": 1 + } + ] + }, + "colors": { + "underlay": "#090e14", + "bg": "#0f161e", + "fg": "#151e2b", + "cRed": "#d31014", + "cOrange": "#ffc459", + "cGreen": "#5dc94a", + "cBlue": "#81beea", + "accent": "#e2b188", + "link": "#e2b188", + "text": "#b9b9ba", + "badgeNotification": "#e15932", + "badgeNotificationText": "#ffffff", + "panel": "#151e2b", + "panelText": "#b9b9ba", + "alertNeutral": "#b9b9ba", + "alertNeutralPanelText": "#ffffff", + "alertNeutralText": "#ffffff", + "alertWarning": "#ffc459", + "alertWarningPanelText": "#ffffff", + "alertWarningText": "#ffffff", + "alertError": "#d31014", + "alertErrorPanelText": "#b9b9ba", + "alertErrorText": "#f0f0f0", + "fgText": "#b9b9ba", + "topBar": "#151e2b", + "topBarText": "#a0a5aa", + "input": "#151e2b", + "inputTopbarText": "#a0a5aa", + "inputPanelText": "#b9b9ba", + "inputText": "#b9b9ba", + "btn": "#151e2b", + "btnText": "#b9b9ba", + "btnTopBarText": "#b9b9ba", + "btnDisabled": "#111822", + "btnDisabledTopBarText": "#3b4148", + "btnPanelText": "#b9b9ba", + "btnDisabledPanelText": "#3b4148", + "btnDisabledText": "#3b4148", + "btnToggled": "#c08f60", + "btnToggledTopBarText": "#000000", + "btnToggledPanelText": "#000000", + "btnToggledText": "#000000", + "btnPressed": "#151e2b", + "btnPressedTopBarText": "#b9b9ba", + "btnPressedTopBar": "#151e2b", + "btnPressedPanelText": "#b9b9ba", + "btnPressedPanel": "#151e2b", + "btnPressedText": "#b9b9ba", + "tabActiveText": "#b9b9ba", + "tabText": "#b9b9ba", + "tab": "#151e2b", + "fgLink": "#e2b188", + "topBarLink": "#a0a5aa", + "panelLink": "#e2b188", + "panelFaint": "#b9b9ba", + "icon": "#64686c", + "poll": "#645449", + "pollText": "#ffffff", + "border": "#1b232d", + "postLink": "#e2b188", + "lightText": "#ededed", + "popover": "#0f161e", + "selectedMenuPopover": "#18232f", + "highlight": "#18232f", + "highlightText": "#b9b9ba", + "selectedMenu": "#18232f", + "selectedMenuText": "#b9b9ba", + "selectedMenuPopoverIcon": "#696e75", + "highlightLink": "#e2b188", + "selectedMenuLink": "#e2b188", + "selectedMenuPopoverLink": "#e2b188", + "selectedMenuPopoverText": "#b9b9ba", + "faintLink": "#e2b188", + "highlightFaintLink": "#e2b188", + "selectedMenuFaintLink": "#e2b188", + "selectedMenuPopoverFaintLink": "#e2b188", + "faint": "#b9b9ba", + "highlightFaintText": "#b9b9ba", + "selectedMenuFaintText": "#b9b9ba", + "selectedMenuPopoverFaintText": "#b9b9ba", + "highlightLightText": "#ededed", + "selectedMenuLightText": "#ededed", + "selectedMenuPopoverLightText": "#ededed", + "selectedMenuIcon": "#696e75", + "selectedPost": "#18232f", + "selectedPostText": "#b9b9ba", + "selectedPostIcon": "#696e75", + "selectedPostLink": "#e2b188", + "selectedPostFaintLink": "#e2b188", + "highlightPostLink": "#e2b188", + "selectedPostPostLink": "#e2b188", + "selectedPostLightText": "#ededed", + "selectedPostFaintText": "#b9b9ba", + "popoverText": "#b9b9ba", + "popoverIcon": "#64686c", + "popoverLink": "#e2b188", + "postFaintLink": "#e2b188", + "popoverPostFaintLink": "#e2b188", + "popoverFaintLink": "#e2b188", + "popoverFaintText": "#b9b9ba", + "popoverPostLink": "#e2b188", + "popoverLightText": "#ededed", + "highlightIcon": "#696e75", + "highlightPostFaintLink": "#e2b188", + "profileTint": "#0f161e", + "profileBg": "#070c11" + }, + "opacity": { + "underlay": 0.6, + "bg": 1, + "panel": 1, + "alert": 0.5, + "input": 0.5, + "btn": 1, + "faint": 0.5, + "border": 1, + "popover": 1, + "profileTint": 0.5 + }, + "radii": { + "btn": "3", + "input": "3", + "checkbox": 2, + "panel": "3", + "avatar": "3", + "avatarAlt": 50, + "tooltip": 2, + "attachment": "3" + }, + "fonts": { + "interface": { + "family": "sans-serif" + }, + "input": { + "family": "inherit" + }, + "post": { + "family": "inherit" + }, + "postCode": { + "family": "monospace" + } + } + }, + "source": { + "themeEngineVersion": 3, + "fonts": {}, + "shadows": { + "buttonHover": [ + { + "x": 0, + "y": 0, + "blur": "1", + "spread": "2", + "color": "#b9b9ba", + "alpha": "0.4", + "inset": true + }, + { + "x": 0, + "y": 1, + "blur": 0, + "spread": 0, + "color": "#FFFFFF", + "alpha": 0.2, + "inset": true + }, + { + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "color": "#000000", + "alpha": 0.2, + "inset": true + } + ], + "buttonPressed": [ + { + "x": 0, + "y": 0, + "blur": 4, + "spread": 0, + "color": "#000000", + "alpha": 1, + "inset": true + }, + { + "x": 0, + "y": 1, + "blur": 0, + "spread": 0, + "color": "#000000", + "alpha": 0.2, + "inset": true + }, + { + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "color": "#FFFFFF", + "alpha": 0.2, + "inset": true + }, + { + "x": 0, + "y": 0, + "blur": "2", + "spread": 0, + "inset": false, + "color": "#000000", + "alpha": 1 + } + ], + "panelHeader": [ + { + "x": 0, + "y": "1", + "blur": "3", + "spread": 0, + "inset": false, + "color": "#000000", + "alpha": "0.4" + }, + { + "x": "0", + "y": "1", + "blur": "0", + "spread": 0, + "inset": true, + "color": "#ffffff", + "alpha": "0.2" + } + ], + "panel": [ + { + "x": "0", + "y": "0", + "blur": "3", + "spread": 0, + "color": "#000000", + "alpha": "0.5" + }, + { + "x": "0", + "y": "4", + "blur": "6", + "spread": "3", + "inset": false, + "color": "#000000", + "alpha": "0.3" + } + ], + "button": [ + { + "x": 0, + "y": 0, + "blur": 2, + "spread": 0, + "color": "#000000", + "alpha": 1 + }, + { + "x": 0, + "y": 1, + "blur": 0, + "spread": 0, + "color": "#FFFFFF", + "alpha": 0.2, + "inset": true + }, + { + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "color": "#000000", + "alpha": 0.2, + "inset": true + } + ], + "topBar": [ + { + "x": 0, + "y": "1", + "blur": 4, + "spread": 0, + "color": "#000000", + "alpha": "0.4" + }, + { + "x": 0, + "y": "2", + "blur": "7", + "spread": 0, + "inset": false, + "color": "#000000", + "alpha": "0.3" + } + ] + }, + "opacity": { + "underlay": "0.6" + }, + "colors": { + "bg": "#0f161e", + "fg": "#151e2b", + "text": "#b9b9ba", + "underlay": "#090e14", + "accent": "#e2b188", + "cBlue": "#81beea", + "cRed": "#d31014", + "cGreen": "#5dc94a", + "cOrange": "#ffc459", + "border": "#1b232d", + "topBarText": "#a0a5aa", + "topBarLink": "#A0A5AA", + "btnToggled": "#c08f60", + "alertErrorText": "#f0f0f0", + "badgeNotification": "#e15932", + "badgeNotificationText": "#ffffff" + }, + "radii": { + "btn": "3", + "input": "3", + "panel": "3", + "avatar": "3", + "attachment": "3" + } + } +} diff --git a/static/themes/pleroma-light.json b/static/themes/pleroma-light.json new file mode 100644 index 00000000..f8cefc9b --- /dev/null +++ b/static/themes/pleroma-light.json @@ -0,0 +1,570 @@ +{ + "_pleroma_theme_version": 2, + "name": "Pleroma Light", + "theme": { + "themeEngineVersion": 3, + "shadows": { + "panel": [ + { + "x": "0", + "y": 1, + "blur": "3", + "spread": 0, + "color": "#000000", + "alpha": "0.5" + }, + { + "x": "0", + "y": "3", + "blur": "6", + "spread": "1", + "inset": false, + "color": "#000000", + "alpha": "0.2" + } + ], + "topBar": [ + { + "x": 0, + "y": 0, + "blur": 4, + "spread": 0, + "color": "#000000", + "alpha": 0.6 + } + ], + "popup": [ + { + "x": "1", + "y": "2", + "blur": "2", + "spread": 0, + "color": "#000000", + "alpha": "0.2" + }, + { + "x": "1", + "y": "3", + "blur": "7", + "spread": "0", + "inset": false, + "color": "#000000", + "alpha": "0.2" + } + ], + "avatar": [ + { + "x": 0, + "y": 1, + "blur": 8, + "spread": 0, + "color": "#000000", + "alpha": 0.7 + } + ], + "avatarStatus": [ + { + "x": 0, + "y": "1", + "blur": "4", + "spread": "0", + "inset": false, + "color": "#000000", + "alpha": "0.2" + } + ], + "panelHeader": [ + { + "x": 0, + "y": "1", + "blur": 0, + "spread": 0, + "inset": true, + "color": "#ffffff", + "alpha": "0.5" + }, + { + "x": 0, + "y": "1", + "blur": "3", + "spread": 0, + "inset": false, + "color": "#000000", + "alpha": "0.3" + } + ], + "button": [ + { + "x": 0, + "y": 0, + "blur": 2, + "spread": 0, + "color": "#000000", + "alpha": "0.2" + }, + { + "x": 0, + "y": 1, + "blur": 0, + "spread": 0, + "color": "#FFFFFF", + "alpha": "0.5", + "inset": true + }, + { + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "color": "#000000", + "alpha": 0.2, + "inset": true + } + ], + "buttonHover": [ + { + "x": 0, + "y": 0, + "blur": "2", + "spread": 0, + "color": "#000000", + "alpha": "0.2" + }, + { + "x": 0, + "y": "0", + "blur": "1", + "spread": "2", + "color": "#ffc39f", + "alpha": "1", + "inset": true + }, + { + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "color": "#000000", + "alpha": 0.2, + "inset": true + } + ], + "buttonPressed": [ + { + "x": 0, + "y": 0, + "blur": 4, + "spread": 0, + "color": "#000000", + "alpha": "0.2" + }, + { + "x": 0, + "y": 1, + "blur": "1", + "spread": "2", + "color": "#000000", + "alpha": "0.3", + "inset": true + }, + { + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "color": "#FFFFFF", + "alpha": 0.2, + "inset": true + } + ], + "input": [ + { + "x": 0, + "y": 1, + "blur": 0, + "spread": 0, + "color": "#000000", + "alpha": 0.2, + "inset": true + }, + { + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "color": "#FFFFFF", + "alpha": 0.2, + "inset": true + }, + { + "x": 0, + "y": 0, + "blur": "2", + "inset": true, + "spread": 0, + "color": "#000000", + "alpha": "0.15" + } + ] + }, + "colors": { + "underlay": "#5d6086", + "bg": "#f2f6f9", + "fg": "#d6dfed", + "cRed": "#d31014", + "cOrange": "#ffa500", + "cGreen": "#0fa00f", + "cBlue": "#0095ff", + "accent": "#f55b1b", + "link": "#f55b1b", + "text": "#304055", + "badgeNotification": "#e83802", + "badgeNotificationText": "#ffffff", + "panel": "#d6dfed", + "panelText": "#304055", + "alertNeutral": "#304055", + "alertNeutralPanelText": "#000000", + "alertNeutralText": "#000000", + "alertWarning": "#ffa500", + "alertWarningPanelText": "#304055", + "alertWarningText": "#304055", + "alertError": "#d31014", + "alertErrorPanelText": "#000000", + "alertErrorText": "#000000", + "fgText": "#304055", + "topBar": "#d6dfed", + "topBarText": "#304055", + "input": "#dee3ed", + "inputTopbarText": "#304055", + "inputPanelText": "#304055", + "inputText": "#304055", + "btn": "#d6dfed", + "btnText": "#304055", + "btnTopBarText": "#304055", + "btnDisabled": "#ebf1f6", + "btnDisabledTopBarText": "#bdc5ce", + "btnPanelText": "#304055", + "btnDisabledPanelText": "#bdc5ce", + "btnDisabledText": "#bdc5ce", + "btnToggled": "#db9d77", + "btnToggledTopBarText": "#304055", + "btnToggledPanelText": "#304055", + "btnToggledText": "#304055", + "btnPressed": "#d6dfed", + "btnPressedTopBarText": "#304055", + "btnPressedTopBar": "#d6dfed", + "btnPressedPanelText": "#304055", + "btnPressedPanel": "#d6dfed", + "btnPressedText": "#304055", + "tabActiveText": "#304055", + "tabText": "#304055", + "tab": "#d6dfed", + "fgLink": "#e44a0a", + "topBarLink": "#304055", + "panelLink": "#f55b1b", + "panelFaint": "#304055", + "icon": "#919ba7", + "poll": "#f4b8a1", + "pollText": "#304055", + "border": "#d8e6f9", + "postLink": "#e44a0a", + "lightText": "#0c0f14", + "popover": "#f2f6f9", + "selectedMenuPopover": "#e1eaf1", + "highlight": "#e1eaf1", + "highlightText": "#304055", + "selectedMenu": "#e1eaf1", + "selectedMenuText": "#304055", + "selectedMenuPopoverIcon": "#8995a3", + "highlightLink": "#e44a0a", + "selectedMenuLink": "#f55b1b", + "selectedMenuPopoverLink": "#e44a0a", + "selectedMenuPopoverText": "#304055", + "faintLink": "#f55b1b", + "highlightFaintLink": "#e44a0a", + "selectedMenuFaintLink": "#f55b1b", + "selectedMenuPopoverFaintLink": "#e44a0a", + "faint": "#304055", + "highlightFaintText": "#304055", + "selectedMenuFaintText": "#304055", + "selectedMenuPopoverFaintText": "#304055", + "highlightLightText": "#0c0f14", + "selectedMenuLightText": "#0c0f14", + "selectedMenuPopoverLightText": "#0c0f14", + "selectedMenuIcon": "#8995a3", + "selectedPost": "#e1eaf1", + "selectedPostText": "#304055", + "selectedPostIcon": "#8995a3", + "selectedPostLink": "#f55b1b", + "selectedPostFaintLink": "#f55b1b", + "highlightPostLink": "#f55b1b", + "selectedPostPostLink": "#e44a0a", + "selectedPostLightText": "#0c0f14", + "selectedPostFaintText": "#304055", + "popoverText": "#304055", + "popoverIcon": "#919ba7", + "popoverLink": "#e44a0a", + "postFaintLink": "#e44a0a", + "popoverPostFaintLink": "#f55b1b", + "popoverFaintLink": "#e44a0a", + "popoverFaintText": "#304055", + "popoverPostLink": "#f55b1b", + "popoverLightText": "#0c0f14", + "highlightIcon": "#8995a3", + "highlightPostFaintLink": "#f55b1b", + "profileTint": "#f2f6f9", + "profileBg": "#808992" + }, + "opacity": { + "underlay": 0.4, + "bg": 1, + "panel": 1, + "alert": 0.5, + "input": 0.5, + "btn": 1, + "faint": 0.5, + "border": 1, + "popover": 1, + "profileTint": 0.5 + }, + "radii": { + "btn": "3", + "input": "3", + "checkbox": 2, + "panel": "3", + "avatar": "3", + "avatarAlt": 50, + "tooltip": 2, + "attachment": "3" + }, + "fonts": { + "interface": { + "family": "sans-serif" + }, + "input": { + "family": "inherit" + }, + "post": { + "family": "inherit" + }, + "postCode": { + "family": "monospace" + } + } + }, + "source": { + "themeEngineVersion": 3, + "fonts": {}, + "shadows": { + "button": [ + { + "x": 0, + "y": 0, + "blur": 2, + "spread": 0, + "color": "#000000", + "alpha": "0.2" + }, + { + "x": 0, + "y": 1, + "blur": 0, + "spread": 0, + "color": "#FFFFFF", + "alpha": "0.5", + "inset": true + }, + { + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "color": "#000000", + "alpha": 0.2, + "inset": true + } + ], + "buttonHover": [ + { + "x": 0, + "y": 0, + "blur": "2", + "spread": 0, + "color": "#000000", + "alpha": "0.2" + }, + { + "x": 0, + "y": "0", + "blur": "1", + "spread": "2", + "color": "#ffc39f", + "alpha": "1", + "inset": true + }, + { + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "color": "#000000", + "alpha": 0.2, + "inset": true + } + ], + "input": [ + { + "x": 0, + "y": 1, + "blur": 0, + "spread": 0, + "color": "#000000", + "alpha": 0.2, + "inset": true + }, + { + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "color": "#FFFFFF", + "alpha": 0.2, + "inset": true + }, + { + "x": 0, + "y": 0, + "blur": "2", + "inset": true, + "spread": 0, + "color": "#000000", + "alpha": "0.15" + } + ], + "panel": [ + { + "x": "0", + "y": 1, + "blur": "3", + "spread": 0, + "color": "#000000", + "alpha": "0.5" + }, + { + "x": "0", + "y": "3", + "blur": "6", + "spread": "1", + "inset": false, + "color": "#000000", + "alpha": "0.2" + } + ], + "panelHeader": [ + { + "x": 0, + "y": "1", + "blur": 0, + "spread": 0, + "inset": true, + "color": "#ffffff", + "alpha": "0.5" + }, + { + "x": 0, + "y": "1", + "blur": "3", + "spread": 0, + "inset": false, + "color": "#000000", + "alpha": "0.3" + } + ], + "buttonPressed": [ + { + "x": 0, + "y": 0, + "blur": 4, + "spread": 0, + "color": "#000000", + "alpha": "0.2" + }, + { + "x": 0, + "y": 1, + "blur": "1", + "spread": "2", + "color": "#000000", + "alpha": "0.3", + "inset": true + }, + { + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "color": "#FFFFFF", + "alpha": 0.2, + "inset": true + } + ], + "popup": [ + { + "x": "1", + "y": "2", + "blur": "2", + "spread": 0, + "color": "#000000", + "alpha": "0.2" + }, + { + "x": "1", + "y": "3", + "blur": "7", + "spread": "0", + "inset": false, + "color": "#000000", + "alpha": "0.2" + } + ], + "avatarStatus": [ + { + "x": 0, + "y": "1", + "blur": "4", + "spread": "0", + "inset": false, + "color": "#000000", + "alpha": "0.2" + } + ] + }, + "opacity": { + "underlay": "0.4" + }, + "colors": { + "bg": "#f2f6f9", + "fg": "#d6dfed", + "text": "#304055", + "underlay": "#5d6086", + "accent": "#f55b1b", + "cBlue": "#0095ff", + "cRed": "#d31014", + "cGreen": "#0fa00f", + "cOrange": "#ffa500", + "border": "#d8e6f9", + "topBarText": "#304055", + "topBarLink": "#304055", + "btnToggled": "#db9d77", + "input": "#dee3ed", + "badgeNotification": "#e83802" + }, + "radii": { + "btn": "3", + "input": "3", + "panel": "3", + "avatar": "3", + "attachment": "3" + } + } +} -- cgit v1.2.3-70-g09d2 From 64a6ba219ac9a1614e87d3ac979454e6d016cd5e Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Thu, 20 Feb 2020 21:14:42 +0200 Subject: make panel header highlight less harsh --- static/themes/pleroma-dark.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'static/themes') diff --git a/static/themes/pleroma-dark.json b/static/themes/pleroma-dark.json index 2de001da..c2ee9d1c 100644 --- a/static/themes/pleroma-dark.json +++ b/static/themes/pleroma-dark.json @@ -80,7 +80,7 @@ "spread": 0, "inset": true, "color": "#ffffff", - "alpha": "0.2" + "alpha": "0.1" } ], "button": [ -- cgit v1.2.3-70-g09d2 From e342dbcb10ad5da4a897ce683246b1aa2cd72b00 Mon Sep 17 00:00:00 2001 From: Shpuld Shpludson Date: Fri, 21 Feb 2020 14:09:21 +0000 Subject: Apply suggestion to static/themes/pleroma-dark.json --- static/themes/pleroma-dark.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'static/themes') diff --git a/static/themes/pleroma-dark.json b/static/themes/pleroma-dark.json index c2ee9d1c..aee4a4fe 100644 --- a/static/themes/pleroma-dark.json +++ b/static/themes/pleroma-dark.json @@ -528,7 +528,7 @@ "topBarText": "#a0a5aa", "topBarLink": "#A0A5AA", "btnToggled": "#c08f60", - "alertErrorText": "#f0f0f0", + "alertErrorText": "--text,21.2", "badgeNotification": "#e15932", "badgeNotificationText": "#ffffff" }, -- cgit v1.2.3-70-g09d2 From 19cc739598034b796956a1fadc91d83ec6074723 Mon Sep 17 00:00:00 2001 From: Shpuld Shpludson Date: Fri, 21 Feb 2020 14:09:25 +0000 Subject: Apply suggestion to static/themes/pleroma-dark.json --- static/themes/pleroma-dark.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'static/themes') diff --git a/static/themes/pleroma-dark.json b/static/themes/pleroma-dark.json index aee4a4fe..a1b9a468 100644 --- a/static/themes/pleroma-dark.json +++ b/static/themes/pleroma-dark.json @@ -525,8 +525,8 @@ "cGreen": "#5dc94a", "cOrange": "#ffc459", "border": "#1b232d", - "topBarText": "#a0a5aa", - "topBarLink": "#A0A5AA", + "topBarText": "--text,-9.75", + "topBarLink": "--topBarText", "btnToggled": "#c08f60", "alertErrorText": "--text,21.2", "badgeNotification": "#e15932", -- cgit v1.2.3-70-g09d2 From c9935362de1effd03b06730cde1d6ebd81e5b777 Mon Sep 17 00:00:00 2001 From: Shpuld Shpludson Date: Fri, 21 Feb 2020 14:09:29 +0000 Subject: Apply suggestion to static/themes/pleroma-dark.json --- static/themes/pleroma-dark.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'static/themes') diff --git a/static/themes/pleroma-dark.json b/static/themes/pleroma-dark.json index a1b9a468..9120f55f 100644 --- a/static/themes/pleroma-dark.json +++ b/static/themes/pleroma-dark.json @@ -527,7 +527,7 @@ "border": "#1b232d", "topBarText": "--text,-9.75", "topBarLink": "--topBarText", - "btnToggled": "#c08f60", + "btnToggled": "--accent,-24.2", "alertErrorText": "--text,21.2", "badgeNotification": "#e15932", "badgeNotificationText": "#ffffff" -- cgit v1.2.3-70-g09d2 From 8c454b94568218399b7805c1aa72cab0d5a18df7 Mon Sep 17 00:00:00 2001 From: Shpuld Shpludson Date: Fri, 21 Feb 2020 14:09:31 +0000 Subject: Apply suggestion to static/themes/pleroma-dark.json --- static/themes/pleroma-dark.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'static/themes') diff --git a/static/themes/pleroma-dark.json b/static/themes/pleroma-dark.json index 9120f55f..48e28c74 100644 --- a/static/themes/pleroma-dark.json +++ b/static/themes/pleroma-dark.json @@ -524,7 +524,7 @@ "cRed": "#d31014", "cGreen": "#5dc94a", "cOrange": "#ffc459", - "border": "#1b232d", + "border": "--fg,3", "topBarText": "--text,-9.75", "topBarLink": "--topBarText", "btnToggled": "--accent,-24.2", -- cgit v1.2.3-70-g09d2 From b5c6b77ca80b635c907cd5f755ccdd7327396475 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Sat, 22 Feb 2020 10:03:16 +0200 Subject: update using variables --- static/themes/pleroma-light.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'static/themes') diff --git a/static/themes/pleroma-light.json b/static/themes/pleroma-light.json index f8cefc9b..55cbe28a 100644 --- a/static/themes/pleroma-light.json +++ b/static/themes/pleroma-light.json @@ -554,8 +554,8 @@ "cOrange": "#ffa500", "border": "#d8e6f9", "topBarText": "#304055", - "topBarLink": "#304055", - "btnToggled": "#db9d77", + "topBarLink": "--topBarText", + "btnToggled": "--accent,-24.2", "input": "#dee3ed", "badgeNotification": "#e83802" }, -- cgit v1.2.3-70-g09d2 From 1fb91b17955219fcf17320806a0d4bf61bf81f5b Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Sat, 22 Feb 2020 10:34:54 +0200 Subject: remove bloat from themes --- static/themes/pleroma-dark.json | 352 --------------------------------------- static/themes/pleroma-light.json | 351 -------------------------------------- 2 files changed, 703 deletions(-) (limited to 'static/themes') diff --git a/static/themes/pleroma-dark.json b/static/themes/pleroma-dark.json index 48e28c74..2703fba1 100644 --- a/static/themes/pleroma-dark.json +++ b/static/themes/pleroma-dark.json @@ -1,358 +1,6 @@ { "_pleroma_theme_version": 2, "name": "Pleroma Dark", - "theme": { - "themeEngineVersion": 3, - "shadows": { - "panel": [ - { - "x": "0", - "y": "0", - "blur": "3", - "spread": 0, - "color": "#000000", - "alpha": "0.5" - }, - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "3", - "inset": false, - "color": "#000000", - "alpha": "0.3" - } - ], - "topBar": [ - { - "x": 0, - "y": "1", - "blur": 4, - "spread": 0, - "color": "#000000", - "alpha": "0.4" - }, - { - "x": 0, - "y": "2", - "blur": "7", - "spread": 0, - "inset": false, - "color": "#000000", - "alpha": "0.3" - } - ], - "popup": [ - { - "x": 2, - "y": 2, - "blur": 3, - "spread": 0, - "color": "#000000", - "alpha": 0.5 - } - ], - "avatar": [ - { - "x": 0, - "y": 1, - "blur": 8, - "spread": 0, - "color": "#000000", - "alpha": 0.7 - } - ], - "avatarStatus": [], - "panelHeader": [ - { - "x": 0, - "y": "1", - "blur": "3", - "spread": 0, - "inset": false, - "color": "#000000", - "alpha": "0.4" - }, - { - "x": "0", - "y": "1", - "blur": "0", - "spread": 0, - "inset": true, - "color": "#ffffff", - "alpha": "0.1" - } - ], - "button": [ - { - "x": 0, - "y": 0, - "blur": 2, - "spread": 0, - "color": "#000000", - "alpha": 1 - }, - { - "x": 0, - "y": 1, - "blur": 0, - "spread": 0, - "color": "#FFFFFF", - "alpha": 0.2, - "inset": true - }, - { - "x": 0, - "y": -1, - "blur": 0, - "spread": 0, - "color": "#000000", - "alpha": 0.2, - "inset": true - } - ], - "buttonHover": [ - { - "x": 0, - "y": 0, - "blur": "1", - "spread": "2", - "color": "#b9b9ba", - "alpha": "0.4", - "inset": true - }, - { - "x": 0, - "y": 1, - "blur": 0, - "spread": 0, - "color": "#FFFFFF", - "alpha": 0.2, - "inset": true - }, - { - "x": 0, - "y": -1, - "blur": 0, - "spread": 0, - "color": "#000000", - "alpha": 0.2, - "inset": true - } - ], - "buttonPressed": [ - { - "x": 0, - "y": 0, - "blur": 4, - "spread": 0, - "color": "#000000", - "alpha": 1, - "inset": true - }, - { - "x": 0, - "y": 1, - "blur": 0, - "spread": 0, - "color": "#000000", - "alpha": 0.2, - "inset": true - }, - { - "x": 0, - "y": -1, - "blur": 0, - "spread": 0, - "color": "#FFFFFF", - "alpha": 0.2, - "inset": true - }, - { - "x": 0, - "y": 0, - "blur": "2", - "spread": 0, - "inset": false, - "color": "#000000", - "alpha": 1 - } - ], - "input": [ - { - "x": 0, - "y": 1, - "blur": 0, - "spread": 0, - "color": "#000000", - "alpha": 0.2, - "inset": true - }, - { - "x": 0, - "y": -1, - "blur": 0, - "spread": 0, - "color": "#FFFFFF", - "alpha": 0.2, - "inset": true - }, - { - "x": 0, - "y": 0, - "blur": 2, - "inset": true, - "spread": 0, - "color": "#000000", - "alpha": 1 - } - ] - }, - "colors": { - "underlay": "#090e14", - "bg": "#0f161e", - "fg": "#151e2b", - "cRed": "#d31014", - "cOrange": "#ffc459", - "cGreen": "#5dc94a", - "cBlue": "#81beea", - "accent": "#e2b188", - "link": "#e2b188", - "text": "#b9b9ba", - "badgeNotification": "#e15932", - "badgeNotificationText": "#ffffff", - "panel": "#151e2b", - "panelText": "#b9b9ba", - "alertNeutral": "#b9b9ba", - "alertNeutralPanelText": "#ffffff", - "alertNeutralText": "#ffffff", - "alertWarning": "#ffc459", - "alertWarningPanelText": "#ffffff", - "alertWarningText": "#ffffff", - "alertError": "#d31014", - "alertErrorPanelText": "#b9b9ba", - "alertErrorText": "#f0f0f0", - "fgText": "#b9b9ba", - "topBar": "#151e2b", - "topBarText": "#a0a5aa", - "input": "#151e2b", - "inputTopbarText": "#a0a5aa", - "inputPanelText": "#b9b9ba", - "inputText": "#b9b9ba", - "btn": "#151e2b", - "btnText": "#b9b9ba", - "btnTopBarText": "#b9b9ba", - "btnDisabled": "#111822", - "btnDisabledTopBarText": "#3b4148", - "btnPanelText": "#b9b9ba", - "btnDisabledPanelText": "#3b4148", - "btnDisabledText": "#3b4148", - "btnToggled": "#c08f60", - "btnToggledTopBarText": "#000000", - "btnToggledPanelText": "#000000", - "btnToggledText": "#000000", - "btnPressed": "#151e2b", - "btnPressedTopBarText": "#b9b9ba", - "btnPressedTopBar": "#151e2b", - "btnPressedPanelText": "#b9b9ba", - "btnPressedPanel": "#151e2b", - "btnPressedText": "#b9b9ba", - "tabActiveText": "#b9b9ba", - "tabText": "#b9b9ba", - "tab": "#151e2b", - "fgLink": "#e2b188", - "topBarLink": "#a0a5aa", - "panelLink": "#e2b188", - "panelFaint": "#b9b9ba", - "icon": "#64686c", - "poll": "#645449", - "pollText": "#ffffff", - "border": "#1b232d", - "postLink": "#e2b188", - "lightText": "#ededed", - "popover": "#0f161e", - "selectedMenuPopover": "#18232f", - "highlight": "#18232f", - "highlightText": "#b9b9ba", - "selectedMenu": "#18232f", - "selectedMenuText": "#b9b9ba", - "selectedMenuPopoverIcon": "#696e75", - "highlightLink": "#e2b188", - "selectedMenuLink": "#e2b188", - "selectedMenuPopoverLink": "#e2b188", - "selectedMenuPopoverText": "#b9b9ba", - "faintLink": "#e2b188", - "highlightFaintLink": "#e2b188", - "selectedMenuFaintLink": "#e2b188", - "selectedMenuPopoverFaintLink": "#e2b188", - "faint": "#b9b9ba", - "highlightFaintText": "#b9b9ba", - "selectedMenuFaintText": "#b9b9ba", - "selectedMenuPopoverFaintText": "#b9b9ba", - "highlightLightText": "#ededed", - "selectedMenuLightText": "#ededed", - "selectedMenuPopoverLightText": "#ededed", - "selectedMenuIcon": "#696e75", - "selectedPost": "#18232f", - "selectedPostText": "#b9b9ba", - "selectedPostIcon": "#696e75", - "selectedPostLink": "#e2b188", - "selectedPostFaintLink": "#e2b188", - "highlightPostLink": "#e2b188", - "selectedPostPostLink": "#e2b188", - "selectedPostLightText": "#ededed", - "selectedPostFaintText": "#b9b9ba", - "popoverText": "#b9b9ba", - "popoverIcon": "#64686c", - "popoverLink": "#e2b188", - "postFaintLink": "#e2b188", - "popoverPostFaintLink": "#e2b188", - "popoverFaintLink": "#e2b188", - "popoverFaintText": "#b9b9ba", - "popoverPostLink": "#e2b188", - "popoverLightText": "#ededed", - "highlightIcon": "#696e75", - "highlightPostFaintLink": "#e2b188", - "profileTint": "#0f161e", - "profileBg": "#070c11" - }, - "opacity": { - "underlay": 0.6, - "bg": 1, - "panel": 1, - "alert": 0.5, - "input": 0.5, - "btn": 1, - "faint": 0.5, - "border": 1, - "popover": 1, - "profileTint": 0.5 - }, - "radii": { - "btn": "3", - "input": "3", - "checkbox": 2, - "panel": "3", - "avatar": "3", - "avatarAlt": 50, - "tooltip": 2, - "attachment": "3" - }, - "fonts": { - "interface": { - "family": "sans-serif" - }, - "input": { - "family": "inherit" - }, - "post": { - "family": "inherit" - }, - "postCode": { - "family": "monospace" - } - } - }, "source": { "themeEngineVersion": 3, "fonts": {}, diff --git a/static/themes/pleroma-light.json b/static/themes/pleroma-light.json index 55cbe28a..05fc300a 100644 --- a/static/themes/pleroma-light.json +++ b/static/themes/pleroma-light.json @@ -1,357 +1,6 @@ { "_pleroma_theme_version": 2, "name": "Pleroma Light", - "theme": { - "themeEngineVersion": 3, - "shadows": { - "panel": [ - { - "x": "0", - "y": 1, - "blur": "3", - "spread": 0, - "color": "#000000", - "alpha": "0.5" - }, - { - "x": "0", - "y": "3", - "blur": "6", - "spread": "1", - "inset": false, - "color": "#000000", - "alpha": "0.2" - } - ], - "topBar": [ - { - "x": 0, - "y": 0, - "blur": 4, - "spread": 0, - "color": "#000000", - "alpha": 0.6 - } - ], - "popup": [ - { - "x": "1", - "y": "2", - "blur": "2", - "spread": 0, - "color": "#000000", - "alpha": "0.2" - }, - { - "x": "1", - "y": "3", - "blur": "7", - "spread": "0", - "inset": false, - "color": "#000000", - "alpha": "0.2" - } - ], - "avatar": [ - { - "x": 0, - "y": 1, - "blur": 8, - "spread": 0, - "color": "#000000", - "alpha": 0.7 - } - ], - "avatarStatus": [ - { - "x": 0, - "y": "1", - "blur": "4", - "spread": "0", - "inset": false, - "color": "#000000", - "alpha": "0.2" - } - ], - "panelHeader": [ - { - "x": 0, - "y": "1", - "blur": 0, - "spread": 0, - "inset": true, - "color": "#ffffff", - "alpha": "0.5" - }, - { - "x": 0, - "y": "1", - "blur": "3", - "spread": 0, - "inset": false, - "color": "#000000", - "alpha": "0.3" - } - ], - "button": [ - { - "x": 0, - "y": 0, - "blur": 2, - "spread": 0, - "color": "#000000", - "alpha": "0.2" - }, - { - "x": 0, - "y": 1, - "blur": 0, - "spread": 0, - "color": "#FFFFFF", - "alpha": "0.5", - "inset": true - }, - { - "x": 0, - "y": -1, - "blur": 0, - "spread": 0, - "color": "#000000", - "alpha": 0.2, - "inset": true - } - ], - "buttonHover": [ - { - "x": 0, - "y": 0, - "blur": "2", - "spread": 0, - "color": "#000000", - "alpha": "0.2" - }, - { - "x": 0, - "y": "0", - "blur": "1", - "spread": "2", - "color": "#ffc39f", - "alpha": "1", - "inset": true - }, - { - "x": 0, - "y": -1, - "blur": 0, - "spread": 0, - "color": "#000000", - "alpha": 0.2, - "inset": true - } - ], - "buttonPressed": [ - { - "x": 0, - "y": 0, - "blur": 4, - "spread": 0, - "color": "#000000", - "alpha": "0.2" - }, - { - "x": 0, - "y": 1, - "blur": "1", - "spread": "2", - "color": "#000000", - "alpha": "0.3", - "inset": true - }, - { - "x": 0, - "y": -1, - "blur": 0, - "spread": 0, - "color": "#FFFFFF", - "alpha": 0.2, - "inset": true - } - ], - "input": [ - { - "x": 0, - "y": 1, - "blur": 0, - "spread": 0, - "color": "#000000", - "alpha": 0.2, - "inset": true - }, - { - "x": 0, - "y": -1, - "blur": 0, - "spread": 0, - "color": "#FFFFFF", - "alpha": 0.2, - "inset": true - }, - { - "x": 0, - "y": 0, - "blur": "2", - "inset": true, - "spread": 0, - "color": "#000000", - "alpha": "0.15" - } - ] - }, - "colors": { - "underlay": "#5d6086", - "bg": "#f2f6f9", - "fg": "#d6dfed", - "cRed": "#d31014", - "cOrange": "#ffa500", - "cGreen": "#0fa00f", - "cBlue": "#0095ff", - "accent": "#f55b1b", - "link": "#f55b1b", - "text": "#304055", - "badgeNotification": "#e83802", - "badgeNotificationText": "#ffffff", - "panel": "#d6dfed", - "panelText": "#304055", - "alertNeutral": "#304055", - "alertNeutralPanelText": "#000000", - "alertNeutralText": "#000000", - "alertWarning": "#ffa500", - "alertWarningPanelText": "#304055", - "alertWarningText": "#304055", - "alertError": "#d31014", - "alertErrorPanelText": "#000000", - "alertErrorText": "#000000", - "fgText": "#304055", - "topBar": "#d6dfed", - "topBarText": "#304055", - "input": "#dee3ed", - "inputTopbarText": "#304055", - "inputPanelText": "#304055", - "inputText": "#304055", - "btn": "#d6dfed", - "btnText": "#304055", - "btnTopBarText": "#304055", - "btnDisabled": "#ebf1f6", - "btnDisabledTopBarText": "#bdc5ce", - "btnPanelText": "#304055", - "btnDisabledPanelText": "#bdc5ce", - "btnDisabledText": "#bdc5ce", - "btnToggled": "#db9d77", - "btnToggledTopBarText": "#304055", - "btnToggledPanelText": "#304055", - "btnToggledText": "#304055", - "btnPressed": "#d6dfed", - "btnPressedTopBarText": "#304055", - "btnPressedTopBar": "#d6dfed", - "btnPressedPanelText": "#304055", - "btnPressedPanel": "#d6dfed", - "btnPressedText": "#304055", - "tabActiveText": "#304055", - "tabText": "#304055", - "tab": "#d6dfed", - "fgLink": "#e44a0a", - "topBarLink": "#304055", - "panelLink": "#f55b1b", - "panelFaint": "#304055", - "icon": "#919ba7", - "poll": "#f4b8a1", - "pollText": "#304055", - "border": "#d8e6f9", - "postLink": "#e44a0a", - "lightText": "#0c0f14", - "popover": "#f2f6f9", - "selectedMenuPopover": "#e1eaf1", - "highlight": "#e1eaf1", - "highlightText": "#304055", - "selectedMenu": "#e1eaf1", - "selectedMenuText": "#304055", - "selectedMenuPopoverIcon": "#8995a3", - "highlightLink": "#e44a0a", - "selectedMenuLink": "#f55b1b", - "selectedMenuPopoverLink": "#e44a0a", - "selectedMenuPopoverText": "#304055", - "faintLink": "#f55b1b", - "highlightFaintLink": "#e44a0a", - "selectedMenuFaintLink": "#f55b1b", - "selectedMenuPopoverFaintLink": "#e44a0a", - "faint": "#304055", - "highlightFaintText": "#304055", - "selectedMenuFaintText": "#304055", - "selectedMenuPopoverFaintText": "#304055", - "highlightLightText": "#0c0f14", - "selectedMenuLightText": "#0c0f14", - "selectedMenuPopoverLightText": "#0c0f14", - "selectedMenuIcon": "#8995a3", - "selectedPost": "#e1eaf1", - "selectedPostText": "#304055", - "selectedPostIcon": "#8995a3", - "selectedPostLink": "#f55b1b", - "selectedPostFaintLink": "#f55b1b", - "highlightPostLink": "#f55b1b", - "selectedPostPostLink": "#e44a0a", - "selectedPostLightText": "#0c0f14", - "selectedPostFaintText": "#304055", - "popoverText": "#304055", - "popoverIcon": "#919ba7", - "popoverLink": "#e44a0a", - "postFaintLink": "#e44a0a", - "popoverPostFaintLink": "#f55b1b", - "popoverFaintLink": "#e44a0a", - "popoverFaintText": "#304055", - "popoverPostLink": "#f55b1b", - "popoverLightText": "#0c0f14", - "highlightIcon": "#8995a3", - "highlightPostFaintLink": "#f55b1b", - "profileTint": "#f2f6f9", - "profileBg": "#808992" - }, - "opacity": { - "underlay": 0.4, - "bg": 1, - "panel": 1, - "alert": 0.5, - "input": 0.5, - "btn": 1, - "faint": 0.5, - "border": 1, - "popover": 1, - "profileTint": 0.5 - }, - "radii": { - "btn": "3", - "input": "3", - "checkbox": 2, - "panel": "3", - "avatar": "3", - "avatarAlt": 50, - "tooltip": 2, - "attachment": "3" - }, - "fonts": { - "interface": { - "family": "sans-serif" - }, - "input": { - "family": "inherit" - }, - "post": { - "family": "inherit" - }, - "postCode": { - "family": "monospace" - } - } - }, "source": { "themeEngineVersion": 3, "fonts": {}, -- cgit v1.2.3-70-g09d2 From e4b18deece3dd211e70d8c48405f813fac95a926 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sat, 13 Jun 2020 13:16:53 +0300 Subject: fix redmond themes --- static/themes/redmond-xx-se.json | 4 +++- static/themes/redmond-xx.json | 4 +++- static/themes/redmond-xxi.json | 4 +++- 3 files changed, 9 insertions(+), 3 deletions(-) (limited to 'static/themes') diff --git a/static/themes/redmond-xx-se.json b/static/themes/redmond-xx-se.json index 7a4a29da..24480d2c 100644 --- a/static/themes/redmond-xx-se.json +++ b/static/themes/redmond-xx-se.json @@ -286,7 +286,9 @@ "cGreen": "#008000", "cOrange": "#808000", "highlight": "--accent", - "selectedPost": "--bg,-10" + "selectedPost": "--bg,-10", + "selectedMenu": "--accent", + "selectedMenuPopover": "--accent" }, "radii": { "btn": "0", diff --git a/static/themes/redmond-xx.json b/static/themes/redmond-xx.json index ff95b1e0..cf9010fe 100644 --- a/static/themes/redmond-xx.json +++ b/static/themes/redmond-xx.json @@ -277,7 +277,9 @@ "cGreen": "#008000", "cOrange": "#808000", "highlight": "--accent", - "selectedPost": "--bg,-10" + "selectedPost": "--bg,-10", + "selectedMenu": "--accent", + "selectedMenuPopover": "--accent" }, "radii": { "btn": "0", diff --git a/static/themes/redmond-xxi.json b/static/themes/redmond-xxi.json index f788bdb8..7fdc4a6d 100644 --- a/static/themes/redmond-xxi.json +++ b/static/themes/redmond-xxi.json @@ -259,7 +259,9 @@ "cGreen": "#669966", "cOrange": "#cc6633", "highlight": "--accent", - "selectedPost": "--bg,-10" + "selectedPost": "--bg,-10", + "selectedMenu": "--accent", + "selectedMenuPopover": "--accent" }, "radii": { "btn": "0", -- cgit v1.2.3-70-g09d2