From 6bf6d102ef56cafd880bdbe732ae3f2300464d9a Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 24 Dec 2024 16:24:13 +0200 Subject: [PATCH 01/18] Breezy theme update + proper iheritance of virtual directives --- src/components/root.style.js | 5 ++++ .../theme_data/theme_data_3.service.js | 15 +++++------ static/styles/Breezy DX.piss | 27 ++++++++++++++++--- 3 files changed, 36 insertions(+), 11 deletions(-) diff --git a/src/components/root.style.js b/src/components/root.style.js index 25b2b6653..9ad614c78 100644 --- 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/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js index 9de47a7d8..04a6dfbbd 100644 --- 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 @@ -283,6 +284,8 @@ export const init = ({ computed[selector] = computed[selector] || {} computed[selector].computedRule = computedRule computed[selector].dynamicVars = dynamicVars + computed[selector].virtualDirectives = computed[lowerLevelSelector]?.virtualDirectives || {} + computed[selector].virtualDirectivesRaw = computed[lowerLevelSelector]?.virtualDirectivesRaw || {} if (virtualComponents.has(combination.component)) { const virtualName = [ @@ -330,8 +333,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 +348,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/styles/Breezy DX.piss b/static/styles/Breezy DX.piss index 0203fec24..fcaa7a8eb 100644 --- a/static/styles/Breezy DX.piss +++ b/static/styles/Breezy DX.piss @@ -31,14 +31,26 @@ 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 --text / 0.35, 0 5 5 -5 #000000 / 0.35; + --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 --text / 0.35; + --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; } @@ -67,8 +79,13 @@ Button:toggled:hover { background: $blend(--bg 0.3 --accent) } +Button { + background: --parent; +} + Input { - shadow: --defaultInputBevel + shadow: --defaultInputBevel; + background: --parent; } PanelHeader { @@ -78,3 +95,7 @@ PanelHeader { Tab:hover { shadow: --buttonDefaultHoverGlow, --buttonDefaultBevel, --buttonDefaultShadow } + +Tab { + background: --parent; +} From 6a1a3ebf13f1869d652669b424fbbf72749a4559 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 26 Dec 2024 23:45:43 +0200 Subject: [PATCH 02/18] update to palettes GUI + disable theme-setting stuff while change is in progress --- .../palette_editor/palette_editor.vue | 4 +- .../settings_modal/tabs/appearance_tab.js | 3 + .../settings_modal/tabs/appearance_tab.scss | 30 +++-- .../settings_modal/tabs/appearance_tab.vue | 110 ++++++++++-------- src/modules/interface.js | 7 +- 5 files changed, 94 insertions(+), 60 deletions(-) diff --git a/src/components/palette_editor/palette_editor.vue b/src/components/palette_editor/palette_editor.vue index e5ae2000f..3d43b7464 100644 --- 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') }} @@ -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/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js index 3d03af457..c2b6fa24f 100644 --- a/src/components/settings_modal/tabs/appearance_tab.js +++ b/src/components/settings_modal/tabs/appearance_tab.js @@ -186,6 +186,9 @@ const AppearanceTab = { } }, computed: { + switchInProgress () { + return this.$store.state.interface.themeChangeInProgress + }, paletteDataUsed () { return this.$store.state.interface.paletteDataUsed }, diff --git a/src/components/settings_modal/tabs/appearance_tab.scss b/src/components/settings_modal/tabs/appearance_tab.scss index 596c674fa..26ab2f788 100644 --- a/src/components/settings_modal/tabs/appearance_tab.scss +++ b/src/components/settings_modal/tabs/appearance_tab.scss @@ -20,14 +20,25 @@ } } + h4 { + margin: 0.5em 0; + } + .palettes { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0.5em; + height: 15em; + overflow-y: auto; + overflow-x: hidden; + scrollbar-gutter: stable; + border-radius: var(--roundness); + border: 1px solid var(--border); + margin: -0.5em; + padding: 0.5em; - h4, - .unsupported-theme-v2, - .userPalette { + h4 { + margin: 0; grid-column: 1 / span 2; } } @@ -37,6 +48,7 @@ align-items: center; justify-content: space-between; padding: 0 0.5em; + height: 2.5em; .palette-label label { text-align: center; @@ -73,13 +85,13 @@ 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 index a44cc1a70..bd82643f5 100644 --- a/src/components/settings_modal/tabs/appearance_tab.vue +++ b/src/components/settings_modal/tabs/appearance_tab.vue @@ -12,8 +12,9 @@ +

{{ $t('settings.style.themes3.palette.bundled') }}

+ + +