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

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

/// Generates a light avatar schema.
/// @type Map
/// @prop {Map} background [color: ('gray', 400)] - The background color of the avatar.
/// @prop {Map} color [color: ('gray', 800)] - The text color of the avatar.
/// @prop {Map} icon-color [color: ('gray', 800)] - The icon color of the avatar.
/// @prop {Number} border-radius [rem(8px)] - The border radius for rounded avatar.
/// @prop {List} size [(rem(40px), rem(64px), rem(88px))] - The size used for the avatar width and height.
/// @prop {Number} default-size [1] - The default size used for the avatar component.
$light-avatar: (
    background: (
        color: (
            'gray',
            400,
        ),
    ),
    color: (
        color: (
            'gray',
            800,
        ),
    ),
    icon-color: (
        color: (
            'gray',
            800,
        ),
    ),
    border-radius: rem(8px),
    size: (
        sizable: (
            rem(40px),
            rem(64px),
            rem(88px),
        ),
    ),
    default-size: 1,
    _meta: (
        name: 'avatar',
        variant: 'light',
    ),
);

/// Generates a material avatar schema.
/// @type Map
/// @requires $light-avatar
$material-avatar: extend(
    $light-avatar,
    (
        _meta: (
            theme: 'material',
        ),
    )
);

/// Generates a fluent avatar schema.
/// @type Map
/// @requires $light-avatar
$fluent-avatar: extend(
    $light-avatar,
    (
        _meta: (
            theme: 'fluent',
        ),
    )
);

/// Generates a bootstrap avatar schema.
/// @type Map
/// @prop {Number} border-radius [rem(4px)] - The border radius for rounded avatar.
/// @requires $light-avatar
$bootstrap-avatar: extend(
    $light-avatar,
    (
        border-radius: rem(4px),
        _meta: (
            theme: 'bootstrap',
        ),
    )
);

/// Generates an indigo avatar schema.
/// @type Map
/// @prop {Map} background [color: ('gray', 300)]- The background color of the avatar.
/// @prop {Map} color [color: ('gray', 700)] - The text color of the avatar.
/// @prop {Map} icon-color [color: ('gray', 600)] - The icon color of the avatar.
/// @prop {Number} border-radius [rem(4px)] - The border radius for rounded avatar.
/// @prop {List} size [(rem(20px), rem(28px), rem(36px))] - The size used for the avatar width and height.
/// @prop {Number} default-size [1] - The default size used for the avatar component.
/// @requires $light-avatar
$indigo-avatar: extend(
    $light-avatar,
    (
        background: (
            color: (
                'gray',
                300,
            ),
        ),
        color: (
            color: (
                'gray',
                700,
            ),
        ),
        icon-color: (
            color: (
                'gray',
                600,
            ),
        ),
        border-radius: rem(4px),
        size: (
            sizable: (
                rem(20px),
                rem(28px),
                rem(36px),
            ),
        ),
        _meta: (
            theme: 'indigo',
        ),
    )
);