From 5b3f7c1cdccfe4aded1a8a1688ee9e67f568ee71 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Thu, 24 Feb 2022 18:28:52 +0100 Subject: [PATCH] Let accent color be configurable MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/actions/soapbox.js | 1 + app/soapbox/containers/soapbox.js | 3 ++- .../soapbox_config/components/site_preview.js | 4 +-- app/soapbox/features/soapbox_config/index.js | 6 +++++ app/soapbox/locales/pl.json | 1 + app/soapbox/locales/uk.json | 1 + app/soapbox/utils/theme.js | 25 ++++++++++++++++--- app/styles/forms.scss | 6 ++++- app/styles/themes.scss | 3 --- 9 files changed, 40 insertions(+), 10 deletions(-) diff --git a/app/soapbox/actions/soapbox.js b/app/soapbox/actions/soapbox.js index d85bd0f0f..cc266aeb3 100644 --- a/app/soapbox/actions/soapbox.js +++ b/app/soapbox/actions/soapbox.js @@ -40,6 +40,7 @@ export const makeDefaultConfig = features => { logo: '', banner: '', brandColor: '', // Empty + accentColor: '', customCss: ImmutableList(), promoPanel: ImmutableMap({ items: ImmutableList(), diff --git a/app/soapbox/containers/soapbox.js b/app/soapbox/containers/soapbox.js index 301de4c01..c08e643a6 100644 --- a/app/soapbox/containers/soapbox.js +++ b/app/soapbox/containers/soapbox.js @@ -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'), diff --git a/app/soapbox/features/soapbox_config/components/site_preview.js b/app/soapbox/features/soapbox_config/components/site_preview.js index a51604695..5d6749452 100644 --- a/app/soapbox/features/soapbox_config/components/site_preview.js +++ b/app/soapbox/features/soapbox_config/components/site_preview.js @@ -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 (
- +
diff --git a/app/soapbox/features/soapbox_config/index.js b/app/soapbox/features/soapbox_config/index.js index 5ec7f0b39..1b3fb51d3 100644 --- a/app/soapbox/features/soapbox_config/index.js +++ b/app/soapbox/features/soapbox_config/index.js @@ -235,6 +235,12 @@ class SoapboxConfig extends ImmutablePureComponent { value={soapbox.get('brandColor')} onChange={this.handleChange(['brandColor'], (e) => e.hex)} /> + } + value={soapbox.get('accentColor')} + onChange={this.handleChange(['accentColor'], (e) => e.hex)} + />
diff --git a/app/soapbox/locales/pl.json b/app/soapbox/locales/pl.json index 470bac41b..d26164d62 100644 --- a/app/soapbox/locales/pl.json +++ b/app/soapbox/locales/pl.json @@ -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", diff --git a/app/soapbox/locales/uk.json b/app/soapbox/locales/uk.json index 47b914491..1ab59de14 100644 --- a/app/soapbox/locales/uk.json +++ b/app/soapbox/locales/uk.json @@ -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", diff --git a/app/soapbox/utils/theme.js b/app/soapbox/utils/theme.js index b398145bf..1b3c85dfe 100644 --- a/app/soapbox/utils/theme.js +++ b/app/soapbox/utils/theme.js @@ -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))); diff --git a/app/styles/forms.scss b/app/styles/forms.scss index 64ab2fb4d..53551941a 100644 --- a/app/styles/forms.scss +++ b/app/styles/forms.scss @@ -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 { diff --git a/app/styles/themes.scss b/app/styles/themes.scss index 032f8ce4d..de6a6b1bf 100644 --- a/app/styles/themes.scss +++ b/app/styles/themes.scss @@ -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);