Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00
Code Issues Activity

refactor(ui): refactor branding color calulation logic

Browse source 
refactor branding color calculation logic
This commit is contained in:
simeng-li 2022-10-23 15:02:09 +08:00
parent 1287a806b0
commit 565b944ae0
No known key found for this signature in database
GPG key ID: 14EA7BB1541E8075
3 changed files with 38 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/ui/src/containers/AppContent/index.tsx
View file

@ -24,7 +24,7 @@ const AppContent = ({ children }: Props) => {
}, [setToast]);
// Set Primary Color
useColorTheme(experienceSettings?.color.primaryColor, experienceSettings?.color.darkPrimaryColor);
useColorTheme();
// Set Theme Mode
useEffect(() => {

67
packages/ui/src/hooks/use-color-theme.ts
View file

@ -1,54 +1,59 @@
import { absoluteDarken, absoluteLighten } from '@logto/core-kit';
import color from 'color';
import { useEffect } from 'react';
import { useEffect, useContext } from 'react';
import { PageContext } from '@/hooks/use-page-context';
const generateLightColorLibrary = (primaryColor: color) => ({
[`--color-light-brand`]: primaryColor.hex(),
[`--color-light-brand-hover`]: absoluteLighten(primaryColor, 10).string(),
[`--color-light-brand-pressed`]: absoluteDarken(primaryColor, 10).string(),
[`--color-light-overlay-brand-focused`]: primaryColor.alpha(0.16).string(),
[`--color-light-overlay-brand-hover`]: primaryColor.alpha(0.08).string(),
[`--color-light-overlay-brand-pressed`]: primaryColor.alpha(0.12).string(),
[`--color-brand-default`]: primaryColor.hex(),
[`--color-brand-hover`]: absoluteLighten(primaryColor, 10).string(),
[`--color-brand-pressed`]: absoluteDarken(primaryColor, 10).string(),
[`--color-overlay-brand-focused`]: primaryColor.alpha(0.16).string(),
[`--color-overlay-brand-hover`]: primaryColor.alpha(0.08).string(),
[`--color-overlay-brand-pressed`]: primaryColor.alpha(0.12).string(),
});
const generateDarkColorLibrary = (primaryColor: color) => ({
[`--color-dark-brand`]: primaryColor.hex(),
[`--color-dark-brand-hover`]: absoluteLighten(primaryColor, 10).string(),
[`--color-dark-brand-pressed`]: absoluteDarken(primaryColor, 10).string(),
[`--color-dark-overlay-brand-focused`]: absoluteLighten(primaryColor, 17)
.rgb()
.alpha(0.16)
.string(),
[`--color-dark-overlay-brand-hover`]: absoluteLighten(primaryColor, 17)
.rgb()
.alpha(0.08)
.string(),
[`--color-dark-overlay-brand-pressed`]: absoluteLighten(primaryColor, 17)
.rgb()
.alpha(0.12)
.string(),
[`--color-brand-default`]: primaryColor.hex(),
[`--color-brand-hover`]: absoluteLighten(primaryColor, 10).string(),
[`--color-brand-pressed`]: absoluteDarken(primaryColor, 10).string(),
[`--color-overlay-brand-focused`]: absoluteLighten(primaryColor, 30).rgb().alpha(0.16).string(),
[`--color-overlay-brand-hover`]: absoluteLighten(primaryColor, 30).rgb().alpha(0.08).string(),
[`--color-overlay-brand-pressed`]: absoluteLighten(primaryColor, 30).rgb().alpha(0.12).string(),
});
const useColorTheme = (primaryColor?: string, darkPrimaryColor?: string) => {
const useColorTheme = () => {
const { theme, experienceSettings } = useContext(PageContext);
const primaryColor = experienceSettings?.color.primaryColor;
const darkPrimaryColor = experienceSettings?.color.darkPrimaryColor;
useEffect(() => {
if (!primaryColor) {
return;
}
const lightPrimary = color(primaryColor);
const darkPrimary = color(darkPrimaryColor);
const lightColorLibrary = generateLightColorLibrary(lightPrimary);
if (theme === 'light') {
const lightColorLibrary = generateLightColorLibrary(lightPrimary);
for (const [key, value] of Object.entries(lightColorLibrary)) {
document.body.style.setProperty(key, value);
}
return;
}
const darkPrimary = darkPrimaryColor
? color(darkPrimaryColor)
: absoluteLighten(lightPrimary, 10);
const darkColorLibrary = generateDarkColorLibrary(darkPrimary);
for (const [key, value] of Object.entries(lightColorLibrary)) {
document.documentElement.style.setProperty(key, value);
}
for (const [key, value] of Object.entries(darkColorLibrary)) {
document.documentElement.style.setProperty(key, value);
document.body.style.setProperty(key, value);
}
}, [darkPrimaryColor, primaryColor]);
}, [darkPrimaryColor, primaryColor, theme]);
};
export default useColorTheme;

2
packages/ui/src/scss/_colors.scss
View file

@ -112,7 +112,7 @@
--color-danger-50: #ff897a;
--color-danger-60: #ff5449;
--color-danger-70: #dd3730;
--color-danger-50: #ba1b1b;
--color-danger-80: #ba1b1b;
--color-success-60: #4ea254;
--color-success-70: #32873d;