From db52c63d25d249d18fba73012047656be616af2f Mon Sep 17 00:00:00 2001 From: Himself65 Date: Tue, 25 Apr 2023 18:44:17 -0500 Subject: [PATCH] feat: init `@toeverything/theme` (#2136) --- .commitlintrc.json | 3 +- .github/labeler.yml | 2 + apps/electron/package.json | 2 +- apps/server/package.json | 2 +- apps/web/next.config.mjs | 3 +- apps/web/package.json | 2 +- .../pinboard-render/OperationButton.tsx | 8 +--- .../pure/workspace-slider-bar/style.ts | 8 +--- packages/cli/package.json | 2 +- packages/component/package.json | 3 +- packages/component/src/styles/index.ts | 1 - packages/component/src/styles/types.ts | 2 +- packages/component/src/theme/theme.css.ts | 31 ++------------ packages/component/src/ui/tree-view/styles.ts | 3 +- packages/debug/package.json | 2 +- packages/env/package.json | 2 +- packages/graphql/package.json | 2 +- packages/hooks/package.json | 2 +- packages/i18n/package.json | 2 +- packages/jotai/package.json | 2 +- packages/octobase-node/package.json | 2 +- packages/templates/package.json | 2 +- packages/theme/package.json | 27 +++++++++++++ .../styles/theme.ts => theme/src/index.ts} | 40 +++++++++++++------ packages/theme/tsconfig.json | 9 +++++ packages/theme/tsconfig.node.json | 9 +++++ packages/theme/vite.config.ts | 25 ++++++++++++ packages/workspace/package.json | 2 +- packages/y-indexeddb/package.json | 2 +- scripts/publish.sh | 1 + tests/fixtures/package.json | 2 +- tests/kit/package.json | 2 +- tsconfig.json | 6 ++- yarn.lock | 10 +++++ 34 files changed, 147 insertions(+), 76 deletions(-) create mode 100644 packages/theme/package.json rename packages/{component/src/styles/theme.ts => theme/src/index.ts} (90%) create mode 100644 packages/theme/tsconfig.json create mode 100644 packages/theme/tsconfig.node.json create mode 100644 packages/theme/vite.config.ts diff --git a/.commitlintrc.json b/.commitlintrc.json index 742dc0a05..94cc32357 100644 --- a/.commitlintrc.json +++ b/.commitlintrc.json @@ -20,7 +20,8 @@ "octobase-node", "templates", "y-indexeddb", - "debug" + "debug", + "theme" ] ] } diff --git a/.github/labeler.yml b/.github/labeler.yml index 342f028bb..7d9af931c 100644 --- a/.github/labeler.yml +++ b/.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/**/*' diff --git a/apps/electron/package.json b/apps/electron/package.json index e58dc3a4e..9f346899b 100644 --- a/apps/electron/package.json +++ b/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", diff --git a/apps/server/package.json b/apps/server/package.json index f1b9ef011..bb5a2c921 100644 --- a/apps/server/package.json +++ b/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": { diff --git a/apps/web/next.config.mjs b/apps/web/next.config.mjs index 2fdadaf9c..0c58730d4 100644 --- a/apps/web/next.config.mjs +++ b/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', diff --git a/apps/web/package.json b/apps/web/package.json index f407dff74..48ee37ed1 100644 --- a/apps/web/package.json +++ b/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", diff --git a/apps/web/src/components/affine/pinboard/pinboard-render/OperationButton.tsx b/apps/web/src/components/affine/pinboard/pinboard-render/OperationButton.tsx index af3cca9a0..b4c22e62d 100644 --- a/apps/web/src/components/affine/pinboard/pinboard-render/OperationButton.tsx +++ b/apps/web/src/components/affine/pinboard/pinboard-render/OperationButton.tsx @@ -1,9 +1,4 @@ -import { - baseTheme, - MenuItem, - MuiClickAwayListener, - PureMenu, -} from '@affine/component'; +import { 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'; diff --git a/apps/web/src/components/pure/workspace-slider-bar/style.ts b/apps/web/src/components/pure/workspace-slider-bar/style.ts index d340d7db1..1a5ff0a36 100644 --- a/apps/web/src/components/pure/workspace-slider-bar/style.ts +++ b/apps/web/src/components/pure/workspace-slider-bar/style.ts @@ -1,9 +1,5 @@ -import { - baseTheme, - displayFlex, - styled, - textEllipsis, -} from '@affine/component'; +import { displayFlex, styled, textEllipsis } from '@affine/component'; +import { baseTheme } from '@toeverything/theme'; import Link from 'next/link'; const macosElectron = environment.isDesktop && environment.isMacOs; diff --git a/packages/cli/package.json b/packages/cli/package.json index 43e2b5fdb..f15b355a8 100644 --- a/packages/cli/package.json +++ b/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" } diff --git a/packages/component/package.json b/packages/component/package.json index 43ad60880..5d4b229dc 100644 --- a/packages/component/package.json +++ b/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" } diff --git a/packages/component/src/styles/index.ts b/packages/component/src/styles/index.ts index be584a872..9b192ad89 100644 --- a/packages/component/src/styles/index.ts +++ b/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'; diff --git a/packages/component/src/styles/types.ts b/packages/component/src/styles/types.ts index df85a0c57..13f0721fa 100644 --- a/packages/component/src/styles/types.ts +++ b/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; diff --git a/packages/component/src/theme/theme.css.ts b/packages/component/src/theme/theme.css.ts index 2339a0f0f..3bc8b0dbb 100644 --- a/packages/component/src/theme/theme.css.ts +++ b/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: { - ...Object.entries(lightTheme).reduce((variables, [key, value]) => { - variables[`--affine-${camelToKebab(key)}` as keyof AffineCssVariables] = - value; - return variables; - }, {} as AffineCssVariables), - }, + vars: lightCssVariables, }); globalStyle('html[data-theme="dark"]', { - vars: { - ...Object.entries(darkTheme).reduce((variables, [key, value]) => { - variables[`--affine-${camelToKebab(key)}` as keyof AffineCssVariables] = - value; - return variables; - }, {} as AffineCssVariables), - }, + vars: darkCssVariables, }); diff --git a/packages/component/src/ui/tree-view/styles.ts b/packages/component/src/ui/tree-view/styles.ts index 2bc08c311..59e703993 100644 --- a/packages/component/src/ui/tree-view/styles.ts +++ b/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']; diff --git a/packages/debug/package.json b/packages/debug/package.json index c7aa10cd7..3bd634313 100644 --- a/packages/debug/package.json +++ b/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" } diff --git a/packages/env/package.json b/packages/env/package.json index b9b1b4004..d3ebc72cd 100644 --- a/packages/env/package.json +++ b/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" } diff --git a/packages/graphql/package.json b/packages/graphql/package.json index c4f0fb378..913507c6e 100644 --- a/packages/graphql/package.json +++ b/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", diff --git a/packages/hooks/package.json b/packages/hooks/package.json index f9a9da307..05215b7c7 100644 --- a/packages/hooks/package.json +++ b/packages/hooks/package.json @@ -4,5 +4,5 @@ "./*": "./src/*" }, "private": true, - "version": "0.5.4-canary.9" + "version": "0.5.4-canary.10" } diff --git a/packages/i18n/package.json b/packages/i18n/package.json index 5fb3be1ac..ae261a6b3 100644 --- a/packages/i18n/package.json +++ b/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" } diff --git a/packages/jotai/package.json b/packages/jotai/package.json index c25760071..b1e304265 100644 --- a/packages/jotai/package.json +++ b/packages/jotai/package.json @@ -20,5 +20,5 @@ "@blocksuite/store": "*", "lottie-web": "*" }, - "version": "0.5.4-canary.9" + "version": "0.5.4-canary.10" } diff --git a/packages/octobase-node/package.json b/packages/octobase-node/package.json index af379bc27..19ccda348 100644 --- a/packages/octobase-node/package.json +++ b/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" } diff --git a/packages/templates/package.json b/packages/templates/package.json index acea79ca5..da2a1e314 100644 --- a/packages/templates/package.json +++ b/packages/templates/package.json @@ -5,5 +5,5 @@ "exports": { "./*.md": "./src/*.md" }, - "version": "0.5.4-canary.9" + "version": "0.5.4-canary.10" } diff --git a/packages/theme/package.json b/packages/theme/package.json new file mode 100644 index 000000000..576b831e7 --- /dev/null +++ b/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" + } +} diff --git a/packages/component/src/styles/theme.ts b/packages/theme/src/index.ts similarity index 90% rename from packages/component/src/styles/theme.ts rename to packages/theme/src/index.ts index 134e268e3..27b3d4b46 100644 --- a/packages/component/src/styles/theme.ts +++ b/packages/theme/src/index.ts @@ -1,6 +1,13 @@ -import type { EditorContainer } from '@blocksuite/editor'; - -import type { Theme } from './types'; +export 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, '-'); +}; type Kebab< T extends string, @@ -10,7 +17,7 @@ type Kebab< : A; export type AffineTheme = typeof lightTheme & { - editorMode: NonNullable; + editorMode: 'page' | 'edgeless'; }; export type AffineCssVariables = { @@ -228,13 +235,20 @@ export const darkTheme = { tooltip: '#EAEAEA', } satisfies Omit; -export const getTheme: ( - themeMode: Theme, - editorMode: NonNullable -) => AffineTheme = (themeMode, editorMode) => { - return { - editorMode, +export const lightCssVariables = Object.entries(lightTheme).reduce( + (variables, [key, value]) => { + variables[`--affine-${camelToKebab(key)}` as keyof AffineCssVariables] = + value; + return variables; + }, + {} 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 +); diff --git a/packages/theme/tsconfig.json b/packages/theme/tsconfig.json new file mode 100644 index 000000000..49909da10 --- /dev/null +++ b/packages/theme/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.json", + "include": ["./src"], + "references": [ + { + "path": "./tsconfig.node.json" + } + ] +} diff --git a/packages/theme/tsconfig.node.json b/packages/theme/tsconfig.node.json new file mode 100644 index 000000000..9d31e2aed --- /dev/null +++ b/packages/theme/tsconfig.node.json @@ -0,0 +1,9 @@ +{ + "compilerOptions": { + "composite": true, + "module": "ESNext", + "moduleResolution": "Node", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/packages/theme/vite.config.ts b/packages/theme/vite.config.ts new file mode 100644 index 000000000..2cee6fa61 --- /dev/null +++ b/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()], +}); diff --git a/packages/workspace/package.json b/packages/workspace/package.json index 38e236136..883920e9e 100644 --- a/packages/workspace/package.json +++ b/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" } diff --git a/packages/y-indexeddb/package.json b/packages/y-indexeddb/package.json index de14192ed..0b6d66c1d 100644 --- a/packages/y-indexeddb/package.json +++ b/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" }, diff --git a/scripts/publish.sh b/scripts/publish.sh index a4a2deedc..0fe0a9043 100755 --- a/scripts/publish.sh +++ b/scripts/publish.sh @@ -2,6 +2,7 @@ packages=( "y-indexeddb" + "theme" ) for package in "${packages[@]}"; do diff --git a/tests/fixtures/package.json b/tests/fixtures/package.json index 267a78590..7ea52fe81 100644 --- a/tests/fixtures/package.json +++ b/tests/fixtures/package.json @@ -3,5 +3,5 @@ "exports": { "./*": "./*" }, - "version": "0.5.4-canary.9" + "version": "0.5.4-canary.10" } diff --git a/tests/kit/package.json b/tests/kit/package.json index a454e2ad8..c014ce662 100644 --- a/tests/kit/package.json +++ b/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" }, diff --git a/tsconfig.json b/tsconfig.json index a88040630..2fc98ec3d 100644 --- a/tsconfig.json +++ b/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": [], diff --git a/yarn.lock b/yarn.lock index 0d73573d0..778dab546 100644 --- a/yarn.lock +++ b/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"