@skyroc/scripts 2.5.0

package/templates/admin-shell/theme/antd-algorithm/seed/index.ts

@@ -0,0 +1,41 @@
+import type { SeedToken } from 'antd/lib/theme/interface';
+
+export const defaultPresetColors: Partial<SeedToken> = {
+  // Blue palette
+  blue: '#3B82F6', // Tailwind blue-500
+  geekblue: '#6366F1', // Indigo for better distinction from blue
+  cyan: '#06B6D4', // Tailwind cyan-500
+
+  // Purple/Pink palette
+  purple: '#8B5CF6', // Tailwind violet-500
+  magenta: '#D946EF', // Tailwind fuchsia-500
+  pink: '#EC4899', // Tailwind pink-500
+
+  // Red/Orange palette
+  red: '#EF4444', // Tailwind red-500
+  orange: '#F97316', // Tailwind orange-500
+  volcano: '#DC2626', // Tailwind red-600
+
+  // Yellow/Gold palette
+  yellow: '#EAB308', // Tailwind yellow-500
+  gold: '#D97706', // Tailwind amber-600
+
+  // Green palette
+  green: '#10B981', // Tailwind emerald-500
+  lime: '#84CC16', // Tailwind lime-500
+
+  // Main Colors
+  colorPrimary: '#6366F1',
+  colorInfo: '#0EA5E9',
+  colorSuccess: '#10B981',
+  colorWarning: '#F59E0B',
+  colorError: '#F43F5E'
+};
+
+export const seedToken: Partial<SeedToken> = {
+  ...defaultPresetColors,
+
+  fontSize: 14,
+
+  borderRadius: 6
+};

package/templates/admin-shell/theme/antd-algorithm/shared/colorAlgorithm.ts

@@ -0,0 +1,10 @@
+/**
+ * Color algorithm utilities
+ *
+ * Note: Most color operations have been moved to @skyroc/color package - mixColor: Mix two colors - adjustLightness:
+ * Adjust lightness - lightenColor / darkenColor: Lighten/darken color
+ *
+ * This file re-exports from @skyroc/color for convenience
+ */
+
+export { adjustLightness, darkenColor, lightenColor, mixColor } from '@skyroc/color';

package/templates/admin-shell/theme/antd-algorithm/shared/genColorMapToken.ts

@@ -0,0 +1,165 @@
+import type { ColorMapToken, SeedToken } from 'antd/lib/theme/interface';
+import type { ColorMap, PaletteGenerators } from '../types';
+
+/** AntD 1-10 indexes */
+export const ANTD_INDEXES = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as const;
+
+/** Tailwind style 50-950 indexes */
+export const TAILWIND_INDEXES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const;
+
+/**
+ * Semantic color mapping configuration
+ *
+ * Design principles: - 1-2 (50-100): Background - 3-4 (200-300): Border - 5 (400): Hover - 6 (500): Main color - 7
+ * (600): Active - 5-7 (400-600): Text related
+ */
+export interface SemanticColorConfig {
+  /** Active color */
+  active: number;
+  /** Background color */
+  bg: number;
+  /** Background hover color */
+  bgHover: number;
+  /** Border color */
+  border: number;
+  /** Border hover color */
+  borderHover: number;
+  /** Hover color */
+  hover: number;
+  /** Main color */
+  main: number;
+  /** Text color */
+  text: number;
+  /** Text active color */
+  textActive: number;
+  /** Text hover color */
+  textHover: number;
+}
+
+/** Primary color semantic configuration */
+export const PRIMARY_SEMANTIC_CONFIG: SemanticColorConfig = {
+  active: 7,
+  bg: 1,
+  bgHover: 2,
+  border: 3,
+  borderHover: 4,
+  hover: 5,
+  main: 6,
+  text: 6,
+  textActive: 7,
+  textHover: 5
+};
+
+/** Functional color semantic configuration (success, warning, error, info) */
+export const FUNCTIONAL_SEMANTIC_CONFIG: SemanticColorConfig = {
+  active: 7,
+  bg: 1,
+  bgHover: 2,
+  border: 3,
+  borderHover: 4,
+  hover: 4, // Functional color uses 4 for hover
+  main: 6,
+  text: 9,
+  textActive: 10,
+  textHover: 8
+};
+
+interface GenSemanticColorsOptions {
+  colors: ColorMap;
+  config: SemanticColorConfig;
+  /** Color name, supports 'colorPrimary' or 'Primary' format */
+  name: string;
+}
+
+/** Normalize color name - 'colorPrimary' → 'Primary' - 'Primary' → 'Primary' - 'primary' → 'Primary' */
+function normalizeColorName(name: string): string {
+  // Remove 'color' prefix
+  let normalized = name.startsWith('color') ? name.slice(5) : name;
+  // First letter lowercase
+  normalized = normalized.charAt(0).toLocaleLowerCase() + normalized.slice(1);
+  return normalized;
+}
+
+/**
+ * Generate semantic colors for a single color
+ *
+ * @example
+ *   // The following three calls are equivalent:
+ *   genSemanticColors({ name: 'colorPrimary', ... })
+ *   genSemanticColors({ name: 'Primary', ... })
+ *   genSemanticColors({ name: 'primary', ... })
+ *   // All generate: colorPrimary, colorPrimaryActive, colorPrimaryBg, ...
+ */
+export function genSemanticColors({ colors, config, name }: GenSemanticColorsOptions): Record<string, string> {
+  let colorName = name;
+  const isMainColor = name.startsWith('Color');
+  if (isMainColor) {
+    colorName = name.slice(5);
+  }
+
+  const extra = isMainColor
+    ? { [colorName.charAt(0).toLocaleLowerCase() + colorName.slice(1)]: colors[config.main] }
+    : {};
+  return {
+    ...extra,
+    [`color${colorName}`]: colors[config.main],
+    [`color${colorName}Active`]: colors[config.active],
+    [`color${colorName}Bg`]: colors[config.bg],
+    [`color${colorName}BgHover`]: colors[config.bgHover],
+    [`color${colorName}Border`]: colors[config.border],
+    [`color${colorName}BorderHover`]: colors[config.borderHover],
+    [`color${colorName}Hover`]: colors[config.hover],
+    [`color${colorName}Text`]: colors[config.text],
+    [`color${colorName}TextActive`]: colors[config.textActive],
+    [`color${colorName}TextHover`]: colors[config.textHover]
+  } as Record<string, string>;
+}
+
+/**
+ * Generate palette variables (1-10 and 50-950).
+ *
+ * AntD components read compact keys such as `blue1`, while UnoCSS and project styles use hyphenated keys such as
+ * `blue-1`. Both aliases must point to the same palette value.
+ */
+export function genPaletteVars(name: string, colors: ColorMap): Record<string, string> {
+  const colorName = normalizeColorName(name);
+
+  const result: Record<string, string> = {};
+
+  // AntD internal format: name1 to name10; project palette format: name-1 to name-10.
+  for (const i of ANTD_INDEXES) {
+    const color = colors[i] || '';
+    result[`${colorName}${i}`] = color;
+    result[`${colorName}-${i}`] = color;
+  }
+
+  // Tailwind format: name-50 to name-950
+  for (const i of TAILWIND_INDEXES) {
+    result[`${colorName}-${i}`] = colors[i] || '';
+  }
+
+  return result;
+}
+
+/**
+ * Generate neutral color map token
+ *
+ * Only generates neutral colors (background, text, border, etc.) Theme colors are generated in the derivative function
+ * by iterating defaultPresetColors
+ */
+export default function genColorMapToken(
+  seed: SeedToken,
+  { generateNeutralColorPalettes }: PaletteGenerators
+): ColorMapToken {
+  const { colorBgBase, colorTextBase } = seed;
+
+  // Generate neutral colors
+  const neutralColors = generateNeutralColorPalettes(colorBgBase, colorTextBase);
+
+  return {
+    ...neutralColors,
+    // Mask and white
+    colorBgMask: 'rgba(0, 0, 0, 0.45)',
+    colorWhite: '#fff'
+  } as ColorMapToken;
+}

package/templates/admin-shell/theme/antd-algorithm/shared/genCommonMapToken.ts

@@ -0,0 +1,23 @@
+import type { CommonMapToken } from 'antd/es/theme/interface';
+import type { SeedToken } from 'antd/es/theme/internal';
+import type { RadiusMapToken } from './genRadiusMapToken';
+import { genRadiusMapToken } from './genRadiusMapToken';
+
+export type SkyrocCommonMapToken = CommonMapToken & RadiusMapToken;
+
+export default function genCommonMapToken(token: SeedToken): SkyrocCommonMapToken {
+  const { borderRadius, lineWidth, motionBase, motionUnit } = 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
+    ...genRadiusMapToken(borderRadius)
+  };
+}

package/templates/admin-shell/theme/antd-algorithm/shared/genControlHeight.ts

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

package/templates/admin-shell/theme/antd-algorithm/shared/genFontMapToken.ts

@@ -0,0 +1,274 @@
+import type { FontMapToken } from 'antd/lib/theme/interface';
+
+/**
+ * Font size configuration
+ *
+ * Based on UnoCSS text rules, using rem units Conversion: 1rem = 16px (browser default)
+ *
+ * | Name | rem   | px  | lineHeight rem | lineHeight px |
+ * | ---- | ----- | --- | -------------- | ------------- |
+ * | xs   | 0.75  | 12  | 1.125          | 18            |
+ * | sm   | 0.875 | 14  | 1.375          | 22            |
+ * | base | 1     | 16  | 1.5            | 24            |
+ * | lg   | 1.125 | 18  | 1.625          | 26            |
+ * | xl   | 1.25  | 20  | 1.75           | 28            |
+ * | 2xl  | 1.5   | 24  | 2              | 32            |
+ * | 3xl  | 1.875 | 30  | 2.375          | 38            |
+ * | 4xl  | 2.25  | 36  | 2.75           | 44            |
+ * | 5xl  | 3     | 48  | 3.5            | 56            |
+ * | 6xl  | 3.75  | 60  | 4.25           | 68            |
+ * | 7xl  | 4.5   | 72  | 5              | 80            |
+ * | 8xl  | 6     | 96  | 6.5            | 104           |
+ * | 9xl  | 8     | 128 | 8.5            | 136           |
+ */
+
+/** Font size table (rem) */
+export const FONT_SIZES = {
+  xs: 0.75, // 12px
+  sm: 0.875, // 14px
+  base: 1, // 16px
+  lg: 1.125, // 18px
+  xl: 1.25, // 20px
+  '2xl': 1.5, // 24px
+  '3xl': 1.875, // 30px
+  '4xl': 2.25, // 36px
+  '5xl': 3, // 48px
+  '6xl': 3.75, // 60px
+  '7xl': 4.5, // 72px
+  '8xl': 6, // 96px
+  '9xl': 8 // 128px
+} as const;
+
+/** Line height table (rem) */
+export const LINE_HEIGHTS = {
+  xs: 1.125, // 18px
+  sm: 1.375, // 22px
+  base: 1.5, // 24px
+  lg: 1.625, // 26px
+  xl: 1.75, // 28px
+  '2xl': 2, // 32px
+  '3xl': 2.375, // 38px
+  '4xl': 2.75, // 44px
+  '5xl': 3.5, // 56px
+  '6xl': 4.25, // 68px
+  '7xl': 5, // 80px
+  '8xl': 6.5, // 104px
+  '9xl': 8.5 // 136px
+} as const;
+
+export type FontSizeKey = keyof typeof FONT_SIZES;
+
+/**
+ * Convert rem to px
+ *
+ * @param rem Rem value
+ * @param baseFontSize Base font size (default 16)
+ */
+export function remToPx(rem: number, baseFontSize = 16): number {
+  return Math.round(rem * baseFontSize);
+}
+
+/**
+ * Calculate line height ratio
+ *
+ * @param fontSize Font size (rem)
+ * @param lineHeight Line height (rem)
+ */
+export function getLineHeightRatio(fontSize: number, lineHeight: number): number {
+  return Number((lineHeight / fontSize).toFixed(3));
+}
+
+interface FontSizePair {
+  lineHeight: number;
+  lineHeightRatio: number;
+  size: number;
+}
+
+/** Extended font map token with custom text sizes */
+export interface ExtendedFontMapToken extends FontMapToken {
+  /** Base font height (px) */
+  fontHeight: number;
+  /** Large font height (px) */
+  fontHeightLG: number;
+  /** Small font height (px) */
+  fontHeightSM: number;
+
+  /** Heading level 1 font size generated in px */
+  fontSizeHeading1: number;
+  /** Heading level 2 font size generated in px */
+  fontSizeHeading2: number;
+  /** Heading level 3 font size generated in px */
+  fontSizeHeading3: number;
+  /** Heading level 4 font size generated in px */
+  fontSizeHeading4: number;
+  /** Heading level 5 font size generated in px */
+  fontSizeHeading5: number;
+
+  /** 2x large line height (px) */
+  LineHeight2xl: number;
+  /** 3x large line height (px) */
+  LineHeight3xl: number;
+  /** 4x large line height (px) */
+  LineHeight4xl: number;
+  /** 5x large line height (px) */
+  LineHeight5xl: number;
+  /** 6x large line height (px) */
+  LineHeight6xl: number;
+  /** 7x large line height (px) */
+  LineHeight7xl: number;
+  /** 8x large line height (px) */
+  LineHeight8xl: number;
+  /** 9x large line height (px) */
+  LineHeight9xl: number;
+  /** Base line height (px) */
+  LineHeightBase: number;
+  /** Large line height (px) */
+  LineHeightLg: number;
+  /** Small line height (px) */
+  LineHeightSm: number;
+  /** Extra large line height (px) */
+  LineHeightXl: number;
+  /** Extra small line height (px) */
+  LineHeightXs: number;
+
+  /** 2x large text size (24px) */
+  Text2xl: number;
+  /** 3x large text size (30px) */
+  Text3xl: number;
+  /** 4x large text size (36px) */
+  Text4xl: number;
+  /** 5x large text size (48px) */
+  Text5xl: number;
+  /** 6x large text size (60px) */
+  Text6xl: number;
+  /** 7x large text size (72px) */
+  Text7xl: number;
+  /** 8x large text size (96px) */
+  Text8xl: number;
+  /** 9x large text size (128px) */
+  Text9xl: number;
+  /** Base text size (16px) */
+  TextBase: number;
+  /** Large text size (18px) */
+  TextLg: number;
+  /** Small text size (14px) */
+  TextSm: number;
+  /** Extra large text size (20px) */
+  TextXl: number;
+  /** Extra small text size (12px) */
+  TextXs: number;
+}
+
+/**
+ * Generate font size pairs
+ *
+ * @param baseFontSize Base font size (px), default 16
+ */
+export function genFontSizes(baseFontSize = 16): FontSizePair[] {
+  const keys: FontSizeKey[] = ['xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '8xl', '9xl'];
+
+  return keys.map(key => {
+    const fontSizeRem = FONT_SIZES[key];
+    const lineHeightRem = LINE_HEIGHTS[key];
+    const size = remToPx(fontSizeRem, baseFontSize);
+    const lineHeight = remToPx(lineHeightRem, baseFontSize);
+
+    return {
+      lineHeight,
+      lineHeightRatio: getLineHeightRatio(fontSizeRem, lineHeightRem),
+      size
+    };
+  });
+}
+
+/**
+ * Generate font map token
+ *
+ * Based on UnoCSS font rules, generate Ant Design style font tokens
+ *
+ * Mapping: - fontSizeSM: sm (14px) - fontSize: base (16px) - fontSizeLG: lg (18px) - fontSizeXL: xl (20px) -
+ * fontSizeHeading5: xl (20px) - fontSizeHeading4: 2xl (24px) - fontSizeHeading3: 3xl (30px) - fontSizeHeading2: 4xl
+ * (36px) - fontSizeHeading1: 5xl (48px)
+ *
+ * @param baseFontSize Base font size (px), default 16
+ */
+export function genFontMapToken(baseFontSize = 16): ExtendedFontMapToken {
+  const fontSizePairs = genFontSizes(baseFontSize);
+
+  // Index mapping: xs=0, sm=1, base=2, lg=3, xl=4, 2xl=5, 3xl=6, 4xl=7, 5xl=8
+  const fontSizes = fontSizePairs.map(pair => pair.size);
+  const lineHeights = fontSizePairs.map(pair => pair.lineHeightRatio);
+  const lineHeightsPx = fontSizePairs.map(pair => pair.lineHeight);
+
+  // SM = sm (index 1)
+  const fontSizeSM = fontSizes[1];
+  const lineHeightSM = lineHeights[1];
+
+  // MD = base (index 2)
+  const fontSizeMD = fontSizes[2];
+  const lineHeightMD = lineHeights[2];
+
+  // LG = lg (index 3)
+  const fontSizeLG = fontSizes[3];
+  const lineHeightLG = lineHeights[3];
+
+  return {
+    // Base font sizes
+    fontSize: fontSizeMD,
+    fontSizeLG,
+    fontSizeSM,
+    fontSizeXL: fontSizes[4], // xl (20px)
+    TextXs: fontSizes[0],
+    TextSm: fontSizes[1],
+    TextBase: fontSizes[2],
+    TextLg: fontSizes[3],
+    TextXl: fontSizes[4],
+    Text2xl: fontSizes[5],
+    Text3xl: fontSizes[6],
+    Text4xl: fontSizes[7],
+    Text5xl: fontSizes[8],
+    Text6xl: fontSizes[9],
+    Text7xl: fontSizes[10],
+    Text8xl: fontSizes[11],
+    Text9xl: fontSizes[12],
+    LineHeightXs: lineHeightsPx[0],
+    LineHeightSm: lineHeightsPx[1],
+    LineHeightBase: lineHeightsPx[2],
+    LineHeightLg: lineHeightsPx[3],
+    LineHeightXl: lineHeightsPx[4],
+    LineHeight2xl: lineHeightsPx[5],
+    LineHeight3xl: lineHeightsPx[6],
+    LineHeight4xl: lineHeightsPx[7],
+    LineHeight5xl: lineHeightsPx[8],
+    LineHeight6xl: lineHeightsPx[9],
+    LineHeight7xl: lineHeightsPx[10],
+    LineHeight8xl: lineHeightsPx[11],
+    LineHeight9xl: lineHeightsPx[12],
+
+    // Heading font sizes (large to small)
+    fontSizeHeading1: fontSizes[8], // 5xl (48px)
+    fontSizeHeading2: fontSizes[7], // 4xl (36px)
+    fontSizeHeading3: fontSizes[6], // 3xl (30px)
+    fontSizeHeading4: fontSizes[5], // 2xl (24px)
+    fontSizeHeading5: fontSizes[4], // xl (20px)
+
+    // Line height ratios
+    lineHeight: lineHeightMD,
+    lineHeightLG,
+    lineHeightSM,
+
+    // Line heights (px)
+    fontHeight: Math.round(lineHeightMD * fontSizeMD),
+    fontHeightLG: Math.round(lineHeightLG * fontSizeLG),
+    fontHeightSM: Math.round(lineHeightSM * fontSizeSM),
+
+    // Heading line heights
+    lineHeightHeading1: lineHeights[8], // 5xl
+    lineHeightHeading2: lineHeights[7], // 4xl
+    lineHeightHeading3: lineHeights[6], // 3xl
+    lineHeightHeading4: lineHeights[5], // 2xl
+    lineHeightHeading5: lineHeights[4] // xl
+  };
+}
+
+export default genFontMapToken;

package/templates/admin-shell/theme/antd-algorithm/shared/genRadiusMapToken.ts

@@ -0,0 +1,139 @@
+import type { MapToken } from 'antd/lib/theme/interface';
+
+/**
+ * Radius configuration
+ *
+ * Based on UnoCSS radius rules, using base radius value Default borderRadius = 6px
+ *
+ * | Name | Calculation   | px (radius=6) |
+ * | ---- | ------------- | ------------- |
+ * | none | 0             | 0             |
+ * | xs   | radius / 3    | 2             |
+ * | sm   | radius * 2/3  | 4             |
+ * | md   | radius        | 6 (default)   |
+ * | lg   | radius * 4/3  | 8             |
+ * | xl   | radius * 2    | 12            |
+ * | 2xl  | radius * 8/3  | 16            |
+ * | 3xl  | radius * 4    | 24            |
+ * | 4xl  | radius * 16/3 | 32            |
+ * | full | 9999          | 9999          |
+ */
+
+/** Radius multipliers (based on borderRadius) */
+export const RADIUS_MULTIPLIERS = {
+  none: 0,
+  xs: 1 / 3, // 2px (radius / 3)
+  sm: 2 / 3, // 4px (radius * 2/3)
+  md: 1, // 6px (radius) - default
+  lg: 4 / 3, // 8px (radius * 4/3)
+  xl: 2, // 12px (radius * 2)
+  '2xl': 8 / 3, // 16px (radius * 8/3)
+  '3xl': 4, // 24px (radius * 4)
+  '4xl': 16 / 3, // 32px (radius * 16/3)
+  full: -1 // Special value for 9999px
+} as const;
+
+export type RadiusSizeKey = keyof typeof RADIUS_MULTIPLIERS;
+
+/**
+ * Calculate radius size
+ *
+ * @param multiplier Multiplier
+ * @param borderRadius Base radius (default 6)
+ */
+export function calcRadius(multiplier: number, borderRadius = 6): number {
+  if (multiplier < 0) return 9999; // full
+  return Math.round(borderRadius * multiplier);
+}
+
+/** Radius token type */
+export type RadiusMapToken = Pick<
+  MapToken,
+  'borderRadius' | 'borderRadiusLG' | 'borderRadiusOuter' | 'borderRadiusSM' | 'borderRadiusXS'
+>;
+
+/**
+ * Generate radius map token
+ *
+ * Based on base radius value, generate Ant Design style radius tokens
+ *
+ * Mapping (borderRadius = 6): - borderRadiusXS: xs (2px) = radius / 3 - borderRadiusSM: sm (4px) = radius * 2/3 -
+ * borderRadius: md (6px) = radius - borderRadiusLG: lg (8px) = radius * 4/3 - borderRadiusOuter: sm (4px) = radius *
+ * 2/3
+ *
+ * @param borderRadius Base radius value (px), default 6
+ */
+export function genRadiusMapToken(borderRadius = 6): RadiusMapToken {
+  return {
+    borderRadiusXS: calcRadius(RADIUS_MULTIPLIERS.xs, borderRadius), // 2px
+    borderRadiusSM: calcRadius(RADIUS_MULTIPLIERS.sm, borderRadius), // 4px
+    borderRadius, // 6px
+    borderRadiusLG: calcRadius(RADIUS_MULTIPLIERS.lg, borderRadius), // 8px
+    borderRadiusOuter: calcRadius(RADIUS_MULTIPLIERS.sm, borderRadius) // 4px
+  };
+}
+
+/** Extended radius token (includes more sizes) */
+export interface ExtendedRadiusToken extends RadiusMapToken {
+  /** 2xl - 16px */
+  borderRadius2XL: number;
+  /** 3xl - 24px */
+  borderRadius3XL: number;
+  /** 4xl - 32px */
+  borderRadius4XL: number;
+  /** Full - 9999px */
+  borderRadiusFull: number;
+  /** Xl - 12px */
+  borderRadiusXL: number;
+}
+
+/**
+ * Generate extended radius token
+ *
+ * Includes complete UnoCSS radius series
+ *
+ * @param borderRadius Base radius value (px), default 6
+ */
+export function genExtendedRadiusToken(borderRadius = 6): ExtendedRadiusToken {
+  return {
+    ...genRadiusMapToken(borderRadius),
+    borderRadiusXL: calcRadius(RADIUS_MULTIPLIERS.xl, borderRadius), // 12px
+    borderRadius2XL: calcRadius(RADIUS_MULTIPLIERS['2xl'], borderRadius), // 16px
+    borderRadius3XL: calcRadius(RADIUS_MULTIPLIERS['3xl'], borderRadius), // 24px
+    borderRadius4XL: calcRadius(RADIUS_MULTIPLIERS['4xl'], borderRadius), // 32px
+    borderRadiusFull: 9999 // 9999px
+  };
+}
+
+/**
+ * Generate complete radius table
+ *
+ * @param borderRadius Base radius value (px), default 6
+ */
+export function genRadiusSizes(borderRadius = 6): Record<RadiusSizeKey, number> {
+  return Object.entries(RADIUS_MULTIPLIERS).reduce(
+    (acc, [key, multiplier]) => {
+      acc[key as RadiusSizeKey] = calcRadius(multiplier, borderRadius);
+      return acc;
+    },
+    {} as Record<RadiusSizeKey, number>
+  );
+}
+
+/**
+ * Generate radius CSS variables
+ *
+ * @param borderRadius Base radius value (px), default 6
+ */
+export function genRadiusVars(borderRadius = 6): Record<string, string> {
+  const result: Record<string, string> = {};
+
+  for (const [key, multiplier] of Object.entries(RADIUS_MULTIPLIERS)) {
+    const px = calcRadius(multiplier, borderRadius);
+    result[`radius-${key}`] = `${px}px`;
+  }
+
+  return result;
+}
+
+export default genRadiusMapToken;