matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Let accent color be configurable

Browse Source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak
2022-02-24 18:28:52 +01:00
parent dc979a8039
commit 5b3f7c1cdc
9 changed files with 40 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
app/soapbox/utils/theme.js
View File

@@ -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)));