diff --git a/src/components/popper/popper.scss b/src/components/popper/popper.scss
index 8e2dcd55..99b7e6fc 100644
--- a/src/components/popper/popper.scss
+++ b/src/components/popper/popper.scss
@@ -137,6 +137,8 @@
width: 100%;
height: 100%;
+ --btnText: var(--popoverText, $fallback--text);
+
&-icon {
padding-left: 0.5rem;
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 0b3b0fbf..9de3a96c 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -257,14 +257,6 @@
:show-optional-tickbox="typeof accentColorLocal !== 'undefined'"
/>
-
-
{{ $t('settings.style.advanced_colors.alert') }}
+
+
+
+
{{ $t('settings.style.advanced_colors.badge') }}
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 72656435..3988ff1c 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -465,14 +465,13 @@
color: var(--text, $fallback--text);
}
- // TODO use proper colors
.staff {
flex: none;
text-transform: capitalize;
color: $fallback--text;
- color: var(--btnText, $fallback--text);
+ color: var(--alertNeutralText, $fallback--text);
background-color: $fallback--fg;
- background-color: var(--btn, $fallback--fg);
+ background-color: var(--alertNeutral, $fallback--fg);
}
}
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 81dde663..06cc12f0 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -441,7 +441,10 @@
"alert": "Alert background",
"alert_error": "Error",
"alert_warning": "Warning",
+ "alert_neutral": "Neutral",
+ "post": "Posts/User bios",
"badge": "Badge background",
+ "popover": "Tooltips, menus, popovers",
"badge_notification": "Notification",
"panel_header": "Panel header",
"top_bar": "Top bar",
diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js
index 74e6fc1c..354009ee 100644
--- a/src/services/theme_data/pleromafe.js
+++ b/src/services/theme_data/pleromafe.js
@@ -1,4 +1,4 @@
-import { brightness } from 'chromatism'
+import { invertLightness, brightness } from 'chromatism'
import { alphaBlend, mixrgb } from '../color_convert/color_convert.js'
/* This is a definition of all layer combinations
* each key is a topmost layer, each value represents layer underneath
@@ -574,6 +574,24 @@ export const SLOT_INHERITANCE = {
textColor: true
},
+ alertNeutral: {
+ depends: ['text'],
+ opacity: 'alert'
+ },
+ alertNeutralText: {
+ depends: ['text'],
+ layer: 'alert',
+ variant: 'alertNeutral',
+ color: (mod, text) => invertLightness(text).rgb,
+ textColor: true
+ },
+ alertNeutralPanelText: {
+ depends: ['panelText'],
+ layer: 'alertPanel',
+ variant: 'alertNeutral',
+ textColor: true
+ },
+
badgeNotification: '--cRed',
badgeNotificationText: {
depends: ['text', 'badgeNotification'],