feat: init @toeverything/theme (#2136)

.commitlintrc.json

@@ -20,7 +20,8 @@
         "octobase-node",
         "templates",
         "y-indexeddb",
-        "debug"
+        "debug",
+        "theme"
       ]
     ]
   }

.github/labeler.yml

@@ -15,6 +15,8 @@ mod:dev:
 
 mod:workspace: 'packages/workspace/**/*'
 
+mod:theme: 'packages/theme/**/*'
+
 mod:i18n: 'packages/i18n/**/*'
 
 mod:env: 'packages/env/**/*'

apps/electron/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@affine/electron",
   "private": true,
-  "version": "0.5.4-canary.9",
+  "version": "0.5.4-canary.10",
   "author": "affine",
   "description": "AFFiNE App",
   "homepage": "https://github.com/toeverything/AFFiNE",

apps/server/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@affine/server",
   "private": true,
-  "version": "0.5.4-canary.9",
+  "version": "0.5.4-canary.10",
   "description": "Affine Node.js server",
   "type": "module",
   "bin": {

apps/web/next.config.mjs

@@ -85,10 +85,11 @@ const nextConfig = {
     '@affine/debug',
     '@affine/env',
     '@affine/templates',
-    '@toeverything/hooks',
     '@affine/workspace',
     '@affine/jotai',
+    '@toeverything/hooks',
     '@toeverything/y-indexeddb',
+    '@toeverything/theme',
   ],
   publicRuntimeConfig: {
     PROJECT_NAME: process.env.npm_package_name ?? 'AFFiNE',

apps/web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@affine/web",
   "private": true,
-  "version": "0.5.4-canary.9",
+  "version": "0.5.4-canary.10",
   "scripts": {
     "dev": "next dev",
     "build": "next build",

apps/web/src/components/affine/pinboard/pinboard-render/OperationButton.tsx

@@ -1,9 +1,4 @@
-import {
+import { MenuItem, MuiClickAwayListener, PureMenu } from '@affine/component';
-  baseTheme,
-  MenuItem,
-  MuiClickAwayListener,
-  PureMenu,
-} from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import {
   MoreVerticalIcon,
@@ -12,6 +7,7 @@ import {
   PlusIcon,
 } from '@blocksuite/icons';
 import type { PageMeta } from '@blocksuite/store';
+import { baseTheme } from '@toeverything/theme';
 import { useMemo, useRef, useState } from 'react';
 
 import { useBlockSuiteMetaHelper } from '../../../../hooks/affine/use-block-suite-meta-helper';

apps/web/src/components/pure/workspace-slider-bar/style.ts

@@ -1,9 +1,5 @@
-import {
+import { displayFlex, styled, textEllipsis } from '@affine/component';
-  baseTheme,
+import { baseTheme } from '@toeverything/theme';
-  displayFlex,
-  styled,
-  textEllipsis,
-} from '@affine/component';
 import Link from 'next/link';
 
 const macosElectron = environment.isDesktop && environment.isMacOs;

packages/cli/package.json

@@ -15,5 +15,5 @@
   "dependencies": {
     "dotenv": "^16.0.3"
   },
-  "version": "0.5.4-canary.9"
+  "version": "0.5.4-canary.10"
 }

packages/component/package.json

@@ -35,6 +35,7 @@
     "@mui/material": "^5.12.1",
     "@radix-ui/react-avatar": "^1.0.2",
     "@toeverything/hooks": "workspace:*",
+    "@toeverything/theme": "workspace:*",
     "clsx": "^1.2.1",
     "jotai": "^2.0.4",
     "lit": "^2.7.2",
@@ -78,5 +79,5 @@
     "wait-on": "^7.0.1",
     "yjs": "^13.6.0"
   },
-  "version": "0.5.4-canary.9"
+  "version": "0.5.4-canary.10"
 }

packages/component/src/styles/index.ts

@@ -1,6 +1,5 @@
 export * from './helper';
 export * from './mui-theme';
 export * from './MuiThemeProvider';
-export * from './theme';
 export * from './types';
 export * from './utils';

packages/component/src/styles/types.ts

@@ -1,4 +1,4 @@
-import type { AffineTheme } from './theme';
+import type { AffineTheme } from '@toeverything/theme';
 
 export type ThemeProviderProps = {
   defaultTheme?: Theme;

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

@@ -1,19 +1,6 @@
-import type { AffineCssVariables } from '@affine/component';
+import { darkCssVariables, lightCssVariables } from '@toeverything/theme';
 import { globalStyle } from '@vanilla-extract/css';
 
-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)',
@@ -22,21 +9,9 @@ globalStyle('body', {
 });
 
 globalStyle('html', {
-  vars: {
+  vars: lightCssVariables,
-    ...Object.entries(lightTheme).reduce((variables, [key, value]) => {
-      variables[`--affine-${camelToKebab(key)}` as keyof AffineCssVariables] =
-        value;
-      return variables;
-    }, {} as AffineCssVariables),
-  },
 });
 
 globalStyle('html[data-theme="dark"]', {
-  vars: {
+  vars: darkCssVariables,
-    ...Object.entries(darkTheme).reduce((variables, [key, value]) => {
-      variables[`--affine-${camelToKebab(key)}` as keyof AffineCssVariables] =
-        value;
-      return variables;
-    }, {} as AffineCssVariables),
-  },
 });

packages/component/src/ui/tree-view/styles.ts

@@ -1,7 +1,8 @@
 import MuiCollapse from '@mui/material/Collapse';
+import { lightTheme } from '@toeverything/theme';
 import type { CSSProperties } from 'react';
 
-import { alpha, lightTheme, styled } from '../../styles';
+import { alpha, styled } from '../../styles';
 
 export const StyledCollapse = styled(MuiCollapse)<{
   indent?: CSSProperties['paddingLeft'];

packages/debug/package.json

@@ -9,5 +9,5 @@
   "devDependencies": {
     "@types/debug": "^4.1.7"
   },
-  "version": "0.5.4-canary.9"
+  "version": "0.5.4-canary.10"
 }

packages/env/package.json

@@ -21,5 +21,5 @@
   "dependencies": {
     "lit": "^2.7.2"
   },
-  "version": "0.5.4-canary.9"
+  "version": "0.5.4-canary.10"
 }

packages/graphql/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@affine/graphql",
-  "version": "0.0.0",
+  "version": "0.5.4-canary.10",
   "description": "Autogenerated GraphQL client for affine.pro",
   "license": "MPL-2.0",
   "type": "module",

packages/hooks/package.json

@@ -4,5 +4,5 @@
     "./*": "./src/*"
   },
   "private": true,
-  "version": "0.5.4-canary.9"
+  "version": "0.5.4-canary.10"
 }

packages/i18n/package.json

@@ -39,5 +39,5 @@
     "ts-node": "^10.9.1",
     "typescript": "^5.0.4"
   },
-  "version": "0.5.4-canary.9"
+  "version": "0.5.4-canary.10"
 }

packages/jotai/package.json

@@ -20,5 +20,5 @@
     "@blocksuite/store": "*",
     "lottie-web": "*"
   },
-  "version": "0.5.4-canary.9"
+  "version": "0.5.4-canary.10"
 }

packages/octobase-node/package.json

@@ -26,5 +26,5 @@
     "universal": "napi universal",
     "version": "napi version"
   },
-  "version": "0.5.4-canary.9"
+  "version": "0.5.4-canary.10"
 }

packages/templates/package.json

@@ -5,5 +5,5 @@
   "exports": {
     "./*.md": "./src/*.md"
   },
-  "version": "0.5.4-canary.9"
+  "version": "0.5.4-canary.10"
 }

packages/theme/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@toeverything/theme",
+  "version": "0.5.4-canary.10",
+  "type": "module",
+  "scripts": {
+    "build": "vite build"
+  },
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.umd.cjs",
+    "module": "dist/index.js",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js",
+        "require": "./dist/index.umd.cjs"
+      }
+    }
+  },
+  "devDependencies": {
+    "vite": "^4.3.1",
+    "vite-plugin-dts": "^2.3.0"
+  }
+}

packages/theme/src/index.ts

@@ -1,6 +1,13 @@
-import type { EditorContainer } from '@blocksuite/editor';
+export const camelToKebab = (s: string) => {
-
+  if (typeof s !== 'string') return '';
-import type { Theme } from './types';
+  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, '-');
+};
 
 type Kebab<
   T extends string,
@@ -10,7 +17,7 @@ type Kebab<
   : A;
 
 export type AffineTheme = typeof lightTheme & {
-  editorMode: NonNullable<EditorContainer['mode']>;
+  editorMode: 'page' | 'edgeless';
 };
 
 export type AffineCssVariables = {
@@ -228,13 +235,20 @@ export const darkTheme = {
   tooltip: '#EAEAEA',
 } satisfies Omit<AffineTheme, 'editorMode'>;
 
-export const getTheme: (
+export const lightCssVariables = Object.entries(lightTheme).reduce(
-  themeMode: Theme,
+  (variables, [key, value]) => {
-  editorMode: NonNullable<EditorContainer['mode']>
+    variables[`--affine-${camelToKebab(key)}` as keyof AffineCssVariables] =
-) => AffineTheme = (themeMode, editorMode) => {
+      value;
-  return {
+    return variables;
-    editorMode,
+  },
+  {} as AffineCssVariables
+);
 
-    ...(themeMode === 'light' ? lightTheme : darkTheme),
+export const darkCssVariables = Object.entries(darkTheme).reduce(
-  };
+  (variables, [key, value]) => {
-};
+    variables[`--affine-${camelToKebab(key)}` as keyof AffineCssVariables] =
+      value;
+    return variables;
+  },
+  {} as AffineCssVariables
+);

packages/theme/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["./src"],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

packages/theme/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

packages/theme/vite.config.ts

@@ -0,0 +1,25 @@
+import { resolve } from 'node:path';
+
+import { fileURLToPath } from 'url';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+
+export default defineConfig({
+  build: {
+    terserOptions: {
+      ecma: 2020,
+    },
+    sourcemap: true,
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      fileName: 'index',
+      name: 'ToEverythingTheme',
+    },
+    rollupOptions: {
+      external: ['idb', 'yjs'],
+    },
+  },
+  plugins: [dts()],
+});

packages/workspace/package.json

@@ -38,5 +38,5 @@
     "@types/ws": "^8.5.4",
     "ws": "^8.13.0"
   },
-  "version": "0.5.4-canary.9"
+  "version": "0.5.4-canary.10"
 }

packages/y-indexeddb/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@toeverything/y-indexeddb",
   "type": "module",
-  "version": "0.5.4-canary.9",
+  "version": "0.5.4-canary.10",
   "scripts": {
     "build": "vite build"
   },

scripts/publish.sh

@@ -2,6 +2,7 @@
 
 packages=(
   "y-indexeddb"
+  "theme"
 )
 
 for package in "${packages[@]}"; do

tests/fixtures/package.json

@@ -3,5 +3,5 @@
   "exports": {
     "./*": "./*"
   },
-  "version": "0.5.4-canary.9"
+  "version": "0.5.4-canary.10"
 }

tests/kit/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@affine-test/kit",
   "private": true,
-  "version": "0.5.4-canary.9",
+  "version": "0.5.4-canary.10",
   "exports": {
     "./playwright": "./playwright.ts"
   },

tsconfig.json

@@ -32,7 +32,8 @@
       "@affine-test/kit/*": ["./tests/kit/*"],
       "@affine-test/fixtures/*": ["./tests/fixtures/*"],
       "@toeverything/y-indexeddb": ["./packages/y-indexeddb/src"],
-      "@toeverything/hooks/*": ["./packages/hooks/src/*"]
+      "@toeverything/hooks/*": ["./packages/hooks/src/*"],
+      "@toeverything/theme": ["./packages/theme/src"]
     }
   },
   "references": [
@@ -80,6 +81,9 @@
     },
     {
       "path": "./apps/electron"
+    },
+    {
+      "path": "./packages/theme"
     }
   ],
   "files": [],

yarn.lock

@@ -79,6 +79,7 @@ __metadata:
     "@storybook/test-runner": ^0.10.0
     "@storybook/testing-library": ^0.1.0
     "@toeverything/hooks": "workspace:*"
+    "@toeverything/theme": "workspace:*"
     "@types/react": ^18.0.38
     "@types/react-dnd": ^3.0.2
     "@types/react-dom": 18.0.11
@@ -8228,6 +8229,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@toeverything/theme@workspace:*, @toeverything/theme@workspace:packages/theme":
+  version: 0.0.0-use.local
+  resolution: "@toeverything/theme@workspace:packages/theme"
+  dependencies:
+    vite: ^4.3.1
+    vite-plugin-dts: ^2.3.0
+  languageName: unknown
+  linkType: soft
+
 "@toeverything/y-indexeddb@workspace:*, @toeverything/y-indexeddb@workspace:packages/y-indexeddb":
   version: 0.0.0-use.local
   resolution: "@toeverything/y-indexeddb@workspace:packages/y-indexeddb"