igniteui-theming 1.4.2 → 1.4.3-beta.2

package/sass/themes/schemas/charts/light/_graph.scss

@@ -38,10 +38,16 @@ $material-graph: (
     ),
     'backing-stroke-thickness': null,
     'font-brush': (
-        contrast-color: ('surface', 500)
+        contrast-color: (
+            'surface',
+            500,
+        ),
     ),
     'minor-tick-brush': (
-        contrast-color: ('surface', 500)
+        contrast-color: (
+            'surface',
+            500,
+        ),
     ),
     'minor-tick-thickness': null,
     'range-brushes': series,
@@ -55,16 +61,25 @@ $material-graph: (
     'scale-background-thickness': null,
     'target-value-breadth': null,
     'target-value-brush': (
-        color: ('gray', 800),
+        color: (
+            'gray',
+            800,
+        ),
     ),
     'target-value-outline': null,
     'target-value-thickness': null,
     'tick-brush': (
-        contrast-color: ('surface', 500)
+        contrast-color: (
+            'surface',
+            500,
+        ),
     ),
     'tick-stroke-thickness': null,
     'value-brush': (
-        color: ('gray', 800),
+        color: (
+            'gray',
+            800,
+        ),
     ),
     'value-outline': null,
     'value-stroke-thickness': null,

package/sass/themes/schemas/charts/light/_pie-chart.scss

@@ -24,7 +24,10 @@ $material-pie-chart: (
     'label-extent': 30,
     'label-inner-color': null,
     'label-outer-color': (
-        color: ('gray', 700)
+        color: (
+            'gray',
+            700,
+        ),
     ),
     'labels-position': null,
     'leader-line-margin': null,

package/sass/themes/schemas/charts/light/_shape-chart.scss

@@ -53,12 +53,18 @@ $material-shape-chart: (
     'margin': null,
     'title-alignment': null,
     'title-text-color': (
-        color: ('gray', 900)
+        color: (
+            'gray',
+            900,
+        ),
     ),
     'title-margin': null,
     'subtitle-alignment': null,
     'subtitle-text-color': (
-        color: ('gray', 600)
+        color: (
+            'gray',
+            600,
+        ),
     ),
     'subtitle-margin': null,
     'brushes': series,

package/sass/themes/schemas/charts/light/_sparkline.scss

@@ -29,7 +29,10 @@
 /// @prop {Color} normal-range-fill [null] - Sets the normal range brush of the sparkline.
 $material-sparkline: (
     'brush': (
-        color: ('primary', 500)
+        color: (
+            'primary',
+            500,
+        ),
     ),
     'line-thickness': null,
     'marker-brush': null,

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

@@ -0,0 +1,2 @@
+@forward 'light';
+@forward 'dark';

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

@@ -0,0 +1,46 @@
+@use '../../../../utils/map' as *;
+@use '../light/avatar' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a dark avatar schema.
+/// @type {Map}
+/// @requires $light-avatar
+$dark-avatar: $light-avatar;
+
+/// Generates a dark fluent avatar schema.
+/// @type {Map}
+/// @requires $fluent-avatar
+$dark-fluent-avatar: $fluent-avatar;
+
+/// Generates a dark bootstrap avatar schema.
+/// @type {Map}
+/// @prop {Map} background [color: ('gray', 200)]- The background color of the avatar.
+/// @prop {Map} color [contrast-color: ('gray', 200)] - The text/icon color of the avatar.
+/// @requires $bootstrap-avatar
+$dark-bootstrap-avatar: extend(
+    $bootstrap-avatar,
+    (
+        background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+        color: (
+            contrast-color: (
+                'gray',
+                200,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark indigo avatar schema.
+/// @type {Map}
+/// @requires $indigo-avatar
+$dark-indigo-avatar: $indigo-avatar;

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

@@ -0,0 +1,491 @@
+@use '../../../../utils/map' as *;
+@use '../light/button' as *;
+
+/* stylelint-disable max-line-length */
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// @type {Map}
+/// @prop {Map} disabled-background [color: ('gray', 100, .3)] - The disabled background color of the button.
+/// @prop {Color} disabled-foreground [color: ('gray', 200)] - The disabled foreground color of the button.
+/// @requires {Map} $material-base-button
+$material-base-button-dark: extend(
+    (
+        disabled-background: (
+            color: (
+                'gray',
+                100,
+                0.3,
+            ),
+        ),
+        disabled-foreground: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+    )
+);
+
+/// @type {Map}
+/// @prop {Map} hover-background [color: ('secondary', 500, .12)] - The hover background color of a flat button.
+/// @prop {Map} focus-background [color: ('secondary', 400, .24)] - The focus background color of a flat button.
+/// @prop {Map} focus-visible-background [color: ('secondary', 400, .24)] - The focus-visible background color of a flat button.
+/// @prop {Color} disabled-background [transparent] - The disabled background color a flat button.
+/// @requires {Map} $material-base-button-dark
+/// @requires {Map} $material-flat-button
+$material-flat-button-dark: extend(
+    $material-flat-button,
+    $material-base-button-dark,
+    (
+        hover-background: (
+            color: (
+                'secondary',
+                500,
+                0.12,
+            ),
+        ),
+        focus-background: (
+            color: (
+                'secondary',
+                400,
+                0.24,
+            ),
+        ),
+        focus-visible-background: (
+            color: (
+                'secondary',
+                400,
+                0.24,
+            ),
+        ),
+        disabled-background: transparent,
+    )
+);
+
+/// @type {Map}
+/// @prop {Map} hover-background [color: ('gray', 100, .5)] - The hover background color of an icon button.
+/// @prop {Map} focus-background [color: ('gray', 200, .8)] - The focus background color of a icon button.
+/// @prop {Map} focus-visible-background [color: ('gray', 200, .8)] - The focus-visible background color of a icon button.
+/// @prop {Color} disabled-background [transparent] - The disabled background color a icon button.
+/// @requires {Map} $material-base-button-dark
+/// @requires {Map} $material-icon-button
+$material-icon-button-dark: extend(
+    $material-icon-button,
+    $material-base-button-dark,
+    (
+        hover-background: (
+            color: (
+                'gray',
+                100,
+                0.5,
+            ),
+        ),
+        focus-background: (
+            color: (
+                'gray',
+                200,
+                0.8,
+            ),
+        ),
+        focus-visible-background: (
+            color: (
+                'gray',
+                200,
+                0.8,
+            ),
+        ),
+        disabled-background: transparent,
+    )
+);
+
+/// @requires {Map} $material-raised-button
+/// @requires {Map} $material-base-button-dark
+$material-raised-button-dark: extend($material-raised-button, $material-base-button-dark);
+
+/// @requires {Map} $material-fab-button
+/// @requires {Map} $material-base-button-dark
+$material-fab-button-dark: extend($material-fab-button, $material-base-button-dark);
+
+/// @requires {Map} $material-outlined-button
+/// @requires {Map} $material-base-button-dark
+/// @prop {Map} disabled-border-color [color: ('gray', 100, .3)] - The disabled focused border color of an outlined button.
+/// @prop {Color} disabled-background [transparent] - The disabled background color an outlined button.
+$material-outlined-button-dark: extend(
+    $material-outlined-button,
+    $material-base-button-dark,
+    (
+        disabled-border-color: (
+            color: (
+                'gray',
+                100,
+                0.3,
+            ),
+        ),
+        disabled-background: transparent,
+    )
+);
+
+/// Generates a dark material button schema.
+/// @type {Map}
+/// @requires {Map} $material-flat-button-dark
+/// @requires {Map} $material-outlined-button
+/// @requires {Map} $material-raised-button
+/// @requires {Map} $material-fab-button
+/// @requires {Map} $material-icon-button-dark
+$dark-button: (
+    flat: $material-flat-button-dark,
+    outlined: $material-outlined-button-dark,
+    raised: $material-raised-button-dark,
+    fab: $material-fab-button-dark,
+    icon: $material-icon-button-dark,
+);
+
+/// @type {Map}
+/// @requires {Map} $material-base-button
+/// @prop {Map} disabled-background [color: ('primary', 50)] - The disabled background color of the button.
+/// @prop {Map} disabled-foreground [color: ('primary', 100)] - The disabled foreground color of the button.
+$fluent-base-button-dark: extend(
+    (
+        disabled-background: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+        disabled-foreground: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+    )
+);
+
+/// @type {Map}
+/// @prop {Color} disabled-background [transparent] - The disabled background color an outlined button.
+/// @requires {Map} $fluent-flat-button
+/// @requires {Map} $fluent-base-button-dark
+$fluent-flat-button-dark: extend(
+    $fluent-flat-button,
+    $fluent-base-button-dark,
+    (
+        disabled-background: transparent,
+    )
+);
+
+/// @requires {Map} $fluent-raised-button
+/// @requires {Map} $fluent-base-button-dark
+$fluent-raised-button-dark: extend($fluent-raised-button, $fluent-base-button-dark);
+
+/// @requires {Map} $fluent-fab-button
+/// @requires {Map} $fluent-base-button-dark
+$fluent-fab-button-dark: extend($fluent-fab-button, $fluent-base-button-dark);
+
+/// @prop {Map} hover-background [color: ('gray', 50)] - The hover background color of an icon button.
+/// @prop {Map} active-background [color: ('gray', 100, .8)] - The active background color of an icon button.
+/// @prop {Map} disabled-border-color [color: ('gray', 50)] - The disabled focused border color of an icon button.
+/// @requires {Map} $fluent-icon-button
+/// @requires {Map} $fluent-base-button-dark
+$fluent-icon-button-dark: extend(
+    $fluent-icon-button,
+    $fluent-base-button-dark,
+    (
+        hover-background: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+        active-background: (
+            color: (
+                'gray',
+                100,
+                0.8,
+            ),
+        ),
+        disabled-border-color: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+    )
+);
+
+/// @prop {Map} hover-foreground [color: ('gray', 50)] - TThe hover text color of an outlined button.
+/// @prop {Map} active-background [color: ('gray', 100, .8)] - The active background color of an outlined button.
+/// @prop {Map} active-foreground [contrast-color: ('gray' 100)] - The active text color of an outlined button.
+/// @prop {Map} border-color [color: ('gray', 100)] - The border color of an outlined button.
+/// @requires {Map} $fluent-outlined-button
+/// @requires {Map} $fluent-base-button-dark
+$fluent-outlined-button-dark: extend(
+    $fluent-outlined-button,
+    $fluent-base-button-dark,
+    (
+        hover-background: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+        active-background: (
+            color: (
+                'gray',
+                100,
+                0.8,
+            ),
+        ),
+        active-foreground: (
+            contrast-color: (
+                'gray',
+                100,
+            ),
+        ),
+        border-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark fluent button schema.
+/// @type {Map}
+/// @requires {Map} $fluent-flat-button-dark
+/// @requires {Map} $fluent-outlined-button
+/// @requires {Map} $fluent-raised-button
+/// @requires {Map} $fluent-fab-button
+/// @requires {Map} $fluent-icon-button
+$dark-fluent-button: (
+    flat: $fluent-flat-button-dark,
+    outlined: $fluent-outlined-button-dark,
+    raised: $fluent-raised-button-dark,
+    fab: $fluent-fab-button-dark,
+    icon: $fluent-icon-button-dark,
+);
+
+/// @type {Map}
+/// @requires {Map} $bootstrap-base-button
+$bootstrap-base-button-dark: extend($bootstrap-base-button);
+
+/// @type {Map}
+/// @prop {Map} disabled-border-color [color: ('primary', 900)] - The disabled border color of the button.
+/// @requires {Map} $bootstrap-base-button-dark
+/// @requires {Map} $bootstrap-outlined-button
+$bootstrap-outlined-button-dark: extend(
+    $bootstrap-base-button-dark,
+    $bootstrap-outlined-button,
+    (
+        disabled-border-color: (
+            color: (
+                'primary',
+                900,
+            ),
+        ),
+    )
+);
+
+/// @type {Map}
+/// @requires {Map} $bootstrap-base-button-dark
+/// @requires {Map} $bootstrap-flat-button
+$bootstrap-flat-button-dark: extend($bootstrap-base-button-dark, $bootstrap-flat-button);
+
+/// Generates a dark bootstrap button schema.
+/// @type {Map}
+/// @requires {Map} $bootstrap-flat-button
+/// @requires {Map} $bootstrap-outlined-button
+/// @requires {Map} $bootstrap-raised-button
+/// @requires {Map} $bootstrap-fab-button
+/// @requires {Map} $bootstrap-icon-button
+$dark-bootstrap-button: (
+    flat: $bootstrap-flat-button-dark,
+    outlined: $bootstrap-outlined-button-dark,
+    raised: $bootstrap-raised-button,
+    fab: $bootstrap-fab-button,
+    icon: $bootstrap-icon-button,
+);
+
+/// @type {Map}
+/// @prop {Color} disabled-foreground [color: ('gray', 300)] - The disabled foreground color of the button.
+/// @prop {Color} disabled-background [color: ('gray', 200, .1)] - The disabled background color of the button.
+/// @requires {Map} $indigo-base-button
+$indigo-base-button-dark: extend(
+    (
+        disabled-foreground: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+        disabled-background: (
+            color: (
+                'gray',
+                200,
+                0.1,
+            ),
+        ),
+    )
+);
+
+/// @type {Map}
+/// @prop {Map} foreground [color: ('gray', 600, .8)] - The idle text color of a outlined button.
+/// @prop {Color} disabled-background [transparent] - The disabled background color an outlined button.
+/// @requires {Map} $indigo-base-button-dark
+/// @requires {Map} $indigo-flat-button
+$indigo-flat-button-dark: extend(
+    $indigo-flat-button,
+    $indigo-base-button-dark,
+    (
+        foreground: (
+            color: (
+                'gray',
+                600,
+                0.8,
+            ),
+        ),
+        disabled-background: transparent,
+    )
+);
+
+/// @type {Map}
+/// @prop {Color} foreground [color: ('gray', 900)] - The idle text color of a raised button.
+/// @prop {Color} hover-foreground [color: ('gray', 900)] - The hover text color of a raised button.
+/// @prop {Color} focus-foreground [color: ('gray', 900)] - The focus text color of a raised button.
+/// @prop {Color} focus-visible-foreground [color: ('gray', 900)] - The focus-visible text color of a raised button.
+/// @requires {Map} $indigo-base-button-dark
+/// @requires {Map} $indigo-raised-button
+$indigo-raised-button-dark: extend(
+    $indigo-raised-button,
+    $indigo-base-button-dark,
+    (
+        foreground: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        hover-foreground: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        focus-foreground: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        focus-visible-foreground: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+    )
+);
+
+/// @type {Map}
+/// @prop {Map} foreground [color: ('gray', 500)] - The idle text color of a outlined button.
+/// @prop {Map} border-color [color: ('gray', 300)] - The border color of an outlined button.
+/// @prop {Map} shadow-color [color: ('gray', 200, .8)] - The shadow color of an outlined button.
+/// @prop {Color} disabled-background [transparent] - The disabled background color an outlined button.
+/// @requires {Map} $indigo-base-button-dark
+/// @requires {Map} $indigo-outlined-button
+$indigo-outlined-button-dark: extend(
+    $indigo-outlined-button,
+    $indigo-base-button-dark,
+    (
+        foreground: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+        border-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+        shadow-color: (
+            color: (
+                'gray',
+                200,
+                0.8,
+            ),
+        ),
+        disabled-background: transparent,
+    )
+);
+
+/// @type {Map}
+/// @prop {Color} disabled-background [transparent] - The disabled background color an outlined button.
+/// @requires {Map} $indigo-base-button-dark
+/// @requires {Map} $indigo-icon-button
+$indigo-icon-button-dark: extend(
+    $indigo-icon-button,
+    $indigo-base-button-dark,
+    (
+        disabled-background: transparent,
+    )
+);
+
+/// @type {Map}
+/// @prop {Color} foreground [color: ('gray', 900) - The idle text color of a fab button.
+/// @prop {Color} hover-foreground [color: ('gray', 900)] - The hover text color of a fab button.
+/// @prop {Color} focus-foreground [color: ('gray', 900)] - The focus text color of a fab button.
+/// @prop {Color} focus-visible-foreground [color: ('gray', 900)] - The focus-visible text color of a fab button.
+/// @requires {Map} $indigo-base-button-dark
+/// @requires {Map} $indigo-fab-button
+$indigo-fab-button-dark: extend(
+    $indigo-fab-button,
+    $indigo-base-button-dark,
+    (
+        foreground: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        hover-foreground: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        focus-foreground: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        focus-visible-foreground: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark indigo button schema.
+/// @type {Map}
+/// @requires {Map} $indigo-flat-button
+/// @requires {Map} $indigo-outlined-button
+/// @requires {Map} $indigo-raised-button
+/// @requires {Map} $indigo-fab-button
+/// @requires {Map} $indigo-icon-button
+$dark-indigo-button: (
+    flat: $indigo-flat-button-dark,
+    outlined: $indigo-outlined-button-dark,
+    raised: $indigo-raised-button-dark,
+    fab: $indigo-fab-button-dark,
+    icon: $indigo-icon-button-dark,
+);