mirror
/
soapbox
kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
1
0
Forkuj 1
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Use colors from soapbox.json at runtime

virtualized-window
Alex Gleason 2022-03-07 17:19:54 -06:00
rodzic 1c910248bf
commit 0938612678
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
4 zmienionych plików z 32 dodań i 45 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

1
app/soapbox/actions/soapbox.js
Wyświetl plik

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

6
app/soapbox/containers/soapbox.js
Wyświetl plik

@ -25,6 +25,7 @@ import { createGlobals } from 'soapbox/globals';
import messages from 'soapbox/locales/messages'; import messages from 'soapbox/locales/messages';
import { makeGetAccount } from 'soapbox/selectors'; import { makeGetAccount } from 'soapbox/selectors';
import SoapboxPropTypes from 'soapbox/utils/soapbox_prop_types'; import SoapboxPropTypes from 'soapbox/utils/soapbox_prop_types';
import { colorsToCss } from 'soapbox/utils/theme';
import { INTRODUCTION_VERSION } from '../actions/onboarding'; import { INTRODUCTION_VERSION } from '../actions/onboarding';
import { preload } from '../actions/preload'; import { preload } from '../actions/preload';
@ -83,6 +84,7 @@ const mapStateToProps = (state) => {
dyslexicFont: settings.get('dyslexicFont'), dyslexicFont: settings.get('dyslexicFont'),
demetricator: settings.get('demetricator'), demetricator: settings.get('demetricator'),
locale: validLocale(locale) ? locale : 'en', locale: validLocale(locale) ? locale : 'en',
themeCss: colorsToCss(soapboxConfig.get('colors').toJS()),
brandColor: soapboxConfig.get('brandColor'), brandColor: soapboxConfig.get('brandColor'),
themeMode: settings.get('themeMode'), themeMode: settings.get('themeMode'),
singleUserMode, singleUserMode,
@ -103,6 +105,7 @@ class SoapboxMount extends React.PureComponent {
dyslexicFont: PropTypes.bool, dyslexicFont: PropTypes.bool,
demetricator: PropTypes.bool, demetricator: PropTypes.bool,
locale: PropTypes.string.isRequired, locale: PropTypes.string.isRequired,
themeCss: PropTypes.string,
themeMode: PropTypes.string, themeMode: PropTypes.string,
brandColor: PropTypes.string, brandColor: PropTypes.string,
dispatch: PropTypes.func, dispatch: PropTypes.func,
@ -139,7 +142,7 @@ class SoapboxMount extends React.PureComponent {
} }
render() { render() {
const { me, account, instanceLoaded, locale, singleUserMode } = this.props; const { me, account, instanceLoaded, themeCss, locale, singleUserMode } = this.props;
if (me === null) return null; if (me === null) return null;
if (me && !account) return null; if (me && !account) return null;
if (!instanceLoaded) return null; if (!instanceLoaded) return null;
@ -169,6 +172,7 @@ class SoapboxMount extends React.PureComponent {
<Helmet> <Helmet>
{/* <html lang='en' className={this.props.themeMode} /> */} {/* <html lang='en' className={this.props.themeMode} /> */}
<body className={bodyClass} /> <body className={bodyClass} />
{themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>}
<meta name='theme-color' content={this.props.brandColor} /> <meta name='theme-color' content={this.props.brandColor} />
</Helmet> </Helmet>
<ScrollContext shouldUpdateScroll={this.shouldUpdateScroll}> <ScrollContext shouldUpdateScroll={this.shouldUpdateScroll}>

26
app/soapbox/utils/theme.js
Wyświetl plik

@ -65,6 +65,32 @@ const rgbToHsl = value => {
}; };
}; };
const parseShades = (obj, color, shades) => {
if (typeof shades === 'string') {
const { r, g, b } = hexToRgb(shades);
return obj[`--color-${color}`] = `${r} ${g} ${b}`;
}
return Object.keys(shades).forEach(shade => {
const { r, g, b } = hexToRgb(shades[shade]);
obj[`--color-${color}-${shade}`] = `${r} ${g} ${b}`;
});
};
const parseColors = colors => {
return Object.keys(colors).reduce((obj, color) => {
parseShades(obj, color, colors[color]);
return obj;
}, {});
};
export const colorsToCss = colors => {
const parsed = parseColors(colors);
return Object.keys(parsed).reduce((css, variable) => {
return css + `${variable}:${parsed[variable]};`;
}, '');
};
export const brandColorToThemeData = brandColor => { export const brandColorToThemeData = brandColor => {
const { h, s, l } = rgbToHsl(hexToRgb(brandColor)); const { h, s, l } = rgbToHsl(hexToRgb(brandColor));
return ImmutableMap({ return ImmutableMap({

44
app/styles/themes.scss
Wyświetl plik

@ -26,50 +26,6 @@ Examples:
body, body,
.site-preview { .site-preview {
// Tailwind color variables
--color-gray-50: 249 250 251;
--color-gray-100: 243 244 246;
--color-gray-200: 229 231 235;
--color-gray-300: 209 213 219;
--color-gray-400: 156 163 175;
--color-gray-500: 107 114 128;
--color-gray-600: 75 85 99;
--color-gray-700: 55 65 81;
--color-gray-800: 31 41 55;
--color-gray-900: 17 24 39;
--color-primary-50: 238 242 255;
--color-primary-100: 224 231 255;
--color-primary-200: 199 210 254;
--color-primary-300: 165 180 252;
--color-primary-400: 129 140 248;
--color-primary-500: 99 102 241;
--color-primary-600: 84 72 238;
--color-primary-700: 67 56 202;
--color-primary-800: 55 48 163;
--color-primary-900: 49 46 129;
--color-success-50: 240 253 244;
--color-success-100: 220 252 231;
--color-success-200: 187 247 208;
--color-success-300: 134 239 172;
--color-success-400: 74 222 128;
--color-success-500: 34 197 94;
--color-success-600: 22 163 74;
--color-success-700: 21 128 61;
--color-success-800: 22 101 52;
--color-success-900: 20 83 45;
--color-danger-50: 254 242 242;
--color-danger-100: 254 226 226;
--color-danger-200: 254 202 202;
--color-danger-300: 252 165 165;
--color-danger-400: 248 113 113;
--color-danger-500: 239 68 68;
--color-danger-600: 220 38 38;
--color-danger-700: 185 28 28;
--color-danger-800: 153 27 27;
--color-danger-900: 127 29 29;
--color-accent-300: 255 95 135;
--color-accent-500: 255 71 117;
// Primary variables // Primary variables
--brand-color: hsl(var(--brand-color_hsl)); --brand-color: hsl(var(--brand-color_hsl));
--accent-color: hsl(var(--accent-color_hsl)); --accent-color: hsl(var(--accent-color_hsl));