feat: add theme and style

components/theme/themes/default/colorAlgorithm.ts

@@ -0,0 +1,8 @@
+import { TinyColor } from '@ctrl/tinycolor'
+
+export const getAlphaColor = (baseColor: string, alpha: number) => new TinyColor(baseColor).setAlpha(alpha).toRgbString()
+
+export const getSolidColor = (baseColor: string, brightness: number) => {
+  const instance = new TinyColor(baseColor)
+  return instance.darken(brightness).toHexString()
+}

components/theme/themes/default/colors.ts

@@ -0,0 +1,50 @@
+import { generate } from '@ant-design/colors'
+import type { GenerateColorMap, GenerateNeutralColorMap } from '../ColorMap'
+import { getAlphaColor, getSolidColor } from './colorAlgorithm'
+
+export const generateColorPalettes: GenerateColorMap = (baseColor: string) => {
+  const colors = generate(baseColor)
+  return {
+    1: colors[0],
+    2: colors[1],
+    3: colors[2],
+    4: colors[3],
+    5: colors[4],
+    6: colors[5],
+    7: colors[6],
+    8: colors[4],
+    9: colors[5],
+    10: colors[6]
+    // 8: colors[7],
+    // 9: colors[8],
+    // 10: colors[9],
+  }
+}
+
+export const generateNeutralColorPalettes: GenerateNeutralColorMap = (bgBaseColor: string, textBaseColor: string) => {
+  const colorBgBase = bgBaseColor || '#fff'
+  const colorTextBase = textBaseColor || '#000'
+
+  return {
+    colorBgBase,
+    colorTextBase,
+
+    colorText: getAlphaColor(colorTextBase, 0.88),
+    colorTextSecondary: getAlphaColor(colorTextBase, 0.65),
+    colorTextTertiary: getAlphaColor(colorTextBase, 0.45),
+    colorTextQuaternary: getAlphaColor(colorTextBase, 0.25),
+
+    colorFill: getAlphaColor(colorTextBase, 0.15),
+    colorFillSecondary: getAlphaColor(colorTextBase, 0.06),
+    colorFillTertiary: getAlphaColor(colorTextBase, 0.04),
+    colorFillQuaternary: getAlphaColor(colorTextBase, 0.02),
+
+    colorBgLayout: getSolidColor(colorBgBase, 4),
+    colorBgContainer: getSolidColor(colorBgBase, 0),
+    colorBgElevated: getSolidColor(colorBgBase, 0),
+    colorBgSpotlight: getAlphaColor(colorTextBase, 0.85),
+
+    colorBorder: getSolidColor(colorBgBase, 15),
+    colorBorderSecondary: getSolidColor(colorBgBase, 6)
+  }
+}

components/theme/themes/default/index.ts

@@ -0,0 +1,46 @@
+import { generate } from '@ant-design/colors'
+import genControlHeight from '../shared/genControlHeight'
+import genSizeMapToken from '../shared/genSizeMapToken'
+import type { ColorPalettes, MapToken, PresetColorType, SeedToken } from '../../interface'
+import { defaultPresetColors } from '../seed'
+import genColorMapToken from '../shared/genColorMapToken'
+import genCommonMapToken from '../shared/genCommonMapToken'
+import genFontMapToken from '../shared/genFontMapToken'
+import { generateColorPalettes, generateNeutralColorPalettes } from './colors'
+
+export default function derivative(token: SeedToken): MapToken {
+  const colorPalettes = Object.keys(defaultPresetColors)
+    .map((colorKey: keyof PresetColorType) => {
+      const colors = generate(token[colorKey])
+
+      return new Array(10).fill(1).reduce((prev, _, i) => {
+        prev[`${colorKey}-${i + 1}`] = colors[i]
+        return prev
+      }, {}) as ColorPalettes
+    })
+    .reduce((prev, cur) => {
+      prev = {
+        ...prev,
+        ...cur
+      }
+      return prev
+    }, {} as ColorPalettes)
+
+  return {
+    ...token,
+    ...colorPalettes,
+    // Colors
+    ...genColorMapToken(token, {
+      generateColorPalettes,
+      generateNeutralColorPalettes
+    }),
+    // Font
+    ...genFontMapToken(token.fontSize),
+    // Size
+    ...genSizeMapToken(token),
+    // Height
+    ...genControlHeight(token),
+    // Others
+    ...genCommonMapToken(token)
+  }
+}