Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-14 13:25:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: modify styles & ui components

Browse Source
This commit is contained in:
QiShaoXuan
2022-10-25 11:51:59 +08:00
parent caf4d4dc35
commit cd6a930939
16 changed files with 107 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/app/src/styles/theme.ts
View File

@@ -5,6 +5,7 @@ const basicFontFamily =
'apple-system, BlinkMacSystemFont,Helvetica Neue, Tahoma, PingFang SC, Microsoft Yahei, Arial,Hiragino Sans GB, sans-serif, Apple Color Emoji, Segoe UI Emoji,Segoe UI Symbol, Noto Color Emoji';
export const lightTheme: AffineTheme = {
mode: 'light',
colors: {
primaryColor: '#6880FF',
@@ -43,14 +44,19 @@ export const lightTheme: AffineTheme = {
'4px 4px 7px rgba(58, 76, 92, 0.04), -4px -4px 13px rgba(58, 76, 92, 0.02), 6px 6px 36px rgba(58, 76, 92, 0.06);',
modal:
'4px 4px 7px rgba(58, 76, 92, 0.04), -4px -4px 13px rgba(58, 76, 92, 0.02), 6px 6px 36px rgba(58, 76, 92, 0.06);',
tooltip: '1px 1px 4px rgba(0, 0, 0, 0.14)',
},
space: {
paragraph: '8px',
},
radius: {
popover: '10px',
},
};
export const darkTheme: AffineTheme = {
...lightTheme,
mode: 'dark',
colors: {
primaryColor: '#6880FF',
@@ -77,6 +83,7 @@ export const darkTheme: AffineTheme = {
'0px 1px 10px -6px rgba(24, 39, 75, 0.08), 0px 3px 16px -6px rgba(24, 39, 75, 0.04)',
modal:
'0px 1px 10px -6px rgba(24, 39, 75, 0.08), 0px 3px 16px -6px rgba(24, 39, 75, 0.04)',
tooltip: '1px 1px 4px rgba(0, 0, 0, 0.14)',
},
};
@@ -108,6 +115,7 @@ export const globalThemeVariables: (
'--affine-modal-shadow': theme.shadow.modal,
'--affine-popover-shadow': theme.shadow.popover,
'--affine-tooltip-shadow': theme.shadow.tooltip,
'--affine-font-xs': theme.font.xs, // tiny
'--affine-font-sm': theme.font.sm, // small
@@ -121,5 +129,6 @@ export const globalThemeVariables: (
'--affine-font-family2': theme.font.family2,
'--affine-paragraph-space': theme.space.paragraph,
'--affine-popover-radius': theme.radius.popover,
};
};

12
packages/app/src/styles/types.ts
View File

@@ -12,6 +12,7 @@ export type ThemeProviderValue = {
};
export interface AffineTheme {
mode: Theme;
colors: {
primaryColor: string;
@@ -53,10 +54,14 @@ export interface AffineTheme {
shadow: {
modal: string;
popover: string;
tooltip: string;
};
space: {
paragraph: string;
};
radius: {
popover: string;
};
}
export interface AffineThemeCSSVariables {
@@ -80,8 +85,9 @@ export interface AffineThemeCSSVariables {
'--affine-selected-color': AffineTheme['colors']['selectedColor'];
'--affine-border-color': AffineTheme['colors']['borderColor'];
'--affine-modal-shadow': AffineTheme['shadow']['popover'];
'--affine-popover-shadow': AffineTheme['shadow']['modal'];
'--affine-modal-shadow': AffineTheme['shadow']['modal'];
'--affine-popover-shadow': AffineTheme['shadow']['popover'];
'--affine-tooltip-shadow': AffineTheme['shadow']['tooltip'];
'--affine-font-xs': AffineTheme['font']['xs']; // tiny
'--affine-font-sm': AffineTheme['font']['sm']; // small
@@ -95,6 +101,8 @@ export interface AffineThemeCSSVariables {
'--affine-font-family2': AffineTheme['font']['family2'];
'--affine-paragraph-space': AffineTheme['space']['paragraph'];
'--affine-popover-radius': AffineTheme['radius']['popover'];
}
declare module '@emotion/react' {