igniteui-angular 20.0.8 → 20.0.9

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, AfterViewInit, AfterViewChecked, OnDestroy, OnChanges, ElementRef, Renderer2, SimpleChanges, EventEmitter, TemplateRef, ApplicationRef, NgZone, Type, ViewContainerRef, OnInit, ChangeDetectorRef, ComponentRef, Injector, DoCheck, IterableDiffers, EmbeddedViewRef, IterableDiffer, TrackByFunction, IterableChanges, QueryList, AfterContentInit, PipeTransform, DestroyRef, AfterContentChecked, EnvironmentInjector, SimpleChange } from '@angular/core';
+import { InjectionToken, AfterViewInit, AfterViewChecked, OnDestroy, OnChanges, ElementRef, Renderer2, SimpleChanges, EventEmitter, TemplateRef, ApplicationRef, NgZone, Type, ViewContainerRef, OnInit, ChangeDetectorRef, ComponentRef, Injector, DoCheck, IterableDiffers, EmbeddedViewRef, IterableDiffer, TrackByFunction, IterableChanges, QueryList, AfterContentChecked, AfterContentInit, PipeTransform, DestroyRef, EnvironmentInjector, SimpleChange } from '@angular/core';
 import * as _angular_forms from '@angular/forms';
 import { FormGroup, ValidationErrors, FormControl, NgModel, NgControl, FormControlName, ControlValueAccessor, Validator, AbstractControl, FormGroupDirective, RequiredValidator, MinValidator, MaxValidator, EmailValidator, MinLengthValidator, MaxLengthValidator, PatternValidator } from '@angular/forms';
 import * as _angular_animations from '@angular/animations';
@@ -4881,8 +4881,11 @@ declare class IgxGridValidationService {
     /**
      * @hidden
      * @internal
+     Wraps the provided path into an array. This way FormGroup.get will return proper result.
+     Otherwise, if the path is a string (e.g. 'address.street'), FormGroup.get will treat it as there is a nested structure
+     and will look for control with a name of 'address' which returns undefined.
      */
-    private getFieldKey;
+    private getFormControlPath;
     /**
      * @hidden
      * @internal
@@ -4898,6 +4901,14 @@ declare class IgxGridValidationService {
      * @internal
      */
     add(rowId: any, form: FormGroup): void;
+    /**
+     * Checks the validity of the native ngControl
+     */
+    isFieldInvalid(formGroup: FormGroup, fieldName: string): boolean;
+    /**
+     * Checks the validity of the native ngControl after edit
+     */
+    isFieldValidAfterEdit(formGroup: FormGroup, fieldName: string): boolean;
     /**
      * @hidden
      * @internal
@@ -7799,6 +7810,7 @@ declare const DropDownActionKey: {
     readonly ESCAPE: "escape";
     readonly ENTER: "enter";
     readonly SPACE: "space";
+    readonly TAB: "tab";
 };
 type DropDownActionKey = (typeof DropDownActionKey)[keyof typeof DropDownActionKey];
 /**
@@ -8718,7 +8730,7 @@ declare const IGX_INPUT_GROUP_TYPE: InjectionToken<IgxInputGroupType>;
  */
 type IgxInputGroupType = (typeof IgxInputGroupEnum)[keyof typeof IgxInputGroupEnum];
 
-declare class IgxInputGroupComponent implements IgxInputGroupBase {
+declare class IgxInputGroupComponent implements IgxInputGroupBase, AfterContentChecked {
     element: ElementRef<HTMLElement>;
     private _inputGroupType;
     private document;
@@ -8895,12 +8907,18 @@ declare class IgxInputGroupComponent implements IgxInputGroupBase {
      */
     get isTypeBox(): boolean;
     /** @hidden @internal */
-    uploadButtonHandler(): void;
-    /** @hidden @internal */
     clearValueHandler(): void;
     /** @hidden @internal */
     get isFileType(): boolean;
     /** @hidden @internal */
+    get isFileInput(): boolean;
+    /** @hidden @internal */
+    get isFileInputFilled(): any;
+    /** @hidden @internal */
+    get isFileInputFocused(): boolean;
+    /** @hidden @internal */
+    get isFileInputDisabled(): boolean;
+    /** @hidden @internal */
     get fileNames(): string;
     /**
      * Returns whether the `IgxInputGroupComponent` type is border.

package/lib/core/styles/base/_index.scss

@@ -5,5 +5,6 @@
 @forward 'igniteui-theming/sass/color';
 @forward 'igniteui-theming/sass/elevations';
 @forward 'igniteui-theming/sass/themes';
+@forward 'igniteui-theming/sass/themes/components';
 @forward 'igniteui-theming/sass/typography' hide typography;
 @forward 'igniteui-theming/sass/utils';

package/lib/core/styles/components/_index.scss

@@ -52,3 +52,4 @@
 @forward 'tooltip/tooltip-theme';
 @forward 'tree/tree-theme';
 @forward 'watermark/watermark-theme';
+@forward 'input/file-input-theme';

package/lib/core/styles/components/avatar/_avatar-theme.scss

@@ -1,65 +1,7 @@
 @use 'sass:map';
 @use '../../base' as *;
-@use '../../themes/schemas' as *;
 @use 'igniteui-theming/sass/animations/easings' 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,
-    ));
-}
-
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.

package/lib/core/styles/components/badge/_badge-theme.scss

@@ -1,78 +1,6 @@
 @use '../../base' as *;
-@use '../../themes/schemas' as *;
 @use 'sass:map';
 
-////
-/// @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,
-    ));
-}
-
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.

package/lib/core/styles/components/banner/_banner-theme.scss

@@ -1,67 +1,5 @@
 @use 'sass:map';
 @use '../../base' as *;
-@use '../../themes/schemas' 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,
-    ));
-}
 
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars

package/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss

@@ -1,107 +1,7 @@
 @use 'sass:map';
-@use 'sass:meta';
 @use '../../base' as *;
-@use '../../themes/schemas' as *;
 @use 'igniteui-theming/sass/animations/easings' 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,
-    ));
-}
-
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.

package/lib/core/styles/components/button/_button-theme.scss

@@ -1,242 +1,8 @@
 @use 'sass:map';
 @use 'sass:meta';
-@use 'sass:color';
 @use 'sass:list';
 @use 'sass:string';
 @use '../../base' as *;
-@use '../../themes/schemas' 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,
-    );
-}
 
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars