@use '@tokens' as tokens;

// Common for all form components
$input-typography: tokens.$body-medium-regular;
$input-color-state-disabled: tokens.$disabled-content;
$input-background-color: tokens.$form-field-filled-background-state-default;
$input-background-color-state-hover: tokens.$form-field-filled-background-state-hover;
$input-background-color-state-active: tokens.$form-field-filled-background-state-active;
$input-background-color-state-disabled: tokens.$disabled-background;
$input-border-color: tokens.$form-field-filled-border-state-default;
$input-border-color-success: tokens.$form-field-success;
$input-border-color-warning: tokens.$form-field-warning;
$input-border-color-danger: tokens.$form-field-danger;
$input-border-color-state-disabled: tokens.$disabled-border;
$input-focus-shadow: tokens.$focus-ring;
$label-color-state-default: tokens.$form-field-label;
$label-color-state-disabled: tokens.$disabled-content;
$label-required-typography: tokens.$body-small-regular;
$label-required-margin-left: tokens.$space-200;
$label-required-color: tokens.$form-field-danger;
$validation-text-typography: tokens.$body-small-semibold;
$validation-text-margin-top: tokens.$space-400;
$validation-text-color-state-disabled: tokens.$disabled-content;
$validation-text-color-success: tokens.$form-field-success;
$validation-text-color-warning: tokens.$form-field-warning;
$validation-text-color-danger: tokens.$form-field-danger;
$helper-text-typography: tokens.$body-small-regular;
$helper-text-margin-top: tokens.$space-400;
$helper-text-color-state-default: tokens.$form-field-helper-text;
$helper-text-color-state-disabled: tokens.$disabled-content;

// Inline field form components – Checkbox, Radio, etc.
$inline-field-gap: tokens.$space-500;
$inline-field-margin-y: tokens.$space-500;
$inline-field-input-border-color-checked: tokens.$form-field-filled-border-state-selected;
$inline-field-input-border-color-checked-disabled: tokens.$disabled-background;
$inline-field-input-border-width: tokens.$border-width-200;
$inline-field-input-background-color-checked: tokens.$selected-state-default;

// Box field form components – TextField, TextArea, etc.
$box-field-input-color-state-default: tokens.$form-field-filled-content;
$box-field-input-border-width: tokens.$border-width-100;
$box-field-input-border-style: solid;
$box-field-input-border-color-focus: tokens.$border-focus;
$box-field-input-focus-shadow: tokens.$focus-ring;

$box-field-input-border-radius: tokens.$radius-300;
$box-field-input-placeholder-color-state-default: tokens.$form-field-filled-placeholder;
$box-field-input-placeholder-color-state-disabled: tokens.$disabled-content;
$box-field-input-padding-x: tokens.$space-600;
$box-field-input-padding-y: calc(#{tokens.$space-500} - #{tokens.$border-width-100});
$box-field-input-width: 18rem;
$box-field-label-typography: tokens.$body-small-semibold;
$box-field-label-margin-bottom: tokens.$space-400;

$validation-states: (
    success: (
        input-border-color: $input-border-color-success,
        validation-text-color: $validation-text-color-success,
    ),
    warning: (
        input-border-color: $input-border-color-warning,
        validation-text-color: $validation-text-color-warning,
    ),
    danger: (
        input-border-color: $input-border-color-danger,
        validation-text-color: $validation-text-color-danger,
    ),
);

// Item variant
$item-padding-x: tokens.$space-700;
$item-padding-y: tokens.$space-500;
$item-border-radius: tokens.$radius-200;
$item-background-color-state-default: tokens.$background-interactive-state-default;
$item-background-color-state-hover: tokens.$background-interactive-state-hover;
$item-background-color-state-active: tokens.$background-interactive-state-active;
$item-label-typography: tokens.$body-medium-semibold;
$item-validation-text-typography: tokens.$body-small-semibold;
$item-helper-text-typography: tokens.$body-small-regular;
