bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Typescript: utils/theme.ts

Browse source
This commit is contained in:
Alex Gleason 2022-03-21 18:57:23 -05:00
parent 0938612678
commit 18bad4a5ab
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
1 changed files with 15 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
app/soapbox/utils/theme.js → app/soapbox/utils/theme.ts
View file

@ -1,15 +1,18 @@
import { Map as ImmutableMap } from 'immutable'; import { Map as ImmutableMap } from 'immutable';
export const generateThemeCss = (brandColor, accentColor) => { type RGB = { r: number, g: number, b: number };
type HSL = { h: number, s: number, l: number };
export const generateThemeCss = (brandColor: string, accentColor: string): string => {
if (!brandColor) return null; if (!brandColor) return null;
return themeDataToCss(brandColorToThemeData(brandColor).merge(accentColorToThemeData(brandColor, accentColor))); return themeDataToCss(brandColorToThemeData(brandColor).merge(accentColorToThemeData(brandColor, accentColor)));
}; };
// https://stackoverflow.com/a/5624139 // https://stackoverflow.com/a/5624139
function hexToRgb(hex) { function hexToRgb(hex: string): RGB {
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, (m, r, g, b) => ( hex = hex.replace(shorthandRegex, (_m, r, g, b) => (
r + r + g + g + b + b r + r + g + g + b + b
)); ));
@ -28,7 +31,7 @@ function hexToRgb(hex) {
// Taken from chromatism.js // Taken from chromatism.js
// https://github.com/graypegg/chromatism/blob/master/src/conversions/rgb.js // https://github.com/graypegg/chromatism/blob/master/src/conversions/rgb.js
const rgbToHsl = value => { const rgbToHsl = (value: RGB): HSL => {
const r = value.r / 255; const r = value.r / 255;
const g = value.g / 255; const g = value.g / 255;
const b = value.b / 255; const b = value.b / 255;
@ -65,7 +68,7 @@ const rgbToHsl = value => {
}; };
}; };
const parseShades = (obj, color, shades) => { const parseShades = (obj: Record<string, any>, color: string, shades: Record<string, any>) => {
if (typeof shades === 'string') { if (typeof shades === 'string') {
const { r, g, b } = hexToRgb(shades); const { r, g, b } = hexToRgb(shades);
return obj[`--color-${color}`] = `${r} ${g} ${b}`; return obj[`--color-${color}`] = `${r} ${g} ${b}`;
@ -77,21 +80,21 @@ const parseShades = (obj, color, shades) => {
}); });
}; };
const parseColors = colors => { const parseColors = (colors: Record<string, any>): Record<string, any> => {
return Object.keys(colors).reduce((obj, color) => { return Object.keys(colors).reduce((obj, color) => {
parseShades(obj, color, colors[color]); parseShades(obj, color, colors[color]);
return obj; return obj;
}, {}); }, {});
}; };
export const colorsToCss = colors => { export const colorsToCss = (colors: Record<string, any>): string => {
const parsed = parseColors(colors); const parsed = parseColors(colors);
return Object.keys(parsed).reduce((css, variable) => { return Object.keys(parsed).reduce((css, variable) => {
return css + `${variable}:${parsed[variable]};`; return css + `${variable}:${parsed[variable]};`;
}, ''); }, '');
}; };
export const brandColorToThemeData = brandColor => { export const brandColorToThemeData = (brandColor: string): ImmutableMap<string, any> => {
const { h, s, l } = rgbToHsl(hexToRgb(brandColor)); const { h, s, l } = rgbToHsl(hexToRgb(brandColor));
return ImmutableMap({ return ImmutableMap({
'brand-color_h': h, 'brand-color_h': h,
@ -100,7 +103,7 @@ export const brandColorToThemeData = brandColor => {
}); });
}; };
export const accentColorToThemeData = (brandColor, accentColor) => { export const accentColorToThemeData = (brandColor: string, accentColor: string): ImmutableMap<string, any> => {
if (accentColor) { if (accentColor) {
const { h, s, l } = rgbToHsl(hexToRgb(accentColor)); const { h, s, l } = rgbToHsl(hexToRgb(accentColor));
@ -119,10 +122,11 @@ export const accentColorToThemeData = (brandColor, accentColor) => {
}); });
}; };
export const themeDataToCss = themeData => ( export const themeDataToCss = (themeData: ImmutableMap<string, any>): string => (
themeData themeData
.entrySeq() .entrySeq()
.reduce((acc, cur) => acc + `--${cur[0]}:${cur[1]};`, '') .reduce((acc, cur) => acc + `--${cur[0]}:${cur[1]};`, '')
); );
export const themeColorsToCSS = (brandColor, accentColor) => themeDataToCss(brandColorToThemeData(brandColor).merge(accentColorToThemeData(brandColor, accentColor))); export const themeColorsToCSS = (brandColor: string, accentColor: string): string =>
themeDataToCss(brandColorToThemeData(brandColor).merge(accentColorToThemeData(brandColor, accentColor)));