commit: ace60689484a617e141ebb730c61b1550152f107 parent 5c6d29193ef24b19c8b3f76eabb05663e107571c Author: HJ <30-hj@users.noreply.git.pleroma.social> Date: Tue, 31 Dec 2024 11:59:54 +0000 Merge branch 'themes-updates' into 'develop' Themes updates/fixes See merge request pleroma/pleroma-fe!1962Diffstat:
20 files changed, 305 insertions(+), 152 deletions(-)diff --git a/changelog.d/color-schemes.add b/changelog.d/color-schemes.add@@ -0,0 +1 @@ +Some new default color schemesdiff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js@@ -10,14 +10,13 @@ export default { }, validInnerComponents: [ 'Text', + 'Link', 'Icon', 'Badge' ], defaultRules: [ { directives: { - background: '#ffffff', - opacity: 0, shadow: [] } },diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss@@ -6,10 +6,6 @@ color: var(--inputTopbarText, var(--inputText)); } - a { - color: var(--link); - } - .inner-nav { display: grid; grid-template-rows: var(--navbar-height); @@ -91,10 +87,6 @@ width: 2em; height: 100%; text-align: center; - - .svg-inline--fa { - color: var(--link); - } } .sitename {diff --git a/src/components/emoji_reactions/emoji_reactions.js b/src/components/emoji_reactions/emoji_reactions.js@@ -87,7 +87,10 @@ const EmojiReactions = { 'btn', 'button-default', 'emoji-reaction-count-button', - { '-picked-reaction': this.reactedWith(reaction.name) } + { + '-picked-reaction': this.reactedWith(reaction.name), + toggled: this.reactedWith(reaction.name) + } ], 'aria-label': this.$tc('status.reaction_count_label', reaction.count, { num: reaction.count }) }diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue@@ -10,7 +10,7 @@ v-bind="!loggedIn ? { href: remoteInteractionLink } : {}" role="button" class="emoji-reaction btn button-default" - :class="{ '-picked-reaction': reactedWith(reaction.name) }" + :class="{ '-picked-reaction': reactedWith(reaction.name), toggled: reactedWith(reaction.name) }" :title="reaction.url ? reaction.name : undefined" :aria-pressed="reactedWith(reaction.name)" @click="emojiOnClick(reaction.name, $event)"diff --git a/src/components/palette_editor/palette_editor.vue b/src/components/palette_editor/palette_editor.vue@@ -30,6 +30,8 @@ v-if="apply" class="btn button-default palette-apply-button" @click="applyPalette" + :disabled="disabled" + :class="{ disabled }" > {{ $t('settings.style.themes3.palette.apply') }} </button> @@ -67,7 +69,7 @@ const paletteKeys = [ 'wallpaper' ] -const props = defineProps(['modelValue', 'compact', 'apply']) +const props = defineProps(['modelValue', 'compact', 'apply', 'disabled']) const emit = defineEmits(['update:modelValue', 'applyPalette']) const getExportedObject = () => paletteKeys.reduce((acc, key) => { const value = props.modelValue[key]diff --git a/src/components/root.style.js b/src/components/root.style.js@@ -3,6 +3,11 @@ export default { selector: ':root', notEditable: true, validInnerComponents: [ + // These are purely for --parent--text et such to work + 'Text', + 'Link', + 'Border', + 'Underlay', 'Modals', 'Popover',diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js@@ -43,7 +43,7 @@ const AppearanceTab = { bundledPalettes: [], compilationCache: {}, fileImporter: newImporter({ - accept: '.json, .piss', + accept: '.json, .iss', validator: this.importValidator, onImport: this.onImport, parser: this.importParser, @@ -186,6 +186,9 @@ const AppearanceTab = { } }, computed: { + switchInProgress () { + return this.$store.state.interface.themeChangeInProgress + }, paletteDataUsed () { return this.$store.state.interface.paletteDataUsed }, @@ -302,14 +305,14 @@ const AppearanceTab = { importParser (file, filename) { if (filename.endsWith('.json')) { return JSON.parse(file) - } else if (filename.endsWith('.piss')) { + } else if (filename.endsWith('.iss')) { return deserialize(file) } }, onImport (parsed, filename) { if (filename.endsWith('.json')) { this.$store.dispatch('setThemeCustom', parsed.source || parsed.theme) - } else if (filename.endsWith('.piss')) { + } else if (filename.endsWith('.iss')) { this.$store.dispatch('setStyleCustom', parsed) } }, @@ -321,7 +324,7 @@ const AppearanceTab = { if (filename.endsWith('.json')) { const version = parsed._pleroma_theme_version return version >= 1 || version <= 2 - } else if (filename.endsWith('.piss')) { + } else if (filename.endsWith('.iss')) { if (!Array.isArray(parsed)) return false if (parsed.length < 1) return false if (parsed.find(x => x.component === '@meta') == null) return falsediff --git a/src/components/settings_modal/tabs/appearance_tab.scss b/src/components/settings_modal/tabs/appearance_tab.scss@@ -20,26 +20,47 @@ } } + h4 { + margin: 0.5em 0; + } + + .palettes-container { + height: 15em; + overflow-y: auto; + overflow-x: hidden; + scrollbar-gutter: stable; + border-radius: var(--roundness); + border: 1px solid var(--border); + margin: -0.5em; + } + .palettes { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0.5em; + padding: 0.5em; + width: 100%; - h4, - .unsupported-theme-v2, - .userPalette { + h4 { + margin: 0; grid-column: 1 / span 2; } } .palette-entry { - display: flex; + display: grid; + grid-template-columns: 1fr auto; align-items: center; justify-content: space-between; padding: 0 0.5em; + height: max-content; + + .palette-label { + height: auto; - .palette-label label { - text-align: center; + label { + text-align: center; + } } .palette-square { @@ -63,23 +84,26 @@ } .modal-view.-mobile & { + .palettes { + grid-template-columns: 1fr; + } + .palette-entry { - flex-wrap: wrap; + grid-column: 1; justify-content: center; } .palette-label { line-height: 1.5em; margin-top: 0.5em; - width: 100%; } + } - .palette-preview { - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; - grid-template-rows: 1em 1em; - margin-bottom: 0.5em; - } + .palette-preview { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-rows: 1em 1em; + margin: 0.5em 0; } .theme-list {diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue@@ -12,8 +12,9 @@ <button class="button-default theme-preview" data-theme-key="stock" - :class="{ toggled: isStyleActive('stock') }" @click="resetTheming" + :class="{ toggled: isStyleActive('stock'), disabled: switchInProgress }" + :disabled="switchInProgress" > <!-- eslint-disable vue/no-v-text-v-html-on-component --> <!-- eslint-disable vue/no-v-html --> @@ -56,8 +57,9 @@ :key="style.key" :data-theme-key="style.key" class="button-default theme-preview" - :class="{ toggled: isStyleActive(style.key) }" + :class="{ toggled: isStyleActive(style.key), disabled: switchInProgress }" @click="style.version === 'v2' ? setTheme(style.key) : setStyle(style.key)" + :disabled="switchInProgress" > <!-- eslint-disable vue/no-v-text-v-html-on-component --> <!-- eslint-disable vue/no-v-html --> @@ -80,6 +82,8 @@ <button class="btn button-default" @click="importFile" + :class="{ disabled: switchInProgress }" + :disabled="switchInProgress" > <FAIcon icon="folder-open" /> {{ $t('settings.style.themes3.editor.load_style') }} @@ -87,19 +91,25 @@ </div> <div class="setting-item"> <h2>{{ $t('settings.style.themes3.palette.label') }}</h2> - <div class="palettes"> - <template v-if="customThemeVersion === 'v3'"> - <h4>{{ $t('settings.style.themes3.palette.bundled') }}</h4> + <div + v-if="customThemeVersion === 'v3'" + class="palettes-container" + > + <h4 v-if="stylePalettes?.length > 0"> + {{ $t('settings.style.themes3.palette.style') }} + </h4> + <div class="palettes"> <button - v-for="p in bundledPalettes" + v-for="p in stylePalettes || []" :key="p.name" class="btn button-default palette-entry" - :class="{ toggled: isPaletteActive(p.key) }" + :class="{ toggled: isPaletteActive(p.key), disabled: switchInProgress }" + :disabled="switchInProgress" @click="() => setPalette(p.key, p)" > <div class="palette-label"> <label> - {{ p.name }} + {{ p.name ?? $t('settings.style.themes3.palette.user') }} </label> </div> <div class="palette-preview"> @@ -111,19 +121,18 @@ /> </div> </button> - <h4 v-if="stylePalettes?.length > 0"> - {{ $t('settings.style.themes3.palette.style') }} - </h4> + <h4>{{ $t('settings.style.themes3.palette.bundled') }}</h4> <button - v-for="p in stylePalettes || []" + v-for="p in bundledPalettes" :key="p.name" class="btn button-default palette-entry" - :class="{ toggled: isPaletteActive(p.key) }" + :class="{ toggled: isPaletteActive(p.key), disabled: switchInProgress }" + :disabled="switchInProgress" @click="() => setPalette(p.key, p)" > <div class="palette-label"> <label> - {{ p.name ?? $t('settings.style.themes3.palette.user') }} + {{ p.name }} </label> </div> <div class="palette-preview"> @@ -135,6 +144,10 @@ /> </div> </button> + </div> + </div> + <div> + <template v-if="customThemeVersion === 'v3'"> <h4 v-if="expertLevel > 0"> {{ $t('settings.style.themes3.palette.user') }} </h4> @@ -145,6 +158,7 @@ :compact="true" :apply="true" @applyPalette="data => setPaletteCustom(data)" + :disabled="switchInProgress" /> </template> <template v-else-if="customThemeVersion === 'v2'">diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js@@ -604,7 +604,7 @@ export default { const styleExporter = newExporter({ filename: () => exports.name.value ?? 'pleroma_theme', mime: 'text/plain', - extension: 'piss', + extension: 'iss', getExportedObject: () => exportStyleData.value }) @@ -636,7 +636,7 @@ export default { } const styleImporter = newImporter({ - accept: '.piss', + accept: '.iss', parser (string) { return deserialize(string) }, onImportFailure (result) { console.error('Failure importing style:', result)diff --git a/src/components/top_bar.style.js b/src/components/top_bar.style.js@@ -23,6 +23,27 @@ export default { alpha: 0.6 }] } + }, + { + component: 'Link', + parent: { + component: 'TopBar' + }, + directives: { + textColor: '--text' + } + }, + { + component: 'Icon', + parent: { + component: 'ButtonUnstyled', + parent: { + component: 'TopBar' + } + }, + directives: { + textColor: '--parent--text' + } } ] }diff --git a/src/modules/interface.js b/src/modules/interface.js@@ -10,6 +10,7 @@ const toValue = (x) => JSON.parse(JSON.stringify(x === undefined ? 'null' : x)) const defaultState = { localFonts: null, themeApplied: false, + themeChangeInProgress: false, themeVersion: 'v3', styleNameUsed: null, styleDataUsed: null, @@ -556,11 +557,13 @@ const interfaceMod = { themeDebug, theme3hacks } = rootState.config + state.themeChangeInProgress = true // If we're not not forced to recompile try using // cache (tryLoadCache return true if load successful) const forceRecompile = forceThemeRecompilation || recompile if (!forceRecompile && !themeDebug && await tryLoadCache()) { + state.themeChangeInProgress = false return commit('setThemeApplied') } window.splashUpdate('splash.theme') @@ -669,7 +672,9 @@ const interfaceMod = { return applyTheme( rulesetArray.flat(), () => commit('setThemeApplied'), - () => {}, + () => { + state.themeChangeInProgress = false + }, themeDebug ) } catch (e) {diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js@@ -1,4 +1,4 @@ -import { invertLightness, contrastRatio } from 'chromatism' +import { invertLightness, contrastRatio, convert } from 'chromatism' // useful for visualizing color when debugging export const consoleColor = (color) => console.log('%c##########', 'background: ' + color + '; color: ' + color) @@ -215,19 +215,37 @@ export const rgba2css = function (rgba) { * @param {Boolean} preserve - try to preserve intended text color's hue/saturation (i.e. no BW) */ export const getTextColor = function (bg, text, preserve) { - const contrast = getContrastRatio(bg, text) - - if (contrast < 4.5) { - const base = typeof text.a !== 'undefined' ? { a: text.a } : {} - const result = Object.assign(base, invertLightness(text).rgb) - if (!preserve && getContrastRatio(bg, result) < 4.5) { + const originalContrast = getContrastRatio(bg, text) + if (!preserve) { + if (originalContrast < 4.5) { // B&W return contrastRatio(bg, text).rgb } - // Inverted color - return result } - return text + + const originalColor = convert(text).hex + const invertedColor = invertLightness(originalColor).hex + const invertedContrast = getContrastRatio(bg, convert(invertedColor).rgb) + let workColor + + if (invertedContrast > originalContrast) { + workColor = invertedColor + } else { + workColor = originalColor + } + + let contrast = getContrastRatio(bg, text) + const result = convert(rgb2hex(workColor)).hsl + const delta = result.l > 50 ? 1 : -1 + const multiplier = 10 + while (contrast < 4.5 && result.l > 20 && result.l < 80) { + result.l += delta * multiplier + result.l = Math.min(100, Math.max(0, result.l)) + contrast = getContrastRatio(bg, convert(result).rgb) + } + + const base = typeof text.a !== 'undefined' ? { a: text.a } : {} + return Object.assign(convert(result).rgb, base) } /**diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js@@ -264,6 +264,7 @@ export const init = ({ const lowerLevelVirtualDirectivesRaw = computed[lowerLevelSelector]?.virtualDirectivesRaw const dynamicVars = computed[selector] || { + lowerLevelSelector, lowerLevelBackground, lowerLevelVirtualDirectives, lowerLevelVirtualDirectivesRaw @@ -284,6 +285,11 @@ export const init = ({ computed[selector].computedRule = computedRule computed[selector].dynamicVars = dynamicVars + // avoid putting more stuff into actual CSS + computed[selector].virtualDirectives = {} + // but still be able to access it i.e. from --parent + computed[selector].virtualDirectivesRaw = computed[lowerLevelSelector]?.virtualDirectivesRaw || {} + if (virtualComponents.has(combination.component)) { const virtualName = [ '--', @@ -330,8 +336,8 @@ export const init = ({ intendedTextColor, newTextRule.directives.textAuto === 'preserve' ) - const virtualDirectives = computed[lowerLevelSelector].virtualDirectives || {} - const virtualDirectivesRaw = computed[lowerLevelSelector].virtualDirectivesRaw || {} + const virtualDirectives = { ...(computed[lowerLevelSelector].virtualDirectives || {}) } + const virtualDirectivesRaw = { ...(computed[lowerLevelSelector].virtualDirectivesRaw || {}) } // Storing color data in lower layer to use as custom css properties virtualDirectives[virtualName] = getTextColorAlpha(newTextRule.directives, textColor, dynamicVars) @@ -345,12 +351,8 @@ export const init = ({ selector: cssSelector.split(/ /g).slice(0, -1).join(' '), ...combination, directives: {}, - virtualDirectives: { - [virtualName]: getTextColorAlpha(newTextRule.directives, textColor, dynamicVars) - }, - virtualDirectivesRaw: { - [virtualName]: textColor - } + virtualDirectives, + virtualDirectivesRaw } } else { computed[selector] = computed[selector] || {}diff --git a/static/palettes/index.json b/static/palettes/index.json@@ -23,10 +23,53 @@ "cRed": "#cc6666", "cBlue": "#8abeb7", "cGreen": "#b5bd68", - "cOrange": "#de935f", - "_cYellow": "#f0c674", - "_cPurple": "#b294bb" + "cOrange": "#de935f" + }, + "dracula": { + "name": "Dracula", + "bg": "#282A36", + "fg": "#44475A", + "link": "#BC92F9", + "text": "#f8f8f2", + "cRed": "#FF5555", + "cBlue": "#8BE9FD", + "cGreen": "#50FA7B", + "cOrange": "#FFB86C" }, "ir-black": [ "Ir Black", "#000000", "#242422", "#b5b3aa", "#ff6c60", "#FF6C60", "#A8FF60", "#96CBFE", "#FFFFB6" ], - "monokai": [ "Monokai", "#272822", "#383830", "#f8f8f2", "#f92672", "#F92672", "#a6e22e", "#66d9ef", "#f4bf75" ] + "monokai": [ "Monokai", "#272822", "#383830", "#f8f8f2", "#f92672", "#F92672", "#a6e22e", "#66d9ef", "#f4bf75" ], + "purple-stream": { + "name": "Purple stream", + "bg": "#17171A", + "fg": "#450F92", + "link": "#8769B4", + "text": "#C0C0C5", + "cRed": "#EB0300", + "cBlue": "#4656FF", + "cGreen": "#B0E020", + "cOrange": "#FF9046" + }, + "feud": { + "name": "Feud", + "bg": "#323337", + "fg": "#1D1E21", + "link": "#18A0E3", + "accent": "#6671E2", + "text": "#DBDDE0", + "cRed": "#E05053", + "cBlue": "#6671E2", + "cGreen": "#3A8D5D", + "cOrange": "#DCAA45" + }, + "constabulary": { + "name": "Constabulary", + "bg": "#FFFFFF", + "fg": "#3B5897", + "link": "#28487C", + "text": "#333333", + "cRed": "#FA3C4C", + "cBlue": "#0083FF", + "cGreen": "#44BDC6", + "cOrange": "#FFC200" + } }diff --git a/static/styles/Breezy DX.iss b/static/styles/Breezy DX.iss@@ -0,0 +1,101 @@ +@meta { + name: Breezy DX; + author: HJ; + license: WTFPL; + website: ebin.club; +} + +@palette.Dark { + bg: #292C32; + fg: #292C32; + text: #ffffff; + link: #1CA4F3; + accent: #1CA4F3; + cRed: #f41a51; + cBlue: #1CA4F3; + cGreen: #1af46e; + cOrange: #f4af1a; +} + +@palette.Light { + bg: #EFF0F2; + fg: #EFF0F2; + text: #1B1F22; + underlay: #5d6086; + accent: #1CA4F3; + cBlue: #1CA4F3; + cRed: #f41a51; + cGreen: #1af46e; + cOrange: #f4af1a; + border: #d8e6f9; + link: #1CA4F3; +} + +@palette.Panda { + bg: #EFF0F2; + fg: #292C32; + text: #1B1F22; + link: #1CA4F3; + accent: #1CA4F3; + cRed: #f41a51; + cBlue: #1CA4F3; + cGreen: #1af46e; + cOrange: #f4af1a; +} + +Root { + --badgeNotification: color | --cRed; + --buttonDefaultHoverGlow: shadow | inset 0 0 0 1 --accent / 1; + --buttonDefaultFocusGlow: shadow | inset 0 0 0 1 --accent / 1; + --buttonDefaultShadow: shadow | inset 0 0 0 1 --parent--text / 0.35, 0 5 5 -5 #000000 / 0.35; + --buttonDefaultBevel: shadow | inset 0 14 14 -14 #FFFFFF / 0.1; + --buttonPressedBevel: shadow | inset 0 -20 20 -20 #000000 / 0.05; + --defaultInputBevel: shadow | inset 0 0 0 1 --parent--text / 0.35; + --defaultInputHoverGlow: shadow | 0 0 0 1 --accent / 1; + --defaultInputFocusGlow: shadow | 0 0 0 1 --link / 1; +} + +Button:disabled { + shadow: --buttonDefaultBevel, --buttonDefaultShadow +} + +Button:hover { + shadow: --buttonDefaultHoverGlow, --buttonDefaultBevel, --buttonDefaultShadow +} + +Button:toggled { + background: $blend(--bg 0.3 --accent) +} + +Button:pressed { + background: $blend(--bg 0.8 --accent) +} + +Button:pressed:toggled { + background: $blend(--bg 0.2 --accent) +} + +Button:toggled:hover { + background: $blend(--bg 0.3 --accent) +} + +Button { + background: --parent; +} + +Input { + shadow: --defaultInputBevel; + background: --parent; +} + +PanelHeader { + shadow: inset 0 30 30 -30 #ffffff / 0.25 +} + +Tab:hover { + shadow: --buttonDefaultHoverGlow, --buttonDefaultBevel, --buttonDefaultShadow +} + +Tab { + background: --parent; +}diff --git a/static/styles/Breezy DX.piss b/static/styles/Breezy DX.piss@@ -1,80 +0,0 @@ -@meta { - name: Breezy DX; - author: HJ; - license: WTFPL; - website: ebin.club; -} - -@palette.Dark { - bg: #292C32; - fg: #292C32; - text: #ffffff; - link: #1CA4F3; - accent: #1CA4F3; - cRed: #f41a51; - cBlue: #1CA4F3; - cGreen: #1af46e; - cOrange: #f4af1a; -} - -@palette.Light { - bg: #EFF0F2; - fg: #EFF0F2; - text: #1B1F22; - underlay: #5d6086; - accent: #1CA4F3; - cBlue: #1CA4F3; - cRed: #f41a51; - cGreen: #1af46e; - cOrange: #f4af1a; - border: #d8e6f9; - link: #1CA4F3; -} - -Root { - --badgeNotification: color | --cRed; - --buttonDefaultHoverGlow: shadow | inset 0 0 0 1 --accent / 1; - --buttonDefaultFocusGlow: shadow | inset 0 0 0 1 --accent / 1; - --buttonDefaultShadow: shadow | inset 0 0 0 1 --text / 0.35, 0 5 5 -5 #000000 / 0.35; - --buttonDefaultBevel: shadow | inset 0 14 14 -14 #FFFFFF / 0.1; - --buttonPressedBevel: shadow | inset 0 -20 20 -20 #000000 / 0.05; - --defaultInputBevel: shadow | inset 0 0 0 1 --text / 0.35; - --defaultInputHoverGlow: shadow | 0 0 0 1 --accent / 1; - --defaultInputFocusGlow: shadow | 0 0 0 1 --link / 1; -} - -Button:disabled { - shadow: --buttonDefaultBevel, --buttonDefaultShadow -} - -Button:hover { - shadow: --buttonDefaultHoverGlow, --buttonDefaultBevel, --buttonDefaultShadow -} - -Button:toggled { - background: $blend(--bg 0.3 --accent) -} - -Button:pressed { - background: $blend(--bg 0.8 --accent) -} - -Button:pressed:toggled { - background: $blend(--bg 0.2 --accent) -} - -Button:toggled:hover { - background: $blend(--bg 0.3 --accent) -} - -Input { - shadow: --defaultInputBevel -} - -PanelHeader { - shadow: inset 0 30 30 -30 #ffffff / 0.25 -} - -Tab:hover { - shadow: --buttonDefaultHoverGlow, --buttonDefaultBevel, --buttonDefaultShadow -}diff --git a/static/styles/Redmond DX.piss b/static/styles/Redmond DX.issdiff --git a/static/styles/index.json b/static/styles/index.json@@ -1,4 +1,4 @@ { - "RedmondDX": "/static/styles/Redmond DX.piss", - "BreezyDX": "/static/styles/Breezy DX.piss" + "RedmondDX": "/static/styles/Redmond DX.iss", + "BreezyDX": "/static/styles/Breezy DX.iss" }