@use '../../../../utils/map' as *;
@use '../light/list' as *;

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

/// Generates a base dark list schema.
/// @type Map
/// @prop {Map} item-background-hover [color: ('gray', 100)] - The list item hover background.
/// @prop {Map} item-background-active [color: ('gray', 100)] - The active list item background color.
/// @prop {Map} item-background-selected [color: ('gray', 100)] - The selected list item background color.
$base-dark-list: (
    item-background-hover: (
        color: (
            'gray',
            100,
        ),
    ),

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

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

    _meta: (
        name: 'list',
        variant: 'dark',
    ),
);

/// Generates a dark material list schema based.
/// @type Map
/// @requires $material-list
/// @requires $base-dark-list
$dark-material-list: extend($material-list, $base-dark-list);

/// Generates a dark fluent list schema.
/// @type Map
/// @prop {Map} header-text-color [color: ('secondary', 500)] - The list header text color.
/// @requires $fluent-list
/// @requires $base-dark-list
$dark-fluent-list: extend(
    $fluent-list,
    $base-dark-list,
    (
        header-text-color: (
            color: (
                'secondary',
                500,
            ),
        ),
    )
);

/// Generates a dark bootstrap list schema.
/// @type Map
/// @prop {Map} border-color [color: ('gray', 100)] - The list border color.
/// @prop {Map} item-background [color: ('gray', 50)] - The list item background color.
/// @prop {Map} item-background-hover [color: ('gray', 100)] - The list item hover background.
/// @prop {Map} item-background-active [color: ('gray', 100)] - The active list item background color.
/// @prop {Map} item-background-selected [color: ('gray', 100)] - The selected list item background color.
/// @prop {Map} header-background [color: ('gray', 50)] - The list header background color.
/// @prop {Map} header-text-color [color: ('secondary', 400)] - The list header text color.
/// @requires $bootstrap-list
$dark-bootstrap-list: extend(
    $bootstrap-list,
    $base-dark-list,
    (
        border-color: (
            color: (
                'gray',
                100,
            ),
        ),

        item-background: (
            color: (
                'gray',
                50,
            ),
        ),

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

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

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

        header-background: (
            color: (
                'gray',
                50,
            ),
        ),

        header-text-color: (
            color: (
                'secondary',
                400,
            ),
        ),
    )
);

/// Generates a dark indigo list schema.
/// @type Map
/// @prop {Map} header-text-color [contrast-color: ('gray', 50, .6)] - The list header text color.
/// @prop {Map} item-background-hover [color: ('primary', 400, .3)] - The list item hover background.
/// @prop {Map} item-background-active [color: ('primary')] - The active list item background color.
/// @prop {Map} item-background-selected [color: ('primary')] - The selected list item background color.
/// @prop {Map} item-text-color [contrast-color: ('gray', 50, .9)] - The list item text color.
/// @prop {Map} item-text-color-hover [contrast-color: ('gray', 50)] - The list item text color.
/// @prop {Map} item-text-color-active [contrast-color: ('gray', 50)] - The active list item text color.
/// @prop {Map} item-text-color-selected [contrast-color: ('gray', 50)] - The selected list item text color.
/// @prop {Map} item-subtitle-color [contrast-color: ('gray', 50, .7)] - The list item subtitle color.
/// @prop {Map} item-subtitle-color-hover [contrast-color: ('gray', 50, .8)] - The list item subtitle hover color.
/// @prop {Map} item-subtitle-color-active [contrast-color: ('gray', 50, .8)] - The list item subtitle active color.
/// @prop {Map} item-subtitle-color-selected [contrast-color: ('gray', 50, .8)] - The list item subtitle selected color.
/// @prop {Map} item-thumbnail-color [contrast-color: ('gray', 50, .6)] - The list item thumbnail color.
/// @prop {Map} item-thumbnail-color-hover [contrast-color: ('gray', 50, .8)] - The list item thumbnail hover color.
/// @prop {Map} item-thumbnail-color-active [contrast-color: ('gray', 50, .8)] - The list item thumbnail active color.
/// @prop {Map} item-thumbnail-color-selected [contrast-color: ('gray', 50, .8)] - The list item thumbnail selected color.
/// @prop {Map} item-action-color [contrast-color: ('gray', 50, .6)] - The list item action color.
/// @prop {Map} item-action-color-hover [contrast-color: ('gray', 50, .8)] - The list item action hover color.
/// @prop {Map} item-action-color-active [contrast-color: ('gray', 50, .8)] - The list item action active color.
/// @prop {Map} item-action-color-selected [contrast-color: ('gray', 50, .8)] - The list item action selected color.
/// @requires $indigo-list
$dark-indigo-list: extend(
    $indigo-list,
    $base-dark-list,
    (
        header-text-color: (
            contrast-color: (
                'gray',
                50,
                0.6,
            ),
        ),

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

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

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

        item-text-color: (
            contrast-color: (
                'gray',
                50,
                0.9,
            ),
        ),

        item-text-color-hover: (
            contrast-color: (
                'gray',
                50,
            ),
        ),

        item-text-color-active: (
            contrast-color: (
                'gray',
                50,
            ),
        ),

        item-text-color-selected: (
            contrast-color: (
                'gray',
                50,
            ),
        ),

        item-subtitle-color: (
            contrast-color: (
                'gray',
                50,
                0.7,
            ),
        ),

        item-subtitle-color-hover: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),

        item-subtitle-color-active: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),

        item-subtitle-color-selected: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),

        item-thumbnail-color: (
            contrast-color: (
                'gray',
                50,
                0.6,
            ),
        ),

        item-thumbnail-color-hover: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),

        item-thumbnail-color-active: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),

        item-thumbnail-color-selected: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),

        item-action-color: (
            contrast-color: (
                'gray',
                50,
                0.6,
            ),
        ),

        item-action-color-hover: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),

        item-action-color-active: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),

        item-action-color-selected: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),
    )
);