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

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

/// Generates a base dark chip schema.
/// @access private
/// @type Map
$dark-base-chip: (
    _meta: (
        name: 'chip',
        variant: 'dark',
    ),
);

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

/// Generates a dark fluent chip schema.
/// @type Map
/// @requires $fluent-chip
/// @requires $dark-base-chip
$dark-fluent-chip: extend($fluent-chip, $dark-base-chip);

/// 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
/// @requires $dark-base-chip
$dark-bootstrap-chip: extend(
    $bootstrap-chip,
    $dark-base-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,
            ),
        ),
    )
);

/// 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} ghost-text-color [contrast-color: ('gray', 100, .8)] - The chip ghost text 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
/// @requires $dark-base-chip
$dark-indigo-chip: extend(
    $indigo-chip,
    $dark-base-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,
            ),
        ),

        ghost-text-color: (
            contrast-color: (
                'gray',
                100,
                0.8,
            ),
        ),

        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,
            ),
        ),
    )
);