diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/popper/popper.scss | 2 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.vue | 29 | ||||
| -rw-r--r-- | src/components/user_card/user_card.vue | 5 | ||||
| -rw-r--r-- | src/i18n/en.json | 3 | ||||
| -rw-r--r-- | src/services/theme_data/pleromafe.js | 20 |
5 files changed, 47 insertions, 12 deletions
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'" /> <ContrastRatio :contrast="previewContrast.bgPostLink" /> - <ColorInput - v-model="iconColorLocal" - name="iconColor" - :fallback="previewTheme.colors.accent" - :label="$t('settings.links')" - :show-optional-tickbox="typeof accentColorLocal !== 'undefined'" - /> - <ContrastRatio :contrast="previewContrast.bgIcon" /> <h4>{{ $t('settings.style.advanced_colors.alert') }}</h4> <ColorInput v-model="alertErrorColorLocal" @@ -298,6 +290,27 @@ :contrast="previewContrast.alertWarningText" large="true" /> + <ColorInput + v-model="alertNeutralColorLocal" + name="alertNeutral" + :label="$t('settings.style.advanced_colors.alert_neutral')" + :fallback="previewTheme.colors.alertNeutral" + /> + <ColorInput + v-model="alertNeutralTextColorLocal" + name="alertNeutralText" + :label="$t('settings.text')" + :fallback="previewTheme.colors.alertNeutralText" + /> + <ContrastRatio + :contrast="previewContrast.alertNeutralText" + large="true" + /> + <OpacityInput + v-model="alertOpacityLocal" + name="alertOpacity" + :fallback="previewTheme.opacity.alert" + /> </div> <div class="color-item"> <h4>{{ $t('settings.style.advanced_colors.badge') }}</h4> 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'], |