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

refactor(console,schemas,shared): extract dark mode color generator (#1425)

Browse source
This commit is contained in:
Wang Sijie 2022-07-07 13:59:27 +08:00 committed by GitHub
parent 577433ae2d
commit 741347f226
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 10 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/console/package.json
View file

@ -42,7 +42,6 @@
"@types/react-modal": "^3.13.1", "@types/react-modal": "^3.13.1",
"@types/react-syntax-highlighter": "^15.5.1", "@types/react-syntax-highlighter": "^15.5.1",
"classnames": "^2.3.1", "classnames": "^2.3.1",
"color": "^4.2.3",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"csstype": "^3.0.11", "csstype": "^3.0.11",
"dayjs": "^1.10.5", "dayjs": "^1.10.5",

5
packages/console/src/pages/SignInExperience/components/ColorForm.tsx
View file

@ -1,5 +1,4 @@
import { absoluteLighten } from '@logto/shared'; import { generateDarkColor } from '@logto/shared';
import color from 'color';
import React, { useCallback, useEffect, useMemo } from 'react'; import React, { useCallback, useEffect, useMemo } from 'react';
import { Controller, useFormContext } from 'react-hook-form'; import { Controller, useFormContext } from 'react-hook-form';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
@ -27,7 +26,7 @@ const ColorForm = () => {
const darkPrimaryColor = watch('color.darkPrimaryColor'); const darkPrimaryColor = watch('color.darkPrimaryColor');
const calculatedDarkPrimaryColor = useMemo(() => { const calculatedDarkPrimaryColor = useMemo(() => {
return absoluteLighten(color(primaryColor), 10).hex(); return generateDarkColor(primaryColor);
}, [primaryColor]); }, [primaryColor]);
const handleResetColor = useCallback(() => { const handleResetColor = useCallback(() => {

7
packages/schemas/src/seeds/sign-in-experience.ts
View file

@ -1,14 +1,17 @@
import { Language } from '@logto/phrases-ui'; import { Language } from '@logto/phrases-ui';
import { generateDarkColor } from '@logto/shared';
import { CreateSignInExperience, SignInMode } from '../db-entries'; import { CreateSignInExperience, SignInMode } from '../db-entries';
import { BrandingStyle, SignInMethodState } from '../foundations'; import { BrandingStyle, SignInMethodState } from '../foundations';
const defaultPrimaryColor = '#6139F6';
export const defaultSignInExperience: Readonly<CreateSignInExperience> = { export const defaultSignInExperience: Readonly<CreateSignInExperience> = {
id: 'default', id: 'default',
color: { color: {
primaryColor: '#6139F6', primaryColor: defaultPrimaryColor,
isDarkModeEnabled: false, isDarkModeEnabled: false,
darkPrimaryColor: '#8768F8', darkPrimaryColor: generateDarkColor(defaultPrimaryColor),
}, },
branding: { branding: {
style: BrandingStyle.Logo, style: BrandingStyle.Logo,

3
packages/shared/src/utilities/color.ts
View file

@ -12,3 +12,6 @@ export const absoluteDarken = (baseColor: color, delta: number) => {
return color([hslArray[0], hslArray[1], hslArray[2] - delta], 'hsl'); return color([hslArray[0], hslArray[1], hslArray[2] - delta], 'hsl');
}; };
export const generateDarkColor = (lightColor: string) =>
absoluteLighten(color(lightColor), 10).hex();

2
pnpm-lock.yaml
View file

@ -691,7 +691,6 @@ importers:
'@types/react-modal': ^3.13.1 '@types/react-modal': ^3.13.1
'@types/react-syntax-highlighter': ^15.5.1 '@types/react-syntax-highlighter': ^15.5.1
classnames: ^2.3.1 classnames: ^2.3.1
color: ^4.2.3
cross-env: ^7.0.3 cross-env: ^7.0.3
csstype: ^3.0.11 csstype: ^3.0.11
dayjs: ^1.10.5 dayjs: ^1.10.5
@ -755,7 +754,6 @@ importers:
'@types/react-modal': 3.13.1 '@types/react-modal': 3.13.1
'@types/react-syntax-highlighter': 15.5.1 '@types/react-syntax-highlighter': 15.5.1
classnames: 2.3.1 classnames: 2.3.1
color: 4.2.3
cross-env: 7.0.3 cross-env: 7.0.3
csstype: 3.0.11 csstype: 3.0.11
dayjs: 1.10.7 dayjs: 1.10.7