feat: add theme and style

components/theme/themes/shared/genColorMapToken.ts

@@ -0,0 +1,81 @@
+import { TinyColor } from '@ctrl/tinycolor'
+import type { ColorMapToken, SeedToken } from '../../interface'
+import type { GenerateColorMap, GenerateNeutralColorMap } from '../ColorMap'
+
+interface PaletteGenerators {
+  generateColorPalettes: GenerateColorMap
+  generateNeutralColorPalettes: GenerateNeutralColorMap
+}
+
+export default function genColorMapToken(seed: SeedToken, { generateColorPalettes, generateNeutralColorPalettes }: PaletteGenerators): ColorMapToken {
+  const { colorSuccess: colorSuccessBase, colorWarning: colorWarningBase, colorError: colorErrorBase, colorInfo: colorInfoBase, colorPrimary: colorPrimaryBase, colorBgBase, colorTextBase } = seed
+
+  const primaryColors = generateColorPalettes(colorPrimaryBase)
+  const successColors = generateColorPalettes(colorSuccessBase)
+  const warningColors = generateColorPalettes(colorWarningBase)
+  const errorColors = generateColorPalettes(colorErrorBase)
+  const infoColors = generateColorPalettes(colorInfoBase)
+  const neutralColors = generateNeutralColorPalettes(colorBgBase, colorTextBase)
+
+  return {
+    ...neutralColors,
+
+    colorPrimaryBg: primaryColors[1],
+    colorPrimaryBgHover: primaryColors[2],
+    colorPrimaryBorder: primaryColors[3],
+    colorPrimaryBorderHover: primaryColors[4],
+    colorPrimaryHover: primaryColors[5],
+    colorPrimary: primaryColors[6],
+    colorPrimaryActive: primaryColors[7],
+    colorPrimaryTextHover: primaryColors[8],
+    colorPrimaryText: primaryColors[9],
+    colorPrimaryTextActive: primaryColors[10],
+
+    colorSuccessBg: successColors[1],
+    colorSuccessBgHover: successColors[2],
+    colorSuccessBorder: successColors[3],
+    colorSuccessBorderHover: successColors[4],
+    colorSuccessHover: successColors[4],
+    colorSuccess: successColors[6],
+    colorSuccessActive: successColors[7],
+    colorSuccessTextHover: successColors[8],
+    colorSuccessText: successColors[9],
+    colorSuccessTextActive: successColors[10],
+
+    colorErrorBg: errorColors[1],
+    colorErrorBgHover: errorColors[2],
+    colorErrorBorder: errorColors[3],
+    colorErrorBorderHover: errorColors[4],
+    colorErrorHover: errorColors[5],
+    colorError: errorColors[6],
+    colorErrorActive: errorColors[7],
+    colorErrorTextHover: errorColors[8],
+    colorErrorText: errorColors[9],
+    colorErrorTextActive: errorColors[10],
+
+    colorWarningBg: warningColors[1],
+    colorWarningBgHover: warningColors[2],
+    colorWarningBorder: warningColors[3],
+    colorWarningBorderHover: warningColors[4],
+    colorWarningHover: warningColors[4],
+    colorWarning: warningColors[6],
+    colorWarningActive: warningColors[7],
+    colorWarningTextHover: warningColors[8],
+    colorWarningText: warningColors[9],
+    colorWarningTextActive: warningColors[10],
+
+    colorInfoBg: infoColors[1],
+    colorInfoBgHover: infoColors[2],
+    colorInfoBorder: infoColors[3],
+    colorInfoBorderHover: infoColors[4],
+    colorInfoHover: infoColors[4],
+    colorInfo: infoColors[6],
+    colorInfoActive: infoColors[7],
+    colorInfoTextHover: infoColors[8],
+    colorInfoText: infoColors[9],
+    colorInfoTextActive: infoColors[10],
+
+    colorBgMask: new TinyColor('#000').setAlpha(0.45).toRgbString(),
+    colorWhite: '#fff'
+  }
+}

components/theme/themes/shared/genCommonMapToken.ts

@@ -0,0 +1,19 @@
+import type { CommonMapToken, SeedToken } from '../../interface'
+import genRadius from './genRadius'
+
+export default function genCommonMapToken(token: SeedToken): CommonMapToken {
+  const { motionUnit, motionBase, borderRadius, lineWidth } = token
+
+  return {
+    // motion
+    motionDurationFast: `${(motionBase + motionUnit).toFixed(1)}s`,
+    motionDurationMid: `${(motionBase + motionUnit * 2).toFixed(1)}s`,
+    motionDurationSlow: `${(motionBase + motionUnit * 3).toFixed(1)}s`,
+
+    // line
+    lineWidthBold: lineWidth + 1,
+
+    // radius
+    ...genRadius(borderRadius)
+  }
+}

components/theme/themes/shared/genControlHeight.ts

@@ -0,0 +1,13 @@
+import type { HeightMapToken, SeedToken } from '../../interface'
+
+const genControlHeight = (token: SeedToken): HeightMapToken => {
+  const { controlHeight } = token
+
+  return {
+    controlHeightSM: controlHeight * 0.75,
+    controlHeightXS: controlHeight * 0.5,
+    controlHeightLG: controlHeight * 1.25
+  }
+}
+
+export default genControlHeight

components/theme/themes/shared/genFontMapToken.ts

@@ -0,0 +1,33 @@
+import type { FontMapToken } from '../../interface'
+import genFontSizes from './genFontSizes'
+
+const genFontMapToken = (fontSize: number): FontMapToken => {
+  const fontSizePairs = genFontSizes(fontSize)
+  const fontSizes = fontSizePairs.map(pair => pair.size)
+  const lineHeights = fontSizePairs.map(pair => pair.lineHeight)
+
+  return {
+    fontSizeSM: fontSizes[0],
+    fontSize: fontSizes[1],
+    fontSizeLG: fontSizes[2],
+    fontSizeXL: fontSizes[3],
+
+    fontSizeHeading1: fontSizes[6],
+    fontSizeHeading2: fontSizes[5],
+    fontSizeHeading3: fontSizes[4],
+    fontSizeHeading4: fontSizes[3],
+    fontSizeHeading5: fontSizes[2],
+
+    lineHeight: lineHeights[1],
+    lineHeightLG: lineHeights[2],
+    lineHeightSM: lineHeights[0],
+
+    lineHeightHeading1: lineHeights[6],
+    lineHeightHeading2: lineHeights[5],
+    lineHeightHeading3: lineHeights[4],
+    lineHeightHeading4: lineHeights[3],
+    lineHeightHeading5: lineHeights[2]
+  }
+}
+
+export default genFontMapToken

components/theme/themes/shared/genFontSizes.ts

@@ -0,0 +1,22 @@
+// https://zhuanlan.zhihu.com/p/32746810
+export default function getFontSizes(base: number) {
+  const fontSizes = new Array(10).fill(null).map((_, index) => {
+    const i = index - 1
+    const baseSize = base * 2.71828 ** (i / 5)
+    const intSize = index > 1 ? Math.floor(baseSize) : Math.ceil(baseSize)
+
+    // Convert to even
+    return Math.floor(intSize / 2) * 2
+  })
+
+  fontSizes[1] = base
+
+  return fontSizes.map(size => {
+    const height = size + 8
+
+    return {
+      size,
+      lineHeight: height / size
+    }
+  })
+}

components/theme/themes/shared/genRadius.ts

@@ -0,0 +1,54 @@
+import type { MapToken } from '../../interface'
+
+const genRadius = (radiusBase: number): Pick<MapToken, 'borderRadiusXS' | 'borderRadiusSM' | 'borderRadiusLG' | 'borderRadius' | 'borderRadiusOuter'> => {
+  let radiusLG = radiusBase
+  let radiusSM = radiusBase
+  let radiusXS = radiusBase
+  let radiusOuter = radiusBase
+
+  // radiusLG
+  if (radiusBase < 6 && radiusBase >= 5) {
+    radiusLG = radiusBase + 1
+  } else if (radiusBase < 16 && radiusBase >= 6) {
+    radiusLG = radiusBase + 2
+  } else if (radiusBase >= 16) {
+    radiusLG = 16
+  }
+
+  // radiusSM
+  if (radiusBase < 7 && radiusBase >= 5) {
+    radiusSM = 4
+  } else if (radiusBase < 8 && radiusBase >= 7) {
+    radiusSM = 5
+  } else if (radiusBase < 14 && radiusBase >= 8) {
+    radiusSM = 6
+  } else if (radiusBase < 16 && radiusBase >= 14) {
+    radiusSM = 7
+  } else if (radiusBase >= 16) {
+    radiusSM = 8
+  }
+
+  // radiusXS
+  if (radiusBase < 6 && radiusBase >= 2) {
+    radiusXS = 1
+  } else if (radiusBase >= 6) {
+    radiusXS = 2
+  }
+
+  // radiusOuter
+  if (radiusBase > 4 && radiusBase < 8) {
+    radiusOuter = 4
+  } else if (radiusBase >= 8) {
+    radiusOuter = 6
+  }
+
+  return {
+    borderRadius: radiusBase > 16 ? 16 : radiusBase,
+    borderRadiusXS: radiusXS,
+    borderRadiusSM: radiusSM,
+    borderRadiusLG: radiusLG,
+    borderRadiusOuter: radiusOuter
+  }
+}
+
+export default genRadius

components/theme/themes/shared/genSizeMapToken.ts

@@ -0,0 +1,17 @@
+import type { SeedToken, SizeMapToken } from '../../interface'
+
+export default function genSizeMapToken(token: SeedToken): SizeMapToken {
+  const { sizeUnit, sizeStep } = token
+
+  return {
+    sizeXXL: sizeUnit * (sizeStep + 8), // 48
+    sizeXL: sizeUnit * (sizeStep + 4), // 32
+    sizeLG: sizeUnit * (sizeStep + 2), // 24
+    sizeMD: sizeUnit * (sizeStep + 1), // 20
+    sizeMS: sizeUnit * sizeStep, // 16
+    size: sizeUnit * sizeStep, // 16
+    sizeSM: sizeUnit * (sizeStep - 1), // 12
+    sizeXS: sizeUnit * (sizeStep - 2), // 8
+    sizeXXS: sizeUnit * (sizeStep - 3) // 4
+  }
+}