From 34f2a306889b5b02b3a89efe12872549a9d4e2e0 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 30 Dec 2024 03:16:29 +0200 Subject: [PATCH 1/4] changelog --- changelog.d/color-schemes.add | 1 + 1 file changed, 1 insertion(+) create mode 100644 changelog.d/color-schemes.add diff --git a/changelog.d/color-schemes.add b/changelog.d/color-schemes.add new file mode 100644 index 000000000..5410730e1 --- /dev/null +++ b/changelog.d/color-schemes.add @@ -0,0 +1 @@ +Some new default color schemes From 5bb9ceaf942420ed0bdd3b7680f84e442f9bb362 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 30 Dec 2024 03:18:45 +0200 Subject: [PATCH 2/4] no more piss --- src/components/settings_modal/tabs/appearance_tab.js | 8 ++++---- src/components/settings_modal/tabs/style_tab/style_tab.js | 4 ++-- static/styles/{Breezy DX.piss => Breezy DX.iss} | 0 static/styles/{Redmond DX.piss => Redmond DX.iss} | 0 static/styles/index.json | 4 ++-- 5 files changed, 8 insertions(+), 8 deletions(-) rename static/styles/{Breezy DX.piss => Breezy DX.iss} (100%) rename static/styles/{Redmond DX.piss => Redmond DX.iss} (100%) diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js index c2b6fa24f..fe2001af5 100644 --- 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, @@ -305,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) } }, @@ -324,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 false diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js index d38915c09..b51ce5307 100644 --- 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/static/styles/Breezy DX.piss b/static/styles/Breezy DX.iss similarity index 100% rename from static/styles/Breezy DX.piss rename to static/styles/Breezy DX.iss diff --git a/static/styles/Redmond DX.piss b/static/styles/Redmond DX.iss similarity index 100% rename from static/styles/Redmond DX.piss rename to static/styles/Redmond DX.iss diff --git a/static/styles/index.json b/static/styles/index.json index 52365cd3c..6c1dd1676 100644 --- 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" } From d84c30480bb3f0f2c8087c51f92b74f6e844482c Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 30 Dec 2024 16:02:37 +0200 Subject: [PATCH 3/4] don't spam same directives for virtual components --- src/components/button_unstyled.style.js | 3 +-- src/services/theme_data/theme_data_3.service.js | 4 ++-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js index a4f0f6f99..4142f9a3c 100644 --- 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/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js index 04a6dfbbd..fd088e88a 100644 --- a/src/services/theme_data/theme_data_3.service.js +++ b/src/services/theme_data/theme_data_3.service.js @@ -284,8 +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 || {} + computed[selector].virtualDirectives = {} + computed[selector].virtualDirectivesRaw = {} if (virtualComponents.has(combination.component)) { const virtualName = [ From fd8478df1e9ec9b9ceeb7eed414354792218b02f Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 30 Dec 2024 16:32:25 +0200 Subject: [PATCH 4/4] much better getTextColor function --- src/services/color_convert/color_convert.js | 37 +++++++++++++++------ 1 file changed, 27 insertions(+), 10 deletions(-) diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js index d92bbbe05..8a0531be6 100644 --- 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) @@ -187,19 +187,36 @@ 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, invertedColor) + 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 += delta * multiplier + contrast = getContrastRatio(bg, result) + } + + const base = typeof text.a !== 'undefined' ? { a: text.a } : {} + return Object.assign(base, result) } /**