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

fix: color variable (#2059)

Browse Source
This commit is contained in:
Flrande
2023-04-21 12:41:43 +08:00
committed by GitHub
parent a5a6203a95
commit 01115f8957
5 changed files with 67 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
packages/component/src/styles/theme.ts
View File

@@ -114,18 +114,30 @@ export const lightTheme = {
tagBlue: 'rgb(225, 239, 255)',
tagPurple: 'rgb(243, 240, 255)',
tagPink: 'rgb(252, 232, 255)',
paletteYellow: 'rgb(255, 232, 56)',
paletteOrange: 'rgb(255, 175, 56)',
paletteTangerine: 'rgb(255, 99, 31)',
paletteRed: 'rgb(252, 63, 85)',
paletteMagenta: 'rgb(255, 56, 179)',
palettePurple: 'rgb(182, 56, 255)',
paletteNavy: 'rgb(59, 37, 204)',
paletteBlue: 'rgb(79, 144, 255)',
paletteGreen: 'rgb(16, 203, 134)',
paletteGrey: 'rgb(153, 153, 153)',
paletteWhite: 'rgb(255, 255, 255)',
paletteBlack: 'rgb(0, 0, 0)',
paletteLineYellow: 'rgb(255, 232, 56)',
paletteLineOrange: 'rgb(255, 175, 56)',
paletteLineTangerine: 'rgb(255, 99, 31)',
paletteLineRed: 'rgb(252, 63, 85)',
paletteLineMagenta: 'rgb(255, 56, 179)',
paletteLinePurple: 'rgb(182, 56, 255)',
paletteLineNavy: 'rgb(59, 37, 204)',
paletteLineBlue: 'rgb(79, 144, 255)',
paletteLineGreen: 'rgb(16, 203, 134)',
paletteLineWhite: 'rgb(255, 255, 255)',
paletteLineBlack: 'rgb(0, 0, 0)',
paletteLineGrey: 'rgb(153, 153, 153)',
paletteShapeYellow: 'rgb(255, 241, 136)',
paletteShapeOrange: 'rgb(255, 207, 136)',
paletteShapeTangerine: 'rgb(255, 161, 121)',
paletteShapeRed: 'rgb(253, 140, 153)',
paletteShapeMagenta: 'rgb(255, 136, 209)',
paletteShapePurple: 'rgb(211, 136, 255)',
paletteShapeNavy: 'rgb(137, 124, 224)',
paletteShapeBlue: 'rgb(149, 188, 255)',
paletteShapeGreen: 'rgb(112, 224, 182)',
paletteShapeWhite: 'rgb(255, 255, 255)',
paletteShapeBlack: 'rgb(0, 0, 0)',
paletteShapeGrey: 'rgb(194, 194, 194)',
tooltip: '#424149',
};
@@ -189,18 +201,30 @@ export const darkTheme = {
tagYellow: 'rgb(187, 165, 61)',
tagOrange: 'rgb(231, 161, 58)',
tagGray: 'rgb(41, 41, 41)',
paletteYellow: 'rgb(255, 232, 56)',
paletteOrange: 'rgb(255, 175, 56)',
paletteTangerine: 'rgb(255, 99, 31)',
paletteRed: 'rgb(252, 63, 85)',
paletteMagenta: 'rgb(255, 56, 179)',
palettePurple: 'rgb(182, 56, 255)',
paletteNavy: 'rgb(59, 37, 204)',
paletteBlue: 'rgb(79, 144, 255)',
paletteGreen: 'rgb(16, 203, 134)',
paletteGrey: 'rgb(153, 153, 153)',
paletteWhite: 'rgb(255, 255, 255)',
paletteBlack: 'rgb(0, 0, 0)',
paletteLineYellow: 'rgb(255, 232, 56)',
paletteLineOrange: 'rgb(255, 175, 56)',
paletteLineTangerine: 'rgb(255, 99, 31)',
paletteLineRed: 'rgb(252, 63, 85)',
paletteLineMagenta: 'rgb(255, 56, 179)',
paletteLinePurple: 'rgb(182, 56, 255)',
paletteLineNavy: 'rgb(59, 37, 204)',
paletteLineBlue: 'rgb(79, 144, 255)',
paletteLineGreen: 'rgb(16, 203, 134)',
paletteLineWhite: 'rgb(255, 255, 255)',
paletteLineBlack: 'rgb(0, 0, 0)',
paletteLineGrey: 'rgb(153, 153, 153)',
paletteShapeYellow: 'rgb(255, 241, 136)',
paletteShapeOrange: 'rgb(255, 207, 136)',
paletteShapeTangerine: 'rgb(255, 161, 121)',
paletteShapeRed: 'rgb(253, 140, 153)',
paletteShapeMagenta: 'rgb(255, 136, 209)',
paletteShapePurple: 'rgb(211, 136, 255)',
paletteShapeNavy: 'rgb(137, 124, 224)',
paletteShapeBlue: 'rgb(149, 188, 255)',
paletteShapeGreen: 'rgb(112, 224, 182)',
paletteShapeWhite: 'rgb(255, 255, 255)',
paletteShapeBlack: 'rgb(0, 0, 0)',
paletteShapeGrey: 'rgb(194, 194, 194)',
tooltip: '#EAEAEA',
} satisfies Omit<AffineTheme, 'editorMode'>;

16
packages/component/src/theme/theme.css.ts
View File

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