import { FoundationTokenType } from '../../../tokens/theme.token' import type { ResponsiveTextInputV2Tokens } from './TextInputV2.tokens.types' export const getTextInputV2LightTokens = ( foundationTokens: FoundationTokenType ): ResponsiveTextInputV2Tokens => { return { sm: { gap: foundationTokens.unit[8], topContainer: { label: { fontSize: { sm: foundationTokens.font.fontSize[14], md: foundationTokens.font.fontSize[14], lg: foundationTokens.font.fontSize[14], }, fontWeight: { sm: foundationTokens.font.weight[500], md: foundationTokens.font.weight[500], lg: foundationTokens.font.weight[500], }, color: { default: foundationTokens.colors.gray[700], hover: foundationTokens.colors.gray[700], focus: foundationTokens.colors.gray[700], disabled: foundationTokens.colors.gray[400], error: foundationTokens.colors.red[600], }, lineHeight: { sm: foundationTokens.font.lineHeight[20], md: foundationTokens.font.lineHeight[20], lg: foundationTokens.font.lineHeight[20], }, }, subLabel: { fontSize: { sm: foundationTokens.font.fontSize[14], md: foundationTokens.font.fontSize[14], lg: foundationTokens.font.fontSize[14], }, fontWeight: { sm: foundationTokens.font.weight[400], md: foundationTokens.font.weight[400], lg: foundationTokens.font.weight[400], }, lineHeight: { sm: foundationTokens.font.lineHeight[20], md: foundationTokens.font.lineHeight[20], lg: foundationTokens.font.lineHeight[20], }, color: { default: foundationTokens.colors.gray[400], hover: foundationTokens.colors.gray[400], focus: foundationTokens.colors.gray[400], disabled: foundationTokens.colors.gray[300], error: foundationTokens.colors.red[600], }, }, helpIcon: { width: { sm: foundationTokens.unit[14], md: foundationTokens.unit[14], lg: foundationTokens.unit[14], }, color: { default: foundationTokens.colors.gray[400], hover: foundationTokens.colors.gray[400], focus: foundationTokens.colors.gray[400], disabled: foundationTokens.colors.gray[400], error: foundationTokens.colors.red[600], }, }, required: { color: foundationTokens.colors.red[600], }, }, inputContainer: { gap: foundationTokens.unit[8], placeholder: { color: { default: foundationTokens.colors.gray[400], hover: foundationTokens.colors.gray[400], focus: foundationTokens.colors.gray[400], disabled: foundationTokens.colors.gray[400], error: foundationTokens.colors.red[600], }, fontWeight: { sm: foundationTokens.font.weight[500], md: foundationTokens.font.weight[500], lg: foundationTokens.font.weight[500], }, lineHeight: { sm: foundationTokens.font.lineHeight[20], md: foundationTokens.font.lineHeight[20], lg: foundationTokens.font.lineHeight[20], }, fontSize: { sm: foundationTokens.font.fontSize[14], md: foundationTokens.font.fontSize[14], lg: foundationTokens.font.fontSize[14], }, }, inputText: { fontSize: { sm: foundationTokens.font.size.body.md.fontSize, md: foundationTokens.font.size.body.md.fontSize, lg: foundationTokens.font.size.body.md.fontSize, }, fontWeight: { sm: foundationTokens.font.weight[500], md: foundationTokens.font.weight[500], lg: foundationTokens.font.weight[500], }, lineHeight: { sm: foundationTokens.font.lineHeight[18], md: foundationTokens.font.lineHeight[20], lg: foundationTokens.font.lineHeight[20], }, color: { default: foundationTokens.colors.gray[700], hover: foundationTokens.colors.gray[700], focus: foundationTokens.colors.gray[700], error: foundationTokens.colors.red[800], disabled: foundationTokens.colors.gray[300], }, }, borderRadius: { sm: foundationTokens.unit[10], md: foundationTokens.unit[10], lg: foundationTokens.unit[10], }, padding: { top: { sm: foundationTokens.unit[6], md: foundationTokens.unit[7], lg: foundationTokens.unit[15], }, right: { sm: foundationTokens.unit[12], md: foundationTokens.unit[12], lg: foundationTokens.unit[12], }, bottom: { sm: foundationTokens.unit[6], md: foundationTokens.unit[7], lg: foundationTokens.unit[15], }, left: { sm: foundationTokens.unit[12], md: foundationTokens.unit[12], lg: foundationTokens.unit[12], }, }, border: { default: `1px solid ${foundationTokens.colors.gray[200]}`, hover: `1px solid ${foundationTokens.colors.gray[400]}`, focus: `1px solid ${foundationTokens.colors.primary[500]}`, error: `1px solid ${foundationTokens.colors.red[500]}`, disabled: `1px solid ${foundationTokens.colors.gray[200]}`, }, backgroundColor: { default: foundationTokens.colors.gray[0], disabled: foundationTokens.colors.gray[50], hover: foundationTokens.colors.gray[0], focus: foundationTokens.colors.gray[0], error: foundationTokens.colors.gray[0], }, boxShadow: foundationTokens.shadows.sm, }, bottomContainer: { hintText: { fontSize: { sm: foundationTokens.font.fontSize[14], md: foundationTokens.font.fontSize[14], lg: foundationTokens.font.fontSize[14], }, fontWeight: { sm: foundationTokens.font.weight[400], md: foundationTokens.font.weight[400], lg: foundationTokens.font.weight[400], }, lineHeight: { sm: foundationTokens.font.lineHeight[20], md: foundationTokens.font.lineHeight[20], lg: foundationTokens.font.lineHeight[20], }, color: { default: foundationTokens.colors.gray[500], hover: foundationTokens.colors.gray[500], focus: foundationTokens.colors.gray[500], disabled: foundationTokens.colors.gray[400], error: foundationTokens.colors.red[600], }, }, errorMessage: { fontSize: { sm: foundationTokens.font.fontSize[14], md: foundationTokens.font.fontSize[14], lg: foundationTokens.font.fontSize[14], }, fontWeight: { sm: foundationTokens.font.weight[500], md: foundationTokens.font.weight[500], lg: foundationTokens.font.weight[500], }, lineHeight: { sm: foundationTokens.font.lineHeight[20], md: foundationTokens.font.lineHeight[20], lg: foundationTokens.font.lineHeight[20], }, color: foundationTokens.colors.red[600], }, }, }, lg: { gap: foundationTokens.unit[8], topContainer: { label: { fontSize: { sm: foundationTokens.font.fontSize[14], md: foundationTokens.font.fontSize[14], lg: foundationTokens.font.fontSize[14], }, fontWeight: { sm: foundationTokens.font.weight[500], md: foundationTokens.font.weight[500], lg: foundationTokens.font.weight[500], }, lineHeight: { sm: foundationTokens.font.lineHeight[20], md: foundationTokens.font.lineHeight[20], lg: foundationTokens.font.lineHeight[20], }, color: { default: foundationTokens.colors.gray[700], hover: foundationTokens.colors.gray[700], focus: foundationTokens.colors.gray[700], disabled: foundationTokens.colors.gray[400], error: foundationTokens.colors.red[600], }, }, subLabel: { fontSize: { sm: foundationTokens.font.fontSize[14], md: foundationTokens.font.fontSize[14], lg: foundationTokens.font.fontSize[14], }, fontWeight: { sm: foundationTokens.font.weight[400], md: foundationTokens.font.weight[400], lg: foundationTokens.font.weight[400], }, lineHeight: { sm: foundationTokens.font.lineHeight[20], md: foundationTokens.font.lineHeight[20], lg: foundationTokens.font.lineHeight[20], }, color: { default: foundationTokens.colors.gray[400], hover: foundationTokens.colors.gray[400], focus: foundationTokens.colors.gray[400], disabled: foundationTokens.colors.gray[300], error: foundationTokens.colors.red[600], }, }, helpIcon: { width: { sm: foundationTokens.unit[14], md: foundationTokens.unit[14], lg: foundationTokens.unit[14], }, color: { default: foundationTokens.colors.gray[400], hover: foundationTokens.colors.gray[400], focus: foundationTokens.colors.gray[400], disabled: foundationTokens.colors.gray[400], error: foundationTokens.colors.red[600], }, }, required: { color: foundationTokens.colors.red[600], }, }, inputContainer: { gap: foundationTokens.unit[8], placeholder: { color: { default: foundationTokens.colors.gray[400], hover: foundationTokens.colors.gray[400], focus: foundationTokens.colors.gray[400], disabled: foundationTokens.colors.gray[400], error: foundationTokens.colors.red[600], }, fontSize: { sm: foundationTokens.font.fontSize[14], md: foundationTokens.font.fontSize[14], lg: foundationTokens.font.fontSize[14], }, fontWeight: { sm: foundationTokens.font.weight[500], md: foundationTokens.font.weight[500], lg: foundationTokens.font.weight[500], }, lineHeight: { sm: foundationTokens.font.lineHeight[20], md: foundationTokens.font.lineHeight[20], lg: foundationTokens.font.lineHeight[20], }, }, inputText: { fontSize: { sm: foundationTokens.font.size.body.md.fontSize, md: foundationTokens.font.size.body.md.fontSize, lg: foundationTokens.font.size.body.md.fontSize, }, fontWeight: { sm: foundationTokens.font.weight[500], md: foundationTokens.font.weight[500], lg: foundationTokens.font.weight[500], }, lineHeight: { sm: foundationTokens.font.lineHeight[18], md: foundationTokens.font.lineHeight[20], lg: foundationTokens.font.lineHeight[20], }, color: { default: foundationTokens.colors.gray[700], hover: foundationTokens.colors.gray[700], focus: foundationTokens.colors.gray[700], error: foundationTokens.colors.red[800], disabled: foundationTokens.colors.gray[300], }, }, borderRadius: { sm: foundationTokens.unit[10], md: foundationTokens.unit[10], lg: foundationTokens.unit[10], }, padding: { top: { sm: foundationTokens.unit[6], md: foundationTokens.unit[7], lg: foundationTokens.unit[9], }, right: { sm: foundationTokens.unit[12], md: foundationTokens.unit[12], lg: foundationTokens.unit[14], }, bottom: { sm: foundationTokens.unit[6], md: foundationTokens.unit[7], lg: foundationTokens.unit[9], }, left: { sm: foundationTokens.unit[12], md: foundationTokens.unit[12], lg: foundationTokens.unit[14], }, }, border: { default: `1px solid ${foundationTokens.colors.gray[200]}`, hover: `1px solid ${foundationTokens.colors.gray[400]}`, focus: `1px solid ${foundationTokens.colors.primary[500]}`, error: `1px solid ${foundationTokens.colors.red[500]}`, disabled: `1px solid ${foundationTokens.colors.gray[200]}`, }, backgroundColor: { default: foundationTokens.colors.gray[0], disabled: foundationTokens.colors.gray[50], hover: foundationTokens.colors.gray[0], focus: foundationTokens.colors.gray[0], error: foundationTokens.colors.gray[0], }, boxShadow: foundationTokens.shadows.sm, }, bottomContainer: { hintText: { fontSize: { sm: foundationTokens.font.fontSize[14], md: foundationTokens.font.fontSize[14], lg: foundationTokens.font.fontSize[14], }, fontWeight: { sm: foundationTokens.font.weight[400], md: foundationTokens.font.weight[400], lg: foundationTokens.font.weight[400], }, lineHeight: { sm: foundationTokens.font.lineHeight[20], md: foundationTokens.font.lineHeight[20], lg: foundationTokens.font.lineHeight[20], }, color: { default: foundationTokens.colors.gray[500], hover: foundationTokens.colors.gray[500], focus: foundationTokens.colors.gray[500], disabled: foundationTokens.colors.gray[400], error: foundationTokens.colors.red[600], }, }, errorMessage: { fontSize: { sm: foundationTokens.font.fontSize[14], md: foundationTokens.font.fontSize[14], lg: foundationTokens.font.fontSize[14], }, fontWeight: { sm: foundationTokens.font.weight[500], md: foundationTokens.font.weight[500], lg: foundationTokens.font.weight[500], }, lineHeight: { sm: foundationTokens.font.lineHeight[20], md: foundationTokens.font.lineHeight[20], lg: foundationTokens.font.lineHeight[20], }, color: foundationTokens.colors.red[600], }, }, }, } }