@use '../../../../utils/map' as *;
@use '../../../../typography/functions' as *;

////
/// @package theming
/// @group schemas
/// @access public
////

/// Generates a base light list schema.
/// @type {Map}
/// @prop {Map} background [color: 'surface'] - The list background color.
/// @prop {Map} header-background [color: 'surface'] - The list header background color.
/// @prop {Map} header-text-color [color: ('secondary', 500)] - The list header text color.
/// @prop {Map} item-background [color: 'surface'] - The list item background color.
/// @prop {Map} item-background-hover [color: ('gray', 200)] - The list item hover background.
/// @prop {Map} item-background-active [color: ('gray', 200)] - The active list item background color.
/// @prop {Map} item-background-selected [color: ('gray', 200)] - The selected list item background color.
/// @prop {Map} item-text-color [color: ('gray', 700)] - The list item text color.
/// @prop {Map} item-text-color-hover [color: ('gray', 700)] - The list item text color on hover.
/// @prop {Map} item-text-color-active [color: ('gray', 700)] - The active list item text color.
/// @prop {Map} item-text-color-selected [color: ('gray', 700)] - The selected list item text color.
/// @prop {Map} item-title-color [color: ('gray', 900)] - The list item title color.
/// @prop {Map} item-title-color-hover [color: ('gray', 900)] - The list item title hover color.
/// @prop {Map} item-title-color-active [color: ('gray', 900)] - The list item title active color.
/// @prop {Map} item-title-color-selected [color: ('gray', 900)] - The list item title selected color.
/// @prop {Map} item-subtitle-color [color: ('gray', 700)] - The list item subtitle color.
/// @prop {Map} item-subtitle-color-hover [color: ('gray', 700)] - The list item subtitle hover color.
/// @prop {Map} item-subtitle-color-active [color: ('gray', 700)] - The list item subtitle active color.
/// @prop {Map} item-subtitle-color-selected [color: ('gray', 700)] - The list item subtitle selected color.
/// @prop {String} item-action-color ["'currentColor'"] - The list item action color.
/// @prop {String} item-action-color-hover ["'currentColor'"] - The list item action hover color.
/// @prop {String} item-action-color-active ["'currentColor'"] - The list item action active color.
/// @prop {String} item-action-color-selected ["'currentColor'"] - The list item action selected color.
/// @prop {String} item-thumbnail-color ["'currentColor'"] - The list item thumbnail color.
/// @prop {String} item-thumbnail-color-hover ["'currentColor'"] - The list item thumbnail hover color.
/// @prop {String} item-thumbnail-color-active ["'currentColor'"] - The list item thumbnail active color.
/// @prop {String} item-thumbnail-color-selected ["'currentColor'"] - The list item thumbnail selected color.
/// @prop {Map} border-radius [border-radius: (rem(0), rem(0), rem(24px))] - The border radius used for list component.
/// @prop {Map} item-border-radius [border-radius: (rem(0), rem(0), rem(24px))] - The border radius used for list item.
/// @prop {Color} border-color [transparent] - The list border color.
/// @prop {Number} border-width [0] - The list border width.
/// @prop {Number} default-size [2] - The default size used for the list component.
$light-list: (
    background: (
        color: 'surface',
    ),

    header-background: (
        color: 'surface',
    ),

    header-text-color: (
        color: (
            'secondary',
            500,
        ),
    ),

    item-background: (
        color: 'surface',
    ),

    item-background-hover: (
        color: (
            'gray',
            200,
        ),
    ),

    item-background-active: (
        color: (
            'gray',
            200,
        ),
    ),

    item-background-selected: (
        color: (
            'gray',
            200,
        ),
    ),

    item-text-color: (
        color: (
            'gray',
            700,
        ),
    ),

    item-text-color-hover: (
        color: (
            'gray',
            700,
        ),
    ),

    item-text-color-active: (
        color: (
            'gray',
            700,
        ),
    ),

    item-text-color-selected: (
        color: (
            'gray',
            700,
        ),
    ),

    item-title-color: (
        color: (
            'gray',
            900,
        ),
    ),

    item-title-color-hover: (
        color: (
            'gray',
            900,
        ),
    ),

    item-title-color-active: (
        color: (
            'gray',
            900,
        ),
    ),

    item-title-color-selected: (
        color: (
            'gray',
            900,
        ),
    ),

    item-action-color: "'currentColor'",

    item-action-color-hover: "'currentColor'",

    item-action-color-active: "'currentColor'",

    item-action-color-selected: "'currentColor'",

    item-subtitle-color: (
        color: (
            'gray',
            700,
        ),
    ),

    item-subtitle-color-hover: (
        color: (
            'gray',
            700,
        ),
    ),

    item-subtitle-color-active: (
        color: (
            'gray',
            700,
        ),
    ),

    item-subtitle-color-selected: (
        color: (
            'gray',
            700,
        ),
    ),

    item-thumbnail-color: "'currentColor'",

    item-thumbnail-color-hover: "'currentColor'",

    item-thumbnail-color-active: "'currentColor'",

    item-thumbnail-color-selected: "'currentColor'",

    border-color: transparent,

    border-width: 0,

    border-radius: (
        border-radius: (
            rem(0),
            rem(0),
            rem(24px),
        ),
    ),
    item-border-radius: (
        border-radius: (
            rem(0),
            rem(0),
            rem(24px),
        ),
    ),
    default-size: 2,
);

/// Generates a material list schema.
/// @type {Map}
/// @prop {Map} typography [
///   header: (value: 'overline'),
///   item: (value: 'subtitle-1'),
///   title: (value: 'subtitle-1'),
///   subtitle: (value: 'body-2')
/// ] - The typography styles used for the component.
/// @requires {Map} $light-list
$material-list: extend(
    $light-list,
    (
        typography: (
            header: (
                value: 'overline',
            ),
            item: (
                value: 'subtitle-1',
            ),
            title: (
                value: 'subtitle-1',
            ),
            subtitle: (
                value: 'body-2',
            ),
        ),
        _meta: (
            theme: 'material',
            variant: 'light',
        ),
    )
);

/// Generates a fluent list schema.
/// @type {Map}
/// @prop {Map} border-color [color: ('gray', 200)] - The list border color.
/// @prop {Number} border-width [rem(1px)] - The list border width.
/// @prop {Map} typography [
///   header: (value: 'overline'),
///   item: (value: 'caption'),
///   title: (value: 'caption'),
///   subtitle: (value: 'caption')
/// ] - The typography styles used for the component.
/// @requires {Map} $light-list
$fluent-list: extend(
    $light-list,
    (
        border-color: (
            color: (
                'gray',
                200,
            ),
        ),
        border-width: rem(1px),
        typography: (
            header: (
                value: 'overline',
            ),
            item: (
                value: 'caption',
            ),
            title: (
                value: 'caption',
            ),
            subtitle: (
                value: 'caption',
            ),
        ),
        _meta: (
            theme: 'fluent',
            variant: 'light',
        ),
    )
);

/// Generates a bootstrap list schema.
/// @type {Map}
/// @prop {Map} header-background [contrast-color: ('gray', 900)] - The list header background color.
/// @prop {Map} item-background [contrast-color: ('gray', 900)] - The list item background color.
/// @prop {Map} item-text-color [color: ('gray', 900)] - The list item text color.
/// @prop {Map} item-text-color-hover [color: ('gray', 900)] - The list item text color on hover.
/// @prop {Map} item-text-color-active [color: ('gray', 900)] - The active list item text color.
/// @prop {Map} item-text-color-selected [color: ('gray', 900)] - The selected list item text color.
/// @prop {Map} border-radius [border-radius: (rem(4px), rem(0), rem(24px))] - The border radius used for list component.
/// @prop {Map} border-color [color: ('gray', 300)] - The list border color.
/// @prop {Number} border-width [rem(1px)] - The list border width.
/// @prop {Map} typography [
///   header: (value: 'overline'),
///   item: (value: 'body-2'),
///   title: (value: 'body-1'),
///   subtitle: (value: 'body-2')
/// ] - The typography styles used for the component.
/// @requires {Map} $light-list
$bootstrap-list: extend(
    $light-list,
    (
        border-width: rem(1px),
        border-color: (
            color: (
                'gray',
                300,
            ),
        ),

        item-background: (
            contrast-color: (
                'gray',
                900,
            ),
        ),

        header-background: (
            contrast-color: (
                'gray',
                900,
            ),
        ),

        item-text-color: (
            color: (
                'gray',
                900,
            ),
        ),

        item-text-color-hover: (
            color: (
                'gray',
                900,
            ),
        ),

        item-text-color-active: (
            color: (
                'gray',
                900,
            ),
        ),

        item-text-color-selected: (
            color: (
                'gray',
                900,
            ),
        ),

        border-radius: (
            border-radius: (
                rem(4px),
                rem(0),
                rem(24px),
            ),
        ),

        typography: (
            header: (
                value: 'overline',
            ),
            item: (
                value: 'body-2',
            ),
            title: (
                value: 'body-1',
            ),
            subtitle: (
                value: 'body-2',
            ),
        ),
        _meta: (
            theme: 'bootstrap',
            variant: 'light',
        ),
    )
);

/// Generates an indigo list schema.
/// @type {Map}
/// @prop {Color} background [transparent] - The list background color.
/// @prop {Color} header-background [transparent] - The list header background color.
/// @prop {Map} header-text-color [color: ('gray', 600)] - The list header text color.
/// @prop {Color} item-background [transparent] - The list item background color.
/// @prop {Map} item-background-hover [color: ('primary', 300, .3)] - The list item hover background.
/// @prop {Map} item-background-active [color: ('primary', 300, .3)] - The active list item background color.
/// @prop {Map} item-background-selected [color: ('primary', 300, .3)] - The selected list item background color.
/// @prop {Map} item-text-color [color: ('gray', 800)] - The list item text color.
/// @prop {Map} item-text-color-hover [color: ('gray', 900)] - The list item text color on hover.
/// @prop {Map} item-text-color-active [color: ('gray', 900)] - The active list item text color.
/// @prop {Map} item-text-color-selected [color: ('gray', 900)] - The selected list item text color.
/// @prop {Map} item-subtitle-color [color: ('gray', 600)] - The list item subtitle color.
/// @prop {Map} item-subtitle-color-hover [color: ('gray', 700)] - The list item subtitle hover color.
/// @prop {Map} item-subtitle-color-active [color: ('gray', 700)] - The list item subtitle active color.
/// @prop {Map} item-subtitle-color-selected [color: ('gray', 700)] - The list item subtitle selected color.
/// @prop {Map} item-action-color [color: ('gray', 600)] - The list item action color.
/// @prop {Map} item-action-color-hover [color: ('gray', 700)] - The list item action hover color.
/// @prop {Map} item-action-color-active [color: ('gray', 700)] - The list item action active color.
/// @prop {Map} item-action-color-selected [color: ('gray', 700)] - The list item action selected color.
/// @prop {Map} item-thumbnail-color [color: ('gray', 600)] - The list item thumbnail color.
/// @prop {Map} item-thumbnail-color-hover [color: ('gray', 700)] - The list item thumbnail hover color.
/// @prop {Map} item-thumbnail-color-active [color: ('gray', 700)] - The list item thumbnail active color.
/// @prop {Map} item-thumbnail-color-selected [color: ('gray', 700)] - The list item thumbnail selected color.
/// @prop {Number} item-border-radius [rem(4px)] - The border radius used for list item.
/// @prop {Map} typography [
///   header: (value: 'overline'),
///   item: (value: 'body-2'),
///   title: (value: 'body-2'),
///   subtitle: (value: 'body-2')
/// ] - The typography styles used for the component.
/// @requires {Map} $light-list
$indigo-list: extend(
    $light-list,
    (
        background: transparent,

        header-background: transparent,

        header-text-color: (
            color: (
                'gray',
                600,
            ),
        ),

        item-background: transparent,

        item-background-hover: (
            color: (
                'primary',
                300,
                0.3,
            ),
        ),

        item-background-active: (
            color: (
                'primary',
                300,
                0.3,
            ),
        ),

        item-background-selected: (
            color: (
                'primary',
                300,
                0.3,
            ),
        ),

        item-text-color: (
            color: (
                'gray',
                800,
            ),
        ),

        item-text-color-hover: (
            color: (
                'gray',
                900,
            ),
        ),

        item-text-color-active: (
            color: (
                'gray',
                900,
            ),
        ),

        item-text-color-selected: (
            color: (
                'gray',
                900,
            ),
        ),

        item-action-color: (
            color: (
                'gray',
                600,
            ),
        ),

        item-action-color-hover: (
            color: (
                'gray',
                700,
            ),
        ),

        item-action-color-active: (
            color: (
                'gray',
                700,
            ),
        ),

        item-action-color-selected: (
            color: (
                'gray',
                700,
            ),
        ),

        item-subtitle-color: (
            color: (
                'gray',
                600,
            ),
        ),

        item-subtitle-color-hover: (
            color: (
                'gray',
                700,
            ),
        ),

        item-subtitle-color-active: (
            color: (
                'gray',
                700,
            ),
        ),

        item-subtitle-color-selected: (
            color: (
                'gray',
                700,
            ),
        ),

        item-thumbnail-color: (
            color: (
                'gray',
                600,
            ),
        ),

        item-thumbnail-color-hover: (
            color: (
                'gray',
                700,
            ),
        ),

        item-thumbnail-color-active: (
            color: (
                'gray',
                700,
            ),
        ),

        item-thumbnail-color-selected: (
            color: (
                'gray',
                700,
            ),
        ),

        item-border-radius: rem(4px),
        typography: (
            header: (
                value: 'overline',
            ),
            item: (
                value: 'body-2',
            ),
            title: (
                value: 'body-2',
            ),
            subtitle: (
                value: 'body-2',
            ),
        ),
        _meta: (
            theme: 'indigo',
            variant: 'light',
        ),
    )
);