Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-25 06:18:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: init @toeverything/theme (#2136)

Browse Source
This commit is contained in:
Himself65
2023-04-25 18:44:17 -05:00
committed by GitHub
parent 80f4578f76
commit db52c63d25
34 changed files with 147 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/cli/package.json
+1 -1
View File
@@ -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
+2 -1
View File
@@ -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
View File
@@ -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 -1
View File
@@ -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
+3 -28
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 { 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,
});
packages/component/src/ui/tree-view/styles.ts
+2 -1
View File
@@ -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
+1 -1
View File
@@ -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
Vendored
+1 -1
View File
@@ -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 -1
View File
@@ -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
+1 -1
View File
@@ -4,5 +4,5 @@
"./*": "./src/*"
},
"private": true,
"version": "0.5.4-canary.9"
"version": "0.5.4-canary.10"
}
packages/i18n/package.json
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -5,5 +5,5 @@
"exports": {
"./*.md": "./src/*.md"
},
"version": "0.5.4-canary.9"
"version": "0.5.4-canary.10"
}
packages/theme/package.json
+27
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"
}
}
packages/component/src/styles/theme.ts → packages/theme/src/index.ts
+27 -13
View File
@@ -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<EditorContainer['mode']>;
editorMode: 'page' | 'edgeless';
};
export type AffineCssVariables = {
@@ -228,13 +235,20 @@ export const darkTheme = {
tooltip: '#EAEAEA',
} satisfies Omit<AffineTheme, 'editorMode'>;
export const getTheme: (
themeMode: Theme,
editorMode: NonNullable<EditorContainer['mode']>
) => 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
);
packages/theme/tsconfig.json
+9
View File
@@ -0,0 +1,9 @@
{
"extends": "../../tsconfig.json",
"include": ["./src"],
"references": [
{
"path": "./tsconfig.node.json"
}
]
}
packages/theme/tsconfig.node.json
+9
View File
@@ -0,0 +1,9 @@
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Node",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}
packages/theme/vite.config.ts
+25
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()],
});
packages/workspace/package.json
+1 -1
View File
@@ -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 -1
View File
@@ -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"
},