@kingsoft-ai/design 0.1.9

package/dist/types/types/component-tokens.types.d.ts

@@ -0,0 +1,765 @@
+/**
+ * Design Token 类型定义 - Tier 3: 组件层 (Component Tokens)
+ *
+ * 定义所有设计组件的 Token 类型接口
+ * 这些类型用于确保组件主题配置的类型安全
+ */
+export interface ButtonTokens {
+    primary: {
+        background: {
+            default: string;
+            hover: string;
+            active: string;
+        };
+        text: {
+            default: string;
+        };
+        border: {
+            default: string;
+        };
+        shadow: {
+            default: string;
+            hover: string;
+        };
+    };
+    secondary: {
+        background: {
+            default: string;
+            hover: string;
+            active: string;
+        };
+        text: {
+            default: string;
+        };
+        border: {
+            default: string;
+            hover: string;
+            active: string;
+        };
+        shadow: {
+            default: string;
+        };
+    };
+    text: {
+        background: {
+            default: string;
+            hover: string;
+            active: string;
+        };
+        text: {
+            default: string;
+        };
+        border: {
+            default: string;
+            hover: string;
+            active: string;
+        };
+    };
+    danger: {
+        background: {
+            default: string;
+            hover: string;
+            active: string;
+        };
+        text: {
+            default: string;
+        };
+        border: {
+            default: string;
+        };
+        shadow: {
+            default: string;
+            hover: string;
+        };
+    };
+    gradient: {
+        background: {
+            default: string;
+            gradientFrom: string;
+            gradientTo: string;
+        };
+        text: {
+            default: string;
+        };
+        border: {
+            default: string;
+        };
+        shadow: {
+            default: string;
+            hover: string;
+        };
+    };
+    disabled: {
+        background: {
+            default: string;
+        };
+        text: {
+            default: string;
+        };
+        opacity: number;
+    };
+    size: {
+        sm: {
+            height: string;
+            fontSize: string;
+            paddingInline: string;
+            iconSize: string;
+        };
+        md: {
+            height: string;
+            fontSize: string;
+            paddingInline: string;
+            iconSize: string;
+        };
+        lg: {
+            height: string;
+            fontSize: string;
+            paddingInline: string;
+            iconSize: string;
+        };
+    };
+    borderRadius: string;
+    fontWeight: number;
+    gap: string;
+    transition: string;
+}
+type IconButtonStateTokens = {
+    background: {
+        default: string;
+        hover: string;
+        active: string;
+    };
+    border: {
+        default: string;
+        hover?: string;
+        active?: string;
+    };
+    icon: {
+        default: string;
+        hover?: string;
+        active?: string;
+    };
+    shadow?: {
+        default: string;
+        hover?: string;
+    };
+};
+export interface IconButtonTokens {
+    appearance: {
+        solid: {
+            primary: IconButtonStateTokens;
+            neutral: IconButtonStateTokens;
+            danger: IconButtonStateTokens;
+        };
+        outline: {
+            primary: IconButtonStateTokens;
+            neutral: IconButtonStateTokens;
+            danger: IconButtonStateTokens;
+        };
+        ghost: {
+            primary: IconButtonStateTokens;
+            neutral: IconButtonStateTokens;
+            danger: IconButtonStateTokens;
+        };
+    };
+    disabled: {
+        background: string;
+        border: string;
+        icon: string;
+        opacity: number;
+    };
+    size: {
+        sm: {
+            edge: string;
+            iconSize: string;
+        };
+        md: {
+            edge: string;
+            iconSize: string;
+        };
+        lg: {
+            edge: string;
+            iconSize: string;
+        };
+    };
+    borderRadius: string;
+    transition: string;
+    focusRing: {
+        color: string;
+        offset: string;
+        width: string;
+    };
+}
+export interface CheckboxTokens {
+    control: {
+        size: string;
+        borderRadius: string;
+        borderWidth: string;
+        background: {
+            default: string;
+            checked: string;
+            disabled: string;
+            disabledChecked: string;
+        };
+        borderColor: {
+            default: string;
+            hover: string;
+            checked: string;
+            disabled: string;
+            disabledChecked: string;
+        };
+        icon: {
+            color: string;
+            size: string;
+        };
+    };
+    focusRing: string;
+    gap: string;
+    text: {
+        label: {
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            disabled: string;
+            fontWeight: number;
+        };
+    };
+    transition: string;
+}
+export interface RadioTokens {
+    control: {
+        size: string;
+        borderRadius: string;
+        borderWidth: string;
+        background: string;
+        borderColor: {
+            default: string;
+            hover: string;
+            checked: string;
+            disabled: string;
+        };
+        indicator: {
+            size: string;
+            color: string;
+            disabled: string;
+        };
+    };
+    focusRing: string;
+    gap: string;
+    transition: string;
+    text: {
+        label: {
+            fontSize: string;
+            color: string;
+            disabled: string;
+            fontWeight: number;
+        };
+        description: {
+            color: string;
+            disabled: string;
+            fontSize: string;
+        };
+    };
+    disabled: {
+        opacity: number;
+    };
+}
+export interface SwitchTokens {
+    size: {
+        sm: {
+            width: string;
+            height: string;
+            thumbSize: string;
+            fontSize: string;
+            paddingInline: string;
+        };
+        md: {
+            width: string;
+            height: string;
+            thumbSize: string;
+            fontSize: string;
+            paddingInline: string;
+        };
+    };
+    background: {
+        unchecked: string;
+        checked: string;
+        disabled: string;
+    };
+    thumb: {
+        background: string;
+        shadow: string;
+    };
+    text: {
+        color: string;
+        fontSize: string;
+        fontWeight: number;
+    };
+    borderRadius: string;
+    gap: string;
+    transition: string;
+    disabled: {
+        opacity: number;
+    };
+    focusRing: {
+        color: string;
+        offset: string;
+    };
+}
+export interface InputTokens {
+    size: {
+        sm: {
+            height: string;
+            fontSize: string;
+            paddingInline: string;
+            iconSize: string;
+        };
+        md: {
+            height: string;
+            fontSize: string;
+            paddingInline: string;
+            iconSize: string;
+        };
+        lg: {
+            height: string;
+            fontSize: string;
+            paddingInline: string;
+            iconSize: string;
+        };
+    };
+    border: {
+        default: string;
+        hover: string;
+        focus: string;
+        error: string;
+        disabled: string;
+    };
+    background: {
+        default: string;
+        disabled: string;
+    };
+    text: {
+        default: string;
+        placeholder: string;
+        disabled: string;
+        error: string;
+        counter: string;
+    };
+    borderRadius: string;
+    gap: string;
+    transition: string;
+}
+export interface CollapseTokens {
+    border: {
+        default: string;
+    };
+    background: {
+        default: string;
+        hover: string;
+    };
+    text: {
+        default: string;
+        title: string;
+    };
+    divider: string;
+    arrow: {
+        default: string;
+    };
+    padding: {
+        header: string;
+        content: string;
+    };
+    borderRadius: string;
+    gap: string;
+    transition: string;
+    arrowSize: string;
+}
+export interface TagTokens {
+    colors: {
+        default: TagColorTokens;
+        red: TagColorTokens;
+        orange: TagColorTokens;
+        yellow: TagColorTokens;
+        green: TagColorTokens;
+        lavender: TagColorTokens;
+        lilac: TagColorTokens;
+        carmine: TagColorTokens;
+        rose: TagColorTokens;
+        mint: TagColorTokens;
+        olive: TagColorTokens;
+        blue: TagColorTokens;
+    };
+    size: {
+        sm: {
+            height: string;
+            fontSize: string;
+            lineHeight: string;
+            paddingInline: string;
+            gap: string;
+            iconSize: string;
+            closeIconSize: string;
+        };
+        md: {
+            height: string;
+            fontSize: string;
+            lineHeight: string;
+            paddingInline: string;
+            gap: string;
+            iconSize: string;
+            closeIconSize: string;
+        };
+        lg: {
+            height: string;
+            fontSize: string;
+            lineHeight: string;
+            paddingInline: string;
+            gap: string;
+            iconSize: string;
+            closeIconSize: string;
+        };
+    };
+    fontWeight: number;
+    borderRadius: string;
+    transition: string;
+    disabled: {
+        opacity: number;
+    };
+}
+export interface TagColorTokens {
+    background: {
+        default: string;
+        hover?: string;
+        active?: string;
+        checked?: string;
+        checkedHover?: string;
+        checkedActive?: string;
+    };
+    text: {
+        default: string;
+        checked?: string;
+    };
+    border: {
+        default: string;
+        hover?: string;
+        active?: string;
+        checked?: string;
+        checkedHover?: string;
+        checkedActive?: string;
+    };
+}
+export interface SkeletonTokens {
+    background: {
+        base: string;
+        highlight: string;
+    };
+    animation: {
+        duration: string;
+        easing: string;
+    };
+    radius: {
+        sm: string;
+        md: string;
+        lg: string;
+        pill: string;
+        circle: string;
+    };
+    block: {
+        height: string;
+    };
+    text: {
+        lineHeight: string;
+        gap: string;
+        lastLineWidth: string;
+    };
+    circle: {
+        size: string;
+    };
+}
+export interface StepperTokens {
+    circle: {
+        size: {
+            md: string;
+            sm: string;
+        };
+        fontSize: {
+            md: string;
+            sm: string;
+        };
+        iconSize: {
+            md: string;
+            sm: string;
+        };
+    };
+    dot: {
+        size: {
+            md: string;
+            sm: string;
+        };
+        pulseColor: string;
+    };
+    line: {
+        color: {
+            default: string;
+            active: string;
+        };
+        size: string;
+    };
+    text: {
+        title: {
+            color: {
+                default: string;
+                active: string;
+                error: string;
+                waiting: string;
+            };
+            fontWeight: number;
+            fontSize: string;
+        };
+        description: {
+            color: string;
+            fontSize: string;
+        };
+    };
+    state: {
+        process: {
+            color: string;
+            bg: string;
+        };
+        wait: {
+            color: string;
+            bg: string;
+        };
+        finish: {
+            color: string;
+            bg: string;
+        };
+        error: {
+            color: string;
+            bg: string;
+        };
+    };
+    gap: string;
+}
+export interface NumberFieldTokens {
+    controls: {
+        default: 'buttons' | 'arrows';
+    };
+    size: {
+        md: {
+            height: string;
+            fontSize: string;
+            paddingInline: string;
+        };
+        lg: {
+            height: string;
+            fontSize: string;
+            paddingInline: string;
+        };
+    };
+    input: {
+        width: string;
+        height: string;
+        paddingInline: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        fontFamily: string;
+    };
+    control: {
+        side: {
+            buttonSizeSm: string;
+            buttonSizeLg: string;
+            inset: string;
+            gap: string;
+            iconSize: string;
+            widthsm: string;
+            widthLg: string;
+        };
+        arrows: {
+            buttonSizeSm: string;
+            buttonSizeLg: string;
+            iconSize: string;
+            gap: string;
+            widthsm: string;
+            widthLg: string;
+        };
+    };
+    borderRadius: string;
+    border: {
+        default: string;
+        hover: string;
+        disabled: string;
+    };
+    background: {
+        default: string;
+        hover: string;
+        disabled: string;
+    };
+    text: {
+        default: string;
+        placeholder: string;
+        disabled: string;
+    };
+    transition: string;
+}
+export interface MenuTokens {
+    container: {
+        width: {
+            expanded: string;
+            collapsed: string;
+        };
+        background: string;
+        border: string;
+        padding: string;
+    };
+    item: {
+        height: string;
+        paddingInline: string;
+        fontSize: string;
+        fontWeight: number;
+        iconSize: string;
+        gap: string;
+        borderRadius: string;
+        background: {
+            default: string;
+            hover: string;
+            active: string;
+        };
+        text: {
+            default: string;
+            hover: string;
+            active: string;
+        };
+        transition: string;
+    };
+    subItem: {
+        paddingLeft: string;
+        background: {
+            default: string;
+            hover: string;
+            active: string;
+        };
+    };
+    group: {
+        marginTop: string;
+        marginBottom: string;
+        gap: string;
+    };
+    groupTitle: {
+        height: string;
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        paddingInline: string;
+        marginBottom: string;
+    };
+    scrollbar: {
+        width: string;
+        thumbColor: string;
+        trackColor: string;
+    };
+    popover: {
+        background: string;
+        border: string;
+        borderRadius: string;
+        boxShadow: string;
+        padding: string;
+        item: {
+            background: {
+                default: string;
+                hover: string;
+                active: string;
+            };
+            text: {
+                default: string;
+                hover: string;
+                active: string;
+            };
+        };
+    };
+}
+export interface SelectTokens {
+    size: {
+        sm: {
+            height: string;
+            fontSize: string;
+            paddingInline: string;
+            iconSize: string;
+        };
+        md: {
+            height: string;
+            fontSize: string;
+            paddingInline: string;
+            iconSize: string;
+        };
+        lg: {
+            height: string;
+            fontSize: string;
+            paddingInline: string;
+            iconSize: string;
+        };
+    };
+    border: {
+        default: string;
+        hover: string;
+        focus: string;
+        error: string;
+        disabled: string;
+    };
+    background: {
+        default: string;
+        hover: string;
+        disabled: string;
+    };
+    text: {
+        default: string;
+        placeholder: string;
+        disabled: string;
+        error: string;
+    };
+    borderRadius: string;
+    gap: string;
+    transition: string;
+    popover: {
+        background: string;
+        border: string;
+        borderRadius: string;
+        boxShadow: string;
+        padding: string;
+    };
+    option: {
+        height: string;
+        paddingInline: string;
+        fontSize: string;
+        borderRadius: string;
+        gap: string;
+        background: {
+            default: string;
+            hover: string;
+            selected: string;
+            focused: string;
+        };
+        text: {
+            default: string;
+            hover: string;
+            selected: string;
+            disabled: string;
+        };
+    };
+}
+export interface ComponentTokens {
+    button: ButtonTokens;
+    iconButton: IconButtonTokens;
+    checkbox: CheckboxTokens;
+    radio: RadioTokens;
+    switch: SwitchTokens;
+    input: InputTokens;
+    select: SelectTokens;
+    collapse: CollapseTokens;
+    tag: TagTokens;
+    skeleton: SkeletonTokens;
+    stepper: StepperTokens;
+    numberfield: NumberFieldTokens;
+    menu: MenuTokens;
+}
+export {};