chore(core): bump @toeverything/theme, add cssVar use case (#5667)

packages/frontend/component/package.json

@@ -44,7 +44,7 @@
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-toolbar": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@toeverything/theme": "^0.7.24",
+    "@toeverything/theme": "^0.7.28",
     "@vanilla-extract/dynamic": "^2.0.3",
     "bytes": "^3.1.2",
     "check-password-strength": "^2.0.7",

packages/frontend/component/src/ui/date-picker/week-date-picker.css.tsx

@@ -1,3 +1,4 @@
+import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
 
 export const weekDatePicker = style({
@@ -36,24 +37,24 @@ export const dayCell = style({
   padding: '2px 4px 1px 4px',
   borderRadius: 4,
 
-  fontFamily: 'var(--affine-font-family)',
+  fontFamily: cssVar('fontFamily'),
   fontWeight: 500,
   fontSize: 12,
 
   selectors: {
     '&:hover': {
-      backgroundColor: 'var(--affine-hover-color)',
+      backgroundColor: cssVar('hoverColor'),
     },
     '&[data-today="true"]:not([data-active="true"])': {
       vars: {
-        '--cell-color': 'var(--affine-brand-color)',
+        '--cell-color': cssVar('brandColor'),
       },
     },
     '&[data-active="true"]': {
       vars: {
-        '--cell-color': 'var(--affine-pure-white)',
+        '--cell-color': cssVar('pureWhite'),
       },
-      background: 'var(--affine-brand-color)',
+      background: cssVar('brandColor'),
     },
 
     // interactive

packages/frontend/core/package.json

@@ -50,7 +50,7 @@
     "@react-hookz/web": "^24.0.0",
     "@sentry/integrations": "^7.83.0",
     "@sentry/react": "^7.83.0",
-    "@toeverything/theme": "^0.7.20",
+    "@toeverything/theme": "^0.7.28",
     "@vanilla-extract/dynamic": "^2.0.3",
     "animejs": "^3.2.2",
     "async-call-rpc": "^6.3.1",