Let accent color be configurable

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
improve-ci
marcin mikołajczak 2022-02-24 18:28:52 +01:00
rodzic dc979a8039
commit 5b3f7c1cdc
9 zmienionych plików z 40 dodań i 10 usunięć

Wyświetl plik

@ -40,6 +40,7 @@ export const makeDefaultConfig = features => {
logo: '',
banner: '',
brandColor: '', // Empty
accentColor: '',
customCss: ImmutableList(),
promoPanel: ImmutableMap({
items: ImmutableList(),

Wyświetl plik

@ -64,6 +64,7 @@ const mapStateToProps = (state) => {
// In demo mode, force the default brand color
const brandColor = settings.get('demo') ? '#0482d8' : soapboxConfig.get('brandColor');
const accentColor = settings.get('demo') ? null : soapboxConfig.get('accentColor');
return {
showIntroduction,
@ -75,7 +76,7 @@ const mapStateToProps = (state) => {
dyslexicFont: settings.get('dyslexicFont'),
demetricator: settings.get('demetricator'),
locale: validLocale(locale) ? locale : 'en',
themeCss: generateThemeCss(brandColor),
themeCss: generateThemeCss(brandColor, accentColor),
brandColor: soapboxConfig.get('brandColor'),
themeMode: settings.get('themeMode'),
halloween: settings.get('halloween'),

Wyświetl plik

@ -3,7 +3,7 @@ import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { defaultSettings } from 'soapbox/actions/settings';
import { brandColorToCSS } from 'soapbox/utils/theme';
import { themeColorsToCSS } from 'soapbox/utils/theme';
export default function SitePreview({ soapbox }) {
@ -20,7 +20,7 @@ export default function SitePreview({ soapbox }) {
return (
<div className={bodyClass}>
<style>{`.site-preview {${brandColorToCSS(soapbox.get('brandColor'))}}`}</style>
<style>{`.site-preview {${themeColorsToCSS(soapbox.get('brandColor'), soapbox.get('accentColor'))}}`}</style>
<div className='app-holder'>
<div>
<div className='ui'>

Wyświetl plik

@ -235,6 +235,12 @@ class SoapboxConfig extends ImmutablePureComponent {
value={soapbox.get('brandColor')}
onChange={this.handleChange(['brandColor'], (e) => e.hex)}
/>
<ColorWithPicker
buttonId='accent_color'
label={<FormattedMessage id='soapbox_config.fields.accent_color_label' defaultMessage='Accent color' />}
value={soapbox.get('accentColor')}
onChange={this.handleChange(['accentColor'], (e) => e.hex)}
/>
<div className='input with_label toggle'>
<div className='label_input'>
<label><FormattedMessage id='soapbox_config.fields.theme_label' defaultMessage='Default theme' /></label>

Wyświetl plik

@ -856,6 +856,7 @@
"soapbox_config.crypto_donate_panel_limit.meta_fields.limit_placeholder": "Liczba elementów do wyświetlenia w widżecie krypto na stronie głównej",
"soapbox_config.custom_css.meta_fields.url_placeholder": "Adres URL",
"soapbox_config.display_fqn_label": "Wyświetlaj domenę (np. @użytkownik@domena) dla lokalnych kont.",
"soapbox_config.fields.accent_color_label": "Kolor akcentu",
"soapbox_config.fields.brand_color_label": "Kolor marki",
"soapbox_config.fields.crypto_address.add": "Dodaj nowy adres krypto",
"soapbox_config.fields.crypto_addresses_label": "Adresy kryptowalut",

Wyświetl plik

@ -844,6 +844,7 @@
"soapbox_config.crypto_donate_panel_limit.meta_fields.limit_placeholder": "Number of items to display in the crypto homepage widget",
"soapbox_config.custom_css.meta_fields.url_placeholder": "URL",
"soapbox_config.display_fqn_label": "Display domain (eg @user@domain) for local accounts.",
"soapbox_config.fields.accent_color_label": "Акцентний колір",
"soapbox_config.fields.brand_color_label": "Brand color",
"soapbox_config.fields.crypto_address.add": "Add new crypto address",
"soapbox_config.fields.crypto_addresses_label": "Cryptocurrency addresses",

Wyświetl plik

@ -1,8 +1,8 @@
import { Map as ImmutableMap } from 'immutable';
export const generateThemeCss = brandColor => {
export const generateThemeCss = (brandColor, accentColor) => {
if (!brandColor) return null;
return themeDataToCss(brandColorToThemeData(brandColor));
return themeDataToCss(brandColorToThemeData(brandColor).merge(accentColorToThemeData(brandColor, accentColor)));
};
// https://stackoverflow.com/a/5624139
@ -74,10 +74,29 @@ export const brandColorToThemeData = brandColor => {
});
};
export const accentColorToThemeData = (brandColor, accentColor) => {
if (accentColor) {
const { h, s, l } = rgbToHsl(hexToRgb(accentColor));
return ImmutableMap({
'accent-color_h': h,
'accent-color_s': `${s}%`,
'accent-color_l': `${l}%`,
});
}
const { h } = rgbToHsl(hexToRgb(brandColor));
return ImmutableMap({
'accent-color_h': h - 15,
'accent-color_s': '86%',
'accent-color_l': '44%',
});
};
export const themeDataToCss = themeData => (
themeData
.entrySeq()
.reduce((acc, cur) => acc + `--${cur[0]}:${cur[1]};`, '')
);
export const brandColorToCSS = brandColor => themeDataToCss(brandColorToThemeData(brandColor));
export const themeColorsToCSS = (brandColor, accentColor) => themeDataToCss(brandColorToThemeData(brandColor).merge(accentColorToThemeData(brandColor, accentColor)));

Wyświetl plik

@ -418,6 +418,10 @@ code {
margin-bottom: 10px;
margin-right: 10px;
&#accent_color {
background: var(--accent-color);
}
&:last-child {
margin-right: 0;
}
@ -510,7 +514,7 @@ code {
.label_input {
&__color {
display: inline-flex;
display: flex;
font-size: 14px;
.color-swatch {

Wyświetl plik

@ -41,9 +41,6 @@ body,
--background-color_hsl: var(--background-color_h), var(--background-color_s), var(--background-color_l);
--foreground-color_hsl: var(--foreground-color_h), var(--foreground-color_s), var(--foreground-color_l);
--warning-color_hsl: var(--warning-color_h), var(--warning-color_s), var(--warning-color_l);
--accent-color_h: calc(var(--brand-color_h) - 15);
--accent-color_s: 86%;
--accent-color_l: 44%;
// Modifiers
--brand-color--faint: hsla(var(--brand-color_hsl), 0.1);