chore(styles): 添加主题色透明梯度 css 变量

src/styles/antd-vars-tip.scss

@@ -57,6 +57,27 @@
   --antd-color-primary-text: #32bac0;
   --antd-color-primary-text-active: #208f99;
 
+  // 主色透明梯度
+  --antd-color-primary-opacity-5: rgb(50 186 192 / 5%);
+  --antd-color-primary-opacity-10: rgb(50 186 192 / 10%);
+  --antd-color-primary-opacity-15: rgb(50 186 192 / 15%);
+  --antd-color-primary-opacity-20: rgb(50 186 192 / 20%);
+  --antd-color-primary-opacity-25: rgb(50 186 192 / 25%);
+  --antd-color-primary-opacity-30: rgb(50 186 192 / 30%);
+  --antd-color-primary-opacity-35: rgb(50 186 192 / 35%);
+  --antd-color-primary-opacity-40: rgb(50 186 192 / 40%);
+  --antd-color-primary-opacity-45: rgb(50 186 192 / 45%);
+  --antd-color-primary-opacity-50: rgb(50 186 192 / 50%);
+  --antd-color-primary-opacity-55: rgb(50 186 192 / 55%);
+  --antd-color-primary-opacity-60: rgb(50 186 192 / 60%);
+  --antd-color-primary-opacity-65: rgb(50 186 192 / 65%);
+  --antd-color-primary-opacity-70: rgb(50 186 192 / 70%);
+  --antd-color-primary-opacity-75: rgb(50 186 192 / 75%);
+  --antd-color-primary-opacity-80: rgb(50 186 192 / 80%);
+  --antd-color-primary-opacity-85: rgb(50 186 192 / 85%);
+  --antd-color-primary-opacity-90: rgb(50 186 192 / 90%);
+  --antd-color-primary-opacity-95: rgb(50 186 192 / 95%);
+
   // 成功
   --antd-color-success-bg: #f6ffed;
   --antd-color-success-bg-hover: #d9f7be;

src/utils/index.ts

@@ -99,9 +99,56 @@ export const generateThemeCSSVar = (token: GlobalToken, prefix: string): string
       return `--${prefix}-${kebabCase(key)}:${value}${/(size|width|radius|margin|screen|padding)/gi.test(key) ? 'px' : ''}`;
     });
 
+  cssVar.push(...getColorGradientCSSVar(token.colorPrimary, `${prefix}-color-primary`));
+
   return `:root{${cssVar.join(';')}}`;
 };
 
+/**
+ * 根据十六进制值颜色生成透明度为 5%～95% 对应颜色的 css var
+ */
+export const getColorGradientCSSVar = (color: string, prefix: string): string[] => {
+  const rgb = hexToRgb(color);
+
+  if (!rgb) {
+    return [];
+  }
+
+  const cssVar: string[] = [];
+  const { r, g, b } = rgb;
+
+  for (let i = 5; i <= 95; i += 5) {
+    cssVar.push(`--${prefix}-opacity-${i}:rgba(${r}, ${g}, ${b}, ${i / 100})`);
+  }
+
+  return cssVar;
+};
+
+export const hexToRgb = (hex: string): { r: number; g: number; b: number } | null => {
+  const cleanedHex = hex.replace(/^#/, '');
+
+  if (cleanedHex.length !== 3 && cleanedHex.length !== 6) {
+    console.error('Invalid hex color value');
+    return null;
+  }
+
+  let extendedHex = cleanedHex;
+
+  // 将 3 位十六进制扩展为 6 位（例如 #abc -> #aabbcc）
+  if (cleanedHex.length === 3) {
+    extendedHex = cleanedHex
+      .split('')
+      .map((char) => char + char)
+      .join('');
+  }
+
+  const r = parseInt(extendedHex.slice(0, 2), 16);
+  const g = parseInt(extendedHex.slice(2, 4), 16);
+  const b = parseInt(extendedHex.slice(4, 6), 16);
+
+  return { r, g, b };
+};
+
 export const addUnit = (val: number, unit: string = 'px'): string => {
   return val + unit;
 };