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'],