fix: color variable (#2059)

apps/web/src/components/blocksuite/workspace-header/header-right-items/theme-mode-switch/index.tsx

@@ -1,10 +1,15 @@
 import { DarkModeIcon, LightModeIcon } from '@blocksuite/icons';
 import { useTheme } from 'next-themes';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { StyledSwitchItem, StyledThemeModeSwitch } from './style';
 export const ThemeModeSwitch = () => {
   const { setTheme, resolvedTheme } = useTheme();
+
+  useEffect(() => {
+    window.apis?.onThemeChange(resolvedTheme === 'dark' ? 'dark' : 'light');
+  }, [resolvedTheme]);
+
   const [isHover, setIsHover] = useState(false);
   return (
     <StyledThemeModeSwitch

packages/component/package.json

@@ -37,7 +37,6 @@
     "@toeverything/hooks": "workspace:*",
     "clsx": "^1.2.1",
     "jotai": "^2.0.4",
-    "kebab-case": "^1.0.2",
     "lit": "^2.7.2",
     "lottie-web": "^5.11.0",
     "react": "^18.2.0",

packages/component/src/styles/theme.ts

@@ -114,18 +114,30 @@ export const lightTheme = {
   tagBlue: 'rgb(225, 239, 255)',
   tagPurple: 'rgb(243, 240, 255)',
   tagPink: 'rgb(252, 232, 255)',
-  paletteYellow: 'rgb(255, 232, 56)',
+  paletteLineYellow: 'rgb(255, 232, 56)',
-  paletteOrange: 'rgb(255, 175, 56)',
+  paletteLineOrange: 'rgb(255, 175, 56)',
-  paletteTangerine: 'rgb(255, 99, 31)',
+  paletteLineTangerine: 'rgb(255, 99, 31)',
-  paletteRed: 'rgb(252, 63, 85)',
+  paletteLineRed: 'rgb(252, 63, 85)',
-  paletteMagenta: 'rgb(255, 56, 179)',
+  paletteLineMagenta: 'rgb(255, 56, 179)',
-  palettePurple: 'rgb(182, 56, 255)',
+  paletteLinePurple: 'rgb(182, 56, 255)',
-  paletteNavy: 'rgb(59, 37, 204)',
+  paletteLineNavy: 'rgb(59, 37, 204)',
-  paletteBlue: 'rgb(79, 144, 255)',
+  paletteLineBlue: 'rgb(79, 144, 255)',
-  paletteGreen: 'rgb(16, 203, 134)',
+  paletteLineGreen: 'rgb(16, 203, 134)',
-  paletteGrey: 'rgb(153, 153, 153)',
+  paletteLineWhite: 'rgb(255, 255, 255)',
-  paletteWhite: 'rgb(255, 255, 255)',
+  paletteLineBlack: 'rgb(0, 0, 0)',
-  paletteBlack: 'rgb(0, 0, 0)',
+  paletteLineGrey: 'rgb(153, 153, 153)',
+  paletteShapeYellow: 'rgb(255, 241, 136)',
+  paletteShapeOrange: 'rgb(255, 207, 136)',
+  paletteShapeTangerine: 'rgb(255, 161, 121)',
+  paletteShapeRed: 'rgb(253, 140, 153)',
+  paletteShapeMagenta: 'rgb(255, 136, 209)',
+  paletteShapePurple: 'rgb(211, 136, 255)',
+  paletteShapeNavy: 'rgb(137, 124, 224)',
+  paletteShapeBlue: 'rgb(149, 188, 255)',
+  paletteShapeGreen: 'rgb(112, 224, 182)',
+  paletteShapeWhite: 'rgb(255, 255, 255)',
+  paletteShapeBlack: 'rgb(0, 0, 0)',
+  paletteShapeGrey: 'rgb(194, 194, 194)',
   tooltip: '#424149',
 };
 
@@ -189,18 +201,30 @@ export const darkTheme = {
   tagYellow: 'rgb(187, 165, 61)',
   tagOrange: 'rgb(231, 161, 58)',
   tagGray: 'rgb(41, 41, 41)',
-  paletteYellow: 'rgb(255, 232, 56)',
+  paletteLineYellow: 'rgb(255, 232, 56)',
-  paletteOrange: 'rgb(255, 175, 56)',
+  paletteLineOrange: 'rgb(255, 175, 56)',
-  paletteTangerine: 'rgb(255, 99, 31)',
+  paletteLineTangerine: 'rgb(255, 99, 31)',
-  paletteRed: 'rgb(252, 63, 85)',
+  paletteLineRed: 'rgb(252, 63, 85)',
-  paletteMagenta: 'rgb(255, 56, 179)',
+  paletteLineMagenta: 'rgb(255, 56, 179)',
-  palettePurple: 'rgb(182, 56, 255)',
+  paletteLinePurple: 'rgb(182, 56, 255)',
-  paletteNavy: 'rgb(59, 37, 204)',
+  paletteLineNavy: 'rgb(59, 37, 204)',
-  paletteBlue: 'rgb(79, 144, 255)',
+  paletteLineBlue: 'rgb(79, 144, 255)',
-  paletteGreen: 'rgb(16, 203, 134)',
+  paletteLineGreen: 'rgb(16, 203, 134)',
-  paletteGrey: 'rgb(153, 153, 153)',
+  paletteLineWhite: 'rgb(255, 255, 255)',
-  paletteWhite: 'rgb(255, 255, 255)',
+  paletteLineBlack: 'rgb(0, 0, 0)',
-  paletteBlack: 'rgb(0, 0, 0)',
+  paletteLineGrey: 'rgb(153, 153, 153)',
+  paletteShapeYellow: 'rgb(255, 241, 136)',
+  paletteShapeOrange: 'rgb(255, 207, 136)',
+  paletteShapeTangerine: 'rgb(255, 161, 121)',
+  paletteShapeRed: 'rgb(253, 140, 153)',
+  paletteShapeMagenta: 'rgb(255, 136, 209)',
+  paletteShapePurple: 'rgb(211, 136, 255)',
+  paletteShapeNavy: 'rgb(137, 124, 224)',
+  paletteShapeBlue: 'rgb(149, 188, 255)',
+  paletteShapeGreen: 'rgb(112, 224, 182)',
+  paletteShapeWhite: 'rgb(255, 255, 255)',
+  paletteShapeBlack: 'rgb(0, 0, 0)',
+  paletteShapeGrey: 'rgb(194, 194, 194)',
   tooltip: '#EAEAEA',
 } satisfies Omit<AffineTheme, 'editorMode'>;
 

packages/component/src/theme/theme.css.ts

@@ -1,9 +1,19 @@
 import type { AffineCssVariables } from '@affine/component';
 import { globalStyle } from '@vanilla-extract/css';
-import kebabCase from 'kebab-case';
 
 import { darkTheme, lightTheme } from '../styles/theme';
 
+const camelToKebab = (s: string) => {
+  if (typeof s !== 'string') return '';
+  return s
+    .replace(/-/g, '_')
+    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+    .replace(/([A-Z])([A-Z])(?=[a-z])/g, '$1-$2')
+    .toLowerCase()
+    .replace(/(\D+)(\d+)$/g, '$1-$2')
+    .replace(/\s|_/g, '-');
+};
+
 globalStyle('body', {
   color: 'var(--affine-text-primary-color)',
   fontFamily: 'var(--affine-font-family)',
@@ -14,7 +24,7 @@ globalStyle('body', {
 globalStyle('html', {
   vars: {
     ...Object.entries(lightTheme).reduce((variables, [key, value]) => {
-      variables[`--affine-${kebabCase(key)}` as keyof AffineCssVariables] =
+      variables[`--affine-${camelToKebab(key)}` as keyof AffineCssVariables] =
         value;
       return variables;
     }, {} as AffineCssVariables),
@@ -24,7 +34,7 @@ globalStyle('html', {
 globalStyle('html[data-theme="dark"]', {
   vars: {
     ...Object.entries(darkTheme).reduce((variables, [key, value]) => {
-      variables[`--affine-${kebabCase(key)}` as keyof AffineCssVariables] =
+      variables[`--affine-${camelToKebab(key)}` as keyof AffineCssVariables] =
         value;
       return variables;
     }, {} as AffineCssVariables),

yarn.lock

@@ -76,7 +76,6 @@ __metadata:
     concurrently: ^8.0.1
     jest-mock: ^29.5.0
     jotai: ^2.0.4
-    kebab-case: ^1.0.2
     lit: ^2.7.2
     lottie-web: ^5.11.0
     react: ^18.2.0
@@ -16667,13 +16666,6 @@ __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, keyv@npm:^4.5.2":
   version: 4.5.2
   resolution: "keyv@npm:4.5.2"