diff --git a/package-lock.json b/package-lock.json index cdf320a4e36..735365748d1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ "@types/source-map": "0.5.2", "express": "^5.1.0", "fflate": "^0.8.1", - "igniteui-theming": "^19.1.2", + "igniteui-theming": "^19.2.0", "igniteui-trial-watermark": "^3.1.0", "lodash-es": "^4.17.21", "rxjs": "^7.8.2", @@ -12964,9 +12964,9 @@ } }, "node_modules/igniteui-theming": { - "version": "19.1.2", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-19.1.2.tgz", - "integrity": "sha512-UAIAIm75NKmUPmIyldYM6hlVooY0J+cnOYOCCFveTJ5AhAHkKqNMNqn0x0Qk+uR33ncY1Ayk9FbwpeSZcU1oaA==", + "version": "19.2.0", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-19.2.0.tgz", + "integrity": "sha512-1ZKmr3HYFaRjr2LbksPNKdTc5IxF+NsGbn1a1ufuKYsePFwVpmQYfsns5h1F4j9eM8I3PybxgehvX3t1w/iY2Q==", "license": "MIT", "peerDependencies": { "sass": "^1.69.5" diff --git a/package.json b/package.json index 364a47de2ae..f5b0f61b4d6 100644 --- a/package.json +++ b/package.json @@ -74,7 +74,7 @@ "@types/source-map": "0.5.2", "express": "^5.1.0", "fflate": "^0.8.1", - "igniteui-theming": "^19.1.2", + "igniteui-theming": "^19.2.0", "igniteui-trial-watermark": "^3.1.0", "lodash-es": "^4.17.21", "rxjs": "^7.8.2", diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json index f18942be0ce..6ecd76dc3d0 100644 --- a/projects/igniteui-angular/package.json +++ b/projects/igniteui-angular/package.json @@ -73,7 +73,7 @@ "tslib": "^2.3.0", "igniteui-trial-watermark": "^3.1.0", "lodash-es": "^4.17.21", - "igniteui-theming": "^19.1.2", + "igniteui-theming": "^19.2.0", "@igniteui/material-icons-extended": "^3.1.0" }, "peerDependencies": { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss index 06f9e037937..c01b4128d44 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss +++ b/projects/igniteui-angular/src/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 Simeon Simeonoff -/// @author Marin Popov -//// - -/// 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. diff --git a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss index 305db2063f4..77dfdf071c0 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss +++ b/projects/igniteui-angular/src/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 Simeon Simeonoff -/// @author Marin Popov -//// - -/// 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. diff --git a/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss index dd52a4a12fc..574993cd96a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss +++ b/projects/igniteui-angular/src/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 Marin Popov -//// - -/// 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 diff --git a/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss index 87da896f8a7..cbb9c7412ed 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss +++ b/projects/igniteui-angular/src/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 Simeon Simeonoff -/// @author Marin Popov -//// - -/// 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. diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss index ccf7fb9d749..c90c2a31caf 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss @@ -1,300 +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 Marin Popov -//// - -/// 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 {box-shadow} $shadow [null] - The shadow to be applied for the button group. -/// @param {Color} $item-text-color [null]- The text color for button group items. -/// @param {color} $item-icon-color [null]- The icon color for button group items. -/// @param {Color} $item-background [null] - The background color for button group items . -/// @param {Color} $item-border-color [null] - The border color between button group items. -/// -/// @param {Color} $item-hover-text-color [null] - The hover text color for button group items. -/// @param {Color} $item-hover-icon-color [null] - The hover icon color for button group items. -/// @param {Color} $item-hover-background [null] - The hover background color for button group items. -/// @param {Color} $item-hover-border-color [null] - The hover border color between button group items. -/// -/// @param {Color} $item-focused-text-color [null] - The focused text color for button group items. -/// @param {Color} $item-focused-background [null] - The focused background color for button group items. -/// @param {Color} $item-focused-border-color [null] - The focused border color for an item from the button group. -/// @param {Color} $item-focused-hover-background [null] - The focused & hover background color for button group items. -/// @param {Color} $idle-shadow-color [null] - The outline color of focused button group items. -/// @param {Color} $selected-shadow-color [null] - The outline color of focused/selected button group items. -/// -/// @param {Color} $disabled-text-color [null]- The text/icon color for a disabled item in the button group. -/// @param {Color} $disabled-background-color [null] - The background color for a disabled item in the button group. -/// @param {Color} $item-disabled-border [null] - The border color for a disabled item in the button group. -/// -/// @param {Color} $item-selected-text-color [null]- The text color for a selected item in the button group. -/// @param {Color} $item-selected-icon-color [null]- The icon color for a selected item in the button group. -/// @param {Color} $item-selected-background [null] - The background color for a selected item in the button group. -/// @param {Color} $item-selected-border-color [null] - The border color for a selected item from the button group. -/// -/// @param {Color} $item-selected-hover-text-color [null] - The text color for a selected item in hover state in the button group. -/// @param {Color} $item-selected-hover-icon-color [null] - The icon color for a selected item in hover state in the button group. -/// @param {Color} $item-selected-hover-background [null] - The background color for a selected item in hover state in the button group. -/// @param {Color} $item-selected-hover-border-color [null] - The border color for a selected item in hover state in the button group. -/// @param {Color} $item-selected-focus-background [null] - The background color for a selected item in focused state in the button group. -/// @param {Color} $item-selected-focus-hover-background [null] - The background color for a selected item in focused & hover state in the button group. -/// -/// @param {Color} $disabled-selected-text-color [null] - The disabled text color for a selected item in the button group. -/// @param {Color} $disabled-selected-icon-color [null] - The disabled icon color for a selected item in the button group. -/// @param {Color} $disabled-selected-background [null] - The disabled background color for a selected item in the button group. -/// @param {Color} $disabled-selected-border-color [null] - The disabled border color for a selected item from the button group. -/// -/// @param {List} $border-radius [null] - The border radius used for button-group component. -/// -/// @requires $light-material-schema -/// -/// @example scss Change the background, text, and border colors -/// $my-button-group-theme: button-group-theme( -/// $item-text-color: white, -/// $item-background: rgba(0, 0, 0, .8), -/// $item-border-color: #dadada -/// ); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-button-group-theme); -@function button-group-theme( - $schema: $light-material-schema, - $shadow: null, - - $item-text-color: null, - $item-icon-color: $item-text-color, - $item-background: null, - $item-border-color: null, - - $item-hover-text-color: null, - $item-hover-icon-color: $item-hover-text-color, - $item-hover-background: null, - $item-hover-border-color: null, - - $item-focused-text-color: null, - $item-focused-border-color: null, - $item-focused-background: null, - $item-focused-hover-background: null, - $idle-shadow-color: null, - $selected-shadow-color: null, - $border-radius: null, - - $disabled-text-color: null, - $disabled-background-color: null, - $item-disabled-border: null, - - $item-selected-text-color: null, - $item-selected-icon-color: $item-selected-text-color, - $item-selected-background: null, - $item-selected-border-color: null, - - $item-selected-hover-text-color: null, - $item-selected-hover-icon-color: $item-selected-hover-text-color, - $item-selected-hover-background: null, - $item-selected-hover-border-color: null, - $item-selected-focus-background: null, - $item-selected-focus-hover-background: null, - - $disabled-selected-text-color: null, - $disabled-selected-icon-color: $disabled-selected-text-color, - $disabled-selected-background: null, - $disabled-selected-border-color: null, -) { - $name: 'igx-button-group'; - $selector: 'igx-buttongroup'; - $button-group-schema: (); - - @if map.has-key($schema, 'button-group') { - $button-group-schema: map.get($schema, 'button-group'); - } @else { - $button-group-schema: $schema; - } - - $theme: digest-schema($button-group-schema); - - $border: rem(1px) solid map.get($theme, 'item-selected-border-color'); - - //background colors - @if not($item-hover-background) and $item-background { - $item-hover-background: hsl(from var(--item-background) h s calc(l * 0.9)); - } - - @if not($item-selected-background) and $item-background { - $item-selected-background: hsl(from var(--item-background) h s calc(l * 0.7)); - } - - @if not($item-selected-hover-background) and $item-selected-background { - $item-selected-hover-background: hsl(from var(--item-selected-background) h s calc(l * 1.1)); - } - - @if not($item-selected-focus-background) and $item-selected-background { - $item-selected-focus-background: var(--item-selected-background); - } - - @if not($item-selected-focus-hover-background) and $item-selected-hover-background { - $item-selected-focus-hover-background: var(--item-selected-hover-background); - } - - @if not($item-focused-background) and $item-background { - $item-focused-background: var(--item-hover-background); - } - - @if not($item-focused-hover-background) and $item-hover-background { - $item-focused-hover-background: hsl(from var(--item-focused-background) h s calc(l * 0.9)); - } - - @if not($disabled-background-color) and $item-background { - $disabled-background-color: var(--item-background); - } - - @if not($disabled-selected-background) and $item-selected-background { - $disabled-selected-background: rgba(gray, 0.3); - } - - //border colors - @if not($item-border-color) and $item-background { - $item-border-color: hsl(from var(--item-background) h s calc(l * 0.8)); - } - - @if not($item-hover-border-color) and $item-border-color { - $item-hover-border-color: var(--item-border-color); - } - - @if not($item-focused-border-color) and $item-border-color { - $item-focused-border-color: var(--item-border-color); - } - - @if not($item-selected-border-color) and $item-border-color { - $item-selected-border-color: var(--item-border-color); - } - - @if not($item-selected-hover-border-color) and $item-border-color { - $item-selected-hover-border-color: var(--item-border-color); - } - - @if not($item-disabled-border) and $item-border-color { - $item-disabled-border: var(--item-border-color); - } - - @if not($disabled-selected-border-color) and $item-border-color { - $disabled-selected-border-color: var(--item-border-color); - } - - //text and icon colors - @if not($item-text-color) and $item-background { - $item-text-color: adaptive-contrast(var(--item-background)); - } - - @if not($item-icon-color) and $item-text-color { - $item-icon-color: var(--item-text-color); - } - - @if not($item-hover-text-color) and $item-hover-background { - $item-hover-text-color: adaptive-contrast(var(--item-hover-background)); - } - - @if not($item-hover-icon-color) and $item-hover-text-color { - $item-hover-icon-color: var(--item-hover-text-color); - } - - @if not($item-focused-text-color) and $item-focused-background { - $item-focused-text-color: adaptive-contrast(var(--item-focused-background)); - } - - @if not($item-selected-text-color) and $item-selected-background { - $item-selected-text-color: adaptive-contrast(var(--item-selected-background)); - } - - @if not($item-selected-icon-color) and $item-selected-text-color { - $item-selected-icon-color: var(--item-selected-text-color); - } - - @if not($item-selected-hover-text-color) and $item-selected-hover-background { - $item-selected-hover-text-color: adaptive-contrast(var(--item-selected-hover-background)); - } - - @if not($item-selected-hover-icon-color) and $item-selected-hover-text-color { - $item-selected-hover-icon-color: var(--item-selected-hover-text-color); - } - - @if not($disabled-text-color) and $disabled-background-color { - $disabled-text-color: hsla(from adaptive-contrast(var(--disabled-background-color)) h s l / 0.4); - } - - @if not($disabled-selected-text-color) and $disabled-text-color { - $disabled-selected-text-color: var(--disabled-text-color); - } - - @if not($idle-shadow-color) and $item-background { - $idle-shadow-color: hsla(from var(--item-background) h s l / .5); - } - - @if not($idle-shadow-color) and $selected-shadow-color { - $idle-shadow-color: var(--selected-shadow-color); - } - - @if not($selected-shadow-color) and $idle-shadow-color { - $selected-shadow-color: var(--idle-shadow-color); - } - - @if map.get($button-group-schema, 'elevation') > 0 { - $border: none; - } - - @if not($shadow) { - $elevation: map.get($button-group-schema, 'elevation'); - $shadow: elevation($elevation); - } - - @return extend($theme, ( - name: $name, - selector: $selector, - item-text-color: $item-text-color, - item-icon-color: $item-icon-color, - item-background: $item-background, - item-border-color: $item-border-color, - item-focused-text-color: $item-focused-text-color, - item-focused-background: $item-focused-background, - item-focused-border-color: $item-focused-border-color, - item-focused-hover-background: $item-focused-hover-background, - border-radius: $border-radius, - item-hover-text-color: $item-hover-text-color, - item-hover-icon-color: $item-hover-icon-color, - item-hover-background: $item-hover-background, - item-hover-border-color: $item-hover-border-color, - disabled-text-color:$disabled-text-color, - disabled-background-color:$disabled-background-color, - item-disabled-border: $item-disabled-border, - item-selected-text-color: $item-selected-text-color, - item-selected-icon-color: $item-selected-icon-color, - item-selected-background: $item-selected-background, - item-selected-border-color: $item-selected-border-color, - item-selected-hover-text-color: $item-selected-hover-text-color, - item-selected-hover-icon-color: $item-selected-hover-icon-color, - item-selected-hover-background: $item-selected-hover-background, - item-selected-hover-border-color: $item-selected-hover-border-color, - item-selected-focus-background: $item-selected-focus-background, - item-selected-focus-hover-background: $item-selected-focus-hover-background, - disabled-selected-text-color: $disabled-selected-text-color, - disabled-selected-icon-color: $disabled-selected-icon-color, - disabled-selected-background: $disabled-selected-background, - disabled-selected-border-color: $disabled-selected-border-color, - border: $border, - shadow: $shadow, - idle-shadow-color: $idle-shadow-color, - selected-shadow-color: $selected-shadow-color - )); -} - /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss index e29b19afdf0..26ba2b0a0f9 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss +++ b/projects/igniteui-angular/src/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 Marin Popov -/// @author Simeon Simeonoff -//// - -/// 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 diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_contained-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_contained-button-theme.scss deleted file mode 100644 index 53577249ca6..00000000000 --- a/projects/igniteui-angular/src/lib/core/styles/components/button/_contained-button-theme.scss +++ /dev/null @@ -1,302 +0,0 @@ -@use 'sass:map'; -@use 'sass:meta'; -@use 'sass:color'; -@use 'sass:list'; -@use 'sass:string'; -@use '../../base' as *; -@use '../../themes/schemas' as *; - -//// -/// @group themes -/// @access public -/// @author Marin Popov -/// @author Simeon Simeonoff -//// - -/// 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 focus 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: contained-button-theme( -/// $foreground: white, -/// $background: black -/// ); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-button-theme); -@function contained-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-contained-button'; - $button-schema: (); - - @if map.has-key($schema, 'button') { - $button-schema: map.get($schema, 'button'); - @if map.has-key($button-schema, 'contained') { - $button-schema: map.get($button-schema, 'contained'); - } @else { - $button-schema: $schema; - } - } - - $theme: digest-schema($button-schema); - $variant: map.get($schema, '_meta', 'theme'); - - @if not($hover-foreground) and $foreground { - $hover-foreground: var(--foreground); - } - - @if not($focus-foreground) and $foreground { - $focus-foreground: var(--foreground); - } - - @if not($focus-hover-foreground) and $foreground { - $focus-hover-foreground: var(--foreground); - } - - @if not($focus-visible-foreground) and $foreground { - $focus-visible-foreground: var(--foreground); - } - - @if not($active-foreground) and $foreground { - $active-foreground: var(--foreground); - } - - @if not($icon-color-hover) and $icon-color { - $icon-color-hover: var(--icon-color); - } - - @if not($foreground) and $background { - $foreground: adaptive-contrast(var(--background)); - } - - @if not($icon-color) and $background { - $icon-color: adaptive-contrast(var(--background)); - } - - @if $variant == 'indigo' { - @if not($hover-background) and $background { - $hover-background: hsl(from var(--background) h s calc(l * 1.08)); - } - } @else { - @if not($hover-background) and $background { - $hover-background: hsl(from var(--background) h s calc(l * 1.05)); - } - } - - @if $variant == 'indigo' { - @if not($focus-background) and $background { - $focus-background: var(--background); - } - } @else { - @if not($focus-background) and $background { - $focus-background: hsl(from var(--background) h s calc(l * 1.1)); - } - } - - @if not($hover-foreground) and $hover-background { - $hover-foreground: adaptive-contrast(var(--hover-background)); - } - - @if not($icon-color-hover) and $hover-background { - $icon-color-hover: adaptive-contrast(var(--hover-background)); - } - - @if not($focus-foreground) and $focus-background { - $focus-foreground: adaptive-contrast(var(--focus-background)); - } - - @if not($focus-hover-background) and $hover-background { - $focus-hover-background: var(--hover-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 $variant == 'fluent' { - @if not($focus-visible-border-color) and $focus-visible-foreground { - $focus-visible-border-color: var(--focus-visible-foreground); - } - } - - @if $variant == 'fluent' or $variant == 'bootstrap' { - @if not($active-background) and $background { - $active-background: hsl(from var(--background) h s calc(l * 0.9)); - } - } @else if $variant == 'material' { - @if not($active-background) and $focus-background { - $active-background: var(--focus-background); - } - } @else { - @if not($active-background) and $hover-background { - $active-background: var(--hover-background); - } - } - - @if not($active-foreground) and $active-background { - $active-foreground: adaptive-contrast(var(--active-background)); - } - - @if $variant == 'bootstrap' or $variant == 'indigo' { - @if not($shadow-color) and $focus-visible-background { - $shadow-color: hsla( - from var(--focus-visible-background) h s l / 0.5 - ); - } - - @if not($disabled-background) and $background { - $disabled-background: hsla(from var(--background) h s l / 0.5); - } - - @if not($disabled-icon-color) and $disabled-foreground { - $disabled-icon-color: var(--disabled-foreground); - } - - @if not($disabled-foreground) and $disabled-background { - $disabled-foreground: hsla(from adaptive-contrast(var(--disabled-background)) h s l / 0.5); - } - - @if not($disabled-icon-color) and $disabled-background { - $disabled-icon-color: hsla(from adaptive-contrast(var(--disabled-background)) h s l / 0.5); - } - } - - @if not($resting-shadow) { - $resting-elevation: map.get($button-schema, 'resting-elevation'); - $resting-shadow: elevation($resting-elevation); - } - - @if not($hover-shadow) { - $hover-elevation: map.get($button-schema, 'hover-elevation'); - $hover-shadow: elevation($hover-elevation); - } - - @if not($focus-shadow) { - $focus-elevation: map.get($button-schema, 'focus-elevation'); - $focus-shadow: elevation($focus-elevation); - } - - @if not($active-shadow) { - $active-elevation: map.get($button-schema, 'active-elevation'); - $active-shadow: elevation($active-elevation); - } - - @return extend( - $theme, - ( - 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, - ) - ); -} diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_fab-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_fab-button-theme.scss deleted file mode 100644 index c42835c4037..00000000000 --- a/projects/igniteui-angular/src/lib/core/styles/components/button/_fab-button-theme.scss +++ /dev/null @@ -1,296 +0,0 @@ -@use 'sass:map'; -@use 'sass:meta'; -@use 'sass:color'; -@use 'sass:list'; -@use 'sass:string'; -@use '../../base' as *; -@use '../../themes/schemas' as *; - -//// -/// @group themes -/// @access public -/// @author Marin Popov -/// @author Simeon Simeonoff -//// - -/// 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 focus 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 fab buttons -/// $my-button-theme: fab-button-theme( -/// $foreground: white, -/// $background: black -/// ); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-button-theme); -@function fab-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-fab-button'; - $button-schema: (); - - @if map.has-key($schema, 'button') { - $button-schema: map.get($schema, 'button'); - @if map.has-key($button-schema, 'fab') { - $button-schema: map.get($button-schema, 'fab'); - } @else { - $button-schema: $schema; - } - } - - $theme: digest-schema($button-schema); - $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 $variant == 'indigo' { - @if not($hover-background) and $background { - $hover-background: hsl(from var(--background) h s calc(l * 1.08)); - } - } @else { - @if not($hover-background) and $background { - $hover-background: hsl(from var(--background) h s calc(l * 1.05)); - } - } - - @if $variant == 'indigo' { - @if not($focus-background) and $background { - $focus-background: var(--background); - } - } @else { - @if not($focus-background) and $background { - $focus-background: hsl(from var(--background) h s calc(l * 1.1)); - } - } - - @if not($hover-foreground) and $hover-background { - $hover-foreground: if( - $foreground, - var(--foreground), - adaptive-contrast(var(--hover-background)) - ); - } - - @if not($icon-color-hover) and $hover-background { - $icon-color-hover: if( - $icon-color, - var(--icon-color), - adaptive-contrast(var(--hover-background)) - ); - } - - @if not($focus-foreground) and $focus-background { - $focus-foreground: if( - $foreground, - var(--foreground), - adaptive-contrast(var(--focus-background)) - ); - } - - @if not($focus-hover-background) and $hover-background { - $focus-hover-background: var(--hover-background); - } - - @if not($focus-hover-foreground) and $focus-hover-background { - $focus-hover-foreground: if( - $foreground, - var(--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 $variant == 'fluent' { - @if not($focus-visible-border-color) and $focus-visible-foreground { - $focus-visible-border-color: var(--focus-visible-foreground); - } - } - - @if $variant == 'fluent' or $variant == 'bootstrap' { - @if not($active-background) and $background { - $active-background: hsl(from var(--background) h s calc(l * 0.9)); - } - } @else if $variant == 'material' { - @if not($active-background) and $focus-background { - $active-background: var(--focus-background); - } - } @else { - @if not($active-background) and $hover-background { - $active-background: var(--hover-background); - } - } - - @if not($active-foreground) and $active-background { - $active-foreground: adaptive-contrast(var(--active-background)); - } - - @if $variant == 'bootstrap' or $variant == 'indigo' { - @if not($shadow-color) and $focus-visible-background { - $shadow-color: hsla( - from var(--focus-visible-background) h s l / 0.5 - ); - } - - @if not($disabled-background) and $background { - $disabled-background: hsla(from var(--background) h s l / 0.5); - } - - @if not($disabled-icon-color) and $disabled-foreground { - $disabled-icon-color: var(--disabled-foreground); - } - - @if not($disabled-foreground) and $disabled-background { - $disabled-foreground: hsla(from adaptive-contrast(var(--disabled-background)) h s l / 0.5); - } - - @if not($disabled-icon-color) and $disabled-background { - $disabled-icon-color: hsla(from adaptive-contrast(var(--disabled-background)) h s l / 0.5); - } - } - - @if not($resting-shadow) { - $resting-elevation: map.get($button-schema, 'resting-elevation'); - $resting-shadow: elevation($resting-elevation); - } - - @if not($hover-shadow) { - $hover-elevation: map.get($button-schema, 'hover-elevation'); - $hover-shadow: elevation($hover-elevation); - } - - @if not($focus-shadow) { - $focus-elevation: map.get($button-schema, 'focus-elevation'); - $focus-shadow: elevation($focus-elevation); - } - - @if not($active-shadow) { - $active-elevation: map.get($button-schema, 'active-elevation'); - $active-shadow: elevation($active-elevation); - } - - @return extend( - $theme, - ( - 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, - ) - ); -} diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_flat-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_flat-button-theme.scss deleted file mode 100644 index 8a9a5c98779..00000000000 --- a/projects/igniteui-angular/src/lib/core/styles/components/button/_flat-button-theme.scss +++ /dev/null @@ -1,356 +0,0 @@ -@use 'sass:map'; -@use 'sass:meta'; -@use 'sass:color'; -@use 'sass:list'; -@use 'sass:string'; -@use '../../base' as *; -@use '../../themes/schemas' as *; - -//// -/// @group themes -/// @access public -/// @author Marin Popov -/// @author Simeon Simeonoff -//// - -/// 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 focus 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 text colors in flat buttons -/// $my-button-theme: flat-button-theme( -/// $foreground: black, -/// ); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-button-theme); -@function flat-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-flat-button'; - $button-schema: (); - - @if map.has-key($schema, 'button') { - $button-schema: map.get($schema, 'button'); - - @if map.has-key($button-schema, 'flat') { - $button-schema: map.get($button-schema, 'flat'); - } @else { - $button-schema: $schema; - } - } - - $theme: digest-schema($button-schema); - $variant: map.get($schema, '_meta', 'theme'); - - @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($active-foreground) and $active-background { - $active-foreground: adaptive-contrast(var(--active-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 $variant == 'material' or $variant == 'fluent' { - @if not($hover-background) and $foreground { - $hover-background: hsla(from var(--foreground) h s l / 0.08); - } - - @if not($focus-background) and $foreground { - $focus-background: hsla(from var(--foreground) h s l / 0.32); - } - - @if not($focus-hover-background) and $foreground { - $focus-hover-background: hsla(from var(--foreground) h s l / 0.24); - } - - @if not($active-background) and $foreground { - $active-background: hsla(from var(--foreground) h s l / 0.16); - } - - @if not($hover-foreground) and $hover-background { - $hover-foreground: hsla(from var(--hover-background) h s l / 1); - } - - @if not($icon-color-hover) and $hover-foreground { - $icon-color-hover: var(--hover-foreground); - } - - @if not($focus-foreground) and $focus-background { - $focus-foreground: hsla(from var(--focus-background) h s l / 1); - } - - @if not($focus-hover-foreground) and $focus-hover-background { - $focus-hover-foreground: hsla( - from var(--focus-hover-background) h s l / 1 - ); - } - - @if not($active-foreground) and $active-background { - $active-foreground: hsla(from var(--active-background) h s l / 1); - } - - @if $variant == 'material' { - @if not($focus-visible-background) and $foreground { - $focus-visible-background: hsla( - from var(--foreground) h s l / 0.16 - ); - } - - @if not($focus-visible-foreground) and $focus-visible-background { - $focus-visible-foreground: hsla( - from var(--focus-visible-background) h s l / 1 - ); - } - } @else { - @if not($focus-visible-foreground) and $focus-foreground { - $focus-visible-foreground: var(--focus-foreground); - } - } - - @if $variant == 'fluent' { - @if not($focus-visible-border-color) and $focus-visible-foreground { - $focus-visible-border-color: var(--focus-visible-foreground); - } - } - } - - @if $variant == 'indigo' { - @if not($hover-background) and $foreground { - $hover-background: hsla(from var(--foreground) h s l / 0.08); - } - - @if not($focus-background) and $foreground { - $focus-background: hsla(from var(--foreground) h s l / 0.08); - } - - @if not($focus-hover-background) and $foreground { - $focus-hover-background: hsla(from var(--foreground) h s l / 0.08); - } - - @if not($active-background) and $foreground { - $active-background: hsla(from var(--foreground) h s l / 0.08); - } - } - - @if $variant == 'bootstrap' or $variant == 'indigo' { - @if not($hover-foreground) and $foreground { - $hover-foreground: hsl(from var(--foreground) h s calc(l * 0.9)); - } - - @if not($icon-color-hover) and $hover-foreground { - $icon-color-hover: var(--hover-foreground); - } - - @if $variant == 'bootstrap' { - @if not($focus-foreground) and $foreground { - $focus-foreground: hsl( - from var(--foreground) h s calc(l * 0.7) - ); - } - } @else { - @if not($focus-foreground) and $foreground { - $focus-foreground: hsl( - from var(--foreground) h s calc(l * 0.9) - ); - } - } - - @if not($focus-hover-foreground) and $foreground { - $focus-hover-foreground: hsl( - from var(--foreground) h s calc(l * 0.9) - ); - } - - @if not($focus-visible-foreground) and $foreground { - $focus-visible-foreground: var(--foreground); - } - - @if not($disabled-foreground) and $foreground { - $disabled-foreground: hsl(from (var(--foreground) h s l / 0.5)); - } - - @if not($disabled-icon-color) and $disabled-foreground { - $disabled-icon-color: var(--disabled-foreground); - } - - @if $variant == 'bootstrap' { - @if not($active-foreground) and $foreground { - $active-foreground: hsl( - from var(--foreground) h s calc(l * 0.7) - ); - } - - @if not($shadow-color) and $focus-visible-foreground { - $shadow-color: hsla( - from var(--focus-visible-foreground) h s l / 0.5 - ); - } - } @else { - @if not($active-foreground) and $foreground { - $active-foreground: hsl( - from var(--foreground) h s calc(l * 0.9) - ); - } - - @if not($shadow-color) and $focus-visible-foreground { - $shadow-color: hsla( - from var(--focus-visible-foreground) h s l / 0.2 - ); - } - } - } - - @if not($resting-shadow) { - $resting-elevation: map.get($button-schema, 'resting-elevation'); - $resting-shadow: elevation($resting-elevation); - } - - @if not($hover-shadow) { - $hover-elevation: map.get($button-schema, 'hover-elevation'); - $hover-shadow: elevation($hover-elevation); - } - - @if not($focus-shadow) { - $focus-elevation: map.get($button-schema, 'focus-elevation'); - $focus-shadow: elevation($focus-elevation); - } - - @if not($active-shadow) { - $active-elevation: map.get($button-schema, 'active-elevation'); - $active-shadow: elevation($active-elevation); - } - - @return extend( - $theme, - ( - 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, - ) - ); -} diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_outlined-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_outlined-button-theme.scss deleted file mode 100644 index 895b516e89f..00000000000 --- a/projects/igniteui-angular/src/lib/core/styles/components/button/_outlined-button-theme.scss +++ /dev/null @@ -1,419 +0,0 @@ -@use 'sass:map'; -@use 'sass:meta'; -@use 'sass:color'; -@use 'sass:list'; -@use 'sass:string'; -@use '../../base' as *; -@use '../../themes/schemas' as *; - -//// -/// @group themes -/// @access public -/// @author Marin Popov -/// @author Simeon Simeonoff -//// - -/// 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 focus 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 text colors in outlined buttons -/// $my-button-theme: outlined-button-theme( -/// $foreground: black, -/// ); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-button-theme); -@function outlined-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-outlined-button'; - $button-schema: (); - - @if map.has-key($schema, 'button') { - $button-schema: map.get($schema, 'button'); - @if map.has-key($button-schema, 'outlined') { - $button-schema: map.get($button-schema, 'outlined'); - } @else { - $button-schema: $schema; - } - } - - $theme: digest-schema($button-schema); - $variant: map.get($schema, '_meta', 'theme'); - - @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($active-foreground) and $active-background { - $active-foreground: adaptive-contrast(var(--active-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 $variant == 'material' or $variant == 'fluent' { - @if not($hover-background) and $foreground { - $hover-background: hsla(from var(--foreground) h s l / 0.08); - } - - @if not($focus-background) and $foreground { - $focus-background: hsla(from var(--foreground) h s l / 0.32); - } - - @if not($focus-hover-background) and $foreground { - $focus-hover-background: hsla(from var(--foreground) h s l / 0.24); - } - - @if not($active-background) and $foreground { - $active-background: hsla(from var(--foreground) h s l / 0.16); - } - - @if not($hover-foreground) and $hover-background { - $hover-foreground: hsla(from var(--hover-background) h s l / 1); - } - - @if not($focus-foreground) and $focus-background { - $focus-foreground: hsla(from var(--focus-background) h s l / 1); - } - - @if not($focus-hover-foreground) and $focus-hover-background { - $focus-hover-foreground: hsla( - from var(--focus-hover-background) h s l / 1 - ); - } - - @if not($active-foreground) and $active-background { - $active-foreground: hsla(from var(--active-background) h s l / 1); - } - - @if $variant == 'material' { - @if not($focus-visible-background) and $foreground { - $focus-visible-background: hsla( - from var(--foreground) h s l / 0.16 - ); - } - - @if not($focus-visible-foreground) and $focus-visible-background { - $focus-visible-foreground: hsla( - from var(--focus-visible-background) h s l / 1 - ); - } - } @else { - @if not($focus-visible-foreground) and $focus-foreground { - $focus-visible-foreground: var(--focus-foreground); - } - } - - @if $variant == 'fluent' { - @if not($focus-visible-border-color) and $focus-visible-foreground { - $focus-visible-border-color: var(--focus-visible-foreground); - } - } - } - - @if $variant == 'indigo' { - @if not($hover-background) and $foreground { - $hover-background: hsla(from var(--foreground) h s l / 0.08); - } - - @if not($focus-background) and $foreground { - $focus-background: hsla(from var(--foreground) h s l / 0.08); - } - - @if not($focus-hover-background) and $foreground { - $focus-hover-background: hsla(from var(--foreground) h s l / 0.08); - } - - @if not($active-background) and $foreground { - $active-background: hsla(from var(--foreground) h s l / 0.08); - } - - @if not($hover-foreground) and $foreground { - $hover-foreground: hsl(from var(--foreground) h s calc(l * 0.9)); - } - - @if not($focus-foreground) and $foreground { - $focus-foreground: hsl(from var(--foreground) h s calc(l * 0.9)); - } - - @if not($focus-hover-foreground) and $foreground { - $focus-hover-foreground: hsl( - from var(--foreground) h s calc(l * 0.9) - ); - } - - @if not($focus-visible-foreground) and $foreground { - $focus-visible-foreground: var(--foreground); - } - - @if not($active-foreground) and $foreground { - $active-foreground: hsl(from var(--foreground) h s calc(l * 0.9)); - } - - @if not($shadow-color) and $focus-visible-foreground { - $shadow-color: hsla( - from var(--focus-visible-foreground) h s l / 0.2 - ); - } - } - - @if $variant == 'bootstrap' { - @if not($hover-background) and $foreground { - $hover-background: var(--foreground); - } - - @if not($hover-foreground) and $hover-background { - $hover-foreground: adaptive-contrast(var(--hover-background)); - } - - @if not($focus-background) and $foreground { - $focus-background: hsl(from var(--foreground) h s calc(l * 0.8)); - } - - @if not($focus-foreground) and $focus-background { - $focus-foreground: adaptive-contrast(var(--focus-background)); - } - - @if not($focus-hover-background) and $hover-background { - $focus-hover-background: hsl( - from var(--hover-background) h s calc(l * 0.9) - ); - } - - @if not($focus-hover-foreground) and $focus-hover-background { - $focus-hover-foreground: adaptive-contrast( - var(--focus-hover-background) - ); - } - - @if not($focus-visible-background) and $hover-background { - $focus-visible-background: var(--hover-background); - } - - @if not($focus-visible-foreground) and $focus-visible-background { - $focus-visible-foreground: adaptive-contrast( - var(--focus-visible-background) - ); - } - - @if not($active-background) and $foreground { - $active-background: hsl(from var(--foreground) h s calc(l * 0.8)); - } - - @if not($active-foreground) and $active-background { - $active-foreground: adaptive-contrast(var(--active-background)); - } - - @if not($disabled-foreground) and $foreground { - $disabled-foreground: hsl(from (var(--foreground) h s l / 0.5)); - } - - @if not($disabled-icon-color) and $disabled-foreground { - $disabled-icon-color: var(--disabled-foreground); - } - - @if not($disabled-border-color) and $disabled-foreground { - $disabled-border-color: var(--disabled-foreground); - } - - @if not($hover-border-color) and $hover-background { - $hover-border-color: var(--hover-background); - } - - @if not($focus-border-color) and $focus-background { - $focus-border-color: var(--focus-background); - } - - @if not($focus-visible-border-color) and $focus-visible-background { - $focus-visible-border-color: var(--focus-visible-background); - } - - @if not($active-border-color) and $active-background { - $active-border-color: var(--active-background); - } - - @if not($shadow-color) and $focus-visible-background { - $shadow-color: hsla( - from var(--focus-visible-background) h s l / 0.5 - ); - } - } - - @if not($icon-color-hover) and $hover-foreground { - $icon-color-hover: var(--hover-foreground); - } - - @if variant != 'bootstrap' { - @if not($border-color) and $foreground { - $border-color: var(--foreground); - } - - @if not($hover-border-color) and $hover-foreground { - $hover-border-color: var(--hover-foreground); - } - - @if not($focus-border-color) and $focus-foreground { - $focus-border-color: var(--focus-foreground); - } - - @if not($focus-visible-border-color) and $focus-visible-foreground { - $focus-visible-border-color: var(--focus-visible-foreground); - } - - @if not($active-border-color) and $active-foreground { - $active-border-color: var(--active-foreground); - } - } - - @if not($resting-shadow) { - $resting-elevation: map.get($button-schema, 'resting-elevation'); - $resting-shadow: elevation($resting-elevation); - } - - @if not($hover-shadow) { - $hover-elevation: map.get($button-schema, 'hover-elevation'); - $hover-shadow: elevation($hover-elevation); - } - - @if not($focus-shadow) { - $focus-elevation: map.get($button-schema, 'focus-elevation'); - $focus-shadow: elevation($focus-elevation); - } - - @if not($active-shadow) { - $active-elevation: map.get($button-schema, 'active-elevation'); - $active-shadow: elevation($active-elevation); - } - - @return extend( - $theme, - ( - 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, - ) - ); -} diff --git a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss index 712da294ecf..5a8d23731e8 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss @@ -1,1081 +1,6 @@ @use 'sass:map'; -@use 'sass:meta'; @use 'sass:math'; @use '../../base' as *; -@use '../../themes/schemas' as *; - -//// -/// @group themes -/// @access public -/// @author Simeon Simeonoff -/// @author Marin Popov -//// - -/// If only header background color is specified, that color will be -/// used as the leading color for all accented elements, such as: -/// - current date color -/// - selected date background -/// - picker elements hover colors -/// - year/month hover/selected colors -/// If only background colors are specified, text/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} $content-foreground [null] - The foreground of the days, months and years views. -/// @param {Color} $content-background [null] - The background of the days, months and years views. -/// @param {Color} $border-size [null] - The border size of all calendar views. -/// -/// @param {Color} $header-foreground [null] - The header foreground. -/// @param {Color} $header-background [null] - The header background. -/// -/// @param {Color} $picker-foreground [null]- The foreground of the month and year pickers. -/// @param {Color} $picker-background [null] - The background of the month and year pickers. -/// @param {Color} $picker-hover-foreground [null]- The :hover color of the month and year pickers. -/// -/// @param {Color} $weekday-color [null] - The color for weekday labels. -/// @param {Color} $inactive-color [null] - The color for previous and next month dates (visible only if [hideOutsideDays] is set to false(default)). -/// @param {Color} $weekend-color [null] - The color for weekend days. -/// -/// @param {Color} $week-number-foreground [null] - The foreground of the week number column. -/// @param {Color} $week-number-background [null] - The background of the week number column. -/// -/// @param {Color} $ym-selected-current-hover-foreground [null] - The :hover foreground for the current selected month/year. -/// @param {Color} $ym-selected-current-hover-background [null] - The :hover background on hover for the current month/year. -/// -/// @param {Color} $navigation-color [null] - The color of the icon button responsible for month navigation. -/// @param {Color} $navigation-hover-color [null] - The :hover color of the icon button responsible for month navigation. -/// @param {Color} $navigation-focus-color [null] - The :focus color of the icon button responsible for month navigation. -/// -/// @param {Color} $ym-hover-foreground [null] - The :hover foreground of the month/year. -/// @param {Color} $ym-hover-background [null] - The :hover background of the month/year. -/// -/// @param {Color} $ym-current-foreground [null]- The foreground of the current month/year. -/// @param {Color} $ym-current-background [null]- The background of the current month/year. -/// @param {Color} $ym-current-hover-foreground [null]- The :hover foreground of the current month/year. -/// @param {Color} $ym-current-hover-background [null]- The :hover background of the current month/year. -/// -/// @param {Color} $ym-selected-foreground [null]- The foreground color of the selected month/year. -/// @param {Color} $ym-selected-background [null]- The background color of the selected month/year. -/// @param {Color} $ym-selected-hover-foreground [null] - The :hover foreground color of the currently selected month/year. -/// @param {Color} $ym-selected-hover-background [null] - The :hover background color of the currently selected month/year. -/// -/// @param {Color} $ym-selected-current-foreground [null]- The foreground color of the selected current month/year. -/// @param {Color} $ym-selected-current-background [null]- The background color of the selected current month/year. -/// @param {Color} $ym-selected-current-hover-foreground [null] - The :hover foreground color of the current selected month/year. -/// @param {Color} $ym-selected-current-hover-background [null] - The :hover background color of the current selected month/year. -/// -/// @param {Color} $ym-current-outline-color [null] - The outline color of the current month/year. -/// @param {Color} $ym-current-outline-hover-color [null] - The :hover outline color of the current month/year. -/// @param {Color} $ym-current-outline-focus-color [null] - The :focus outline color of the current month/year. -/// -/// @param {Color} $ym-selected-outline-color [null] - The outline color of the selected month/year. -/// @param {Color} $ym-selected-hover-outline-color [null] - The :hover outline color of the selected month/year. -/// @param {Color} $ym-selected-focus-outline-color [null] - The :focus outline color of the selected month/year. -/// -/// @param {Color} $ym-selected-current-outline-color [null] - The outline color of the selected current month/year. -/// @param {Color} $ym-selected-current-outline-hover-color [null] - The :hover outline color of the selected current month/year. -/// @param {Color} $ym-selected-current-outline-focus-color [null] - The :focus outline color of the selected current month/year. -/// -/// @param {Color} $date-hover-foreground [null] - The :hover foreground in idle state of a date. -/// @param {Color} $date-hover-background [null] - The :hover background in idle state of a date. -/// @param {Color} $date-focus-foreground [null] - The :focus foreground in idle state of a date. -/// @param {Color} $date-focus-background [null] - The :focus background in idle state of a date. -/// -/// @param {Color} $date-selected-foreground [null] - The text color for the selected date. -/// @param {Color} $date-selected-background [null] - The background color for the selected date. -/// @param {Color} $date-selected-hover-background [null] - The hover background color for the selected date. -/// @param {Color} $date-selected-focus-background [null] - The focus background color for the selected date. -/// @param {Color} $date-selected-hover-foreground [null] - The hover text color for the selected date. -/// @param {Color} $date-selected-focus-foreground [null] - The focus text color for the selected date. -/// @param {Color} $date-selected-current-background [null] - The background color for the selected/current date. -/// @param {Color} $date-selected-current-hover-background [null] - The hover background color for the selected/current date. -/// @param {Color} $date-selected-current-focus-background [null] - The focus background color for the selected/current date. -/// @param {Color} $date-selected-current-foreground [null] - The text color for the selected/current date. -/// @param {Color} $date-selected-current-hover-foreground [null] - The hover text color for the selected/current date. -/// @param {Color} $date-selected-current-focus-foreground [null] - The focus text color for the selected/current date. -/// -/// @param {Color} $date-selected-range-foreground [null] - The foreground of the dates in the selected range. -/// @param {Color} $date-selected-range-background [null] - The background of the dates in the selected range. -/// @param {Color} $date-selected-range-hover-foreground [null] - The :hover foreground of the dates in the selected range. -/// @param {Color} $date-selected-range-hover-background [null] - The :hover background of the dates in the selected range. -/// @param {Color} $date-selected-range-focus-foreground [null] - The :focus foreground of the dates in the selected range. -/// @param {Color} $date-selected-range-focus-background [null] - The :focus background of the dates in the selected range. -/// -/// @param {Color} $date-selected-current-range-foreground [null] - The foreground of the current date in the selected range. -/// @param {Color} $date-selected-current-range-background [null] - The background of the current date in the selected range. -/// @param {Color} $date-selected-current-range-hover-foreground [null] - The :hover foreground of the current date in the selected range. -/// @param {Color} $date-selected-current-range-hover-background [null] - The :hover background of the current date in the selected range. -/// @param {Color} $date-selected-current-range-focus-foreground [null] - The :focus foreground of the current date in the selected range. -/// @param {Color} $date-selected-current-range-focus-background [null] - The :focus background of the current date in the selected range. -/// -/// @param {Color} $date-selected-special-border-color: [null] - The border color of the selected special date, -/// @param {Color} $date-selected-special-hover-border-color: [null] - The :hover border color of the selected special date, -/// @param {Color} $date-selected-special-focus-border-color: [null] - The :focus border color of the selected special date, -/// -/// @param {Color} $date-current-foreground [null] - The foreground of the current date. -/// @param {Color} $date-current-background [null] - The background color of the current date. -/// @param {Color} $date-current-hover-foreground [null] - The :hover text color of the current date. -/// @param {Color} $date-current-hover-background [null] - The :hover background color of the current date. -/// @param {Color} $date-current-focus-foreground [null] - The :focus text color of the current date. -/// @param {Color} $date-current-focus-background [null] - The :focus background color of the current date. -/// -/// @param {Color} $date-special-background [null] - The background of the dates marked as special. -/// @param {Color} $date-special-foreground [null] - The foreground of the dates marked as special. -/// @param {Color} $date-special-hover-background [null] - The background of the dates marked as special. -/// @param {Color} $date-special-hover-foreground [null] - The foreground of the dates marked as special. -/// @param {Color} $date-special-focus-background [null] - The background of the dates marked as special. -/// @param {Color} $date-special-focus-foreground [null] - The foreground of the dates marked as special. -/// @param {Color} $date-special-border-color [null] - The outline of the dates marked as special. -/// -/// @param {Color} $date-special-range-background [null] - The background of the dates inside a range and marked as special. -/// @param {Color} $date-special-range-hover-background [null] - The :hover background of the dates inside a range and marked as special. -/// @param {Color} $date-special-range-focus-background [null] - The :focus background of the dates inside a range and marked as special. -/// @param {Color} $date-special-range-foreground [null] - The foreground of the dates inside a range and marked as special. -/// @param {Color} $date-special-range-border-color [null] - The outline of the dates inside a range and marked as special. -/// -/// @param {Color} $border-color [null] - The calendar border color. -/// -/// @param {Color} $date-border-color [null] - The border color of the date. -/// @param {Color} $date-hover-border-color [null] - The :hover border color of the date. -/// @param {Color} $date-focus-border-color [null] - The :focus border color of the date. -/// -/// @param {Color} $date-selected-border-color [null] - The border color of the selected date. -/// @param {Color} $date-selected-hover-border-color [null] - The :hover border color of the selected date. -/// @param {Color} $date-selected-focus-border-color [null] - The :focus border color of the selected date. -/// @param {Color} $date-current-border-color [null] - The border color of the current date. -/// @param {Color} $date-current-hover-border-color [null] - The :hover border color of the current date. -/// @param {Color} $date-current-focus-border-color [null] - The :focus border color of the current date. -/// @param {Color} $date-selected-current-border-color [null] - The border color of the selected current date. -/// @param {Color} $date-selected-current-hover-border-color [null] - The :hover border color of the selected current date. -/// @param {Color} $date-selected-current-focus-border-color [null] - The :focus border color of the selected current date. -/// -/// @param {Color} $date-range-border-color [null] - The border color of range selection. -/// @param {Color} $date-range-preview-border-color [null] - The border color of the range selection in preview state(visible before selecting the end of the range). -/// @param {Color} $date-disabled-foreground [color: ('gray', 500, .5)] - The foreground color of disabled dates. -/// @param {Color} $date-disabled-range-foreground [color: ('gray', 500)] - The foreground color of disabled dates. -/// @param {Number} $size [null] - The size of the days, months, and years views. -/// @param {List} $border-radius [null] - The border radius used for the calendar. -/// @param {List} $date-border-radius [null] - The border radius used for the date. -/// @param {List} $date-range-border-radius [null] - The border radius used for the date range selection. -/// @param {List} $date-current-border-radius [null] - The border radius used for the current date . -/// @param {List} $date-special-border-radius [null] - The border radius used for the special date. -/// @param {List} $ym-border-radius [null] - The border radius used for the month/year. -/// -/// @param {Color} $actions-divider-color [null] - The border color used for the date-picker actions divider. -/// -/// @requires $light-material-schema -/// -/// @example scss Change the header and content background colors -/// $my-calendar-theme: calendar-theme( -/// $header-background: purple, -/// $content-background: black -/// ); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-calendar-theme); -@function calendar-theme( - $schema: $light-material-schema, - - $content-background: null, - $content-foreground: null, - $border-color: null, - - $header-background: null, - $header-foreground: null, - - $picker-foreground: null, - $picker-background: null, - $picker-hover-foreground: null, - $picker-focus-foreground: null, - - $weekday-color: null, - $weekend-color: null, - $inactive-color: null, - - $week-number-foreground: null, - $week-number-background: null, - - $ym-selected-current-hover-foreground: null, - $ym-selected-current-hover-background: null, - - $navigation-color: null, - $navigation-hover-color: null, - $navigation-focus-color: null, - - $ym-hover-foreground: null, - $ym-hover-background: null, - - $ym-current-foreground: null, - $ym-current-background: null, - $ym-current-hover-foreground: null, - $ym-current-hover-background: null, - - $ym-selected-current-foreground: null, - $ym-selected-current-background: null, - - $ym-selected-foreground: null, - $ym-selected-background: null, - $ym-selected-hover-foreground: null, - $ym-selected-hover-background: null, - - $ym-current-outline-color: null, - $ym-current-outline-hover-color: null, - $ym-current-outline-focus-color: null, - - $ym-selected-outline-color: null, - $ym-selected-hover-outline-color: null, - $ym-selected-focus-outline-color: null, - - $ym-selected-current-outline-color: null, - $ym-selected-current-outline-hover-color: null, - $ym-selected-current-outline-focus-color: null, - - $date-hover-background: null, - $date-focus-background: null, - $date-hover-foreground: null, - $date-focus-foreground: null, - - $date-border-color: null, - $date-hover-border-color: null, - $date-focus-border-color: null, - - $date-selected-foreground: null, - $date-selected-background: null, - $date-selected-hover-background: null, - $date-selected-focus-background: null, - $date-selected-hover-foreground: null, - $date-selected-focus-foreground: null, - - $date-selected-range-foreground: null, - $date-selected-range-background: null, - $date-selected-range-hover-foreground: null, - $date-selected-range-hover-background: null, - $date-selected-range-focus-foreground: null, - $date-selected-range-focus-background: null, - - $date-selected-current-foreground: null, - $date-selected-current-background: null, - $date-selected-current-hover-foreground: null, - $date-selected-current-hover-background: null, - $date-selected-current-focus-foreground: null, - $date-selected-current-focus-background: null, - - $date-selected-current-range-foreground: null, - $date-selected-current-range-background: null, - $date-selected-current-range-hover-foreground: null, - $date-selected-current-range-hover-background: null, - $date-selected-current-range-focus-foreground: null, - $date-selected-current-range-focus-background: null, - - $date-selected-border-color: null, - $date-selected-hover-border-color: null, - $date-selected-focus-border-color: null, - - $date-current-border-color: null, - $date-current-hover-border-color: null, - $date-current-focus-border-color: null, - - $date-selected-current-border-color: null, - $date-selected-current-hover-border-color: null, - $date-selected-current-focus-border-color: null, - - $date-selected-special-border-color: null, - $date-selected-special-hover-border-color: null, - $date-selected-special-focus-border-color: null, - - $date-current-foreground: null, - $date-current-background: null, - $date-current-hover-foreground: null, - $date-current-focus-foreground: null, - $date-current-hover-background: null, - $date-current-focus-background: null, - - $date-special-background: null, - $date-special-foreground: null, - $date-special-hover-background: null, - $date-special-hover-foreground: null, - $date-special-focus-background: null, - $date-special-focus-foreground: null, - $date-special-border-color: null, - $date-special-hover-border-color: null, - $date-special-range-background: null, - $date-special-range-hover-background: null, - $date-special-range-focus-background: null, - $date-special-range-foreground: null, - $date-special-range-border-color: null, - $date-disabled-foreground: null, - $date-disabled-range-foreground: null, - - $date-range-border-color: null, - $date-range-preview-border-color: null, - - $border-radius: null, - $date-border-radius: null, - $week-number-border-radius: null, - $date-range-border-radius: null, - $date-current-border-radius: null, - $date-special-border-radius: null, - $ym-border-radius: null, - - $actions-divider-color: null, - - $size: null, - $inner-size: null, -) { - $name: 'igx-calendar'; - $selector: 'igx-calendar, .igx-days-view--standalone, .igx-calendar-view--standalone, .igx-date-picker, .igx-month-picker'; - $calendar-schema: (); - - @if map.has-key($schema, 'calendar') { - $calendar-schema: map.get($schema, 'calendar'); - } @else { - $calendar-schema: $schema; - } - - $theme: digest-schema($calendar-schema); - $variant: map.get($schema, '_meta', 'theme'); - - @if not($date-range-border-radius) and $date-border-radius { - $date-range-border-radius: $date-border-radius; - } - - @if not($date-border-radius) and $date-range-border-radius { - $date-border-radius: $date-range-border-radius; - } - - @if not($date-current-border-radius) and $date-border-radius { - $date-current-border-radius: $date-border-radius; - } - - @if not($date-special-border-radius) and $date-border-radius { - $date-special-border-radius: $date-border-radius; - } - - //base start - @if not($header-foreground) and $header-background { - $header-foreground: adaptive-contrast(var(--header-background)); - } - - @if not($content-foreground) and $content-background { - $content-foreground: adaptive-contrast(var(--content-background)); - } - - @if not($weekend-color) and $content-foreground { - $weekend-color: var(--content-foreground); - } - - @if not($inactive-color) and $content-background { - $inactive-color: hsla(from adaptive-contrast(var(--content-background)) h s l / .5); - } - - @if not($weekday-color) and $inactive-color { - $weekday-color: var(--inactive-color); - } - - @if not($week-number-background) and $content-background { - $week-number-background: hsla(from var(--content-background) h s calc(l * 0.8)); - } - - @if not($week-number-foreground) and $week-number-background { - $week-number-foreground: hsla(from adaptive-contrast(var(--week-number-background)) h s l / 0.5); - } - //base end - - //picker start - @if $variant == 'bootstrap' { - @if not($picker-background) and $header-background { - $picker-background: var(--header-background); - } - - @if not($picker-hover-foreground) and $picker-background { - $picker-hover-foreground: hsla(from adaptive-contrast(var(--picker-background)) h s l / 0.8); - } - - @if not($weekday-color) and $header-background { - $weekday-color: hsla(from adaptive-contrast(var(--header-background)) h s l / 0.8); - } - } @else { - @if not($picker-background) and $content-background { - $picker-background: var(--content-background); - } - - @if not($picker-hover-foreground) and $header-background { - $picker-hover-foreground: var(--header-background); - } - } - - @if not($picker-foreground) and $picker-background { - $picker-foreground: adaptive-contrast(var(--picker-background)); - } - - @if not($picker-focus-foreground) and $picker-hover-foreground { - $picker-focus-foreground: var(--picker-hover-foreground); - } - - @if not($navigation-color) and $picker-background { - $navigation-color: adaptive-contrast(var(--picker-background)); - } - - @if not($navigation-hover-color) and $picker-hover-foreground { - $navigation-hover-color: var(--picker-hover-foreground); - } - - @if not($navigation-focus-color) and $navigation-hover-color { - $navigation-focus-color: var(--navigation-hover-color); - } - //picker end - - //date start - @if not($date-hover-background) and $content-background { - $date-hover-background: hsl(from var(--content-background) h s calc(l * 0.9)); - } - - @if not($date-hover-foreground) and $date-hover-background { - $date-hover-foreground: adaptive-contrast(var(--date-hover-background)); - } - - @if not($date-focus-background) and $date-hover-background { - $date-focus-background: var(--date-hover-background) - } - - @if not($date-focus-foreground) and $date-hover-foreground { - $date-focus-foreground: var(--date-hover-foreground); - } - - @if not($ym-hover-background) and $date-hover-background { - $ym-hover-background: var(--date-hover-background); - } - - @if not($ym-hover-foreground) and $ym-hover-background { - $ym-hover-foreground: adaptive-contrast(var(--ym-hover-background)); - } - //date end - - //date current start - @if $variant == 'indigo' { - @if not($date-current-background) and $header-background { - $date-current-background: hsla(from var(--header-background) h s l / 0.4); - } - - @if not($date-current-border-color) and $date-current-background { - $date-current-border-color: hsla(from var(--date-current-background) h s l / 0.6); - } - - @if not($date-current-hover-background) and $date-current-background { - $date-current-hover-background: hsl(from var(--date-current-background) h s calc(l * 0.9)); - } - - @if not($date-current-hover-border-color) and $date-current-border-color { - $date-current-hover-border-color: hsl(from var(--date-current-border-color) h s calc(l * 0.9)); - } - - @if not($date-current-focus-background) and $date-current-hover-background { - $date-current-focus-background: var(--date-current-hover-background); - } - - @if not($date-current-focus-border-color) and $date-current-hover-border-color { - $date-current-focus-border-color: var(--date-current-hover-border-color); - } - - @if not($date-current-foreground) and $date-current-background { - $date-current-foreground: adaptive-contrast(var(--date-current-background)); - } - - @if not($date-current-foreground) and $content-foreground { - $date-current-foreground: var(--content-foreground); - } - - @if not($date-current-hover-foreground) and $date-current-foreground { - $date-current-hover-foreground: var(--date-current-foreground); - } - - @if not($date-current-focus-foreground) and $date-current-foreground { - $date-current-focus-foreground: var(--date-current-foreground); - } - } - - @if $variant == 'fluent' { - @if not($date-current-background) and $header-background { - $date-current-background: var(--header-background); - } - } - - @if $variant == 'material' or $variant == 'bootstrap' { - @if not($date-current-background) and $content-background { - $date-current-background: var(--content-background); - } - } - - @if $variant != 'indigo' { - @if not($date-current-foreground) and $date-current-background { - $date-current-foreground: adaptive-contrast(var(--date-current-background)); - } - - @if not($date-current-hover-background) and $date-hover-background { - $date-current-hover-background: var(--date-hover-background); - } - - @if not($date-current-focus-background) and $date-focus-background { - $date-current-focus-background: var(--date-focus-background); - } - - @if $variant == 'fluent' { - @if not($date-current-hover-foreground) and $date-current-background { - $date-current-hover-foreground: adaptive-contrast(var(--date-current-background)); - } - - @if not($date-current-focus-foreground) and $date-current-background { - $date-current-focus-foreground: adaptive-contrast(var(--date-current-background)); - } - } - - @if not($date-current-hover-foreground) and $date-current-hover-background { - $date-current-hover-foreground: adaptive-contrast(var(--date-current-hover-background)); - } - - @if not($date-current-focus-foreground) and $date-current-hover-background { - $date-current-focus-foreground: adaptive-contrast(var(--date-current-hover-background)); - } - } - - @if $variant == 'material' or $variant == 'bootstrap' { - @if not($date-current-border-color) and $date-current-foreground { - $date-current-border-color: var(--date-current-foreground); - } - - @if not($date-current-hover-border-color) and $date-current-hover-foreground { - $date-current-hover-border-color: var(--date-current-hover-foreground); - } - - @if not($date-current-focus-border-color) and $date-current-focus-foreground { - $date-current-focus-border-color: var(--date-current-focus-foreground); - } - } - //date current end - - //date selected start - - @if $variant == 'fluent' { - @if not($date-selected-background) and $date-hover-background { - $date-selected-background: var(--date-hover-background); - } - } @else { - @if not($date-selected-background) and $header-background { - $date-selected-background: var(--header-background); - } - } - - @if not($date-selected-current-background) and $date-selected-background { - $date-selected-current-background: var(--date-selected-background); - } - - @if not($date-selected-hover-background) and $date-selected-background { - $date-selected-hover-background: hsl(from var(--date-selected-background) h s calc(l * 0.9)); - } - - @if not($date-selected-current-hover-background) and $date-selected-hover-background { - $date-selected-current-hover-background: var(--date-selected-hover-background); - } - - @if not($date-selected-focus-background) and $date-selected-hover-background { - $date-selected-focus-background: var(--date-selected-hover-background); - } - - @if not($date-selected-current-focus-background) and $date-selected-focus-background { - $date-selected-current-focus-background: var(--date-selected-focus-background); - } - - @if not($date-selected-foreground) and $date-selected-background { - $date-selected-foreground: adaptive-contrast(var(--date-selected-background)); - } - - @if not($date-selected-hover-foreground) and $date-selected-background { - $date-selected-hover-foreground: adaptive-contrast(var(--date-selected-background)); - } - - @if not($date-selected-focus-foreground) and $date-selected-background { - $date-selected-focus-foreground: adaptive-contrast(var(--date-selected-background)); - } - - @if $variant == 'indigo' { - @if not($date-selected-current-border-color) and $date-selected-current-background { - $date-selected-current-border-color: hsl(from var(--date-selected-current-background) h calc(s * 0.9) calc(l * 1.5)); - } - } @else { - @if not($date-selected-current-border-color) and $content-foreground { - $date-selected-current-border-color: var(--content-foreground); - } - } - - @if not($date-selected-current-hover-background) and $date-selected-hover-background { - $date-selected-current-hover-background: var(--date-selected-hover-background); - } - - @if not($date-selected-current-hover-border-color) and $date-selected-current-border-color { - $date-selected-current-hover-border-color: var(--date-selected-current-border-color); - } - - @if $variant == 'fluent' { - @if not($date-selected-current-foreground) and $date-current-background { - $date-selected-current-foreground: adaptive-contrast(var(--date-current-background)); - } - - @if not($date-selected-current-hover-foreground) and $date-current-background { - $date-selected-current-hover-foreground: adaptive-contrast(var(--date-current-background)); - } - - @if not($date-selected-current-focus-foreground) and $date-current-background { - $date-selected-current-focus-foreground: adaptive-contrast(var(--date-current-background)); - } - } @else { - @if not($date-selected-current-foreground) and $date-selected-background { - $date-selected-current-foreground: adaptive-contrast(var(--date-selected-background)); - } - - @if not($date-selected-current-hover-foreground) and $date-selected-background { - $date-selected-current-hover-foreground: adaptive-contrast(var(--date-selected-background)); - } - - @if not($date-selected-current-focus-foreground) and $date-selected-current-focus-background { - $date-selected-current-focus-foreground: adaptive-contrast(var(--date-selected-current-focus-background)); - } - } - - @if not($date-selected-current-focus-border-color) and $date-selected-current-hover-border-color { - $date-selected-current-focus-border-color: var(--date-selected-current-hover-border-color); - } - //date selected end - - //date special start - @if $variant == 'fluent' or $variant == 'bootstrap' { - @if not($date-special-foreground) and $content-foreground { - $date-special-foreground: var(--content-foreground); - } - - @if not($date-special-border-color) and $header-background { - $date-special-border-color: var(--header-background); - } - - @if not($date-special-hover-border-color) and $date-special-border-color { - $date-special-hover-border-color: var(--date-special-border-color); - } - - @if not($date-special-focus-foreground) and $date-special-foreground { - $date-special-focus-foreground: var(--date-special-foreground); - } - } @else { - @if not($date-special-foreground) and $header-background { - $date-special-foreground: var(--header-background); - } - - @if not($date-special-border-color) and $date-special-foreground { - $date-special-border-color: var(--date-special-foreground); - } - - @if not($date-special-hover-foreground) and $date-special-foreground { - $date-special-hover-foreground: hsl(from var(--date-special-foreground) h s calc(l * 0.8)); - } - - @if not($date-special-hover-border-color) and $date-special-hover-foreground { - $date-special-hover-border-color: var(--date-special-hover-foreground); - } - - @if not($date-special-focus-foreground) and $date-special-hover-border-color { - $date-special-focus-foreground: var(--date-special-hover-border-color); - } - } - - @if not($date-special-hover-foreground) and $date-special-foreground { - $date-special-hover-foreground: hsl(from var(--date-special-foreground) h s calc(l * 0.8)); - } - - @if not($date-special-hover-background) and $date-hover-background { - $date-special-hover-background: var(--date-hover-background); - } - - @if not($date-special-focus-background) and $date-focus-background { - $date-special-focus-background: var(--date-focus-background); - } - - @if not($date-special-range-focus-background) and $date-special-focus-background { - $date-special-range-focus-background: var(--date-special-focus-background); - } - - @if $variant != 'fluent' { - @if not($date-selected-special-border-color) and $date-selected-foreground { - $date-selected-special-border-color: var(--date-selected-foreground); - } - - @if not($date-selected-special-hover-border-color) and $date-selected-hover-foreground { - $date-selected-special-hover-border-color: var(--date-selected-hover-foreground); - } - - @if not($date-selected-special-focus-border-color) and $date-selected-focus-foreground { - $date-selected-special-focus-border-color: var(--date-selected-focus-foreground); - } - } @else { - @if not($date-selected-special-border-color) and $date-special-border-color { - $date-selected-special-border-color: var(--date-special-border-color); - } - - @if not($date-selected-special-hover-border-color) and $date-selected-special-border-color { - $date-selected-special-hover-border-color: var(--date-selected-special-border-color); - } - - @if not($date-selected-special-focus-border-color) and $date-selected-special-border-color { - $date-selected-special-focus-border-color: var(--date-selected-special-border-color); - } - } - //date special end - - //calendar views start - @if $variant != 'fluent' { - @if not($ym-selected-background) and $header-background { - $ym-selected-background: var(--header-background); - } - - @if not($ym-selected-hover-background) and $ym-selected-background { - $ym-selected-hover-background: hsl(from var(--ym-selected-background) h s calc(l * 0.9)); - } - - @if not($ym-current-background) and $date-current-background { - $ym-current-background: var(--date-current-background); - } - - @if not($ym-current-hover-background) and $date-current-hover-background { - $ym-current-hover-background: var(--date-current-hover-background); - } - - @if not($ym-current-outline-color) and $date-current-border-color { - $ym-current-outline-color: var(--date-current-border-color); - } - - @if not($ym-current-outline-hover-color) and $ym-current-outline-color { - $ym-current-outline-hover-color: var(--ym-current-outline-color); - } - - @if not($ym-current-outline-focus-color) and $ym-current-outline-hover-color { - $ym-current-outline-focus-color: var(--ym-current-outline-hover-color); - } - - @if not($ym-selected-current-outline-color) and $ym-current-outline-color { - $ym-selected-current-outline-color: var(--ym-current-outline-color); - } - - @if not($ym-selected-current-outline-hover-color) and $ym-current-outline-hover-color { - $ym-selected-current-outline-hover-color: var(--ym-current-outline-hover-color); - } - - @if not($ym-selected-current-outline-focus-color) and $ym-current-outline-focus-color { - $ym-selected-current-outline-focus-color: var(--ym-current-outline-focus-color); - } - } @else { - @if not($ym-selected-background) and $header-background { - $ym-selected-background: hsla(from var(--header-background) h s l / 0.3); - } - - @if not($ym-current-background) and $date-selected-background { - $ym-current-background: var(--date-selected-background); - } - - @if not($ym-current-hover-background) and $ym-current-background { - $ym-current-hover-background: hsl(from var(--ym-current-background) h s calc(l * 0.9)); - } - - @if not($ym-selected-hover-background) and $ym-selected-background { - $ym-selected-hover-background: hsla(from var(--ym-selected-background) h s calc(l * 0.9) / 0.5); - } - - @if not($ym-selected-current-outline-color) and $ym-selected-current-foreground { - $ym-selected-current-outline-color: var(--ym-selected-current-foreground); - } - - @if not($ym-selected-foreground) and $content-foreground { - $ym-selected-foreground: var(--content-foreground); - } - - @if not($ym-selected-hover-foreground) and $ym-selected-foreground { - $ym-selected-hover-foreground: var(--content-foreground); - } - } - - @if not($ym-selected-current-background) and $ym-selected-background { - $ym-selected-current-background: var(--ym-selected-background); - } - - @if not($ym-selected-current-hover-background) and $ym-selected-hover-background { - $ym-selected-current-hover-background: var(--ym-selected-hover-background); - } - - @if not($ym-current-foreground) and $ym-current-background { - $ym-current-foreground: adaptive-contrast(var(--ym-current-background)); - } - - @if not($ym-current-hover-foreground) and $ym-current-hover-background { - $ym-current-hover-foreground: adaptive-contrast(var(--ym-current-hover-background)); - } - - @if not($ym-selected-current-foreground) and $ym-selected-current-background { - $ym-selected-current-foreground: adaptive-contrast(var(--ym-selected-current-background)); - } - - @if not($ym-selected-current-hover-foreground) and $ym-selected-current-hover-background { - $ym-selected-current-hover-foreground: adaptive-contrast(var(--ym-selected-current-hover-background)); - } - //calendar views end - - //date range start - @if not($date-selected-range-foreground) and $content-foreground { - $date-selected-range-foreground: var(--content-foreground); - } - - @if $variant == 'fluent' { - @if not($date-selected-range-background) and $date-selected-background { - $date-selected-range-background: var(--date-selected-background); - } - - @if not($date-selected-current-range-background) and $date-selected-range-background { - $date-selected-current-range-background: var(--date-selected-range-background); - } - - @if not($date-selected-range-hover-background) and $date-selected-hover-background { - $date-selected-range-hover-background: var(--date-selected-hover-background); - } - - @if not($date-selected-range-focus-background) and $date-selected-hover-background { - $date-selected-range-focus-background: var(--date-selected-hover-background); - } - - @if not($date-selected-current-range-hover-foreground) and $date-current-background { - $date-selected-current-range-hover-foreground: adaptive-contrast(var(--date-current-background)); - } - - @if not($date-selected-current-range-focus-background) and $date-current-background { - $date-selected-current-range-focus-background: adaptive-contrast(var(--date-current-background)); - } - } @else { - @if not($date-selected-range-background) and $date-selected-background { - $date-selected-range-background: hsla(from var(--date-selected-background) h s l / 0.24); - } - - @if not($date-range-preview-border-color) and $date-selected-background { - $date-range-preview-border-color: var(--date-selected-background); - } - - @if not($date-selected-current-range-hover-foreground) and $date-selected-current-range-hover-background { - $date-selected-current-range-hover-foreground: adaptive-contrast(var(--date-selected-current-range-hover-background)); - } - - @if not($date-selected-current-range-hover-foreground) and $content-foreground { - $date-selected-current-range-hover-foreground: var(--content-foreground); - } - - @if not($date-selected-current-range-focus-background) and $date-selected-current-range-hover-background { - $date-selected-current-range-focus-background: var(--date-selected-current-range-hover-background); - } - } - - @if not($date-selected-range-hover-background) and $date-hover-background { - $date-selected-range-hover-background: var(--date-hover-background); - } - - @if not($date-selected-range-focus-background) and $date-selected-range-hover-background { - $date-selected-range-focus-background: var(--date-selected-range-hover-background); - } - - @if not($date-selected-range-hover-foreground) and $date-selected-range-hover-background { - $date-selected-range-hover-foreground: adaptive-contrast(hsla(from var(--date-selected-range-hover-background) h s l / 1)); - } - - @if not($date-selected-range-focus-foreground) and $date-selected-range-focus-background { - $date-selected-range-focus-foreground: adaptive-contrast(hsla(from var(--date-selected-range-focus-background) h s l / 1)); - } - - @if $variant == 'indigo' { - @if not($date-selected-current-range-background) and $date-selected-background { - $date-selected-current-range-background: hsla(from var(--date-selected-background) h s calc(l * 0.9) / 0.12); - } - - @if not($date-selected-current-range-hover-background) and $date-selected-background { - $date-selected-current-range-hover-background: hsla(from var(--date-selected-background) h s calc(l * 0.9) / 0.24); - } - - @if not($date-selected-current-range-foreground) and $date-current-background { - $date-selected-current-range-foreground: adaptive-contrast(var(--date-current-background)); - } - } @else { - @if not($date-selected-current-range-foreground) and $date-current-background { - $date-selected-current-range-foreground: adaptive-contrast(var(--date-current-background)); - } - - @if not($date-selected-current-range-foreground) and $content-foreground { - $date-selected-current-range-foreground: var(--content-foreground); - } - } - - @if not($date-special-range-foreground) and $date-special-foreground { - $date-special-range-foreground: hsl(from var(--date-special-foreground) h s calc(l * 0.8)); - } - - @if not($date-special-range-border-color) and $date-special-range-foreground { - $date-special-range-border-color: var(--date-special-range-foreground); - } - - @if not($date-special-range-hover-background) and $date-selected-range-hover-background { - $date-special-range-hover-background: var(--date-selected-range-hover-background); - } - //date range end - - @if not($date-disabled-foreground) and $content-background { - $date-disabled-foreground: hsla(from adaptive-contrast(var(--content-background)) h s l / .3); - } - - @if not($date-disabled-range-foreground) and $date-selected-range-background { - $date-disabled-range-foreground: hsla(from adaptive-contrast(var(--content-background)) h s l / .3); - } - - @return extend($theme, ( - name: $name, - selector: $selector, - - content-background: $content-background, - content-foreground: $content-foreground, - border-color: $border-color, - - header-background: $header-background, - header-foreground: $header-foreground, - - picker-foreground: $picker-foreground, - picker-background: $picker-background, - picker-hover-foreground: $picker-hover-foreground, - picker-focus-foreground: $picker-focus-foreground, - - navigation-color: $navigation-color, - navigation-hover-color: $navigation-hover-color, - navigation-focus-color: $navigation-focus-color, - - ym-hover-foreground: $ym-hover-foreground, - ym-hover-background: $ym-hover-background, - - ym-current-background: $ym-current-background, - ym-current-foreground: $ym-current-foreground, - ym-current-hover-foreground: $ym-current-hover-foreground, - ym-current-hover-background: $ym-current-hover-background, - - ym-selected-foreground: $ym-selected-foreground, - ym-selected-background: $ym-selected-background, - ym-selected-hover-foreground: $ym-selected-hover-foreground, - ym-selected-hover-background: $ym-selected-hover-background, - - ym-selected-current-foreground: $ym-selected-current-foreground, - ym-selected-current-background: $ym-selected-current-background, - ym-selected-current-hover-foreground: $ym-selected-current-hover-foreground, - ym-selected-current-hover-background: $ym-selected-current-hover-background, - - ym-current-outline-color: $ym-current-outline-color, - ym-current-outline-hover-color: $ym-current-outline-hover-color, - ym-current-outline-focus-color: $ym-current-outline-focus-color, - - ym-selected-outline-color: $ym-selected-outline-color, - ym-selected-hover-outline-color: $ym-selected-hover-outline-color, - ym-selected-focus-outline-color: $ym-selected-focus-outline-color, - - ym-selected-current-outline-color: $ym-selected-current-outline-color, - ym-selected-current-outline-hover-color: $ym-selected-current-outline-hover-color, - ym-selected-current-outline-focus-color: $ym-selected-current-outline-focus-color, - - date-hover-background: $date-hover-background, - date-focus-background: $date-focus-background, - date-hover-foreground: $date-hover-foreground, - date-focus-foreground: $date-focus-foreground, - - date-selected-background: $date-selected-background, - date-selected-foreground: $date-selected-foreground, - date-selected-hover-background: $date-selected-hover-background, - date-selected-focus-background: $date-selected-focus-background, - date-selected-hover-foreground: $date-selected-hover-foreground, - date-selected-focus-foreground: $date-selected-focus-foreground, - - date-selected-range-foreground: $date-selected-range-foreground, - date-selected-range-background: $date-selected-range-background, - date-selected-range-hover-foreground: $date-selected-range-hover-foreground, - date-selected-range-hover-background: $date-selected-range-hover-background, - date-selected-range-focus-foreground: $date-selected-range-focus-foreground, - date-selected-range-focus-background: $date-selected-range-focus-background, - - date-selected-current-range-foreground: $date-selected-current-range-foreground, - date-selected-current-range-background: $date-selected-current-range-background, - date-selected-current-range-hover-foreground: $date-selected-current-range-hover-foreground, - date-selected-current-range-hover-background: $date-selected-current-range-hover-background, - date-selected-current-range-focus-foreground: $date-selected-current-range-focus-foreground, - date-selected-current-range-focus-background: $date-selected-current-range-focus-background, - - date-current-background: $date-current-background, - date-current-foreground: $date-current-foreground, - date-current-hover-background: $date-current-hover-background, - date-current-focus-background: $date-current-focus-background, - date-current-hover-foreground: $date-current-hover-foreground, - date-current-focus-foreground: $date-current-focus-foreground, - - date-selected-current-background: $date-selected-current-background, - date-selected-current-hover-background: $date-selected-current-hover-background, - date-selected-current-focus-background: $date-selected-current-focus-background, - date-selected-current-foreground: $date-selected-current-foreground, - date-selected-current-hover-foreground: $date-selected-current-hover-foreground, - date-selected-current-focus-foreground: $date-selected-current-focus-foreground, - - date-selected-special-border-color: $date-selected-special-border-color, - date-selected-special-hover-border-color: $date-selected-special-hover-border-color, - date-selected-special-focus-border-color: $date-selected-special-focus-border-color, - - date-special-foreground: $date-special-foreground, - date-special-background: $date-special-background, - date-special-hover-foreground: $date-special-hover-foreground, - date-special-hover-background: $date-special-hover-background, - date-special-focus-foreground: $date-special-focus-foreground, - date-special-focus-background: $date-special-focus-background, - date-special-border-color: $date-special-border-color, - date-special-hover-border-color: $date-special-hover-border-color, - date-special-range-foreground: $date-special-range-foreground, - date-special-range-background: $date-special-range-background, - date-special-range-hover-background: $date-special-range-hover-background, - date-special-range-focus-background: $date-special-range-focus-background, - date-special-range-border-color: $date-special-range-border-color, - - week-number-foreground: $week-number-foreground, - week-number-background: $week-number-background, - - weekend-color: $weekend-color, - inactive-color: $inactive-color, - weekday-color: $weekday-color, - - border-radius: $border-radius, - date-border-radius: $date-border-radius, - date-range-border-radius: $date-range-border-radius, - date-current-border-radius: $date-current-border-radius, - date-special-border-radius: $date-special-border-radius, - ym-border-radius: $ym-border-radius, - week-number-border-radius: $week-number-border-radius, - date-border-color: $date-border-color, - date-hover-border-color: $date-hover-border-color, - date-focus-border-color: $date-focus-border-color, - date-selected-border-color: $date-selected-border-color, - date-selected-hover-border-color: $date-selected-hover-border-color, - date-selected-focus-border-color: $date-selected-focus-border-color, - date-current-border-color: $date-current-border-color, - date-current-hover-border-color: $date-current-hover-border-color, - date-current-focus-border-color: $date-current-focus-border-color, - date-selected-current-border-color: $date-selected-current-border-color, - date-selected-current-hover-border-color: $date-selected-current-hover-border-color, - date-selected-current-focus-border-color: $date-selected-current-focus-border-color, - date-range-preview-border-color: $date-range-preview-border-color, - date-range-border-color: $date-range-border-color, - date-disabled-foreground: $date-disabled-foreground, - date-disabled-range-foreground: $date-disabled-range-foreground, - actions-divider-color: $actions-divider-color, - size: $size, - inner-size: $inner-size, - )); -} /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars diff --git a/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss index 4955db6dbee..b7b4da74f09 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss @@ -1,97 +1,5 @@ @use 'sass:map'; -@use 'sass:meta'; @use '../../base' as *; -@use '../../themes/schemas' as *; - -//// -/// @group themes -/// @access public -/// @author Marin Popov -/// @author Simeon Simeonoff -//// - -/// -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// @param {Color} $background [null] - The card background color. -/// @param {Color} $outline-color [null] - The color of the outline for outlined type cards. -/// @param {Color} $header-text-color [null] - The text color of the card title. -/// @param {Color} $subtitle-text-color [null] - The text color of the card subtitle. -/// @param {Color} $content-text-color [null] - The text color of the card content. -/// @param {Color} $actions-text-color [null] - The text color of the card buttons. -/// @param {box-shadow} $resting-shadow [null] - The shadow of the card in its resting state. -/// @param {box-shadow} $hover-shadow [null] - The shadow of the card in its hover state. -/// -/// @param {List} $border-radius [null] - The border radius used for card component. -/// -/// @requires $light-material-schema -/// -/// @example scss Change the background and content text colors in card -/// $my-card-theme: card-theme($background: #fff); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-card-theme); -@function card-theme( - $schema: $light-material-schema, - - $border-radius: null, - $background: null, - $outline-color: null, - $header-text-color: null, - $subtitle-text-color: null, - $content-text-color: null, - $actions-text-color: null, - $resting-shadow: null, - $hover-shadow: null, -) { - $name: 'igx-card'; - $card-schema: (); - - @if map.has-key($schema, 'card') { - $card-schema: map.get($schema, 'card'); - } @else { - $card-schema: $schema; - } - - $theme: digest-schema($card-schema); - - @if not($header-text-color) and $background { - $header-text-color: adaptive-contrast(var(--background)); - } - - @if not($actions-text-color) and $background { - $actions-text-color: adaptive-contrast(var(--background)); - } - - @if not($content-text-color) and $background { - $content-text-color: hsl(from adaptive-contrast(var(--background)) h s calc(l * 0.85)); - } - - @if not($subtitle-text-color) and $background { - $subtitle-text-color: hsl(from adaptive-contrast(var(--background)) h s calc(l * 0.85)); - } - - @if not($resting-shadow) { - $resting-elevation: map.get($card-schema, 'resting-elevation'); - $resting-shadow: elevation($resting-elevation); - } - - @if not($hover-shadow) { - $hover-elevation: map.get($card-schema, 'hover-elevation'); - $hover-shadow: elevation($hover-elevation); - } - - @return extend($theme, ( - name: $name, - background: $background, - outline-color: $outline-color, - border-radius: $border-radius, - header-text-color: $header-text-color, - subtitle-text-color: $subtitle-text-color, - content-text-color: $content-text-color, - actions-text-color: $actions-text-color, - resting-shadow: $resting-shadow, - hover-shadow: $hover-shadow, - )); -} /// Card Component /// @deprecated Use the `css-vars` mixin instead. diff --git a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss index d4515cf9683..f389ee8175b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss @@ -1,225 +1,7 @@ @use 'sass:map'; -@use 'sass:meta'; @use '../../base' as *; -@use '../../themes/schemas' as *; @use 'igniteui-theming/sass/animations' as *; -//// -/// @group themes -/// @access public -/// @author Simeon Simeonoff -/// @author Marin Popov -//// - -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// @param {Color} $slide-background [null] - The slide background color. -/// @param {Color} $button-background [null] - The previous/next buttons idle background color. -/// @param {Color} $button-hover-background [null] - The previous/next buttons hover background color. -/// @param {Color} $button-disabled-background [null] - The previous/next buttons disabled background color. -/// @param {Color} $button-arrow-color [null] - The previous/next buttons idle arrow color. -/// @param {Color} $button-hover-arrow-color [null] - The previous/next buttons hover arrow color. -/// @param {Color} $button-disabled-arrow-color [null] - The previous/next buttons disabled arrow color. -/// @param {Color} $button-border-color [null] - The previous/next buttons idle border color. -/// @param {Color} $button-hover-border-color [null] - The previous/next buttons hover border color. -/// @param {Color} $button-focus-border-color [null] - The navigation buttons border color on focus. -/// @param {Color} $button-disabled-border-color [null] - The previous/next buttons disabled border color. -/// @param {Color} $indicator-background [null] - The indicators container background color. -/// @param {Color} $label-indicator-background [null] - The label indicator container background color. -/// @param {Color} $indicator-dot-color [null] - The idle indicator dot color. -/// @param {Color} $indicator-hover-dot-color [null] - The hover indicator dot color. -/// @param {Color} $indicator-focus-color [null] - The indicators border and dot color on focus. -/// @param {Color} $indicator-border-color [null] - The idle indicator border color. -/// @param {Color} $indicator-active-dot-color [null] - The active indicator dot color. -/// @param {Color} $indicator-active-border-color [null] - The active indicator border color. -/// @param {Color} $indicator-active-hover-dot-color [null] - The active indicator dot color on hover. -/// @param {box-shadow} $button-shadow [null] - Shadow underneath the previous/next buttons. -/// -/// @param {List} $border-radius [null] - The border radius used for carousel component. -/// -/// @requires $light-material-schema -/// -/// @example scss Change the previous/next button colors -/// $my-carousel-theme: carousel-theme( -/// $button-background: black, -/// $button-hover-background: white -/// ); -/// // Pass the carousel theme to the css-vars() mixin -/// @include css-vars($my-carousel-theme); -@function carousel-theme( - $schema: $light-material-schema, - - $border-radius: null, - $button-shadow: null, - - $slide-background: null, - - $button-background: null, - $button-hover-background: null, - $button-disabled-background: null, - $button-arrow-color: null, - $button-hover-arrow-color: null, - $button-focus-arrow-color: null, - $button-disabled-arrow-color: null, - $button-border-color: null, - $button-hover-border-color: null, - $button-focus-border-color: null, - $button-disabled-border-color: null, - - $indicator-background: null, - $label-indicator-background: null, - $indicator-dot-color: null, - $indicator-hover-dot-color: null, - $indicator-focus-color: null, - $indicator-border-color: null, - $indicator-active-dot-color: null, - $indicator-active-border-color: null, - $indicator-active-hover-dot-color: null, -){ - $name: 'igx-carousel'; - $carousel-schema: (); - - @if map.has-key($schema, 'carousel') { - $carousel-schema: map.get($schema, 'carousel'); - } @else { - $carousel-schema: $schema; - } - - $theme: digest-schema($carousel-schema); - $variant: map.get($theme, '_meta', 'theme'); - - @if $variant == 'indigo' { - @if not($button-hover-background) and $button-background { - $button-hover-background: hsl(from var(--button-background) h s calc(l * 0.9)); - } - - @if not($button-border-color) and $button-background { - $button-border-color: hsl(from var(--button-background) h s calc(l * 0.9)); - } - - @if not($button-hover-border-color) and $button-border-color { - $button-hover-border-color: hsl(from var(--button-border-color) h s calc(l * 0.9)); - } - - @if not($indicator-active-dot-color) and not($indicator-background) and $button-background { - $indicator-active-dot-color: var(--button-background); - } - } - - @if not($button-shadow) { - $button-elevation: map.get($carousel-schema, 'button-elevation'); - $button-shadow: elevation($button-elevation); - } - - @if not($button-arrow-color) and $button-background { - $button-arrow-color: hsla(from (adaptive-contrast(var(--button-background)) h s l / 0.85)); - } - - @if not($button-hover-background) and $button-background { - $button-hover-background: var(--button-background); - } - - @if not($button-hover-arrow-color) and $button-hover-background { - $button-hover-arrow-color: adaptive-contrast(var(--button-hover-background)); - } - - @if not($button-focus-arrow-color) and $button-hover-arrow-color { - $button-focus-arrow-color: var(--button-hover-arrow-color); - } - - @if not($button-disabled-background) and $button-background { - $button-disabled-background: var(--button-background); - } - - @if not($button-disabled-arrow-color) and $button-disabled-background { - $button-disabled-arrow-color: hsla(from adaptive-contrast(var(--button-disabled-background)) h s l / .4); - } - - @if not($indicator-dot-color) and $indicator-background { - $indicator-dot-color: hsla(from adaptive-contrast(var(--indicator-background)) h s l / .8); - } - - @if not($indicator-hover-dot-color) and $indicator-dot-color { - $indicator-hover-dot-color: hsla(from var(--indicator-dot-color) h s l / 1); - } - - @if not($indicator-border-color) and $indicator-dot-color { - $indicator-border-color: var(--indicator-dot-color); - } - - @if not($indicator-active-dot-color) and $indicator-background { - $indicator-active-dot-color: hsl(from adaptive-contrast(var(--indicator-background)) h s calc(l * 0.9)); - } - - @if not($indicator-active-hover-dot-color) and $indicator-active-dot-color { - $indicator-active-hover-dot-color: hsl(from var(--indicator-active-dot-color) h s calc(l * 1.1)); - } - - @if not($indicator-active-border-color) and $indicator-active-dot-color { - $indicator-active-border-color: var(--indicator-active-dot-color); - } - - @if $variant == 'material' { - @if not($button-focus-border-color) and $button-focus-arrow-color { - $button-focus-border-color: var(--button-focus-arrow-color); - } - } - - @if $variant == 'fluent' or $variant == 'bootstrap' { - @if not($button-focus-border-color) and $button-background { - $button-focus-border-color: hsla(from adaptive-contrast(var(--button-background)) h s l / 0.5); - } - } - - @if $variant == 'indigo' { - @if not($button-focus-border-color) and $indicator-active-dot-color { - $button-focus-border-color: var(--indicator-active-dot-color); - } - - @if not($indicator-focus-color) and $indicator-active-hover-dot-color { - $indicator-focus-color: hsla(from var(--indicator-active-hover-dot-color) h s l / .5); - } - } @else { - @if not($indicator-focus-color) and not($indicator-background) and $button-background { - $indicator-focus-color: var(--button-background); - } - - @if not($indicator-focus-color) and $indicator-background { - $indicator-focus-color: adaptive-contrast(var(--indicator-background)); - } - } - - @return extend($theme, ( - name: $name, - - slide-background: $slide-background, - - border-radius: $border-radius, - button-shadow: $button-shadow, - - button-background: $button-background, - button-disabled-background: $button-disabled-background, - button-hover-background: $button-hover-background, - button-arrow-color: $button-arrow-color, - button-hover-arrow-color: $button-hover-arrow-color, - button-focus-arrow-color: $button-focus-arrow-color, - button-disabled-arrow-color: $button-disabled-arrow-color, - button-border-color: $button-border-color, - button-hover-border-color: $button-hover-border-color, - button-focus-border-color: $button-focus-border-color, - button-disabled-border-color: $button-disabled-border-color, - - indicator-background: $indicator-background, - label-indicator-background: $label-indicator-background, - indicator-dot-color: $indicator-dot-color, - indicator-hover-dot-color: $indicator-hover-dot-color, - indicator-focus-color: $indicator-focus-color, - indicator-border-color: $indicator-border-color, - indicator-active-dot-color: $indicator-active-dot-color, - indicator-active-border-color: $indicator-active-border-color, - indicator-active-hover-dot-color: $indicator-active-hover-dot-color, - )); -} - /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. diff --git a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss index 48ed1cffa0e..6231ebcbc1e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss @@ -2,156 +2,6 @@ @use 'sass:math'; @use '../../base' as *; @use 'igniteui-theming/sass/animations' as *; -@use '../../themes/schemas' as *; - -//// -/// @group themes -/// @access public -/// @author Simeon Simeonoff -/// @author Marin Popov -//// - -/// Checkbox Theme -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// @param {Color} $label-color [null]- The text color used for the label text. -/// @param {Color} $label-color-hover [null]- The text color used for the label text on hover. -/// @param {Color} $empty-color [null] - The unchecked border color. -/// @param {Color} $empty-color-hover [null] - The unchecked border color on hover. -/// @param {Color} $empty-fill-color [null] - The unchecked fill color. -/// @param {Color} $fill-color [null] - The checked border and fill colors. -/// @param {Color} $fill-color-hover [null] - The checked border and fill colors on hover. -/// @param {Color} $tick-color [null] - The checked mark color. -/// @param {Color} $tick-color-hover [null] - The checked mark color on hover. -/// @param {Color} $disabled-color [null] - The disabled border and fill colors. -/// @param {Color} $disabled-tick-color [null] - The checked mark color in disabled state. -/// @param {Color} $disabled-indeterminate-color [null] - The disabled border and fill colors in indeterminate state. -/// @param {Color} $disabled-color-label [null] - The disabled label color. -/// @param {List} $border-radius [null] - The border radius used for checkbox component. -/// @param {List} $border-radius-ripple [null] - The border radius used for checkbox ripple. -/// @param {Color} $focus-outline-color [null] - The focus outlined color. -/// @param {Color} $focus-outline-color-focused [null] - The focus outlined color for focused state. -/// @param {Color} $focus-border-color [null] - The focus border color. -/// @param {Color} $error-color [null] - The border and fill colors in invalid state. -/// @param {Color} $error-color-hover [null] - The border and fill colors in invalid state on hover. -/// @param {Color} $focus-outline-color-error [null] - The focus outline error color. -/// Set to light when the surrounding area is dark. -/// -/// @requires $light-material-schema -/// -/// @example scss Change the checked fill color -/// $my-checkbox-theme: igx-checkbox-theme($fill-color: magenta); -/// // Pass the theme to the css-vars mixin -/// @include css-vars($my-checkbox-theme); -@function checkbox-theme( - $schema: $light-material-schema, - - $border-radius: null, - $label-color: null, - $label-color-hover: null, - $empty-color: null, - $empty-color-hover: null, - $empty-fill-color: null, - $fill-color: null, - $fill-color-hover: null, - $tick-color: null, - $tick-color-hover: null, - $disabled-color: null, - $disabled-tick-color: null, - $disabled-indeterminate-color: null, - $disabled-color-label: null, - $border-radius-ripple: null, - $focus-outline-color: null, - $focus-outline-color-focused: null, - $focus-border-color: null, - $error-color: null, - $error-color-hover: null, - $focus-outline-color-error: null, -) { - $name: 'igx-checkbox'; - $checkbox-schema: (); - - @if map.has-key($schema, 'checkbox') { - $checkbox-schema: map.get($schema, 'checkbox'); - } @else { - $checkbox-schema: $schema; - } - - $theme: digest-schema($checkbox-schema); - $variant: map.get($theme, '_meta', 'theme'); - - @if not($empty-color-hover) and $empty-color { - $empty-color-hover: hsl(from var(--empty-color) h s calc(l * 0.9)); - } - - @if not($fill-color-hover) and $fill-color { - $fill-color-hover: hsl(from var(--fill-color) h s calc(l * 0.9)); - } - - @if not($tick-color) and $fill-color { - $tick-color: adaptive-contrast(var(--fill-color)); - } - - @if not($label-color-hover) and $label-color { - $label-color-hover: hsl(from var(--label-color) h s calc(l * 0.9)); - } - - @if not($focus-border-color) and $fill-color { - $focus-border-color: var(--fill-color); - } - - @if not($disabled-indeterminate-color) and $fill-color { - $disabled-indeterminate-color: hsla(from var(--fill-color) h s l / 0.5); - } - - @if not($error-color-hover) and $error-color { - $error-color-hover: hsl(from var(--error-color) h s calc(l * 0.9)); - } - - @if not($focus-outline-color-error) and $error-color { - $focus-outline-color-error: hsla(from var(--error-color) h s l / .5); - } - - @if $variant == 'bootstrap' { - @if not($focus-outline-color) and $fill-color { - $focus-outline-color: hsla(from var(--fill-color) h s l / .5); - } - } - - @if $variant == 'indigo' { - @if not($focus-outline-color) and $empty-color { - $focus-outline-color: hsla(from var(--empty-color) h s l / .5); - } - - @if not($focus-outline-color-focused) and $fill-color { - $focus-outline-color-focused: hsla(from var(--fill-color) h s l / .5); - } - } - - @return extend($theme, ( - name: $name, - label-color: $label-color, - label-color-hover: $label-color-hover, - empty-color: $empty-color, - empty-color-hover: $empty-color-hover, - empty-fill-color: $empty-fill-color, - fill-color: $fill-color, - fill-color-hover: $fill-color-hover, - tick-color: $tick-color, - tick-color-hover: $tick-color-hover, - disabled-color: $disabled-color, - disabled-tick-color: $disabled-tick-color, - disabled-indeterminate-color: $disabled-indeterminate-color, - disabled-color-label: $disabled-color-label, - border-radius: $border-radius, - border-radius-ripple: $border-radius-ripple, - focus-outline-color: $focus-outline-color, - focus-outline-color-focused: $focus-outline-color-focused, - focus-border-color: $focus-border-color, - error-color: $error-color, - error-color-hover: $error-color-hover, - focus-outline-color-error: $focus-outline-color-error - )); -} /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars diff --git a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss index 4b5371c8cc6..861fbadb28d 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss @@ -1,271 +1,7 @@ @use 'sass:map'; -@use 'sass:meta'; -@use 'sass:color'; @use '../../base' as *; -@use '../../themes/schemas' as *; @use 'igniteui-theming/sass/animations/easings' as *; -//// -/// @group themes -/// @access public -/// @author Marin Popov -//// - -/// Chip Theme -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// @param {List} $border-radius [null] - The chip border-radius. -/// -/// @param {Color} $text-color [null] - The chip text color. -/// @param {Color} $background [null] - The chip background color. -/// @param {Color} $border-color [null] - The chip border color. -/// -/// @param {Color} $disabled-text-color [null] - The disabled chip text color. -/// @param {Color} $disabled-background [null] - The disabled chip background color. -/// @param {Color} $disabled-border-color [null] - The disabled chip border color. -/// -/// @param {Color} $ghost-background [null] - The chip ghost background color. -/// @param {box-shadow} $ghost-shadow [null] - The chip ghost shadow. -/// -/// @param {Color} $hover-text-color [null] - The chip text hover color. -/// @param {Color} $hover-background [null] - The chip hover background color. -/// @param {Color} $hover-border-color [null] - The chip hover border color. -/// -/// @param {Color} $focus-text-color [null] - The chip text focus color. -/// @param {Color} $focus-background [null] - The chip focus background color. -/// @param {color} $focus-border-color [null] - The chip focus border color. -/// -/// @param {color} $selected-text-color [null] - The selected chip text color. -/// @param {color} $selected-background [null] - The selected chip background color. -/// @param {color} $selected-border-color [null] The selected chip border color. -/// -/// @param {color} $hover-selected-text-color [null] - The selected chip hover text color. -/// @param {color} $hover-selected-background [null] - The selected chip hover background color. -/// @param {color} $hover-selected-border-color [null] - The selected chip hover border color. -/// -/// @param {color} $focus-selected-text-color [null] - The selected chip text focus color. -/// @param {color} $focus-selected-background [null] - The selected chip focus background color. -/// @param {color} $focus-selected-border-color [null] - The selected chip focus border color. -/// -/// @param {color} $remove-icon-color [null] - The remove icon color for the chip. -/// @param {color} $remove-icon-color-focus [null] - The remove icon color on focus for the chip. -/// -/// @requires $light-material-schema -/// -/// @example scss Change the background color -/// $my-chip-theme: igx-chip-theme($background: black); -/// // Pass the theme to the css-vars mixin -/// @include css-vars($my-chip-theme); -@function chip-theme( - $schema: $light-material-schema, - $border-radius: null, - - $text-color: null, - $background: null, - $border-color: null, - $ghost-background: null, - - $disabled-text-color: null, - $disabled-background: null, - $disabled-border-color: null, - - $hover-text-color: null, - $hover-background: null, - $hover-border-color: null, - - $focus-text-color: null, - $focus-background: null, - $focus-border-color: null, - $focus-outline-color: null, - - $selected-text-color: null, - $selected-background: null, - $selected-border-color: null, - - $hover-selected-text-color: null, - $hover-selected-background: null, - $hover-selected-border-color: null, - - $focus-selected-text-color: null, - $focus-selected-background: null, - $focus-selected-border-color: null, - $focus-selected-outline-color: null, - - $ghost-shadow: null, - $remove-icon-color: null, - $remove-icon-color-focus: null, - $size: null, -) { - $name: 'igx-chip'; - $selector: 'igx-chip, .igx-chip__ghost'; - $chip-schema: (); - - @if map.has-key($schema, 'chip') { - $chip-schema: map.get($schema, 'chip'); - } @else { - $chip-schema: $schema; - } - - $theme: digest-schema($chip-schema); - $variant: map.get($theme, '_meta', 'theme'); - - @if not($text-color) and $background { - $text-color: adaptive-contrast(var(--background)); - } - - @if not($border-color) and $background { - $border-color: var(--background); - } - - @if not($hover-background) and $background { - $hover-background: hsl(from var(--background) h s calc(l * 0.9)); - } - - @if not($hover-text-color) and $hover-background { - $hover-text-color: adaptive-contrast(var(--hover-background)); - } - - @if not($focus-background) and $background { - $focus-background: hsl(from var(--background) h s calc(l * 0.8)); - } - - @if $variant == 'fluent' { - @if not($focus-background) and $selected-background { - $focus-background: var(--selected-background); - } - } - - @if not($focus-text-color) and $focus-background { - $focus-text-color: adaptive-contrast(var(--focus-background)); - } - - @if $variant != 'indigo' and $variant != 'fluent' { - @if not($selected-background) and $background { - $selected-background: var(--background); - } - } @else { - @if not($selected-background) and $background { - $selected-background: hsl(from var(--background) h s calc(l * 1.1)); - } - } - - @if not($selected-text-color) and $selected-background { - $selected-text-color: adaptive-contrast(var(--selected-background)); - } - - @if not($hover-selected-background) and $selected-background { - $hover-selected-background: hsl(from var(--selected-background) h s calc(l * 0.9)); - } - - @if not($hover-selected-text-color) and $hover-selected-background { - $hover-selected-text-color: adaptive-contrast(var(--hover-selected-background)); - } - - @if $variant != 'indigo' { - @if not($focus-selected-background) and $selected-background { - $focus-selected-background: hsl(from var(--selected-background) h s calc(l * 0.8)); - } - } @else { - @if not($focus-selected-background) and $selected-background { - $focus-selected-background: var(--selected-background); - } - } - - @if not($focus-selected-text-color) and $focus-selected-background { - $focus-selected-text-color: adaptive-contrast(var(--focus-selected-background)); - } - - @if not($hover-border-color) and $border-color { - $hover-border-color: var(--border-color); - } - - @if not($focus-border-color) and $border-color { - $focus-border-color: var(--border-color); - } - - @if not($selected-border-color) and $border-color { - $selected-border-color: var(--border-color); - } - - @if not($hover-selected-border-color) and $border-color { - $hover-selected-border-color: var(--border-color); - } - - @if not($focus-selected-border-color) and $border-color { - $focus-selected-border-color: var(--border-color); - } - - @if $variant == 'indigo' { - @if not($selected-border-color) and $selected-background { - $selected-border-color: var(--selected-background); - } - - @if not($hover-selected-border-color) and $hover-selected-background { - $hover-selected-border-color: var(--hover-selected-background); - } - - @if not($focus-selected-border-color) and $focus-selected-background { - $focus-selected-border-color: var(--focus-selected-background); - } - } - - @if $variant == 'bootstrap' or $variant == 'indigo' { - @if not($focus-outline-color) and $focus-background { - $focus-outline-color: hsla(from var(--focus-background) h s l / 0.4); - } - - @if not($focus-selected-outline-color) and $focus-selected-background { - $focus-selected-outline-color: hsla(from var(--focus-selected-background) h s l / 0.4); - } - } - - @if not($ghost-shadow) { - $ghost-elevation: map.get($chip-schema, 'ghost-elevation'); - $ghost-shadow: elevation($ghost-elevation); - } - - @return extend($theme, ( - name: $name, - selector: $selector, - border-radius: $border-radius, - - text-color: $text-color, - background: $background, - border-color: $border-color, - ghost-background: $ghost-background, - - disabled-text-color: $disabled-text-color, - disabled-background: $disabled-background, - disabled-border-color: $disabled-border-color, - - hover-text-color: $hover-text-color, - hover-background: $hover-background, - hover-border-color: $hover-border-color, - - focus-text-color: $focus-text-color, - focus-background: $focus-background, - focus-border-color: $focus-border-color, - - selected-text-color: $selected-text-color, - selected-background: $selected-background, - selected-border-color: $selected-border-color, - - hover-selected-text-color: $hover-selected-text-color, - hover-selected-background: $hover-selected-background, - hover-selected-border-color: $hover-selected-border-color, - - focus-selected-text-color: $focus-selected-text-color, - focus-selected-background: $focus-selected-background, - focus-selected-border-color: $focus-selected-border-color, - - ghost-shadow: $ghost-shadow, - remove-icon-color: $remove-icon-color, - remove-icon-color-focus: $remove-icon-color-focus, - focus-selected-outline-color: $focus-selected-outline-color, - focus-outline-color: $focus-outline-color, - size: $size, - )); -} - /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @@ -307,7 +43,7 @@ @if $variant == 'indigo' { padding: rem(4px); - gap: rem(8px) + gap: rem(8px); } &:empty { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-theme.scss index 819dae048fa..319f935d6b3 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-theme.scss @@ -1,53 +1,5 @@ @use 'sass:map'; @use '../../base' as *; -@use '../../themes/schemas' as *; - -//// -/// @group themes -/// @access public -/// @author Simeon Simeonoff -/// @author Marin Popov -//// - -/// Column actions Theme -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// @param {Color} $title-color [null]- The text color used for the title of the list. -/// @param {Color} $background-color [null] - The background color of the panel. -/// -/// @requires $light-material-schema -/// -/// @example scss Change the title color -/// $column-actions-theme: igx-column-actions-theme($title-color: black); -/// // Pass the theme to the css-vars mixin -/// @include css-vars($column-actions-theme); -//// -@function column-actions-theme( - $schema: $light-material-schema, - - $title-color: null, - $background-color: null -) { - $name: 'igx-column-actions'; - $column-actions-schema: (); - - @if map.has-key($schema, 'column-actions') { - $column-actions-schema: map.get($schema, 'column-actions'); - } @else { - $column-actions-schema: $schema; - } - - $theme: digest-schema($column-actions-schema); - - @if not($title-color) and $background-color { - $title-color: adaptive-contrast(var(--background-color)); - } - - @return extend($theme, ( - name: $name, - title-color: $title-color, - background-color: $background-color, - )); -} /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars diff --git a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss index 25ea53c85b4..6b0f7cf4657 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss @@ -1,129 +1,5 @@ @use 'sass:map'; @use '../../base' as *; -@use '../../themes/schemas' as *; - -//// -/// @group themes -/// @access public -/// @author Marin Popov -/// @author Simeon Simeonoff -//// - -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// @param {Color} $search-separator-border-color [null] - The combo search box separator color. -/// @param {Color} $empty-list-placeholder-color [null] - The combo placeholder text color. -/// @param {Color} $empty-list-background [null] - The combo list background color. -/// @param {Color} $toggle-button-background [null] - The combo toggle button background color. -/// @param {Color} $toggle-button-background-focus [null] - The combo toggle button background color when the combo is focused in material box variant. -/// @param {Color} $toggle-button-background-focus--border [null] - The combo toggle button background color when the combo is focused in material border variant. -/// @param {Color} $toggle-button-background-disabled [null] - The combo toggle button background color when the combo is disabled. -/// @param {Color} $toggle-button-foreground [null] - The combo toggle button foreground color. -/// @param {Color} $toggle-button-foreground-focus [null] - The combo toggle button foreground color when the combo is focused. -/// @param {Color} $toggle-button-foreground-disabled [null] - The combo toggle button foreground color when the combo is disabled. -/// @param {Color} $toggle-button-foreground-filled [null] - The combo toggle button foreground color when the combo is filled. -/// @param {Color} $clear-button-background [null] - The combo clear button background color. -/// @param {Color} $clear-button-background-focus [null] - The combo clear button background color when the combo is focused. -/// @param {Color} $clear-button-foreground [null] - The combo clear button foreground color. -/// @param {Color} $clear-button-foreground-focus [null] - The combo clear button foreground color when the combo is focused. -/// @requires $light-material-schema -/// @example scss Change the combo empty list background -/// $my-combo-theme: igx-checkbox-theme($empty-list-background); -/// // Pass the theme to the css-vars mixin -/// @include css-vars($my-combo-theme); -@function combo-theme( - $schema: $light-material-schema, - $search-separator-border-color: null, - $empty-list-placeholder-color: null, - $empty-list-background: null, - $toggle-button-background: null, - $toggle-button-background-focus: null, - $toggle-button-background-disabled: null, - $toggle-button-foreground: null, - $toggle-button-foreground-focus: null, - $toggle-button-foreground-disabled: null, - $toggle-button-background-focus--border: null, - $clear-button-background: null, - $clear-button-background-focus: null, - $clear-button-foreground: null, - $clear-button-foreground-focus: null, - $toggle-button-foreground-filled: null, -) { - $name: 'igx-combo'; - $selector: 'igx-combo, igx-simple-combo'; - - $combo-schema: (); - - @if map.has-key($schema, 'combo') { - $combo-schema: map.get($schema, 'combo'); - } @else { - $combo-schema: $schema; - } - - $theme: digest-schema($combo-schema); - $variant: map.get($theme, '_meta', 'theme'); - - @if not($empty-list-placeholder-color) and $empty-list-background { - $empty-list-placeholder-color: adaptive-contrast(var(--empty-list-background)); - } - - @if not($toggle-button-foreground) and $toggle-button-background { - $toggle-button-foreground: adaptive-contrast(var(--toggle-button-background)); - } - - @if $variant == 'material' { - @if not($toggle-button-background-focus) and $toggle-button-background { - $toggle-button-background-focus: hsl(from var(--toggle-button-background) h s calc(l * 0.9)); - } - } @else { - @if not($toggle-button-background-focus) and $toggle-button-background { - $toggle-button-background-focus: var(--toggle-button-background); - } - } - - @if not($toggle-button-foreground-focus) and $toggle-button-background-focus { - $toggle-button-foreground-focus: adaptive-contrast(var(--toggle-button-background-focus)); - } - - @if not($toggle-button-background-focus--border) and $toggle-button-background { - $toggle-button-background-focus--border: var(--toggle-button-background); - } - - @if not($toggle-button-foreground-filled) and $toggle-button-background { - $toggle-button-foreground-filled: adaptive-contrast(var(--toggle-button-background)); - } - - @if not($toggle-button-background-disabled) and $toggle-button-background { - $toggle-button-background-disabled: hsla(from var(--toggle-button-background) h s l / 0.3); - } - - @if not($toggle-button-foreground-disabled) and $toggle-button-background { - $toggle-button-foreground-disabled: hsla(from adaptive-contrast(var(--toggle-button-background)) h s l / 0.7); - } - - @if not($clear-button-foreground-focus) and $clear-button-background-focus { - $clear-button-foreground-focus: adaptive-contrast(var(--clear-button-background-focus)); - } - - @return extend($theme, ( - name: $name, - selector: $selector, - search-separator-border-color: $search-separator-border-color, - empty-list-placeholder-color: $empty-list-placeholder-color, - empty-list-background: $empty-list-background, - toggle-button-background: $toggle-button-background, - toggle-button-background-focus: $toggle-button-background-focus, - toggle-button-background-disabled: $toggle-button-background-disabled, - toggle-button-foreground: $toggle-button-foreground, - toggle-button-foreground-focus: $toggle-button-foreground-focus, - toggle-button-foreground-disabled: $toggle-button-foreground-disabled, - toggle-button-foreground-filled: $toggle-button-foreground-filled, - toggle-button-background-focus--border: $toggle-button-background-focus--border, - clear-button-background: $clear-button-background, - clear-button-background-focus: $clear-button-background-focus, - clear-button-foreground: $clear-button-foreground, - clear-button-foreground-focus: $clear-button-foreground-focus, - )); -} /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars @@ -210,7 +86,7 @@ %igx-combo__case-icon { igx-icon { --igx-icon-disabled-color: var(--ig-gray-600); - + opacity: 1; } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss index 49902b47cb7..5cd16765d30 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss @@ -1,35 +1,5 @@ @use 'sass:map'; @use '../../base' as *; -@use '../../themes/schemas' as *; - -//// -/// @group themes -/// @access public -/// @author Marin Popov -//// - -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// @param {color} $label-color [null] - The color for date range separator label. -@function date-range-picker-theme( - $schema: $light-material-schema, - $label-color: null -) { - $name: 'igx-date-range-picker'; - $date-range-schema: (); - - @if map.has-key($schema, 'date-range') { - $date-range-schema: map.get($schema, 'date-range'); - } @else { - $date-range-schema: $schema; - } - - $theme: digest-schema($date-range-schema); - - @return extend($theme, ( - name: $name, - label-color: $label-color, - )); -} /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars diff --git a/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss index 88580758382..e2b9ef81250 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss @@ -1,80 +1,5 @@ @use 'sass:map'; -@use 'sass:meta'; @use '../../base' as *; -@use '../../themes/schemas' as *; - -//// -/// @group themes -/// @access public -/// @author Simeon Simeonoff -/// @author Marin Popov -//// - -/// Dialog Theme -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// @param {Color} $background [null] - The dialog background color. -/// @param {Color} $title-color [null] - The dialog title text color. -/// @param {Color} $message-color [null] - The dialog message text color. -/// @param {box-shadow} $shadow [null] - The shadow used for the dialog. -/// @param {List} $border-radius [null] - The border radius used for dialog component. -/// @param {Color} $border-color [null] - The border color used for dialog component. -/// @requires $light-material-schema -/// @example scss Change the background color -/// $my-dialog-theme: dialog-theme($background: black); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-dialog-theme); -@function dialog-theme( - $schema: $light-material-schema, - - $border-radius: null, - $border-color: null, - - $background: null, - $title-color: null, - $message-color: null, - $shadow: null, -) { - $name: 'igx-dialog'; - $selector: '.igx-dialog'; - - $dialog-schema: (); - - @if map.has-key($schema, 'dialog') { - $dialog-schema: map.get($schema, 'dialog'); - } @else { - $dialog-schema: $schema; - } - - $theme: digest-schema($dialog-schema); - - @if not($title-color) and $background{ - $title-color: adaptive-contrast(var(--background)); - } - - @if not($message-color) and $background{ - $message-color: hsla(from adaptive-contrast(var(--background)) h s l / .8); - } - - @if not($border-color) and $background{ - $border-color: hsla(from adaptive-contrast(var(--background)) h s l / .3); - } - - @if not($shadow) { - $elevation: map.get($dialog-schema, 'elevation'); - $shadow: elevation($elevation); - } - - @return extend($theme, ( - name: $name, - selector: $selector, - border-radius: $border-radius, - background: $background, - title-color: $title-color, - message-color: $message-color, - shadow: $shadow, - border-color: $border-color - )); -} /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars diff --git a/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-theme.scss index 8cf8dbfb696..e866e37f92b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-theme.scss @@ -1,44 +1,5 @@ @use 'sass:map'; @use '../../base' as *; -@use '../../themes/schemas' as *; - -//// -/// @group themes -/// @access public -/// @author Simeon Simeonoff -/// @author Marin Popov -//// - -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// @param {Color} $color [null] - The color of the divider. (Gradients are not supported for dashed dividers). -/// @param {number} $inset [null] - The inset value of the divider. -/// @requires $light-material-schema -/// @example scss Change the color of the divider -/// $my-divider-theme: divider-theme($color: orange); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-divider-theme); -@function divider-theme( - $schema: $light-material-schema, - $color: null, - $inset: null -) { - $name: 'igx-divider'; - $divider-schema: (); - - @if map.has-key($schema, 'divider') { - $divider-schema: map.get($schema, 'divider'); - } @else { - $divider-schema: $schema; - } - - $theme: digest-schema($divider-schema); - - @return extend($theme, ( - name: $name, - color: $color, - inset: $inset, - )); -} /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars diff --git a/projects/igniteui-angular/src/lib/core/styles/components/dock-manager/_dock-manager-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/dock-manager/_dock-manager-theme.scss index 7646e617ed9..de98af72230 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/dock-manager/_dock-manager-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/dock-manager/_dock-manager-theme.scss @@ -1,73 +1,5 @@ @use 'sass:map'; -@use 'sass:meta'; @use '../../base' as *; -@use '../../themes/schemas' as *; - -//// -/// @group themes -/// @access public -/// @author Simeon Simeonoff -/// @author Marin Popov -//// - -/// 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} $accent-color [null] - Sets the pinned header background color, the joystick background and border colors, as well as the context menu background color. -/// @param {Color} $active-color [null] - Sets the active text and border colors for tabs, panes, and menus. -/// @param {Color} $border-color [null] - Sets the global border color in the dock manager. Also sets the pane content background and the context menu active background colors. -/// @param {Color} $button-text [null] - Sets the button text color. -/// @param {Color} $context-menu-background [null] - Sets the background color for context menus. -/// @param {Color} $context-menu-background-active [null] - Sets the background color for active context menus. -/// @param {Color} $context-menu-color [null] - Sets the text color for context menus. -/// @param {Color} $context-menu-color-active [null] - Sets the text color for active context menus. -/// @param {Color} $dock-background [null] - Sets the background color of the dock manager. -/// @param {Color} $dock-text [null] - Sets the text color of the dock manager. -/// @param {Color} $drop-shadow-background [null] - Sets the drop-shadow background color. -/// @param {Color} $floating-pane-border-color [null] - Sets the border color for floating panes. -/// @param {Color} $flyout-shadow-color [null] - Sets the flyout shadow color. -/// @param {Color} $joystick-background [null] - Sets the background color of the joystick. -/// @param {Color} $joystick-background-active [null] - Sets the background color of the joysticks. -/// @param {Color} $joystick-border-color [null] - Sets the border color of the joystick. -/// @param {Color} $joystick-icon-color [null] - Sets the color for the joystick icons. -/// @param {Color} $joystick-icon-color-active [null] - Sets the color of the active joystick icons. -/// @param {Color} $pane-content-background [null] - Sets the background color of the content panes. -/// @param {Color} $pane-content-text [null] - Sets the text color of the content panes. -/// @param {Color} $pane-header-background [null] - Sets the background color for pane headers. -/// @param {Color} $pane-header-text [null] - Sets the text color for pane headers. -/// @param {Color} $pinned-header-background [null] - Sets the background colors of pinned headers. -/// @param {Color} $pinned-header-text [null] - Sets the text colors of pinned headers. -/// @param {Color} $background-color [null] - Sets the base dock manager color as well as the pane headers and tabs background colors. -/// @param {Color} $splitter-background [null] - Sets the background color for the splitters. -/// @param {Color} $splitter-handle [null] - Sets the background color for the splitter handles. -/// @param {Color} $tab-background [null] - Sets the background color for tabs. -/// @param {Color} $tab-background-active [null] - Sets the background color for active tabs. -/// @param {Color} $tab-border-color [null] - Sets the border color for tabs. -/// @param {Color} $tab-border-color-active [null] - Sets the border color for active tabs. -/// @param {Color} $tab-text [null] - Sets the text color for tabs. -/// @param {Color} $tab-text-active [null] - Sets the text color for active tabs. -/// @param {Color} $text-color [null] - Sets the text color for most elements in the dock manager. Used as the default joystick icon color. -/// @requires $light-material-schema -/// @example scss Change the background and icon colors in icon dock-managers -/// $my-dock-manager-theme: dock-manager-theme(); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-dock-manager-theme); -@function dock-manager-theme( - $schema: $light-material-schema, - $rest... -) { - $name: 'igc-dockmanager'; - $dock-manager-schema: (); - - @if map.has-key($schema, 'dockmanager') { - $dock-manager-schema: map.get($schema, 'dockmanager'); - } @else { - $dock-manager-schema: $schema; - } - - $theme: digest-schema($dock-manager-schema); - - @return extend($theme, (name: $name, prefix: 'igc'), meta.keywords($rest)); -} /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars diff --git a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss index ae41be38017..c5ce992bdc3 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss @@ -1,216 +1,5 @@ @use 'sass:map'; -@use 'sass:meta'; @use '../../base' as *; -@use '../../themes/schemas' as *; - -//// -/// @group themes -/// @access public -/// @author Marin Popov -/// @author Simeon Simeonoff -//// - -/// Generates a drop-down theme. -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// @param {Color} $background-color [null] - The drop-down background color. -/// @param {Color} $header-text-color [null] - The drop-down header text color. -/// @param {Color} $item-text-color [null] - The drop-down item text color. -/// @param {Color} $item-icon-color [null] - The drop-down item icon color. -/// @param {Color} $hover-item-text-color [null] - The drop-down item hover text color. -/// @param {Color} $hover-item-icon-color [null] - The drop-down item hover icon color. -/// @param {Color} $hover-item-background [null] - The drop-down hover item background color. -/// @param {Color} $focused-item-background [null] - The drop-down focused item background color. -/// @param {Color} $focused-item-text-color [null] - The drop-down focused item text color. -/// @param {Color} $focused-item-border-color [null] - The drop-down item focused border color. -/// @param {Color} $selected-item-background [null] - The drop-down selected item background color. -/// @param {Color} $selected-item-text-color [null] - The drop-down selected item text color. -/// @param {Color} $selected-item-icon-color [null] - The drop-down selected item icon color. -/// @param {Color} $selected-hover-item-background [null] - The drop-down selected item hover background color. -/// @param {Color} $selected-hover-item-text-color [null] - The drop-down selected item hover text color. -/// @param {Color} $selected-hover-item-icon-color [null] - The drop-down selected item hover icon color. -/// @param {Color} $selected-focus-item-background [null] - The drop-down selected item focus background color. -/// @param {Color} $selected-focus-item-text-color [null] - The drop-down selected item focus text color. -/// @param {Color} $disabled-item-background [null] - The drop-down disabled item background color. -/// @param {Color} $disabled-item-text-color [null] - The drop-down disabled item text color. -/// @param {box-shadow} $shadow [null] - Sets a shadow to be used for the drop-down. -/// @param {Number} $border-width [null] - The border width used for drop-down component. -/// @param {Color} $border-color [null] - The border color used for drop-down component. -/// @param {List} $border-radius [null] - The border radius used for drop-down component. -/// @param {List} $item-border-radius [null] - The border radius used for drop-down items. -/// @requires $light-material-schema -/// @example scss Change the background-color of the dropdown -/// $my-dropdown-theme: drop-down-theme($background-color: #09f); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-dropdown-theme); -@function drop-down-theme( - $schema: $light-material-schema, - - $border-radius: null, - $item-border-radius: null, - - $background-color: null, - $header-text-color: null, - - $item-text-color: null, - $item-icon-color: null, - $hover-item-text-color: null, - $hover-item-icon-color: null, - - $hover-item-background: null, - - $focused-item-background: null, - $focused-item-text-color: null, - $focused-item-border-color: null, - - $selected-item-background: null, - $selected-item-text-color: null, - $selected-item-icon-color: null, - - $selected-hover-item-background: null, - $selected-hover-item-text-color: null, - $selected-hover-item-icon-color: null, - - $selected-focus-item-background: null, - $selected-focus-item-text-color: null, - - $disabled-item-background: null, - $disabled-item-text-color: null, - $border-color: null, - $border-width: null, - $shadow: null, - $size: null -) { - $name: 'igx-drop-down'; - $selector: '.igx-drop-down__list, .igx-grid-toolbar__dd-list'; - $drop-down-schema: (); - - @if map.has-key($schema, 'drop-down') { - $drop-down-schema: map.get($schema, 'drop-down'); - } @else { - $drop-down-schema: $schema; - } - - $theme: digest-schema($drop-down-schema); - $variant: map.get($theme, '_meta', 'theme'); - - @if not($item-text-color) and $background-color { - $item-text-color: adaptive-contrast(var(--background-color)); - } - - @if not($item-icon-color) and $item-text-color { - $item-icon-color: hsla(from var(--item-text-color) h s l / 0.8); - } - - @if not($hover-item-background) and $background-color { - $hover-item-background: hsla(from adaptive-contrast(var(--background-color)) h s l / .12); - } - - @if not($hover-item-text-color) and $item-text-color { - $hover-item-text-color: var(--item-text-color); - } - - @if not($hover-item-icon-color) and $hover-item-text-color { - $hover-item-icon-color: hsla(from var(--hover-item-text-color) h s l / 0.8); - } - - @if not($focused-item-background) and $background-color { - $focused-item-background: hsl(from var(--background-color) h s calc(l * 0.8)); - } - - @if not($focused-item-text-color) and $focused-item-background { - $focused-item-text-color: adaptive-contrast(var(--focused-item-background)); - } - - @if not($selected-item-background) and $background-color { - $selected-item-background: hsl(from var(--background-color) h s calc(l * 1.2)); - } - - @if not($selected-item-text-color) and $selected-item-background { - $selected-item-text-color: adaptive-contrast(var(--selected-item-background)); - } - - @if not($selected-item-icon-color) and $selected-item-text-color { - $selected-item-icon-color: hsla(from var(--selected-item-text-color) h s l / 0.8); - } - - @if not($selected-hover-item-background) and $selected-item-background { - $selected-hover-item-background: hsl(from var(--selected-item-background) h s calc(l * 0.7)); - } - - @if not($selected-hover-item-text-color) and $selected-hover-item-background { - $selected-hover-item-text-color: adaptive-contrast(var(--selected-hover-item-background)); - } - - @if not($selected-hover-item-icon-color) and $selected-hover-item-text-color { - $selected-hover-item-icon-color: hsla(from var(--selected-hover-item-text-color) h s l / 0.8); - } - - @if not($selected-focus-item-background) and $selected-item-background { - $selected-focus-item-background: hsl(from var(--selected-item-background) h s calc(l * 0.7)); - } - - @if not($selected-focus-item-text-color) and $selected-focus-item-background { - $selected-focus-item-text-color: adaptive-contrast(var(--selected-focus-item-background)); - } - - @if not($selected-focus-item-text-color) and $selected-focus-item-background { - $selected-focus-item-text-color: adaptive-contrast(var(--selected-focus-item-background)); - } - - @if $variant == 'indigo' { - @if not($focused-item-border-color) and $selected-item-background { - $focused-item-border-color: var(--selected-item-background); - } - } - - @if not($disabled-item-text-color) and $background-color { - $disabled-item-text-color: hsla(from adaptive-contrast(var(--background-color)) h s l / .36); - } - - @if not($disabled-item-text-color) and $disabled-item-background { - $disabled-item-text-color: hsla(from adaptive-contrast(var(--disabled-item-background)) h s l / .36); - } - - @if not($header-text-color) and $background-color { - $header-text-color: hsla(from adaptive-contrast(var(--background-color)) h s l / .7); - } - - @if not($shadow) { - $elevation: map.get($drop-down-schema, 'elevation'); - $shadow: elevation($elevation); - } - - @return extend($theme, ( - name: $name, - selector: $selector, - background-color: $background-color, - border-radius: $border-radius, - item-border-radius: $item-border-radius, - header-text-color: $header-text-color, - item-text-color: $item-text-color, - item-icon-color: $item-icon-color, - hover-item-text-color: $hover-item-text-color, - hover-item-icon-color: $hover-item-icon-color, - hover-item-background: $hover-item-background, - focused-item-background: $focused-item-background, - focused-item-text-color: $focused-item-text-color, - focused-item-border-color: $focused-item-border-color, - selected-item-background: $selected-item-background, - selected-item-text-color: $selected-item-text-color, - selected-item-icon-color: $selected-item-icon-color, - selected-hover-item-background: $selected-hover-item-background, - selected-hover-item-text-color: $selected-hover-item-text-color, - selected-hover-item-icon-color: $selected-hover-item-icon-color, - selected-focus-item-background: $selected-focus-item-background, - selected-focus-item-text-color: $selected-focus-item-text-color, - disabled-item-background: $disabled-item-background, - disabled-item-text-color: $disabled-item-text-color, - shadow: $shadow, - border-color: $border-color, - border-width: $border-width, - size: $size, - )); -} /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars diff --git a/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss index 2798fbfd668..3fb86209dbe 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss @@ -1,103 +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 Marin Popov -//// - -/// Expansion panel Theme -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// @param {Color} $header-background [null] - The panel header background color. -/// @param {Color} $header-focus-background [null] - The panel header focus background color. -/// @param {Color} $header-title-color [null] - The panel header title text color. -/// @param {Color} $header-description-color [null] - The panel header description text color. -/// @param {Color} $header-icon-color [null] - The panel header icon color. -/// @param {Color} $body-color [null] - The panel body text color. -/// @param {Color} $body-background [null] - The panel body background color. -/// @param {Color} $disabled-text-color [null] - The panel disabled text color. -/// @param {Color} $disabled-description-color [null] - The panel disabled header description text color. -/// @param {Number} $expanded-margin [null] - The expansion panel margin in expanded state when positioned inside accordion. -/// @param {List} $border-radius [null] - The border radius used for expansion-panel component. -/// @requires $light-material-schema -/// @example scss Change the header background color -/// $my-expansion-panel-theme: expansion-panel-theme($header-background: black); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-expansion-panel-theme); -@function expansion-panel-theme( - $schema: $light-material-schema, - - $border-radius: null, - $header-background: null, - $header-focus-background: null, - $header-title-color: null, - $header-description-color: null, - $header-icon-color: null, - $body-color: null, - $body-background: null, - $disabled-text-color: null, - $disabled-description-color: null, - $expanded-margin: null -) { - $name: 'igx-expansion-panel'; - $expansion-panel-schema: (); - - @if map.has-key($schema, 'expansion-panel') { - $expansion-panel-schema: map.get($schema, 'expansion-panel'); - } @else { - $expansion-panel-schema: $schema; - } - - $theme: digest-schema($expansion-panel-schema); - - @if not($header-title-color) and $header-background { - $header-title-color: adaptive-contrast(var(--header-background)); - } - - @if not($header-icon-color) and $header-background { - $header-icon-color: adaptive-contrast(var(--header-background)); - } - - @if not($header-description-color) and $header-background { - $header-description-color: hsla(from adaptive-contrast(var(--header-background)) h s l / .8); - } - - @if not($header-focus-background) and $header-background { - $header-focus-background: hsl(from var(--header-background) h s calc(l * 1.1)); - } - - @if not($body-color) and $body-background { - $body-color: adaptive-contrast(var(--body-background)); - } - - @if not($disabled-text-color) and $header-background { - $disabled-text-color: hsla(from adaptive-contrast(var(--header-background)) h s l / .5); - } - - @if not($disabled-description-color) and $header-background { - $disabled-description-color: hsla(from adaptive-contrast(var(--header-background)) h s l / .5); - } - - @return extend($theme, ( - name: $name, - header-background: $header-background, - border-radius: $border-radius, - header-focus-background: $header-focus-background, - header-title-color: $header-title-color, - header-description-color: $header-description-color, - header-icon-color: $header-icon-color, - body-color: $body-color, - body-background: $body-background, - disabled-text-color: $disabled-text-color, - disabled-description-color: $disabled-description-color, - expanded-margin: $expanded-margin, - )); -} - /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss index f82f8e2559e..82a0e5827fc 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss @@ -1,89 +1,5 @@ @use 'sass:map'; -@use 'sass:meta'; @use '../../base' as *; -@use '../../themes/schemas' as *; - -//// -/// @group themes -/// @access public -/// @author Simeon Simeonoff -/// @author Marin Popov -//// - -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// @param {Color} $background-color [null] - The summaries background color is inherited form igx-grid__tfoot -/// @param {Color} $label-color [null] - The summaries label color. -/// @param {Color} $result-color [null] - The summaries value/result color. -/// @param {Color} $border-color [null] - The summaries border color. -/// @param {Color} $pinned-border-width [null] - The border width of the summary panel. -/// @param {Color} $pinned-border-style [null] - The border style of the summary panel. -/// @param {Color} $pinned-border-color [null] - The border color of the summary panel. -/// @param {Color} $label-hover-color [null] - The summaries hover label color. -/// @requires $light-material-schema -/// @example scss Change the summaries background and labels color -/// $my-summary-theme: grid-summary-theme( -/// $background-color: black, -/// $label-color: white -/// ); -/// // Pass the theme to the css-vars mixin -/// @include css-vars($my-summary-theme); -@function grid-summary-theme( - $schema: $light-material-schema, - - $background-color: null, - $label-color: null, - $result-color: null, - $border-color: null, - $pinned-border-width: null, - $pinned-border-style: null, - $pinned-border-color: null, - $label-hover-color: null -) { - $name: 'igx-grid-summary'; - $selector: '.igx-grid-summary'; - $grid-summary-schema: (); - - @if map.has-key($schema, 'grid-summary') { - $grid-summary-schema: map.get($schema, 'grid-summary'); - } @else { - $grid-summary-schema: $schema; - } - - $theme: digest-schema($grid-summary-schema); - - @if not($label-color) and $background-color { - $label-color: adaptive-contrast(var(--background-color)); - } - - @if not($label-hover-color) and $label-color { - $label-hover-color: var(--label-color); - } - - @if not($result-color) and $background-color { - $result-color: adaptive-contrast(var(--background-color)); - } - - @if not($border-color) and $background-color { - $border-color: hsla(from adaptive-contrast(var(--background-color)) h s l / .26); - } - - @if not($pinned-border-color) and $background-color { - $pinned-border-color: hsla(from adaptive-contrast(var(--background-color)) h s l / .26); - } - - @return extend($theme, ( - name: $name, - selector: $selector, - background-color: $background-color, - label-color: $label-color, - result-color: $result-color, - border-color: $border-color, - pinned-border-width: $pinned-border-width, - pinned-border-style: $pinned-border-style, - pinned-border-color: $pinned-border-color, - label-hover-color: $label-hover-color, - )); -} /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss index da35e179b9f..dcc63f3d22c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss @@ -1,97 +1,5 @@ @use 'sass:map'; @use '../../base' as *; -@use '../../themes/schemas' as *; - -//// -/// @group themes -/// @access public -/// @author Marin Popov -/// @author Simeon Simeonoff -//// - -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// @param {Color} $background-color [null] - The toolbar background color. -/// @param {Color} $title-text-color [null] - The toolbar title text color. -/// @param {Color} $dropdown-background [null] - The toolbar drop-down background color. -/// @param {Color} $item-text-color [null] - The toolbar drop-down item text color. -/// @param {Color} $item-hover-background [null] - The toolbar drop-down item hover background color. -/// @param {Color} $item-hover-text-color [null] - The toolbar drop-down item hover text color. -/// @param {Color} $item-focus-background [null] - The toolbar drop-down item focus background color. -/// @param {Color} $item-focus-text-color [null] - The toolbar drop-down item focus text color. -/// @param {Color} $border-color [null] - The toolbar border-bottom color. -/// @requires $light-material-schema -/// @example scss Change the toolbar background color -/// $my-toolbar-theme: grid-toolbar-theme( -/// $background-color: black -/// ); -/// // Pass the theme to the css-vars mixin -/// @include css-vars($my-toolbar-theme); -@function grid-toolbar-theme( - $schema: $light-material-schema, - - $background-color: null, - $title-text-color: null, - - $dropdown-background: null, - $item-text-color: null, - $item-hover-background: null, - $item-hover-text-color: null, - $item-focus-background: null, - $item-focus-text-color: null, - $size: null, - $border-color: null, -) { - $name: 'igx-grid-toolbar'; - $selector: 'igx-grid-toolbar, .igx-grid-toolbar__dd-list'; - $grid-toolbar-schema: (); - - @if map.has-key($schema, 'grid-toolbar') { - $grid-toolbar-schema: map.get($schema, 'grid-toolbar'); - } @else { - $grid-toolbar-schema: $schema; - } - - $theme: digest-schema($grid-toolbar-schema); - - @if not($title-text-color) and $background-color { - $title-text-color: adaptive-contrast(var(--background-color)); - } - - @if not($item-text-color) and $dropdown-background { - $item-text-color: adaptive-contrast(var(--dropdown-background)); - } - - @if not($item-hover-text-color) and $dropdown-background { - $item-hover-text-color: adaptive-contrast(var(--dropdown-background)); - } - - @if not($item-focus-text-color) and $dropdown-background { - $item-focus-text-color: adaptive-contrast(var(--dropdown-background)); - } - - @if not($item-hover-text-color) and $item-hover-background { - $item-hover-text-color: adaptive-contrast(var(--item-hover-background)); - } - - @if not($item-focus-text-color) and $item-focus-background { - $item-focus-text-color: adaptive-contrast(var(--item-focus-background)); - } - - @return extend($theme, ( - name: $name, - selector: $selector, - background-color: $background-color, - title-text-color: $title-text-color, - item-text-color: $item-text-color, - dropdown-background: $dropdown-background, - item-hover-background: $item-hover-background, - item-hover-text-color: $item-hover-text-color, - item-focus-background: $item-focus-background, - item-focus-text-color: $item-focus-text-color, - size: $size, - border-color: $border-color - )); -} /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss index 7b8d69c5555..a21bc57ddb5 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss @@ -3,7 +3,6 @@ @use '../button-group/button-group-component' as *; @use '../button-group/button-group-theme' as *; @use '../tree/tree-theme' as *; -@use '../../themes/schemas' as *; //// /// @group themes diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss index 97f1073e8f6..cc5ce39d8af 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss @@ -1,587 +1,8 @@ @use 'sass:map'; -@use 'sass:meta'; -@use 'sass:color'; @use 'sass:math'; @use '../../base' as *; @use './excel-filtering-theme' as *; @use 'igniteui-theming/sass/animations' as *; -@use '../../themes/schemas' as *; - -//// -/// @group themes -/// @access public -/// @author Simeon Simeonoff -/// @author Marin Popov -//// - -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// @param {Color} $header-background [null] - The table header background color. -/// @param {Color} $header-text-color [null] - The table header text color. -/// @param {String} $header-border-width [null] - The border width used for header borders. -/// @param {String} $header-border-style [null] - The border style used for header borders. -/// @param {Color} $header-border-color [null] - The color used for header borders. -/// @param {Color} $header-selected-background [null] - The table header background color when selected (ex. column selection). -/// @param {Color} $header-selected-text-color [null] - The table header text color when selected (ex. column selection). -/// @param {Color} $sorted-header-icon-color [null] - The sort icon color when sorted. -/// @param {color} $sortable-header-icon-hover-color [null] - The icon color on hover in grid header when the column is sortable. -/// @param {Color} $content-background [null] - The table body background color. -/// @param {Color} $content-text-color [null] - The table body text color. -/// @param {Color} $ghost-header-text-color [null] - The dragged header text color. -/// @param {Color} $ghost-header-icon-color [null] - The dragged header icon color. -/// @param {Color} $ghost-header-background [null] - The dragged header background color. -/// @param {Color} $row-odd-background [null] - The background color of odd rows. -/// @param {Color} $row-even-background [null] - The background color of even rows. -/// @param {Color} $row-odd-text-color [null] - The text color of odd rows. -/// @param {Color} $row-even-text-color [null] - The text color of even rows. -/// @param {Color} $row-selected-background [null] - The selected row background color. -/// @param {Color} $row-selected-hover-background [null] - The selected row hover background color. -/// @param {Color} $row-selected-text-color [null] - The selected row text color. -/// @param {Color} $row-selected-hover-text-color [null] - The selected row hover text color. -/// @param {Color} $row-hover-background [null] - The hover row background color. -/// @param {Color} $row-hover-text-color [null] - The hover row text color. -/// @param {Color} $row-border-color [null] - The row bottom border color. -/// @param {String} $pinned-border-width [null] - The border width of the pinned border. -/// @param {String} $pinned-border-style [null] - The CSS border style of the pinned border. -/// @param {Color} $pinned-border-color [null] - The color of the pinned border. -/// @param {Color} $cell-active-border-color [null] - The border color for the currently active(focused) cell. -/// @param {Color} $cell-selected-background [null] - The selected cell background color. -/// @param {Color} $cell-selected-text-color [null] - The selected cell text color. -/// @param {Color} $cell-editing-background [null] - The background color of the cell being edited. -/// @param {Color} $cell-editing-foreground [null] - The cell text color in edit mode. -/// @param {Color} $cell-editing-focus-foreground [null] - The cell text color in edit mode on focus. -/// @param {Color} $cell-edited-value-color [null] - The text color of a cell that has been edited. -/// @param {Color} $cell-new-color [null] - The text color of a new, unedited cell. Used when adding new row in a grid. -/// @param {Color} $cell-disabled-color [null] - The text color of a disabled cell. -/// @param {Color} $cell-selected-within-background [null] - The background of the selected cell inside a selected row/column. -/// @param {Color} $cell-selected-within-text-color [null] - The color of the selected cell inside a selected row/column. -/// @param {Color} $edit-mode-color [null] - The color applied around the row/cell when in editing mode. -/// @param {Color} $edited-row-indicator [null] - The color applied to the edited row indicator line. -/// @param {Color} $resize-line-color [null] - The table header resize line color. -/// @param {Color} $drop-indicator-color [null] - The color applied to the line between the columns when dragging a column. -/// @param {Color} $grouparea-background [null] - The grid group area background color. -/// @param {Color} $grouparea-color [null] - The grid group area color. -/// @param {Color} $group-row-background [null] - The grid group row background color. -/// @param {Color} $group-row-selected-background [null] - The drop area background on drop color. -/// @param {Color} $group-label-column-name-text [null] - The grid group row column name text color. -/// @param {Color} $group-label-icon [null] - The grid group row icon color. -/// @param {Color} $group-label-text [null] - The grid group row text color. -/// @param {Color} $expand-all-icon-color [null] - The grid header expand all group rows icon color. -/// @param {Color} $expand-all-icon-hover-color [null] - The grid header expand all group rows icon hover color. -/// @param {Color} $expand-icon-color [null] - The grid row expand icon color. -/// @param {Color} $expand-icon-hover-color [null] - The grid row expand icon hover color. -/// @param {Color} $active-expand-icon-color [null] - The drop area background on drop color. -/// @param {Color} $active-expand-icon-hover-color [null] - The drop area background on drop color. -/// @param {Color} $group-count-background [null] - The grid group row cont badge background color. -/// @param {Color} $group-count-text-color [null] - The grid group row cont badge text color. -/// @param {Color} $drop-area-text-color [null] - The drop area text color. -/// @param {Color} $drop-area-icon-color [null] - The drop area icon color. -/// @param {Color} $drop-area-background [null] - The drop area background color. -/// @param {Color} $drop-area-on-drop-background [null] - The drop area background on drop color. -/// @param {Color} $filtering-background-and [null] - The background color of advanced filtering "AND" condition. -/// @param {Color} $filtering-background-and--focus [null] - The background color on focus/selected of advanced filtering "AND" condition. -/// @param {Color} $filtering-background-or [null] - The background color of advanced filtering "OR" condition. -/// @param {Color} $filtering-background-or--focus [null] - The background color on focus/selected of advanced filtering "OR" condition. -/// @param {Color} $filtering-header-background [null] - The background color of the filtered column header. -/// @param {Color} $filtering-header-text-color [null] - The text color of the filtered column header. -/// @param {Color} $filtering-row-background [null] - The background color of the filtering row. -/// @param {Color} $filtering-row-text-color [null] - The text color of the filtering row. -/// @param {Color} $excel-filtering-header-foreground [null] - The text color of the header in the excel style filtering. -/// @param {Color} $excel-filtering-subheader-foreground [null] - The text color of the sorting and moving headers in the excel style filtering. -/// @param {Color} $excel-filtering-actions-foreground [null] - The text color of the excel style filtering options. -/// @param {Color} $excel-filtering-actions-hover-foreground [null] - The text color of the excel style filtering options in hover/focus state. -/// @param {Color} $excel-filtering-actions-disabled-foreground [null] - The text color of the excel style filtering options in disabled state. -/// @param {Color} $tree-filtered-text-color [null] - Grouping row background color on focus. -/// @param {Color} $summaries-patch-background [null] - The leading summaries patch backround. Used in hierarchical grids. -/// @param {Color} $row-highlight [null] - The grid row highlight indication color. -/// @param {box-shadow} $grid-shadow [null] - The shadow of the grid. -/// @param {box-shadow} $drag-shadow [null] - The shadow used for movable elements (ex. column headers). -/// @param {color} $row-ghost-background [null] - The dragged row background color. -/// @param {color} $row-drag-color [null] - The row drag handle color. -/// @param {Color} $grid-border-color [null] - The color of the grid border. -/// @param {List} $drop-area-border-radius [null] - The border radius used for column drop area. -/// @requires $light-material-schema -/// @example scss Change the header background color -/// $my-grid-theme: grid-theme($header-background: black); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-grid-theme); -@function grid-theme( - $schema: $light-material-schema, - - $header-background: null, - $header-text-color: null, - $header-border-width: null, - $header-border-style: null, - $header-border-color: null, - - $header-selected-background: null, - $header-selected-text-color: null, - - $sorted-header-icon-color: null, - - $content-background: null, - $content-text-color: null, - - $ghost-header-text-color: null, - $ghost-header-icon-color: null, - $ghost-header-background: null, - - $row-odd-background: null, - $row-even-background: null, - $row-odd-text-color: null, - $row-even-text-color: null, - $row-selected-background: null, - $row-selected-hover-background: null, - $row-selected-text-color: null, - $row-selected-hover-text-color: null, - $row-hover-background: null, - $row-hover-text-color: null, - $row-border-color: null, - - $pinned-border-width: null, - $pinned-border-style: null, - $pinned-border-color: null, - - $cell-active-border-color: null, - $cell-selected-background: null, - $cell-selected-text-color: null, - $cell-editing-background: null, - $cell-editing-foreground: null, - $cell-editing-focus-foreground: null, - $cell-edited-value-color: null, - $cell-new-color: null, - $cell-disabled-color: null, - - $edit-mode-color: null, - $edited-row-indicator: null, - - $resize-line-color: null, - $drop-indicator-color: null, - - $grouparea-background: null, - $grouparea-color: null, - - $group-row-background: null, - $group-row-selected-background: null, - $group-label-column-name-text: null, - $group-label-icon: null, - $group-label-text: null, - - $expand-all-icon-color: null, - $expand-all-icon-hover-color: null, - - $expand-icon-color: null, - $expand-icon-hover-color: null, - - $active-expand-icon-color: null, - $active-expand-icon-hover-color: null, - - $group-count-background: null, - $group-count-text-color: null, - - $drop-area-text-color: null, - $drop-area-icon-color: null, - $drop-area-background: null, - $drop-area-on-drop-background: null, - - $filtering-header-background: null, - $filtering-header-text-color: null, - $filtering-row-background: null, - $filtering-row-text-color: null, - $filtering-background-and: null, - $filtering-background-or: null, - $filtering-background-and--focus: null, - $filtering-background-or--focus: null, - $tree-filtered-text-color: null, - $tree-selected-filtered-row-text-color: null, - $tree-selected-filtered-cell-text-color: null, - - $excel-filtering-header-foreground: null, - $excel-filtering-subheader-foreground: null, - $excel-filtering-actions-foreground: null, - $excel-filtering-actions-hover-foreground: null, - $excel-filtering-actions-disabled-foreground: null, - - $row-highlight: null, - $grid-shadow: null, - $drag-shadow: null, - $row-ghost-background: null, - $row-drag-color: null, - $drop-area-border-radius: null, - $grid-border-color: null, - $sortable-header-icon-hover-color: null, - $summaries-patch-background: null, - - $cell-selected-within-background: null, - $cell-selected-within-text-color: null, -) { - $name: 'igx-grid'; - $selector: 'igx-grid, igx-hierarchical-grid, igx-pivot-grid, igx-tree-grid, igx-advanced-filtering-dialog, igx-grid-excel-style-filtering, .igx-excel-filter__secondary'; - $grid-schema: (); - - @if map.has-key($schema, 'grid') { - $grid-schema: map.get($schema, 'grid'); - } @else { - $grid-schema: $schema; - } - - $theme: digest-schema($grid-schema); - - @if not($ghost-header-icon-color) and $ghost-header-background { - $ghost-header-icon-color: hsla(from adaptive-contrast(var(--ghost-header-background)) h s l / .07); - } - - @if not($ghost-header-text-color) and $ghost-header-background { - $ghost-header-text-color: adaptive-contrast(var(--ghost-header-background)); - } - - @if not($header-text-color) and $header-background { - $header-text-color: adaptive-contrast(var(--header-background)); - } - - @if not($header-selected-background) and $header-background { - $header-selected-background: hsl(from var(--header-background) h s calc(l * 0.9)); - } - - @if not($header-selected-text-color) and $header-selected-background { - $header-selected-text-color: adaptive-contrast(var(--header-selected-background)); - } - - @if not($header-border-color) and $header-background { - $header-border-color: hsla(from adaptive-contrast(var(--header-background)) h s l / .24); - } - - @if not($content-text-color) and $content-background { - $content-text-color: adaptive-contrast(var(--content-background)); - } - - @if not($row-odd-background) and $content-background { - $row-odd-background: hsl(from var(--content-background) h calc(s - 10) l); - } - - @if not($row-odd-text-color) and $row-odd-background { - $row-odd-text-color: adaptive-contrast(var(--row-odd-background)); - } - - @if not($row-even-background) and $content-background { - $row-even-background: hsl(from var(--content-background) h calc(s + 10) l); - } - - @if not($row-even-text-color) and $row-even-background { - $row-even-text-color: adaptive-contrast(var(--row-even-background)); - } - - @if not($row-hover-background) and $content-background { - $row-hover-background: hsl(from var(--content-background) h s calc(l * 0.85)); - } - - @if not($row-hover-text-color) and $row-hover-background { - $row-hover-text-color: adaptive-contrast(var(--row-hover-background)); - } - - @if not($cell-selected-background) and $content-background { - $cell-selected-background: hsl(from var(--content-background) h s calc(l * 0.9)); - } - - @if not($cell-selected-text-color) and $cell-selected-background { - $cell-selected-text-color: adaptive-contrast(var(--cell-selected-background)); - } - - @if not($row-selected-background) and $content-background { - $row-selected-background: hsl(from var(--content-background) h s calc(l * 0.9)); - } - - @if not($row-selected-text-color) and $row-selected-background { - $row-selected-text-color: adaptive-contrast(var(--row-selected-background)); - } - - @if not($row-selected-hover-background) and $row-selected-background { - $row-selected-hover-background: hsl(from var(--row-selected-background) h s calc(l * 0.85)); - } - - @if not($row-selected-hover-text-color) and $row-selected-hover-background { - $row-selected-hover-text-color: adaptive-contrast(var(--row-selected-hover-background)); - } - - @if not($row-border-color) and $content-background { - $row-border-color: hsla(from adaptive-contrast(var(--content-background)) h s l / .08); - } - - @if not($cell-selected-within-background) and $row-selected-background { - $cell-selected-within-background: hsl(from var(--row-selected-background) h s calc(l * 0.85)); - } - - @if not($cell-selected-within-text-color) and $cell-selected-within-background { - $cell-selected-within-text-color: adaptive-contrast(var(--cell-selected-within-background)); - } - - @if not($cell-editing-background) and $content-background { - $cell-editing-background: var(--content-background); - } - - @if not($cell-editing-foreground) and $cell-editing-background { - $cell-editing-foreground: adaptive-contrast(var(--cell-editing-background)); - } - - @if not($cell-editing-focus-foreground) and $cell-editing-background { - $cell-editing-focus-foreground: adaptive-contrast(var(--cell-editing-background)); - } - - @if not($cell-active-border-color) and $content-background { - $cell-active-border-color: hsla(from adaptive-contrast(var(--content-background)) h s l / .5); - } - - @if not($pinned-border-color) and $content-background { - $pinned-border-color: hsla(from adaptive-contrast(var(--content-background)) h s l / .08); - } - - @if not($group-row-background) and $header-background { - $group-row-background: $header-background - } - - @if not($expand-icon-color) and $group-row-background { - $expand-icon-color: adaptive-contrast(var(--group-row-background)) - } - - @if not($group-row-selected-background) and $group-row-background { - $group-row-selected-background: hsl(from var(--group-row-background) h s calc(l * 0.8)); - } - - @if not($group-label-text) and $group-row-selected-background { - $group-label-text: adaptive-contrast(var(--group-row-selected-background)) - } - - @if not($expand-icon-color) and $group-row-selected-background { - $expand-icon-color: adaptive-contrast(var(--group-row-selected-background)) - } - - @if not($expand-icon-hover-color) and $expand-icon-color { - $expand-icon-hover-color: var(--expand-icon-color); - } - - @if not($group-count-background) and $group-row-selected-background { - $group-count-background: adaptive-contrast(var(--group-row-selected-background)); - } - - @if not($expand-all-icon-color) and $header-background { - $expand-all-icon-color: hsla(from adaptive-contrast(var(--header-background)) h s l / .87); - } - - @if not($expand-all-icon-hover-color) and $header-background { - $expand-all-icon-hover-color: adaptive-contrast(var(--header-background)); - } - - @if not($sorted-header-icon-color) and $header-background { - $sorted-header-icon-color: hsla(from adaptive-contrast(var(--header-background)) h s l / 0.8); - } - - @if not($sortable-header-icon-hover-color) and $sorted-header-icon-color { - $sortable-header-icon-hover-color: hsla(from var(--sorted-header-icon-color) h s l / 1); - } - - @if not($edit-mode-color) and $content-background { - $edit-mode-color: hsla(from adaptive-contrast(var(--content-background)) h s l / 0.5); - } - - @if not($group-label-text) and $group-row-background { - $group-label-text: adaptive-contrast(var(--group-row-background)) - } - - @if not($group-count-background) and $group-row-background { - $group-count-background: adaptive-contrast(var(--group-row-background)); - } - - @if not($group-count-text-color) and $group-count-background { - $group-count-text-color: adaptive-contrast(var(--group-count-background)); - } - - @if not($grouparea-background) and $header-background { - $grouparea-background: var(--header-background); - } - - @if not($grouparea-color) and $grouparea-background { - $grouparea-color: hsla(from adaptive-contrast(var(--grouparea-background)) h s l / .8); - } - - @if not($grouparea-color) and $header-background { - $grouparea-color: hsla(from adaptive-contrast(var(--header-background)) h s l / .8); - } - - @if not($drop-area-background) and $grouparea-background { - $drop-area-background: adaptive-contrast(var(--grouparea-background)); - } - - @if not($drop-area-on-drop-background) and $drop-area-background { - $drop-area-on-drop-background: $drop-area-background; - } - - @if not($drop-area-text-color) and $drop-area-background { - $drop-area-text-color: adaptive-contrast(var(--drop-area-background)); - } - - @if not($drop-area-icon-color) and $drop-area-background { - $drop-area-icon-color: adaptive-contrast(var(--drop-area-background)); - } - - @if not($filtering-header-background) and $header-background { - $filtering-header-background: color-mix(in hsl, var(--header-background), #fff 5%); - } - - @if not($filtering-header-text-color) and $filtering-header-background { - $filtering-header-text-color: adaptive-contrast(var(--filtering-header-background)); - } - - @if not($filtering-row-background) and $header-background { - $filtering-row-background: color-mix(in hsl, var(--header-background), #fff 5%); - } - - @if not($filtering-row-text-color) and $filtering-row-background { - $filtering-row-text-color: adaptive-contrast(var(--filtering-row-background)); - } - - @if not($excel-filtering-header-foreground) and $filtering-row-background { - $excel-filtering-header-foreground: adaptive-contrast(var(--filtering-row-background)); - } - - @if not($excel-filtering-subheader-foreground) and $filtering-row-background { - $excel-filtering-subheader-foreground: adaptive-contrast(var(--filtering-row-background)); - } - - @if not($excel-filtering-actions-foreground) and $filtering-row-background { - $excel-filtering-actions-foreground: hsla(from adaptive-contrast(var(--filtering-row-background)) h s l / 0.8); - } - - @if not($excel-filtering-actions-disabled-foreground) and $filtering-row-background { - $excel-filtering-actions-disabled-foreground: hsla(from adaptive-contrast(var(--filtering-row-background)) h s l / 0.5); - } - - @if not($grid-shadow) { - $grid-elevation: map.get($grid-schema, 'grid-elevation'); - $grid-shadow: elevation($grid-elevation); - } - - @if not($drag-shadow) { - $drag-elevation: map.get($grid-schema, 'drag-elevation'); - $drag-shadow: elevation($drag-elevation); - } - - @if not($drop-area-border-radius) { - $drop-area-border-radius: map.get($theme, 'drop-area-border-radius'); - } - - @return extend($theme, ( - name: $name, - selector: $selector, - - header-background: $header-background, - header-text-color: $header-text-color, - header-selected-background: $header-selected-background, - header-selected-text-color: $header-selected-text-color, - header-border-width: $header-border-width, - header-border-style: $header-border-style, - header-border-color: $header-border-color, - - sorted-header-icon-color: $sorted-header-icon-color, - - ghost-header-text-color: $ghost-header-text-color, - ghost-header-icon-color: $ghost-header-icon-color, - ghost-header-background: $ghost-header-background, - - content-background: $content-background, - content-text-color: $content-text-color, - - row-odd-background: $row-odd-background, - row-even-background: $row-even-background, - row-odd-text-color: $row-odd-text-color, - row-even-text-color: $row-even-text-color, - row-selected-background: $row-selected-background, - row-selected-hover-background: $row-selected-hover-background, - row-selected-text-color: $row-selected-text-color, - row-selected-hover-text-color: $row-selected-hover-text-color, - row-hover-background: $row-hover-background, - row-hover-text-color: $row-hover-text-color, - row-border-color: $row-border-color, - - pinned-border-width: $pinned-border-width, - pinned-border-style: $pinned-border-style, - pinned-border-color: $pinned-border-color, - - cell-active-border-color: $cell-active-border-color, - cell-selected-background: $cell-selected-background, - cell-editing-background: $cell-editing-background, - cell-editing-foreground: $cell-editing-foreground, - cell-editing-focus-foreground: $cell-editing-focus-foreground, - cell-selected-text-color: $cell-selected-text-color, - - edit-mode-color: $edit-mode-color, - edited-row-indicator: $edited-row-indicator, - cell-edited-value-color: $cell-edited-value-color, - cell-new-color: $cell-new-color, - - cell-disabled-color: $cell-disabled-color, - - resize-line-color: $resize-line-color, - - drop-indicator-color: $drop-indicator-color, - - grouparea-background: $grouparea-background, - grouparea-color: $grouparea-color, - - group-label-column-name-text: $group-label-column-name-text, - group-label-icon: $group-label-icon, - group-label-text: $group-label-text, - - expand-all-icon-color: $expand-all-icon-color, - expand-all-icon-hover-color: $expand-all-icon-hover-color, - - expand-icon-color: $expand-icon-color, - expand-icon-hover-color: $expand-icon-hover-color, - active-expand-icon-color: $active-expand-icon-color, - active-expand-icon-hover-color: $active-expand-icon-hover-color, - - group-count-background: $group-count-background, - group-count-text-color: $group-count-text-color, - - group-row-background: $group-row-background, - group-row-selected-background: $group-row-selected-background, - - drop-area-text-color: $drop-area-text-color, - drop-area-icon-color: $drop-area-icon-color, - drop-area-on-drop-background: $drop-area-on-drop-background, - drop-area-background: $drop-area-background, - - filtering-header-background: $filtering-header-background, - filtering-header-text-color: $filtering-header-text-color, - filtering-row-background: $filtering-row-background, - filtering-row-text-color: $filtering-row-text-color, - filtering-background-and: $filtering-background-and, - filtering-background-or: $filtering-background-or, - filtering-background-and--focus: $filtering-background-and--focus, - filtering-background-or--focus: $filtering-background-or--focus, - - excel-filtering-header-foreground: $excel-filtering-header-foreground, - excel-filtering-subheader-foreground: $excel-filtering-subheader-foreground, - excel-filtering-actions-foreground: $excel-filtering-actions-foreground, - excel-filtering-actions-hover-foreground: $excel-filtering-actions-hover-foreground, - excel-filtering-actions-disabled-foreground: $excel-filtering-actions-disabled-foreground, - - tree-filtered-text-color: $tree-filtered-text-color, - tree-selected-filtered-row-text-color: $tree-selected-filtered-row-text-color, - tree-selected-filtered-cell-text-color: $tree-selected-filtered-cell-text-color, - - row-highlight: $row-highlight, - grid-shadow: $grid-shadow, - drag-shadow: $drag-shadow, - row-ghost-background: $row-ghost-background, - row-drag-color: $row-drag-color, - drop-area-border-radius: $drop-area-border-radius, - sortable-header-icon-hover-color: $sortable-header-icon-hover-color, - grid-border-color: $grid-border-color, - summaries-patch-background: $summaries-patch-background, - - cell-selected-within-background: $cell-selected-within-background, - cell-selected-within-text-color: $cell-selected-within-text-color, - )); -} @mixin _filtering-scroll-mask($theme, $dir) { display: block; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-theme.scss index 7a575101755..c4a1a7235a5 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-theme.scss @@ -1,60 +1,5 @@ @use 'sass:map'; @use '../../base' as *; -@use '../../themes/schemas' as *; - -//// -/// @group themes -/// @access public -/// @author Simeon Simeonoff -//// - -/// If only background color(s) specified, text color(s) 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} $resting-background [null]- The background color used for the highlight in its resting state. -/// @param {Color} $resting-color [null] - The text color used for the highlight in its resting state. -/// @param {Color} $active-background [null] - The background color used for the highlight in its active state. -/// @param {Color} $active-color [null] - The text color used for the highlight in its active state. -/// @requires $light-material-schema -/// @example scss Change the background and icon colors in icon highlight -/// $my-highlight-theme: highlight-theme($resting-background: black, $active-color: white); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-highlight-theme); -@function highlight-theme( - $schema: $light-material-schema, - $resting-background: null, - $resting-color: null, - $active-background: null, - $active-color: null, -) { - $name: 'igx-highlight'; - $selector: '.igx-highlight'; - $highlight-schema: (); - - @if map.has-key($schema, 'highlight') { - $highlight-schema: map.get($schema, 'highlight'); - } @else { - $highlight-schema: $schema; - } - - $theme: digest-schema($highlight-schema); - - @if not($resting-color) and $resting-background { - $resting-color: adaptive-contrast(var(--resting-background)); - } - - @if not($active-color) and $active-background { - $active-color: adaptive-contrast(var(--active-background)); - } - - @return extend($theme, ( - name: $name, - selector: $selector, - resting-background: $resting-background, - resting-color: $resting-color, - active-background: $active-background, - active-color: $active-color, - )); -} /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_contained-icon-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_contained-icon-button-theme.scss deleted file mode 100644 index 8c186676e21..00000000000 --- a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_contained-icon-button-theme.scss +++ /dev/null @@ -1,196 +0,0 @@ -@use 'sass:map'; -@use '../../base' as *; -@use '../../themes/schemas' as *; - -@function contained-icon-button-theme( - $schema: $light-material-schema, - - $background: null, - $foreground: null, - $shadow-color: null, - - $hover-background: null, - $hover-foreground: null, - - $focus-background: null, - $focus-foreground: null, - - $focus-hover-background: null, - $focus-hover-foreground: null, - - $active-background: null, - $active-foreground: null, - - $border-radius: null, - $border-color: null, - $focus-border-color: null, - - $disabled-background: null, - $disabled-foreground: null, - $disabled-border-color: null, - - $size: null, -) { - $name: 'igx-contained-icon-button'; - $icon-button-schema: (); - - @if map.has-key($schema, 'icon-button') { - $icon-button-schema: map.get($schema, 'icon-button'); - @if map.has-key($icon-button-schema, 'contained') { - $icon-button-schema: map.get($icon-button-schema, 'contained'); - } @else { - $icon-button-schema: $schema; - } - } - - $theme: digest-schema($icon-button-schema); - $variant: map.get($schema, '_meta', 'theme'); - - @if not($hover-foreground) and $foreground { - $hover-foreground: var(--foreground); - } - - @if not($focus-foreground) and $foreground { - $focus-foreground: var(--foreground); - } - - @if not($focus-hover-foreground) and $foreground { - $focus-hover-foreground: var(--foreground); - } - - @if not($active-foreground) and $foreground { - $active-foreground: var(--foreground); - } - - @if $variant == 'indigo' { - @if not($foreground) and $background { - $foreground: hsla(from adaptive-contrast(var(--background)) h s l / 0.8); - } - - @if not($hover-background) and $background { - $hover-background: hsl(from var(--background) h s calc(l * 1.1)); - } - - @if not($focus-background) and $background { - $focus-background: var(--background); - } - - @if not($focus-foreground) and $foreground { - $focus-foreground: var(--foreground); - } - - @if not($focus-hover-background) and $focus-background { - $focus-hover-background: hsl(from var(--focus-background) h s calc(l * 1.1)); - } - - @if not($active-background) and $background { - $active-background: hsl(from var(--background) h s calc(l * 1.1)); - } - } @else { - @if not($foreground) and $background { - $foreground: adaptive-contrast(var(--background)); - } - - @if not($hover-background) and $background { - $hover-background: hsl(from var(--background) h s calc(l * 0.9)); - } - - @if not($focus-background) and $background { - @if $variant == 'fluent' or $variant == 'bootstrap' { - $focus-background: var(--background); - } @else { - $focus-background: hsl(from var(--background) h s calc(l * 0.8)); - } - } - - @if not($focus-foreground) and $focus-background { - $focus-foreground: adaptive-contrast(var(--focus-background)); - } - - @if not($focus-hover-background) and $focus-background { - $focus-hover-background: hsl(from var(--focus-background) h s calc(l * 0.9)); - } - - @if not($active-background) and $background { - $active-background: hsl(from var(--background) h s calc(l * 0.8)); - } - } - - @if not($hover-foreground) and $hover-background { - $hover-foreground: adaptive-contrast(var(--hover-background)); - } - - @if not($focus-hover-foreground) and $focus-hover-background { - $focus-hover-foreground: adaptive-contrast(var(--focus-hover-background)); - } - - @if not($active-foreground) and $active-background { - $active-foreground: adaptive-contrast(var(--active-background)); - } - - @if not($shadow-color) and $focus-background { - $shadow-color: hsla(from var(--focus-background) h s l / 0.5); - } - - @if $variant == 'fluent' { - @if not($focus-border-color) and $foreground { - $focus-border-color: var(--foreground); - } - } @else { - @if not($focus-border-color) and $border-color { - $focus-border-color: hsl(from var(--border-color) h s calc(l * 0.8)); - } - } - - @if $variant == 'indigo' { - @if not($disabled-background) and $background { - $disabled-background: hsla(from var(--background) h s l / 0.4); - } - - @if not($disabled-foreground) and $foreground { - $disabled-foreground: hsla(from var(--foreground) h s l / 0.5); - } - - @if not($focus-border-color) and $focus-background { - $focus-border-color: hsla(from var(--focus-background) h s l / 0.3); - } - } @else if $variant == 'bootstrap' { - @if not($disabled-background) and $background { - $disabled-background: hsla(from var(--background) h s l / 0.2); - } - - @if not($disabled-foreground) and $disabled-background { - $disabled-foreground: hsla(from var(--disabled-background) h s l / 0.7); - } - } - - @return extend( - $theme, - ( - name: $name, - background: $background, - foreground: $foreground, - shadow-color: $shadow-color, - - 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, - - active-background: $active-background, - active-foreground: $active-foreground, - - border-radius: $border-radius, - border-color: $border-color, - focus-border-color: $focus-border-color, - - disabled-background: $disabled-background, - disabled-foreground: $disabled-foreground, - disabled-border-color: $disabled-border-color, - size: $size, - )); -} diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_flat-icon-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_flat-icon-button-theme.scss deleted file mode 100644 index c5d35da4741..00000000000 --- a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_flat-icon-button-theme.scss +++ /dev/null @@ -1,188 +0,0 @@ -@use 'sass:map'; -@use '../../base' as *; -@use '../../themes/schemas' as *; - -@function flat-icon-button-theme( - $schema: $light-material-schema, - - $background: null, - $foreground: null, - $shadow-color: null, - - $hover-background: null, - $hover-foreground: null, - - $focus-background: null, - $focus-foreground: null, - - $focus-hover-background: null, - $focus-hover-foreground: null, - - $active-background: null, - $active-foreground: null, - - $border-radius: null, - $border-color: null, - $focus-border-color: null, - - $disabled-background: null, - $disabled-foreground: null, - $disabled-border-color: null, - - $size: null, -) { - $name: 'igx-flat-icon-button'; - $icon-button-schema: (); - - @if map.has-key($schema, 'icon-button') { - $icon-button-schema: map.get($schema, 'icon-button'); - @if map.has-key($icon-button-schema, 'flat') { - $icon-button-schema: map.get($icon-button-schema, 'flat'); - } @else { - $icon-button-schema: $schema; - } - } - - $theme: digest-schema($icon-button-schema); - $variant: map.get($schema, '_meta', 'theme'); - - @if not($hover-foreground) and $hover-background { - $hover-foreground: adaptive-contrast(var(--hover-background)); - } - - @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($active-foreground) and $active-background { - $active-foreground: adaptive-contrast(var(--active-background)); - } - - @if $variant == 'material' or $variant == 'fluent' { - @if not($hover-foreground) and $foreground { - $hover-foreground: var(--foreground); - } - - @if not($focus-foreground) and $foreground { - $focus-foreground: var(--foreground); - } - - @if not($focus-hover-foreground) and $foreground { - $focus-hover-foreground: var(--foreground); - } - - @if not($active-foreground) and $foreground { - $active-foreground: var(--foreground); - } - - @if not($hover-background) and $foreground { - $hover-background: hsla(from var(--foreground) h s l / 0.08); - } - - @if $variant == 'material' { - @if not($focus-background) and $foreground { - $focus-background: hsla(from var(--foreground) h s l / 0.16); - } - - @if not($focus-hover-background) and $foreground { - $focus-hover-background: hsla(from var(--foreground) h s l / 0.24); - } - } @else { - @if not($focus-hover-background) and $hover-background { - $focus-hover-background: var(--hover-background); - } - } - - @if not($active-background) and $foreground { - $active-background: hsla(from var(--foreground) h s l / 0.24); - } - } - - @if $variant == 'indigo' { - @if not($hover-background) and $foreground { - $hover-background: hsla(from var(--foreground) h s l / 0.15); - } - - @if not($focus-background) and $foreground { - $focus-background: hsla(from var(--foreground) h s l / 0.15); - } - - @if not($focus-hover-background) and $foreground { - $focus-hover-background: hsla(from var(--foreground) h s l / 0.15); - } - - @if not($active-background) and $foreground { - $active-background: hsla(from var(--foreground) h s l / 0.15); - } - } - - @if $variant == 'bootstrap'or $variant == 'indigo' { - @if not($hover-foreground) and $foreground { - $hover-foreground: hsl(from var(--foreground) h s calc(l * 0.9)); - } - - @if not($focus-foreground) and $foreground { - $focus-foreground: var(--foreground); - } - - @if not($focus-hover-foreground) and $hover-foreground { - $focus-hover-foreground: var(--hover-foreground); - } - - @if not($disabled-foreground) and $foreground { - $disabled-foreground: hsla(from var(--foreground) h s l / 0.5); - } - - @if $variant == 'bootstrap' { - @if not($active-foreground) and $foreground { - $active-foreground: hsl(from var(--foreground) h s calc(l * 0.7)); - } - - @if not($shadow-color) and $foreground { - $shadow-color: hsla(from var(--foreground) h s l / 0.5); - } - } @else { - @if not($active-foreground) and $hover-foreground { - $active-foreground: var(--hover-foreground); - } - - @if not($focus-border-color) and $foreground { - $focus-border-color: hsla(from var(--foreground) h s l / 0.3); - } - } - } - - @return extend( - $theme, - ( - name: $name, - background: $background, - foreground: $foreground, - shadow-color: $shadow-color, - - 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, - - active-background: $active-background, - active-foreground: $active-foreground, - - border-radius: $border-radius, - border-color: $border-color, - focus-border-color: $focus-border-color, - - disabled-background: $disabled-background, - disabled-foreground: $disabled-foreground, - disabled-border-color: $disabled-border-color, - size: $size, - )); -} diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss index f8f788b2214..287af03d470 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss @@ -1,119 +1,7 @@ @use 'sass:map'; @use 'sass:meta'; @use 'sass:list'; -@use 'sass:color'; @use '../../base' as *; -@use '../../themes/schemas' as *; - -@forward './flat-icon-button-theme'; -@forward './contained-icon-button-theme'; -@forward './outlined-icon-button-theme'; - -//// -/// @group themes -/// @access public -/// @author Silvia Ivanova -//// - -@function icon-button-theme( - $schema: $light-material-schema, - - $background: null, - $foreground: null, - $shadow-color: null, - - $hover-background: null, - $hover-foreground: null, - - $focus-background: null, - $focus-foreground: null, - - $focus-hover-background: null, - $focus-hover-foreground: null, - - $active-background: null, - $active-foreground: null, - - $border-radius: null, - $border-color: null, - $focus-border-color: null, - - $disabled-background: null, - $disabled-foreground: null, - $disabled-border-color: null, - - $size: null, -) { - $name: 'igx-icon-button'; - $icon-button-schema: (); - - @if map.has-key($schema, 'icon-button') { - $icon-button-schema: map.get($schema, 'icon-button'); - } @else { - $icon-button-schema: $schema; - } - - $themes: (); - $variant: null; - - @each $_name, $_schema in $icon-button-schema { - @if not($variant) { - $variant: map.get($schema, '_meta', 'theme'); - } - - @if not($foreground) and $background { - $foreground: adaptive-contrast(var(--background)); - } - - @if not($hover-foreground) and $hover-background { - $hover-foreground: adaptive-contrast(var(--hover-background)); - } - - @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)); - } - - $themes: map.merge($themes, ( - $_name: extend( digest-schema($_schema), ( - name: $name, - background: $background, - foreground: $foreground, - shadow-color: $shadow-color, - - 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, - - active-background: $active-background, - active-foreground: $active-foreground, - - border-radius: $border-radius, - border-color: $border-color, - focus-border-color: $focus-border-color, - - disabled-background: $disabled-background, - disabled-foreground: $disabled-foreground, - 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 diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_outlined-icon-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_outlined-icon-button-theme.scss deleted file mode 100644 index 9ecc8857f99..00000000000 --- a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_outlined-icon-button-theme.scss +++ /dev/null @@ -1,232 +0,0 @@ -@use 'sass:map'; -@use '../../base' as *; -@use '../../themes/schemas' as *; - -@function outlined-icon-button-theme( - $schema: $light-material-schema, - - $background: null, - $foreground: null, - $shadow-color: null, - - $hover-background: null, - $hover-foreground: null, - - $focus-background: null, - $focus-foreground: null, - - $focus-hover-background: null, - $focus-hover-foreground: null, - - $active-background: null, - $active-foreground: null, - - $border-radius: null, - $border-color: null, - $focus-border-color: null, - - $disabled-background: null, - $disabled-foreground: null, - $disabled-border-color: null, - - $size: null, -) { - $name: 'igx-outlined-icon-button'; - $icon-button-schema: (); - - @if map.has-key($schema, 'icon-button') { - $icon-button-schema: map.get($schema, 'icon-button'); - @if map.has-key($icon-button-schema, 'outlined') { - $icon-button-schema: map.get($icon-button-schema, 'outlined'); - } @else { - $icon-button-schema: $schema; - } - } - - $theme: digest-schema($icon-button-schema); - $variant: map.get($schema, '_meta', 'theme'); - - @if not($hover-foreground) and $hover-background { - $hover-foreground: adaptive-contrast(var(--hover-background)); - } - - @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($active-foreground) and $active-background { - $active-foreground: adaptive-contrast(var(--active-background)); - } - - @if $variant == 'material' or $variant == 'fluent' { - @if not($hover-foreground) and $foreground { - $hover-foreground: var(--foreground); - } - - @if not($focus-foreground) and $foreground { - $focus-foreground: var(--foreground); - } - - @if not($focus-hover-foreground) and $foreground { - $focus-hover-foreground: var(--foreground); - } - - @if not($active-foreground) and $foreground { - $active-foreground: var(--foreground); - } - - @if not($hover-background) and $foreground { - $hover-background: hsla(from var(--foreground) h s l / 0.08); - } - - @if not($active-background) and $foreground { - $active-background: hsla(from var(--foreground) h s l / 0.24); - } - - @if $variant == 'material' { - @if not($focus-background) and $foreground { - $focus-background: hsla(from var(--foreground) h s l / 0.16); - } - - @if not($focus-hover-background) and $foreground { - $focus-hover-background: hsla(from var(--foreground) h s l / 0.24); - } - - @if not($border-color) and $foreground { - $border-color: hsla(from var(--foreground) h s l / 0.4); - } - } @else { - @if not($focus-hover-background) and $hover-background { - $focus-hover-background: var(--hover-background); - } - - @if not($focus-border-color) and $foreground { - $focus-border-color: var(--foreground); - } - - @if not($border-color) and $foreground { - $border-color: hsla(from var(--foreground) h s l / 0.7); - } - } - } - - @if $variant == 'indigo' { - @if not($border-color) and $foreground { - $border-color: hsla(from var(--foreground) h s l / 0.8); - } - - @if not($hover-foreground) and $foreground { - $hover-foreground: hsl(from var(--foreground) h s calc(l * 0.9)); - } - - @if not($hover-background) and $foreground { - $hover-background: hsla(from var(--foreground) h s l / 0.1); - } - - @if not($focus-foreground) and $foreground { - $focus-foreground: var(--foreground); - } - - @if not($focus-border-color) and $foreground { - $focus-border-color: hsla(from var(--foreground) h s l / 0.2); - } - - @if not($focus-hover-foreground) and $hover-foreground { - $focus-hover-foreground: var(--hover-foreground); - } - - @if not($active-foreground) and $hover-foreground { - $active-foreground: var(--hover-foreground); - } - } - - @if $variant == 'bootstrap' { - @if not($border-color) and $foreground { - $border-color: var(--foreground); - } - - @if not($hover-background) and $foreground { - $hover-background: var(--foreground); - } - - @if not($hover-foreground) and $hover-background { - $hover-foreground: adaptive-contrast(var(--hover-background)); - } - - @if not($focus-background) and $foreground { - $focus-background: var(--foreground); - } - - @if not($focus-foreground) and $focus-background { - $focus-foreground: adaptive-contrast(var(--focus-background)); - } - - @if not($focus-hover-background) and $focus-background { - $focus-hover-background: hsl(from var(--focus-background) h s calc(l * 0.9)); - } - - @if not($focus-hover-foreground) and $focus-hover-background { - $focus-hover-foreground: adaptive-contrast(var(--focus-hover-background)); - } - - @if not($active-background) and $foreground { - $active-background: hsl(from var(--foreground) h s calc(l * 0.8)); - } - - @if not($active-foreground) and $active-background { - $active-foreground: adaptive-contrast(var(--active-background)); - } - - @if not($focus-border-color) and $active-background { - $focus-border-color: var(--active-background); - } - - @if not($shadow-color) and $focus-background { - $shadow-color: hsla(from var(--focus-background) h s l / 0.5); - } - } - - @if $variant == 'bootstrap' or $variant == 'indigo' { - @if not($disabled-foreground) and $foreground { - $disabled-foreground: hsla(from var(--foreground) h s l / 0.5); - } - - @if not($disabled-border-color) and $border-color { - $disabled-border-color: hsla(from var(--border-color) h s l / 0.2); - } - } - - @return extend( - $theme, - ( - name: $name, - background: $background, - foreground: $foreground, - shadow-color: $shadow-color, - - 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, - - active-background: $active-background, - active-foreground: $active-foreground, - - border-radius: $border-radius, - border-color: $border-color, - focus-border-color: $focus-border-color, - - disabled-background: $disabled-background, - disabled-foreground: $disabled-foreground, - disabled-border-color: $disabled-border-color, - size: $size, - )); -} diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss index a70edbc4dd4..7e4a6f9c081 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss @@ -1,48 +1,5 @@ @use 'sass:map'; @use '../../base' as *; -@use '../../themes/schemas' as *; - -//// -/// @group themes -/// @access public -/// @author Simeon Simeonoff -/// @author Marin Popov -//// - -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// @param {Color} $color [null] - The icon color. -/// @param {String} $size [null] - The icon size. -/// @param {Color} $disabled-color [null] - The disabled icon color. -/// @requires $light-material-schema -/// @example scss Change the icon color -/// $my-icon-theme: icon-theme($color: orange); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-icon-theme); -@function icon-theme( - $schema: $light-material-schema, - - $color: null, - $size: null, - $disabled-color: null -) { - $name: 'igx-icon'; - $icon-schema: (); - - @if map.has-key($schema, 'icon') { - $icon-schema: map.get($schema, 'icon'); - } @else { - $icon-schema: $schema; - } - - $theme: digest-schema($icon-schema); - - @return extend($theme, ( - name: $name, - color: $color, - size: $size, - disabled-color: $disabled-color, - )); -} // stylelint-disable font-family-no-missing-generic-family-keyword /// @deprecated Use the `css-vars` mixin instead. diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss index ae993f8177d..1b036517f8e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss @@ -1,533 +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 Simeon Simeonoff -//// - -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// @param {Color} $idle-text-color [null] - The input text color in the idle state. -/// @param {Color} $filled-text-color [null] - The input text color in the filled state. -/// @param {Color} $filled-text-hover-color [null] - The input text color in the filled state on hover. -/// @param {Color} $focused-text-color [null] - The input text color in the focused state. -/// @param {Color} $disabled-text-color [null] - The input text color in the disabled state. -/// @param {Color} $helper-text-color [null] - The helper text color. -/// @param {Color} $input-prefix-color [null] - The input prefix color in the idle state. -/// @param {Color} $input-prefix-background [null] - The background color of an input prefix in the idle state. -/// @param {Color} $input-prefix-color--filled [null] - The input prefix color in the filled state. -/// @param {Color} $input-prefix-background--filled] - The background color of an input prefix in the filled state. -/// @param {Color} $input-prefix-color--focused [null] - The input prefix color in the focused state. -/// @param {Color} $input-prefix-background--focused [null] - The background color of an input prefix in the focused state. -/// @param {Color} $input-suffix-color [null] - The input suffix color in the idle state. -/// @param {Color} $input-suffix-background [null] - The background color of an input suffix in the idle state. -/// @param {Color} $input-suffix-color--filled [null] - The input suffix color in the filled state. -/// @param {Color} $input-suffix-background-filled [null] - The background color of an input suffix in the filled state. -/// @param {Color} $input-suffix-color--focused [null] - The input suffix color in the focused state. -/// @param {Color} $input-suffix-background--focused [null] - The background color of an input suffix in the focused state. -/// @param {Color} $idle-secondary-color [null] - The label color in the idle state. -/// @param {Color} $focused-secondary-color [null] - The label color in the focused state. -/// @param {Color} $idle-bottom-line-color [null] - The bottom line and border colors in the idle state. -/// @param {Color} $hover-bottom-line-color [null] - The bottom line and border colors in the hover state. -/// @param {Color} $focused-bottom-line-color [null] - The bottom line and border colors in the focused state. -/// @param {Color} $disabled-bottom-line-color [null] - The bottom line and border colors in the disabled state. -/// @param {Color} $border-color [null] - The border color for input groups of type border and fluent. -/// @param {Color} $hover-border-color [null] - The hover input border for input groups of type border and fluent. -/// @param {Color} $focused-border-color [null] - The focused input border color for input groups of type border and fluent. -/// @param {Color} $disabled-border-color [null] - The disabled border color for input groups of type border and fluent. -/// @param {Color} $box-background [null] - The background color of an input group of type box. -/// @param {Color} $box-background-hover [null] - The background color on hover of an input group of type box. -/// @param {Color} $box-background-focus [null] - The background color on focus of an input group of type box. -/// @param {Color} $box-disabled-background [null] - The background color of an input group of type box in the disabled state. -/// @param {Color} $border-background [null] - The background color of an input group of type border. -/// @param {Color} $border-disabled-background [null] - The background color of an input group of type border in the disabled state. -/// @param {Color} $search-background [null] - The background color of an input group of type search. -/// @param {Color} $search-disabled-background [null] - The background color of an input group of type search in the disabled state. -/// @param {box-shadow} $search-resting-shadow [null] - The shadow color of an input group of type search in its resting state. -/// @param {box-shadow} $search-hover-shadow [null] - The shadow color of an input group of type search in its hover state. -/// @param {box-shadow} $search-disabled-shadow [null] - The shadow color of an input group of type search in its disabled state. -/// @param {Color} $success-secondary-color [null] - The success color used in the valid state. -/// @param {Color} $warning-secondary-color [null] - The warning color used in the warning state. -/// @param {Color} $error-secondary-color [null] - The error color used in the error state. -/// @param {List} $box-border-radius [null] - The border radius used for box input. -/// @param {List} $border-border-radius [null] - The border radius used for border input. -/// @param {List} $search-border-radius [null] - The border radius used for search input. -/// @param {Color} placeholder-color [null] - The placeholder color of an input group. -/// @param {Color} hover-placeholder-color [null] - The placeholder color of an input group on hover. -/// @param {Color} disabled-placeholder-color [null] - The disabled placeholder color of an input group. -/// @example scss Change the focused border and label colors -/// $my-input-group-theme: input-group-theme($focused-secondary-color: pink, $focused-bottom-line-color: pink); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-input-group-theme); -@function input-group-theme( - $schema: $light-material-schema, - - $box-background: null, - $box-background-hover: null, - $box-background-focus: null, - $box-disabled-background: null, - $box-border-radius: null, - - $idle-text-color: null, - $filled-text-color: null, - $filled-text-hover-color: null, - $focused-text-color: null, - $helper-text-color: null, - $disabled-text-color: null, - - $idle-secondary-color: null, - $focused-secondary-color: null, - - $idle-bottom-line-color: null, - $hover-bottom-line-color: null, - $focused-bottom-line-color: null, - $disabled-bottom-line-color: null, - - $border-color: null, - $hover-border-color: null, - $focused-border-color: null, - $disabled-border-color: null, - - $border-border-radius: null, - $border-background: null, - $border-disabled-background: null, - - $search-background: null, - $search-disabled-background: null, - $search-border-radius: null, - $search-resting-shadow: null, - $search-hover-shadow: null, - $search-disabled-shadow: null, - - $success-secondary-color: null, - $warning-secondary-color: null, - $error-secondary-color: null, - $success-shadow-color: null, - $error-shadow-color: null, - - $placeholder-color: null, - $hover-placeholder-color: null, - $disabled-placeholder-color: null, - - $input-prefix-color: null, - $input-prefix-background: null, - $input-prefix-color--filled: null, - $input-prefix-background--filled: null, - $input-prefix-color--focused: null, - $input-prefix-background--focused: null, - - $input-suffix-color: null, - $input-suffix-background: null, - $input-suffix-color--filled: null, - $input-suffix-background--filled: null, - $input-suffix-color--focused: null, - $input-suffix-background--focused: null, - $size: null, -) { - $name: 'igx-input-group'; - $selector: 'igx-input-group, igx-date-range-start, igx-date-range-end'; - $input-group-schema: (); - - @if map.has-key($schema, 'input-group') { - $input-group-schema: map.get($schema, 'input-group'); - } @else { - $input-group-schema: $schema; - } - - $theme: digest-schema($input-group-schema); - $variant: map.get($theme, '_meta', 'theme'); - - $search-resting-elevation: map.get($input-group-schema, 'search-resting-elevation'); - $search-hover-elevation: map.get($input-group-schema, 'search-hover-elevation'); - $search-disabled-elevation: map.get($input-group-schema, 'search-disabled-elevation'); - - @if $variant == 'material' { - @if not($box-background-hover) and $box-background { - $box-background-hover: var(--box-background); - } - - @if not($box-background-focus) and $box-background { - $box-background-focus: hsl(from var(--box-background) h s calc(l * 0.9)); - } - - @if not($placeholder-color) and $box-background { - $placeholder-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.9); - } - - @if not($hover-placeholder-color) and $box-background-hover { - $hover-placeholder-color: hsla(from adaptive-contrast(var(--box-background-hover)) h s l / 0.9); - } - - @if not($idle-text-color) and $box-background { - $idle-text-color: adaptive-contrast(var(--box-background)); - } - - @if not($filled-text-color) and $box-background { - $filled-text-color: adaptive-contrast(var(--box-background)); - } - - @if not($filled-text-hover-color) and $box-background { - $filled-text-hover-color: adaptive-contrast(var(--box-background)); - } - - @if not($focused-text-color) and $box-background-focus { - $focused-text-color: adaptive-contrast(var(--box-background-focus)); - } - - @if not($idle-secondary-color) and $box-background { - $idle-secondary-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.9); - } - - @if not($input-prefix-color) and $box-background { - $input-prefix-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.9); - } - - @if not($input-prefix-color--filled) and $box-background { - $input-prefix-color--filled: adaptive-contrast(var(--box-background)); - } - - @if not($input-prefix-color--focused) and $box-background-focus { - $input-prefix-color--focused: adaptive-contrast(var(--box-background-focus)); - } - - @if not($input-suffix-color) and $box-background { - $input-suffix-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.9); - } - - @if not($input-suffix-color--filled) and $box-background { - $input-suffix-color--filled: adaptive-contrast(var(--box-background)); - } - - @if not($input-suffix-color--focused) and $box-background-focus { - $input-suffix-color--focused: adaptive-contrast(var(--box-background-focus)); - } - - @if $box-background != transparent { - @if not($box-disabled-background) and $box-background { - $box-disabled-background: hsla(from var(--box-background) h s l / 0.4); - } - - @if not($disabled-placeholder-color) and $box-disabled-background { - $disabled-placeholder-color: adaptive-contrast(var(--box-disabled-background)); - } - - @if not($disabled-text-color) and $box-disabled-background { - $disabled-text-color: adaptive-contrast(var(--box-disabled-background)); - } - } @else { - @if not($box-disabled-background) and $box-background { - $box-disabled-background: var(--box-background); - } - - @if not($disabled-placeholder-color) and $placeholder-color { - $disabled-placeholder-color: hsla(from var(--placeholder-color) h s l / 0.7); - } - - @if not($disabled-text-color) and $idle-text-color { - $disabled-text-color: hsla(from var(--idle-text-color) h s l / 0.7); - } - } - } - - @if $variant == 'fluent' or $variant == 'bootstrap' { - @if not($input-prefix-background) and $input-suffix-background { - $input-prefix-background: var(--input-suffix-background); - } - - @if not($input-suffix-background) and $input-prefix-background { - $input-suffix-background: var(--input-prefix-background); - } - } - - @if $variant == 'material' or $variant == 'indigo' { - //bottom line color - @if not($hover-bottom-line-color) and $idle-bottom-line-color { - $hover-bottom-line-color: hsl(from var(--idle-bottom-line-color) h s calc(l * 0.8)); - } - - @if not($focused-bottom-line-color) and $hover-bottom-line-color { - $focused-bottom-line-color: var(--hover-bottom-line-color); - } - - @if $variant == 'material' { - @if not($focused-secondary-color) and $focused-bottom-line-color { - $focused-secondary-color: var(--focused-bottom-line-color); - } - - @if not($border-color) and $idle-bottom-line-color { - $border-color: var(--idle-bottom-line-color); - } - } - } - - //border-color - @if $variant == 'bootstrap' { - @if not($focused-border-color) and $border-color { - $focused-border-color: hsl(from var(--border-color) h s calc(l * 0.8)); - } - - @if not($focused-secondary-color) and $focused-border-color { - $focused-secondary-color: hsla(from var(--focused-border-color) h s l / 0.4); - } - } @else { - @if not($hover-border-color) and $border-color { - $hover-border-color: hsl(from var(--border-color) h s calc(l * 0.8)); - } - - @if not($focused-border-color) and $hover-border-color { - $focused-border-color: var(--hover-border-color); - } - - @if $variant != 'indigo' { - @if not($focused-secondary-color) and $focused-border-color { - $focused-secondary-color: var(--focused-border-color); - } - } - } - - @if $variant == 'material' { - @if not($focused-bottom-line-color) and $focused-border-color { - $focused-bottom-line-color: var(--focused-border-color); - } - } - - //search input - @if not($placeholder-color) and $search-background { - $placeholder-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.9); - } - - @if not($hover-placeholder-color) and $placeholder-color { - $hover-placeholder-color: var(--placeholder-color); - } - - @if $variant == 'indigo' { - @if not($box-background-hover) and $search-background { - $box-background-hover: var(--search-background); - } - } @else { - @if not($idle-secondary-color) and $placeholder-color { - $idle-secondary-color: var(--placeholder-color); - } - } - - @if not($idle-text-color) and $search-background { - $idle-text-color: adaptive-contrast(var(--search-background)); - } - - @if not($filled-text-color) and $search-background { - $filled-text-color: adaptive-contrast(var(--search-background)); - } - - @if not($filled-text-hover-color) and $search-background { - $filled-text-hover-color: adaptive-contrast(var(--search-background)); - } - - @if not($focused-text-color) and $search-background { - $focused-text-color: adaptive-contrast(var(--search-background)); - } - - @if not($input-prefix-color) and $search-background { - $input-prefix-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.9); - } - - @if not($input-suffix-color) and $search-background { - $input-suffix-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.9); - } - - @if $variant != 'indigo' { - @if not($input-prefix-color--filled) and $search-background { - $input-prefix-color--filled: adaptive-contrast(var(--search-background)); - } - - @if not($input-prefix-color--focused) and $search-background { - $input-prefix-color--focused: adaptive-contrast(var(--search-background)); - } - - @if not($input-suffix-color--filled) and $search-background { - $input-suffix-color--filled: adaptive-contrast(var(--search-background)); - } - - @if not($input-suffix-color--focused) and $search-background { - $input-suffix-color--focused: adaptive-contrast(var(--search-background)); - } - } - - @if $search-background != transparent { - @if not($search-disabled-background) and $search-background { - $search-disabled-background: hsla(from var(--search-background) h s l / 0.4); - } - - @if not($disabled-placeholder-color) and $search-disabled-background { - $disabled-placeholder-color: adaptive-contrast(var(--search-disabled-background)); - } - - @if not($disabled-text-color) and $search-disabled-background { - $disabled-text-color: adaptive-contrast(var(--search-disabled-background)); - } - } @else { - @if not($search-disabled-background) and $search-background { - $search-disabled-background: var(--search-background); - } - - @if not($disabled-placeholder-color) and $placeholder-color { - $disabled-placeholder-color: hsla(from var(--placeholder-color) h s l / 0.7); - } - - @if not($disabled-text-color) and $idle-text-color { - $disabled-text-color: hsla(from var(--idle-text-color) h s l / 0.7); - } - } - - @if not($search-resting-shadow) { - $search-resting-shadow: elevation($search-resting-elevation); - } - - @if not($search-hover-shadow) { - $search-hover-shadow: elevation($search-hover-elevation); - } - - @if not($search-disabled-shadow) { - $search-disabled-shadow: elevation($search-disabled-elevation); - } - //end search input - - @if not($input-prefix-color) and $input-suffix-color { - $input-prefix-color: var(--input-suffix-color); - } - - @if not($input-suffix-color) and $input-prefix-color { - $input-suffix-color: var(--input-prefix-color); - } - - @if not($input-prefix-background--filled) and $input-prefix-background { - $input-prefix-background--filled: var(--input-prefix-background); - } - - @if not($input-prefix-background--focused) and $input-prefix-background { - $input-prefix-background--focused: var(--input-prefix-background); - } - - @if not($input-prefix-color) and $input-prefix-background { - $input-prefix-color: adaptive-contrast(var(--input-prefix-background)); - } - - @if not($input-prefix-color--filled) and $input-prefix-color { - $input-prefix-color--filled: var(--input-prefix-color); - } - - @if not($input-prefix-color--focused) and $input-prefix-color--filled { - $input-prefix-color--focused: var(--input-prefix-color--filled); - } - - @if not($input-prefix-color--filled) and $input-prefix-background--filled { - $input-prefix-color--filled: adaptive-contrast(var(--input-prefix-background--filled)); - } - - @if not($input-prefix-color--focused) and $input-prefix-background--focused { - $input-prefix-color--focused: adaptive-contrast(var(--input-prefix-background--focused)); - } - - @if not($input-suffix-background--filled) and $input-suffix-background { - $input-suffix-background--filled: var(--input-suffix-background); - } - - @if not($input-suffix-background--focused) and $input-suffix-background { - $input-suffix-background--focused: var(--input-suffix-background); - } - - @if not($input-suffix-color) and $input-suffix-background { - $input-suffix-color: adaptive-contrast(var(--input-suffix-background)); - } - - @if not($input-suffix-color--filled) and $input-suffix-color { - $input-suffix-color--filled: var(--input-suffix-color); - } - - @if not($input-suffix-color--focused) and $input-suffix-color--filled { - $input-suffix-color--focused: var(--input-suffix-color--filled); - } - - @if not($input-suffix-color--filled) and $input-suffix-background--filled { - $input-suffix-color--filled: adaptive-contrast(var(--input-suffix-background--filled)); - } - - @if not($input-suffix-color--focused) and $input-suffix-background--focused { - $input-suffix-color--focused: adaptive-contrast(var(--input-suffix-background--focused)); - } - - @if not($box-border-radius) { - $box-border-radius: map.get($theme, 'box-border-radius'); - } - - @if not($border-border-radius) { - $border-border-radius: map.get($theme, 'border-border-radius'); - } - - @if not($search-border-radius) { - $search-border-radius: map.get($theme, 'search-border-radius'); - } - - @return extend($theme, ( - name: $name, - selector: $selector, - idle-text-color: $idle-text-color, - filled-text-color: $filled-text-color, - filled-text-hover-color: $filled-text-hover-color, - focused-text-color: $focused-text-color, - disabled-text-color: $disabled-text-color, - helper-text-color: $helper-text-color, - box-border-radius: $box-border-radius, - border-border-radius: $border-border-radius, - search-border-radius: $search-border-radius, - idle-secondary-color: $idle-secondary-color, - focused-secondary-color: $focused-secondary-color, - idle-bottom-line-color: $idle-bottom-line-color, - hover-bottom-line-color: $hover-bottom-line-color, - focused-bottom-line-color: $focused-bottom-line-color, - disabled-bottom-line-color: $disabled-bottom-line-color, - border-color: $border-color, - hover-border-color: $hover-border-color, - focused-border-color: $focused-border-color, - disabled-border-color: $disabled-border-color, - box-background: $box-background, - box-background-hover: $box-background-hover, - box-background-focus: $box-background-focus, - box-disabled-background: $box-disabled-background, - border-background: $border-background, - border-disabled-background: $border-disabled-background, - search-background: $search-background, - search-disabled-background: $search-disabled-background, - search-resting-shadow: $search-resting-shadow, - search-hover-shadow: $search-hover-shadow, - search-disabled-shadow: $search-disabled-shadow, - success-secondary-color: $success-secondary-color, - warning-secondary-color: $warning-secondary-color, - error-secondary-color: $error-secondary-color, - success-shadow-color: $success-shadow-color, - error-shadow-color: $error-shadow-color, - placeholder-color: $placeholder-color, - hover-placeholder-color: $hover-placeholder-color, - disabled-placeholder-color: $disabled-placeholder-color, - input-prefix-color: $input-prefix-color, - input-prefix-background: $input-prefix-background, - input-prefix-color--filled: $input-prefix-color--filled, - input-prefix-background--filled: $input-prefix-background--filled, - input-prefix-color--focused: $input-prefix-color--focused, - input-prefix-background--focused: $input-prefix-background--focused, - input-suffix-color: $input-suffix-color, - input-suffix-background: $input-suffix-background, - input-suffix-color--filled: $input-suffix-color--filled, - input-suffix-background--filled: $input-suffix-background--filled, - input-suffix-color--focused: $input-suffix-color--focused, - input-suffix-background--focused: $input-suffix-background--focused, - size: $size, - )); -} - /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @@ -1838,7 +1312,7 @@ &:autofill, &:autofill:hover, &:autofill:focus, - &:autofill:active, { + &:autofill:active { -webkit-transition-delay: 99999s !important; transition-delay: 99999s !important; } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/label/_label-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/label/_label-theme.scss index e43cdf6fba2..d03ce8b1394 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/label/_label-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/label/_label-theme.scss @@ -1,41 +1,6 @@ @use 'sass:map'; @use 'sass:meta'; @use '../../base' as *; -@use '../../themes/schemas' as *; - -//// -/// @group themes -/// @access public -/// @author Simeon Simeonoff -//// - -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// @param {Map} $color [null] - The text color. -/// @param {Map} $disabled-color [null] - The disabled text color. -@function label-theme( - $schema: $light-material-schema, - $color: null, - $disabled-color: null, -) { - $name: 'igx-label'; - $selector: '[igxLabel]'; - $label-schema: (); - - @if map.has-key($schema, 'label') { - $label-schema: map.get($schema, 'label'); - } @else { - $label-schema: $schema; - } - - $theme: digest-schema($label-schema); - - @return extend($theme, ( - name: $name, - selector: $selector, - color: $color, - disabled-color: $disabled-color - )); -} /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars @@ -44,10 +9,12 @@ // The --variant CSS produced by css-vars is needed also // when dynamically switching between the input `type` attribute. @include css-vars($theme); + $variant: map.get($theme, '_meta', 'theme'); %label-base { @include ellipsis(); + position: relative; color: var-get($theme, 'color'); max-width: 100%; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss index e74b152efc6..c439845c70d 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss @@ -1,271 +1,7 @@ @use 'sass:map'; -@use 'sass:meta'; -@use 'sass:color'; @use '../../base' as *; -@use '../../themes/schemas' as *; @use 'igniteui-theming/sass/animations/easings' as *; -//// -/// @group themes -/// @access public -/// @author Simeon Simeonoff -/// @author Marin Popov -//// - -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// @param {Color} $background [null] - The list background color. -/// @param {Color} $header-background [null] - The list header background color. -/// @param {Color} $header-text-color [null] - The list header text color. -/// @param {Color} $item-background [null] - The list item background color. -/// @param {Color} $item-background-hover [null] - The list item hover background color. -/// @param {Color} $item-background-active [null] - The active list item background color. -/// @param {Color} $item-background-selected [null] - The selected list item background color. -/// @param {Color} $item-text-color [null] - The list item text color. -/// @param {Color} $item-text-color-hover [null] - The list item hover text color. -/// @param {Color} $item-text-color-active [null] - The active list item text color. -/// @param {Color} $item-text-color-selected [null] - The selected list item text color. -/// @param {Color} $item-title-color [null] - The list item title color. -/// @param {Color} $item-title-color-hover [null] - The list item hover title color. -/// @param {Color} $item-title-color-active [null] - The active list item title color. -/// @param {Color} $item-title-color-selected [null] - The selected list item title color. -/// @param {Color} $item-subtitle-color [null] - The list item subtitle color. -/// @param {Color} $item-subtitle-color-hover [null] - The list item hover subtitle color. -/// @param {Color} $item-subtitle-color-active [null] - The active list item subtitle color. -/// @param {Color} $item-subtitle-color-selected [null] - The selected list item subtitle color. -/// @param {Color} $item-action-color [null] - The list item action color. -/// @param {Color} $item-action-color-hover [null] - The list item hover action color. -/// @param {Color} $item-action-color-active [null] - The active list item action color. -/// @param {Color} $item-action-color-selected [null] - The selected list item action color. -/// @param {Color} $item-thumbnail-color [null] - The list item thumbnail color. -/// @param {Color} $item-thumbnail-color-hover [null] - The list item hover thumbnail color. -/// @param {Color} $item-thumbnail-color-active [null] - The active list item thumbnail color. -/// @param {Color} $item-thumbnail-color-selected [null] - The selected list item thumbnail color. -/// @param {List} $border-radius [null] - The border radius used for list component. -/// @param {List} $item-border-radius [null] - The border radius used for list item. -/// @param {Color} $border-width [null] - The list border width. -/// @param {Number} $border-color [null] - The list border color. -/// @requires $light-material-schema -/// @example scss Change the list background color -/// $my-list-theme: list-theme($background: black); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-list-theme); -@function list-theme( - $schema: $light-material-schema, - - $border-radius: null, - $item-border-radius: null, - $background: null, - $header-background: null, - $header-text-color: null, - $item-background: null, - $item-background-hover: null, - $item-background-active: null, - $item-background-selected: null, - $item-text-color: null, - $item-text-color-hover: null, - $item-text-color-active: null, - $item-text-color-selected: null, - $item-title-color: null, - $item-title-color-hover: null, - $item-title-color-active: null, - $item-title-color-selected: null, - $item-subtitle-color: null, - $item-subtitle-color-hover: null, - $item-subtitle-color-active: null, - $item-subtitle-color-selected: null, - $item-action-color: null, - $item-action-color-hover: null, - $item-action-color-active: null, - $item-action-color-selected: null, - $item-thumbnail-color: null, - $item-thumbnail-color-hover: null, - $item-thumbnail-color-active: null, - $item-thumbnail-color-selected: null, - $border-color: null, - $border-width: null, -) { - $name: 'igx-list'; - $list-schema: (); - - @if map.has-key($schema, 'list') { - $list-schema: map.get($schema, 'list'); - } @else { - $list-schema: $schema; - } - - $theme: digest-schema($list-schema); - $variant: map.get($theme, '_meta', 'theme'); - - @if not($header-background) and $background { - $header-background: var(--background); - } - - @if not($header-background) and $item-background { - $header-background: var(--item-background); - } - - @if not($item-background) and $background { - $item-background: var(--background); - } - - @if not($background) and $item-background { - $background: var(--item-background); - } - - @if not($item-background-hover) and $item-background { - $item-background-hover: hsl(from var(--item-background) h s calc(l * 0.9)); - } - - @if not($item-background-active) and $item-background-hover { - $item-background-active: var(--item-background-hover); - } - - @if not($item-background-selected) and $item-background-active { - $item-background-selected: var(--item-background-active); - } - - @if not($header-text-color) and $header-background { - $header-text-color: adaptive-contrast(var(--header-background)); - } - - @if not($item-text-color) and $item-background { - $item-text-color: adaptive-contrast(var(--item-background)); - } - - @if not($item-title-color) and $item-background { - $item-title-color: adaptive-contrast(var(--item-background)); - } - - @if not($item-action-color) and $item-background { - $item-action-color: adaptive-contrast(var(--item-background)); - } - - @if not($item-thumbnail-color) and $item-background { - $item-thumbnail-color: adaptive-contrast(var(--item-background)); - } - - @if not($item-subtitle-color) and $item-background { - $item-subtitle-color: hsla(from adaptive-contrast(var(--item-background)) h s l / .74); - } - - @if not($item-subtitle-color) and $item-text-color { - $item-subtitle-color: var(--item-text-color); - } - - @if not($item-text-color-hover) and $item-background-hover { - $item-text-color-hover: adaptive-contrast(var(--item-background-hover)); - } - - @if not($item-title-color-hover) and $item-background-hover { - $item-title-color-hover: adaptive-contrast(var(--item-background-hover)); - } - - @if not($item-action-color-hover) and $item-background-hover { - $item-action-color-hover: adaptive-contrast(var(--item-background-hover)); - } - - @if not($item-thumbnail-color-hover) and $item-background-hover { - $item-thumbnail-color-hover: adaptive-contrast(var(--item-background-hover)); - } - - @if not($item-subtitle-color-hover) and $item-background-hover { - $item-subtitle-color-hover: hsla(from adaptive-contrast(var(--item-background-hover)) h s l / .74); - } - - @if not($item-subtitle-color-hover) and $item-text-color-hover { - $item-subtitle-color-hover: var(--item-text-color-hover); - } - - @if not($item-text-color-active) and $item-background-active { - $item-text-color-active: adaptive-contrast(var(--item-background-active)); - } - - @if not($item-text-color-selected) and $item-background-selected { - $item-text-color-selected: adaptive-contrast(var(--item-background-selected)); - } - - @if not($item-title-color-active) and $item-background-active { - $item-title-color-active: adaptive-contrast(var(--item-background-active)); - } - - @if not($item-title-color-selected) and $item-background-selected { - $item-title-color-selected: adaptive-contrast(var(--item-background-selected)); - } - - @if not($item-action-color-active) and $item-background-active { - $item-action-color-active: adaptive-contrast(var(--item-background-active)); - } - - @if not($item-action-color-selected) and $item-background-selected { - $item-action-color-selected: adaptive-contrast(var(--item-background-selected)); - } - - @if not($item-thumbnail-color-active) and $item-background-active { - $item-thumbnail-color-active: adaptive-contrast(var(--item-background-active)); - } - - @if not($item-thumbnail-color-selected) and $item-background-selected { - $item-thumbnail-color-selected: adaptive-contrast(var(--item-background-selected)); - } - - @if not($item-subtitle-color-active) and $item-background-active { - $item-subtitle-color-active: hsla(from adaptive-contrast(var(--item-background-active)) h s l / .74); - } - - @if not($item-subtitle-color-selected) and $item-background-selected { - $item-subtitle-color-selected: hsla(from adaptive-contrast(var(--item-background-selected)) h s l / .74); - } - - @if not($item-subtitle-color-active) and $item-text-color-active { - $item-subtitle-color-active: var(--item-text-color-active); - } - - @if not($item-subtitle-color-selected) and $item-text-color-selected { - $item-subtitle-color-selected: var(--item-text-color-selected); - } - - @if $variant == 'fluent' or $variant == 'bootstrap'{ - @if not($border-color) and $item-background { - $border-color: hsla(from adaptive-contrast(var(--item-background)) h s l / .15); - } - } - - @return extend($theme, ( - name: $name, - border-radius: $border-radius, - item-border-radius: $item-border-radius, - background: $background, - header-background: $header-background, - header-text-color: $header-text-color, - item-background: $item-background, - item-background-hover: $item-background-hover, - item-background-active: $item-background-active, - item-background-selected: $item-background-selected, - item-text-color: $item-text-color, - item-text-color-hover: $item-text-color-hover, - item-text-color-active: $item-text-color-active, - item-text-color-selected: $item-text-color-selected, - item-title-color:$item-title-color, - item-title-color-hover:$item-title-color-hover, - item-title-color-active:$item-title-color-active, - item-title-color-selected:$item-title-color-selected, - item-subtitle-color: $item-subtitle-color, - item-subtitle-color-hover: $item-subtitle-color-hover, - item-subtitle-color-active: $item-subtitle-color-active, - item-subtitle-color-selected: $item-subtitle-color-selected, - item-action-color: $item-action-color, - item-action-color-hover: $item-action-color-hover, - item-action-color-active: $item-action-color-active, - item-action-color-selected: $item-action-color-selected, - item-thumbnail-color: $item-thumbnail-color, - item-thumbnail-color-hover: $item-thumbnail-color-hover, - item-thumbnail-color-active: $item-thumbnail-color-active, - item-thumbnail-color-selected: $item-thumbnail-color-selected, - border-color: $border-color, - border-width: $border-width, - )); -} - /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. diff --git a/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss index adef165709e..92a400fc0f5 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss @@ -1,96 +1,7 @@ @use 'sass:map'; @use '../../base' as *; -@use '../../themes/schemas' as *; @use 'igniteui-theming/sass/animations/easings' as *; -//// -/// @group themes -/// @access public -/// @author Simeon Simeonoff -/// @author Marin Popov -//// - -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// @param {Color} $background [null] - The navbar background color. -/// @param {Color} $text-color [null] - The navbar text color. -/// @param {Color} $border-color [null] - The navbar border color. -/// @param {box-shadow} $shadow [null] - The shadow of the navbar. -/// @param {Color} $idle-icon-color [null] - The navbar idle icon color. -/// @param {Color} $hover-icon-color [null] - The navbar hover icon color. -/// @param {Bool} $disable-shadow [true] - Sets the navbar shadow visibility. -/// @requires $light-material-schema -/// @example scss Change the background color -/// $my-navbar-theme: navbar-theme($background: green); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-navbar-theme); -@function navbar-theme( - $schema: $light-material-schema, - $background: null, - $border-color: null, - $text-color: null, - $shadow: null, - $idle-icon-color: null, - $hover-icon-color: null, - $disable-shadow: false -) { - $name: 'igx-navbar'; - $navbar-schema: (); - - @if map.has-key($schema, 'navbar') { - $navbar-schema: map.get($schema, 'navbar'); - } @else { - $navbar-schema: $schema; - } - - $theme: digest-schema($navbar-schema); - $variant: map.get($theme, '_meta', 'theme'); - - @if not($text-color) and $background { - $text-color: adaptive-contrast(var(--background)); - } - - @if not($hover-icon-color) and $idle-icon-color { - $hover-icon-color: hsl(from (var(--idle-icon-color)) h s calc(l * 1.1)); - } - - @if not($idle-icon-color) and $background { - $idle-icon-color: adaptive-contrast(var(--background)); - } - - @if $variant == 'indigo' { - @if not($border-color) and $background { - $border-color: hsla(from adaptive-contrast(var(--background)) h s l / 0.3); - } - - @if not($hover-icon-color) and $background { - $hover-icon-color: hsla(from adaptive-contrast(var(--background)) h s l / 0.7); - } - } @else { - @if not($hover-icon-color) and $background { - $hover-icon-color: adaptive-contrast(var(--background)); - } - } - - @if not($shadow) { - $elevation: map.get($navbar-schema, 'elevation'); - $shadow: elevation($elevation); - } - - @if $disable-shadow { - $shadow: none; - } - - @return extend($theme, ( - name: $name, - background: $background, - border-color: $border-color, - text-color: $text-color, - idle-icon-color: $idle-icon-color, - hover-icon-color: $hover-icon-color, - shadow: $shadow, - )); -} - /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. diff --git a/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss index e9a91d6658f..520ac50fb9f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss @@ -1,148 +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 Simeon Simeonoff -/// @author Marin Popov -//// - -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// -/// @param {Color} $background [null] - The navigation drawer background color. -/// @param {Color} $border-color [null] - The navigation drawer right border color. -/// @param {Color} $item-header-text-color [null] - The header's idle text color. -/// @param {Color} $item-text-color [null] - The item's idle text color. -/// @param {Color} $item-icon-color [null] - The item's icon color. -/// @param {Color} $item-active-text-color [null] - The item's active text color. -/// @param {Color} $item-active-background [null] - The item's active background color. -/// @param {Color} $item-active-icon-color [null] - The item's icon active color. -/// @param {Color} $item-hover-background [null] - The item's hover background color. -/// @param {Color} $item-hover-text-color [null] - The item's hover text color. -/// @param {Color} $item-hover-icon-color [null] - The item's hover icon color. -/// @param {Color} $item-disabled-text-color [null] - The item's disabled text color. -/// @param {Color} $item-disabled-icon-color [null] - The item's disabled icon color. -/// @param {Color} $shadow [null] - Sets a custom shadow to be used by the drawer. -/// @param {List} $border-radius [null] - The border radius used for the navdrawer. -/// @param {List} $item-border-radius [null] - The border radius used for the navdrawer item. -/// @requires $light-material-schema -/// @example scss Change the background and item colors -/// $navdrawer-theme: navdrawer-theme( -/// $background: #2d313a, -/// $item-active-background: #ecc256, -/// $item-icon-color: #ecc256 -/// ); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($navdrawer-theme); -@function navdrawer-theme( - $schema: $light-material-schema, - - $border-radius: null, - $item-border-radius: null, - - $background: null, - $border-color: null, - - $item-header-text-color: null, - $item-text-color: null, - $item-icon-color: null, - - $item-active-text-color: null, - $item-active-background: null, - $item-active-icon-color:null, - - $item-hover-background: null, - $item-hover-text-color: null, - $item-hover-icon-color: null, - - $item-disabled-text-color: null, - $item-disabled-icon-color: null, - $shadow: null -) { - $name: 'igx-nav-drawer'; - $navdrawer-schema: (); - - @if map.has-key($schema, 'nav-drawer') { - $navdrawer-schema: map.get($schema, 'nav-drawer'); - } @else { - $navdrawer-schema: $schema; - } - - $theme: digest-schema($navdrawer-schema); - - @if not($item-header-text-color) and $background { - $item-header-text-color: adaptive-contrast(var(--background)); - } - - @if not($item-text-color) and $background { - $item-text-color: adaptive-contrast(var(--background)); - } - - @if not($item-icon-color) and $background { - $item-icon-color: adaptive-contrast(var(--background)); - } - - @if not($item-hover-background) and $background { - $item-hover-background: hsla(from adaptive-contrast(var(--background)) h s l / .08); - } - - @if not($item-hover-text-color) and $background { - $item-hover-text-color: adaptive-contrast(var(--background)); - } - - @if not($item-hover-icon-color) and $background { - $item-hover-icon-color: adaptive-contrast(var(--background)); - } - - @if not($item-active-background) and $background { - $item-active-background: hsla(from adaptive-contrast(var(--background)) h s l / .24); - } - - @if not($item-active-text-color) and $item-active-background { - $item-active-text-color: adaptive-contrast(var(--item-active-background)); - } - - @if not($item-active-icon-color) and $item-active-background { - $item-active-icon-color: adaptive-contrast(var(--item-active-background)); - } - - @if not($item-disabled-text-color) and $background { - $item-disabled-text-color: hsla(from adaptive-contrast(var(--background)) h s l / .38); - } - @if not($item-disabled-icon-color) and $background { - $item-disabled-icon-color: hsla(from adaptive-contrast(var(--background)) h s l / .38); - } - - @if not($shadow) { - $elevation: map.get($navdrawer-schema, 'elevation'); - $shadow: elevation($elevation); - } - - @return extend($theme, ( - name: $name, - border-radius: $border-radius, - item-border-radius: $item-border-radius, - background: $background, - border-color: $border-color, - item-text-color:$item-text-color, - item-active-text-color: $item-active-text-color, - item-active-background: $item-active-background, - item-hover-background: $item-hover-background, - item-hover-text-color:$item-hover-text-color, - item-header-text-color:$item-header-text-color, - item-icon-color:$item-icon-color, - item-active-icon-color:$item-active-icon-color, - item-hover-icon-color: $item-hover-icon-color, - item-disabled-text-color:$item-disabled-text-color, - item-disabled-icon-color: $item-disabled-icon-color, - shadow: $shadow - )); -} - /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. diff --git a/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-theme.scss index 45034ddb62c..d7371ca5d7f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-theme.scss @@ -1,45 +1,7 @@ @use 'sass:map'; @use '../../base' as *; -@use '../../themes/schemas' as *; @use 'igniteui-theming/sass/animations/easings' as *; -//// -/// @group themes -/// @access public -/// @author Simeon Simeonoff -/// @author Marin Popov -//// - -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// @param {Color} $background-color [null] - The background color used for modal overlays. -/// @requires $light-material-schema -/// @example scss Change the background color -/// $my-overlay-theme: overlay-theme($background-color: rgba(yellow, .74)); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-overlay-theme); -@function overlay-theme( - $schema: $light-material-schema, - $background-color: null -) { - $name: 'igx-overlay'; - $selector: '.igx-overlay__wrapper--modal, .igx-overlay__content--modal'; - $overlay-schema: (); - - @if map.has-key($schema, 'overlay') { - $overlay-schema: map.get($schema, 'overlay'); - } @else { - $overlay-schema: $schema; - } - - $theme: digest-schema($overlay-schema); - - @return extend($theme, ( - name: $name, - selector: $selector, - background-color: $background-color, - )); -} - /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. diff --git a/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss index 14130e74bbc..5aeb1c6ed8b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss @@ -1,55 +1,5 @@ @use 'sass:map'; @use '../../base' as *; -@use '../../themes/schemas' as *; - -//// -/// @group themes -/// @access public -/// @author Marin Popov -/// @author Simeon Simeonoff -//// - -/// Grid Paging Theme -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// @param {Color} $text-color [currentColor] - The text color. -/// @param {Color} $background-color [rgba(0, 0, 0, .04)] - The background color of the paging panel. -/// @param {Color} $border-color [rgba(0, 0, 0, .26)] - The border color of the paging panel. -/// @requires $light-material-schema -/// @example scss Change the stripes color -/// $my-paginator-theme: paginator-theme( -/// $stripes-color: orange -/// ); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-paginator-theme); -@function paginator-theme( - $schema: $light-material-schema, - - $text-color: null, - $background-color: null, - $border-color: null -) { - $name: 'igx-paginator'; - $grid-paginator-schema: (); - - @if map.has-key($schema, 'paginator') { - $grid-paginator-schema: map.get($schema, 'paginator'); - } @else { - $grid-paginator-schema: $schema; - } - - $theme: digest-schema($grid-paginator-schema); - - @if not($text-color) and $background-color { - $text-color: adaptive-contrast($background-color); - } - - @return extend($theme, ( - name: $name, - text-color: $text-color, - background-color: $background-color, - border-color: $border-color, - )); -} /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars diff --git a/projects/igniteui-angular/src/lib/core/styles/components/progress/circular/_circular-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/progress/circular/_circular-theme.scss index d2486da8ee3..2bb1e436c07 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/progress/circular/_circular-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/progress/circular/_circular-theme.scss @@ -1,79 +1,6 @@ @use 'sass:map'; -@use 'sass:math'; -@use 'sass:meta'; -@use 'sass:list'; @use '../../../base' as *; @use 'igniteui-theming/sass/animations' as *; -@use '../../../themes/schemas' as *; - -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// -/// @param {Color} $base-circle-color [null] - The base circle fill color. -/// @param {Color | List} $fill-color-default [null] - The progress circle fill color. -/// @param {Color} $fill-color-danger [null] - The track danger fill color. -/// @param {Color} $fill-color-warning [null] - The track warning fill color. -/// @param {Color} $fill-color-info [null] - The track info fill color. -/// @param {Color} $fill-color-success [null] - The track success fill color. -/// @param {Color} $text-color [null] - The value text color. -/// @param {Number} $diameter [null] - The progress circle diameter. -/// -/// @requires $light-material-schema -/// -/// @example scss Change the circle progress color -/// $my-progress-circular-theme: progress-circular-theme( -/// $fill-color-default: purple -/// ); -/// // Pass the theme to the igx-progress-circular component mixin -/// @include igx-progress-circular($my-progress-circle-theme); -@function progress-circular-theme( - $schema: $light-material-schema, - $base-circle-color: null, - $fill-color-default: null, - $fill-color-danger: null, - $fill-color-warning: null, - $fill-color-info: null, - $fill-color-success: null, - $text-color: null, - $diameter: null -) { - $name: 'igx-circular-bar'; - $circular-bar-schema: (); - - @if map.has-key($schema, 'circular-bar') { - $circular-bar-schema: map.get($schema, 'circular-bar'); - } @else { - $circular-bar-schema: $schema; - } - - $theme: digest-schema($circular-bar-schema); - - $fill-color-default-start: map.get($theme, 'fill-color-default'); - $fill-color-default-end: map.get($theme, 'fill-color-default'); - - @if meta.type-of($fill-color-default) == 'color' { - $fill-color-default-start: $fill-color-default; - $fill-color-default-end: $fill-color-default; - } - - @if list.length($fill-color-default) == 2 { - $fill-color-default-start: list.nth($fill-color-default, 1); - $fill-color-default-end: list.nth($fill-color-default, 2); - } - - @return extend($theme, ( - name: $name, - base-circle-color: $base-circle-color, - fill-color-default: $fill-color-default, - fill-color-default-start: $fill-color-default-start, - fill-color-default-end: $fill-color-default-end, - fill-color-danger: $fill-color-danger, - fill-color-warning: $fill-color-warning, - fill-color-info: $fill-color-info, - fill-color-success: $fill-color-success, - text-color: $text-color, - diameter: $diameter, - )); -} /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars diff --git a/projects/igniteui-angular/src/lib/core/styles/components/progress/linear/_linear-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/progress/linear/_linear-theme.scss index fb381552206..b5e78dcea58 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/progress/linear/_linear-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/progress/linear/_linear-theme.scss @@ -4,74 +4,6 @@ @use 'sass:list'; @use '../../../base/index' as *; @use 'igniteui-theming/sass/animations' as *; -@use '../../../themes/schemas' as *; - -//// -/// @group themes -/// @access public -/// @author Simeon Simeonoff -/// @author Marin Popov -//// - -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// @param {Color} $track-color [null] - The main track color. -/// @param {Color} $fill-color-default [null] - The track default fill color. -/// @param {Color} $fill-color-danger [null] - The track danger fill color. -/// @param {Color} $fill-color-warning [null] - The track warning fill color. -/// @param {Color} $fill-color-info [null] - The track info fill color. -/// @param {Color} $fill-color-success [null] - The track success fill color. -/// @param {Color} $stripes-color [null] - The track stripes color. -/// @param {Color} $text-color [null] - The track value text color. -/// @param {List} $track-border-radius [null] - The border radius fraction, between 0 - 8 to be used fot the progress bar track -/// @param {Number} $track-height [null] - The linear progress track height. -/// @param {Number} $strip-size [null] - The linear progress bar strip width. -/// @requires $light-material-schema -/// @example scss Change the stripes color -/// $my-progress-linear-theme: progress-linear-theme( -/// $stripes-color: orange -/// ); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-progress-linear-theme); -@function progress-linear-theme( - $schema: $light-material-schema, - $track-color: null, - $fill-color-default: null, - $fill-color-danger: null, - $fill-color-warning: null, - $fill-color-info: null, - $fill-color-success: null, - $stripes-color: null, - $text-color: null, - $track-border-radius: null, - $track-height: null, - $strip-size: null -) { - $name: 'igx-linear-bar'; - $linear-bar-schema: (); - - $linear-bar-schema: if(map.has-key($schema, 'linear-bar'), map.get($schema, 'linear-bar'), $schema); - - $theme: digest-schema($linear-bar-schema); - - @if not($track-border-radius) { - $track-border-radius: map.get($theme, 'track-border-radius'); - } - - @return extend($theme, ( - name: $name, - track-color: $track-color, - fill-color-default: $fill-color-default, - fill-color-danger: $fill-color-danger, - fill-color-warning: $fill-color-warning, - fill-color-info: $fill-color-info, - fill-color-success: $fill-color-success, - stripes-color: $stripes-color, - text-color: $text-color, - track-border-radius: $track-border-radius, - track-height: $track-height, - strip-size: $strip-size, - )); -} @mixin striped-gradient($variant: default, $gradient-orientation, $stripe-color) { $fill-color-default: if($variant == 'indigo', transparent, $stripe-color); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss index a2d4f0cc5c7..a42f411d365 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss @@ -1,106 +1,5 @@ @use 'sass:map'; @use '../../base' as *; -@use '../../themes/schemas' as *; - -/// @group themes -/// @access public -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// @param {Color} background [null] - The background color of the filtering row. -/// @param {Color} header-background [null] - The background color of the query builder header. -/// @param {Color} header-foreground [null] - The foreground color of the query builder header. -/// @param {Color} header-border [null] - The border color of the query builder header. -/// -/// @param {Map} subquery-header-background [null] - The background color of the subquery header. -/// @param {Map} subquery-border-color [null] - The border color of the query block. -/// @param {Map} separator-color [null] - The separator color of the query block. -/// @param {Number} subquery-border-radius [null] - The border radius of the subquery block. -/// -/// @param {Map} label-foreground [null] - The color for query builder labels "from" & "select". -/// @param {Map} separator-color [null] - The separator color of the query builder tree block. -/// @param {Number} border-radius [null] - The border radius of the query builder. -/// -/// @param {Color} color-expression-group-and [null] - The color of advanced filtering "AND" condition group. -/// @param {Color} color-expression-group-or [null] - The color of advanced filtering "OR" condition group. -/// -/// @example scss Set custom query-builder colors -/// $my-query-builder-theme: query-builder-theme($background: red); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-query-builder-theme); -@function query-builder-theme( - $schema: $light-material-schema, - $background: null, - $header-background: null, - $header-foreground: null, - $header-border: null, - $color-expression-group-and: null, - $color-expression-group-or: null, - $border-radius: null, - $subquery-header-background: null, - $subquery-border-color: null, - $subquery-border-radius: null, - $separator-color: null, - $label-foreground: null, -) { - $name: 'igx-query-builder'; - $selector: 'igx-query-builder'; - $query-builder-schema: (); - - @if map.has-key($schema, 'query-builder') { - $query-builder-schema: map.get($schema, 'query-builder'); - } @else { - $query-builder-schema: $schema; - } - - $theme: digest-schema($query-builder-schema); - $variant: map.get($theme, '_meta', 'theme'); - - @if not($label-foreground) and $background { - $label-foreground: hsla(from adaptive-contrast(var(--background)) h s l / 0.6); - } - - @if not($header-background) and $background { - $header-background: var(--background); - } - - @if not($header-foreground) and $header-background { - $header-foreground: adaptive-contrast(var(--header-background)); - } - - @if not($subquery-header-background) and $header-background { - $subquery-header-background: hsl(from var(--header-background) h s calc(l * 0.9)); - } - - @if not($subquery-border-color) and $subquery-header-background { - $subquery-border-color: hsl(from var(--subquery-header-background) h s calc(l * 0.9)); - } - - @if not($separator-color) and $subquery-border-color { - $separator-color: hsl(from var(--subquery-border-color) h s calc(l * 0.9)); - } - - @if $variant == 'bootstrap' { - @if not($header-border) and $subquery-border-color { - $header-border: var(--subquery-border-color); - } - } - - @return extend($theme, ( - name: $name, - selector: $selector, - background: $background, - header-background: $header-background, - header-foreground: $header-foreground, - header-border: $header-border, - color-expression-group-and: $color-expression-group-and, - color-expression-group-or: $color-expression-group-or, - subquery-header-background: $subquery-header-background, - subquery-border-color: $subquery-border-color, - subquery-border-radius: $subquery-border-radius, - separator-color: $separator-color, - border-radius: $border-radius, - label-foreground: $label-foreground, - )); -} //// /// @group themes diff --git a/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss index 522fbb0de5f..0edfd40c513 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss @@ -2,142 +2,6 @@ @use 'sass:math'; @use '../../base' as *; @use 'igniteui-theming/sass/animations' as *; -@use '../../themes/schemas' as *; - -//// -/// @group themes -/// @access public -/// @author Simeon Simeonoff -/// @author Marin Popov -//// - -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// -/// @param {Color} $label-color [null]- The text color used for the label text. -/// @param {Color} $label-color-hover [null]- The text color used for the label text on hover. -/// @param {Color} $empty-color [null] - The unchecked border color. -/// @param {Color} $empty-fill-color [null] - The unchecked radio fill color. -/// @param {Color} $fill-color [null] - The checked border and dot colors. -/// @param {Color} $disabled-color [null] - The disabled border and dot colors. -/// @param {Color} $disabled-label-color [null] - The disabled label color. -/// @param {Color} $disabled-fill-color [null] - The disabled checked border and dot colors. -/// @param {Color} $hover-color [null] - The border and dot colors on hover. -/// @param {Color} $fill-color-hover [null] - The checked dot color on hover. -/// @param {Color} $fill-hover-border-color [null] - The checked border color on hover. -/// @param {Color} $focus-border-color [null] - The focus border color. -/// @param {Color} $focus-outline-color [null] - The focus outlined color. -/// @param {Color} $focus-outline-color-filled [null] - The focus outline color when radio is filled. -/// @param {Color} $error-color [null] - The label, border and dot color in invalid state. -/// @param {Color} $error-color-hover [null] - The label, border and dot color in invalid state on hover. -/// @param {Color} $focus-outline-color-error [null] - The focus outline color in invalid state. -/// -/// @requires $light-material-schema -/// -/// Set light to true when the surrounding area is dark. -/// @example scss Change the checked dot and border colors -/// $my-radio-theme: radio-theme($fill-color: magenta); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-radio-theme); -@function radio-theme( - $schema: $light-material-schema, - - $label-color: null, - $label-color-hover: null, - $empty-color: null, - $empty-fill-color: null, - $fill-color: null, - $fill-hover-border-color: null, - $focus-border-color: null, - $focus-outline-color: null, - $focus-outline-color-filled: null, - $disabled-color: null, - $disabled-label-color: null, - $disabled-fill-color: null, - $hover-color: null, - $fill-color-hover: null, - $error-color: null, - $error-color-hover: null, - $focus-outline-color-error: null, -) { - $name: 'igx-radio'; - $radio-schema: (); - - @if map.has-key($schema, 'radio') { - $radio-schema: map.get($schema, 'radio'); - } @else { - $radio-schema: $schema; - } - - $theme: digest-schema($radio-schema); - $variant: map.get($theme, '_meta', 'theme'); - - @if not($hover-color) and $empty-color { - $hover-color: hsl(from var(--empty-color) h s calc(l * 0.9)); - } - - @if not($fill-color-hover) and $fill-color { - $fill-color-hover: hsl(from var(--fill-color) h s calc(l * 0.9)); - } - - @if $variant != 'bootstrap' { - @if not($fill-hover-border-color) and $fill-color-hover { - $fill-hover-border-color: var(--fill-color-hover); - } - } - - @if not($label-color-hover) and $label-color { - $label-color-hover: hsl(from var(--label-color) h s calc(l * 0.9)); - } - - @if not($error-color-hover) and $error-color { - $error-color-hover: hsl(from var(--error-color) h s calc(l * 0.9)); - } - - @if not($focus-outline-color-error) and $error-color { - $focus-outline-color-error: hsla(from var(--error-color) h s l / .5); - } - - @if $variant == 'bootstrap' { - @if not($focus-border-color) and $fill-color { - $focus-border-color: var(--fill-color); - } - - @if not($focus-outline-color) and $fill-color { - $focus-outline-color: hsla(from var(--fill-color) h s l / .5); - } - } - - @if $variant == 'indigo' { - @if not($focus-outline-color) and $empty-color { - $focus-outline-color: hsla(from var(--empty-color) h s l / .5); - } - - @if not($focus-outline-color-filled) and $fill-color { - $focus-outline-color-filled: hsla(from var(--fill-color) h s l / .5); - } - } - - @return extend($theme, ( - name: $name, - label-color: $label-color, - label-color-hover: $label-color-hover, - empty-color: $empty-color, - empty-fill-color: $empty-fill-color, - fill-color: $fill-color, - fill-hover-border-color: $fill-hover-border-color, - disabled-color: $disabled-color, - disabled-label-color: $disabled-label-color, - disabled-fill-color: $disabled-fill-color, - hover-color: $hover-color, - fill-color-hover: $fill-color-hover, - focus-border-color: $focus-border-color, - focus-outline-color: $focus-outline-color, - focus-outline-color-filled: $focus-outline-color-filled, - error-color: $error-color, - error-color-hover: $error-color-hover, - focus-outline-color-error: $focus-outline-color-error, - )); -} /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars diff --git a/projects/igniteui-angular/src/lib/core/styles/components/rating/_rating-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/rating/_rating-theme.scss index 97864b2414b..75d950e3799 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/rating/_rating-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/rating/_rating-theme.scss @@ -1,48 +1,5 @@ @use 'sass:map'; -@use 'sass:meta'; @use '../../base' as *; -@use '../../themes/schemas' as *; - -//// -/// @group themes -/// @access public -/// @author Marin Popov -//// - -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// -/// @param {Color} $label-color [null] - sets the color for the label. -/// @param {Number} $symbol-size [null] - the size of the symbols. -/// @param {Color} $symbol-empty-color [null] - sets the idle color for the symbol when it is a plane text. -/// @param {Color} $symbol-full-color [null] - sets the color in selected state for the symbol when it is a plane text. -/// @param {Color} $symbol-empty-filter [null] - the filter(s) used for the empty symbol. -/// @param {Color} $symbol-full-filter [null] - the filter(s) used for the filled symbol. -/// @param {Color} $disabled-label-color [null] - sets the color for the label in disabled state. -/// @param {Color} $disabled-empty-symbol-color [null] - sets the idle color for the symbol in disabled state when it is a plane text. -/// @param {Color} $disabled-full-symbol-color [null] - sets the color for the symbol in selected/disabled state when it is a plane text. -/// @requires $light-material-schema -/// @example scss Change the rating filled symbol color -/// $my-rating-theme: rating-theme($symbol-full-color: red); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-rating-theme); -@function rating-theme( - $schema: $light-material-schema, - $rest... -) { - - $name: 'igc-rating'; - $rating-schema: (); - - @if map.has-key($schema, 'rating') { - $rating-schema: map.get($schema, 'rating'); - } @else { - $rating-schema: $schema; - } - - $theme: digest-schema($rating-schema); - - @return extend($theme, (name: $name), meta.keywords($rest)); -} /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars diff --git a/projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-theme.scss index 4321a330a90..79800283214 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-theme.scss @@ -1,44 +1,5 @@ @use 'sass:map'; @use '../../base' as *; -@use '../../themes/schemas' as *; - -//// -/// @group themes -/// @access public -/// @author Simeon Simeonoff -/// @author Marin Popov -//// - -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// @param {Color} $color [null] - The color of the ripple. -/// @requires $light-material-schema -/// @example scss Change the color -/// $my-ripple-theme: igx-ripple-theme($color: yellow); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-ripple-theme); -@function ripple-theme( - $schema: $light-material-schema, - $color: null -) { - $name: 'igx-ripple'; - $selector: '[igxRipple]'; - - $ripple-schema: (); - - @if map.has-key($schema, 'ripple') { - $ripple-schema: map.get($schema, 'ripple'); - } @else { - $ripple-schema: $schema; - } - - $theme: digest-schema($ripple-schema); - - @return extend($theme, ( - name: $name, - selector: $selector, - color: $color, - )); -} /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars diff --git a/projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-theme.scss index 83149b01395..9e9adbb6a68 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-theme.scss @@ -1,88 +1,6 @@ @use 'sass:map'; @use 'sass:meta'; @use '../../base' as *; -@use '../../themes/schemas' as *; - -//// -/// @group themes -/// @access public -/// @author Simeon Simeonoff -//// - -/// If only background color is specified, text/icon color will be assigned automatically to a contrasting color. -/// @param {Color} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// @param {String | Number} $sb-size [null] - The size of the scrollbar. -/// @param {String | Number} $sb-thumb-min-height [null] - The min-height of the thumb. -/// @param {Color} $sb-thumb-bg-color [null] - The background color of the thumb. -/// @param {Color} $sb-thumb-bg-color-hover [null] - The :hover background color of the thumb. -/// @param {Color} $sb-thumb-border-color [null] - The border color of the thumb. -/// @param {String | Number} $sb-thumb-border-size [null] - The border size of the thumb. -/// @param {String | Number} $sb-thumb-border-radius [null] - The border radius of the thumb. -/// @param {Color} $sb-track-bg-color [null] - The background color of the track. -/// @param {Color} $sb-track-bg-color-hover [null] - The :hover background color of the track. -/// @param {Color} $sb-track-border-color [null] - The border color of the track. -/// @param {String | Number} $sb-track-border-size [null] - The border size of the track. -/// @param {Color} $sb-corner-bg [null] - The background color of the corner. -/// @param {Color} $sb-corner-border-color [null] - The border color of the corner. -/// @param {String | Number} $sb-corner-border-size [null] - The border size of the corner. -/// @requires $light-material-schema -/// @example scss Change the background and track colors -/// $my-scrollbar-theme: scrollbar-theme($sb-thumb-bg-color: black, $sb-track-bg-color: gray); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-scrollbar-theme); -@function scrollbar-theme( - $schema: $light-material-schema, - $sb-size: null, - - $sb-thumb-min-height: null, - $sb-thumb-bg-color: null, - $sb-thumb-bg-color-hover: null, - $sb-thumb-border-size: null, - $sb-thumb-border-color: null, - $sb-thumb-border-radius: null, - - $sb-track-bg-color: null, - $sb-track-bg-color-hover: null, - $sb-track-border-color: null, - $sb-track-border-size: null, - - $sb-corner-bg: null, - $sb-corner-border-color: null, - $sb-corner-border-size: null, -) { - $name: 'ig-scrollbar'; - $selector: '.ig-scrollbar'; - $scrollbar-schema: (); - - @if map.has-key($schema, 'scrollbar') { - $scrollbar-schema: map.get($schema, 'scrollbar'); - } @else { - $scrollbar-schema: $schema; - } - - $theme: digest-schema($scrollbar-schema); - - @return extend($theme, ( - name: $name, - selector: $selector, - - sb-thumb-min-height: $sb-thumb-min-height, - sb-thumb-bg-color: $sb-thumb-bg-color, - sb-thumb-bg-color-hover: $sb-thumb-bg-color-hover, - sb-thumb-border-size: $sb-thumb-border-size, - sb-thumb-border-color: $sb-thumb-border-color, - sb-thumb-border-radius: $sb-thumb-border-radius, - - sb-track-bg-color: $sb-track-bg-color, - sb-track-bg-color-hover: $sb-track-bg-color-hover, - sb-track-border-color: $sb-track-border-color, - sb-track-border-size: $sb-track-border-size, - - sb-corner-bg: $sb-corner-bg, - sb-corner-border-color: $sb-corner-border-color, - sb-corner-border-size: $sb-corner-border-size, - )); -} /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars diff --git a/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss index 682f6ccc616..07a5faf511b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss @@ -1,98 +1,5 @@ @use 'sass:map'; @use '../../base' as *; -@use '../../themes/schemas' as *; - -//// -/// @group themes -/// @access public -/// @author Marin Popov -/// @author Simeon Simeonoff -//// - -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// @requires $light-material-schema -/// @param {Color} $toggle-button-background [null] - The select toggle button background color. -/// @param {Color} $toggle-button-background-focus [null] - The select toggle button background color when the select is focused. -/// @param {Color} $toggle-button-background-disabled [null] - The select toggle button background color when the select is disabled. -/// @param {Color} $toggle-button-foreground [null] - The select toggle button foreground color. -/// @param {Color} $toggle-button-foreground-focus [null] - The select toggle button foreground color when the select is focused. -/// @param {Color} $toggle-button-foreground-disabled [null] - The select toggle button foreground color when the select is disabled. -/// @param {Color} $toggle-button-foreground-filled [null] - The select toggle button foreground color when the select is filled. -/// @param {Color} $toggle-button-background-focus--border [null] - The select toggle button background color when the select is focused in material border variant. -/// @example scss Change the select empty list background -/// $my-select-theme: igx-select-theme($empty-list-background); -/// // Pass the theme to the css-vars mixin -/// @include css-vars($my-select-theme); -@function select-theme( - $schema: $light-material-schema, - $toggle-button-background: null, - $toggle-button-background-focus: null, - $toggle-button-background-disabled: null, - $toggle-button-foreground: null, - $toggle-button-foreground-focus: null, - $toggle-button-foreground-disabled: null, - $toggle-button-foreground-filled: null, - $toggle-button-background-focus--border: null, -) { - $name: 'igx-select'; - $selector: 'igx-select'; - - $select-schema: (); - - @if map.has-key($schema, 'select') { - $select-schema: map.get($schema, 'select'); - } @else { - $select-schema: $schema; - } - - $theme: digest-schema($select-schema); - $variant: map.get($theme, '_meta', 'theme'); - - @if not($toggle-button-foreground) and $toggle-button-background { - $toggle-button-foreground: adaptive-contrast(var(--toggle-button-background)); - } - - @if not($toggle-button-foreground-filled) and $toggle-button-background { - $toggle-button-foreground-filled: adaptive-contrast(var(--toggle-button-background)); - } - - @if $variant == 'material' { - @if not($toggle-button-background-focus) and $toggle-button-background { - $toggle-button-background-focus: hsl(from var(--toggle-button-background) h s calc(l * 0.9)); - } - } @else { - @if not($toggle-button-background-focus) and $toggle-button-background { - $toggle-button-background-focus: var(--toggle-button-background); - } - } - - @if $variant == 'bootstrap' or $variant == 'indigo' { - @if not($toggle-button-background-focus--border) and $toggle-button-background { - $toggle-button-background-focus--border: var(--toggle-button-background) - } - - @if not($toggle-button-foreground-focus) and $toggle-button-background-focus--border { - $toggle-button-foreground-focus: adaptive-contrast(var(--toggle-button-background-focus--border)); - } - } @else { - @if not($toggle-button-foreground-focus) and $toggle-button-background-focus { - $toggle-button-foreground-focus: adaptive-contrast(var(--toggle-button-background-focus)); - } - } - - @return extend($theme, ( - name: $name, - selector: $selector, - toggle-button-background: $toggle-button-background, - toggle-button-background-focus: $toggle-button-background-focus, - toggle-button-background-disabled: $toggle-button-background-disabled, - toggle-button-foreground: $toggle-button-foreground, - toggle-button-foreground-focus: $toggle-button-foreground-focus, - toggle-button-foreground-disabled: $toggle-button-foreground-disabled, - toggle-button-foreground-filled: $toggle-button-foreground-filled, - toggle-button-background-focus--border: $toggle-button-background-focus--border, - )); -} /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars diff --git a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss index 313d3e25ccb..64de031b2ec 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss @@ -1,195 +1,8 @@ @use 'sass:map'; @use 'sass:math'; @use '../../base' as *; -@use '../../themes/schemas' as *; @use 'igniteui-theming/sass/animations/easings' as *; -//// -/// @group themes -/// @access public -/// @author Simeon Simeonoff -/// @author Marin Popov -//// - -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// @param {Color} $track-color [null] - The color of the track. -/// @param {Color} $track-step-color [null] - The color of the track steps. -/// @param {Number} $track-step-size [null] - The size of the track steps. -/// @param {Color} $track-hover-color [null] - The color of the track on hover. -/// @param {Color} $thumb-color [null] - The color of the thumb. -/// @param {Color} $thumb-focus-color [null] - The focus color of the thumb. -/// @param {Color} $thumb-border-color [null] - The thumb border color. -/// @param {Color} $thumb-border-hover-color [null] - The thumb border color when hovered. -/// @param {Color} $thumb-border-focus-color [null] - The thumb border color when focused. -/// @param {Color} $thumb-disabled-border-color [null] - The thumb border color when it's disabled. -/// @param {Color} $disabled-thumb-color [null] - The thumb color when its disabled. -/// @param {Color} $label-background-color [null] - The background color of the bubble label. -/// @param {Color} $label-text-color [null] - The text color of the bubble label. -/// @param {Color} $base-track-color [null] - The base background color of the track. -/// @param {Color} $base-track-hover-color [null] - The base background color of the track on hover. -/// @param {Color} $disabled-base-track-color [null] - The base background color of the track when is disabled. -/// @param {Color} $disabled-fill-track-color [null] - The base background color of the fill track when is disabled. -/// @param {Color} $tick-label-color [null] - The color of the tick label. -/// @param {Color} $tick-color [null] - The background-color of the tick. -/// @requires $light-material-schema -/// @example scss Set custom track and thumb on colors -/// $my-slider-theme: slider-theme($thumb-color: black, $track-color: yellow); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-slider-theme); -@function slider-theme( - $schema: $light-material-schema, - - $track-color: null, - $track-step-color: null, - $track-step-size: null, - $track-hover-color: null, - $thumb-color: null, - $thumb-focus-color: null, - $thumb-border-color: null, - $thumb-border-hover-color: null, - $thumb-border-focus-color: null, - $thumb-disabled-border-color: null, - $disabled-thumb-color: null, - $label-background-color: null, - $label-text-color: null, - - $base-track-color: null, - $base-track-hover-color: null, - $disabled-base-track-color: null, - $disabled-fill-track-color: null, - - $tick-label-color: null, - $tick-color: null, -) { - $name: 'igx-slider'; - $slider-schema: (); - - @if map.has-key($schema, 'slider') { - $slider-schema: map.get($schema, 'slider'); - } @else { - $slider-schema: $schema; - } - - $theme: digest-schema($slider-schema); - $variant: map.get($theme, '_meta', 'theme'); - - @if $variant == 'fluent' or $variant == 'indigo' { - @if not($thumb-border-color) and $track-color { - $thumb-border-color: var(--track-color); - } - - @if not($track-color) and $thumb-border-color { - $track-color: var(--thumb-border-color); - } - - @if not($thumb-border-hover-color) and $thumb-border-color { - $thumb-border-hover-color: hsl(from var(--thumb-border-color) h s calc(l * 1.1)); - } - - @if $variant == 'fluent' { - @if not($thumb-focus-color) and $thumb-border-color { - $thumb-focus-color: hsl(from var(--thumb-border-color) h s calc(l * 1.2)); - } - } @else { - @if not($thumb-focus-color) and $thumb-border-color { - $thumb-focus-color: hsla(from var(--thumb-border-color) h s l / 0.3); - } - } - } - - @if $variant == 'material' { - @if not($thumb-color) and $track-color { - $thumb-color: var(--track-color); - } - - @if not($track-color) and $thumb-color { - $track-color: var(--thumb-color); - } - - @if not($base-track-color) and $track-color { - $base-track-color: hsla(from var(--track-color) h s l / 0.4); - } - } - - @if $variant == 'bootstrap' { - @if not($thumb-border-color) and $thumb-color { - $thumb-border-color: var(--thumb-color); - } - - @if not($thumb-focus-color) and $thumb-color { - $thumb-focus-color: hsla(from var(--thumb-color) h s l / 0.5); - } - } - - @if not($track-hover-color) and $track-color { - $track-hover-color: hsl(from var(--track-color) h s calc(l * 1.1)); - } - - @if $variant != 'bootstrap' { - @if not($label-background-color) and $track-color { - $label-background-color: var(--track-color); - } - } @else { - @if not($label-background-color) and $thumb-color { - $label-background-color: var(--thumb-color); - } - } - - - @if not($label-text-color) and $label-background-color { - $label-text-color: adaptive-contrast($label-background-color); - } - - @if $variant != 'indigo' { - @if not($base-track-hover-color) and $base-track-color { - $base-track-hover-color: var(--base-track-color); - } - } @else { - @if not($base-track-hover-color) and $base-track-color { - $base-track-hover-color: hsl(from var(--base-track-color) h s calc(l * 0.8)); - } - } - - @if not($disabled-base-track-color) and $base-track-color { - $disabled-base-track-color: hsla(from var(--base-track-color) h s l / 0.5); - } - - @if not($disabled-fill-track-color) and $track-color { - $disabled-fill-track-color: hsla(from var(--track-color) h s l / 0.5); - } - - @if not($disabled-thumb-color) and $thumb-color { - $disabled-thumb-color: hsl(from var(--thumb-color) h calc(s * 0.5) calc(l * 1.2)); - } - - @if not($thumb-disabled-border-color) and $thumb-border-color { - $thumb-disabled-border-color: hsla(from var(--thumb-border-color) h s l / 0.5); - } - - @return extend($theme, ( - name: $name, - track-color: $track-color, - track-step-color: $track-step-color, - track-step-size: $track-step-size, - track-hover-color: $track-hover-color, - thumb-color: $thumb-color, - thumb-focus-color: $thumb-focus-color, - thumb-border-color: $thumb-border-color, - thumb-border-hover-color: $thumb-border-hover-color, - thumb-border-focus-color: $thumb-border-focus-color, - thumb-disabled-border-color: $thumb-disabled-border-color, - disabled-thumb-color: $disabled-thumb-color, - label-background-color: $label-background-color, - label-text-color: $label-text-color, - base-track-color: $base-track-color, - base-track-hover-color: $base-track-hover-color, - disabled-base-track-color: $disabled-base-track-color, - disabled-fill-track-color: $disabled-fill-track-color, - tick-label-color: $tick-label-color, - tick-color: $tick-color, - )); -} - /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. diff --git a/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss index 9b5b8a2922f..24a89523f5a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss @@ -1,71 +1,7 @@ @use 'sass:map'; @use '../../base' as *; -@use '../../themes/schemas' as *; @use 'igniteui-theming/sass/animations' as *; -//// -/// @group themes -/// @access public -/// @author Simeon Simeonoff -/// @author Marin Popov -//// - -/// If you specify a background color, but do not specify colors for either the -/// button or the text, their colors will be set 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 in the snackbar. -/// @param {Color} $text-color [null] - The text color used in the snackbar. -/// @param {Color} $button-color [null] - The button color used in the snackbar. -/// @param {box-shadow} $shadow [null] - Sets a shadow to be used for the snackbar. -/// @param {List} $border-radius [null] - The border radius used for the snackbar component. -/// @requires $light-material-schema -/// @example scss Set a custom background color -/// $my-snackbar-theme: snackbar-theme($background: white); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-snackbar-theme); -@function snackbar-theme( - $schema: $light-material-schema, - - $border-radius: null, - $background: null, - $text-color: null, - $button-color: null, - $shadow: null -) { - $name: 'igx-snackbar'; - $snackbar-schema: (); - - @if map.has-key($schema, 'snackbar') { - $snackbar-schema: map.get($schema, 'snackbar'); - } @else { - $snackbar-schema: $schema; - } - - $theme: digest-schema($snackbar-schema); - - @if not($button-color) and $background { - $button-color: adaptive-contrast(var(--background)); - } - - @if not($text-color) and $background { - $text-color: adaptive-contrast(var(--background)); - } - - @if not($shadow) { - $elevation: map.get($snackbar-schema, 'elevation'); - $shadow: elevation($elevation); - } - - @return extend($theme, ( - name: $name, - border-radius: $border-radius, - background: $background, - text-color: $text-color, - button-color: $button-color, - shadow: $shadow, - )); -} - /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. diff --git a/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss index 4993a71ce78..b45a2f5b4a0 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss @@ -1,79 +1,8 @@ @use 'sass:map'; @use 'sass:math'; @use '../../base' as *; -@use '../../themes/schemas' as *; @use 'igniteui-theming/sass/animations/easings' as *; -//// -/// @group themes -/// @access public -/// @author Marin Popov -/// -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// -/// @param {Color} $bar-color [null] - The background color of the bar. -/// @param {Color} $handle-color [null] - The color for the bar drag handle. -/// @param {Color} $expander-color [null] - The color for the arrow expander's. -/// @param {List} $border-radius [null] - the border radios of the splitter bar drag handle -/// @param {Color} $focus-color [null] - The color used for focused splitter bar. -/// @param {Number} $size [null] - The size of the splitter, its width for vertical and height for horizontal splitter. -/// @requires $light-material-schema -/// @example scss Set a custom expander color -/// $my-splitter-theme: splitter-theme($expander-color: red); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-splitter-them); -@function splitter-theme( - $schema: $light-material-schema, - - $bar-color: null, - $handle-color: null, - $expander-color: null, - $border-radius: null, - $focus-color: null, - $size: null -) { - $name: 'igx-splitter'; - $splitter-schema: (); - - @if map.has-key($schema, 'splitter') { - $splitter-schema: map.get($schema, 'splitter'); - } @else { - $splitter-schema: $schema; - } - - $theme: digest-schema($splitter-schema); - $variant: map.get($theme, '_meta', 'theme'); - - @if not($handle-color) and $bar-color { - $handle-color: adaptive-contrast(var(--bar-color)); - } - - @if not($expander-color) and $bar-color { - $expander-color: adaptive-contrast(var(--bar-color)); - } - - @if $variant != 'indigo' { - @if not($focus-color) and $bar-color { - $focus-color: hsl(from var(--bar-color) h s calc(l * 0.7)); - } - } @else { - @if not($focus-color) and $bar-color { - $focus-color: var(--bar-color); - } - } - - - @return extend($theme, ( - name: $name, - bar-color: $bar-color, - handle-color: $handle-color, - expander-color: $expander-color, - border-radius: $border-radius, - focus-color: $focus-color, - size: $size, - )); -} - /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. diff --git a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss index 2dd36102d7e..329de693b52 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss @@ -1,497 +1,5 @@ @use 'sass:map'; -@use 'sass:math'; @use '../../base' as *; -@use '../../themes/schemas' as *; - -//// -/// @group themes -/// @access public -/// @author Marin Popov -//// - -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// -/// @param {Color} $content-foreground [null] - The foreground of the step content. -/// @param {Color} $step-background [null] - The background of the step header. -/// @param {Color} $step-hover-background [null] - The background of the step header on hover. -/// @param {Color} $step-focus-background [null] - The background of the step header on focus. -/// @param {Color} $title-color [null] - The color of the step title. -/// @param {Color} $title-hover-color [null] - The color of the step title on hover. -/// @param {Color} $title-focus-color [null] - The color of the step title on focus. -/// @param {Color} $subtitle-color [null] - The color of the step subtitle. -/// @param {Color} $subtitle-hover-color [null] - The color of the step subtitle on hover. -/// @param {Color} $subtitle-focus-color [null] - The color of the step subtitle on focus. -/// @param {Color} $indicator-color [null] - The text color of the step indicator. -/// @param {Color} $indicator-background [null] - The background color of the step indicator. -/// @param {Color} $indicator-outline [null] - The outline color of the step indicator. -/// -/// @param {Color} $invalid-step-background [null] - The background of the invalid step header. -/// @param {Color} $invalid-step-hover-background [null] - The background of the invalid step header on hover. -/// @param {Color} $invalid-step-focus-background [null] - The background of the invalid step header on focus. -/// @param {Color} $invalid-title-color [null] - The color of the invalid step title. -/// @param {Color} $invalid-title-hover-color [null] - The color of the invalid step title on hover. -/// @param {Color} $invalid-title-focus-color [null] - The color of the invalid step title on focus. -/// @param {Color} $invalid-subtitle-color [null] - The color of the invalid step subtitle. -/// @param {Color} $invalid-subtitle-hover-color [null] - The color of the invalid step subtitle on hover. -/// @param {Color} $invalid-subtitle-focus-color [null] - The color of the invalid step subtitle on focus. -/// @param {Color} $invalid-indicator-color [null] - The color of the invalid step indicator. -/// @param {Color} $invalid-indicator-background [null] - The background color of the invalid step indicator. -/// @param {Color} $invalid-indicator-outline [null] - The outline color of the invalid step indicator. -/// -/// @param {Color} $current-step-background [null] - The background of the current step header. -/// @param {Color} $current-step-hover-background [null] - The background of the current step header on hover. -/// @param {Color} $current-step-focus-background [null] - The background of the current step header on focus. -/// @param {Color} $current-title-color [null] - The color of the current step title. -/// @param {Color} $current-title-hover-color [null] - The color of the current step title on hover. -/// @param {Color} $current-title-focus-color [null] - The color of the current step title on focus. -/// @param {Color} $current-subtitle-color [null] - The color of the current step subtitle. -/// @param {Color} $current-subtitle-hover-color [null] - The color of the current step subtitle on hover. -/// @param {Color} $current-subtitle-focus-color [null] - The color of the current step subtitle on focus. -/// @param {Color} $current-indicator-color [null] - The color of the current step indicator. -/// @param {Color} $current-indicator-background [null] - The background color of the current step indicator. -/// @param {Color} $current-indicator-outline [null] - The outline color of the current step indicator. -/// -/// @param {Color} $complete-step-background [null] - The background of the complete step header. -/// @param {Color} $complete-step-hover-background [null] - The background of the complete step header on hover. -/// @param {Color} $complete-step-focus-background [null] - The background of the complete step header on focus. -/// @param {Color} $complete-title-color [null] - The color of the complete step title. -/// @param {Color} $complete-title-hover-color [null] - The color of the complete step title on hover. -/// @param {Color} $complete-title-focus-color [null] - The color of the complete step title on focus. -/// @param {Color} $complete-subtitle-color [null] - The color of the complete step subtitle. -/// @param {Color} $complete-subtitle-hover-color [null] - The color of the complete step subtitle on hover. -/// @param {Color} $complete-subtitle-focus-color [null] - The color of the complete step subtitle on focus. -/// @param {Color} $complete-indicator-color [null] - The color of the completed step indicator. -/// @param {Color} $complete-indicator-background [null] - The background color of the completed step indicator. -/// @param {Color} $complete-indicator-outline [null] - The outline color of the completed step indicator. -/// -/// @param {Color} $disabled-title-color [null] - The title color of the disabled step. -/// @param {Color} $disabled-subtitle-color [null] - The subtitle color of the disabled step. -/// @param {Color} $disabled-indicator-color [null] - The indicator color of the disabled step. -/// @param {Color} $disabled-indicator-background [null] - The indicator background of the disabled step. -/// @param {Color} $disabled-indicator-outline [null] - The indicator outline color of the disabled step. -/// -/// @param {Color} $step-separator-color [null] - The separator border-color of between the steps. -/// @param {Color} $complete-step-separator-color [null] - The separator border-color between the completed steps. -/// -/// @param {Color} $step-separator-style [null] - The separator border-style of between the steps. -/// @param {Color} $complete-step-separator-style [null] - The separator border-style between the completed steps. -/// -/// @param {List} $border-radius-indicator [null] - The border-radius of the step indicator. -/// @param {List} $border-radius-step-header [null] - The border-radius of the step header. -/// -/// @requires $light-material-schema -/// @example scss Set custom stepper colors -/// $my-stepper-theme: stepper-theme($step-hover-background: red); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-stepper-theme); -@function stepper-theme( - $schema: $light-material-schema, - - $content-foreground: null, - - $step-background: null, - $step-hover-background: null, - $step-focus-background: null, - - $invalid-step-background: null, - $invalid-step-hover-background: null, - $invalid-step-focus-background: null, - - $current-step-background: null, - $current-step-hover-background: null, - $current-step-focus-background: null, - - $complete-step-background: null, - $complete-step-hover-background: null, - $complete-step-focus-background: null, - - // Incomplete - $indicator-color: null, - $indicator-background: null, - $indicator-outline: null, - - $title-color: null, - $title-hover-color: null, - $title-focus-color: null, - - $subtitle-color: null, - $subtitle-hover-color: null, - $subtitle-focus-color: null, - - // Invalid - $invalid-indicator-color: null, - $invalid-indicator-background: null, - $invalid-indicator-outline: null, - - $invalid-title-color: null, - $invalid-title-hover-color: null, - $invalid-title-focus-color: null, - - $invalid-subtitle-color: null, - $invalid-subtitle-hover-color: null, - $invalid-subtitle-focus-color: null, - - // Current - $current-indicator-color: null, - $current-indicator-background: null, - $current-indicator-outline: null, - - $current-title-color: null, - $current-title-hover-color: null, - $current-title-focus-color: null, - - $current-subtitle-color: null, - $current-subtitle-hover-color: null, - $current-subtitle-focus-color: null, - - // complete - $complete-indicator-color: null, - $complete-indicator-background: null, - $complete-indicator-outline: null, - - $complete-title-color: null, - $complete-title-hover-color: null, - $complete-title-focus-color: null, - - $complete-subtitle-color: null, - $complete-subtitle-hover-color: null, - $complete-subtitle-focus-color: null, - - // Disabled - $disabled-indicator-color: null, - $disabled-indicator-background: null, - $disabled-indicator-outline: null, - $disabled-title-color: null, - $disabled-subtitle-color: null, - - // Separator - $step-separator-color: null, - $complete-step-separator-color: null, - - $step-separator-style: null, - $complete-step-separator-style: null, - - // Border-radius - $border-radius-indicator: null, - $border-radius-step-header: null, -) { - $name: 'igx-stepper'; - $selector: 'igx-stepper'; - $stepper-schema: (); - - @if map.has-key($schema, 'stepper') { - $stepper-schema: map.get($schema, 'stepper'); - } @else { - $stepper-schema: $schema; - } - - $theme: digest-schema($stepper-schema); - - //default step - @if not($step-hover-background) and $step-background { - $step-hover-background: hsl(from var(--step-background) h s calc(l * 0.8)); - } - - @if not($step-focus-background) and $step-background { - $step-focus-background: hsl(from var(--step-background) h s calc(l * 0.9)); - } - - @if not($indicator-background) and $step-background { - $indicator-background: hsla(from adaptive-contrast(var(--step-background)) h s l / .6); - } - - @if not($indicator-outline) and $indicator-background { - $indicator-outline: var(--indicator-background); - } - - @if not($indicator-color) and $indicator-background { - $indicator-color: adaptive-contrast(var(--indicator-background)); - } - - @if not($title-color) and $step-background { - $title-color: adaptive-contrast(var(--step-background)); - } - - @if not($subtitle-color) and $step-background { - $subtitle-color: adaptive-contrast(var(--step-background)); - } - - @if not($title-hover-color) and $step-hover-background { - $title-hover-color: adaptive-contrast(var(--step-hover-background)); - } - - @if not($subtitle-hover-color) and $step-hover-background { - $subtitle-hover-color: adaptive-contrast(var(--step-hover-background)); - } - - @if not($title-focus-color) and $step-focus-background { - $title-focus-color: adaptive-contrast(var(--step-focus-background)); - } - - @if not($subtitle-focus-color) and $step-focus-background { - $subtitle-focus-color: adaptive-contrast(var(--step-focus-background)); - } - - //current step - @if not($current-step-background) and $step-background { - $current-step-background: var(--step-background); - } - - @if not($current-step-hover-background) and $current-step-background { - $current-step-hover-background: hsl(from var(--current-step-background) h s calc(l * 0.8)); - } - - @if not($current-step-focus-background) and $current-step-background { - $current-step-focus-background: hsl(from var(--current-step-background) h s calc(l * 0.9)); - } - - @if not($current-indicator-background) and $current-step-background { - $current-indicator-background: hsl(from var(--current-step-background) h s calc(l * 0.6)); - } - - @if not($current-indicator-outline) and $current-indicator-background { - $current-indicator-outline: var(--current-indicator-background); - } - - @if not($current-indicator-color) and $current-indicator-background { - $current-indicator-color: adaptive-contrast(var(--current-indicator-background)); - } - - @if not($current-title-color) and $current-step-background { - $current-title-color: adaptive-contrast(var(--current-step-background)); - } - - @if not($current-subtitle-color) and $current-step-background { - $current-subtitle-color: adaptive-contrast(var(--current-step-background)); - } - - @if not($current-title-hover-color) and $current-step-hover-background { - $current-title-hover-color: adaptive-contrast(var(--current-step-hover-background)); - } - - @if not($current-subtitle-hover-color) and $current-step-hover-background { - $current-subtitle-hover-color: adaptive-contrast(var(--current-step-hover-background)); - } - - @if not($current-title-focus-color) and $current-step-focus-background { - $current-title-focus-color: adaptive-contrast(var(--current-step-focus-background)); - } - - @if not($current-subtitle-focus-color) and $current-step-focus-background { - $current-subtitle-focus-color: adaptive-contrast(var(--current-step-focus-background)); - } - - //invalid step - @if not($invalid-step-background) and $step-background { - $invalid-step-background: var(--step-background); - } - - @if not($invalid-step-hover-background) and $invalid-step-background { - $invalid-step-hover-background: hsl(from var(--invalid-step-background) h s calc(l * 0.8)); - } - - @if not($invalid-step-focus-background) and $invalid-step-background { - $invalid-step-focus-background: hsl(from var(--invalid-step-background) h s calc(l * 0.9)); - } - - @if not($invalid-indicator-background) and not($step-background) and $invalid-step-background { - $invalid-indicator-background: adaptive-contrast(var(--invalid-step-background)); - } - - @if not($invalid-indicator-outline) and $invalid-indicator-background { - $invalid-indicator-outline: var(--invalid-indicator-background); - } - - @if not($invalid-indicator-color) and not($step-background) and $invalid-indicator-background { - $invalid-indicator-color: adaptive-contrast(var(--invalid-indicator-background)); - } - - @if not($invalid-title-color) and $invalid-indicator-background { - $invalid-title-color: var(--invalid-indicator-background); - } - - @if not($invalid-subtitle-color) and $invalid-indicator-background { - $invalid-subtitle-color: var(--invalid-indicator-background); - } - - @if not($invalid-title-hover-color) and $invalid-indicator-background { - $invalid-title-hover-color: var(--invalid-indicator-background); - } - - @if not($invalid-subtitle-hover-color) and $invalid-indicator-background { - $invalid-subtitle-hover-color: var(--invalid-indicator-background); - } - - @if not($invalid-title-focus-color) and $invalid-indicator-background { - $invalid-title-focus-color: var(--invalid-indicator-background); - } - - @if not($invalid-subtitle-focus-color) and $invalid-indicator-background { - $invalid-subtitle-focus-color: var(--invalid-indicator-background); - } - - //completed step - @if not($complete-step-background) and $step-background { - $complete-step-background: var(--step-background); - } - - @if not($complete-step-hover-background) and $complete-step-background { - $complete-step-hover-background: hsl(from var(--complete-step-background) h s calc(l * 0.8)); - } - - @if not($complete-step-focus-background) and $complete-step-background { - $complete-step-focus-background: hsl(from var(--complete-step-background) h s calc(l * 0.9)); - } - - @if not($complete-indicator-background) and $complete-step-background { - $complete-indicator-background: adaptive-contrast(var(--complete-step-background)); - } - - @if not($complete-indicator-color) and $complete-indicator-background { - $complete-indicator-color: adaptive-contrast(var(--complete-indicator-background)); - } - - @if not($complete-title-color) and $complete-step-background { - $complete-title-color: adaptive-contrast(var(--complete-step-background)); - } - - @if not($complete-subtitle-color) and $complete-step-background { - $complete-subtitle-color: adaptive-contrast(var(--complete-step-background)); - } - - @if not($complete-title-hover-color) and $complete-step-hover-background { - $complete-title-hover-color: adaptive-contrast(var(--complete-step-hover-background)); - } - - @if not($complete-subtitle-hover-color) and $complete-step-hover-background { - $complete-subtitle-hover-color: adaptive-contrast(var(--complete-step-hover-background)); - } - - @if not($complete-title-focus-color) and $complete-step-focus-background { - $complete-title-focus-color: adaptive-contrast(var(--complete-step-focus-background)); - } - - @if not($complete-subtitle-focus-color) and $complete-step-focus-background { - $complete-subtitle-focus-color: adaptive-contrast(var(--complete-step-focus-background)); - } - - //disabled step - @if not($disabled-indicator-background) and $step-background { - $disabled-indicator-background: hsla(from (adaptive-contrast(var(--step-background)) h s l / 0.5)); - } - - @if not($disabled-indicator-color) and $disabled-indicator-background { - $disabled-indicator-color: hsla(from (adaptive-contrast(var(--disabled-indicator-background)) h s l / 0.5)); - } - - @if not($disabled-indicator-outline) and $disabled-indicator-background { - $disabled-indicator-outline: var(--disabled-indicator-background); - } - - @if not($disabled-title-color) and $step-background { - $disabled-title-color: hsla(from (adaptive-contrast(var(--step-background)) h s l / 0.3)); - } - - @if not($disabled-subtitle-color) and $step-background { - $disabled-subtitle-color: hsla(from (adaptive-contrast(var(--step-background)) h s l / 0.3)); - } - - @if not($step-separator-color) and $step-background { - $step-separator-color: var(--step-background); - } - - @if not($step-separator-color) and $indicator-background { - $step-separator-color: var(--indicator-background); - } - - @if not($border-radius-indicator) { - $border-radius-indicator: map.get($theme, 'border-radius-indicator'); - } - - @if not($border-radius-step-header) { - $border-radius-step-header: map.get($theme, 'border-radius-step-header'); - } - - @return extend($theme, ( - name: $name, - selector: $selector, - - content-foreground: $content-foreground, - - // Incomplete - step-background: $step-background, - step-hover-background: $step-hover-background, - step-focus-background: $step-focus-background, - indicator-color: $indicator-color, - indicator-background: $indicator-background, - indicator-outline: $indicator-outline, - title-color: $title-color, - title-hover-color: $title-hover-color, - title-focus-color: $title-focus-color, - subtitle-color: $subtitle-color, - subtitle-hover-color: $subtitle-hover-color, - subtitle-focus-color: $subtitle-focus-color, - - // Invalid - invalid-step-background: $invalid-step-background, - invalid-step-hover-background: $invalid-step-hover-background, - invalid-step-focus-background: $invalid-step-focus-background, - invalid-indicator-color: $invalid-indicator-color, - invalid-indicator-background: $invalid-indicator-background, - invalid-indicator-outline: $invalid-indicator-outline, - invalid-title-color: $invalid-title-color, - invalid-title-hover-color: $invalid-title-hover-color, - invalid-title-focus-color: $invalid-title-focus-color, - invalid-subtitle-color: $invalid-subtitle-color, - invalid-subtitle-hover-color: $invalid-subtitle-hover-color, - invalid-subtitle-focus-color: $invalid-subtitle-focus-color, - - // Current - current-step-background: $current-step-background, - current-step-hover-background: $current-step-hover-background, - current-step-focus-background: $current-step-focus-background, - current-indicator-color: $current-indicator-color, - current-indicator-background: $current-indicator-background, - current-indicator-outline: $current-indicator-outline, - current-title-color: $current-title-color, - current-title-hover-color: $current-title-hover-color, - current-title-focus-color: $current-title-focus-color, - current-subtitle-color: $current-subtitle-color, - current-subtitle-hover-color: $current-subtitle-hover-color, - current-subtitle-focus-color: $current-subtitle-focus-color, - - // Complete - complete-step-background: $complete-step-background, - complete-step-hover-background: $complete-step-hover-background, - complete-step-focus-background: $complete-step-focus-background, - complete-indicator-color: $complete-indicator-color, - complete-indicator-background: $complete-indicator-background, - complete-indicator-outline: $complete-indicator-outline, - complete-title-color: $complete-title-color, - complete-title-hover-color: $complete-title-hover-color, - complete-title-focus-color: $complete-title-focus-color, - complete-subtitle-color: $complete-subtitle-color, - complete-subtitle-hover-color: $complete-subtitle-hover-color, - complete-subtitle-focus-color: $complete-subtitle-focus-color, - - // Disabled - disabled-indicator-color: $disabled-indicator-color, - disabled-indicator-background: $disabled-indicator-background, - disabled-indicator-outline: $disabled-indicator-outline, - disabled-title-color: $disabled-title-color, - disabled-subtitle-color: $disabled-subtitle-color, - - // Separator - step-separator-color: $step-separator-color, - complete-step-separator-color: $complete-step-separator-color, - step-separator-style: $step-separator-style, - complete-step-separator-style: $complete-step-separator-style, - - // Border-radius - border-radius-indicator: $border-radius-indicator, - border-radius-step-header: $border-radius-step-header, - )); -} /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars diff --git a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss index 6a6055ffa76..19831647304 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss @@ -2,270 +2,6 @@ @use 'sass:math'; @use '../../base' as *; @use 'igniteui-theming/sass/animations' as *; -@use '../../themes/schemas' as *; - -//// -/// @group themes -/// @access public -/// @author Simeon Simeonoff -/// @author Marin Popov -//// - -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// @param {Color} $thumb-on-color [null] - The color of the thumb when the switch is on. -/// @param {Color} $track-on-color [null] - The color of the track when the switch is on. -/// @param {Color} $track-on-hover-color [null] - The color of the track when the switch is on and hovered. -/// @param {Color} $thumb-off-color [null] - The color of the thumb when the switch is off. -/// @param {Color} $track-off-color [null] - The color of the track when the switch is off. -/// @param {Color} $thumb-disabled-color [null] - The color of the thumb when the switch is disabled. -/// @param {Color} $thumb-on-disabled-color [null] - The color of the thumb when the switch is on and disabled. -/// @param {Color} $track-disabled-color [null] - The color of the track when the switch is disabled. -/// @param {Color} $track-on-disabled-color [null] - The color of the track when the switch is on and disabled. -/// @param {Color} $label-color [null] - The color of the switch label -/// @param {Color} $label-hover-color [null] - The color of the switch label on hover. -/// @param {Color} $label-disabled-color [null] - The color of the switch label when the switch is disabled -/// @param {box-shadow} $resting-shadow [null] - The shadow used for the thumb in resting state of the switch. -/// @param {box-shadow} $hover-shadow [null] - The shadow used for the thumb in hover state of the switch. -/// @param {box-shadow} $disabled-shadow [null] - The shadow used for the thumb in disable state of the switch. -/// @param {List} $border-radius-track [null] - The border radius used for switch track. -/// @param {List} $border-radius-thumb [null] - The border radius used for switch thumb. -/// @param {List} $border-radius-ripple [null] - The border radius used for switch ripple. -/// @param {Color} $border-color [null] - The border color of the switch. -/// @param {Color} $border-hover-color [null] - The border color of the switch on hover. -/// @param {Color} $border-disabled-color [null] - The border color of the switch when it is disabled. -/// @param {Color} $border-on-color [null] - The border color when the switch is on. -/// @param {Color} $border-on-hover-color [null] - The border color when the switch is on and hovered. -/// @param {Color} $focus-outline-color [null] - The focus outlined color. -/// @param {Color} $focus-outline-color-focused [null] - The focus outlined color for focused state. -/// @param {Color} $focus-fill-color [null] - The focus fill color. -/// @param {Color} $focus-fill-hover-color [null] - The focus fill color on hover. -/// @requires $light-material-schema -/// -/// @example scss Set custom track and thumb on colors -/// $my-switch-theme: switch-theme($thumb-on-color: black, $track-on-color: yellow); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-switch-theme); -@function switch-theme( - $schema: $light-material-schema, - - $thumb-on-color: null, - $track-on-color: null, - $track-on-hover-color: null, - - $thumb-off-color: null, - $track-off-color: null, - - $track-disabled-color: null, - $track-on-disabled-color: null, - $thumb-disabled-color: null, - $thumb-on-disabled-color: null, - - $label-color: null, - $label-hover-color: null, - $label-disabled-color: null, - - $resting-shadow: null, - $hover-shadow: null, - $disabled-shadow: null, - - $border-radius-track: null, - $border-radius-thumb: null, - $border-radius-ripple: null, - $border-color: null, - $border-hover-color: null, - $border-disabled-color: null, - $border-on-color: null, - $border-on-hover-color: null, - $focus-outline-color: null, - $focus-outline-color-focused: null, - $focus-fill-color: null, - $focus-fill-hover-color: null, -) { - $name: 'igx-switch'; - $switch-schema: (); - - @if map.has-key($schema, 'switch') { - $switch-schema: map.get($schema, 'switch'); - } @else { - $switch-schema: $schema; - } - - $theme: digest-schema($switch-schema); - $variant: map.get($theme, '_meta', 'theme'); - - @if $variant == 'material' { - @if not($track-off-color) and $thumb-off-color { - $track-off-color: hsl(from var(--thumb-off-color) h s calc(l * 0.5)); - } - - @if not($thumb-off-color) and $track-off-color { - $thumb-off-color: hsl(from var(--track-off-color) h s calc(l * 1.3)); - } - - @if not($thumb-disabled-color) and $thumb-off-color { - $thumb-disabled-color: hsl(from var(--thumb-off-color) h s calc(l + 20)); - } - - @if not($track-on-color) and $thumb-on-color { - $track-on-color: hsl(from var(--thumb-on-color) h s calc(l * 1.3)); - } - - @if not($track-on-hover-color) and $track-on-color { - $track-on-hover-color: var(--track-on-color); - } - - @if not($thumb-on-color) and $track-on-color { - $thumb-on-color: hsl(from var(--track-on-color) h s calc(l * 0.6)); - } - - @if not($thumb-on-disabled-color) and $thumb-on-color { - $thumb-on-disabled-color: hsl(from var(--thumb-on-color) h s calc(l + 20)); - } - } @else { - @if not($thumb-off-color) and $track-off-color { - $thumb-off-color: hsla(from adaptive-contrast(var(--track-off-color)) h s l / 0.8); - } - @if not($border-color) and $thumb-off-color { - $border-color: var(--thumb-off-color); - } - - @if not($thumb-off-color) and $border-color { - $thumb-off-color: var(--border-color); - } - - @if not($border-hover-color) and $track-off-color { - $border-hover-color: hsla(from var(--thumb-off-color) h s l / 0.9); - } - - @if not($border-hover-color) and $border-color { - $border-hover-color: hsl(from var(--border-color) h s calc(l * 0.8)); - } - - @if not($thumb-on-color) and $track-on-color { - $thumb-on-color: adaptive-contrast(var(--track-on-color)); - } - - @if not($track-on-hover-color) and $track-on-color { - $track-on-hover-color: hsl(from var(--track-on-color) h s calc(l * 0.9)); - } - - @if not($border-on-color) and $track-on-color { - $border-on-color: var(--track-on-color); - } - - @if not($border-on-hover-color) and $border-on-color { - $border-on-hover-color: hsl(from var(--border-on-color) h s calc(l * 0.9)); - } - - @if not($thumb-disabled-color) and $thumb-off-color { - $thumb-disabled-color: hsla(from var(--thumb-off-color) h s l / 0.3); - } - - @if not($border-disabled-color) and $border-color { - $border-disabled-color: hsla(from var(--border-color) h s l / 0.3); - } - - @if not($thumb-on-disabled-color) and $thumb-on-color { - $thumb-on-disabled-color: hsla(from var(--thumb-on-color) h s l / 0.3); - } - - @if $variant == 'bootstrap' { - @if not($focus-fill-color) and $track-on-color { - $focus-fill-color: hsl(from var(--track-on-color) h s calc(l * 1.2)); - } - - @if not($focus-outline-color) and $focus-fill-color { - $focus-outline-color: hsla(from var(--focus-fill-color) h s l / 0.5); - } - - @if not($focus-fill-hover-color) and $focus-fill-color { - $focus-fill-hover-color: hsl(from var(--focus-fill-color) h s calc(l * 0.9)); - } - } - - @if $variant == 'indigo' { - @if not($focus-outline-color) and $border-color { - $focus-outline-color: hsla(from var(--border-color) h s l / 0.5); - } - - @if not($focus-outline-color-focused) and $border-on-color { - $focus-outline-color-focused: hsla(from var(--border-on-color) h s l / 0.5); - } - } - } - - @if not($track-disabled-color) and $track-off-color { - $track-disabled-color: hsla(from var(--track-off-color) h s l / 0.5); - } - - @if not($track-on-disabled-color) and $track-on-color { - $track-on-disabled-color: hsla(from var(--track-on-color) h s l / 0.5); - } - - @if not($resting-shadow) { - $resting-elevation: map.get($switch-schema, 'resting-elevation'); - $resting-shadow: elevation($resting-elevation); - } - - @if not($hover-shadow) { - $hover-elevation: map.get($switch-schema, 'hover-elevation'); - $hover-shadow: elevation($hover-elevation); - } - - @if not($disabled-shadow) { - $disabled-elevation: map.get($switch-schema, 'disabled-elevation'); - $disabled-shadow: elevation($disabled-elevation); - } - - @if not($border-radius-track) { - $border-radius-track: map.get($theme, 'border-radius-track'); - } - - @if not($border-radius-thumb) { - $border-radius-thumb: map.get($theme, 'border-radius-thumb'); - } - - @if not($border-radius-ripple) { - $border-radius-ripple: map.get($theme, 'border-radius-ripple'); - } - - @return extend($theme, ( - name: $name, - - thumb-on-color: $thumb-on-color, - track-on-color: $track-on-color, - track-on-hover-color: $track-on-hover-color, - - thumb-off-color: $thumb-off-color, - track-off-color: $track-off-color, - - track-disabled-color: $track-disabled-color, - track-on-disabled-color: $track-on-disabled-color, - thumb-disabled-color: $thumb-disabled-color, - thumb-on-disabled-color: $thumb-on-disabled-color, - - label-color: $label-color, - label-hover-color: $label-hover-color, - label-disabled-color: $label-disabled-color, - - resting-shadow: $resting-shadow, - hover-shadow: $hover-shadow, - disabled-shadow: $disabled-shadow, - - border-radius-track: $border-radius-track, - border-radius-thumb: $border-radius-thumb, - border-radius-ripple: $border-radius-ripple, - border-color: $border-color, - border-hover-color: $border-hover-color, - border-disabled-color: $border-disabled-color, - border-on-color: $border-on-color, - border-on-hover-color: $border-on-hover-color, - focus-outline-color: $focus-outline-color, - focus-outline-color-focused: $focus-outline-color-focused, - focus-fill-color: $focus-fill-color, - focus-fill-hover-color: $focus-fill-hover-color, - )); -} /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss index 60b4c2acbf2..8b47cbb75b4 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss @@ -5,265 +5,6 @@ @use '../ripple/ripple-component' as *; @use '../../themes/schemas' as *; -//// -/// @group themes -/// @access public -/// @author Marin Popov -//// - -/// If only background color is specified, -/// the idle item 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} $item-text-color [null] - The color used for the tab text color. -/// @param {Color} $item-background [null] - The background color used for the tabs header. -/// @param {Color} $item-hover-background [null] - The background used for the tabs on hover. -/// @param {Color} $item-hover-color [null] - The text color used for the tabs on hover. -/// @param {Color} $item-icon-color [null] - The color used for the tab icon. -/// @param {Color} $item-active-icon-color [null] - The color used for the active tab icon. -/// @param {Color} $item-hover-icon-color [null] - The color used for the tab icon on hover. -/// @param {Color} $item-disabled-icon-color [null] - The color used for the disabled tab icon. -/// @param {Color} $item-active-color [null] - The color used for the active tabs text. -/// @param {Color} $item-active-background [null] - The color used for the active/focused tab background. -/// @param {Color} $item-disabled-color [null] - The color used for the disabled tabs text. -/// @param {Color} $indicator-color [null] - The color used for the active tab indicator. -/// @param {Color} $button-color [null] - The color used for the button icon/text color. -/// @param {Color} $button-hover-color [null] - The color used for the button icon/text color on hover. -/// @param {Color} $button-disabled-color [null] - The color used for the disabled button icon/text. -/// @param {Color} $button-background [null] - The color used for the button background. -/// @param {Color} $button-hover-background [null] - The color used for the button background on hover. -/// @param {List} $border-radius [null] - The border radius for the tabs. -/// @param {Color} $border-color [null] - The border color of the tabs. -/// @param {Color} $border-color--hover [null] - The border color of the tabs on hover. -/// @param {Color} $tab-ripple-color [null] - The color used for the button background. -/// @param {Color} $button-ripple-color [null] - The color used for the button background on hover. -/// @requires $light-material-schema -/// @example scss Set a custom background color -/// $my-tabs-theme: tabs-theme( -/// $item-background: orange -/// ); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-tabs-theme); -@function tabs-theme( - $schema: $light-material-schema, - $item-text-color: null, - $item-background: null, - $item-hover-background: null, - $item-hover-color: null, - $item-icon-color: null, - $item-active-icon-color: null, - $item-hover-icon-color: null, - $item-disabled-icon-color: null, - $item-active-color: null, - $item-active-background: null, - $item-disabled-color: null, - $indicator-color: null, - $button-color: null, - $button-background: null, - $button-hover-background: null, - $button-hover-color: null, - $button-disabled-color: null, - $tab-ripple-color: null, - $button-ripple-color: null, - $border-radius: null, - $border-color: null, - $border-color--hover: null, -) { - $name: 'igx-tabs'; - $tabs-schema: (); - - @if map.has-key($schema, 'tabs') { - $tabs-schema: map.get($schema, 'tabs'); - } @else { - $tabs-schema: $schema; - } - - $theme: digest-schema($tabs-schema); - $variant: map.get($theme, '_meta', 'theme'); - - @if not($item-active-background) and $item-background { - $item-active-background: hsl(from var(--item-background) h s calc(l * 0.9)); - } - - @if not($item-background) { - @if not($item-text-color) and $item-icon-color { - $item-text-color: var(--item-icon-color); - } - - @if not($item-icon-color) and $item-text-color { - $item-icon-color: var(--item-text-color); - } - } @else { - @if not($item-text-color) and $item-background { - $item-text-color: hsla(from adaptive-contrast(var(--item-background)) h s l / 0.8); - } - - @if not($item-icon-color) and $item-background { - $item-icon-color: hsla(from adaptive-contrast(var(--item-background) h s l / 0.8)); - } - } - - @if not($item-active-background) { - @if $variant != 'bootstrap' { - @if not($item-active-icon-color) and $item-icon-color { - $item-active-icon-color: var(--item-icon-color); - } - - @if not($item-active-color) and $item-text-color { - $item-active-color: var(--item-text-color); - } - } - } @else { - @if not($item-active-icon-color) and $item-active-color { - $item-active-icon-color: var(--item-active-color); - } - - @if not($item-active-color) and $item-active-icon-color { - $item-active-color: var(--item-active-icon-color); - } - - @if not($item-active-icon-color) and $item-active-background { - $item-active-icon-color: adaptive-contrast(var(--item-active-background)); - } - - @if not($item-active-color) and $item-active-background { - $item-active-color: adaptive-contrast(var(--item-active-background)); - } - } - - @if not($item-hover-background) { - @if not($item-hover-color) and $item-text-color { - $item-hover-color: hsla(from var(--item-text-color) h s l / 1); - } - - @if not($item-hover-icon-color) and $item-icon-color { - $item-hover-icon-color: hsla(from var(--item-icon-color) h s l / 1); - } - } @else { - @if not($item-hover-color) { - $item-hover-color: adaptive-contrast(var(--item-hover-background)); - } - - @if not($item-hover-icon-color) { - $item-hover-icon-color: adaptive-contrast(var(--item-hover-background)); - } - } - - @if not($item-hover-background) and $item-background { - $item-hover-background: hsl(from var(--item-background) h s calc(l * 0.9)); - } - - @if $variant == 'bootstrap' { - @if not($border-color) and $item-background { - $border-color: hsla(from adaptive-contrast(var(--item-background)) h s l / 0.5); - } - - @if not($border-color--hover) and $border-color { - $border-color--hover: var(--border-color); - } - } @else { - @if not($item-background) { - @if not($indicator-color) and $item-text-color { - $indicator-color: var(--item-text-color); - } - - @if not($indicator-color) and $item-icon-color { - $indicator-color: var(--item-icon-color); - } - } @else { - @if not($indicator-color) and $item-active-color { - $indicator-color: var(--item-active-color); - } - - @if not($indicator-color) { - $indicator-color: adaptive-contrast(var(--item-background)); - } - } - } - - // Button - @if $item-background { - @if not($button-background) and $item-background { - $button-background: var(--item-background); - } - - @if not($button-hover-background) and $item-background { - $button-hover-background: hsl(from var(--item-background) h s calc(l * 0.9)); - } - } @else if not($button-background) { - @if $variant != 'material' { - @if not($button-color) and $item-text-color { - $button-color: var(--item-text-color); - } - - @if not($button-hover-color) and $button-color { - $button-hover-color: hsl(from var(--button-color) h s calc(l * 0.9)); - } - - @if not($button-disabled-color) and $button-color { - $button-disabled-color: hsla(from var(--button-color) h s l / 0.5); - } - } - } - - @if $button-background { - @if not($button-hover-background) and $button-background { - $button-hover-background: hsl(from var(--button-background) h s calc(l * 0.9)); - } - } - - @if not($button-color) and $button-background { - $button-color: adaptive-contrast(var(--button-background)); - } - - @if not($button-hover-color) and $button-hover-background { - $button-hover-color: adaptive-contrast(var(--button-hover-background)); - } - - @if not($button-ripple-color) and $button-color { - $button-ripple-color: var(--button-color); - } - - @if not($button-disabled-color) and $button-color { - $button-disabled-color: hsla(from var(--button-color) h s l / 0.4); - } - - // Button end - - @if not($tab-ripple-color) and $item-active-background { - $tab-ripple-color: text-contrast($item-active-background); - } - - @if not($tab-ripple-color) and $item-background { - $tab-ripple-color: text-contrast($item-background); - } - - @return extend($theme, ( - name: $name, - item-text-color: $item-text-color, - item-background: $item-background, - item-hover-color: $item-hover-color, - item-hover-background: $item-hover-background, - item-icon-color: $item-icon-color, - item-active-icon-color: $item-active-icon-color, - item-hover-icon-color: $item-hover-icon-color, - item-disabled-icon-color: $item-disabled-icon-color, - item-active-color: $item-active-color, - item-active-background: $item-active-background, - item-disabled-color: $item-disabled-color, - indicator-color: $indicator-color, - button-color: $button-color, - button-background: $button-background, - button-hover-background:$button-hover-background, - button-hover-color:$button-hover-color, - button-disabled-color:$button-disabled-color, - tab-ripple-color: $tab-ripple-color, - button-ripple-color: $button-ripple-color, - border-color: $border-color, - border-color--hover: $border-color--hover, - border-radius: $border-radius, - )); -} - /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @@ -322,10 +63,10 @@ flex: 0 0 auto; background: var-get($theme, 'item-background'); z-index: 1; - + @if $bootstrap-theme { position: relative; - + &::after { content: ''; position: absolute; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss index 13d9f0b869f..9a661698792 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss @@ -1,161 +1,5 @@ @use 'sass:map'; -@use 'sass:meta'; @use '../../base' as *; -@use '../../themes/schemas' as *; - -//// -/// @group themes -/// @access public -/// @author Marin Popov -//// - -/// 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} $text-color [null] - The text color of a open time picker. -/// @param {Color} $hover-text-color [null] - The hover text color of a open time picker. -/// @param {Color} $selected-text-color [null] - The text color of a selected item in time picker. -/// @param {Color} $active-item-background [null] - The background color for current item in focused column inside the time picker. -/// @param {Color} $active-item-foreground [null] - The foreground color for current item in focused column inside the time picker. -/// @param {Color} $disabled-text-color [null] - The text color for disabled values. -/// @param {Color} $disabled-item-background [null] - The background color for disabled values . -/// @param {Color} $header-background [null] - The header background color of a time picker. -/// @param {Color} $header-hour-text-color [null] - The header hour text color of a time picker. -/// @param {Color} $background-color [null] - The time-picker panel background color. -/// @param {Number} $time-item-size [null] - The height of the time item. -/// @param {Color} $divider-color [null] - The color for the actions area divider. -/// @param {Color} $border-color [null] - The border color around the time picker. -/// @param {box-shadow} $modal-shadow [null] - The custom shadow to be used for the time picker in modal mode. -/// @param {box-shadow} $dropdown-shadow [null] - The custom shadow to be used for the time picker in dropdown mode. -/// @param {List} $border-radius [null] - The border radius used for the outline of the picker. -/// @param {List} $active-item-border-radius [null] - The border radius used for the outline of the currently active item (hours, minutes, AM/PM). -/// @requires $light-material-schema -/// @example scss Change the background and text colors in time picker -/// $my-time-picker-theme: time-picker-theme( -/// $text-color: white, -/// $background-color: black -/// ); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-time-picker-theme); -@function time-picker-theme( - $schema: $light-material-schema, - - $border-radius: null, - $active-item-border-radius: null, - - $text-color: null, - $hover-text-color: null, - $selected-text-color: null, - $active-item-background: null, - $active-item-foreground: null, - $disabled-text-color: null, - $disabled-item-background: null, - $header-background: null, - $header-hour-text-color: null, - $background-color: null, - $modal-shadow: null, - $dropdown-shadow: null, - $border-color: null, - $divider-color: null, - $time-item-size: null, -) { - $name: 'igx-time-picker'; - $selector: '.igx-time-picker'; - $time-picker-schema: (); - - @if map.has-key($schema, 'time-picker') { - $time-picker-schema: map.get($schema, 'time-picker'); - } @else { - $time-picker-schema: $schema; - } - - $theme: digest-schema($time-picker-schema); - - @if not($text-color) and $background-color { - $text-color: hsla(from adaptive-contrast(var(--background-color)) h s l / 0.7); - } - - @if not($hover-text-color) and $text-color { - $hover-text-color: hsla(from var(--text-color) h s l / 1); - } - - @if not($header-background) and $selected-text-color { - $header-background: var(--selected-text-color); - } - - @if not($header-background) and $background-color { - $header-background: var(--background-color); - } - - @if not($header-hour-text-color) and $header-background { - $header-hour-text-color: adaptive-contrast(var(--header-background)); - } - - @if not($selected-text-color) and $active-item-background { - $selected-text-color: var(--active-item-background); - } - - @if not($active-item-background) and $selected-text-color { - $active-item-background: var(--selected-text-color); - } - - @if not($active-item-background) and $background-color { - $active-item-background: hsla(from adaptive-contrast(var(--background-color)) h s l / .5); - } - - @if not($active-item-foreground) and $active-item-background { - $active-item-foreground: adaptive-contrast(var(--active-item-background)); - } - - @if not($selected-text-color) and $background-color { - $selected-text-color: adaptive-contrast(var(--background-color)); - } - - @if not($disabled-text-color) and $disabled-item-background { - $disabled-text-color: hsla(from adaptive-contrast(var(--disabled-item-background)) h s l / .6); - } - - @if not($border-color) and $background-color { - $border-color: hsla(from adaptive-contrast(var(--background-color)) h s l / .6); - } - - @if not($divider-color) and $border-color { - $divider-color: var(--border-color); - } - - @if not($modal-shadow) { - $elevation: map.get($time-picker-schema, 'modal-elevation'); - $modal-shadow: elevation($elevation); - } - - @if not($dropdown-shadow) { - $elevation: map.get($time-picker-schema, 'dropdown-elevation'); - $dropdown-shadow: elevation($elevation); - } - - @return extend($theme, ( - name: $name, - selector: $selector, - text-color: $text-color, - hover-text-color: $hover-text-color, - selected-text-color: $selected-text-color, - active-item-foreground: $active-item-foreground, - active-item-background: $active-item-background, - disabled-text-color: $disabled-text-color, - disabled-item-background: $disabled-item-background, - header-background: $header-background, - header-hour-text-color: $header-hour-text-color, - background-color: $background-color, - modal-shadow: $modal-shadow, - dropdown-shadow: $dropdown-shadow, - border-radius: $border-radius, - border-color: $border-color, - divider-color: $divider-color, - time-item-size: $time-item-size, - active-item-border-radius: $active-item-border-radius, - )); -} /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars diff --git a/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss index acce0d38e78..415a9360d88 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss @@ -1,74 +1,5 @@ @use 'sass:map'; @use '../../base' as *; -@use '../../themes/schemas' as *; - -//// -/// @group themes -/// @access public -/// @author Simeon Simeonoff -/// @author Marin Popov -//// - -/// If only background color is specified, -/// the text-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} $background [null] - The background color used for the toast. -/// @param {Color} $text-color [null] - The text-color used for the toast. -/// @param {Color} $border-color [null] - The border-color used for the toast. -/// -/// @param {List} $border-radius [null] - The border radius used for the toast component. -/// @param {box-shadow} $shadow [null] - Sets a shadow to be used for the toast. -/// -/// @requires $light-material-schema -/// -/// @example scss Set a custom background color -/// $my-toast-theme: toast-theme($background: green); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-toast-theme); -@function toast-theme( - $schema: $light-material-schema, - - $border-radius: null, - $border-color: null, - $background: null, - $text-color: null, - $shadow: null, -) { - $name: 'igx-toast'; - $toast-schema: (); - - @if map.has-key($schema, 'toast') { - $toast-schema: map.get($schema, 'toast'); - } @else { - $toast-schema: $schema; - } - - $theme: digest-schema($toast-schema); - - @if not($text-color) and $background { - $text-color: adaptive-contrast(var(--background)); - } - - @if not($border-color) and $text-color { - $border-color: hsla(from var(--text-color) h s l / 0.3); - } - - @if not($shadow) { - $elevation: map.get($toast-schema, 'elevation'); - $shadow: elevation($elevation); - } - - @return extend($theme, ( - name: $name, - background: $background, - border-radius: $border-radius, - text-color: $text-color, - border-color: $border-color, - shadow: $shadow, - )); -} /// Toast Component /// @deprecated Use the `css-vars` mixin instead. diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss index d3e21b45036..c5ac8b82e8d 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss @@ -1,67 +1,5 @@ @use 'sass:map'; @use '../../base' as *; -@use '../../themes/schemas' as *; - -//// -/// @group themes -/// @access public -/// @author Simeon Simeonoff -/// @author Marin Popov -//// - -/// Returns a map containing all style properties related to the theming the tooltip directive. -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// -/// @param {Color} $background [null] - The background color of the tooltip. -/// @param {Color} $text-color [null] - The text color of the tooltip. -/// -/// @param {List} $border-radius [null] - The border radius used for the tooltip component. -/// @param {box-shadow} $shadow [null] - Sets a shadow to be used for the tooltip component. -/// -/// @requires $light-material-schema -/// -/// @example scss Change the tooltip background -/// $my-tooltip-theme: tooltip-theme($background: magenta); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-tooltip-theme); -@function tooltip-theme( - $schema: $light-material-schema, - - $border-radius: null, - $shadow: null, - $background: null, - $text-color: null -) { - $name: 'igx-tooltip'; - $selector: '.igx-tooltip'; - $tooltip-schema: (); - - @if map.has-key($schema, 'tooltip') { - $tooltip-schema: map.get($schema, 'tooltip'); - } @else { - $tooltip-schema: $schema; - } - - $theme: digest-schema($tooltip-schema); - - @if not($shadow) { - $elevation: map.get($tooltip-schema, 'elevation'); - $shadow: elevation($elevation); - } - - @if not($text-color) and $background { - $text-color: adaptive-contrast($background); - } - - @return extend($theme, ( - name: $name, - selector: $selector, - background: $background, - text-color: $text-color, - border-radius: $border-radius, - shadow: $shadow, - )); -} /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss index f64a00a367d..6d4550ba331 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss @@ -1,133 +1,5 @@ @use 'sass:map'; -@use 'sass:meta'; @use '../../base' as *; -@use '../../themes/schemas' as *; - -//// -/// @group themes -/// @access public -/// @author Marin Popov -//// - -/// Returns a map containing all style properties related to the theming of the tree component. -/// @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 tree node. -/// @param {Color} foreground [null] - The color used for the tree node content. -/// @param {Color} icon-color [null] - The color used for the tree node icon. -/// @param {Color} background-selected [null] - The background color used for the selected tree node. -/// @param {Color} foreground-selected [null] - The color used for the content of the selected tree node. -/// @param {Color} background-active [null] - The background color used for the active tree node. -/// @param {Color} foreground-active [null] - The color used for the content of the active tree node. -/// @param {Color} background-active-selected [null] - The background color used for the active selected tree node. -/// @param {Color} foreground-active-selected [null] - The color used for the content of the active selected tree node. -/// @param {Color} background-disabled [null] - The background color used for the tree node in disabled state. -/// @param {Color} foreground-disabled [null] - The color used for the content of the disabled tree node. -/// @param {Color} drop-area-color [null] - The background color used for the tree node drop aria. -/// @param {Color} border-color [null] - The outline shadow color used for tree node in focus state. -/// @param {Color} hover-color [null] - The background color used for the tree node on hover. -/// @param {Color} hover-selected-color [null] - The background color used for the selected tree node on hover. -/// @requires $light-material-schema -/// -/// @example scss Change the tree background -/// $my-tree-theme: tree-theme($background: magenta); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-tree-theme); -@function tree-theme( - $schema: $light-material-schema, - $background: null, - $background-selected: null, - $background-active: null, - $background-active-selected: null, - $background-disabled: null, - $foreground: null, - $foreground-selected: null, - $foreground-active: null, - $foreground-active-selected: null, - $foreground-disabled: null, - $icon-color: null, - $drop-area-color: null, - $border-color: null, - $hover-color: null, - $hover-selected-color: null, - $size: null, -) { - $name: 'igx-tree'; - $selector: 'igx-tree-node'; - $tree-schema: (); - - @if map.has-key($schema, 'tree') { - $tree-schema: map.get($schema, 'tree'); - } @else { - $tree-schema: $schema; - } - - $theme: digest-schema($tree-schema); - - @if not($foreground) and $background { - $foreground: adaptive-contrast(var(--background)); - } - - @if not($background-selected) and $background { - $background-selected: hsl(from var(--background) h s calc(l * 0.9)); - } - - @if not($hover-color) and $background { - $hover-color: hsla(from adaptive-contrast(var(--background)) h s l / 0.1); - } - - @if not($hover-selected-color) and $background-selected { - $hover-selected-color: hsl(from var(--background-selected) h s calc(l * 0.9)); - } - - @if not($foreground-selected) and $background-selected { - $foreground-selected: adaptive-contrast(var(--background-selected)); - } - - @if not($background-active) and $background { - $background-active: hsl(from var(--background) h s calc(l * 0.9)); - } - - @if not($foreground-active) and $background-active { - $foreground-active: adaptive-contrast(var(--background-active)); - } - - @if not($background-active-selected) and $background-active { - $background-active-selected: hsl(from var(--background-active) h s calc(l * 0.9)); - } - - @if not($foreground-active-selected) and $background-active-selected { - $foreground-active-selected: adaptive-contrast(var(--background-active-selected)); - } - - @if not($background-disabled) and $background { - $background-disabled: color-mix(in hsl, var(--background), transparent 50%); - } - - @if not($foreground-disabled) and $background-disabled { - $foreground-disabled: adaptive-contrast(var(--background-disabled)); - } - - @return extend($theme, ( - name: $name, - selector: $selector, - background: $background, - foreground: $foreground, - icon-color: $icon-color, - background-selected: $background-selected, - foreground-selected: $foreground-selected, - background-active: $background-active, - foreground-active: $foreground-active, - background-active-selected: $background-active-selected, - foreground-active-selected: $foreground-active-selected, - background-disabled: $background-disabled, - foreground-disabled: $foreground-disabled, - drop-area-color: $drop-area-color, - border-color: $border-color, - hover-color: $hover-color, - hover-selected-color: $hover-selected-color, - size: $size, - )); -} /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars diff --git a/projects/igniteui-angular/src/lib/core/styles/components/watermark/_watermark-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/watermark/_watermark-theme.scss index 1fa70ac2dd5..8d11269ab0e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/watermark/_watermark-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/watermark/_watermark-theme.scss @@ -1,65 +1,5 @@ @use 'sass:map'; @use '../../base' as *; -@use '../../themes/schemas' as *; - -//// -/// @group themes -/// @access private -/// @author Marin Popov -//// - -/// Returns a map containing all style properties related to the theming the watermark directive. -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// @param {Color} $base-color [null] - The base color for all elements of the watermark. -/// @param {Color} $image-color [null] - The color used for the stamp image. -/// @param {Number} $image-opacity [null] - The opacity of the stamp image. -/// @param {Color} $link-background [null] - The background color used for the link. -/// @param {Color} $color [null] - The color used for the link text. -/// @param {Color} $border-color [null] - The border color used for the link. -/// @param {List} $border-radius [null] - The border radius used for the link. -/// -/// @example scss Change the watermark link background -/// $my-watermark-theme: watermark-theme($link-background: magenta); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-watermark-theme); -/// @requires $light-material-schema -@function watermark-theme( - $schema: $light-material-schema, - $base-color: null, - $image-color: null, - $image-opacity: null, - $link-background: null, - $color: null, - $border-color: null, - $border-radius: null, -) { - $name: 'igx-watermark'; - $watermark-schema: (); - - @if map.has-key($schema, 'watermark') { - $watermark-schema: map.get($schema, 'watermark'); - } @else { - $watermark-schema: $schema; - } - - $theme: digest-schema($watermark-schema); - - @if not($color) and $link-background { - $color: text-contrast($link-background); - } - - @return extend($theme, ( - name: $name, - selector: 'igc-trial-watermark', - base-color: $base-color, - image-color: $image-color, - image-opacity: $image-opacity, - link-background: $link-background, - color: $color, - border-color: $border-color, - border-radius: $border-radius, - )); -} /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss index 81aef3a6abf..fb14eb9b8fd 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss @@ -5,3 +5,4 @@ @forward 'igniteui-theming/sass/elevations/presets'; @forward 'igniteui-theming/sass/typography/presets'; @forward 'igniteui-theming/sass/animations'; +@forward 'igniteui-theming/sass/themes/components';