import { FoundationTokenType } from '../../tokens/theme.token'
import type { ResponsiveStepperV2Tokens } from './stepperV2.tokens.types'

export const getStepperV2DarkTokens = (
    foundationToken: FoundationTokenType
): ResponsiveStepperV2Tokens => {
    const circlePadding = {
        paddingTop: '6px',
        paddingRight: '6px',
        paddingBottom: '6px',
        paddingLeft: '6px',
    }
    return {
        sm: {
            container: {
                description: {
                    text: {
                        color: foundationToken.colors.gray[500],
                        fontSize: '12px',
                        fontWeight: 500,
                    },
                },
                gap: 8,
                step: {
                    circle: {
                        default: {
                            default: {
                                backgroundColor:
                                    foundationToken.colors.gray[700],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                            hover: {
                                backgroundColor:
                                    foundationToken.colors.gray[700],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                            focus: {
                                backgroundColor:
                                    foundationToken.colors.gray[700],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: `2px solid ${foundationToken.colors.primary[400]}`,
                                outlineOffset: '2px',
                                ...circlePadding,
                            },
                            disabled: {
                                backgroundColor:
                                    foundationToken.colors.gray[700],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                        },
                        completed: {
                            default: {
                                backgroundColor:
                                    foundationToken.colors.gray[700],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                            hover: {
                                backgroundColor:
                                    foundationToken.colors.gray[700],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                            focus: {
                                backgroundColor:
                                    foundationToken.colors.gray[700],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: `2px solid ${foundationToken.colors.primary[400]}`,
                                outlineOffset: '2px',
                                ...circlePadding,
                            },
                            disabled: {
                                backgroundColor:
                                    foundationToken.colors.gray[700],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                        },
                        current: {
                            default: {
                                backgroundColor:
                                    foundationToken.colors.gray[700],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                            hover: {
                                backgroundColor:
                                    foundationToken.colors.gray[700],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                            focus: {
                                backgroundColor:
                                    foundationToken.colors.gray[700],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: `2px solid ${foundationToken.colors.primary[400]}`,
                                outlineOffset: '2px',
                                ...circlePadding,
                            },
                            disabled: {
                                backgroundColor:
                                    foundationToken.colors.gray[700],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                        },
                        pending: {
                            default: {
                                backgroundColor:
                                    foundationToken.colors.gray[900],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                            hover: {
                                backgroundColor:
                                    foundationToken.colors.gray[800],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                            focus: {
                                backgroundColor:
                                    foundationToken.colors.gray[900],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: `2px solid ${foundationToken.colors.primary[400]}`,
                                outlineOffset: '2px',
                                ...circlePadding,
                            },
                            disabled: {
                                backgroundColor:
                                    foundationToken.colors.gray[900],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                        },
                        disabled: {
                            default: {
                                backgroundColor:
                                    foundationToken.colors.gray[900],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                            hover: {
                                backgroundColor:
                                    foundationToken.colors.gray[900],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                            focus: {
                                backgroundColor:
                                    foundationToken.colors.gray[900],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                            disabled: {
                                backgroundColor:
                                    foundationToken.colors.gray[900],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                        },
                        skipped: {
                            default: {
                                backgroundColor:
                                    foundationToken.colors.gray[700],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                            hover: {
                                backgroundColor:
                                    foundationToken.colors.gray[700],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                            focus: {
                                backgroundColor:
                                    foundationToken.colors.gray[700],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: `2px solid ${foundationToken.colors.primary[400]}`,
                                outlineOffset: '2px',
                                ...circlePadding,
                            },
                            disabled: {
                                backgroundColor:
                                    foundationToken.colors.gray[700],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                        },
                    },
                    icon: {
                        default: {
                            default: {
                                color: foundationToken.colors.gray[200],
                            },
                            hover: { color: foundationToken.colors.gray[200] },
                            focus: { color: foundationToken.colors.gray[200] },
                            disabled: {
                                color: foundationToken.colors.gray[200],
                            },
                        },
                        completed: {
                            default: {
                                color: foundationToken.colors.gray[200],
                            },
                            hover: { color: foundationToken.colors.gray[200] },
                            focus: { color: foundationToken.colors.gray[200] },
                            disabled: {
                                color: foundationToken.colors.gray[200],
                            },
                        },
                        current: {
                            default: {
                                color: foundationToken.colors.gray[200],
                            },
                            hover: { color: foundationToken.colors.gray[200] },
                            focus: { color: foundationToken.colors.gray[200] },
                            disabled: {
                                color: foundationToken.colors.gray[200],
                            },
                        },
                        pending: {
                            default: {
                                color: foundationToken.colors.gray[500],
                            },
                            hover: { color: foundationToken.colors.gray[500] },
                            focus: { color: foundationToken.colors.gray[500] },
                            disabled: {
                                color: foundationToken.colors.gray[500],
                            },
                        },
                        disabled: {
                            default: {
                                color: foundationToken.colors.gray[600],
                            },
                            hover: { color: foundationToken.colors.gray[600] },
                            focus: { color: foundationToken.colors.gray[600] },
                            disabled: {
                                color: foundationToken.colors.gray[600],
                            },
                        },
                        skipped: {
                            default: {
                                color: foundationToken.colors.gray[400],
                            },
                            hover: { color: foundationToken.colors.gray[400] },
                            focus: { color: foundationToken.colors.gray[400] },
                            disabled: {
                                color: foundationToken.colors.gray[400],
                            },
                        },
                    },
                },
                connector: {
                    line: {
                        color: foundationToken.colors.gray[600],
                        height: '1px',
                    },
                },
                subConnector: {
                    line: {
                        color: foundationToken.colors.gray[600],
                        height: '1px',
                    },
                    dot: {
                        border: `1px solid ${foundationToken.colors.primary[500]}`,
                        borderRadius: '50%',
                        height: '8px',
                        width: '8px',
                        paddingTop: '4px',
                        paddingRight: '4px',
                        paddingBottom: '4px',
                        paddingLeft: '4px',
                    },
                    expander: {
                        icon: {
                            color: foundationToken.colors.gray[600],
                        },
                        width: '16px',
                    },
                    text: {
                        default: {
                            color: foundationToken.colors.gray[500],
                            fontSize: '12px',
                            fontWeight: 500,
                        },
                        disabled: {
                            color: foundationToken.colors.gray[300],
                            fontSize: '12px',
                            fontWeight: 500,
                        },
                        completed: {
                            color: foundationToken.colors.gray[500],
                            fontSize: '12px',
                            fontWeight: 500,
                        },
                        current: {
                            color: foundationToken.colors.gray[500],
                            fontSize: '12px',
                            fontWeight: 500,
                        },
                        pending: {
                            color: foundationToken.colors.gray[400],
                            fontSize: '12px',
                            fontWeight: 500,
                        },
                        skipped: {
                            color: foundationToken.colors.gray[400],
                            fontSize: '12px',
                            fontWeight: 500,
                        },
                    },
                },
                title: {
                    text: {
                        default: {
                            default: {
                                color: foundationToken.colors.gray[100],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 5,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            hover: {
                                color: foundationToken.colors.gray[100],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 5,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            focus: {
                                color: foundationToken.colors.gray[100],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 5,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            disabled: {
                                color: foundationToken.colors.gray[100],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 5,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                        },
                        completed: {
                            default: {
                                color: foundationToken.colors.gray[100],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 5,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            hover: {
                                color: foundationToken.colors.gray[100],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 5,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            focus: {
                                color: foundationToken.colors.gray[100],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 5,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            disabled: {
                                color: foundationToken.colors.gray[100],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 5,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                        },
                        current: {
                            default: {
                                color: foundationToken.colors.gray[300],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 5,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            hover: {
                                color: foundationToken.colors.gray[300],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 5,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            focus: {
                                color: foundationToken.colors.gray[300],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 5,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            disabled: {
                                color: foundationToken.colors.gray[300],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 5,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                        },
                        pending: {
                            default: {
                                color: foundationToken.colors.gray[500],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 5,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            hover: {
                                color: foundationToken.colors.gray[500],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 5,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            focus: {
                                color: foundationToken.colors.gray[500],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 5,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            disabled: {
                                color: foundationToken.colors.gray[500],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 5,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                        },
                        disabled: {
                            default: {
                                color: foundationToken.colors.gray[600],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 5,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            hover: {
                                color: foundationToken.colors.gray[600],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 5,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            focus: {
                                color: foundationToken.colors.gray[600],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 5,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            disabled: {
                                color: foundationToken.colors.gray[600],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 5,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                        },
                        skipped: {
                            default: {
                                color: foundationToken.colors.gray[400],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 5,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            hover: {
                                color: foundationToken.colors.gray[400],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 5,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            focus: {
                                color: foundationToken.colors.gray[400],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 5,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            disabled: {
                                color: foundationToken.colors.gray[400],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 5,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                        },
                    },
                },
            },
        },
        lg: {
            container: {
                description: {
                    text: {
                        color: foundationToken.colors.gray[500],
                        fontSize: '12px',
                        fontWeight: 500,
                    },
                },
                gap: 6,
                step: {
                    circle: {
                        default: {
                            default: {
                                backgroundColor:
                                    foundationToken.colors.gray[700],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                            hover: {
                                backgroundColor:
                                    foundationToken.colors.gray[700],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                            focus: {
                                backgroundColor:
                                    foundationToken.colors.gray[700],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: `2px solid ${foundationToken.colors.primary[400]}`,
                                outlineOffset: '2px',
                                ...circlePadding,
                            },
                            disabled: {
                                backgroundColor:
                                    foundationToken.colors.gray[700],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                        },
                        completed: {
                            default: {
                                backgroundColor:
                                    foundationToken.colors.gray[700],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                            hover: {
                                backgroundColor:
                                    foundationToken.colors.gray[700],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                            focus: {
                                backgroundColor:
                                    foundationToken.colors.gray[700],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: `2px solid ${foundationToken.colors.primary[400]}`,
                                outlineOffset: '2px',
                                ...circlePadding,
                            },
                            disabled: {
                                backgroundColor:
                                    foundationToken.colors.gray[700],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                        },
                        current: {
                            default: {
                                backgroundColor:
                                    foundationToken.colors.gray[700],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                            hover: {
                                backgroundColor:
                                    foundationToken.colors.gray[700],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                            focus: {
                                backgroundColor:
                                    foundationToken.colors.gray[700],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: `2px solid ${foundationToken.colors.primary[400]}`,
                                outlineOffset: '2px',
                                ...circlePadding,
                            },
                            disabled: {
                                backgroundColor:
                                    foundationToken.colors.gray[700],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                        },
                        pending: {
                            default: {
                                backgroundColor:
                                    foundationToken.colors.gray[900],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                            hover: {
                                backgroundColor:
                                    foundationToken.colors.gray[800],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                            focus: {
                                backgroundColor:
                                    foundationToken.colors.gray[900],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: `2px solid ${foundationToken.colors.primary[400]}`,
                                outlineOffset: '2px',
                                ...circlePadding,
                            },
                            disabled: {
                                backgroundColor:
                                    foundationToken.colors.gray[900],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                        },
                        disabled: {
                            default: {
                                backgroundColor:
                                    foundationToken.colors.gray[900],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                            hover: {
                                backgroundColor:
                                    foundationToken.colors.gray[900],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                            focus: {
                                backgroundColor:
                                    foundationToken.colors.gray[900],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                            disabled: {
                                backgroundColor:
                                    foundationToken.colors.gray[900],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                        },
                        skipped: {
                            default: {
                                backgroundColor:
                                    foundationToken.colors.gray[700],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                            hover: {
                                backgroundColor:
                                    foundationToken.colors.gray[700],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                            focus: {
                                backgroundColor:
                                    foundationToken.colors.gray[700],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: `2px solid ${foundationToken.colors.primary[400]}`,
                                outlineOffset: '2px',
                                ...circlePadding,
                            },
                            disabled: {
                                backgroundColor:
                                    foundationToken.colors.gray[700],
                                borderColor: foundationToken.colors.gray[500],
                                borderWidth: '1px',
                                borderRadius: '50%',
                                size: '28px',
                                transition: 'all 0.2s ease-in-out',
                                outline: 'none',
                                outlineOffset: '0px',
                                ...circlePadding,
                            },
                        },
                    },
                    icon: {
                        default: {
                            default: {
                                color: foundationToken.colors.gray[200],
                            },
                            hover: { color: foundationToken.colors.gray[200] },
                            focus: { color: foundationToken.colors.gray[200] },
                            disabled: {
                                color: foundationToken.colors.gray[200],
                            },
                        },
                        completed: {
                            default: {
                                color: foundationToken.colors.gray[200],
                            },
                            hover: { color: foundationToken.colors.gray[200] },
                            focus: { color: foundationToken.colors.gray[200] },
                            disabled: {
                                color: foundationToken.colors.gray[200],
                            },
                        },
                        current: {
                            default: {
                                color: foundationToken.colors.gray[200],
                            },
                            hover: { color: foundationToken.colors.gray[200] },
                            focus: { color: foundationToken.colors.gray[200] },
                            disabled: {
                                color: foundationToken.colors.gray[200],
                            },
                        },
                        pending: {
                            default: {
                                color: foundationToken.colors.gray[500],
                            },
                            hover: { color: foundationToken.colors.gray[500] },
                            focus: { color: foundationToken.colors.gray[500] },
                            disabled: {
                                color: foundationToken.colors.gray[500],
                            },
                        },
                        disabled: {
                            default: {
                                color: foundationToken.colors.gray[600],
                            },
                            hover: { color: foundationToken.colors.gray[600] },
                            focus: { color: foundationToken.colors.gray[600] },
                            disabled: {
                                color: foundationToken.colors.gray[600],
                            },
                        },
                        skipped: {
                            default: {
                                color: foundationToken.colors.gray[400],
                            },
                            hover: { color: foundationToken.colors.gray[400] },
                            focus: { color: foundationToken.colors.gray[400] },
                            disabled: {
                                color: foundationToken.colors.gray[400],
                            },
                        },
                    },
                },
                connector: {
                    line: {
                        color: foundationToken.colors.gray[600],
                        height: '1px',
                    },
                },
                subConnector: {
                    line: {
                        color: foundationToken.colors.gray[600],
                        height: '1px',
                    },
                    dot: {
                        border: `1px solid ${foundationToken.colors.primary[500]}`,
                        borderRadius: '50%',
                        height: '8px',
                        width: '8px',
                        paddingTop: '4px',
                        paddingRight: '4px',
                        paddingBottom: '4px',
                        paddingLeft: '4px',
                    },
                    expander: {
                        icon: {
                            color: foundationToken.colors.gray[600],
                        },
                        width: '16px',
                    },
                    text: {
                        default: {
                            color: foundationToken.colors.gray[500],
                            fontSize: '12px',
                            fontWeight: 500,
                        },
                        disabled: {
                            color: foundationToken.colors.gray[300],
                            fontSize: '12px',
                            fontWeight: 500,
                        },
                        completed: {
                            color: foundationToken.colors.gray[500],
                            fontSize: '12px',
                            fontWeight: 500,
                        },
                        current: {
                            color: foundationToken.colors.gray[500],
                            fontSize: '12px',
                            fontWeight: 500,
                        },
                        pending: {
                            color: foundationToken.colors.gray[400],
                            fontSize: '12px',
                            fontWeight: 500,
                        },
                        skipped: {
                            color: foundationToken.colors.gray[400],
                            fontSize: '12px',
                            fontWeight: 500,
                        },
                    },
                },
                title: {
                    text: {
                        default: {
                            default: {
                                color: foundationToken.colors.gray[100],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 8,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            hover: {
                                color: foundationToken.colors.gray[100],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 8,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            focus: {
                                color: foundationToken.colors.gray[100],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 8,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            disabled: {
                                color: foundationToken.colors.gray[100],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 8,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                        },
                        completed: {
                            default: {
                                color: foundationToken.colors.gray[100],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 8,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            hover: {
                                color: foundationToken.colors.gray[100],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 8,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            focus: {
                                color: foundationToken.colors.gray[100],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 8,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            disabled: {
                                color: foundationToken.colors.gray[100],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 8,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                        },
                        current: {
                            default: {
                                color: foundationToken.colors.gray[300],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 8,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            hover: {
                                color: foundationToken.colors.gray[300],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 8,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            focus: {
                                color: foundationToken.colors.gray[300],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 8,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            disabled: {
                                color: foundationToken.colors.gray[300],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 8,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                        },
                        pending: {
                            default: {
                                color: foundationToken.colors.gray[500],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 8,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            hover: {
                                color: foundationToken.colors.gray[500],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 8,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            focus: {
                                color: foundationToken.colors.gray[500],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 8,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            disabled: {
                                color: foundationToken.colors.gray[500],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 8,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                        },
                        disabled: {
                            default: {
                                color: foundationToken.colors.gray[600],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 8,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            hover: {
                                color: foundationToken.colors.gray[600],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 8,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            focus: {
                                color: foundationToken.colors.gray[600],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 8,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            disabled: {
                                color: foundationToken.colors.gray[600],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 8,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                        },
                        skipped: {
                            default: {
                                color: foundationToken.colors.gray[400],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 8,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            hover: {
                                color: foundationToken.colors.gray[400],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 8,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            focus: {
                                color: foundationToken.colors.gray[400],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 8,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                            disabled: {
                                color: foundationToken.colors.gray[400],
                                fontSize: '14px',
                                fontWeight: 500,
                                gap: 8,
                                paddingTop: '8px',
                                paddingRight: '8px',
                                paddingBottom: '8px',
                                paddingLeft: '8px',
                            },
                        },
                    },
                },
            },
        },
    }
}