igniteui-theming 1.4.5 → 1.4.6

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

@@ -0,0 +1,321 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a light list schema.
+/// @type {Map}
+/// @prop {Map} background [color: 'surface'] - The list background color.
+/// @prop {Map} header-background [color: 'surface'] - The list header background color.
+/// @prop {Map} header-text-color [color: ('secondary', 500)] - The list header text color.
+/// @prop {Map} item-background [color: 'surface'] - The list item background color.
+/// @prop {Map} item-background-hover [color: ('gray', 200)] - The list item hover background.
+/// @prop {Map} item-background-active [color: ('gray', 200)] - The active list item background color.
+/// @prop {Map} item-text-color [color: ('gray', 700)] - The list item text color.
+/// @prop {Map} item-text-color-hover [color: ('gray', 700)] - The list item text color.
+/// @prop {Map} item-text-color-active [color: ('gray', 700)] - The active list item text color.
+/// @prop {Color} item-title-color ["'currentColor'"] - The list item title color.
+/// @prop {Color} item-title-color-hover ["'currentColor'"] - The list item title hover color.
+/// @prop {Color} item-title-color-active ["'currentColor'"] - The list item title active color.
+/// @prop {Color} item-subtitle-color ["'currentColor'"] - The list item subtitle color.
+/// @prop {Color} item-subtitle-color-hover ["'currentColor'"] - The list item subtitle hover color.
+/// @prop {Color} item-subtitle-color-active ["'currentColor'"] - The list item subtitle active color.
+/// @prop {Color} item-action-color ["'currentColor'"] - The list item action color.
+/// @prop {Color} item-action-color-hover ["'currentColor'"] - The list item action hover color.
+/// @prop {Color} item-action-color-active ["'currentColor'"] - The list item action active color.
+/// @prop {Color} item-thumbnail-color ["'currentColor'"] - The list item thumbnail color.
+/// @prop {Color} item-thumbnail-color-hover ["'currentColor'"] - The list item thumbnail hover color.
+/// @prop {Color} item-thumbnail-color-active ["'currentColor'"] - The list item thumbnail active color.
+/// @prop {Number} border-radius [0] - The border radius used for list component. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} item-border-radius [0] - The border radius used for list item. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} border-color [transparent] - The list border color.
+/// @prop {Color} border-width [0] - The list border width.
+$light-list: (
+    background: (
+        color: 'surface',
+    ),
+
+    header-background: (
+        color: 'surface',
+    ),
+
+    header-text-color: (
+        color: (
+            'secondary',
+            500,
+        ),
+    ),
+
+    item-background: (
+        color: 'surface',
+    ),
+
+    item-background-hover: (
+        color: (
+            'gray',
+            200,
+        ),
+    ),
+
+    item-background-active: (
+        color: (
+            'gray',
+            200,
+        ),
+    ),
+
+    item-text-color: (
+        color: (
+            'gray',
+            700,
+        ),
+    ),
+
+    item-text-color-hover: (
+        color: (
+            'gray',
+            700,
+        ),
+    ),
+
+    item-text-color-active: (
+        color: (
+            'gray',
+            700,
+        ),
+    ),
+
+    item-title-color: "'currentColor'",
+
+    item-title-color-hover: "'currentColor'",
+
+    item-title-color-active: "'currentColor'",
+
+    item-action-color: "'currentColor'",
+
+    item-action-color-hover: "'currentColor'",
+
+    item-action-color-active: "'currentColor'",
+
+    item-subtitle-color: "'currentColor'",
+
+    item-subtitle-color-hover: "'currentColor'",
+
+    item-subtitle-color-active: "'currentColor'",
+
+    item-thumbnail-color: "'currentColor'",
+
+    item-thumbnail-color-hover: "'currentColor'",
+
+    item-thumbnail-color-active: "'currentColor'",
+
+    border-color: transparent,
+
+    border-width: 0,
+
+    border-radius: rem(0),
+    item-border-radius: rem(0),
+);
+
+/// Generates a fluent list schema.
+/// @type {Map}
+/// @requires {Map} $light-list
+$fluent-list: $light-list;
+
+/// Generates a bootstrap list schema.
+/// @type {Map}
+/// @prop {Map} header-background [contrast-color: ('gray', 900)] - The list header background color.
+/// @prop {Map} item-background [contrast-color: ('gray', 900)] - The list item background color.
+/// @prop {Map} item-text-color [color: ('gray', 900)] - The list item text color.
+/// @prop {Map} item-text-color-hover [color: ('gray', 900)] - The list item text color.
+/// @prop {Map} item-text-color-active [color: ('gray', 900)] - The active list item text color.
+/// @prop {Number} border-radius [4px] - The border radius used for list component. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} item-border-radius [0] - The border radius used for list item. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} border-color [color: ('gray', 300)] - The list border color.
+/// @prop {Color} border-width [rem(1px)] - The list border width.
+/// @requires {Map} $light-list
+$bootstrap-list: extend(
+    $light-list,
+    (
+        border-width: rem(1px),
+        border-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+
+        item-background: (
+            contrast-color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        header-background: (
+            contrast-color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        item-text-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        item-text-color-hover: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        item-text-color-active: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        border-radius: rem(4px),
+    )
+);
+
+/// Generates an indigo list schema.
+/// @type {Map}
+/// @prop {Map} header-text-color [color: ('primary', 500)] - The list header text color.
+/// @prop {Map} item-background-hover [color: ('primary', 400)] - The list item hover background.
+/// @prop {Map} item-background-active [ color: ('primary', 400)] - The active list item background color.
+/// @prop {Map} item-text-color [color: ('gray', 900)] - The list item text color.
+/// @prop {Map} item-text-color-hover [color: ('gray', 900)] - The list item text color.
+/// @prop {Map} item-text-color-active [color: ('gray', 900)] - The active list item text color.
+/// @prop {Color} item-subtitle-color [color: ('gray', 800)] - The list item subtitle color.
+/// @prop {Color} item-subtitle-color-hover [color: ('gray', 800)] - The list item subtitle hover color.
+/// @prop {Color} item-subtitle-color-active [color: ('gray', 800)] - The list item subtitle active color.
+/// @prop {Color} item-action-color [color: ('gray', 600)] - The list item action color.
+/// @prop {Color} item-action-color-hover [color: ('gray', 600)] - The list item action hover color.
+/// @prop {Color} item-action-color-active [color: ('gray', 600)] - The list item action active color.
+/// @prop {Color} item-thumbnail-color [color: ('gray', 600)] - The list item thumbnail color.
+/// @prop {Color} item-thumbnail-color-hover [color: ('gray', 600)] - The list item thumbnail hover color.
+/// @prop {Color} item-thumbnail-color-active [color: ('gray', 600)] - The list item thumbnail active color.
+/// @prop {Number} border-radius [0] - The border radius used for list component. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} item-border-radius [2px] - The border radius used for list item. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-list
+$indigo-list: extend(
+    $light-list,
+    (
+        header-text-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        item-background-hover: (
+            color: (
+                'primary',
+                50,
+            ),
+        ),
+
+        item-background-active: (
+            color: (
+                'primary',
+                50,
+            ),
+        ),
+
+        item-text-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        item-text-color-hover: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        item-text-color-active: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        item-action-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+
+        item-action-color-hover: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+
+        item-action-color-active: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+
+        item-subtitle-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+
+        item-subtitle-color-hover: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+
+        item-subtitle-color-active: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+
+        item-thumbnail-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+
+        item-thumbnail-color-hover: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+
+        item-thumbnail-color-active: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+
+        item-border-radius: rem(2px),
+    )
+);

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

@@ -0,0 +1,214 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+@use '../elevation/navdrawer' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a light navdrawer schema.
+/// @type {Map}
+/// @prop {Map} background [color: 'surface'] - The navigation drawer background color.
+/// @prop {Map} border-color [color: ('gray', 900, .14)] - The navigation drawer right border color.
+/// @prop {Map} item-header-text-color [color: ('gray', 800)] - The header's idle text color.
+/// @prop {Map} item-text-color [color: ('gray', 700)] - The item's idle text color.
+/// @prop {Map} item-icon-color [ color: ('gray', 700)] - The item's icon color.
+/// @prop {Map} item-active-text-color [color: ('primary', 500)] - The item's active text color.
+/// @prop {Map} item-active-background [color: ('primary', 500, .12)] - The item's active background color.
+/// @prop {Map} item-active-icon-color [color: ('primary', 500)] - The item's icon active color.
+/// @prop {Map} item-hover-background [color: ('gray', 200, .8)] - The item's hover background color.
+/// @prop {Map} item-hover-text-color [color: ('gray', 900)] - The item's hover text color.
+/// @prop {Map} item-hover-icon-color [color: ('gray', 900)] - The item's hover icon color.
+/// @prop {Map} elevation [16] - The elevation level, between 0-24, to be used for the drawer.
+/// @prop {Number} border-radius [0] - The border radius used for the navdrawer component. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} item-border-radius [4px] - The border radius used for the navdrawer items. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $default-elevation-navdrawer
+$light-navdrawer: extend(
+    $default-elevation-navdrawer,
+    (
+        background: (
+            color: 'surface',
+        ),
+
+        border-color: (
+            color: (
+                'gray',
+                900,
+                0.14,
+            ),
+        ),
+
+        item-header-text-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+
+        item-text-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        item-icon-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        item-active-text-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        item-active-background: (
+            color: (
+                'primary',
+                500,
+                0.12,
+            ),
+        ),
+
+        item-hover-background: (
+            color: (
+                'gray',
+                200,
+                0.8,
+            ),
+        ),
+
+        item-hover-text-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        item-active-icon-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        item-hover-icon-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        border-radius: rem(0),
+        item-border-radius: rem(4px),
+    )
+);
+
+/// Generates a fluent navdrawer schema.
+/// @type {Map}
+/// @requires {Map} $light-navdrawer
+$fluent-navdrawer: $light-navdrawer;
+
+/// Generates a bootstrap navdrawer schema.
+/// @type {Map}
+/// @requires {Map} $light-navdrawer
+$bootstrap-navdrawer: $light-navdrawer;
+
+/// Generates an indigo navdrawer schema.
+/// @type {Map}
+/// @prop {Map} background [color: ('gray', 700)] - The navigation drawer background color.
+/// @prop {Map} item-header-text-color [contrast-color: ('gray', 700)] - The header's idle text color.
+/// @prop {Map} item-text-color [contrast-color: ('gray', 700, .8)] - The item's idle text color.
+/// @prop {Map} item-icon-color [contrast-color: ('gray', 700, .8)] - The item's icon color.
+/// @prop {Map} item-active-text-color [contrast-color: ('gray', 700)] - The item's active text color.
+/// @prop {Map} item-active-background [contrast-color: ('gray', 700, .1)] - The item's active background color.
+/// @prop {Map} item-active-icon-color [contrast-color: ('gray', 700)] - The item's icon active color.
+/// @prop {Map} item-hover-background [transparent] - The item's hover background color.
+/// @prop {Map} item-hover-text-color [contrast-color: ('gray', 700)] - The item's hover text color.
+/// @prop {Map} item-hover-icon-color [contrast-color: ('gray', 700)] - The item's hover icon color.
+/// @prop {Map} elevation [0] - The elevation level, between 0-24, to be used for the drawer.
+/// @prop {Number} border-radius [0] - The border radius used for the navdrawer component. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} item-border-radius [24px] - The border radius used for the navdrawer items. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-navdrawer
+/// @requires {Map} $indigo-elevation-navdrawer
+$indigo-navdrawer: extend(
+    $light-navdrawer,
+    $indigo-elevation-navdrawer,
+    (
+        background: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        item-header-text-color: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        item-text-color: (
+            color: (
+                'gray',
+                300,
+                0.8,
+            ),
+        ),
+
+        item-icon-color: (
+            color: (
+                'gray',
+                300,
+                0.8,
+            ),
+        ),
+
+        item-active-background: (
+            color: (
+                'gray',
+                600,
+                0.8,
+            ),
+        ),
+
+        item-active-text-color: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        item-active-icon-color: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        item-hover-background: transparent,
+
+        item-hover-text-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        item-hover-icon-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        item-border-radius: rem(24px),
+    )
+);

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

@@ -0,0 +1,42 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a light overlay schema.
+/// @type {Map}
+/// @prop {Map} background-color [color: ('gray', 500, .54)] - The background color used for modal overlays.
+$light-overlay: (
+    background-color: (
+        color: (
+            'gray',
+            500,
+            0.54,
+        ),
+    ),
+);
+
+/// Generates a fluent overlay schema.
+/// @type {Map}
+/// @prop {Color} background-color [rgba(255, 255, 255, .4)] - The background color used for modal overlays.
+/// @requires {Map} $light-overlay
+$fluent-overlay: extend(
+    $light-overlay,
+    (
+        background-color: rgb(255 255 255 / 40%),
+    )
+);
+
+/// Generates a bootstrap overlay schema.
+/// @type {Map}
+/// @requires {Map} $light-overlay
+$bootstrap-overlay: $light-overlay;
+
+/// Generates an indigo overlay schema.
+/// @type {Map}
+/// @requires {Map} $light-overlay
+$indigo-overlay: $light-overlay;

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

@@ -0,0 +1,97 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a light pagination schema.
+/// @type {Map}
+/// @prop {Map} text-color [color: ('gray', 800)] - The text color.
+/// @prop {Map} background-color [color: ('gray', 100)] - The background color of the paging panel.
+/// @prop {Map} border-color [color: ('gray', 200)] - The border color of the paging panel.
+$light-pagination: (
+    text-color: (
+        color: (
+            'gray',
+            800,
+        ),
+    ),
+
+    background-color: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+
+    border-color: (
+        color: (
+            'gray',
+            200,
+        ),
+    ),
+);
+
+/// Generates a light pagination schema.
+/// @type {Map}
+/// @prop {Map} background-color [color: 'surface'] - The background color of the paging panel.
+/// @prop {Map} border-color [color: ('gray', 100)] - The border color of the paging panel.
+/// @requires {Map} $light-pagination
+$fluent-pagination: extend(
+    $light-pagination,
+    (
+        background-color: (
+            color: 'surface',
+        ),
+
+        border-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+    )
+);
+
+/// Generates a bootstrap pagination schema.
+/// @type {Map}
+/// @prop {Map} background-color [color: ('gray', 50)] - The background color of the paging panel.
+/// @requires {Map} $light-pagination
+$bootstrap-pagination: extend(
+    $light-pagination,
+    (
+        background-color: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+    )
+);
+
+/// Generates an indigo pagination schema.
+/// @type {Map}
+/// @prop {Map} text-color [color: ('gray', 700)] - The text color.
+/// @prop {Map} border-color [color: ('gray', 100)] - The border color of the paging panel.
+/// @requires {Map} $light-pagination
+$indigo-pagination: extend(
+    $light-pagination,
+    (
+        text-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        border-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+    )
+);