igniteui-theming 1.4.5 → 1.4.6

package/sass/themes/schemas/components/dark/_date-range-picker.scss

@@ -0,0 +1,28 @@
+@use '../../../../utils/map' as *;
+@use '../light/date-range-picker' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a dark date-range-picker schema.
+/// @type {Map}
+/// @requires $light-date-range-picker
+$dark-date-range-picker: $light-date-range-picker;
+
+/// Generates a dark fluent date-range-picker schema.
+/// @type {Map}
+/// @requires $fluent-date-range-picker
+$dark-fluent-date-range-picker: $fluent-date-range-picker;
+
+/// Generates a dark bootstrap date-range-picker schema.
+/// @type {Map}
+/// @requires $bootstrap-date-range-picker
+$dark-bootstrap-date-range-picker: $bootstrap-date-range-picker;
+
+/// Generates a dark indigo date-range-picker schema.
+/// @type {Map}
+/// @requires $indigo-date-range-picker
+$dark-indigo-date-range-picker: $indigo-date-range-picker;

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

@@ -0,0 +1,55 @@
+@use '../../../../utils/map' as *;
+@use '../light/dialog' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a base dark dialog schema.
+/// @type {Map}
+/// @prop {Map} message-color [color: ('gray', 500)] - The dialog message text color.
+$base-dark-dialog: (
+    message-color: (
+        color: (
+            'gray',
+            500,
+        ),
+    ),
+);
+
+/// Generates a dark dialog schema.
+/// @type {Map}
+/// @requires $light-dialog
+/// @requires $base-dark-dialog
+$dark-dialog: extend($light-dialog, $base-dark-dialog);
+
+/// Generates a dark fluent dialog schema.
+/// @type {Map}
+/// @requires $fluent-dialog
+$dark-fluent-dialog: $fluent-dialog;
+
+/// Generates a dark bootstrap dialog schema.
+/// @type {Map}
+/// @prop {Map} border-color [color: ('gray', 100)] - The border color for dialog component.
+/// @requires $bootstrap-dialog
+/// @requires $base-dark-dialog
+$dark-bootstrap-dialog: extend(
+    $bootstrap-dialog,
+    $base-dark-dialog,
+    (
+        border-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark indigo dialog schema.
+/// @type {Map}
+/// @requires $indigo-dialog
+/// @requires $base-dark-dialog
+$dark-indigo-dialog: extend($indigo-dialog, $base-dark-dialog);

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

@@ -0,0 +1,43 @@
+@use '../../../../utils/map' as *;
+@use '../light/divider' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a base dark divider schema.
+/// @type {Map}
+/// @property {Map} color [color: ('gray', 100)] - The color used for the divider.
+$base-dark-divider: (
+    color: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+);
+
+/// Generates a dark divider schema.
+/// @type {Map}
+/// @requires $light-divider
+/// @requires $base-dark-divider
+$dark-divider: extend($light-divider, $base-dark-divider);
+
+/// Generates a dark fluent divider schema.
+/// @type {Map}
+/// @requires $fluent-divider
+$dark-fluent-divider: extend($fluent-divider, $base-dark-divider);
+
+/// Generates a dark bootstrap divider schema.
+/// @type {Map}
+/// @requires $bootstrap-divider
+/// @requires $base-dark-divider
+$dark-bootstrap-divider: extend($bootstrap-divider, $base-dark-divider);
+
+/// Generates a dark indigo divider schema.
+/// @type {Map}
+/// @requires $indigo-divider
+/// @requires $base-dark-divider
+$dark-indigo-divider: extend($indigo-divider, $base-dark-divider);

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

@@ -0,0 +1,349 @@
+@use '../../../../utils/map' as *;
+@use '../light/dock-manager' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a dark base dock-manager schema.
+/// @type {Map}
+/// @prop {Color} dock-background [color: ('gray', 50)] - Sets the background color of the dock manager.
+/// @prop {Color} background-color [color: ('gray', 50)] - Sets the base dock manager color as well as the pane headers and tabs background colors.
+/// @prop {Color} pane-header-background [color: ('gray', 50)] - Sets the background color for pane headers.
+/// @prop {Color} border-color [color: ('gray', 100)] - Sets the global border color in the dock manager. Also sets the pane content background and the context menu active background colors.
+/// @prop {Color} floating-pane-border-color [color: ('gray', 50)] - Sets the border color for floating panes.
+/// @prop {Color} joystick-background [color: ('gray', 100)] - Sets the background color of the joystick.
+/// @prop {Color} joystick-background-active [color: ('gray', 50)] - Sets the background color of the joysticks.
+/// @prop {Color} joystick-border-color [color: ('gray', 200, .5)] - Sets the border color of the joystick.
+/// @prop {Color} joystick-icon-color [contrast-color: 'surface'] - 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} context-menu-background-active [color: ('gray', 50)] - Sets the background color for active context menus.
+/// @prop {Color} context-menu-color-active [contrast-color: ('gray', 50)] - Sets the text color for active context menus.
+/// @prop {Color} context-menu-background [ color: ('gray', 100)] - Sets the background color for context menus.
+/// @prop {Color} context-menu-color [contrast-color: 'surface'] - Sets the text color for context menus.
+/// @prop {Color} tab-background [color: ('gray', 100, .3)] - Sets the background color for tabs.
+/// @prop {Color} tab-background-active [color: ('gray', 100, .3)] - Sets the background color for active tabs.
+/// @prop {Color} tab-border-color-active [color: ('gray', 100)] - Sets the border color for active tabs.
+/// @prop {Color} button-text [contrast-color: 'surface'] - Sets the button text color.
+/// @prop {Color} flyout-shadow-color [color: ('gray', 50, .3)] - Sets the flyout shadow color.
+/// @prop {Color} drop-shadow-background [color: ('primary', 900, .3)] - Sets the drop-shadow background color.
+/// @prop {Color} splitter-background [color: ('gray', 100)] - Sets the background color for the splitters.
+$dark-base-dock-manager: (
+    dock-background: (
+        color: (
+            'gray',
+            50,
+        ),
+    ),
+
+    background-color: (
+        color: (
+            'gray',
+            50,
+        ),
+    ),
+
+    pane-header-background: (
+        color: (
+            'gray',
+            50,
+        ),
+    ),
+
+    border-color: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+
+    floating-pane-border-color: (
+        color: (
+            'gray',
+            50,
+        ),
+    ),
+
+    joystick-background: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+
+    joystick-border-color: (
+        color: (
+            'gray',
+            200,
+            0.5,
+        ),
+    ),
+
+    joystick-icon-color: (
+        contrast-color: 'surface',
+    ),
+
+    joystick-background-active: (
+        color: (
+            'gray',
+            50,
+        ),
+    ),
+
+    context-menu-background-active: (
+        color: (
+            'gray',
+            50,
+        ),
+    ),
+
+    context-menu-color-active: (
+        contrast-color: (
+            'gray',
+            50,
+        ),
+    ),
+
+    context-menu-background: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+
+    context-menu-color: (
+        contrast-color: 'surface',
+    ),
+
+    tab-background: (
+        color: (
+            'gray',
+            100,
+            0.3,
+        ),
+    ),
+
+    tab-background-active: (
+        color: (
+            'gray',
+            100,
+            0.3,
+        ),
+    ),
+
+    tab-border-color-active: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+
+    button-text: (
+        contrast-color: 'surface',
+    ),
+
+    flyout-shadow-color: (
+        color: (
+            'gray',
+            50,
+            0.3,
+        ),
+    ),
+
+    drop-shadow-background: (
+        color: (
+            'primary',
+            900,
+            0.3,
+        ),
+    ),
+
+    splitter-background: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+);
+
+/// Generates a dark dock-manager schema.
+/// @type {Map}
+/// @requires $light-dock-manager
+/// @requires $dark-base-dock-manager
+$dark-dock-manager: extend($light-dock-manager, $dark-base-dock-manager);
+
+/// Generates a dark fluent dock-manager schema.
+/// @type {Map}
+/// @prop {Color} tab-text-active [color: ('primary', 200)] - Sets the text color for active tabs.
+/// @prop {Color} floating-pane-border-color [transparent] - Sets the border color for floating panes.
+/// @prop {Color} joystick-border-color [transparent] - Sets the border color of the joystick.
+/// @prop {Color} splitter-handle [color: ('gray', 50)] - Sets the background color for the splitter handles.
+/// @requires $fluent-dock-manager
+$dark-fluent-dock-manager: extend(
+    $fluent-dock-manager,
+    $dark-base-dock-manager,
+    (
+        tab-text-active: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+
+        floating-pane-border-color: transparent,
+
+        joystick-border-color: transparent,
+
+        splitter-handle: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark bootstrap dock-manager schema.
+/// @type {Map}
+/// @prop {Color} joystick-background [color: ('surface')] - Sets the background color of the joystick.
+/// @prop {Color} joystick-background-active [color: ('gray', 50)] - Sets the background color of the joysticks.
+/// @prop {Color} joystick-icon-color [contrast-color: 'surface'] - Sets the color for the joystick icons.
+/// @prop {Color} joystick-icon-color-active [contrast-color: ('primary', 600)] - Sets the color of the active joystick icons.
+/// @prop {Color} context-menu-background-active [color: ('gray', 50)] - Sets the background color for active context menus.
+/// @prop {Color} context-menu-color-active [contrast-color: ('primary', 600),] - Sets the text color for active context menus.
+/// @prop {Color} context-menu-background [color: ('gray', 500)] - Sets the background color for context menus.
+/// @prop {Color} context-menu-color [contrast-color: ('gray', 500)] - Sets the text color for context menus.
+/// @requires $bootstrap-dock-manager
+/// @requires $dark-base-dock-manager
+$dark-bootstrap-dock-manager: extend(
+    $bootstrap-dock-manager,
+    $dark-base-dock-manager,
+    (
+        joystick-background: (
+            color: (
+                'surface',
+            ),
+        ),
+
+        joystick-background-active: (
+            color: (
+                'primary',
+            ),
+        ),
+
+        joystick-icon-color-active: (
+            contrast-color: (
+                'primary',
+                600,
+            ),
+        ),
+
+        context-menu-background-active: (
+            color: (
+                'primary',
+            ),
+        ),
+
+        context-menu-color-active: (
+            contrast-color: (
+                'primary',
+                600,
+            ),
+        ),
+
+        context-menu-background: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+
+        context-menu-color: (
+            contrast-color: (
+                'gray',
+                500,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark indigo dock-manager schema.
+/// @type Map
+/// @prop {Color} button-text [color: ('primary', 200)] - Sets the button text color.
+/// @prop {Color} joystick-background [color: ('surface')] - 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', 100)] - Sets the border color of the joystick.
+/// @prop {Color} joystick-icon-color-active [contrast-color: ('primary', 600)] - Sets the color of the active joystick icons.
+/// @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', 600)] - Sets the text color for active context menus.
+/// @prop {Color} context-menu-background [contrast-color: ('primary', 600)] - Sets the background color for context menus.
+/// @prop {Color} context-menu-color [contrast-color: ('primary', 600)] - Sets the text color for context menus.
+/// @requires $indigo-dock-manager
+/// @requires $dark-base-dock-manager
+$dark-indigo-dock-manager: extend(
+    $indigo-dock-manager,
+    $dark-base-dock-manager,
+    (
+        button-text: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+
+        joystick-background: (
+            color: (
+                'surface',
+            ),
+        ),
+
+        joystick-background-active: (
+            color: (
+                'primary',
+            ),
+        ),
+
+        joystick-icon-color-active: (
+            contrast-color: (
+                'primary',
+                600,
+            ),
+        ),
+
+        joystick-border-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        context-menu-background-active: (
+            color: (
+                'primary',
+            ),
+        ),
+
+        context-menu-color-active: (
+            contrast-color: (
+                'primary',
+                600,
+            ),
+        ),
+
+        context-menu-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+
+        context-menu-color: (
+            contrast-color: (
+                'gray',
+                500,
+            ),
+        ),
+    )
+);

package/sass/themes/schemas/components/dark/_expansion-panel.scss

@@ -0,0 +1,87 @@
+@use '../../../../utils/map' as *;
+@use '../light/expansion-panel' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a dark expansion panel schema.
+/// @type {Map}
+/// @prop {Map} header-focus-background [color: ('gray', 100, .3)] - The panel header focus background color.
+$base-dark-expansion-panel: (
+    header-focus-background: (
+        color: (
+            'gray',
+            100,
+            0.3,
+        ),
+    ),
+);
+
+/// Generates a dark expansion panel schema based on a mix of $light-expansion-panel and $base-dark-expansion-panel.
+/// @type {Map}
+/// @requires $light-expansion-panel
+/// @requires $base-dark-expansion-panel
+$dark-expansion-panel: extend($light-expansion-panel, $base-dark-expansion-panel);
+
+/// Generates a dark fluent expansion panel schema based on a mix of $fluent-expansion-panel and $base-dark-expansion-panel.
+/// @type {Map}
+/// @requires $fluent-expansion-panel
+/// @requires $base-dark-expansion-panel
+$dark-fluent-expansion-panel: extend($fluent-expansion-panel, $base-dark-expansion-panel);
+
+/// Generates a dark bootstrap expansion panel schema based on a mix of $bootstrap-expansion-panel and $base-dark-expansion-panel.
+/// @type {Map}
+/// @prop {Map} header-background [color: ('gray', 50)] - The panel header background color.
+/// @prop {Map} body-background [color: ('gray', 50)] - The panel body background color.
+/// @requires $bootstrap-expansion-panel
+/// @requires $base-dark-expansion-panel
+$dark-bootstrap-expansion-panel: extend(
+    $bootstrap-expansion-panel,
+    $base-dark-expansion-panel,
+    (
+        header-background: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        body-background: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark indigo expansion panel schema.
+/// @type {Map}
+///
+/// @prop {Map} header-focus-background [color: ('primary', 500, .5)] - The panel header focus background color.
+/// @prop {Map} header-title-color [color: ('gray', 800)] - The panel header title text color.
+/// @prop {Number} border-radius [3px] - The border radius used for expansion-panel.
+///
+/// @requires $indigo-expansion-panel
+$dark-indigo-expansion-panel: extend(
+    $indigo-expansion-panel,
+    (
+        header-title-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+
+        header-focus-background: (
+            color: (
+                'primary',
+                500,
+                0.5,
+            ),
+        ),
+    )
+);

package/sass/themes/schemas/components/dark/_grid-filtering.scss

@@ -0,0 +1,28 @@
+@use '../../../../utils/map' as *;
+@use '../light/grid-filtering' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a dark grid-filtering schema.
+/// @type {Map}
+/// @requires $light-grid-filtering
+$dark-grid-filtering: $light-grid-filtering;
+
+/// Generates a dark fluent grid-filtering schema.
+/// @type {Map}
+/// @requires $fluent-grid-filtering
+$dark-fluent-grid-filtering: $fluent-grid-filtering;
+
+/// Generates a dark bootstrap grid-filtering schema.
+/// @type {Map}
+/// @requires $bootstrap-grid-filtering
+$dark-bootstrap-grid-filtering: $bootstrap-grid-filtering;
+
+/// Generates a dark indigo grid-filtering schema.
+/// @type {Map}
+/// @requires $indigo-grid-filtering
+$dark-indigo-grid-filtering: $indigo-grid-filtering;

package/sass/themes/schemas/components/dark/_grid-summary.scss

@@ -0,0 +1,83 @@
+@use '../../../../utils/map' as *;
+@use '../light/grid-summary' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a dark grid-summary schema.
+/// @type {Map}
+/// @requires $light-grid-summary
+$dark-grid-summary: $light-grid-summary;
+
+/// Generates a dark fluent grid-summary schema.
+/// @type {Map}
+/// @requires $fluent-grid-summary
+$dark-fluent-grid-summary: $fluent-grid-summary;
+
+/// Generates a dark bootstrap grid-summary schema.
+/// @type {Map}
+/// @requires $bootstrap-grid-summary
+$dark-bootstrap-grid-summary: extend(
+    $bootstrap-grid-summary,
+    (
+        background-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark indigo grid-summary schema.
+/// @type {Map}
+/// @property {Map} background-color [color: 'surface'] - The summaries background color is inherited form igx-grid footer.
+/// @property {Map} focus-background-color [color: ('gray', 100)] - The background color when a summary item is on focus.
+/// @property {Map} label-color [color: ('primary', 200)] - The summaries label color.
+/// @property {map} label-hover-color [color: ('primary', 100)] - The summaries hover label color.
+/// @property {Map} result-color [color: 'surface'] - The summaries value/result color.
+/// @property {Map} pinned-border-color [color: ('primary', 200)] - The border color of the summary panel.
+/// @requires $indigo-grid-summary
+$dark-indigo-grid-summary: extend(
+    $indigo-grid-summary,
+    (
+        background-color: (
+            color: 'surface',
+        ),
+
+        focus-background-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        label-color: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+
+        label-hover-color: (
+            color: (
+                'primary',
+                100,
+            ),
+        ),
+
+        result-color: (
+            color: 'surface',
+        ),
+
+        pinned-border-color: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+    )
+);