@use 'sass:list';
@use '@tokens' as tokens;
@use '../../settings/dictionaries';

$border-width: tokens.$border-width-100;
$border-style: solid;
$border-radius: tokens.$radius-300;

$color-dictionary: (
    emotion: dictionaries.$emotion-colors,
    neutral: neutral,
);

$color-dictionary-config: (
    color: 'content-subtle',
    border-color: 'border-basic',
    background-color: 'background-basic',
    subtle-color: 'content-basic',
    subtle-border-color: 'border-subtle',
    subtle-background-color: 'background-subtle',
);

$sizes: (
    xsmall: (
        padding-x: tokens.$space-500,
        padding-y: tokens.$space-200,
        typography: tokens.$body-xsmall-semibold,
    ),
    small: (
        padding-x: tokens.$space-500,
        padding-y: tokens.$space-300,
        typography: tokens.$body-small-semibold,
    ),
    medium: (
        padding-x: tokens.$space-600,
        padding-y: tokens.$space-400,
        typography: tokens.$body-medium-semibold,
    ),
    large: (
        padding-x: tokens.$space-700,
        padding-y: tokens.$space-500,
        typography: tokens.$body-large-semibold,
    ),
    xlarge: (
        padding-x: tokens.$space-700,
        padding-y: tokens.$space-500,
        typography: tokens.$body-xlarge-semibold,
    ),
);
