igniteui-theming 1.4.5 → 1.4.6

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

@@ -0,0 +1,207 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+@use '../elevation/card' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a light card schema.
+/// @type {Map}
+/// @prop {Map} background [color: 'surface']- The card background color.
+/// @prop {Map} header-text-color [color: ('gray', 900)] - The text color of the card title.
+/// @prop {Map} subtitle-text-color [color: ('gray', 700)] - The text color of the card subtitle.
+/// @prop {Map} content-text-color [color: ('gray', 700)] - The text color of the card content.
+/// @prop {Map} actions-text-color [color: ('gray', 700)] - The text color of the card buttons.
+/// @prop {Map} outline-color [color: ('gray', 400, .54)] - The outline color of an outlined type card.
+/// @prop {Number} resting-elevation [2] - The elevation level, between 0-24, to be used for the resting state.
+/// @prop {Number} hover-elevation [8] - The elevation level, between 0-24, to be used for the hover state.
+/// @prop {Number} border-radius [4px] - The border radius used for card. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $default-elevation-card
+$light-card: extend(
+    $default-elevation-card,
+    (
+        background: (
+            color: 'surface',
+        ),
+
+        header-text-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        subtitle-text-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        content-text-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        actions-text-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        outline-color: (
+            color: (
+                'gray',
+                400,
+                0.54,
+            ),
+        ),
+
+        border-radius: rem(4px),
+    )
+);
+
+/// Generates a fluent card schema.
+/// @type {Map}
+/// @prop {Map} outline-color [color: ('gray', 200)] - The outline color of an outlined type card.
+/// @prop {Number} resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state.
+/// @prop {Number} hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state.
+/// @prop {Number} border-radius [2px] - The border radius used for card. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-card
+/// @requires {Map} $fluent-elevation-card
+$fluent-card: extend(
+    $light-card,
+    $fluent-elevation-card,
+    (
+        outline-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+
+        border-radius: rem(2px),
+    )
+);
+
+/// Generates a bootstrap card schema.
+/// @type {Map}
+/// @prop {Map} background [contrast-color: ('gray', 900)]- The card background color.
+/// @prop {Map} outline-color [color: ('gray', 300)] - The outline color of an outlined type card.
+/// @prop {Map} header-text-color [color: ('gray', 900)] - The text color of the card title.
+/// @prop {Map} subtitle-text-color [color: ('gray', 800)] - The text color of the card subtitle.
+/// @prop {Map} content-text-color [color: ('gray', 800)] - The text color of the card content.
+/// @prop {Map} actions-text-color [color: ('gray', 900)] - The text color of the card buttons.
+/// @prop {Number} resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state.
+/// @prop {Number} hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state.
+/// @prop {Number} border-radius [4px] - The border radius used for card. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-card
+/// @requires {Map} $bootstrap-elevation-card
+$bootstrap-card: extend(
+    $light-card,
+    $bootstrap-elevation-card,
+    (
+        background: (
+            contrast-color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        outline-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+
+        header-text-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        subtitle-text-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+
+        content-text-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+
+        actions-text-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+    )
+);
+
+/// Generates an indigo card schema.
+/// @type {Map}
+/// @prop {Map} outline-color [color: ('gray', 400)] - The outline color of an outlined type card.
+/// @prop {Map} header-text-color [color: ('gray', 900)] - The text color of the card title.
+/// @prop {Map} subtitle-text-color [color: ('gray', 500)] - The text color of the card subtitle.
+/// @prop {Map} content-text-color [color: ('gray', 700)] - The text color of the card content.
+/// @prop {Map} actions-text-color [color: ('gray', 600)] - The text color of the card buttons.
+/// @prop {Number} resting-elevation [4] - The elevation level, between 0-24, to be used for the resting state.
+/// @prop {Number} hover-elevation [6] - The elevation level, between 0-24, to be used for the hover state.
+/// @prop {Number} border-radius [3px] - The border radius used for card. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-card
+/// @requires {Map} $indigo-elevation-card
+$indigo-card: extend(
+    $light-card,
+    $indigo-elevation-card,
+    (
+        outline-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+
+        header-text-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        subtitle-text-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+
+        content-text-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        actions-text-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+
+        border-radius: rem(3px),
+    )
+);

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

@@ -0,0 +1,195 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+@use '../elevation/carousel' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a light carousel schema.
+/// @type {Map}
+/// @prop {Map} slide-background [color: ('gray', 50)] - The slide background color.
+/// @prop {Map} button-background [color: ('gray', 50)] - The previous/next buttons idle background color.
+/// @prop {Map} button-hover-background [color: ('gray', 50)] - The previous/next buttons hover background color.
+/// @prop {Map} button-disabled-background [color: ('gray', 100)] - The previous/next buttons disabled background color.
+/// @prop {Map} button-arrow-color [color: ('gray', 700)] - The previous/next buttons idle arrow color.
+/// @prop {Map} button-hover-arrow-color [color: ('gray', 900)] - The previous/next buttons hover arrow color.
+/// @prop {Map} button-disabled-arrow-color [color: ('gray' 400)] - The previous/next buttons disabled color.
+/// @prop {Color} indicator-dot-color [transparent] - The idle indicator dot color.
+/// @prop {Map} indicator-border-color [color: ('gray', 50)] - The idle indicator border color.
+/// @prop {Map} indicator-active-dot-color [color: ('gray', 50)] - The active indicator dot color.
+/// @prop {Map} indicator-active-border-color [color: ('gray', 50)] - The active indicator border color.
+/// @prop {Number} button-elevation [1] - The elevation level, between 0-24, to be used for the carousel buttons.
+/// @prop {Number} border-radius [0] - The border radius used for carousel. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $default-elevation-carousel
+$light-carousel: extend(
+    $default-elevation-carousel,
+    (
+        slide-background: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        button-background: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        button-hover-background: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        button-arrow-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        button-hover-arrow-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        button-disabled-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        button-disabled-arrow-color: (
+            color: (
+                'gray' 400,
+            ),
+        ),
+
+        indicator-dot-color: transparent,
+
+        indicator-border-color: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        indicator-active-dot-color: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        indicator-active-border-color: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        border-radius: rem(0),
+    )
+);
+
+/// Generates a fluent carousel schema.
+/// @type {Map}
+/// @prop {Number} border-radius [0] - The border radius used for carousel. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} button-elevation [0] - The elevation level, between 0-24, to be used for the carousel buttons.
+/// @requires {Map} $light-carousel
+/// @requires {Map} $fluent-elevation-carousel
+$fluent-carousel: extend($light-carousel, $fluent-elevation-carousel);
+
+/// Generates a bootstrap carousel schema.
+/// @type {Map}
+/// @prop {Number} border-radius [4px] - The border radius used for carousel. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} button-elevation [0] - The elevation level, between 0-24, to be used for the carousel buttons.
+/// @requires {Map} $light-carousel
+/// @requires {Map} $bootstrap-elevation-carousel
+$bootstrap-carousel: extend(
+    $light-carousel,
+    $bootstrap-elevation-carousel,
+    (
+        border-radius: rem(4px),
+    )
+);
+
+/// Generates an indigo carousel schema.
+/// @type {Map}
+/// @prop {Map} button-background [color: ('surface', 500, .4)] - The previous/next buttons idle background color.
+/// @prop {Map} button-hover-background [color: ('surface', 500, .65)] - The previous/next buttons hover background color.
+/// @prop {Color} button-disabled-background [transparent] - The previous/next buttons disabled background color.
+/// @prop {Map} button-arrow-color [color: ('gray', 100)] - The previous/next buttons idle arrow color.
+/// @prop {Map} button-hover-arrow-color [color: ('gray', 700)] - The previous/next buttons hover arrow color.
+/// @prop {Map} button-disabled-arrow-color [color: ('gray' 400)] - The previous/next buttons disabled color.
+/// @prop {Map} indicator-dot-color [color: ('surface', 500, .6)] - The idle indicator dot color.
+/// @prop {Map} indicator-active-dot-color [color: 'surface'] - The active indicator dot color.
+/// @prop {Number} border-radius [0] - The border radius used for carousel. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} button-elevation [0] - The elevation level, between 0-24, to be used for the carousel buttons.
+/// @requires {Map} $light-carousel
+/// @requires {Map} $indigo-elevation-carousel
+$indigo-carousel: extend(
+    $light-carousel,
+    $indigo-elevation-carousel,
+    (
+        button-background: (
+            color: (
+                'surface',
+                500,
+                0.4,
+            ),
+        ),
+
+        button-arrow-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        button-hover-background: (
+            color: (
+                'surface',
+                500,
+                0.65,
+            ),
+        ),
+
+        button-hover-arrow-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        button-disabled-background: transparent,
+
+        button-disabled-arrow-color: (
+            color: (
+                'gray' 400,
+            ),
+        ),
+
+        indicator-dot-color: (
+            color: (
+                'surface',
+                500,
+                0.6,
+            ),
+        ),
+
+        indicator-active-dot-color: (
+            color: 'surface',
+        ),
+    )
+);