diff --git a/src/App.scss b/src/App.scss
index 85fd0b47a..9f37ff126 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -179,7 +179,7 @@ input, textarea, .select, .input {
right: 5px;
height: 100%;
color: $fallback--text;
- color: var(--text, $fallback--text);
+ color: var(--inputText, $fallback--text);
line-height: 28px;
z-index: 0;
pointer-events: none;
@@ -254,7 +254,7 @@ input, textarea, .select, .input {
display: none;
&:checked + label::before {
color: $fallback--text;
- color: var(--text, $fallback--text);
+ color: var(--inputText, $fallback--text);
}
&:disabled {
&,
diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index 1113f81d8..03375b2fa 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -87,13 +87,13 @@ export default {
&:checked + .checkbox-indicator::before {
color: $fallback--text;
- color: var(--text, $fallback--text);
+ color: var(--inputText, $fallback--text);
}
&:indeterminate + .checkbox-indicator::before {
content: '–';
color: $fallback--text;
- color: var(--text, $fallback--text);
+ color: var(--inputText, $fallback--text);
}
}
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index a3f9b4885..705a60a25 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -430,6 +430,20 @@
:label="$t('settings.text')"
/>
+
+
+
+
{{ $t('settings.style.advanced_colors.pressed') }}
+
+
+
+
{{ $t('settings.style.advanced_colors.disabled') }}
+
+
+
+
{{ $t('settings.style.advanced_colors.toggled') }}
+
+
+
+
+
{{ $t('settings.style.advanced_colors.tabs') }}
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 4efa41c37..771805e96 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -472,6 +472,7 @@
"selectedPost": "Selected post",
"selectedMenu": "Selected menu item",
"disabled": "Disabled",
+ "toggled": "Toggled",
"tabs": "Tabs"
},
"radii": {
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 533145d47..b9a23ad73 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -114,10 +114,7 @@ export const generateColors = (themeData) => {
? colors2to3(themeData.colors || themeData)
: themeData.colors || themeData
- const isLightOnDark = convert(sourceColors.bg).hsl.l < convert(sourceColors.text).hsl.l
- const mod = isLightOnDark ? 1 : -1
-
- const { colors, opacity } = getColors(sourceColors, themeData.opacity || {}, mod)
+ const { colors, opacity } = getColors(sourceColors, themeData.opacity || {})
const htmlColors = Object.entries(colors)
.reduce((acc, [k, v]) => {
@@ -381,25 +378,17 @@ export const getThemes = () => {
}
export const colors2to3 = (colors) => {
return Object.entries(colors).reduce((acc, [slotName, color]) => {
- const btnStates = ['', 'Pressed', 'Disabled', 'Toggled']
const btnPositions = ['', 'Panel', 'TopBar']
switch (slotName) {
case 'lightBg':
return { ...acc, highlight: color }
- case 'btn':
- return {
- ...acc,
- ...btnStates.reduce((stateAcc, state) => ({ ...stateAcc, ['btn' + state]: color }), {})
- }
case 'btnText':
return {
...acc,
...btnPositions
- .map(position => btnStates.map(state => state + position))
- .flat()
.reduce(
- (statePositionAcc, statePosition) =>
- ({ ...statePositionAcc, ['btn' + statePosition + 'Text']: color })
+ (statePositionAcc, position) =>
+ ({ ...statePositionAcc, ['btn' + position + 'Text']: color })
, {}
)
}
diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js
index 354009ee9..98fba5ef1 100644
--- a/src/services/theme_data/pleromafe.js
+++ b/src/services/theme_data/pleromafe.js
@@ -85,6 +85,8 @@ export const SLOT_INHERITANCE = {
},
text: {
depends: [],
+ layer: 'bg',
+ opacity: null,
priority: 1
},
underlay: {
@@ -422,6 +424,7 @@ export const SLOT_INHERITANCE = {
// Buttons
btn: {
depends: ['fg'],
+ variant: 'btn',
opacity: 'btn'
},
btnText: {
@@ -430,20 +433,23 @@ export const SLOT_INHERITANCE = {
textColor: true
},
btnPanelText: {
- depends: ['panelText'],
+ depends: ['btnText'],
layer: 'btnPanel',
variant: 'btn',
textColor: true
},
btnTopBarText: {
- depends: ['topBarText'],
+ depends: ['btnText'],
layer: 'btnTopBar',
variant: 'btn',
textColor: true
},
// Buttons: pressed
- btnPressed: '--btn',
+ btnPressed: {
+ depends: ['btn'],
+ layer: 'btn'
+ },
btnPressedText: {
depends: ['btnText'],
layer: 'btn',
@@ -451,7 +457,8 @@ export const SLOT_INHERITANCE = {
textColor: true
},
btnPressedPanel: {
- depends: ['btnPressed']
+ depends: ['btnPressed'],
+ layer: 'btn'
},
btnPressedPanelText: {
depends: ['btnPanelText'],
@@ -469,6 +476,7 @@ export const SLOT_INHERITANCE = {
// Buttons: toggled
btnToggled: {
depends: ['btn'],
+ layer: 'btn',
color: (mod, btn) => brightness(mod * 20, btn).rgb
},
btnToggledText: {
@@ -496,25 +504,22 @@ export const SLOT_INHERITANCE = {
color: (mod, btn, bg) => alphaBlend(btn, 0.5, bg)
},
btnDisabledText: {
- depends: ['btnText'],
+ depends: ['btnText', 'btnDisabled'],
layer: 'btn',
variant: 'btnDisabled',
- textColor: true,
- color: (mod, text) => brightness(mod * -60, text).rgb
+ color: (mod, text, btn) => alphaBlend(text, 0.5, btn)
},
btnDisabledPanelText: {
- depends: ['btnPanelText'],
+ depends: ['btnPanelText', 'btnDisabled'],
layer: 'btnPanel',
variant: 'btnDisabled',
- textColor: true,
- color: (mod, text) => brightness(mod * -60, text).rgb
+ color: (mod, text, btn) => alphaBlend(text, 0.5, btn)
},
btnDisabledTopBarText: {
- depends: ['btnTopBarText'],
+ depends: ['btnTopBarText', 'btnDisabled'],
layer: 'btnTopBar',
variant: 'btnDisabled',
- textColor: true,
- color: (mod, text) => brightness(mod * -60, text).rgb
+ color: (mod, text, btn) => alphaBlend(text, 0.5, btn)
},
// Input fields
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index 49b991483..e9ed3781f 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -255,14 +255,17 @@ export const computeDynamicColor = (sourceColor, getColor, mod) => {
}
/**
- * THE function you want to use. Takes provided colors and opacities, mod
+ * THE function you want to use. Takes provided colors and opacities
* value and uses inheritance data to figure out color needed for the slot.
*/
-export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.reduce(({ colors, opacity }, key) => {
+export const getColors = (sourceColors, sourceOpacity) => SLOT_ORDERED.reduce(({ colors, opacity }, key) => {
const value = SLOT_INHERITANCE[key]
const isObject = typeof value === 'object'
const isString = typeof value === 'string'
const sourceColor = sourceColors[key]
+ const variant = value.variant || value.layer || 'bg'
+ const isLightOnDark = relativeLuminance(colors[variant] || sourceColors[variant]) < 0.5
+ const mod = isLightOnDark ? 1 : -1
let outputColor = null
if (sourceColor) {
// Color is defined in source color
@@ -318,7 +321,7 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu
opacity
)
)
- const isLightOnDark = relativeLuminance(bg) > 127
+ const isLightOnDark = relativeLuminance(bg) > 0.5
const mod = isLightOnDark ? 1 : -1
if (value.textColor === 'bw') {