feat: init @toeverything/theme (#2136)

This commit is contained in:
Himself65 2023-04-25 18:44:17 -05:00 committed by GitHub
parent 80f4578f76
commit db52c63d25
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
34 changed files with 147 additions and 76 deletions

View File

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

2
.github/labeler.yml vendored
View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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 { useTranslation } from '@affine/i18n';
import { import {
MoreVerticalIcon, MoreVerticalIcon,
@ -12,6 +7,7 @@ import {
PlusIcon, PlusIcon,
} from '@blocksuite/icons'; } from '@blocksuite/icons';
import type { PageMeta } from '@blocksuite/store'; import type { PageMeta } from '@blocksuite/store';
import { baseTheme } from '@toeverything/theme';
import { useMemo, useRef, useState } from 'react'; import { useMemo, useRef, useState } from 'react';
import { useBlockSuiteMetaHelper } from '../../../../hooks/affine/use-block-suite-meta-helper'; import { useBlockSuiteMetaHelper } from '../../../../hooks/affine/use-block-suite-meta-helper';

View File

@ -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'; import Link from 'next/link';
const macosElectron = environment.isDesktop && environment.isMacOs; const macosElectron = environment.isDesktop && environment.isMacOs;

View File

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

View File

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

View File

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

View File

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

View File

@ -1,19 +1,6 @@
import type { AffineCssVariables } from '@affine/component'; import { darkCssVariables, lightCssVariables } from '@toeverything/theme';
import { globalStyle } from '@vanilla-extract/css'; 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', { globalStyle('body', {
color: 'var(--affine-text-primary-color)', color: 'var(--affine-text-primary-color)',
fontFamily: 'var(--affine-font-family)', fontFamily: 'var(--affine-font-family)',
@ -22,21 +9,9 @@ globalStyle('body', {
}); });
globalStyle('html', { 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"]', { 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),
},
}); });

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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"
}
}

View File

@ -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< type Kebab<
T extends string, T extends string,
@ -10,7 +17,7 @@ type Kebab<
: A; : A;
export type AffineTheme = typeof lightTheme & { export type AffineTheme = typeof lightTheme & {
editorMode: NonNullable<EditorContainer['mode']>; editorMode: 'page' | 'edgeless';
}; };
export type AffineCssVariables = { export type AffineCssVariables = {
@ -228,13 +235,20 @@ export const darkTheme = {
tooltip: '#EAEAEA', tooltip: '#EAEAEA',
} satisfies Omit<AffineTheme, 'editorMode'>; } 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
);

View File

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

View File

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

View File

@ -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()],
});

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -79,6 +79,7 @@ __metadata:
"@storybook/test-runner": ^0.10.0 "@storybook/test-runner": ^0.10.0
"@storybook/testing-library": ^0.1.0 "@storybook/testing-library": ^0.1.0
"@toeverything/hooks": "workspace:*" "@toeverything/hooks": "workspace:*"
"@toeverything/theme": "workspace:*"
"@types/react": ^18.0.38 "@types/react": ^18.0.38
"@types/react-dnd": ^3.0.2 "@types/react-dnd": ^3.0.2
"@types/react-dom": 18.0.11 "@types/react-dom": 18.0.11
@ -8228,6 +8229,15 @@ __metadata:
languageName: unknown languageName: unknown
linkType: soft 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": "@toeverything/y-indexeddb@workspace:*, @toeverything/y-indexeddb@workspace:packages/y-indexeddb":
version: 0.0.0-use.local version: 0.0.0-use.local
resolution: "@toeverything/y-indexeddb@workspace:packages/y-indexeddb" resolution: "@toeverything/y-indexeddb@workspace:packages/y-indexeddb"