igniteui-theming 19.1.1 → 19.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "19.1.1",
+  "version": "19.2.0",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "index.js",
   "scripts": {
@@ -93,7 +93,7 @@
     "postcss-safe-parser": "^7.0.0",
     "prettier": "^3.2.5",
     "sass-true": "^7.0.0",
-    "sassdoc-plugin-localization": "^1.4.3",
+    "sassdoc-plugin-localization": "^2.0.0",
     "shx": "^0.3.4",
     "stylelint": "^15.6.2",
     "stylelint-config-standard-scss": "^7.0.1",

package/sass/themes/_index.scss

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

package/sass/themes/components/_index.scss

@@ -0,0 +1,49 @@
+@forward 'avatar/avatar-theme';
+@forward 'badge/badge-theme';
+@forward 'banner/banner-theme';
+@forward 'bottom-nav/bottom-nav-theme';
+@forward 'button/button-theme';
+@forward 'button-group/button-group-theme';
+@forward 'calendar/calendar-theme';
+@forward 'card/card-theme';
+@forward 'carousel/carousel-theme';
+@forward 'checkbox/checkbox-theme';
+@forward 'chip/chip-theme';
+@forward 'column-actions/column-actions-theme';
+@forward 'combo/combo-theme';
+@forward 'date-range-picker/date-range-picker-theme';
+@forward 'dialog/dialog-theme';
+@forward 'divider/divider-theme';
+@forward 'dock-manager/dock-manager-theme';
+@forward 'drop-down/drop-down-theme';
+@forward 'expansion-panel/expansion-panel-theme';
+@forward 'grid';
+@forward 'highlight/highlight-theme';
+@forward 'icon/icon-theme';
+@forward 'icon-button/icon-button-theme';
+@forward 'input/input-theme';
+@forward 'label/label-theme';
+@forward 'list/list-theme';
+@forward 'navbar/navbar-theme';
+@forward 'navdrawer/navdrawer-theme';
+@forward 'overlay/overlay-theme';
+@forward 'paginator/paginator-theme';
+@forward 'progress/circular-theme';
+@forward 'progress/linear-theme';
+@forward 'query-builder/query-builder-theme';
+@forward 'radio/radio-theme';
+@forward 'rating/rating-theme';
+@forward 'ripple/ripple-theme';
+@forward 'scrollbar/scrollbar-theme';
+@forward 'select/select-theme';
+@forward 'slider/slider-theme';
+@forward 'snackbar/snackbar-theme';
+@forward 'splitter/splitter-theme';
+@forward 'stepper/stepper-theme';
+@forward 'switch/switch-theme';
+@forward 'tabs/tabs-theme';
+@forward 'time-picker/time-picker-theme';
+@forward 'toast/toast-theme';
+@forward 'tooltip/tooltip-theme';
+@forward 'tree/tree-theme';
+@forward 'watermark/watermark-theme';

package/sass/themes/components/avatar/_avatar-theme.scss

@@ -0,0 +1,66 @@
+@use 'sass:map';
+@use '../../functions' as *;
+@use '../../schemas/' as *;
+@use '../../../utils/map' as *;
+@use '../../../color/functions' as *;
+@use '../../../elevations/' as *;
+
+////
+/// @group themes
+/// @access public
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
+////
+
+/// If only background color is specified, text/icon color will be assigned automatically to a contrasting color.
+/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
+/// @param {Color} $color [null] - The text color used of the avatar.
+/// @param {Color} $icon-color [null] - The icon color used of the avatar.
+/// @param {Color} $background [null] - The background color used of the avatar.
+/// @param {Number} $border-radius [null] - The border-radius used of the avatar.
+/// @param {Number} $size [null] - The size of the avatar.
+/// @requires $light-material-schema
+///
+/// @example scss Change the background and icon colors in icon avatars
+///   $my-avatar-theme: avatar-theme($icon-background: black, $icon-color: white);
+///   // Pass the theme to the css-vars() mixin
+///   @include css-vars($my-avatar-theme);
+@function avatar-theme(
+    $schema: $light-material-schema,
+    $background: null,
+    $color: null,
+    $icon-color: null,
+    $border-radius: null,
+    $size: null
+) {
+    $name: 'igx-avatar';
+    $avatar-schema: ();
+
+    @if map.has-key($schema, 'avatar') {
+        $avatar-schema: map.get($schema, 'avatar');
+    } @else {
+        $avatar-schema: $schema;
+    }
+
+    $theme: digest-schema($avatar-schema);
+
+    @if not($color) and $background {
+        $color: adaptive-contrast(var(--background));
+    }
+
+    @if not($icon-color) and $background {
+        $icon-color: adaptive-contrast(var(--background));
+    }
+
+    @return extend(
+        $theme,
+        (
+            name: $name,
+            background: $background,
+            color: $color,
+            icon-color: $icon-color,
+            border-radius: $border-radius,
+            size: $size,
+        )
+    );
+}

package/sass/themes/components/badge/_badge-theme.scss

@@ -0,0 +1,80 @@
+@use 'sass:map';
+@use '../../functions' as *;
+@use '../../schemas/' as *;
+@use '../../../utils/map' as *;
+@use '../../../color/functions' as *;
+@use '../../../elevations/' as *;
+
+////
+/// @group themes
+/// @access public
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
+////
+
+/// If only background color is specified, text/icon color
+/// will be assigned automatically to a contrasting color.
+///
+/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
+/// @param {Color} $icon-color [null] - The icon color used.
+/// @param {Color} $text-color [null] - The text color used.
+/// @param {Color} $border-color [null] - The border color used.
+/// @param {Color} $background-color [null] - The background color used.
+/// @param {box-shadow} $shadow [null] - Sets a shadow to be used for the badge.
+/// @param {Number} $border-radius [null] - The border radius used for badge component.
+///
+/// @requires $light-material-schema
+///
+/// @example scss Change the text and icon colors in a badge
+///   $my-badge-theme: badge-theme($icon-color: black, $background-color: white);
+///   // Pass the theme to the css-vars() mixin
+///   @include css-vars($my-badge-theme);
+@function badge-theme(
+    $schema: $light-material-schema,
+
+    $icon-color: null,
+    $text-color: null,
+
+    $border-color: null,
+    $border-radius: null,
+
+    $background-color: null,
+    $shadow: null
+) {
+    $name: 'igx-badge';
+    $badge-schema: ();
+
+    @if map.has-key($schema, 'badge') {
+        $badge-schema: map.get($schema, 'badge');
+    } @else {
+        $badge-schema: $schema;
+    }
+
+    $theme: digest-schema($badge-schema);
+
+    @if not($icon-color) and $background-color {
+        $icon-color: adaptive-contrast(var(--background-color));
+    }
+
+    @if not($text-color) and $background-color {
+        $text-color: adaptive-contrast(var(--background-color));
+    }
+
+    @if not($shadow) {
+        $elevation: map.get($badge-schema, 'elevation');
+        $shadow: elevation($elevation);
+    }
+
+    @return extend(
+        $theme,
+        (
+            name: $name,
+            icon-color: $icon-color,
+            text-color: $text-color,
+            border-color: $border-color,
+            border-radius: $border-radius,
+            background-color: $background-color,
+            shadow: $shadow,
+        )
+    );
+}

package/sass/themes/components/banner/_banner-theme.scss

@@ -0,0 +1,70 @@
+@use 'sass:map';
+@use '../../functions' as *;
+@use '../../schemas/' as *;
+@use '../../../utils/map' as *;
+@use '../../../color/functions' as *;
+@use '../../../elevations/' as *;
+
+////
+/// @group themes
+/// @access public
+/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
+////
+
+/// If only background color is specified, text/icon color
+/// will be assigned automatically to a contrasting color.
+/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
+///
+/// @param {Color} $banner-background [null] - The color used for the banner background.
+/// @param {Color} $banner-message-color [null] - The color used for the banner label.
+/// @param {Color} $banner-border-color [null] - The color used for the banner border.
+/// @param {Color} $banner-illustration-color [null] - The color used for the banner illustration.
+/// @param {Number} $border-radius [null] - The border-radius for the banner.
+///
+/// @requires $light-material-schema
+///
+/// @example scss Change the background in banner
+///   $my-banner-theme: banner-theme($banner-background: #000);
+///   // Pass the theme to the css-vars() mixin
+///   @include css-vars($my-banner-theme);
+@function banner-theme(
+    $schema: $light-material-schema,
+    $banner-background: null,
+    $banner-message-color: null,
+    $banner-border-color: null,
+    $banner-illustration-color: null,
+    $border-radius: null
+) {
+    $name: 'igx-banner';
+    $selector: 'igx-banner, .igx-banner';
+    $banner-schema: ();
+
+    @if map.has-key($schema, 'banner') {
+        $banner-schema: map.get($schema, 'banner');
+    } @else {
+        $banner-schema: $schema;
+    }
+
+    $theme: digest-schema($banner-schema);
+
+    @if not($banner-message-color) and $banner-background {
+        $banner-message-color: adaptive-contrast(var(--banner-background));
+    }
+
+    @if not($banner-illustration-color) and $banner-background {
+        $banner-illustration-color: adaptive-contrast(var(--banner-background));
+    }
+
+    @return extend(
+        $theme,
+        (
+            name: $name,
+            selector: $selector,
+            banner-background: $banner-background,
+            banner-message-color: $banner-message-color,
+            banner-border-color: $banner-border-color,
+            banner-illustration-color: $banner-illustration-color,
+            border-radius: $border-radius,
+        )
+    );
+}

package/sass/themes/components/bottom-nav/_bottom-nav-theme.scss

@@ -0,0 +1,107 @@
+@use 'sass:map';
+@use '../../functions' as *;
+@use '../../schemas/' as *;
+@use '../../../utils/map' as *;
+@use '../../../color/functions' as *;
+@use '../../../elevations/' as *;
+
+////
+/// @group themes
+/// @access public
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
+////
+
+/// If only background color is specified,
+/// the label and icon colors will be assigned automatically to a contrasting color.
+/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
+/// @param {Color} $background [null] - The background color used for the toast.
+/// @param {Color} $label-color [null] - The label color used in idle state.
+/// @param {Color} $icon-color [null] - The icon color used in idle state.
+/// @param {Color} $label-selected-color [null] - The label color used in selected state.
+/// @param {Color} $icon-selected-color [null] - The icon color used in selected state.
+/// @param {Color} $icon-disabled-color [null] - The disabled color of the icon.
+/// @param {Color} $label-disabled-color [null] - The disabled color of the label.
+/// @param {Color} $border-color [null] - The border color of the bottom navigation.
+/// @param {box-shadow} $shadow [null] - Sets a shadow to be used for the bar.
+/// @requires $light-material-schema
+/// @example scss Set a custom background color
+///   $my-bottom-nav-theme: bottom-nav-theme($background: black);
+///   // Pass the theme to the css-vars() mixin
+///   @include css-vars($my-bottom-nav-theme);
+@function bottom-nav-theme(
+    $schema: $light-material-schema,
+    $background: null,
+    $icon-color: null,
+    $icon-selected-color: null,
+    $label-color: null,
+    $label-selected-color: null,
+    $icon-disabled-color: null,
+    $label-disabled-color: null,
+    $border-color: null,
+    $shadow: null
+) {
+    $name: 'igx-bottom-nav';
+    $bottom-nav-schema: ();
+
+    @if map.has-key($schema, 'bottom-nav') {
+        $bottom-nav-schema: map.get($schema, 'bottom-nav');
+    } @else {
+        $bottom-nav-schema: $schema;
+    }
+
+    $theme: digest-schema($bottom-nav-schema);
+
+    @if not($label-color) and not($icon-color) and $background {
+        $label-color: adaptive-contrast(var(--background));
+    }
+
+    @if not($icon-color) and $label-color {
+        $icon-color: $label-color;
+    }
+
+    @if not($label-color) and $icon-color {
+        $label-color: $icon-color;
+    }
+
+    @if not($icon-disabled-color) and not($label-disabled-color) and $label-color {
+        $label-disabled-color: adaptive-contrast(var(--background));
+    }
+
+    @if not($icon-disabled-color) and $label-disabled-color {
+        $icon-disabled-color: $label-disabled-color;
+    }
+
+    @if not($label-disabled-color) and $icon-disabled-color {
+        $label-disabled-color: $icon-disabled-color;
+    }
+
+    @if not($icon-selected-color) and $label-selected-color {
+        $icon-selected-color: $label-selected-color;
+    }
+
+    @if not($label-selected-color) and $icon-selected-color {
+        $label-selected-color: $icon-selected-color;
+    }
+
+    @if not($shadow) {
+        $elevation: map.get($bottom-nav-schema, 'elevation');
+        $shadow: elevation($elevation);
+    }
+
+    @return extend(
+        $theme,
+        (
+            name: $name,
+            background: $background,
+            icon-color: $icon-color,
+            icon-selected-color: $icon-selected-color,
+            label-color: $label-color,
+            label-selected-color: $label-selected-color,
+            icon-disabled-color: $icon-disabled-color,
+            label-disabled-color: $label-disabled-color,
+            border-color: $border-color,
+            shadow: $shadow,
+        )
+    );
+}

package/sass/themes/components/button/_button-theme.scss

@@ -0,0 +1,240 @@
+@use 'sass:map';
+@use '../../functions' as *;
+@use '../../schemas/' as *;
+@use '../../../utils/map' as *;
+@use '../../../color/functions' as *;
+@use '../../../elevations/' as *;
+@forward './flat-button-theme';
+@forward './contained-button-theme';
+@forward './outlined-button-theme';
+@forward './fab-button-theme';
+
+////
+/// @group themes
+/// @access public
+/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
+/// If only background color is specified, text/icon color
+/// will be assigned automatically to a contrasting color.
+/// Does ___not___ apply for disabled state colors.
+/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
+/// @param {Color} $background [null] - The background color of the button.
+/// @param {Color} $foreground [null] - The text color of the button.
+/// @param {Color} $icon-color [null] - The icon color in the button.
+/// @param {Color} $icon-color-hover [null] - The icon color in the button on hover.
+/// @param {Color} $hover-background [null] - The hover background color of the button.
+/// @param {Color} $hover-foreground [null] - The hover text color of the button.
+/// @param {Color} $focus-background [null] - The focus background color of the button.
+/// @param {Color} $focus-foreground [null] - The focus text color of the button.
+/// @param {Color} $focus-hover-background [null] - The background color on focus hovered state of the button.
+/// @param {Color} $focus-hover-foreground [null] - The text color on focus hovered state of the button.
+/// @param {Color} $focus-visible-background [null] - The focus-visible background color of the button.
+/// @param {Color} $focus-visible-foreground [null] - The focus-visible text color of the button.
+/// @param {Color} $active-background [null] - The active background of the button.
+/// @param {Color} $active-foreground [null] - The active text color of the button.
+/// @param {List} $border-radius [null] - The border radius of the button.
+/// @param {Color} $border-color [null] - The border color of the button.
+/// @param {Color} $hover-border-color [null] - The hover border color of the button.
+/// @param {Color} $focus-border-color [null] - The focus border color of the button.
+/// @param {Color} $focus-visible-border-color [null] - The focus-visible border color of the button.
+/// @param {Color} $active-border-color [null] - The active border color of the button.
+/// @param {Color} $shadow-color [null] - The shadow color of the button.
+/// @param {Color} $resting-shadow [null] - The shadow of the button in its idle state.
+/// @param {Color} $hover-shadow [null] - The shadow of the button in its hover state.
+/// @param {Color} $focus-shadow [null] - The shadow of the button in its focus state.
+/// @param {Color} $active-shadow [null] - The shadow of the button in its active state.
+/// @param {Color} $disabled-background [null] - The disabled background color of the button.
+/// @param {Color} $disabled-foreground [null] - The disabled text color of the button.
+/// @param {Color} $disabled-icon-color [null] - The disabled icon color of the button.
+/// @param {Color} $disabled-border-color [null] - The disabled border color of the button.
+///
+/// @requires $light-material-schema
+///
+/// @example scss Change the background and text colors in contained buttons
+///   $my-button-theme: button-theme(
+///     $foreground: white,
+///     $background: black
+///   );
+///   // Pass the theme to the css-vars() mixin
+///   @include css-vars($my-button-theme);
+@function button-theme(
+    $schema: $light-material-schema,
+
+    $background: null,
+    $foreground: null,
+
+    $hover-background: null,
+    $hover-foreground: null,
+
+    $icon-color: $foreground,
+    $icon-color-hover: $hover-foreground,
+
+    $focus-background: null,
+    $focus-foreground: null,
+
+    $focus-hover-background: null,
+    $focus-hover-foreground: null,
+
+    $focus-visible-background: null,
+    $focus-visible-foreground: null,
+
+    $active-background: null,
+    $active-foreground: null,
+
+    $border-radius: null,
+    $border-color: null,
+    $hover-border-color: null,
+    $focus-border-color: null,
+    $focus-visible-border-color: null,
+    $active-border-color: null,
+
+    $shadow-color: null,
+
+    $resting-shadow: null,
+    $hover-shadow: null,
+    $focus-shadow: null,
+    $active-shadow: null,
+
+    $disabled-background: null,
+    $disabled-foreground: null,
+    $disabled-icon-color: $disabled-foreground,
+    $disabled-border-color: null,
+    $size: null
+) {
+    $name: 'igx-button';
+    $button-schema: ();
+
+    @if map.has-key($schema, 'button') {
+        $button-schema: map.get($schema, 'button');
+    } @else {
+        $button-schema: $schema;
+    }
+
+    $themes: ();
+    $variant: null;
+
+    @each $_name, $_schema in $button-schema {
+        $_resting-shadow: $resting-shadow;
+        $_hover-shadow: $hover-shadow;
+        $_focus-shadow: $focus-shadow;
+        $_active-shadow: $active-shadow;
+        $_border-radius: $border-radius;
+
+        @if not($variant) {
+            $variant: map.get($schema, '_meta', 'theme');
+        }
+
+        @if not($foreground) and $background {
+            $foreground: adaptive-contrast(var(--background));
+        }
+
+        @if not($icon-color) and $background {
+            $icon-color: adaptive-contrast(var(--background));
+        }
+
+        @if not($hover-foreground) and $hover-background {
+            $hover-foreground: adaptive-contrast(var(--hover-background));
+        }
+
+        @if not($icon-color-hover) and $hover-foreground {
+            $icon-color-hover: var(--hover-foreground);
+        }
+
+        @if not($focus-foreground) and $focus-background {
+            $focus-foreground: adaptive-contrast(var(--focus-background));
+        }
+
+        @if not($focus-hover-foreground) and $focus-hover-background {
+            $focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
+        }
+
+        @if not($focus-visible-background) and $focus-background {
+            $focus-visible-background: var(--focus-background);
+        }
+
+        @if not($focus-visible-foreground) and $focus-visible-background {
+            $focus-visible-foreground: adaptive-contrast(var(--focus-visible-background));
+        }
+
+        @if not($focus-visible-border-color) and $focus-border-color {
+            $focus-visible-border-color: var(--focus-border-color);
+        }
+
+        @if not($_resting-shadow) {
+            $resting-elevation: map.get($_schema, 'resting-elevation');
+            $_resting-shadow: elevation($resting-elevation);
+        }
+
+        @if not($_hover-shadow) {
+            $hover-elevation: map.get($_schema, 'hover-elevation');
+            $_hover-shadow: elevation($hover-elevation);
+        }
+
+        @if not($_focus-shadow) {
+            $focus-elevation: map.get($_schema, 'focus-elevation');
+            $_focus-shadow: elevation($focus-elevation);
+        }
+
+        @if not($_active-shadow) {
+            $active-elevation: map.get($_schema, 'active-elevation');
+            $_active-shadow: elevation($active-elevation);
+        }
+
+        $themes: map.merge(
+            $themes,
+            (
+                $_name:
+                    extend(
+                        digest-schema($_schema),
+                        (
+                            name: $name,
+                            background: $background,
+                            foreground: $foreground,
+
+                            icon-color: $icon-color,
+                            icon-color-hover: $icon-color-hover,
+
+                            hover-background: $hover-background,
+                            hover-foreground: $hover-foreground,
+
+                            focus-background: $focus-background,
+                            focus-foreground: $focus-foreground,
+
+                            focus-hover-background: $focus-hover-background,
+                            focus-hover-foreground: $focus-hover-foreground,
+
+                            focus-visible-background: $focus-visible-background,
+                            focus-visible-foreground: $focus-visible-foreground,
+
+                            active-background: $active-background,
+                            active-foreground: $active-foreground,
+
+                            border-radius: $_border-radius,
+                            border-color: $border-color,
+                            hover-border-color: $hover-border-color,
+                            focus-border-color: $focus-border-color,
+                            focus-visible-border-color: $focus-visible-border-color,
+                            active-border-color: $active-border-color,
+
+                            shadow-color: $shadow-color,
+
+                            resting-shadow: $_resting-shadow,
+                            hover-shadow: $_hover-shadow,
+                            focus-shadow: $_focus-shadow,
+                            active-shadow: $_active-shadow,
+
+                            disabled-background: $disabled-background,
+                            disabled-foreground: $disabled-foreground,
+                            disabled-icon-color: $disabled-icon-color,
+                            disabled-border-color: $disabled-border-color,
+                            size: $size,
+                        )
+                    ),
+            )
+        );
+    }
+
+    @return (name: $name, variant: $variant, themes: $themes);
+}