removed one color TODO

This commit is contained in:
Henry Jameson 2020-01-28 02:03:21 +02:00
parent 53a15eec7d
commit b63e679a31
5 changed files with 47 additions and 12 deletions

View file

@ -137,6 +137,8 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
--btnText: var(--popoverText, $fallback--text);
&-icon { &-icon {
padding-left: 0.5rem; padding-left: 0.5rem;

View file

@ -257,14 +257,6 @@
:show-optional-tickbox="typeof accentColorLocal !== 'undefined'" :show-optional-tickbox="typeof accentColorLocal !== 'undefined'"
/> />
<ContrastRatio :contrast="previewContrast.bgPostLink" /> <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> <h4>{{ $t('settings.style.advanced_colors.alert') }}</h4>
<ColorInput <ColorInput
v-model="alertErrorColorLocal" v-model="alertErrorColorLocal"
@ -298,6 +290,27 @@
:contrast="previewContrast.alertWarningText" :contrast="previewContrast.alertWarningText"
large="true" 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>
<div class="color-item"> <div class="color-item">
<h4>{{ $t('settings.style.advanced_colors.badge') }}</h4> <h4>{{ $t('settings.style.advanced_colors.badge') }}</h4>

View file

@ -465,14 +465,13 @@
color: var(--text, $fallback--text); color: var(--text, $fallback--text);
} }
// TODO use proper colors
.staff { .staff {
flex: none; flex: none;
text-transform: capitalize; text-transform: capitalize;
color: $fallback--text; color: $fallback--text;
color: var(--btnText, $fallback--text); color: var(--alertNeutralText, $fallback--text);
background-color: $fallback--fg; background-color: $fallback--fg;
background-color: var(--btn, $fallback--fg); background-color: var(--alertNeutral, $fallback--fg);
} }
} }

View file

@ -441,7 +441,10 @@
"alert": "Alert background", "alert": "Alert background",
"alert_error": "Error", "alert_error": "Error",
"alert_warning": "Warning", "alert_warning": "Warning",
"alert_neutral": "Neutral",
"post": "Posts/User bios",
"badge": "Badge background", "badge": "Badge background",
"popover": "Tooltips, menus, popovers",
"badge_notification": "Notification", "badge_notification": "Notification",
"panel_header": "Panel header", "panel_header": "Panel header",
"top_bar": "Top bar", "top_bar": "Top bar",

View file

@ -1,4 +1,4 @@
import { brightness } from 'chromatism' import { invertLightness, brightness } from 'chromatism'
import { alphaBlend, mixrgb } from '../color_convert/color_convert.js' import { alphaBlend, mixrgb } from '../color_convert/color_convert.js'
/* This is a definition of all layer combinations /* This is a definition of all layer combinations
* each key is a topmost layer, each value represents layer underneath * each key is a topmost layer, each value represents layer underneath
@ -574,6 +574,24 @@ export const SLOT_INHERITANCE = {
textColor: true 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', badgeNotification: '--cRed',
badgeNotificationText: { badgeNotificationText: {
depends: ['text', 'badgeNotification'], depends: ['text', 'badgeNotification'],