diff --git a/src/Highlighter/theme.ts b/src/Highlighter/theme.ts index 126d49c4..ff66bcfb 100644 --- a/src/Highlighter/theme.ts +++ b/src/Highlighter/theme.ts @@ -1,6 +1,6 @@ import { ThemeAppearance } from 'antd-style'; -import { colorScales } from '@/styles/colors/colors'; +import { colorScales } from '@/styles/colors'; export const themeConfig: any = (isDarkMode: ThemeAppearance) => { const type = isDarkMode ? 'dark' : 'light'; diff --git a/src/styles/colors/colors.ts b/src/styles/colors.ts similarity index 100% rename from src/styles/colors/colors.ts rename to src/styles/colors.ts diff --git a/src/styles/colors/generateColorPalette.ts b/src/styles/colors/generateColorPalette.ts deleted file mode 100644 index 69441bb8..00000000 --- a/src/styles/colors/generateColorPalette.ts +++ /dev/null @@ -1,55 +0,0 @@ -import { AliasToken } from 'antd/es/theme/interface'; -import { capitalize } from 'lodash-es'; - -import { ColorScaleItem } from '@/styles/colors/colors'; - -export const generateColorPalette = ({ - type, - scale, - appearance, -}: { - appearance: 'light' | 'dark'; - scale: ColorScaleItem; - type: 'Primary' | 'Success' | 'Warning' | 'Error' | 'Info' | string; -}): Partial => { - const name = capitalize(type); - const isDarkMode = appearance === 'dark'; - return { - [`color${name}Bg`]: scale[appearance][1], - [`color${name}BgHover`]: scale[appearance][2], - [`color${name}Border`]: scale[appearance][4], - [`color${name}BorderHover`]: scale[appearance][isDarkMode ? 5 : 3], - [`color${name}Hover`]: scale[appearance][isDarkMode ? 10 : 8], - [`color${name}`]: scale[appearance][9], - [`color${name}Active`]: scale[appearance][isDarkMode ? 7 : 10], - [`color${name}TextHover`]: scale[appearance][isDarkMode ? 10 : 8], - [`color${name}Text`]: scale[appearance][9], - [`color${name}TextActive`]: scale[appearance][isDarkMode ? 7 : 10], - }; -}; - -export const generateColorNeutralPalette = ({ - scale, - appearance, -}: { - appearance: 'light' | 'dark'; - scale: ColorScaleItem; -}): Partial => { - return { - colorBgContainer: appearance === 'dark' ? scale[appearance][1] : scale[appearance][0], - colorBgElevated: appearance === 'dark' ? scale[appearance][2] : scale[appearance][0], - colorBgLayout: appearance === 'dark' ? scale[appearance][0] : scale[appearance][1], - colorBgMask: scale.lightA[8], - colorBgSpotlight: scale[appearance][5], - colorBorder: scale[appearance][4], - colorBorderSecondary: scale[appearance][3], - colorFill: scale[`${appearance}A`][3], - colorFillQuaternary: scale[`${appearance}A`][0], - colorFillSecondary: scale[`${appearance}A`][2], - colorFillTertiary: scale[`${appearance}A`][1], - colorText: scale[appearance][12], - colorTextQuaternary: scale[appearance][6], - colorTextSecondary: scale[appearance][10], - colorTextTertiary: scale[appearance][8], - }; -}; diff --git a/src/styles/colors/neutralColors.ts b/src/styles/colors/neutralColors.ts deleted file mode 100644 index 6a03b2bc..00000000 --- a/src/styles/colors/neutralColors.ts +++ /dev/null @@ -1,322 +0,0 @@ -import type { ColorScaleItem } from './colors'; - -export interface NeutralColorScales { - mauve: ColorScaleItem; - olive: ColorScaleItem; - sage: ColorScaleItem; - sand: ColorScaleItem; - slate: ColorScaleItem; -} - -export const neutralColorScales: NeutralColorScales = { - mauve: { - dark: [ - '#1c1b1e', - '#252528', - '#2f2f32', - '#3a393d', - '#454448', - '#504f53', - '#5b5a5f', - '#67666a', - '#737177', - '#7f7d83', - '#bbb9bd', - '#fcf8fb', - '#ffffff', - ], - darkA: [ - 'rgba(233, 225, 250, 0.12)', - 'rgba(231, 231, 250, 0.16)', - 'rgba(235, 235, 250, 0.2)', - 'rgba(242, 237, 254, 0.24)', - 'rgba(238, 234, 248, 0.29)', - 'rgba(242, 239, 252, 0.33)', - 'rgba(239, 237, 250, 0.38)', - 'rgba(245, 243, 252, 0.42)', - 'rgba(245, 240, 253, 0.47)', - 'rgba(244, 240, 252, 0.52)', - 'rgba(253, 250, 255, 0.74)', - 'rgba(255, 251, 254, 0.99)', - '#ffffff', - ], - light: [ - '#fcf8fb', - '#edeaed', - '#dfdcdf', - '#d1ced2', - '#c2c0c4', - '#b4b2b7', - '#a7a4a9', - '#99979c', - '#8c8a90', - '#7f7d83', - '#4a494d', - '#1c1b1e', - '#111', - ], - lightA: [ - 'rgba(155, 22, 122, 0.03)', - 'rgba(55, 22, 55, 0.09)', - 'rgba(26, 5, 26, 0.14)', - 'rgba(25, 10, 30, 0.2)', - 'rgba(11, 3, 19, 0.25)', - 'rgba(13, 7, 23, 0.31)', - 'rgba(11, 2, 16, 0.36)', - 'rgba(6, 1, 14, 0.41)', - 'rgba(5, 1, 14, 0.46)', - 'rgba(4, 0, 12, 0.51)', - 'rgba(4, 2, 8, 0.72)', - 'rgba(3, 2, 5, 0.9)', - '#111', - ], - }, - olive: { - dark: [ - '#1a1c1b', - '#232624', - '#2d302e', - '#383a38', - '#424542', - '#4d504d', - '#585c58', - '#646763', - '#70736e', - '#7c7f79', - '#b9bab5', - '#faf9f4', - '#ffffff', - ], - darkA: [ - 'rgba(236, 255, 245, 0.11)', - 'rgba(233, 253, 240, 0.15)', - 'rgba(237, 253, 242, 0.19)', - 'rgba(243, 252, 243, 0.23)', - 'rgba(236, 246, 236, 0.28)', - 'rgba(241, 250, 241, 0.32)', - 'rgba(238, 249, 238, 0.37)', - 'rgba(244, 251, 241, 0.41)', - 'rgba(243, 250, 239, 0.46)', - 'rgba(248, 254, 242, 0.5)', - 'rgba(253, 255, 248, 0.73)', - 'rgba(255, 254, 249, 0.98)', - '#ffffff', - ], - light: [ - '#faf9f4', - '#ecebe6', - '#ddddd7', - '#cfcfc9', - '#c0c1bb', - '#b2b4ae', - '#a4a6a0', - '#969993', - '#898c86', - '#7c7f79', - '#484b48', - '#1a1c1b', - '#111', - ], - lightA: [ - 'rgba(155, 135, 35, 0.05)', - 'rgba(65, 55, 5, 0.1)', - 'rgba(43, 43, 5, 0.16)', - 'rgba(37, 37, 10, 0.22)', - 'rgba(22, 25, 3, 0.27)', - 'rgba(14, 21, 2, 0.32)', - 'rgba(16, 21, 5, 0.38)', - 'rgba(11, 18, 4, 0.43)', - 'rgba(9, 15, 3, 0.48)', - 'rgba(8, 13, 2, 0.53)', - 'rgba(1, 5, 1, 0.72)', - 'rgba(1, 3, 2, 0.9)', - '#111', - ], - }, - sage: { - dark: [ - '#1a1c1b', - '#232625', - '#2d302f', - '#373a39', - '#424543', - '#4d504e', - '#585c59', - '#636765', - '#6f7370', - '#7a7f7c', - '#b8bab7', - '#f9f9f7', - '#ffffff', - ], - darkA: [ - 'rgba(236, 255, 245, 0.11)', - 'rgba(233, 253, 247, 0.15)', - 'rgba(237, 253, 247, 0.19)', - 'rgba(239, 252, 248, 0.23)', - 'rgba(236, 246, 239, 0.28)', - 'rgba(241, 250, 244, 0.32)', - 'rgba(238, 249, 241, 0.37)', - 'rgba(241, 251, 246, 0.41)', - 'rgba(241, 250, 243, 0.46)', - 'rgba(244, 254, 248, 0.5)', - 'rgba(252, 255, 251, 0.73)', - 'rgba(254, 254, 252, 0.98)', - '#ffffff', - ], - light: [ - '#f9f9f7', - '#eaebe8', - '#dcddda', - '#cdcfcc', - '#bfc1be', - '#b1b4b0', - '#a3a6a3', - '#959996', - '#888c89', - '#7a7f7c', - '#474b49', - '#1a1c1b', - '#111', - ], - lightA: [ - 'rgba(105, 105, 55, 0.04)', - 'rgba(45, 55, 25, 0.1)', - 'rgba(22, 28, 8, 0.15)', - 'rgba(5, 15, 0, 0.2)', - 'rgba(9, 17, 5, 0.26)', - 'rgba(3, 13, 0, 0.31)', - 'rgba(6, 14, 6, 0.37)', - 'rgba(3, 12, 5, 0.42)', - 'rgba(2, 10, 4, 0.47)', - 'rgba(4, 13, 8, 0.53)', - 'rgba(3, 8, 6, 0.73)', - 'rgba(1, 3, 2, 0.9)', - '#111', - ], - }, - sand: { - dark: [ - '#1c1c18', - '#262521', - '#30302b', - '#3a3a35', - '#45453f', - '#505049', - '#5c5b54', - '#67675f', - '#73726a', - '#7f7e76', - '#bcbab2', - '#fcf9f3', - '#ffffff', - ], - darkA: [ - 'rgba(255, 255, 218, 0.11)', - 'rgba(253, 247, 220, 0.15)', - 'rgba(253, 253, 226, 0.19)', - 'rgba(252, 252, 230, 0.23)', - 'rgba(246, 246, 225, 0.28)', - 'rgba(250, 250, 228, 0.32)', - 'rgba(249, 246, 227, 0.37)', - 'rgba(251, 251, 232, 0.41)', - 'rgba(250, 248, 230, 0.46)', - 'rgba(254, 252, 236, 0.5)', - 'rgba(254, 251, 241, 0.74)', - 'rgba(255, 252, 245, 0.99)', - '#ffffff', - ], - light: [ - '#fcf9f3', - '#edebe4', - '#dfddd5', - '#d1cfc7', - '#c3c1b9', - '#b5b3ab', - '#a7a69d', - '#999890', - '#8c8b83', - '#7f7e76', - '#4b4a44', - '#1c1c18', - '#111', - ], - lightA: [ - 'rgba(195, 135, 15, 0.05)', - 'rgba(91, 73, 10, 0.11)', - 'rgba(67, 55, 8, 0.17)', - 'rgba(46, 37, 0, 0.22)', - 'rgba(41, 34, 5, 0.28)', - 'rgba(31, 25, 0, 0.33)', - 'rgba(29, 27, 4, 0.39)', - 'rgba(23, 21, 3, 0.44)', - 'rgba(20, 18, 2, 0.49)', - 'rgba(18, 16, 1, 0.54)', - 'rgba(12, 10, 2, 0.74)', - 'rgba(6, 6, 1, 0.91)', - '#111', - ], - }, - slate: { - dark: [ - '#1b1c1d', - '#242527', - '#2e2f32', - '#383a3c', - '#434547', - '#4e5052', - '#595b5e', - '#64676a', - '#707276', - '#7b7e82', - '#b8babc', - '#f9f9fa', - '#ffffff', - ], - darkA: [ - 'rgba(225, 233, 242, 0.12)', - 'rgba(225, 231, 244, 0.16)', - 'rgba(230, 235, 250, 0.2)', - 'rgba(233, 242, 250, 0.24)', - 'rgba(239, 246, 254, 0.28)', - 'rgba(236, 242, 248, 0.33)', - 'rgba(241, 246, 254, 0.37)', - 'rgba(238, 245, 252, 0.42)', - 'rgba(238, 243, 251, 0.47)', - 'rgba(241, 247, 255, 0.51)', - 'rgba(249, 251, 254, 0.74)', - 'rgba(254, 254, 255, 0.98)', - '#ffffff', - ], - light: [ - '#f9f9fa', - '#ebebec', - '#dcddde', - '#cecfd0', - '#bfc1c3', - '#b1b3b5', - '#a4a6a8', - '#96989b', - '#898b8e', - '#7b7e82', - '#484a4d', - '#1b1c1d', - '#111', - ], - lightA: [ - 'rgba(55, 55, 88, 0.03)', - 'rgba(5, 5, 17, 0.08)', - 'rgba(5, 12, 19, 0.14)', - 'rgba(10, 15, 20, 0.2)', - 'rgba(9, 17, 24, 0.26)', - 'rgba(3, 10, 16, 0.31)', - 'rgba(2, 8, 13, 0.36)', - 'rgba(5, 10, 17, 0.42)', - 'rgba(4, 8, 15, 0.47)', - 'rgba(1, 7, 15, 0.52)', - 'rgba(1, 4, 8, 0.72)', - 'rgba(2, 3, 4, 0.9)', - '#111', - ], - }, -}; diff --git a/src/styles/customTheme.ts b/src/styles/customTheme.ts deleted file mode 100644 index 68c0fb6e..00000000 --- a/src/styles/customTheme.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { colorScales } from '@/styles/colors/colors'; -import { neutralColorScales } from '@/styles/colors/neutralColors'; - -export const primaryColors = { - blue: colorScales.blue.dark[9], - cyan: colorScales.cyan.dark[9], - geekblue: colorScales.geekblue.dark[9], - gold: colorScales.gold.dark[9], - green: colorScales.green.dark[9], - lime: colorScales.lime.dark[9], - magenta: colorScales.magenta.dark[9], - orange: colorScales.orange.dark[9], - purple: colorScales.purple.dark[9], - red: colorScales.red.dark[9], - volcano: colorScales.volcano.dark[9], - yellow: colorScales.yellow.dark[9], -}; - -export type PrimaryColorsObj = typeof primaryColors; -export type PrimaryColors = keyof PrimaryColorsObj; -export const primaryColorsSwatches = [ - primaryColors.red, - primaryColors.orange, - primaryColors.gold, - primaryColors.yellow, - primaryColors.lime, - primaryColors.green, - primaryColors.cyan, - primaryColors.blue, - primaryColors.geekblue, - primaryColors.purple, - primaryColors.magenta, - primaryColors.volcano, -]; -export const neutralColors = { - mauve: neutralColorScales.mauve.dark[9], - olive: neutralColorScales.olive.dark[9], - sage: neutralColorScales.sage.dark[9], - sand: neutralColorScales.sand.dark[9], - slate: neutralColorScales.slate.dark[9], -}; -export const neutralColorsSwatches = [ - neutralColors.mauve, - neutralColors.slate, - neutralColors.sage, - neutralColors.olive, - neutralColors.sand, -]; - -export type NeutralColorsObj = typeof neutralColors; -export type NeutralColors = keyof NeutralColorsObj; - -export const findCustomThemeName = (type: 'primary' | 'neutral', value: string) => { - const res = type === 'primary' ? primaryColors : neutralColors; - const result = Object.entries(res).find((item) => item[1] === value); - return result?.[0]; -}; diff --git a/src/styles/index.ts b/src/styles/index.ts index 1c3205ad..63738ce6 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1,6 +1 @@ -export { colorScales, colorScales as colors } from './colors/colors'; -export { generateColorNeutralPalette, generateColorPalette } from './colors/generateColorPalette'; -export { neutralColorScales } from './colors/neutralColors'; -export * from './customTheme'; -export { generateCustomStylish as lobeCustomStylish } from './theme/customStylish'; -export { generateCustomToken as lobeCustomToken } from './theme/customToken'; +export { colorScales } from './colors'; diff --git a/src/styles/theme/algorithms/darkAlgorithm.ts b/src/styles/theme/algorithms/darkAlgorithm.ts deleted file mode 100644 index ff3166a7..00000000 --- a/src/styles/theme/algorithms/darkAlgorithm.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { MappingAlgorithm } from 'antd/es/theme/interface'; - -import { - NeutralColors, - PrimaryColors, - generateColorNeutralPalette, - generateColorPalette, - neutralColorScales, -} from '@/styles'; -import { ColorScaleItem, colorScales } from '@/styles/colors/colors'; -import darkBaseToken from '@/styles/theme/token/dark'; - -export const darkAlgorithm: MappingAlgorithm = (seedToken, mapToken) => { - const primaryColor = (seedToken as any).primaryColor as PrimaryColors; - const neutralColor = (seedToken as any).neutralColor as NeutralColors; - - let primaryTokens = {}; - let neutralTokens = {}; - - // generate primary color Token with colorPrimary - const primaryScale: ColorScaleItem = colorScales[primaryColor]; - - if (primaryScale) { - primaryTokens = generateColorPalette({ - appearance: 'dark', - scale: primaryScale, - type: 'Primary', - }); - } - - // generate neutral color Token with colorBgBase - const neutralScale = neutralColorScales[neutralColor]; - if (neutralScale) { - neutralTokens = generateColorNeutralPalette({ appearance: 'dark', scale: neutralScale }); - } - - return { - ...mapToken!, - ...darkBaseToken, - ...primaryTokens, - ...neutralTokens, - }; -}; diff --git a/src/styles/theme/algorithms/lightAlgorithm.ts b/src/styles/theme/algorithms/lightAlgorithm.ts deleted file mode 100644 index e52f88fd..00000000 --- a/src/styles/theme/algorithms/lightAlgorithm.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { MappingAlgorithm } from 'antd/es/theme/interface'; - -import { - NeutralColors, - PrimaryColors, - generateColorNeutralPalette, - generateColorPalette, - neutralColorScales, -} from '@/styles'; -import { ColorScaleItem, colorScales } from '@/styles/colors/colors'; -import lightBaseToken from '@/styles/theme/token/light'; - -export const lightAlgorithm: MappingAlgorithm = (seedToken, mapToken) => { - const primaryColor = (seedToken as any).primaryColor as PrimaryColors; - const neutralColor = (seedToken as any).neutralColor as NeutralColors; - - let primaryTokens = {}; - let neutralTokens = {}; - const primaryScale: ColorScaleItem = colorScales[primaryColor]; - - if (primaryScale) { - primaryTokens = generateColorPalette({ - appearance: 'light', - scale: primaryScale, - type: 'Primary', - }); - } - - const neutralScale = neutralColorScales[neutralColor]; - if (neutralScale) { - neutralTokens = generateColorNeutralPalette({ appearance: 'light', scale: neutralScale }); - } - - return { - ...mapToken!, - ...lightBaseToken, - ...primaryTokens, - ...neutralTokens, - }; -}; diff --git a/src/styles/theme/antdTheme.ts b/src/styles/theme/antdTheme.ts deleted file mode 100644 index b9869784..00000000 --- a/src/styles/theme/antdTheme.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { ThemeConfig } from 'antd'; -import { ThemeAppearance } from 'antd-style'; - -import { NeutralColors, PrimaryColors } from '@/styles'; - -import { darkAlgorithm } from './algorithms/darkAlgorithm'; -import { lightAlgorithm } from './algorithms/lightAlgorithm'; -import { baseToken } from './token/base'; - -export interface LobeAntdThemeParams { - appearance: ThemeAppearance; - neutralColor?: NeutralColors; - primaryColor?: PrimaryColors; -} - -/** - * create A LobeHub Style Antd Theme Object - * @param neutralColor - * @param appearance - * @param primaryColor - */ -export const createLobeAntdTheme = ({ - neutralColor, - appearance, - primaryColor, -}: LobeAntdThemeParams): ThemeConfig => { - const isDark = appearance === 'dark'; - - return { - algorithm: isDark ? darkAlgorithm : lightAlgorithm, - token: { - ...baseToken, - // @ts-ignore - neutralColor, - primaryColor, - }, - }; -}; diff --git a/src/styles/theme/customStylish.ts b/src/styles/theme/customStylish.ts deleted file mode 100644 index 29378e3b..00000000 --- a/src/styles/theme/customStylish.ts +++ /dev/null @@ -1,244 +0,0 @@ -import { GetCustomStylish, keyframes } from 'antd-style'; - -import { LobeCustomStylish } from '@/types/customStylish'; - -export const generateCustomStylish: GetCustomStylish = ({ - css, - token, - isDarkMode, -}) => { - const gradient = keyframes` - 0% { - background-position: 0% 50%; - } - 50% { - background-position: 100% 50%; - } - 100% { - background-position: 0% 50%; - } - `; - - const cyanColor = isDarkMode ? token.cyan9A : token.cyan11A; - const cyanBackground = isDarkMode ? token.cyan2A : token.cyan6A; - - return { - blur: css` - backdrop-filter: saturate(180%) blur(10px); - `, - blurStrong: css` - backdrop-filter: blur(36px); - `, - bottomScrollbar: css` - ::-webkit-scrollbar { - width: 0; - height: 4px; - background-color: transparent; - - &-thumb { - background-color: ${token.colorFill}; - border-radius: 4px; - transition: background-color 500ms ${token.motionEaseOut}; - } - - &-corner { - display: none; - width: 0; - height: 0; - } - } - `, - gradientAnimation: css` - background-image: linear-gradient( - -45deg, - ${token.gold}, - ${token.magenta}, - ${token.geekblue}, - ${token.cyan} - ); - background-size: 400% 400%; - border-radius: inherit; - animation: 5s ${gradient} 5s ease infinite; - `, - markdown: css` - color: ${token.colorText}; - - h1, - h2, - h3, - h4, - h5 { - font-weight: 600; - } - - p { - margin-block-start: 0; - margin-block-end: 0; - - font-size: 14px; - line-height: 1.8; - color: ${token.colorText}; - word-break: break-all; - word-wrap: break-word; - - + * { - margin-block-end: 0.5em; - } - } - - > *:last-child { - margin-bottom: 0 !important; - } - - blockquote { - margin: 16px 0; - padding: 0 12px; - - p { - font-style: italic; - color: ${token.colorTextDescription}; - } - } - - p:not(:last-child) { - margin-bottom: 1em; - } - - a { - color: ${token.colorLink}; - - &:hover { - color: ${token.colorLinkHover}; - } - - &:active { - color: ${token.colorLinkActive}; - } - } - - img { - max-width: 100%; - } - - pre, - [data-code-type='highlighter'] { - border: none; - border-radius: ${token.borderRadius}px; - - > code { - padding: 0 !important; - border: none !important; - } - } - - > :not([data-code-type='highlighter']) code { - padding: 2px 6px; - - font-size: ${token.fontSizeSM}px; - color: ${cyanColor}; - - background: ${cyanBackground}; - border: 1px solid ${isDarkMode ? token.cyan1A : token.cyan6A}; - border-radius: ${token.borderRadiusSM}px; - } - - table { - border-spacing: 0; - - width: 100%; - margin-block-start: 1em; - margin-block-end: 1em; - margin-inline-start: 0; - margin-inline-end: 0; - padding: 8px; - - border: 1px solid ${token.colorBorderSecondary}; - border-radius: ${token.borderRadius}px; - - code { - display: inline-flex; - } - } - - th, - td { - padding-block-start: 10px; - padding-block-end: 10px; - padding-inline-start: 16px; - padding-inline-end: 16px; - } - - thead { - tr { - th { - background: ${token.colorFillTertiary}; - - &:first-child { - border-top-left-radius: ${token.borderRadius}px; - border-bottom-left-radius: ${token.borderRadius}px; - } - - &:last-child { - border-top-right-radius: ${token.borderRadius}px; - border-bottom-right-radius: ${token.borderRadius}px; - } - } - } - } - - > ol > li::marker { - color: ${isDarkMode ? token.cyan9A : token.cyan10A} !important; - } - - > ul > li { - line-height: 1.8; - list-style-type: disc; - - &::marker { - color: ${isDarkMode ? token.cyan9A : token.cyan10A} !important; - } - } - - ol, - ul { - > li::marker { - color: ${token.colorTextDescription}; - } - } - - details { - margin-bottom: 1em; - padding: 12px 16px; - - background: ${token.colorFillTertiary}; - border: 1px solid ${token.colorBorderSecondary}; - border-radius: ${token.borderRadiusLG}px; - - transition: all 400ms ${token.motionEaseOut}; - } - - details[open] { - summary { - padding-bottom: 12px; - border-bottom: 1px solid ${token.colorBorder}; - } - } - `, - noScrollbar: css` - ::-webkit-scrollbar { - display: none; - width: 0; - height: 0; - background-color: transparent; - } - `, - resetLinkColor: css` - cursor: pointer; - color: ${token.colorTextSecondary}; - - &:hover { - color: ${token.colorText}; - } - `, - }; -}; diff --git a/src/styles/theme/customToken.ts b/src/styles/theme/customToken.ts deleted file mode 100644 index 71d9edc9..00000000 --- a/src/styles/theme/customToken.ts +++ /dev/null @@ -1,75 +0,0 @@ -import { GetCustomToken } from 'antd-style'; -import { AliasToken } from 'antd/es/theme/interface'; -import { camelCase } from 'lodash-es'; - -import { ColorScaleItem, colorScales } from '@/styles/colors/colors'; -import { LobeCustomToken } from '@/types/customToken'; - -const generateColorPalette = ({ - name, - scale, - appearance, -}: { - appearance: 'light' | 'dark'; - name: string; - scale: ColorScaleItem; -}) => { - return { - [`${name}Bg`]: scale[`${appearance}A`][1], - [`${name}BgHover`]: scale[`${appearance}A`][2], - [`${name}Border`]: scale[appearance][4], - [`${name}BorderSecondary`]: scale[appearance][3], - [`${name}BorderHover`]: scale[appearance][5], - [`${name}Hover`]: scale[appearance][10], - [`${name}`]: scale[appearance][9], - [`${name}Active`]: scale[appearance][7], - [`${name}TextHover`]: scale[`${appearance}A`][10], - [`${name}Text`]: scale[`${appearance}A`][9], - [`${name}TextActive`]: scale[`${appearance}A`][7], - }; -}; - -const generateCustomColorPalette = ({ - name, - scale, - appearance, -}: { - appearance: 'light' | 'dark'; - name: string; - scale: ColorScaleItem; -}): Partial => { - const colorStepPalette: { [key: string]: string } = {}; - - for (const [index, color] of scale[appearance].entries()) { - if (index === 0 || index === 12) continue; - - colorStepPalette[`${name}${index}`] = color; - } - for (const [index, color] of scale[`${appearance}A`].entries()) { - if (index === 0 || index === 12) continue; - - colorStepPalette[`${name}${index}A`] = color; - } - - return { - ...colorStepPalette, - ...generateColorPalette({ appearance, name, scale }), - }; -}; - -export const generateCustomToken: GetCustomToken = ({ isDarkMode }) => { - let colorCustomToken: any = {}; - - for (const [type, scale] of Object.entries(colorScales)) { - colorCustomToken = { - ...colorCustomToken, - ...generateCustomColorPalette({ - appearance: isDarkMode ? 'dark' : 'light', - name: camelCase(type), - scale, - }), - }; - } - - return colorCustomToken; -}; diff --git a/src/styles/theme/token/base.ts b/src/styles/theme/token/base.ts deleted file mode 100644 index 5dc5e4ac..00000000 --- a/src/styles/theme/token/base.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { AliasToken } from 'antd/es/theme/interface'; - -const FONT_EMOJI = `"Segoe UI Emoji","Segoe UI Symbol","Apple Color Emoji","Twemoji Mozilla","Noto Color Emoji","Android Emoji"`; -const FONT_EN = `"HarmonyOS Sans","Segoe UI","SF Pro Display",-apple-system,BlinkMacSystemFont,Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif`; -const FONT_CN = `"HarmonyOS Sans SC","PingFang SC","Hiragino Sans GB","Microsoft Yahei UI","Microsoft Yahei","Source Han Sans CN",sans-serif`; -const FONT_CODE = `Hack,ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace`; - -export const baseToken: Partial = { - borderRadius: 5, - borderRadiusLG: 8, - borderRadiusSM: 3, - borderRadiusXS: 3, - controlHeight: 36, - fontFamily: [FONT_EN, FONT_CN, FONT_EMOJI].join(','), - fontFamilyCode: [FONT_CODE, FONT_CN, FONT_EMOJI].join(','), -}; diff --git a/src/styles/theme/token/dark.ts b/src/styles/theme/token/dark.ts deleted file mode 100644 index c9a5238c..00000000 --- a/src/styles/theme/token/dark.ts +++ /dev/null @@ -1,61 +0,0 @@ -import { AliasToken } from 'antd/es/theme/interface'; - -import { colorScales } from '@/styles/colors/colors'; -import { - generateColorNeutralPalette, - generateColorPalette, -} from '@/styles/colors/generateColorPalette'; - -const primaryToken = generateColorPalette({ - appearance: 'dark', - scale: colorScales.bnw, - type: 'Primary', -}); - -const neutralToken = generateColorNeutralPalette({ - appearance: 'dark', - scale: colorScales.gray, -}); - -const successToken = generateColorPalette({ - appearance: 'dark', - scale: colorScales.lime, - type: 'Success', -}); - -const warningToken = generateColorPalette({ - appearance: 'dark', - scale: colorScales.gold, - type: 'Warning', -}); - -const errorToken = generateColorPalette({ - appearance: 'dark', - scale: colorScales.red, - type: 'Error', -}); - -const infoToken = generateColorPalette({ - appearance: 'dark', - scale: colorScales.blue, - type: 'Info', -}); - -const darkBaseToken: Partial = { - ...primaryToken, - ...neutralToken, - ...successToken, - ...warningToken, - ...errorToken, - ...infoToken, - - boxShadow: '0 12px 20px 6px rgb(0 0 0 / 0.08)', - boxShadowSecondary: '0 2px 8px 2px rgb(0 0 0 / 0.07), 0 2px 4px -1px rgb(0 0 0 / 0.04)', - colorLink: infoToken.colorInfoText, - colorLinkActive: infoToken.colorInfoTextActive, - - colorLinkHover: infoToken.colorInfoTextHover, - colorTextLightSolid: neutralToken.colorBgLayout, -}; - -export default darkBaseToken; diff --git a/src/styles/theme/token/light.ts b/src/styles/theme/token/light.ts deleted file mode 100644 index f976236a..00000000 --- a/src/styles/theme/token/light.ts +++ /dev/null @@ -1,62 +0,0 @@ -import { AliasToken } from 'antd/es/theme/interface'; - -import { colorScales } from '@/styles/colors/colors'; -import { - generateColorNeutralPalette, - generateColorPalette, -} from '@/styles/colors/generateColorPalette'; - -const primaryToken = generateColorPalette({ - appearance: 'light', - scale: colorScales.bnw, - type: 'Primary', -}); - -const neutralToken = generateColorNeutralPalette({ - appearance: 'light', - scale: colorScales.gray, -}); - -const successToken = generateColorPalette({ - appearance: 'light', - scale: colorScales.green, - type: 'Success', -}); - -const warningToken = generateColorPalette({ - appearance: 'light', - scale: colorScales.orange, - type: 'Warning', -}); - -const errorToken = generateColorPalette({ - appearance: 'light', - scale: colorScales.volcano, - type: 'Error', -}); - -const infoToken = generateColorPalette({ - appearance: 'light', - scale: colorScales.geekblue, - type: 'Info', -}); - -const lightBaseToken: Partial = { - ...primaryToken, - ...neutralToken, - ...successToken, - ...warningToken, - ...errorToken, - ...infoToken, - - boxShadow: '0 12px 20px 6px rgb(104 112 118 / 0.08)', - boxShadowSecondary: - '0 2px 8px 2px rgb(104 112 118 / 0.07), 0 2px 4px -1px rgb(104 112 118 / 0.04)', - colorLink: infoToken.colorInfoText, - colorLinkActive: infoToken.colorInfoTextActive, - - colorLinkHover: infoToken.colorInfoTextHover, - colorTextLightSolid: neutralToken.colorBgLayout, -}; - -export default lightBaseToken;