import { FoundationTokenType } from '../../../tokens/theme.token' import type { ResponsiveMultiValueInputV2Tokens } from './MultiValueInputV2.tokens.types' export const getMultiValueInputV2DarkTokens = ( foundationTokens: FoundationTokenType ): ResponsiveMultiValueInputV2Tokens => { return { sm: { gap: foundationTokens.unit[8], borderRadius: 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[100], hover: foundationTokens.colors.gray[100], focus: foundationTokens.colors.gray[100], disabled: foundationTokens.colors.gray[500], error: foundationTokens.colors.red[400], }, }, 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[600], error: foundationTokens.colors.red[400], }, }, helpIcon: { width: { sm: foundationTokens.unit[14], md: foundationTokens.unit[14], lg: foundationTokens.unit[14], }, color: { default: foundationTokens.colors.gray[400], hover: foundationTokens.colors.gray[300], focus: foundationTokens.colors.gray[300], disabled: foundationTokens.colors.gray[600], error: foundationTokens.colors.red[400], }, }, required: { color: foundationTokens.colors.red[400], }, }, inputContainer: { closeButton: { width: foundationTokens.unit[12], }, offSet: 24, placeholderColor: { default: foundationTokens.colors.gray[400], focus: foundationTokens.colors.gray[400], hover: foundationTokens.colors.gray[400], error: foundationTokens.colors.gray[400], disabled: foundationTokens.colors.gray[400], }, 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[400], md: foundationTokens.font.weight[400], lg: foundationTokens.font.weight[400], }, gap: foundationTokens.unit[8], borderRadius: foundationTokens.unit[10], paddingTop: { sm: foundationTokens.unit[5], md: foundationTokens.unit[7], lg: foundationTokens.unit[13], }, paddingRight: { sm: foundationTokens.unit[10], md: foundationTokens.unit[12], lg: foundationTokens.unit[14], }, paddingBottom: { sm: foundationTokens.unit[5], md: foundationTokens.unit[7], lg: foundationTokens.unit[13], }, paddingLeft: { sm: foundationTokens.unit[10], 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]}`, }, color: { default: foundationTokens.colors.gray[0], hover: foundationTokens.colors.gray[100], focus: foundationTokens.colors.gray[100], error: foundationTokens.colors.red[800], disabled: foundationTokens.colors.gray[300], }, 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: { default: foundationTokens.shadows.sm, hover: foundationTokens.shadows.sm, focus: foundationTokens.shadows.focusPrimary, error: foundationTokens.shadows.focusError, disabled: foundationTokens.shadows.sm, }, leftSlot: { width: foundationTokens.unit[16], height: foundationTokens.unit[16], }, rightSlot: { width: foundationTokens.unit[16], height: foundationTokens.unit[16], }, slotAlignTop: { withTags: foundationTokens.unit[7], withoutTags: foundationTokens.unit[3], }, }, 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], borderRadius: 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[100], hover: foundationTokens.colors.gray[100], focus: foundationTokens.colors.gray[100], disabled: foundationTokens.colors.gray[500], error: foundationTokens.colors.red[400], }, }, 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[600], error: foundationTokens.colors.red[400], }, }, helpIcon: { width: { sm: foundationTokens.unit[14], md: foundationTokens.unit[14], lg: foundationTokens.unit[14], }, color: { default: foundationTokens.colors.gray[400], hover: foundationTokens.colors.gray[300], focus: foundationTokens.colors.gray[300], disabled: foundationTokens.colors.gray[600], error: foundationTokens.colors.red[400], }, }, required: { color: foundationTokens.colors.red[400], }, }, inputContainer: { closeButton: { width: foundationTokens.unit[12], }, offSet: 24, placeholderColor: { default: foundationTokens.colors.gray[500], focus: foundationTokens.colors.gray[600], hover: foundationTokens.colors.gray[500], error: foundationTokens.colors.gray[500], disabled: foundationTokens.colors.gray[500], }, 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[400], md: foundationTokens.font.weight[400], lg: foundationTokens.font.weight[400], }, gap: foundationTokens.unit[8], borderRadius: foundationTokens.unit[10], paddingTop: { sm: foundationTokens.unit[4], md: foundationTokens.unit[6], lg: foundationTokens.unit[8], }, paddingRight: { sm: foundationTokens.unit[10], md: foundationTokens.unit[12], lg: foundationTokens.unit[14], }, paddingBottom: { sm: foundationTokens.unit[4], md: foundationTokens.unit[6], lg: foundationTokens.unit[8], }, paddingLeft: { sm: foundationTokens.unit[10], md: foundationTokens.unit[12], lg: foundationTokens.unit[14], }, border: { default: `1px solid ${foundationTokens.colors.gray[800]}`, hover: `1px solid ${foundationTokens.colors.gray[700]}`, focus: `1px solid ${foundationTokens.colors.primary[500]}`, error: `1px solid ${foundationTokens.colors.red[500]}`, disabled: `1px solid ${foundationTokens.colors.gray[800]}`, }, color: { default: foundationTokens.colors.gray[100], hover: foundationTokens.colors.gray[100], focus: foundationTokens.colors.gray[100], error: foundationTokens.colors.red[400], disabled: foundationTokens.colors.gray[500], }, backgroundColor: { default: foundationTokens.colors.gray[900], disabled: foundationTokens.colors.gray[800], hover: foundationTokens.colors.gray[900], focus: foundationTokens.colors.gray[900], error: foundationTokens.colors.gray[900], }, boxShadow: { default: foundationTokens.shadows.sm, hover: foundationTokens.shadows.sm, focus: foundationTokens.shadows.focusPrimary, error: foundationTokens.shadows.focusError, disabled: foundationTokens.shadows.sm, }, leftSlot: { width: foundationTokens.unit[16], height: foundationTokens.unit[16], }, rightSlot: { width: foundationTokens.unit[16], height: foundationTokens.unit[16], }, slotAlignTop: { withTags: foundationTokens.unit[7], withoutTags: foundationTokens.unit[3], }, }, 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], }, }, }, } }