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

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

/// Generates a dark material chip schema.
/// @type {Map}
/// @requires $material-chip
$dark-material-chip: extend(
    $material-chip,
    (
        _meta: (
            theme: 'material',
            variant: 'dark',
        ),
    )
);

/// Generates a dark fluent chip schema.
/// @type {Map}
/// @requires $fluent-chip
$dark-fluent-chip: extend(
    $fluent-chip,
    (
        _meta: (
            theme: 'fluent',
            variant: 'dark',
        ),
    )
);

/// Generates a dark bootstrap chip schema.
/// @type {Map}
/// @prop {Map} hover-background [color: ('gray', 100)] - The chip hover background color.
/// @prop {Map} hover-text-color [contrast-color: ('gray', 100)] - The chip text hover color.
/// @prop {Map} hover-selected-background [color: ('gray', 100)] - The selected chip hover background color.
/// @prop {Map} hover-selected-text-color [contrast-color: ('gray', 100)] - The selected chip hover text color.
/// @prop {Map} focus-outline-color [color: ('gray', 300, 0.38)] - The chip focus outline color.
/// @prop {Map} focus-selected-outline-color [color: ('gray', 300, 0.38)] - The selected chip focus outline color.
/// @requires $bootstrap-chip
$dark-bootstrap-chip: extend(
    $bootstrap-chip,
    (
        hover-background: (
            color: (
                'gray',
                100,
            ),
        ),

        hover-text-color: (
            contrast-color: (
                'gray',
                100,
            ),
        ),

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

        hover-selected-text-color: (
            contrast-color: (
                'gray',
                100,
            ),
        ),

        focus-outline-color: (
            color: (
                'gray',
                300,
                0.38,
            ),
        ),

        focus-selected-outline-color: (
            color: (
                'gray',
                300,
                0.38,
            ),
        ),

        _meta: (
            theme: 'bootstrap',
            variant: 'dark',
        ),
    )
);

/// Generates a dark indigo chip schema.
/// @type {Map}
/// @prop {Map} text-color [contrast-color: ('gray', 50, .8)] - The chip text color.
/// @prop {Map} hover-text-color [contrast-color: ('gray', 50)] - The chip text hover color.
/// @prop {Map} focus-text-color [contrast-color: ('gray', 50, .8)] The focused chip text color.
///
/// @prop {Map} background [contrast-color: ('gray', 50, .05)] - The chip background color.
/// @prop {Map} hover-background [contrast-color: ('gray', 50, .1)] - The chip hover background color.
/// @prop {Map} focus-background [contrast-color: ('gray', 50, .05)] The focused chip background color.
///
/// @prop {Map} border-color [color: ('gray', 100)] - The chip border color.
/// @prop {Map} hover-border-color [color: ('gray', 200)] - The chip hover border color.
/// @prop {Map} focus-border-color [color: ('gray', 100)] - The chip focus border color.
/// @prop {Map} focus-outline-color [contrast-color: ('gray', 50, .2)] - The chip focus outline color.
///
/// @prop {Map} ghost-background [color: ('gray', 100)] - The chip ghost background color.
///
/// @prop {Map} disabled-text-color [contrast-color: ('gray', 50, .2)] - The disabled chip text color.
/// @prop {Map} disabled-background [contrast-color: ('gray', 50, .05)] - The disabled chip background color.
/// @prop {Map} disabled-border-color [ color: ('gray', 50)] - The disabled chip border color.
/// @requires $indigo-chip
$dark-indigo-chip: extend(
    $indigo-chip,
    (
        text-color: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),

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

        focus-text-color: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),

        background: (
            contrast-color: (
                'gray',
                50,
                0.05,
            ),
        ),

        hover-background: (
            contrast-color: (
                'gray',
                50,
                0.1,
            ),
        ),

        focus-background: (
            contrast-color: (
                'gray',
                50,
                0.05,
            ),
        ),

        ghost-background: (
            color: (
                'gray',
                100,
            ),
        ),

        border-color: (
            color: (
                'gray',
                100,
            ),
        ),

        hover-border-color: (
            color: (
                'gray',
                200,
            ),
        ),

        focus-border-color: (
            color: (
                'gray',
                100,
            ),
        ),

        focus-outline-color: (
            contrast-color: (
                'gray',
                50,
                0.2,
            ),
        ),

        disabled-text-color: (
            contrast-color: (
                'gray',
                50,
                0.2,
            ),
        ),

        disabled-background: (
            contrast-color: (
                'gray',
                50,
                0.05,
            ),
        ),

        disabled-border-color: (
            color: (
                'gray',
                50,
            ),
        ),

        _meta: (
            theme: 'indigo',
            variant: 'dark',
        ),
    )
);