From 778f76dfed26aaa1958ccb2ecbda76725805ecad Mon Sep 17 00:00:00 2001 From: Himself65 Date: Mon, 10 Apr 2023 23:43:24 -0500 Subject: [PATCH] feat: add affine next theme (#1867) --- apps/electron/yarn.lock | 8 + apps/web/src/providers/ThemeProvider.tsx | 24 ++- packages/component/package.json | 1 + packages/component/src/styles/color-scheme.ts | 153 ++++++++++++++++++ packages/component/src/styles/index.ts | 1 + packages/component/src/styles/theme.ts | 3 + yarn.lock | 8 + 7 files changed, 196 insertions(+), 2 deletions(-) create mode 100644 packages/component/src/styles/color-scheme.ts diff --git a/apps/electron/yarn.lock b/apps/electron/yarn.lock index dd8b15e5b0..e71cba7c53 100644 --- a/apps/electron/yarn.lock +++ b/apps/electron/yarn.lock @@ -75,6 +75,7 @@ __metadata: clsx: ^1.2.1 concurrently: ^8.0.1 jest-mock: ^29.5.0 + kebab-case: ^1.0.2 lit: ^2.7.2 react: ^18.2.0 react-dnd: ^16.0.1 @@ -12289,6 +12290,13 @@ __metadata: languageName: node linkType: hard +"kebab-case@npm:^1.0.2": + version: 1.0.2 + resolution: "kebab-case@npm:1.0.2" + checksum: bf01164e11c544ee9b3aa1a91c2e7d6aa6b3356b834a5e885d43f36db14aae5d347cd4a298a566133321b82fde6bac6b597f148ac19bfd3d3fc81e1034a79729 + languageName: node + linkType: hard + "keyv@npm:^4.0.0": version: 4.5.2 resolution: "keyv@npm:4.5.2" diff --git a/apps/web/src/providers/ThemeProvider.tsx b/apps/web/src/providers/ThemeProvider.tsx index 73b137ae7e..0d5298815c 100644 --- a/apps/web/src/providers/ThemeProvider.tsx +++ b/apps/web/src/providers/ThemeProvider.tsx @@ -1,11 +1,19 @@ -import type { AffineTheme, ThemeProviderProps } from '@affine/component'; +import type { + AffineNextCssVariables, + AffineNextLightColorScheme, + AffineTheme, + ThemeProviderProps, +} from '@affine/component'; import { getDarkTheme, getLightTheme, globalThemeVariables, + nextDarkColorScheme, + nextLightColorScheme, ThemeProvider as AffineThemeProvider, } from '@affine/component'; import { GlobalStyles } from '@mui/material'; +import kebabCase from 'kebab-case'; import { ThemeProvider as NextThemeProvider, useTheme } from 'next-themes'; import type { PropsWithChildren } from 'react'; import type React from 'react'; @@ -15,7 +23,15 @@ import { useCurrentMode } from '../hooks/current/use-current-mode'; const ThemeInjector = memo<{ themeStyle: AffineTheme; -}>(function ThemeInjector({ themeStyle }) { + nextThemeStyle: AffineNextLightColorScheme; +}>(function ThemeInjector({ themeStyle, nextThemeStyle }) { + const injectAffineNextTheme = useMemo(() => { + return Object.entries(nextThemeStyle).reduce((variables, [key, value]) => { + variables[`--affine-${kebabCase(key)}` as keyof AffineNextCssVariables] = + value; + return variables; + }, {} as AffineNextCssVariables); + }, [nextThemeStyle]); return ( ( > {children} diff --git a/packages/component/package.json b/packages/component/package.json index a3355fe486..911eb7df8d 100644 --- a/packages/component/package.json +++ b/packages/component/package.json @@ -37,6 +37,7 @@ "@radix-ui/react-avatar": "^1.0.2", "@toeverything/hooks": "workspace:*", "clsx": "^1.2.1", + "kebab-case": "^1.0.2", "lit": "^2.7.2", "react": "^18.2.0", "react-dnd": "^16.0.1", diff --git a/packages/component/src/styles/color-scheme.ts b/packages/component/src/styles/color-scheme.ts new file mode 100644 index 0000000000..fba8ec0c86 --- /dev/null +++ b/packages/component/src/styles/color-scheme.ts @@ -0,0 +1,153 @@ +type Kebab< + T extends string, + A extends string = '' +> = T extends `${infer F}${infer R}` + ? Kebab ? '' : '-'}${Lowercase}`> + : A; + +export type AffineNextLightColorScheme = typeof nextLightColorScheme; + +export type AffineNextCssVariables = { + [Key in `--affine-${Kebab}`]: string; +}; + +// Refs: https://github.com/toeverything/AFFiNE/issues/1796 +export const nextLightColorScheme = { + brandColor: 'rgb(84, 56, 255)', + tertiaryColor: 'rgb(243, 240, 255)', + primaryColor: 'rgb(84, 56, 255)', + secondaryColor: 'rgb(125, 145, 255)', + backgroundSuccessColor: 'rgb(255, 255, 255)', + backgroundErrorColor: 'rgba(255, 255, 255, 0.2)', + backgroundProcessingColor: 'rgb(255, 255, 255)', + backgroundWarningColor: 'rgb(255, 255, 255)', + backgroundPrimaryColor: 'rgb(255, 255, 255)', + backgroundOverlayPanelColor: 'rgb(251, 251, 252)', + backgroundSecondaryColor: 'rgb(251, 250, 252)', + backgroundTertiaryColor: 'rgb(233, 233, 236)', + backgroundCodeBlock: 'rgb(250, 251, 253)', + backgroundModalColor: 'rgba(0, 0, 0, 0.6)', + textPrimaryColor: 'rgb(66, 65, 73)', + textSecondaryColor: 'rgb(142, 141, 145)', + textDisableColor: 'rgb(169, 169, 173)', + textEmphasisColor: 'rgb(84, 56, 255)', + hoverColor: 'rgba(0, 0, 0, 0.04)', + linkColor: 'rgb(125, 145, 255)', + quoteColor: 'rgb(100, 95, 130)', + iconColor: 'rgb(119, 117, 125)', + iconSecondary: 'rgba(119, 117, 125, 0.6)', + borderColor: 'rgb(227, 226, 228)', + dividerColor: 'rgb(227, 226, 228)', + placeholderColor: 'rgb(192, 191, 193)', + edgelessGridColor: 'rgb(230, 230, 230)', + successColor: 'rgb(16, 203, 134)', + warningColor: 'rgb(255, 99, 31)', + errorColor: 'rgb(235, 67, 53)', + processingColor: 'rgb(39, 118, 255)', + black10: 'rgba(0, 0, 0, 0.1)', + black30: 'rgba(0, 0, 0, 0.3)', + black50: 'rgba(0, 0, 0, 0.5)', + black60: 'rgba(0, 0, 0, 0.6)', + black80: 'rgba(0, 0, 0, 0.8)', + black90: 'rgba(0, 0, 0, 0.9)', + black: 'rgb(0, 0, 0)', + white10: 'rgba(255, 255, 255, 0.1)', + white30: 'rgba(255, 255, 255, 0.3)', + white50: 'rgba(255, 255, 255, 0.5)', + white60: 'rgba(255, 255, 255, 0.6)', + white80: 'rgba(255, 255, 255, 0.8)', + white90: 'rgba(255, 255, 255, 0.9)', + white: 'rgb(255, 255, 255)', + tagWhite: 'rgb(245, 245, 245)', + tagGray: 'rgb(227, 226, 224)', + tagRed: 'rgb(255, 225, 225)', + tagOrange: 'rgb(255, 234, 202)', + tagYellow: 'rgb(255, 244, 216)', + tagGreen: 'rgb(223, 244, 232)', + tagTeal: 'rgb(223, 244, 243)', + tagBlue: 'rgb(225, 239, 255)', + tagPurple: 'rgb(243, 240, 255)', + tagPink: 'rgb(252, 232, 255)', + paletteYellow: 'rgb(255, 232, 56)', + paletteOrange: 'rgb(255, 175, 56)', + paletteTangerine: 'rgb(255, 99, 31)', + paletteRed: 'rgb(252, 63, 85)', + paletteMagenta: 'rgb(255, 56, 179)', + palettePurple: 'rgb(182, 56, 255)', + paletteNavy: 'rgb(59, 37, 204)', + paletteBlue: 'rgb(79, 144, 255)', + paletteGreen: 'rgb(16, 203, 134)', + paletteGrey: 'rgb(153, 153, 153)', + paletteWhite: 'rgb(255, 255, 255)', + paletteBlack: 'rgb(0, 0, 0)', +}; + +export const nextDarkColorScheme = { + brandColor: 'rgb(84, 56, 255)', + primaryColor: 'rgb(118, 95, 254)', + secondaryColor: 'rgb(144, 150, 245)', + tertiaryColor: 'rgb(30, 30, 30)', + hoverColor: 'rgba(255, 255, 255, 0.1)', + iconColor: 'rgb(168, 168, 160)', + iconSecondary: 'rgba(168,168,160,0.6)', + borderColor: 'rgb(57, 57, 57)', + dividerColor: 'rgb(114, 114, 114)', + placeholderColor: 'rgb(62, 62, 63)', + quoteColor: 'rgb(147, 144, 163)', + linkColor: 'rgb(185, 191, 227)', + edgelessGridColor: 'rgb(49, 49, 49)', + successColor: 'rgb(77, 213, 181)', + warningColor: 'rgb(255, 123, 77)', + errorColor: 'rgb(212, 140, 130)', + processingColor: 'rgb(195, 215, 255)', + textEmphasisColor: 'rgb(208, 205, 220)', + textPrimaryColor: 'rgb(234, 234, 234)', + textSecondaryColor: 'rgb(156, 156, 160)', + textDisableColor: 'rgb(119, 117, 125)', + black10: 'rgba(255, 255, 255, 0.1)', + black30: 'rgba(255, 255, 255, 0.3)', + black50: 'rgba(255, 255, 255, 0.5)', + black60: 'rgba(255, 255, 255, 0.6)', + black80: 'rgba(255, 255, 255, 0.8)', + black90: 'rgba(255, 255, 255, 0.9)', + black: 'rgb(255, 255, 255)', + white10: 'rgba(0, 0, 0, 0.1)', + white30: 'rgba(0, 0, 0, 0.3)', + white50: 'rgba(0, 0, 0, 0.5)', + white60: 'rgba(0, 0, 0, 0.6)', + white80: 'rgba(0, 0, 0, 0.8)', + white90: 'rgba(0, 0, 0, 0.9)', + white: 'rgb(0, 0, 0)', + backgroundCodeBlock: 'rgb(41, 44, 51)', + backgroundTertiaryColor: 'rgb(30, 30, 30)', + backgroundProcessingColor: 'rgb(255, 255, 255)', + backgroundErrorColor: 'rgb(255, 255, 255)', + backgroundWarningColor: 'rgb(255, 255, 255)', + backgroundSuccessColor: 'rgb(255, 255, 255)', + backgroundPrimaryColor: 'rgb(20, 20, 20)', + backgroundSecondaryColor: 'rgb(32, 32, 32)', + backgroundModalColor: 'rgba(0, 0, 0, 0.8)', + backgroundOverlayPanelColor: 'rgb(30, 30, 30)', + tagBlue: 'rgb(10, 84, 170)', + tagGreen: 'rgb(55, 135, 79)', + tagTeal: 'rgb(33, 145, 138)', + tagWhite: 'rgb(84, 84, 84)', + tagPurple: 'rgb(59, 38, 141)', + tagRed: 'rgb(139, 63, 63)', + tagPink: 'rgb(194, 132, 132)', + tagYellow: 'rgb(187, 165, 61)', + tagOrange: 'rgb(231, 161, 58)', + tagGray: 'rgb(41, 41, 41)', + paletteYellow: 'rgb(255, 232, 56)', + paletteOrange: 'rgb(255, 175, 56)', + paletteTangerine: 'rgb(255, 99, 31)', + paletteRed: 'rgb(252, 63, 85)', + paletteMagenta: 'rgb(255, 56, 179)', + palettePurple: 'rgb(182, 56, 255)', + paletteNavy: 'rgb(59, 37, 204)', + paletteBlue: 'rgb(79, 144, 255)', + paletteGreen: 'rgb(16, 203, 134)', + paletteGrey: 'rgb(153, 153, 153)', + paletteWhite: 'rgb(255, 255, 255)', + paletteBlack: 'rgb(0, 0, 0)', +} satisfies AffineNextLightColorScheme; diff --git a/packages/component/src/styles/index.ts b/packages/component/src/styles/index.ts index 61fc7f9f7a..117efc7146 100644 --- a/packages/component/src/styles/index.ts +++ b/packages/component/src/styles/index.ts @@ -1,3 +1,4 @@ +export * from './color-scheme'; export * from './helper'; export * from './styled'; export * from './theme'; diff --git a/packages/component/src/styles/theme.ts b/packages/component/src/styles/theme.ts index d496716129..66053f6067 100644 --- a/packages/component/src/styles/theme.ts +++ b/packages/component/src/styles/theme.ts @@ -156,6 +156,9 @@ export const getDarkTheme = ( }; }; +/** + * @deprecated these theme will be removed in the future + */ export const globalThemeVariables: ( theme: AffineTheme ) => AffineThemeCSSVariables = theme => { diff --git a/yarn.lock b/yarn.lock index 46f528769f..3f0a6d34bd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -75,6 +75,7 @@ __metadata: clsx: ^1.2.1 concurrently: ^8.0.1 jest-mock: ^29.5.0 + kebab-case: ^1.0.2 lit: ^2.7.2 react: ^18.2.0 react-dnd: ^16.0.1 @@ -14130,6 +14131,13 @@ __metadata: languageName: node linkType: hard +"kebab-case@npm:^1.0.2": + version: 1.0.2 + resolution: "kebab-case@npm:1.0.2" + checksum: bf01164e11c544ee9b3aa1a91c2e7d6aa6b3356b834a5e885d43f36db14aae5d347cd4a298a566133321b82fde6bac6b597f148ac19bfd3d3fc81e1034a79729 + languageName: node + linkType: hard + "keyv@npm:^4.5.2": version: 4.5.2 resolution: "keyv@npm:4.5.2"