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

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

/// Generates a light dock-manager schema.
/// @type {Map}
/// @prop {Color} accent-color [null] - Sets the pinned header background color, the joystick background and border colors, as well as the context menu background color.
/// @prop {Color} active-color [color: 'primary'] - Sets the active text and border colors for tabs, panes, and menus.
/// @prop {Color} background-color [null] - Sets the base dock manager color as well as the pane headers and tabs background colors.
/// @prop {Color} border-color [color: ('surface')] - Sets the global border color in the dock manager. Also sets the pane content background and the context menu active background colors.
/// @prop {Color} button-text [color: ('gray', 800)] - Sets the button text color.
/// @prop {Color} context-menu-background-active [color: 'primary'] - Sets the background color for active context menus.
/// @prop {Color} context-menu-background [null] - Sets the background color for context menus.
/// @prop {Color} dock-background [null] - Sets the background color of the dock manager.
/// @prop {Color} dock-text [null] - Sets the text color of the dock manager.
/// @prop {Color} drop-shadow-background [color: ('primary', 500, .2)] - Sets the drop-shadow background color.
/// @prop {Color} floating-pane-border-color [color: 'surface'] - Sets the border color for floating panes.
/// @prop {Color} flyout-shadow-color [color: ('gray', 900, .8)] - Sets the flyout shadow color.
/// @prop {Color} joystick-background [null] - Sets the background color of the joystick.
/// @prop {Color} joystick-background-active [color: 'primary'] - Sets the background color of the joysticks.
/// @prop {Color} joystick-border-color [color: ('gray', 300)] - Sets the border color of the joystick.
/// @prop {Color} joystick-icon-color [color: 'primary'] - Sets the color for the joystick icons.
/// @prop {Color} joystick-icon-color-active [contrast-color: 'surface'] - Sets the color of the active joystick icons.
/// @prop {Color} pane-content-background [color: ('surface')] - Sets the background color of the content panes.
/// @prop {Color} pane-content-text [null] - Sets the text color of the content panes.
/// @prop {Color} pane-header-background [null] - Sets the background color for pane headers.
/// @prop {Color} pane-header-text [null] - Sets the text color for pane headers.
/// @prop {Color} pinned-header-background [null] - Sets the background colors of pinned headers.
/// @prop {Color} pinned-header-text [null] - Sets the text colors of pinned headers.
/// @prop {Color} splitter-background [color: ('gray', 300)] - Sets the background color for the splitters.
/// @prop {Color} splitter-handle [color: ('gray', 400)] - Sets the background color for the splitter handles.
/// @prop {Color} tab-background-active [color: ('primary', 100)] - Sets the background color for active tabs.
/// @prop {Color} tab-background [color: 'surface'] - Sets the background color for tabs.
/// @prop {Color} tab-border-color [null] - Sets the border color for tabs.
/// @prop {Color} tab-border-color-active [null] - Sets the border color for active tabs.
/// @prop {Color} tab-text [color: ('gray', 700)] - Sets the text color for tabs.
/// @prop {Color} text-color [color: ('gray', 800)] - Sets the text color for most elements in the dock manager. Used as the default joystick icon color.
$light-dock-manager: (
    accent-color: null,

    active-color: (
        color: primary,
    ),

    background-color: (
        color: (
            'gray',
            200,
        ),
    ),

    border-color: (
        color: (
            'surface',
        ),
    ),

    button-text: (
        color: (
            'gray',
            800,
        ),
    ),

    context-menu-background-active: (
        color: 'primary',
    ),

    context-menu-background: null,

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

    dock-text: null,

    drop-shadow-background: (
        color: (
            'primary',
            900,
            0.1,
        ),
    ),

    floating-pane-border-color: (
        color: 'surface',
    ),

    flyout-shadow-color: (
        color: (
            'gray',
            900,
            0.1,
        ),
    ),

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

    joystick-background: null,

    joystick-border-color: (
        color: (
            'gray',
            300,
        ),
    ),

    joystick-icon-color: (
        color: 'primary',
    ),

    joystick-icon-color-active: (
        contrast-color: 'surface',
    ),

    pane-content-background: (
        color: (
            'surface',
        ),
    ),

    pane-content-text: null,

    pane-header-background: (
        color: (
            'gray',
            200,
        ),
    ),

    pane-header-text: null,

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

    pinned-header-text: null,

    splitter-background: (
        color: (
            'gray',
            300,
        ),
    ),

    splitter-handle: (
        color: (
            'gray',
            400,
        ),
    ),

    tab-background-active: (
        color: (
            'surface',
        ),
    ),

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

    tab-border-color-active: null,
    tab-border-color: null,

    tab-text: (
        color: (
            'gray',
            700,
        ),
    ),

    text-color: (
        color: (
            'gray',
            800,
        ),
    ),
);

/// Generates a material dock-manager schema.
/// @type {Map}
/// @prop {Color} context-menu-background-active [null] - Sets the background color for active context menus.
/// @prop {Color} context-menu-color-active [contrast-color: 'surface'] - Sets the text color for active context menus.
/// @prop {Color} context-menu-color [null] - Sets the text color for context menus.
/// @prop {Color} joystick-background-active [null] - Sets the background color of the joysticks.
/// @prop {Color} joystick-icon-color [color: ('gray', 600)] - Sets the color for the joystick icons.
/// @prop {Color} splitter-handle [null] - Sets the background color for the splitter handles.
/// @prop {Color} tab-background [null] - Sets the background color for tabs.
/// @prop {Color} tab-text [null] - Sets the text color for tabs.
/// @prop {Color} tab-text-active [null] - Sets the text color for active tabs.
/// @requires {Map} $light-dock-manager
$material-dock-manager: extend(
    $light-dock-manager,
    (
        context-menu-background-active: null,

        context-menu-color-active: (
            contrast-color: 'surface',
        ),

        context-menu-color: null,
        joystick-background-active: null,

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

        splitter-handle: null,
        tab-background: null,
        tab-text: null,
        tab-text-active: null,

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

/// Generates a fluent dock-manager schema.
/// @type {Map}
/// @prop {Color} context-menu-background-active [color: ('gray', 200)] - Sets the background color for active context menus.
/// @prop {Color} context-menu-color-active [color: ('gray', 800)] - Sets the text color for active context menus.
/// @prop {Color} context-menu-color [color: ('gray', 800)] - Sets the text color for active context menus.
/// @prop {Color} floating-pane-border-color [color: ('gray', 400)] - Sets the border color for floating panes.
/// @prop {Color} joystick-background-active [color: ('gray', 200)] - Sets the background color of the joysticks.
/// @prop {Color} joystick-border-color [color: ('gray', 400)] - Sets the border color of the joystick.
/// @prop {Color} joystick-icon-color [color: ('gray', 800)] - Sets the color for the joystick icons.
/// @prop {Color} joystick-icon-color-active [color: ('gray', 800)] - Sets the color of the active joystick icons.
/// @prop {Color} pane-header-background [color: ('gray', 100)] - Sets the background color for pane headers.
/// @prop {Color} splitter-background [color: ('gray', 100) - Sets the background color for the splitters.
/// @prop {Color} tab-border-color [color: 'surface'] - Sets the border color for tabs.
/// @prop {Color} tab-border-color-active [color: 'surface'] - Sets the border color for active tabs.
/// @prop {Color} tab-text-active [color: 'primary'] - Sets the text color for active tabs.
/// @requires {Map} $light-dock-manager
$fluent-dock-manager: extend(
    $light-dock-manager,
    (
        context-menu-background-active: (
            color: (
                'gray',
                200,
            ),
        ),

        context-menu-color-active: (
            color: (
                'gray',
                800,
            ),
        ),

        context-menu-color: (
            color: (
                'gray',
                800,
            ),
        ),

        floating-pane-border-color: (
            color: (
                'gray',
                400,
            ),
        ),

        joystick-background-active: (
            color: (
                'gray',
                200,
            ),
        ),

        joystick-border-color: (
            color: (
                'gray',
                400,
            ),
        ),

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

        joystick-icon-color-active: (
            color: (
                'gray',
                800,
            ),
        ),

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

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

        tab-border-color-active: (
            color: 'surface',
        ),

        tab-border-color: (
            color: 'surface',
        ),

        tab-text-active: (
            color: 'primary',
        ),

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

/// Generates a bootstrap dock-manager schema.
/// @type {Map}
/// @prop {Color} button-text [color: 'primary'] - Sets the button text color.
/// @prop {Color} context-menu-background [color: 'surface'] - Sets the background color for context menus.
/// @prop {Color} context-menu-color-active [color: 'surface'] - Sets the text color for active context menus.
/// @prop {Color} context-menu-color [color: 'primary'] - Sets the text color for context menus.
/// @prop {Color} dock-background [color: ('gray', 100)] - Sets the background color of the dock manager.
/// @prop {Color} floating-pane-border-color [color: ('gray', 300)] - Sets the border color for floating panes.
/// @prop {Color} pane-header-background [color: ('gray', 100)] - Sets the background color for pane headers.
/// @prop {Color} pinned-header-background [color: ('gray', 100)] - Sets the background colors of pinned headers.
/// @prop {Color} splitter-background [color: ('gray', 200)] - Sets the background color for the splitters.
/// @prop {Color} tab-border-color-active [color: ('gray', 300)] - Sets the border color for active tabs.
/// @prop {Color} tab-border-color [color: 'surface'] - Sets the border color for tabs.
/// @prop {Color} tab-text-active [color: ('gray', 800)] - Sets the text color for active tabs.
/// @prop {Color} tab-text [color: 'primary'] - Sets the text color for tabs.
/// @requires {Map} $light-dock-manager
$bootstrap-dock-manager: extend(
    $light-dock-manager,
    (
        button-text: (
            color: 'primary',
        ),

        context-menu-background: (
            color: 'surface',
        ),

        context-menu-color-active: (
            color: 'surface',
        ),

        context-menu-color: (
            color: 'primary',
        ),

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

        floating-pane-border-color: (
            color: (
                'gray',
                300,
            ),
        ),

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

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

        splitter-background: (
            color: (
                'gray',
                200,
            ),
        ),

        tab-border-color-active: (
            color: (
                'gray',
                300,
            ),
        ),

        tab-border-color: (
            color: 'surface',
        ),

        tab-text-active: (
            color: (
                'gray',
                800,
            ),
        ),

        tab-text: (
            color: 'primary',
        ),

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

/// Generates a light indigo dock-manager schema.
/// @type Map
/// @prop {Color} background-color [color: ('gray', 100)] - Sets the base dock manager color as well as the pane headers and tabs background colors.
/// @prop {Color} button-text [color: 'primary'] - Sets the button text color.
/// @prop {Color} context-menu-color-active [contrast-color: 'primary'] - Sets the text color for active context menus.
/// @prop {Color} context-menu-color [color: ('gray', 700)] - Sets the text color for context menus.
/// @prop {Color} joystick-background [color: ('primary', 50)] - Sets the background color of the joysticks.
/// @prop {Color} joystick-border-color [color: ('primary', 50)] - Sets the border color of the joystick.
/// @prop {Color} joystick-icon-color-active [contrast-color: 'primary'] - Sets the color of the active joystick icons.
/// @prop {Color} pinned-header-background [color: ('gray', 100)] - Sets the background colors of pinned headers.
/// @prop {Color} splitter-handle [color: 'surface'] - Sets the background color for the splitter handles.
/// @prop {Color} tab-background [color: ('gray', 100)] - Sets the background color for tabs.
/// @prop {Color} tab-text-active [color: ('gray', 900)] - Sets the text color for active tabs.
/// @prop {Color} text-color [color: ('gray', 900)] - Sets the text color for most elements in the dock manager. Used as the default joystick icon color.
/// @requires {Map} $light-dock-manager
$indigo-dock-manager: extend(
    $light-dock-manager,
    (
        background-color: (
            color: (
                'gray',
                100,
            ),
        ),

        button-text: (
            color: 'primary',
        ),

        context-menu-color-active: (
            contrast-color: 'primary',
        ),

        context-menu-color: (
            color: (
                'gray',
                700,
            ),
        ),

        joystick-background: (
            color: (
                'primary',
                50,
            ),
        ),

        joystick-border-color: (
            color: (
                'primary',
                50,
            ),
        ),

        joystick-icon-color-active: (
            contrast-color: 'primary',
        ),

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

        splitter-handle: (
            color: 'surface',
        ),

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

        tab-text-active: (
            color: (
                'gray',
                900,
            ),
        ),

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

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