igniteui-theming 1.4.2 → 1.4.3-beta.2

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

@@ -0,0 +1,88 @@
+@use '../../../../utils/map' as *;
+@use '../light/checkbox' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
+/// Generates a dark checkbox schema.
+/// @type {Map}
+/// @requires $light-checkbox
+$dark-checkbox: extend(
+    $light-checkbox,
+    (
+        type: 'dark',
+    )
+);
+
+/// Generates a dark fluent checkbox schema.
+/// @type {Map}
+/// @prop {Map} fill-color-hover [color: ('primary', 200)] - The checked border and fill colors on hover.
+/// @requires $fluent-checkbox
+$dark-fluent-checkbox: extend(
+    $fluent-checkbox,
+    (
+        fill-color-hover: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark bootstrap checkbox schema.
+/// @type {Map}
+/// @prop {Map} tick-color [color: ('gray', 900)] - The checked mark color.
+/// @requires $bootstrap-checkbox
+$dark-bootstrap-checkbox: extend(
+    $bootstrap-checkbox,
+    (
+        tick-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark indigo checkbox schema.
+/// @type {Map}
+/// @prop {Map} fill-color [color: ('gray', 900)] - The checked border and fill colors.
+/// @prop {Map} empty-color [color: ('gray', 700)] - The unchecked border color.
+/// @prop {Map} disabled-color [color: ('gray', 400)] - The disabled border and fill colors.
+/// @prop {Map} disabled-color-label [color: ('gray', 400)] - The disabled label color.
+/// @requires $indigo-checkbox
+$dark-indigo-checkbox: extend(
+    $indigo-checkbox,
+    (
+        fill-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        empty-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+        disabled-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+        disabled-color-label: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+    )
+);

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

@@ -0,0 +1,56 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+@use '../light/combo' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/* stylelint-disable max-line-length */
+
+/// Generates a dark combo schema.
+/// @type {Map}
+/// @requires $light-combo
+$dark-combo: $light-combo;
+
+/// Generates a dark fluent combo schema.
+/// @type {Map}
+/// @requires $fluent-combo
+$dark-fluent-combo: $fluent-combo;
+
+/// Generates a dark bootstrap combo schema.
+/// @type {Map}
+/// @requires $bootstrap-combo
+$dark-bootstrap-combo: extend($bootstrap-combo);
+
+/// Generates a dark indigo combo schema.
+/// @prop {Map} toggle-button-foreground [color: ('gray', 600)] - The combo toggle button foreground color.
+/// @prop {Map} toggle-button-foreground-focus [color: ('gray', 600)] - The combo toggle button foreground color when the combo is focused.
+/// @prop {Map} toggle-button-foreground-filled [color: ('gray', 600)] - The combo toggle button foreground color when the combo is focused.
+/// @type {Map}
+/// @requires $indigo-combo
+$dark-indigo-combo: extend(
+    $indigo-combo,
+    (
+        toggle-button-foreground: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+        toggle-button-foreground-focus: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+        toggle-button-foreground-filled: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+    )
+);

package/sass/themes/schemas/components/dark/_drop-down.scss

@@ -0,0 +1,86 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+@use '../light/drop-down' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/* stylelint-disable max-line-length */
+
+/// Generates a base dark drop-down schema.
+/// @type {Map}
+/// @prop {Map} border-color [color: ('gray', 100)] - The border color used for drop-down component.
+$base-dark-drop-down: (
+    border-color: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+);
+
+/// Generates a dark drop-down schema.
+/// @type {Map}
+/// @requires $light-drop-down
+/// @requires $base-dark-drop-down
+$dark-drop-down: extend($light-drop-down, $base-dark-drop-down);
+
+/// Generates a dark fluent drop-down schema.
+/// @type {Map}
+/// @prop {Map} selected-item-text-color [contrast-color: 'surface'] - The drop-down selected item text color.
+/// @prop {Map} selected-hover-item-text-color [contrast-color: 'surface'] - The drop-down selected item hover text color.
+/// @prop {Map} selected-focus-item-text-color [contrast-color: 'surface'] - The drop-down selected item focus text color.
+/// @requires $fluent-drop-down
+/// @requires $base-dark-drop-down
+$dark-fluent-drop-down: extend(
+    $fluent-drop-down,
+    $base-dark-drop-down,
+    (
+        selected-item-text-color: (
+            contrast-color: 'surface',
+        ),
+        selected-hover-item-text-color: (
+            contrast-color: 'surface',
+        ),
+        selected-focus-item-text-color: (
+            contrast-color: 'surface',
+        ),
+    )
+);
+
+/// Generates a dark bootstrap drop-down schema.
+/// @type {Map}
+/// @prop {Map} item-text-color [contrast-color: 'surface'] - The drop-down text color.
+/// @prop {Map} hover-item-text-color [contrast-color: 'surface'] - The drop-down hover text color.
+/// @requires $bootstrap-drop-down
+/// @requires $base-dark-drop-down
+$dark-bootstrap-drop-down: extend(
+    $bootstrap-drop-down,
+    $base-dark-drop-down,
+    (
+        item-text-color: (
+            contrast-color: 'surface',
+        ),
+        hover-item-text-color: (
+            contrast-color: 'surface',
+        ),
+    )
+);
+
+/// Generates a dark indigo drop-down schema.
+/// @type {Map}
+/// @prop {Map} header-text-color [contrast-color: 'surface'] - The drop-down header text color.
+/// @requires $indigo-drop-down
+/// @requires $base-dark-drop-down
+$dark-indigo-drop-down: extend(
+    $indigo-drop-down,
+    $base-dark-drop-down,
+    (
+        header-text-color: (
+            contrast-color: 'surface',
+        ),
+    )
+);

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

@@ -0,0 +1,39 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+@use '../light/icon' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a dark icon schema.
+/// @type {Map}
+/// @requires $light-icon
+$dark-icon: $light-icon;
+
+/// Generates a dark fluent icon schema.
+/// @type {Map}
+/// @property {Map} disabled-color [color: ('gray' 500)] - The icon color.
+/// @requires $light-icon
+$dark-fluent-icon: extend(
+    $fluent-icon,
+    (
+        disabled-color: (
+            color: (
+                'gray' 500,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark bootstrap icon schema.
+/// @type {Map}
+/// @requires $light-icon
+$dark-bootstrap-icon: $bootstrap-icon;
+
+/// Generates a dark indigo icon schema.
+/// @type {Map}
+/// @requires $light-icon
+$dark-indigo-icon: $indigo-icon;

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

@@ -0,0 +1,120 @@
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+@use './avatar' as *;
+@use './button' as *;
+@use './icon' as *;
+@use './navbar' as *;
+@use './input-group' as *;
+@use './checkbox' as *;
+@use './switch' as *;
+@use './radio' as *;
+@use './tabs' as *;
+@use './rating' as *;
+@use './select' as *;
+@use './slider' as *;
+@use './drop-down' as *;
+@use './combo' as *;
+@use './tree' as *;
+
+/// Used to create material component themes.
+/// Use in combination with dark palettes.
+/// @type Map
+$dark-material-schema: (
+    avatar: $dark-avatar,
+    button: $dark-button,
+    icon: $dark-icon,
+    navbar: $dark-navbar,
+    input-group: $dark-input-group,
+    checkbox: $dark-checkbox,
+    switch: $dark-switch,
+    radio: $dark-radio,
+    tabs: $dark-tabs,
+    rating: $dark-rating,
+    select: $dark-select,
+    slider: $dark-slider,
+    dropdown: $dark-drop-down,
+    combo: $dark-combo,
+    tree: $dark-tree,
+    _meta: (
+        theme: 'material',
+        variant: 'dark',
+    ),
+);
+
+/// Used to create fluent component themes.
+/// Use in combination with dark palettes.
+/// @type Map
+$dark-fluent-schema: (
+    avatar: $dark-fluent-avatar,
+    button: $dark-fluent-button,
+    icon: $dark-fluent-icon,
+    navbar: $dark-fluent-navbar,
+    input-group: $dark-fluent-input-group,
+    checkbox: $dark-fluent-checkbox,
+    radio: $dark-fluent-radio,
+    tabs: $dark-fluent-tabs,
+    rating: $dark-fluent-rating,
+    select: $dark-fluent-select,
+    slider: $dark-fluent-slider,
+    dropdown: $dark-fluent-drop-down,
+    combo: $dark-fluent-combo,
+    tree: $dark-fluent-tree,
+    _meta: (
+        theme: 'fluent',
+        variant: 'dark',
+    ),
+);
+
+/// Used to create bootstrap component themes.
+/// Use in combination with dark palettes.
+/// @type Map
+$dark-bootstrap-schema: (
+    avatar: $dark-bootstrap-avatar,
+    button: $dark-bootstrap-button,
+    icon: $dark-bootstrap-icon,
+    navbar: $dark-bootstrap-navbar,
+    input-group: $dark-bootstrap-input-group,
+    checkbox: $dark-bootstrap-checkbox,
+    switch: $dark-bootstrap-switch,
+    radio: $dark-bootstrap-radio,
+    tabs: $dark-bootstrap-tabs,
+    rating: $dark-bootstrap-rating,
+    select: $dark-bootstrap-select,
+    slider: $dark-bootstrap-slider,
+    dropdown: $dark-bootstrap-drop-down,
+    combo: $dark-bootstrap-combo,
+    tree: $dark-bootstrap-tree,
+    _meta: (
+        theme: 'bootstrap',
+        variant: 'dark',
+    ),
+);
+
+/// Used to create indigo component themes.
+/// Use in combination with dark palettes.
+/// @type Map
+$dark-indigo-schema: (
+    avatar: $dark-indigo-avatar,
+    button: $dark-indigo-button,
+    icon: $dark-indigo-icon,
+    navbar: $dark-indigo-navbar,
+    input-group: $dark-indigo-input-group,
+    checkbox: $dark-indigo-checkbox,
+    switch: $dark-indigo-switch,
+    radio: $dark-indigo-radio,
+    tabs: $dark-indigo-tabs,
+    rating: $dark-indigo-rating,
+    select: $dark-indigo-select,
+    slider: $dark-indigo-slider,
+    dropdown: $dark-indigo-drop-down,
+    combo: $dark-indigo-combo,
+    tree: $dark-indigo-tree,
+    _meta: (
+        theme: 'indigo-design',
+        variant: 'dark',
+    ),
+);

package/sass/themes/schemas/components/dark/_input-group.scss

@@ -0,0 +1,170 @@
+@use '../../../../utils/map' as *;
+@use '../light/input-group' as *;
+
+/* stylelint-disable max-line-length */
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a base dark input-group schema.
+/// @type {Map}
+$base-dark-input-group: $light-input-group;
+
+/// Generates a dark input-group schema based on a mix of $light-input-group and $base-dark-input-group..
+/// @type {Map}
+/// @prop {Map} box-background-focus [color: ('gray', 100)] - The background color of an input group of type box on focus.
+/// @requires $base-dark-input-group
+$dark-input-group: extend(
+    $base-dark-input-group,
+    (
+        box-background-focus: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        hover-bottom-line-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark fluent input-group schema based on a mix of $fluent-input-group and $base-dark-input-group.
+/// @type {Map}
+/// @prop {Map} input-prefix-background [color: ('gray', 100)] - The background color of an input prefix of type line, box and border.
+/// @prop {Map} input-suffix-background [color: ('gray', 100)] - The background color of an input sufix of type line, box and border.
+/// @prop {Map} box-background [color: ('gray', 100)] - The background color of an input group of type box.
+/// @prop {Map} border-color [color: ('gray', 500)] - The border color for input groups of type border and fluent.
+/// @prop {Map} hover-border-color [color: ('gray', 700)] - The hover input border for input groups of type border and fluent.
+/// @prop {Map} focused-border-color [color: ('gray', 500)] - The focused input border color for input groups of type border and fluent.
+/// @prop {Map} disabled-border-color [color: ('gray', 100)] - The disabled border color for input groups of type border and fluent.
+/// @requires $fluent-input-group
+/// @requires $base-dark-input-group
+$dark-fluent-input-group: extend(
+    $base-dark-input-group,
+    $fluent-input-group,
+    (
+        input-prefix-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        input-suffix-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        box-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        border-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+        hover-border-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+        focused-border-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+        disabled-border-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark bootstrap input-group schema based on a mix of $bootstrap-input-group and $base-dark-input-group.
+/// @type {Map}
+/// @requires $bootstrap-input-group
+/// @requires $base-dark-input-group
+$dark-bootstrap-input-group: extend($base-dark-input-group, $bootstrap-input-group);
+
+/// Generates an dark indigo input-group schema
+/// @type {Map}
+/// @prop {Map} success-secondary-color [color: ('success', 500, .7)] - The success color used in the valid state.
+/// @prop {Map} warning-secondary-color [color: ('warn', 500, .7)] - The warning color used in the warning state.
+/// @prop {Map} error-secondary-color [color: ('error', 500, .7)] - The error color used in the error state.
+/// @prop {Map} $idle-secondary-color [contrast-color: ('surface')] - The label color in the idle state.
+/// @prop {Map} $filled-secondary-color [color: ('gray', 900)] - The label color in the filled state.
+/// @prop {Map} $focused-secondary-color [color: ('gray', 900)] - The label color in the focused state.
+/// @prop {Map} placeholder-color [color: ('gray', 400)] - The placeholder color of an input group.
+/// @prop {Map} disabled-placeholder-color [color: ('gray', 400)] - The disabled placeholder color of an input group.
+/// @requires $indigo-input-group
+$dark-indigo-input-group: extend(
+    $indigo-input-group,
+    (
+        search-background: transparent,
+        success-secondary-color: (
+            color: (
+                'success',
+                500,
+                0.7,
+            ),
+        ),
+        warning-secondary-color: (
+            color: (
+                'warn',
+                500,
+                0.7,
+            ),
+        ),
+        error-secondary-color: (
+            color: (
+                'error',
+                500,
+                0.7,
+            ),
+        ),
+        idle-secondary-color: (
+            contrast-color: (
+                'surface',
+            ),
+        ),
+        filled-secondary-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        focused-secondary-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        placeholder-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+        disabled-placeholder-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+    )
+);

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

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