igniteui-theming 1.4.2 → 1.4.3-beta.1

package/index.js

@@ -1,2 +1,5 @@
 export { default as Palettes } from "./json/colors/presets/palettes.json";
+export { default as PaletteMeta } from "./json/colors/meta/palette.json";
+export { default as PaletteMultipliers } from "./json/colors/meta/multipliers.json";
 export { default as Typescales } from "./json/typography/presets/typescales.json";
+export { default as Elevations } from "./json/elevations/elevations.json";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "1.4.2",
+  "version": "1.4.3-beta.1",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "index.js",
   "scripts": {

package/sass/themes/_index.scss

@@ -1,3 +1,4 @@
 @forward 'functions';
 @forward 'mixins';
 @forward 'charts';
+@forward 'schemas';

package/sass/themes/schemas/_index.scss

@@ -1,35 +1,36 @@
 @use 'sass:map';
-@use './charts/index' as charts;
+@use 'charts';
+@use 'components';
 
 $light-material-schema: map.merge(
     charts.$light-material-schema,
-    ()
+    components.$light-material-schema
 );
 $light-bootstrap-schema: map.merge(
     charts.$light-bootstrap-schema,
-    ()
+    components.$light-bootstrap-schema
 );
 $light-fluent-schema: map.merge(
     charts.$light-fluent-schema,
-    ()
+    components.$light-fluent-schema
 );
 $light-indigo-schema: map.merge(
     charts.$light-indigo-schema,
-    ()
+    components.$light-indigo-schema
 );
 $dark-material-schema: map.merge(
     charts.$dark-material-schema,
-    ()
+    components.$dark-material-schema
 );
 $dark-bootstrap-schema: map.merge(
     charts.$dark-bootstrap-schema,
-    ()
+    components.$dark-bootstrap-schema
 );
 $dark-fluent-schema: map.merge(
     charts.$dark-fluent-schema,
-    ()
+    components.$dark-fluent-schema
 );
 $dark-indigo-schema: map.merge(
     charts.$dark-indigo-schema,
-    ()
+    components.$dark-indigo-schema
 );

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,40 @@
+@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,388 @@
+@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, .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, .12),
+        ),
+        focus-background: (
+            color: ('secondary', 400, .24),
+        ),
+        focus-visible-background: (
+            color: ('secondary', 400, .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, .5)
+        ),
+        focus-background: (
+            color: ('gray', 200, .8)
+        ),
+        focus-visible-background: (
+            color: ('gray', 200, .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, .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, .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, .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, .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, .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, .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,
+);

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

@@ -0,0 +1,70 @@
+@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,47 @@
+@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),
+        ),
+    )
+);