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

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

/// Generates a light expansion panel schema.
/// @type {Map}
/// @prop {Map} header-background [color: ('surface')] - The panel header background color.
/// @prop {Map} body-background [color: ('surface')] - The panel body background color.
/// @prop {Map} header-focus-background [color: ('gray', 100)] - The panel header focus background color.
/// @prop {Map} header-title-color [color: ('gray', 900)] - The panel header title text color.
/// @prop {Map} header-description-color [color: ('gray', 700)] - The panel header description text color.
/// @prop {Map} header-icon-color [color: ('gray', 800)] - The panel header icon color.
/// @prop {Map} body-color [color: ('gray', 900)] - The panel body text color.
/// @prop {Map} disabled-text-color [color: ('gray', 500)] - The panel disabled text color.
/// @prop {Map} disabled-description-color [color: ('gray', 500)] - The panel disabled header description text color.
/// @prop {List} border-radius [(rem(0), rem(0), rem(16px))] - The border radius used for expansion-panel.
/// @prop {Number} expanded-margin [8px] - The expansion panel margin in expanded state when positioned inside accordion.
/// @prop {Map} typography [
///   title: (value: 'h5'),
///   description: (value: 'subtitle-2'),
///   body: (value: 'body-2')
/// ] - The typography styles used for the component.
$light-expansion-panel: (
    header-background: (
        color: (
            'surface',
        ),
    ),

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

    header-focus-background: (
        color: (
            'gray',
            100,
        ),
    ),

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

    header-description-color: (
        color: (
            'gray',
            700,
        ),
    ),

    header-icon-color: (
        color: (
            'gray',
            800,
        ),
    ),

    body-color: (
        color: (
            'gray',
            900,
        ),
    ),

    disabled-text-color: (
        color: (
            'gray',
            500,
        ),
    ),

    disabled-description-color: (
        color: (
            'gray',
            500,
        ),
    ),

    expanded-margin: rem(8px),
    border-radius: (
        rem(0),
        rem(0),
        rem(16px),
    ),

    typography: (
        title: (
            value: 'h5',
        ),
        description: (
            value: 'subtitle-2',
        ),
        body: (
            value: 'body-2',
        ),
    ),
);

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

/// Generates a fluent expansion panel schema.
/// @type {Map}
/// @prop {Map} body-color [color: ('gray', 700)] - The panel body text color.
/// @prop {Map} disabled-text-color [color: ('gray', 400)] - The panel disabled text color.
/// @prop {Map} disabled-description-color [color: ('gray', 400)] - The panel disabled header description text color.
/// @prop {Map} typography [
///   title: (value: 'subtitle-1'),
///   description: (value: 'body-2'),
///   body: (value: 'caption')
/// ] - The typography styles used for the component.
/// @requires {Map} $light-expansion-panel
$fluent-expansion-panel: extend(
    $light-expansion-panel,
    (
        body-color: (
            color: (
                'gray',
                700,
            ),
        ),

        disabled-text-color: (
            color: (
                'gray',
                400,
            ),
        ),

        disabled-description-color: (
            color: (
                'gray',
                400,
            ),
        ),

        typography: (
            title: (
                value: 'subtitle-1',
            ),
            description: (
                value: 'body-2',
            ),
            body: (
                value: 'caption',
            ),
        ),

        _meta: (
            theme: 'fluent',
            variant: 'light',
        ),
    )
);

/// Generates a bootstrap expansion panel schema.
/// @type {Map}
/// @prop {Map} header-title-color [color: ('gray', 800)] - The panel header title text color.
/// @requires {Map} $light-expansion-panel
$bootstrap-expansion-panel: extend(
    $light-expansion-panel,
    (
        header-title-color: (
            color: (
                'gray',
                800,
            ),
        ),

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

// Generates an indigo expansion panel schema.
/// @type {Map}
/// @prop {Color} header-background [transparent] - The panel header background color.
/// @prop {Color} body-background [transparent] - The panel body background color.
/// @prop {Color} header-focus-background [transparent] - The panel header focus background color.
/// @prop {Map} header-title-color [color: ('gray', 800)] - The panel header title text color.
/// @prop {Map} header-description-color [color: ('gray', 600)] - The panel header description text color.
/// @prop {Map} header-icon-color [color: ('gray', 600)] - The panel header icon color.
/// @prop {Map} body-color [color: ('gray', 700)] - The panel body text color.
/// @prop {Map} disabled-text-color [color: ('gray', 900, 0.2)] - The panel disabled text color.
/// @prop {Map} disabled-description-color [color: ('gray', 900, 0.15)] - The panel disabled header description text color.
/// @prop {Map} typography [
///   title: (value: 'body-2'),
///   description: (value: 'body-2'),
///   body: (value: 'body-2')
/// ] - The typography styles used for the component.
/// @requires {Map} $light-expansion-panel
$indigo-expansion-panel: extend(
    $light-expansion-panel,
    (
        header-background: transparent,
        body-background: transparent,
        header-focus-background: transparent,
        header-title-color: (
            color: (
                'gray',
                800,
            ),
        ),
        header-description-color: (
            color: (
                'gray',
                600,
            ),
        ),

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

        body-color: (
            color: (
                'gray',
                700,
            ),
        ),

        disabled-text-color: (
            color: (
                'gray',
                900,
                0.2,
            ),
        ),

        disabled-description-color: (
            color: (
                'gray',
                900,
                0.15,
            ),
        ),

        typography: (
            title: (
                value: 'body-2',
            ),
            description: (
                value: 'body-2',
            ),
            body: (
                value: 'body-2',
            ),
        ),

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