import { DropdownTokens } from '../../Theme/components/DropdownTokens'
import { rv } from '../../../rv'

export const dropdown: DropdownTokens = {
    containerPaddingVertical: rv(9),
    containerPaddingHorizontal: rv(8),
    containerColor: (ds) => ds.sys.color.surfaceContainer,
    containerShape: (ds) => ds.sys.shape.large,
    containerGap: rv(16),
    outlineWidth: 1,
    outlineColor: (ds) => ds.sys.color.outlineVariant,
    iconSize: rv(24),
    iconColor: (ds) => ds.sys.color.primary,
    inputTextTypeScale: (ds) => ds.sys.typeScale.bodyLarge,
    inputTextColor: (ds) => ds.sys.color.onSurface,
    placeholderTextColor: (ds) => ds.sys.color.onSurface,
    placeholderOpacity: (ds) => ds.sys.state.disabledOnContainerOpacity,
    supportingTextTypeScale: (ds) => ds.sys.typeScale.bodySmall,
    supportingTextColor: (ds) => ds.sys.color.onSurfaceVariant,
    pressedStateLayerColor: (ds) => ds.sys.color.primary,
    pressedStateLayerOpacity: (ds) => ds.sys.state.pressedStateLayerOpacity,
    disabledContainerColor: (ds) => ds.ref.palette.neutral._94,
    disabledIconColor: (ds) => ds.sys.color.onSurface,
    disabledIconOpacity: (ds) => ds.sys.state.disabledOnContainerOpacity,
    disabledOutlineColor: (ds) => ds.sys.color.onSurface,
    disabledOutlineOpacity: (ds) => ds.sys.state.disabledOnContainerOpacity,
    disabledInputTextColor: (ds) => ds.sys.color.onSurface,
    disabledInputTextOpacity: (ds) => ds.sys.state.disabledOnContainerOpacity,
    disabledSupportingTextColor: (ds) => ds.sys.color.onSurface,
    disabledSupportingTextOpacity: (ds) => ds.sys.state.disabledOnContainerOpacity,
    errorIconColor: (ds) => ds.sys.color.error,
    errorOutlineColor: (ds) => ds.sys.color.error,
    errorSupportingTextColor: (ds) => ds.sys.color.error,
}