igniteui-theming 1.4.5 → 1.4.6

package/sass/themes/schemas/components/light/_dialog.scss

@@ -0,0 +1,102 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+@use '../elevation/dialog' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a light dialog schema.
+/// @type {Map}
+/// @prop {Map} background [color: 'surface'] - The dialog background color.
+/// @prop {Map} title-color [color: ('gray', 900)] - The dialog title text color.
+/// @prop {Map} message-color [color: ('gray', 600)] - The dialog message text color.
+/// @prop {Color} border-color [transparent] - The border color for dialog component.
+/// @prop {Number} elevation [24] - The elevation level, between 0-24, to be used for the dialog.
+/// @prop {Number} border-radius [4px] - The border radius used for dialog. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $default-elevation-dialog
+$light-dialog: extend(
+    $default-elevation-dialog,
+    (
+        background: (
+            color: 'surface',
+        ),
+
+        title-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        message-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+
+        border-color: transparent,
+
+        border-radius: rem(4px),
+    )
+);
+
+/// Generates a fluent dialog schema.
+/// @type {Map}
+/// @prop {Number} border-radius [2px] - The border radius used for dialog. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Map} message-color [color: ('gray', 700)] - The dialog message text color.
+/// @requires {Map} $light-dialog
+$fluent-dialog: extend(
+    $light-dialog,
+    (
+        border-radius: rem(2px),
+        message-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+    )
+);
+
+/// Generates a bootstrap dialog schema.
+/// @type {Map}
+/// @prop {Map} border-color [color: ('gray', 300)] - The border color for dialog component.
+/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the dialog.
+/// @prop {Number} border-radius [4px] - The border radius used for dialog. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-dialog
+/// @requires {Map} $bootstrap-elevation-dialog
+$bootstrap-dialog: extend(
+    $light-dialog,
+    $bootstrap-elevation-dialog,
+    (
+        border-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+    )
+);
+
+/// Generates an indigo dialog schema.
+/// @type {Map}
+/// @prop {Map} message-color [color: ('gray', 700)] - The dialog message text color.
+/// @prop {Number} border-radius [2px] - The border radius used for dialog. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-dialog
+$indigo-dialog: extend(
+    $light-dialog,
+    (
+        message-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        border-radius: rem(2px),
+    )
+);

package/sass/themes/schemas/components/light/_divider.scss

@@ -0,0 +1,33 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a light divider schema.
+/// @type {Map}
+/// @prop {Map} color [color: ('gray', 300)] - The color used for the divider.
+$light-divider: (
+    color: (
+        color: (
+            'gray',
+            300,
+        ),
+    ),
+);
+
+/// Generates a fluent divider schema.
+/// @type {Map}
+/// @requires {Map} $light-divider
+$fluent-divider: $light-divider;
+
+/// Generates a bootstrap divider schema.
+/// @type {Map}
+$bootstrap-divider: $light-divider;
+
+/// Generates an indigo divider schema.
+/// @type {Map}
+$indigo-divider: $light-divider;

package/sass/themes/schemas/components/light/_dock-manager.scss

@@ -0,0 +1,548 @@
+@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 [null] - Sets the background color for active context menus.
+/// @prop {Color} context-menu-background [null] - Sets the background color for 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} 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 [null] - 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: ('gray', 600)] - 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 [null] - 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 [null] - 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 [null] - Sets the text color for tabs.
+/// @prop {Color} tab-text-active [null] - Sets the text color for active 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: null,
+
+    context-menu-background: null,
+
+    context-menu-color-active: (
+        contrast-color: 'surface',
+    ),
+
+    context-menu-color: 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: null,
+
+    joystick-background: null,
+
+    joystick-border-color: (
+        color: (
+            'gray',
+            300,
+        ),
+    ),
+
+    joystick-icon-color: (
+        color: (
+            'gray',
+            600,
+        ),
+    ),
+
+    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: null,
+
+    tab-background-active: (
+        color: (
+            'surface',
+        ),
+    ),
+
+    tab-background: null,
+    tab-border-color-active: null,
+    tab-border-color: null,
+    tab-text-active: null,
+    tab-text: null,
+
+    text-color: (
+        color: (
+            'gray',
+            800,
+        ),
+    ),
+);
+
+/// 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} splitter-handle [color: ('gray', 400)] - Sets the background color for the splitter handles.
+/// @prop {Color} tab-background [color: 'surface'] - Sets the background color for tabs.
+/// @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.
+/// @prop {Color} tab-text [color: ('gray', 700)] - Sets the text color for 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,
+            ),
+        ),
+
+        splitter-handle: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+
+        tab-background: (
+            color: 'surface',
+        ),
+
+        tab-border-color-active: (
+            color: 'surface',
+        ),
+
+        tab-border-color: (
+            color: 'surface',
+        ),
+
+        tab-text-active: (
+            color: 'primary',
+        ),
+
+        tab-text: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+    )
+);
+
+/// 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-background-active [color: 'primary'] - Sets the background color for active 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} joystick-background-active [color: 'primary'] - Sets the background color of the joysticks.
+/// @prop {Color} joystick-icon-color [color: 'primary'] - Sets the color for the joystick icons.
+/// @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} splitter-handle [color: ('gray', 400)] - Sets the background color for the splitter handles.
+/// @prop {Color} tab-background [color: 'surface'] - Sets the background color for tabs.
+/// @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-background-active: (
+            color: 'primary',
+        ),
+
+        context-menu-color-active: (
+            color: 'surface',
+        ),
+
+        context-menu-color: (
+            color: 'primary',
+        ),
+
+        dock-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        floating-pane-border-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+
+        joystick-background-active: (
+            color: 'primary',
+        ),
+
+        joystick-icon-color: (
+            color: 'primary',
+        ),
+
+        pane-header-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        pinned-header-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        splitter-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+
+        splitter-handle: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+
+        tab-background: (
+            color: 'surface',
+        ),
+
+        tab-border-color-active: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+
+        tab-border-color: (
+            color: 'surface',
+        ),
+
+        tab-text-active: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+
+        tab-text: (
+            color: 'primary',
+        ),
+    )
+);
+
+/// 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-background-active [color: 'primary'] - Sets the background color for active context menus.
+/// @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-background-active [color: 'primary'] - 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 [color: 'primary'] - Sets the color for the joystick icons.
+/// @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} tab-text [color: ('gray', 700)] - Sets the text color for 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-background-active: (
+            color: 'primary',
+        ),
+
+        context-menu-color-active: (
+            contrast-color: 'primary',
+        ),
+
+        context-menu-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        joystick-background: (
+            color: (
+                'primary',
+                50,
+            ),
+        ),
+
+        joystick-background-active: (
+            color: 'primary',
+        ),
+
+        joystick-border-color: (
+            color: (
+                'primary',
+                50,
+            ),
+        ),
+
+        joystick-icon-color: (
+            color: 'primary',
+        ),
+
+        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,
+            ),
+        ),
+
+        tab-text: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        text-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+    )
+);