@juspay/blend-design-system 0.0.37-beta.2 → 0.0.37-beta.3

package/lib/components/StepperV2/stepperV2.light.tokens.ts

@@ -0,0 +1,1389 @@
+import { FoundationTokenType } from '../../tokens/theme.token'
+import { ResponsiveStepperV2Tokens } from './stepperV2.tokens'
+
+export const getStepperV2LightTokens = (
+    foundationToken: FoundationTokenType
+): ResponsiveStepperV2Tokens => {
+    const circlePadding = {
+        paddingTop: '6px',
+        paddingRight: '6px',
+        paddingBottom: '6px',
+        paddingLeft: '6px',
+    }
+    return {
+        sm: {
+            container: {
+                gap: 6,
+                step: {
+                    circle: {
+                        default: {
+                            default: {
+                                backgroundColor:
+                                    foundationToken.colors.gray[200],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                            hover: {
+                                backgroundColor:
+                                    foundationToken.colors.gray[200],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                            focus: {
+                                backgroundColor:
+                                    foundationToken.colors.gray[200],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: `2px solid ${foundationToken.colors.gray[400]}`,
+                                outlineOffset: '2px',
+                                ...circlePadding,
+                            },
+                            disabled: {
+                                backgroundColor:
+                                    foundationToken.colors.gray[200],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                        },
+                        completed: {
+                            default: {
+                                backgroundColor:
+                                    foundationToken.colors.gray[200],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                            hover: {
+                                backgroundColor:
+                                    foundationToken.colors.gray[200],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                            focus: {
+                                backgroundColor:
+                                    foundationToken.colors.gray[200],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: `2px solid ${foundationToken.colors.gray[400]}`,
+                                outlineOffset: '2px',
+                                ...circlePadding,
+                            },
+                            disabled: {
+                                backgroundColor:
+                                    foundationToken.colors.gray[200],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                        },
+                        current: {
+                            default: {
+                                backgroundColor:
+                                    foundationToken.colors.gray[200],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                            hover: {
+                                backgroundColor:
+                                    foundationToken.colors.gray[200],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                            focus: {
+                                backgroundColor:
+                                    foundationToken.colors.gray[200],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: `2px solid ${foundationToken.colors.gray[400]}`,
+                                outlineOffset: '2px',
+                                ...circlePadding,
+                            },
+                            disabled: {
+                                backgroundColor:
+                                    foundationToken.colors.gray[200],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                        },
+                        pending: {
+                            default: {
+                                backgroundColor: foundationToken.colors.gray[0],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                            hover: {
+                                backgroundColor:
+                                    foundationToken.colors.gray[100],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                            focus: {
+                                backgroundColor: foundationToken.colors.gray[0],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: `2px solid ${foundationToken.colors.gray[400]}`,
+                                outlineOffset: '2px',
+                                ...circlePadding,
+                            },
+                            disabled: {
+                                backgroundColor: foundationToken.colors.gray[0],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                        },
+                        disabled: {
+                            default: {
+                                backgroundColor: foundationToken.colors.gray[0],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                            hover: {
+                                backgroundColor: foundationToken.colors.gray[0],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                            focus: {
+                                backgroundColor: foundationToken.colors.gray[0],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                            disabled: {
+                                backgroundColor: foundationToken.colors.gray[0],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                        },
+                        skipped: {
+                            default: {
+                                backgroundColor:
+                                    foundationToken.colors.gray[200],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                            hover: {
+                                backgroundColor:
+                                    foundationToken.colors.gray[200],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                            focus: {
+                                backgroundColor:
+                                    foundationToken.colors.gray[200],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: `2px solid ${foundationToken.colors.gray[400]}`,
+                                outlineOffset: '2px',
+                                ...circlePadding,
+                            },
+                            disabled: {
+                                backgroundColor:
+                                    foundationToken.colors.gray[200],
+                                borderColor: foundationToken.colors.gray[300],
+                                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[600],
+                            },
+                            hover: { color: foundationToken.colors.gray[600] },
+                            focus: { color: foundationToken.colors.gray[600] },
+                            disabled: {
+                                color: foundationToken.colors.gray[600],
+                            },
+                        },
+                        completed: {
+                            default: {
+                                color: foundationToken.colors.gray[600],
+                            },
+                            hover: { color: foundationToken.colors.gray[600] },
+                            focus: { color: foundationToken.colors.gray[600] },
+                            disabled: {
+                                color: foundationToken.colors.gray[600],
+                            },
+                        },
+                        current: {
+                            default: {
+                                color: foundationToken.colors.gray[600],
+                            },
+                            hover: { color: foundationToken.colors.gray[600] },
+                            focus: { color: foundationToken.colors.gray[600] },
+                            disabled: {
+                                color: foundationToken.colors.gray[600],
+                            },
+                        },
+                        pending: {
+                            default: {
+                                color: foundationToken.colors.gray[400],
+                            },
+                            hover: { color: foundationToken.colors.gray[400] },
+                            focus: { color: foundationToken.colors.gray[400] },
+                            disabled: {
+                                color: foundationToken.colors.gray[400],
+                            },
+                        },
+                        disabled: {
+                            default: {
+                                color: foundationToken.colors.gray[300],
+                            },
+                            hover: { color: foundationToken.colors.gray[300] },
+                            focus: { color: foundationToken.colors.gray[300] },
+                            disabled: {
+                                color: foundationToken.colors.gray[300],
+                            },
+                        },
+                        skipped: {
+                            default: {
+                                color: foundationToken.colors.gray[600],
+                            },
+                            hover: { color: foundationToken.colors.gray[600] },
+                            focus: { color: foundationToken.colors.gray[600] },
+                            disabled: {
+                                color: foundationToken.colors.gray[600],
+                            },
+                        },
+                    },
+                },
+                connector: {
+                    line: {
+                        color: foundationToken.colors.gray[300],
+                        height: '1px',
+                    },
+                },
+                subConnector: {
+                    line: {
+                        color: foundationToken.colors.gray[300],
+                        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[800],
+                                fontSize: '14px',
+                                fontWeight: 500,
+                                gap: 5,
+                                paddingTop: '8px',
+                                paddingRight: '8px',
+                                paddingBottom: '8px',
+                                paddingLeft: '8px',
+                            },
+                            hover: {
+                                color: foundationToken.colors.gray[800],
+                                fontSize: '14px',
+                                fontWeight: 500,
+                                gap: 5,
+                                paddingTop: '8px',
+                                paddingRight: '8px',
+                                paddingBottom: '8px',
+                                paddingLeft: '8px',
+                            },
+                            focus: {
+                                color: foundationToken.colors.gray[800],
+                                fontSize: '14px',
+                                fontWeight: 500,
+                                gap: 5,
+                                paddingTop: '8px',
+                                paddingRight: '8px',
+                                paddingBottom: '8px',
+                                paddingLeft: '8px',
+                            },
+                            disabled: {
+                                color: foundationToken.colors.gray[800],
+                                fontSize: '14px',
+                                fontWeight: 500,
+                                gap: 5,
+                                paddingTop: '8px',
+                                paddingRight: '8px',
+                                paddingBottom: '8px',
+                                paddingLeft: '8px',
+                            },
+                        },
+                        completed: {
+                            default: {
+                                color: foundationToken.colors.gray[800],
+                                fontSize: '14px',
+                                fontWeight: 500,
+                                gap: 5,
+                                paddingTop: '8px',
+                                paddingRight: '8px',
+                                paddingBottom: '8px',
+                                paddingLeft: '8px',
+                            },
+                            hover: {
+                                color: foundationToken.colors.gray[800],
+                                fontSize: '14px',
+                                fontWeight: 500,
+                                gap: 5,
+                                paddingTop: '8px',
+                                paddingRight: '8px',
+                                paddingBottom: '8px',
+                                paddingLeft: '8px',
+                            },
+                            focus: {
+                                color: foundationToken.colors.gray[800],
+                                fontSize: '14px',
+                                fontWeight: 500,
+                                gap: 5,
+                                paddingTop: '8px',
+                                paddingRight: '8px',
+                                paddingBottom: '8px',
+                                paddingLeft: '8px',
+                            },
+                            disabled: {
+                                color: foundationToken.colors.gray[800],
+                                fontSize: '14px',
+                                fontWeight: 500,
+                                gap: 5,
+                                paddingTop: '8px',
+                                paddingRight: '8px',
+                                paddingBottom: '8px',
+                                paddingLeft: '8px',
+                            },
+                        },
+                        current: {
+                            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',
+                            },
+                        },
+                        pending: {
+                            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',
+                            },
+                        },
+                        disabled: {
+                            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',
+                            },
+                        },
+                        skipped: {
+                            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',
+                            },
+                        },
+                    },
+                },
+                description: {
+                    text: {
+                        color: foundationToken.colors.gray[500],
+                        fontSize: '12px',
+                        fontWeight: 500,
+                    },
+                },
+            },
+        },
+        lg: {
+            container: {
+                gap: 6,
+                step: {
+                    circle: {
+                        default: {
+                            default: {
+                                backgroundColor:
+                                    foundationToken.colors.gray[200],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                            hover: {
+                                backgroundColor:
+                                    foundationToken.colors.gray[200],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                            focus: {
+                                backgroundColor:
+                                    foundationToken.colors.gray[200],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: `2px solid ${foundationToken.colors.gray[400]}`,
+                                outlineOffset: '2px',
+                                ...circlePadding,
+                            },
+                            disabled: {
+                                backgroundColor:
+                                    foundationToken.colors.gray[200],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                        },
+                        completed: {
+                            default: {
+                                backgroundColor:
+                                    foundationToken.colors.gray[200],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                            hover: {
+                                backgroundColor:
+                                    foundationToken.colors.gray[200],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                            focus: {
+                                backgroundColor:
+                                    foundationToken.colors.gray[200],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: `2px solid ${foundationToken.colors.gray[400]}`,
+                                outlineOffset: '2px',
+                                ...circlePadding,
+                            },
+                            disabled: {
+                                backgroundColor:
+                                    foundationToken.colors.gray[200],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                        },
+                        current: {
+                            default: {
+                                backgroundColor:
+                                    foundationToken.colors.gray[200],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                            hover: {
+                                backgroundColor:
+                                    foundationToken.colors.gray[200],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                            focus: {
+                                backgroundColor:
+                                    foundationToken.colors.gray[200],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: `2px solid ${foundationToken.colors.gray[400]}`,
+                                outlineOffset: '2px',
+                                ...circlePadding,
+                            },
+                            disabled: {
+                                backgroundColor:
+                                    foundationToken.colors.gray[200],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                        },
+                        pending: {
+                            default: {
+                                backgroundColor: foundationToken.colors.gray[0],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                            hover: {
+                                backgroundColor:
+                                    foundationToken.colors.gray[100],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                            focus: {
+                                backgroundColor: foundationToken.colors.gray[0],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: `2px solid ${foundationToken.colors.gray[400]}`,
+                                outlineOffset: '2px',
+                                ...circlePadding,
+                            },
+                            disabled: {
+                                backgroundColor: foundationToken.colors.gray[0],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                        },
+                        disabled: {
+                            default: {
+                                backgroundColor: foundationToken.colors.gray[0],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                            hover: {
+                                backgroundColor: foundationToken.colors.gray[0],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                            focus: {
+                                backgroundColor: foundationToken.colors.gray[0],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                            disabled: {
+                                backgroundColor: foundationToken.colors.gray[0],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                        },
+                        skipped: {
+                            default: {
+                                backgroundColor:
+                                    foundationToken.colors.gray[200],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                            hover: {
+                                backgroundColor:
+                                    foundationToken.colors.gray[200],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: 'none',
+                                outlineOffset: '0px',
+                                ...circlePadding,
+                            },
+                            focus: {
+                                backgroundColor:
+                                    foundationToken.colors.gray[200],
+                                borderColor: foundationToken.colors.gray[300],
+                                borderWidth: '1px',
+                                borderRadius: '50%',
+                                size: '28px',
+                                transition: 'all 0.2s ease-in-out',
+                                outline: `2px solid ${foundationToken.colors.gray[400]}`,
+                                outlineOffset: '2px',
+                                ...circlePadding,
+                            },
+                            disabled: {
+                                backgroundColor:
+                                    foundationToken.colors.gray[200],
+                                borderColor: foundationToken.colors.gray[300],
+                                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[600],
+                            },
+                            hover: { color: foundationToken.colors.gray[600] },
+                            focus: { color: foundationToken.colors.gray[600] },
+                            disabled: {
+                                color: foundationToken.colors.gray[600],
+                            },
+                        },
+                        completed: {
+                            default: {
+                                color: foundationToken.colors.gray[600],
+                            },
+                            hover: { color: foundationToken.colors.gray[600] },
+                            focus: { color: foundationToken.colors.gray[600] },
+                            disabled: {
+                                color: foundationToken.colors.gray[600],
+                            },
+                        },
+                        current: {
+                            default: {
+                                color: foundationToken.colors.gray[600],
+                            },
+                            hover: { color: foundationToken.colors.gray[600] },
+                            focus: { color: foundationToken.colors.gray[600] },
+                            disabled: {
+                                color: foundationToken.colors.gray[600],
+                            },
+                        },
+                        pending: {
+                            default: {
+                                color: foundationToken.colors.gray[400],
+                            },
+                            hover: { color: foundationToken.colors.gray[400] },
+                            focus: { color: foundationToken.colors.gray[400] },
+                            disabled: {
+                                color: foundationToken.colors.gray[400],
+                            },
+                        },
+                        disabled: {
+                            default: {
+                                color: foundationToken.colors.gray[300],
+                            },
+                            hover: { color: foundationToken.colors.gray[300] },
+                            focus: { color: foundationToken.colors.gray[300] },
+                            disabled: {
+                                color: foundationToken.colors.gray[300],
+                            },
+                        },
+                        skipped: {
+                            default: {
+                                color: foundationToken.colors.gray[600],
+                            },
+                            hover: { color: foundationToken.colors.gray[600] },
+                            focus: { color: foundationToken.colors.gray[600] },
+                            disabled: {
+                                color: foundationToken.colors.gray[600],
+                            },
+                        },
+                    },
+                },
+                connector: {
+                    line: {
+                        color: foundationToken.colors.gray[300],
+                        height: '1px',
+                    },
+                },
+                subConnector: {
+                    line: {
+                        color: foundationToken.colors.gray[300],
+                        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[800],
+                                fontSize: '14px',
+                                fontWeight: 500,
+                                gap: 8,
+                                paddingTop: '8px',
+                                paddingRight: '8px',
+                                paddingBottom: '8px',
+                                paddingLeft: '8px',
+                            },
+                            hover: {
+                                color: foundationToken.colors.gray[800],
+                                fontSize: '14px',
+                                fontWeight: 500,
+                                gap: 8,
+                                paddingTop: '8px',
+                                paddingRight: '8px',
+                                paddingBottom: '8px',
+                                paddingLeft: '8px',
+                            },
+                            focus: {
+                                color: foundationToken.colors.gray[800],
+                                fontSize: '14px',
+                                fontWeight: 500,
+                                gap: 8,
+                                paddingTop: '8px',
+                                paddingRight: '8px',
+                                paddingBottom: '8px',
+                                paddingLeft: '8px',
+                            },
+                            disabled: {
+                                color: foundationToken.colors.gray[800],
+                                fontSize: '14px',
+                                fontWeight: 500,
+                                gap: 8,
+                                paddingTop: '8px',
+                                paddingRight: '8px',
+                                paddingBottom: '8px',
+                                paddingLeft: '8px',
+                            },
+                        },
+                        completed: {
+                            default: {
+                                color: foundationToken.colors.gray[800],
+                                fontSize: '14px',
+                                fontWeight: 500,
+                                gap: 8,
+                                paddingTop: '8px',
+                                paddingRight: '8px',
+                                paddingBottom: '8px',
+                                paddingLeft: '8px',
+                            },
+                            hover: {
+                                color: foundationToken.colors.gray[800],
+                                fontSize: '14px',
+                                fontWeight: 500,
+                                gap: 8,
+                                paddingTop: '8px',
+                                paddingRight: '8px',
+                                paddingBottom: '8px',
+                                paddingLeft: '8px',
+                            },
+                            focus: {
+                                color: foundationToken.colors.gray[800],
+                                fontSize: '14px',
+                                fontWeight: 500,
+                                gap: 8,
+                                paddingTop: '8px',
+                                paddingRight: '8px',
+                                paddingBottom: '8px',
+                                paddingLeft: '8px',
+                            },
+                            disabled: {
+                                color: foundationToken.colors.gray[800],
+                                fontSize: '14px',
+                                fontWeight: 500,
+                                gap: 8,
+                                paddingTop: '8px',
+                                paddingRight: '8px',
+                                paddingBottom: '8px',
+                                paddingLeft: '8px',
+                            },
+                        },
+                        current: {
+                            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',
+                            },
+                        },
+                        pending: {
+                            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',
+                            },
+                        },
+                        disabled: {
+                            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',
+                            },
+                        },
+                        skipped: {
+                            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',
+                            },
+                        },
+                    },
+                },
+                description: {
+                    text: {
+                        color: foundationToken.colors.gray[500],
+                        fontSize: '12px',
+                        fontWeight: 500,
+                    },
+                },
+            },
+        },
+    }
+}