diff --git a/CHANGELOG.md b/CHANGELOG.md index b02a0d3762f..160c32e5e7b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -102,6 +102,28 @@ All notable changes for each version of this project will be documented in this ## 8.1.0 ### New Features + +##### New theme +Ignite UI for angular now have a new theme that mimics the Microsoft Fluent design as much as possible. +In order to use the theme you have to use one of the following mixins: + `igx-fluent-theme` and `igx-fluent-dark-theme` + +We also added two new pallets that go with the new theme, `$fluent-word-palette` and `$fluent-excel-palette`. + +This is an example of how you can use the new theme. + +```scss +// Light version +.fluent-word-theme { + @include igx-fluent-theme($fluent-word-palette); +} + +// Dark version +.fluent-excel-dark-theme { + @include igx-fluent-dark-theme($fluent-excel-palette); +} +``` + - `IgxBottomNav` now supports an `igx-tab` declaration mode. When in this mode, panels declarations are not accepted and tab items' content is not rendered. - You can use this mode to apply directives on the tab items - for example to achieve routing navigation. - You are allowed to customize tab items with labels, icons and even templates. diff --git a/projects/igniteui-angular/src/lib/combo/combo-item.component.html b/projects/igniteui-angular/src/lib/combo/combo-item.component.html index 79aee982b2a..36e93548540 100644 --- a/projects/igniteui-angular/src/lib/combo/combo-item.component.html +++ b/projects/igniteui-angular/src/lib/combo/combo-item.component.html @@ -1,4 +1,4 @@ - \ No newline at end of file + diff --git a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss index 4f68d40680d..c1f8638b997 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss @@ -111,22 +111,24 @@ @return #fff; } -/// Retrieves a contrast text color for a given color from a color palette. +/// Converts a rgba color to a hexidecimal color. /// @access public -/// @group Palettes -/// @param {Map} $palette - The source palette map. -/// @param {string} $color - The target color from the color palette. -/// @param {number|variant} $variant - The target color shade from the color palette. -/// @requires igx-color -/// @requires text-contrast -/// @requires hexrgba -/// @returns {Color} [#fff] - Returns white if now palette, color and/or variant matches found. -@function igx-contrast-color($palette, $color, $variant: 500) { - $_color: igx-color($palette, $color, $variant); - @if $_color { - @return text-contrast(hexrgba($_color)); +/// @requires {function} to-string +/// @param {Color} $rgba - The rgba color to convert. +/// @param {Color} $background - The background color to convert against. +/// @return {Color} - The hexidecimal representation of the rgba value. +@function hexrgba($rgba, $background: #fff) { + @if type-of($rgba) == color { + $red: red($rgba); + $green: green($rgba); + $blue: blue($rgba); + $a: alpha($rgba); + $r: floor($a * $red + (1 - $a) * red($background)); + $g: floor($a * $green + (1 - $a) * green($background)); + $b: floor($a * $blue + (1 - $a) * blue($background)); + @return rgb($r, $g, $b); } - @return #fff; + @return $rgba; } /// Returns a contrast color for a passed color. @@ -138,7 +140,7 @@ @if type-of($color) == 'color' { $lightContrast: contrast($color, white); $darkContrast: contrast($color, black); - + @if ($lightContrast > $darkContrast) { @return white; } @else { @@ -148,6 +150,24 @@ @return $color; } +/// Retrieves a contrast text color for a given color from a color palette. +/// @access public +/// @group Palettes +/// @param {Map} $palette - The source palette map. +/// @param {string} $color - The target color from the color palette. +/// @param {number|variant} $variant - The target color shade from the color palette. +/// @requires igx-color +/// @requires text-contrast +/// @requires hexrgba +/// @returns {Color} [#fff] - Returns white if now palette, color and/or variant matches found. +@function igx-contrast-color($palette, $color, $variant: 500) { + $_color: igx-color($palette, $color, $variant); + @if $_color { + @return text-contrast(hexrgba($_color)); + } + @return #fff; +} + /// Test if `$value` is a valid direction. /// @access private /// @param {*} $value - The value to test. @@ -198,47 +218,13 @@ @return $sign + $result; } -/// Converts a rgba color to a hexidecimal color. -/// @access public -/// @requires {function} to-string -/// @param {Color} $rgba - The rgba color to convert. -/// @param {Color} $background - The background color to convert against. -/// @return {Color} - The hexidecimal representation of the rgba value. -@function hexrgba($rgba, $background: #fff) { - @if type-of($rgba) == color { - $red: red($rgba); - $green: green($rgba); - $blue: blue($rgba); - $a: alpha($rgba); - $r: floor($a * $red + (1 - $a) * red($background)); - $g: floor($a * $green + (1 - $a) * green($background)); - $b: floor($a * $blue + (1 - $a) * blue($background)); - @return rgb($r, $g, $b); - } - @return $rgba; -} - -/// Extends a Map object with the properties of another Map object. -/// @access private -/// @param {Map...} $maps - The source map to get extended. -/// @returns {Map} - Returns the merged maps. -@function extend($maps...) { - $result: (); - - @each $map in $maps { - $result: map-merge($result, map-clean($map)); - } - - @return $result; -} - /// Removes all null key-value pairs from the map /// @access private /// @param {Map} $map - The target map to be cleaned. /// @returns {Map} - Returns a clean map. @function map-clean($map) { $result: (); - + @each $key, $value in $map { @if($value) != null { $result: map-merge($result, ( @@ -246,6 +232,20 @@ )); } } + + @return $result; +} + +/// Extends a Map object with the properties of another Map object. +/// @access private +/// @param {Map...} $maps - The source map to get extended. +/// @returns {Map} - Returns the merged maps. +@function extend($maps...) { + $result: (); + + @each $map in $maps { + $result: map-merge($result, map-clean($map)); + } @return $result; } @@ -309,7 +309,7 @@ $warn: #fbb13c, $error: #ff134a, $grays: #000, - $surface: #fff, + $surface: #fff ) { $saturations: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 'A100', 'A200', 'A400', 'A700'); $shades: (50: .02, 100: .04, 200: .08, 300: .12, 400: .26, 500: .38, 600: .54, 700: .62, 800: .74, 900: .87); diff --git a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss index 43c1a9bb12d..f29c6389215 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss @@ -3,6 +3,29 @@ /// @author Simeon Simeonoff //// +/// Help debug sass maps. +/// @access privet +/// @example scss - Sample usage +/// input[type="checkbox"] { +/// @include hide-default(); +/// } + +//@mixin debug-map($map) { +// @at-root { +// @debug-map { +// __toString__: inspect($map); +// __length__: length($map); +// __keys__: map-keys($map); +// +// __properties__ { +// @each $key, $value in $map { +// #{$key}: inspect($value); +// } +// } +// } +// } +//} + /// Hides the element from the DOM. /// @access public /// @example scss - Sample usage 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 a814055738e..93fb6254889 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 @@ -142,12 +142,10 @@ ) { $message: map-get($categories, 'message'); - @include igx-scope('.igx-typography') { - %igx-banner__text { - @include igx-type-style($type-scale, $message) { - margin-top: 0; - margin-bottom: 0; - } + %igx-banner__text { + @include igx-type-style($type-scale, $message) { + margin-top: 0; + margin-bottom: 0; } } } 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 4fab9c6d9a0..cb51a67c628 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 @@ -35,7 +35,7 @@ $background: null, $idle-item-color: null, $active-item-color: null, - $shadow: null, + $shadow: null ) { $name: 'igx-bottom-nav'; $bottom-nav-schema: map-get($schema, $name); @@ -75,8 +75,6 @@ @mixin igx-bottom-nav($theme) { @include igx-root-css-vars($theme); - // @debug $theme; - $menu-height: 56px; $item-min-width: 80px; $item-max-width: 168px; @@ -193,11 +191,9 @@ @mixin igx-bottom-nav-typography($type-scale, $categories: (label: 'caption')) { $label: map-get($categories, 'label'); - @include igx-scope('.igx-typography') { - %igx-tab-label { - @include igx-type-style($type-scale, $label) { - margin: 0 - } + %igx-tab-label { + @include igx-type-style($type-scale, $label) { + margin: 0 } } } 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 0891bf6addc..25429cfc4bd 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 @@ -67,7 +67,7 @@ $item-selected-text-color: null, $item-selected-background: null, $item-selected-border-color: null, - $item-selected-hover-background: null, + $item-selected-hover-background: null ) { $name: 'igx-button-group'; $button-group-schema: map-get($schema, $name); @@ -149,19 +149,17 @@ $group-item-min-width: 24px; $group-item-border-thickness: 1px; $group-items-margin: rem(10px, 16px); + $transition: all 140ms $ease-in-out-quad; %igx-group-display { display: flex; box-shadow: --var($theme, 'shadow'); - transition: all 140ms $ease-in-out-quad; + transition: $transition; border-radius: --var($theme, 'border-radius') } %igx-group-item { - &%igx-button--flat { - border-radius: 0; - } - + @include ellipsis(); border: $group-item-border-thickness solid --var($theme, 'item-border-color'); color: --var($theme, 'item-text-color'); background: --var($theme, 'item-background'); @@ -175,13 +173,19 @@ user-select: none; position: relative; z-index: 0; - @include ellipsis(); + transition: $transition; - &:not(:nth-child(0)) { - margin-left: -1px; + &%igx-button--flat { + border-radius: 0; } + %igx-icon-display { + color: currentColor; + } + &:not(:nth-child(0)) { + margin-left: -1px; + } &:first-of-type { border-radius: --var($theme, 'border-radius') 0 0 --var($theme, 'border-radius'); @@ -199,6 +203,10 @@ &:hover, &:focus { + %igx-icon-display { + color: currentColor; + } + color: --var($theme, 'item-hover-text-color'); background: --var($theme, 'item-hover-background'); z-index: 1; 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 ebd12003c15..d13c2b46abb 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 @@ -22,6 +22,9 @@ /// @param {Color} $flat-hover-text-color [null] - The hover text color of a flat button. /// @param {Color} $flat-focus-background [null] - The focus background color of a flat button. /// @param {Color} $flat-focus-text-color [null] - The focus text color of a flat button. +/// @param {Color} $flat-icon-color [null] - The color of a flat button icon. +/// @param {Color} $flat-hover-icon-color [null] - The hover color of a flat button icon. +/// @param {Color} $flat-focus-icon-color [null] - The focus color of a flat button icon. /// /// @param {Color} $outlined-background [null] - The background color of an outlined button. /// @param {Color} $outlined-text-color [null] - The idle text color of an outlined button. @@ -31,6 +34,9 @@ /// @param {Color} $outlined-hover-text-color [null] - The hover text color of an outlined button. /// @param {Color} $outlined-focus-background [null] - The focus background color of an outlined button. /// @param {Color} $outlined-focus-text-color [null] - The focus text color of an outlined button. +/// @param {Color} $outlined-icon-color [null] - The color of a outlined button icon. +/// @param {Color} $outlined-hover-icon-color [null] - The hover color of a outlined button icon. +/// @param {Color} $outlined-focus-icon-color [null] - The focus color of a outlined button icon. /// /// @param {Color} $raised-background [null] - The background color of a raised button. /// @param {Color} $raised-text-color [null] - The idle text color of a raised button. @@ -38,6 +44,9 @@ /// @param {Color} $raised-hover-text-color [null] - The hover text color of a raised button. /// @param {Color} $raised-focus-background [null] - The focus background color of a raised button. /// @param {Color} $raised-focus-text-color [null] - The focus text color of a raised button. +/// @param {Color} $raised-icon-color [null] - The color of a raised button icon. +/// @param {Color} $raised-hover-icon-color [null] - The hover color of a raised button icon. +/// @param {Color} $raised-focus-icon-color [null] - The focus color of a raised button icon. /// /// @param {box-shadow} $raised-resting-shadow [null] - The shadow color of the raised button in its resting state. /// @param {box-shadow} $raised-hover-shadow [null] - The shadow color of the raised button in its hover state. @@ -97,6 +106,9 @@ $flat-hover-text-color: null, $flat-focus-background: null, $flat-focus-text-color: null, + $flat-icon-color: null, + $flat-hover-icon-color: null, + $flat-focus-icon-color: null, $outlined-text-color: null, $outlined-outline-color: null, @@ -106,6 +118,9 @@ $outlined-hover-text-color: null, $outlined-focus-background: null, $outlined-focus-text-color: null, + $outlined-icon-color: null, + $outlined-hover-icon-color: null, + $outlined-focus-icon-color: null, $raised-text-color: null, $raised-background: null, @@ -113,6 +128,9 @@ $raised-hover-text-color: null, $raised-focus-background: null, $raised-focus-text-color: null, + $raised-icon-color: null, + $raised-hover-icon-color: null, + $raised-focus-icon-color: null, $raised-resting-shadow: null, $raised-hover-shadow: null, @@ -309,6 +327,9 @@ flat-hover-text-color: $flat-hover-text-color, flat-focus-background: $flat-focus-background, flat-focus-text-color: $flat-focus-text-color, + flat-icon-color: $flat-icon-color, + flat-hover-icon-color: $flat-hover-icon-color, + flat-focus-icon-color: $flat-focus-icon-color, outlined-text-color: $outlined-text-color, outlined-outline-color: $outlined-outline-color, @@ -318,6 +339,9 @@ outlined-hover-text-color: $outlined-hover-text-color, outlined-focus-background: $outlined-focus-background, outlined-focus-text-color: $outlined-focus-text-color, + outlined-icon-color: $outlined-icon-color, + outlined-hover-icon-color: $outlined-hover-icon-color, + outlined-focus-icon-color: $outlined-focus-icon-color, raised-text-color: $raised-text-color, raised-background: $raised-background, @@ -325,6 +349,9 @@ raised-hover-text-color: $raised-hover-text-color, raised-focus-background: $raised-focus-background, raised-focus-text-color: $raised-focus-text-color, + raised-icon-color: $raised-icon-color, + raised-hover-icon-color: $raised-hover-icon-color, + raised-focus-icon-color: $raised-focus-icon-color, fab-text-color: $fab-text-color, fab-background: $fab-background, @@ -377,16 +404,41 @@ $button-icon-font-size: rem(24px, 24px); $button-icon-padding: 0; - $button-padding: ( + $button-padding-material: ( comfortable: rem(9px, 16px) rem(16px, 16px), cosy: rem(6px, 16px) rem(16px, 16px), compact: rem(3px, 16px) rem(16px, 16px) ); - $button-size: ( + + $button-padding-fluent: ( + comfortable: 0 rem(16px, 16px), + cosy: 0 rem(16px, 16px), + compact: 0 rem(16px, 16px) + ); + + $button-padding: map-get(( + material: $button-padding-material, + fluent: $button-padding-fluent + ), map-get($theme, variant)); + + $button--size-material: ( comfortable: rem(36px), cosy: rem(30px), compact: rem(24px) ); + + $button--size-fluent: ( + comfortable: rem(32px), + cosy: rem(28px), + compact: rem(24px) + ); + + $button-size: map-get(( + material: $button--size-material, + fluent: $button--size-fluent + ), map-get($theme, variant)); + + $button-floating-padding: ( comfortable: rem(15px), cosy: rem(11px), @@ -442,15 +494,27 @@ color: --var($theme, 'flat-text-color'); border-radius: --var($theme, 'flat-border-radius'); + %igx-icon-display { + color: --var($theme, 'flat-icon-color') + } + &:hover { background: --var($theme, 'flat-hover-background'); color: --var($theme, 'flat-hover-text-color'); + + %igx-icon-display { + color: --var($theme, 'flat-hover-icon-color') + } } &:focus, &:active { background: --var($theme, 'flat-focus-background'); color: --var($theme, 'flat-focus-text-color'); + + %igx-icon-display { + color: --var($theme, 'flat-focus-icon-color') + } } } @@ -461,15 +525,27 @@ color: --var($theme, 'outlined-text-color'); border-radius: --var($theme, 'outlined-border-radius'); + %igx-icon-display { + color: --var($theme, 'outlined-icon-color') + } + &:hover { background: --var($theme, 'outlined-hover-background'); color: --var($theme, 'outlined-hover-text-color'); + + %igx-icon-display { + color: --var($theme, 'outlined-hover-icon-color') + } } &:focus, &:active { background: --var($theme, 'outlined-focus-background'); color: --var($theme, 'outlined-focus-text-color'); + + %igx-icon-display { + color: --var($theme, 'outlined-focus-icon-color') + } } } @@ -479,17 +555,30 @@ box-shadow: --var($theme, 'raised-resting-shadow'); border-radius: --var($theme, 'raised-border-radius'); + %igx-icon-display { + color: --var($theme, 'raised-icon-color') + } + &:focus, &:hover { color: --var($theme, 'raised-hover-text-color'); background: --var($theme, 'raised-hover-background'); box-shadow: --var($theme, 'raised-hover-shadow'); + + + %igx-icon-display { + color: --var($theme, 'raised-hover-icon-color') + } } - + &:active { color: --var($theme, 'raised-focus-text-color'); background: --var($theme, 'raised-focus-background'); box-shadow: --var($theme, 'raised-focus-shadow'); + + %igx-icon-display { + color: --var($theme, 'raised-focus-icon-color') + } } } @@ -611,11 +700,9 @@ @mixin igx-button-typography($type-scale, $categories: (text: 'button')) { $text: map-get($categories, 'text'); - @include igx-scope('.igx-typography') { - %igx-button-display { - @include igx-type-style($type-scale, $text) { - text-align: center; - } + %igx-button-display { + @include igx-type-style($type-scale, $text) { + text-align: center; } } } 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 bf7264cd589..39e35d6abbb 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 @@ -41,6 +41,7 @@ /// @param {Color} $date-selected-text-color [null] - The text color for the selected date. /// /// @param {Color} $date-current-text-color [null] - The text color for the current date. +/// @param {Color} $date-current-bg-color [null] - The background color for the current date. /// @param {Color} $date-hover-background [null] - The hover date background color. /// /// @param {Color} $date-special-background [null] - The background color used for special dates. @@ -101,6 +102,7 @@ $date-selected-text-color: null, $date-current-text-color: null, + $date-current-bg-color: null, $date-hover-background: null, $date-special-background: null, @@ -179,8 +181,12 @@ } } - @if not($date-current-text-color) and $header-background { - $date-current-text-color: $header-background; + @if not($date-current-bg-color) and $header-background { + $date-current-bg-color: $header-background; + } + + @if not($date-current-text-color) and $date-current-bg-color { + $date-current-text-color: $date-current-bg-color; } @if not($date-special-background) and $content-background { @@ -250,6 +256,7 @@ date-selected-text-color: $date-selected-text-color, date-current-text-color: $date-current-text-color, + date-current-bg-color: $date-current-bg-color, date-hover-background: $date-hover-background, date-special-text-color: $date-special-text-color, @@ -515,7 +522,16 @@ %cal-value--current { color: --var($theme, 'date-current-text-color'); - font-weight: $cal-value-fw; + background: --var($theme, 'date-current-bg-color')!important; + font-weight: $cal-value-fw !important; + + &:hover { + background: --var($theme, 'date-current-bg-color')!important; + } + + &:focus { + background: --var($theme, 'date-current-bg-color')!important; + } } %cal-value--special { 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 871214d49db..381e1249110 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 @@ -11,6 +11,7 @@ /// @param {Map} $elevations [$elevations] - The elevations (shadows) map to be used. /// @param {Color} $background [null] - The card background color. /// @param {Color} $outline-color [null] - The color of the outline for outlined type cards. +/// @param {Color} $card-border-color [null] - The color of the card border. /// @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. @@ -49,7 +50,8 @@ $content-text-color: null, $actions-text-color: null, $resting-shadow: null, - $hover-shadow: null + $hover-shadow: null, + $card-border-color: null ) { $name: 'igx-card'; $card-schema: map-get($schema, $name); @@ -102,7 +104,8 @@ content-text-color: $content-text-color, actions-text-color: $actions-text-color, resting-shadow: $resting-shadow, - hover-shadow: $hover-shadow + hover-shadow: $hover-shadow, + card-border-color: $card-border-color )); } @@ -139,6 +142,7 @@ background: --var($theme, 'background'); transition: $card-transitions; backface-visibility: hidden; + border: 1px solid --var($theme, 'card-border-color'); &:hover { box-shadow: --var($theme, 'hover-shadow'); @@ -147,7 +151,7 @@ %igx-card--outlined { box-shadow: none; - border: 1px solid --var($theme, 'outline-color'); + border-color: --var($theme, 'outline-color'); &:hover { box-shadow: none; @@ -384,30 +388,28 @@ $subtitle: map-get($categories, 'subtitle'); $content: map-get($categories, 'content'); - @include igx-scope('.igx-typography') { - %igx-card-header-title { - @include igx-type-style($type-scale, $title) { - margin: 0; - } + %igx-card-header-title { + @include igx-type-style($type-scale, $title) { + margin: 0; } + } - %igx-card-header-title--small { - @include igx-type-style($type-scale, $title-small) { - margin: 0; - } + %igx-card-header-title--small { + @include igx-type-style($type-scale, $title-small) { + margin: 0; } + } - %igx-card-header-subtitle { - @include igx-type-style($type-scale, $subtitle) { - margin: 0; - } + %igx-card-header-subtitle { + @include igx-type-style($type-scale, $subtitle) { + margin: 0; } + } - %igx-card-content, - %igx-card-content > p { - @include igx-type-style($type-scale, $content) { - margin: 0; - } + %igx-card-content, + %igx-card-content > p { + @include igx-type-style($type-scale, $content) { + margin: 0; } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-component.scss index c9022b6bc42..9380f3e6992 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-component.scss @@ -63,6 +63,8 @@ } @include m(indeterminate) { + @extend %igx-checkbox--indeterminate !optional; + @include e(composite) { @extend %cbx-composite--x !optional; } 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 0be4bd8ba53..aa68d7adb66 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 @@ -39,18 +39,19 @@ $fill-color: null, $tick-color: null, $disabled-color: null, - $border-radius-ripple:null + $disabled-color-label: null, + $border-radius-ripple: null ) { $name: 'igx-checkbox'; $checkbox-schema: map-get($schema, $name); $theme: apply-palette($checkbox-schema, $palette); $border-radius: round-borders( - if($border-radius, $border-radius, map-get($checkbox-schema, 'border-radius')),0 ,10px + if($border-radius, $border-radius, map-get($checkbox-schema, 'border-radius')), 0, 10px ); $border-radius-ripple: round-borders( - if($border-radius-ripple, $border-radius-ripple, map-get($checkbox-schema, 'border-radius-ripple')),0 ,24px + if($border-radius-ripple, $border-radius-ripple, map-get($checkbox-schema, 'border-radius-ripple')), 0, 24px ); @@ -62,6 +63,7 @@ fill-color: $fill-color, tick-color: $tick-color, disabled-color: $disabled-color, + disabled-color-label: $disabled-color-label, border-radius: $border-radius, border-radius-ripple: $border-radius-ripple )); @@ -85,11 +87,30 @@ $size: em(20px); $checkbox-radius: $size / 2; - $border-width: 2px; + + $border-width: map-get(( + material: 2px, + fluent: 1px + ), map-get($theme, variant)); + + $ripple-display: map-get(( + material: block, + fluent: none + ), map-get($theme, variant)); + $label-margin: em(8px); $radius: 2px; - $mark-stroke: 3; + $mark-stroke: map-get(( + material: 3, + fluent: 1 + ), map-get($theme, variant)); + + $mark-offset: map-get(( + material: 0, + fluent: -1px + ), map-get($theme, variant)); + $mark-length: 24; $mark-x-factor: $mark-stroke / $mark-length; @@ -133,7 +154,7 @@ width: $size; height: $size; min-width: $size; - border-width: $border-width; + border-width: rem($border-width); border-style: solid; border-color: --var($theme, 'empty-color'); border-radius: --var($theme, 'border-radius'); @@ -191,6 +212,13 @@ transition: opacity .1s $ease-out-quad; } + %igx-checkbox--indeterminate { + %cbx-composite-mark { + top: $mark-offset; + left: $mark-offset; + } + } + %cbx-composite-mark--x { stroke-dashoffset: 0; opacity: 1; @@ -243,12 +271,13 @@ } %cbx-label--disabled { - color: --var($theme, 'disabled-color'); + color: --var($theme, 'disabled-color-label'); } %cbx-ripple { @include igx-ripple($ripple-theme); @include igx-css-vars($ripple-theme); + display: $ripple-display; position: absolute; top: calc(50% - #{$ripple-radius}); right: calc(100% - #{$ripple-radius} - #{$checkbox-radius}); @@ -323,12 +352,10 @@ ) { $label: map-get($categories, 'label'); - @include igx-scope('.igx-typography') { - %cbx-label { - @include igx-type-style($type-scale, $label) { - margin-top: 0; - margin-bottom: 0; - } + %cbx-label { + @include igx-type-style($type-scale, $label) { + margin-top: 0; + margin-bottom: 0; } } } 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 6510b88ce0c..d0f8aa6abbd 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 @@ -217,18 +217,37 @@ $transition: all 120ms $ease-in-out-quad; $chip-max-width: 24ch; - $chip-height: ( + $chip-height-material: ( comfortable: rem(32px), cosy: rem(24px), compact: rem(18px) ); + $chip-height-fluent: ( + comfortable: rem(26px), + cosy: rem(24px), + compact: rem(18px) + ); + + $chip-height: map-get(( + material: $chip-height-material, + fluent: $chip-height-fluent + ), map-get($theme, variant)); + $chip-padding: ( comfortable: 0 rem(8px), cosy: 0 rem(4px), compact: 0 rem(2px) ); + $item-padding: 4px; + $chip-item-padding: 0 rem($item-padding); + + $chip-avatar-inset: map-get(( + material: 0, + fluent: -$item-padding + ), map-get($theme, variant)); + $chip-icon-size: ( comfortable: rem(18px), cosy: rem(18px), @@ -342,6 +361,12 @@ + [igxPrefix] { margin-left: rem(4px); + &%igx-avatar-display { + max-height: 100%; + max-width: 100%; + margin-left: $chip-avatar-inset!important; + } + [dir='rtl'] & { margin-left: 0; margin-right: rem(4px); @@ -434,7 +459,7 @@ justify-content: center; flex: 1 1 auto; height: map-get($chip-height, 'comfortable'); - padding: 0 rem(4px); + padding: $chip-item-padding; color: --var($theme, 'text-color'); background: --var($theme, 'background'); border-width: 1px; @@ -531,23 +556,24 @@ /// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale. /// @param {Map} $categories [(text: 'body-2')] - The categories from the typographic scale used for type styles. /// @requires {mixin} igx-type-style -@mixin igx-chip-typography($type-scale, $categories: (text: 'body-2')) { +@mixin igx-chip-typography( + $type-scale, + $categories: (text: 'body-2')) +{ $text: map-get($categories, 'text'); - @include igx-scope('.igx-typography') { - %igx-chip { - @include igx-type-style($type-scale, $text) { - font-weight: 600; - } + %igx-chip { + @include igx-type-style($type-scale, $text) { + font-weight: 600; } + } - %igx-chip--compact, - %igx-chip__ghost--compact { - %igx-chip__content { - @include igx-type-style($type-scale, $text) { - font-size: rem(12px); - font-weight: 600; - } + %igx-chip--compact, + %igx-chip__ghost--compact { + %igx-chip__content { + @include igx-type-style($type-scale, $text) { + font-size: 12px; + font-weight: 600; } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/column-hiding/_column-hiding-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/column-hiding/_column-hiding-theme.scss index ad2f7ce587f..688651d1716 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/column-hiding/_column-hiding-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/column-hiding/_column-hiding-theme.scss @@ -99,11 +99,9 @@ @mixin igx-column-hiding-typography($type-scale, $categories: (title: 'subtitle-1')) { $title: map-get($categories, 'title'); - @include igx-scope('.igx-typography') { - %column-hiding-title { - @include igx-type-style($type-scale, $title) { - margin: 0; - } + %column-hiding-title { + @include igx-type-style($type-scale, $title) { + margin: 0; } } } 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 968e2546964..c9af05546b2 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 @@ -80,12 +80,26 @@ /// @requires --var @mixin igx-dialog($theme) { @include igx-root-css-vars($theme); - - $dialog-min-width: rem(280px); - $dialog-title-padding: rem(24px) rem(24px) rem(12px) rem(24px); - $dialog-message-padding: rem(12px) rem(24px); - $dialog-actions-padding: rem(8px); - + $dialog-min-width: map-get(( + material: rem(280px), + fluent: rem(288px) + ), map-get($theme, variant)); + + $dialog-title-padding: map-get(( + material: rem(24px) rem(24px) rem(12px) rem(24px), + fluent: rem(16px) rem(46px) rem(24px) rem(24px) + ), map-get($theme, variant)); + + $dialog-message-padding: map-get(( + material: rem(12px) rem(24px), + fluent: 0 rem(24px) rem(20px) rem(24px) + ), map-get($theme, variant)); + + $dialog-actions-padding: map-get(( + material: rem(8px), + fluent: 0 rem(24px) rem(24px) rem(24px) + ), map-get($theme, variant)); + %igx-dialog-display { outline-style: none; } @@ -147,17 +161,15 @@ $title: map-get($categories, 'title'); $content: map-get($categories, 'content'); - @include igx-scope('.igx-typography') { - %igx-dialog-title { - @include igx-type-style($type-scale, $title) { - margin: 0; - } + %igx-dialog-title { + @include igx-type-style($type-scale, $title) { + margin: 0; } + } - %igx-dialog-content { - @include igx-type-style($type-scale, $content) { - margin: 0; - } + %igx-dialog-content { + @include igx-type-style($type-scale, $content) { + margin: 0; } } } 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 e4d835049cf..e1f7e3bdbe6 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 @@ -366,25 +366,23 @@ $item: map-get($categories, 'item'); $select-item: map-get($categories, 'select-item'); - @include igx-scope('.igx-typography') { - %igx-drop-down__header, - %igx-drop-down__group > label { - @include igx-type-style($type-scale, $header) { - margin: 0; - } + %igx-drop-down__header, + %igx-drop-down__group > label { + @include igx-type-style($type-scale, $header) { + margin: 0; } + } - %igx-drop-down__item { - @include igx-type-style($type-scale, $item) { - margin: 0; - } + %igx-drop-down__item { + @include igx-type-style($type-scale, $item) { + margin: 0; } + } - %igx-drop-down__list--select { - %igx-drop-down__item { - @include igx-type-style($type-scale, $select-item); - @include ellipsis() - } + %igx-drop-down__list--select { + %igx-drop-down__item { + @include igx-type-style($type-scale, $select-item); + @include ellipsis() } } } 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 f9c14fc974c..ddc23c89326 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 @@ -208,23 +208,21 @@ $description: map-get($categories, 'description'); $body: map-get($categories, '$body'); - @include igx-scope('.igx-typography') { - %igx-expansion-panel__header-title { - @include igx-type-style($type-scale, $title) { - margin: 0; - } + %igx-expansion-panel__header-title { + @include igx-type-style($type-scale, $title) { + margin: 0; } + } - %igx-expansion-panel__header-description { - @include igx-type-style($type-scale, $description) { - margin: 0; - } + %igx-expansion-panel__header-description { + @include igx-type-style($type-scale, $description) { + margin: 0; } + } - %igx-expansion-panel__body { - @include igx-type-style($type-scale, $body) { - margin: 0; - } + %igx-expansion-panel__body { + @include igx-type-style($type-scale, $body) { + margin: 0; } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-paginator/_grid-paginator-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-paginator/_grid-paginator-theme.scss index de2918f7cf9..8e2eb8606a7 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid-paginator/_grid-paginator-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-paginator/_grid-paginator-theme.scss @@ -120,4 +120,3 @@ min-width: 80px; } } - 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 8ea653bb143..b0b183fa650 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 @@ -372,73 +372,62 @@ %grid-excel-menu { %grid-excel-menu__header > h4 { - font-size: rem(18px); - margin: 0; - line-height: 1; - font-weight: 700; + @include igx-type-style($type-scale, 'h6') } } - @include igx-scope('.igx-typography') { - %grid-excel-menu { - %grid-excel-menu__header > h4 { - @include igx-type-style($type-scale, 'h6') - } + %grid-excel-menu__secondary { + %grid-excel-menu__header > h4 { + @include igx-type-style($type-scale, 'h6'); } + } - %grid-excel-menu__secondary { - %grid-excel-menu__header > h4 { - @include igx-type-style($type-scale, 'h6'); - } + %grid-excel-sort, + %grid-excel-move { + header { + @include igx-type-style($type-scale, 'overline'); + } + } + + %grid-excel-menu--cosy { + %grid-excel-menu__header > h4 { + @include igx-type-style($type-scale, 'h6') + } + } + + %grid-excel-menu--compact { + %grid-excel-menu__header > h4 { + @include igx-type-style($type-scale, 'subtitle-1') } %grid-excel-sort, %grid-excel-move { header { - @include igx-type-style($type-scale, 'overline'); + @include igx-type-style($type-scale, 'body-2'); + text-transform: capitalize; } } - %grid-excel-menu--cosy { - %grid-excel-menu__header > h4 { - @include igx-type-style($type-scale, 'h6') + %grid-excel-actions__action { + span { + @include igx-type-style($type-scale, 'body-2'); } } - %grid-excel-menu--compact { - %grid-excel-menu__header > h4 { - @include igx-type-style($type-scale, 'subtitle-1') - } - - %grid-excel-sort, - %grid-excel-move { - header { - @include igx-type-style($type-scale, 'body-2'); - text-transform: capitalize; - } - } - - %grid-excel-actions__action { - span { - @include igx-type-style($type-scale, 'body-2'); - } - } - - %cbx-label { - @include igx-type-style($type-scale, 'body-2'); - } + %cbx-label { + @include igx-type-style($type-scale, 'body-2'); } + } - %grid-excel-menu__secondary--cosy { - %grid-excel-menu__header > h4 { - @include igx-type-style($type-scale, 'h6'); - } + %grid-excel-menu__secondary--cosy { + %grid-excel-menu__header > h4 { + @include igx-type-style($type-scale, 'h6'); } + } - %grid-excel-menu__secondary--compact { - %grid-excel-menu__header > h4 { - @include igx-type-style($type-scale, 'subtitle-1'); - } + %grid-excel-menu__secondary--compact { + %grid-excel-menu__header > h4 { + @include igx-type-style($type-scale, 'subtitle-1'); } } } 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 df73013e0fd..b2d8cdd49fc 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 @@ -32,6 +32,7 @@ /// @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-hover-background [null] - The hover row background color. /// @param {Color} $row-hover-text-color [null] - The hover row text color. @@ -130,6 +131,7 @@ $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-hover-background: null, $row-hover-text-color: null, @@ -193,6 +195,7 @@ $row-ghost-background: null, $row-drag-color: null, $drop-area-border-radius: null, + $grid-border-color: null, $sortable-header-icon-hover-color: null ) { $name: 'igx-grid'; @@ -270,6 +273,10 @@ $row-selected-text-color: $row-selected-background; } + @if not($row-selected-text-color) and $row-selected-hover-background { + $row-selected-text-color: $row-selected-hover-background; + } + @if not($row-border-color) and $content-background { @if type-of($content-background) == 'color' { $row-border-color: rgba(text-contrast($content-background), .08) @@ -410,6 +417,7 @@ 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-hover-background: $row-hover-background, row-hover-text-color: $row-hover-text-color, @@ -477,7 +485,8 @@ 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 + sortable-header-icon-hover-color: $sortable-header-icon-hover-color, + grid-border-color: $grid-border-color, )); } @@ -493,7 +502,6 @@ @include igx-root-css-vars($theme); $palette: map-get($theme, 'palette'); - // @debug $theme; $grid-shadow: --var($theme, 'grid-shadow'); @@ -577,6 +585,16 @@ $drag-icon-size: rem(24px); $grouping-padding-right: rem(12px); + $grid-border-width: map-get(( + material: 0, + fluent: 1px + ), map-get($theme, variant)); + + $grid-header-weight: map-get(( + material: 600, + fluent: 800 + ), map-get($theme, variant)); + %grid-display { position: relative; display: grid; @@ -586,6 +604,7 @@ box-shadow: $grid-shadow; outline-style: none; z-index: 0; + border: $grid-border-width solid --var($theme, 'grid-border-color'); %cbx-display { min-width: rem(20px); @@ -940,7 +959,7 @@ } &:hover { - background: --var($theme, 'row-selected-background'); + background: --var($theme, 'row-selected-hover-background'); color: --var($theme, 'row-selected-text-color'); } @@ -1233,6 +1252,7 @@ %grid-cell-header-title { @include ellipsis(); + font-weight: $grid-header-weight; min-width: 3ch; user-select: none; cursor: initial; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss index 934d7707734..2b83b0d66df 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss @@ -381,6 +381,132 @@ } } + // FLUENT THEME // + @include m(fluent) { + @extend %igx-input-group-fluent !optional; + + @include e(bundle) { + @extend %form-group-bundle--fluent !optional; + + &:hover { + @extend %form-group-bundle--fluent--hover !optional; + } + } + + @include e(bundle-main) { + @extend %form-group-bundle-main--fluent !optional; + } + + @include e(input) { + @extend %fluent-input !optional; + } + + @include e(label) { + @extend %fluent-label !optional; + } + + @include e(textarea) { + @extend %fluent-textarea !optional; + } + } + + @include mx(placeholder, fluent) { + @include e(label) { + @extend %fluent-placeholder-label !optional; + } + } + + @include mx(cosy, fluent) { + @extend %igx-input-group-fluent--cosy !optional; + } + + @include mx(compact, fluent) { + @extend %igx-input-group-fluent--compact !optional; + } + + @include mx(disabled, fluent) { + @include e(bundle) { + @extend %form-group-bundle--fluent-disabled !optional; + + &:hover { + @extend %form-group-bundle--fluent--hover-disabled !optional; + } + } + + @include e(input) { + %fluent-input-disabled { + @extend %fluent-input-disabled !optional + } + + &:hover { + @extend %fluent-input-disabled !optional + } + + &:focus { + @extend %fluent-input-disabled !optional + } + } + + @include e(label) { + @extend %fluent-label-disabled !optional; + } + } + + @include mx(filled, fluent) { + @include e(label) { + @extend %fluent-label-filled !optional; + } + } + + @include mx(focused, fluent) { + @include e(bundle) { + @extend %form-group-bundle--focus !optional; + + &:hover { + @extend %form-group-bundle--fluent--focus !optional; + } + } + + @include e(label) { + @extend %fluent-label-focused !optional; + } + } + + @include mx(required, fluent) { + @include e(bundle) { + @extend %form-group-bundle-required--fluent !optional; + } + } + + @include mx(valid, fluent) { + @include e(bundle) { + @extend %form-group-bundle-success--fluent !optional; + + &:hover { + @extend %form-group-bundle-success--fluent--hover !optional; + } + } + + @include e(label) { + @extend %fluent-label-success !optional; + } + } + + @include mx(invalid, fluent) { + @include e(bundle) { + @extend %form-group-bundle-error--fluent !optional; + + &:hover { + @extend %form-group-bundle-error--fluent--hover !optional; + } + } + + @include e(label) { + @extend %fluent-label-error !optional; + } + } + // FLUENT THEME END // + @include m(search) { @extend %form-group-display--no-margin !optional; @@ -460,4 +586,50 @@ @extend %form-group-bundle-search--disabled !optional; } } + + @include m(fluent-search) { + @extend %igx-input-group-fluent-search !optional; + + @include e(bundle) { + @extend %form-group-bundle--fluent !optional; + + &:hover { + @extend %form-group-bundle--fluent--hover !optional; + } + } + + @include e(bundle-main) { + @extend %form-group-bundle-main--fluent !optional; + } + + @include e(input) { + @extend %fluent-input !optional; + } + + @include e(label) { + @extend %fluent-label !optional; + } + + @include e(hint) { + @extend %form-group-helper--box !optional; + } + } + + @include mx(fluent-search, cosy) { + @extend %igx-input-group-fluent-search--cosy !optional; + } + + @include mx(fluent-search, compact) { + @extend %igx-input-group-fluent-search--compact !optional; + } + + @include mx(focused, fluent-search) { + @extend %igx-input-group-fluent-search--focused !optional; + } + + @include mx(disabled, fluent-search) { + @include e(bundle) { + @extend %form-group-bundle-search--disabled !optional; + } + } } 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 256af83d227..327a8a6a190 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 @@ -13,6 +13,9 @@ /// @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} $input-prefix-color [null] - The input prefix color in the idle state. +/// @param {Color} $input-suffix-color [null] - The input suffix color in the idle state. +/// /// @param {Color} $idle-secondary-color [null] - The label color in the idle state. /// @param {Color} $filled-secondary-color [null] - The label color in the filled state. /// @param {Color} $focused-secondary-color [null] - The label color in the focused state. @@ -22,7 +25,11 @@ /// @param {Color} $focused-bottom-line-color [null] - The bottom line and border colors in the focused state. /// @param {Color} $interim-bottom-line-color [null] - The bottom line and border colors during the to-focused transition. /// @param {Color} $disabled-bottom-line-color [null] - The bottom line and border colors in the disabled state. -/// @param {Color} $disabled-border-color [null] - The disabled border color for input groups of type border. +/// +/// @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-disabled-background [null] - The background color of an input group of type box in the disabled state. @@ -81,6 +88,10 @@ $focused-bottom-line-color: null, $interim-bottom-line-color: null, $disabled-bottom-line-color: null, + + $border-color: null, + $hover-border-color: null, + $focused-border-color: null, $disabled-border-color: null, $box-background: null, @@ -100,7 +111,12 @@ $error-secondary-color: null, $placeholder-color: null, - $disabled-placeholder-color: null + $disabled-placeholder-color: null, + + $input-prefix-color: null, + $input-prefix-background: null, + $input-suffix-color: null, + $input-suffix-background: null ) { $name: 'igx-input-group'; $input-group-schema: map-get($schema, $name); @@ -162,6 +178,10 @@ focused-bottom-line-color: $focused-bottom-line-color, interim-bottom-line-color: $interim-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, @@ -182,6 +202,11 @@ error-secondary-color: $error-secondary-color, placeholder-color: $placeholder-color, disabled-placeholder-color: $disabled-placeholder-color, + + input-prefix-color: $input-prefix-color, + input-prefix-background: $input-prefix-background, + input-suffix-color: $input-suffix-color, + input-suffix-background: $input-suffix-background )); } @@ -213,6 +238,31 @@ 'compact': 22px ); + $search-border-width: map-get(( + material: 0, + fluent: 1px, + ), map-get($theme, variant)); + + $prefix-margin: map-get(( + material: 0, + fluent: 8px, + ), map-get($theme, variant)); + + $prefix-height-cosy: map-get(( + material: rem(32px, map-get($base-scale-size, 'cosy')), + fluent: auto, + ), map-get($theme, variant)); + + $prefix-height-compact: map-get(( + material: rem(32px, map-get($base-scale-size, 'compact')), + fluent: auto, + ), map-get($theme, variant)); + + $prefix-height-comfortable: map-get(( + material: rem(32px, map-get($base-scale-size, 'comfortable')), + fluent: auto, + ), map-get($theme, variant)); + $hint-padding-top: rem(6px, map-get($base-scale-size, 'comfortable')); $hint--box-margin: rem(12px, map-get($base-scale-size, 'comfortable')); @@ -404,7 +454,7 @@ %form-group-bundle--border { padding: 0 rem(16px, map-get($base-scale-size, 'comfortable')); - box-shadow: inset 0 0 0 1px --var($theme, 'idle-bottom-line-color'); + box-shadow: inset 0 0 0 1px --var($theme, 'border-color'); border-radius: --var($theme, 'border-border-radius'); background: --var($theme, 'border-background'); @@ -422,11 +472,11 @@ } %form-group-bundle-border--hover { - box-shadow: inset 0 0 0 2px --var($theme, 'idle-text-color'); + box-shadow: inset 0 0 0 2px --var($theme, 'hover-border-color'); } %form-group-bundle-border--focus { - box-shadow: inset 0 0 0 2px --var($theme, 'focused-bottom-line-color'); + box-shadow: inset 0 0 0 2px --var($theme, 'focused-border-color'); } %form-group-bundle-border--error { @@ -442,12 +492,241 @@ box-shadow: inset 0 0 0 1px --var($theme, 'disabled-border-color'); } + + //// FLUENT ///// + %igx-input-group-fluent { + display: flex; + flex-direction: column; + + igx-prefix, + [igxPrefix] { + @extend %form-group-prefix-fluent; + outline-style: none; + } + + igx-suffix, + [igxSuffix] { + @extend %form-group-suffix-fluent; + outline-style: none; + } + + select { + width: calc(100% + #{rem(8px)}); + margin-left: rem(-8px) !important; + cursor: pointer !important; + } + } + + %igx-input-group-fluent-search { + display: flex; + flex-direction: column; + + igx-prefix, + [igxPrefix] { + @extend %form-group-prefix-fluent-search; + outline-style: none; + overflow: hidden; + } + + igx-suffix, + [igxSuffix] { + @extend %form-group-suffix-fluent-search; + outline-style: none; + } + } + + %igx-input-group-fluent-search--focused { + igx-prefix, + [igxPrefix] { + width: 0; + padding-right: 0 !important; + } + } + + %igx-input-group-fluent--cosy { + igx-prefix, + [igxPrefix] { + @extend %form-group-prefix-fluent--cosy; + outline-style: none; + } + + igx-suffix, + [igxSuffix] { + @extend %form-group-suffix-fluent--cosy; + outline-style: none; + } + } + + %igx-input-group-fluent-search--cosy { + display: flex; + flex-direction: column; + + igx-prefix, + [igxPrefix] { + @extend %form-group-prefix-fluent-search--cosy; + outline-style: none; + } + + igx-suffix, + [igxSuffix] { + @extend %form-group-suffix-fluent-search--cosy; + outline-style: none; + } + } + + %igx-input-group-fluent--compact { + igx-prefix, + [igxPrefix] { + @extend %form-group-prefix-fluent--compact; + outline-style: none; + } + + igx-suffix, + [igxSuffix] { + @extend %form-group-suffix-fluent--compact; + outline-style: none; + } + } + + %igx-input-group-fluent-search--compact { + display: flex; + flex-direction: column; + + igx-prefix, + [igxPrefix] { + @extend %form-group-prefix-fluent-search--compact; + outline-style: none; + } + + igx-suffix, + [igxSuffix] { + @extend %form-group-suffix-fluent-search--compact; + outline-style: none; + } + } + + %form-group-bundle-required--fluent { + &::after { + content: '*'; + position: absolute; + top: rem(-8px); + left: calc(100% + #{rem(4px)}); + color: --var($theme, 'error-secondary-color'); + } + } + + %fluent-label + %form-group-bundle-required--fluent { + &::after { + display: none; + } + } + + // Bundle + %form-group-bundle--fluent { + padding: 0; + min-height: 32px; + border: 1px solid --var($theme, 'border-color'); + box-shadow: none; + border-radius: --var($theme, 'border-border-radius'); + background: --var($theme, 'border-background'); + position: relative; + } + + %form-group-bundle--fluent--hover { + border-color: --var($theme, 'hover-border-color'); + box-shadow: none; + } + + %form-group-bundle--fluent--focus { + border-color: --var($theme, 'focused-border-color'); + box-shadow: none; + } + + %form-group-bundle--fluent--hover-disabled, + %form-group-bundle--fluent-disabled { + border-color: --var($theme, 'disabled-border-color'); + background: --var($theme, 'border-disabled-background'); + } + + %form-group-bundle-error--fluent--hover, + %form-group-bundle-error--fluent { + border-color: --var($theme, 'error-secondary-color'); + } + + %form-group-bundle-success--fluent--hover, + %form-group-bundle-success--fluent { + border-color: --var($theme, 'success-secondary-color'); + } + + %fluent-input { + padding: 0; + margin: 0; + border: none; + } + + %fluent-input-disabled { + color: --var($theme, 'disabled-text-color'); + } + + %form-group-bundle-main--fluent { + padding-left: rem(8px); + } + + igx-prefix + %form-group-bundle-main--fluent, + [igx-prefix] + %form-group-bundle-main--fluent { + padding-left: 0; + } + + %fluent-placeholder-label { + transform: translateY(0) scale(1); + } + + %fluent-label { + padding: rem(5px) 0; + line-height: normal !important; + position: static; + transform: translateY(0); + transform-origin: top left; + margin-top: 0 !important; + height: auto; + color: igx-color(map-get($theme, 'palette'), 'grays', 800); + + [dir='rtl'] & { + transform-origin: top right; + } + } + + %fluent-label-success { + color: --var($theme, 'idle-text-color'); + } + + %fluent-label-error { + color: --var($theme, 'idle-text-color'); + } + + %fluent-label-disabled { + color: igx-color(map-get($theme, 'palette'), 'grays', 500); + } + + %fluent-label-filled { + transform: translateY(0); + } + + %fluent-label-focused { + color: igx-color(map-get($theme, 'palette'), 'grays', 800); + transform: translateY(0) scale(1); + } + + %fluent-textarea { + padding: 0; + } + %form-group-bundle--search { padding: 0 rem(16px, map-get($base-scale-size, 'comfortable')); border-radius: --var($theme, 'search-border-radius'); - border-bottom: none; background: --var($theme, 'search-background'); box-shadow: --var($theme, 'search-resting-shadow'); + border: $search-border-width solid --var($theme, 'border-color'); %form-group-label--box + %form-group-input--box { transform: translateY(0); @@ -464,23 +743,28 @@ %form-group-bundle-search--hover { box-shadow: --var($theme, 'search-hover-shadow'); + border-color: --var($theme, 'hover-border-color'); } %form-group-bundle-search--focus { box-shadow: --var($theme, 'search-hover-shadow'); + border-color: --var($theme, 'hover-border-color'); } %form-group-bundle-search--error { box-shadow: --var($theme, 'search-hover-shadow'); + border-color: --var($theme, 'search-hover-shadow'); } %form-group-bundle-search--success { box-shadow: --var($theme, 'search-hover-shadow'); + border-color: --var($theme, 'search-hover-shadow'); } %form-group-bundle-search--disabled { background: --var($theme, 'search-disabled-background'); box-shadow: --var($theme, 'search-disabled-shadow'); + border-color: --var($theme, 'disabled-border-color'); } %form-group-bundle-main { @@ -687,7 +971,7 @@ position: relative; display: inline-flex; align-items: center; - height: rem(32px, map-get($base-scale-size, 'comfortable')); + height: $prefix-height-comfortable; transition: color $transition-timing; } @@ -711,7 +995,7 @@ %form-group-prefix--cosy, %form-group-suffix--cosy { - height: rem(32px, map-get($base-scale-size, 'cosy')); + height: $prefix-height-cosy; } %form-group-prefix--compact, @@ -756,6 +1040,120 @@ padding: rem(8px, map-get($base-scale-size, 'compact')) 0; } + %form-group-prefix-fluent { + color: --var($theme, 'input-prefix-color'); + background: --var($theme, 'input-prefix-background'); + + %igx-icon-display { + width: rem(18px); + height: rem(18px); + font-size: rem(18px); + } + + &:last-of-type { + margin-right: $prefix-margin; + } + + padding: rem(8px, map-get($base-scale-size, 'comfortable')); + + [dir='rtl'] & { + padding: rem(8px, map-get($base-scale-size, 'comfortable')) + } + } + + %form-group-prefix-fluent-search { + %igx-icon-display { + width: rem(18px); + height: rem(18px); + font-size: rem(18px); + } + + padding: rem(8px, map-get($base-scale-size, 'comfortable')); + + [dir='rtl'] & { + padding: rem(8px, map-get($base-scale-size, 'comfortable')) + } + + &:last-of-type { + margin-right: 0; + } + } + + %form-group-suffix-fluent { + color: --var($theme, 'input-suffix-color'); + background: --var($theme, 'input-suffix-background'); + + %igx-icon-display { + width: rem(18px); + height: rem(18px); + font-size: rem(18px); + } + + &:first-of-type { + margin-left: $prefix-margin; + } + + padding: rem(8px, map-get($base-scale-size, 'comfortable')); + } + + %form-group-suffix-fluent-search { + %igx-icon-display { + width: rem(18px); + height: rem(18px); + font-size: rem(18px); + } + padding: rem(8px, map-get($base-scale-size, 'comfortable')); + + &:first-of-type { + margin-left: 0; + } + } + + %form-group-prefix-fluent-search--cosy, + %form-group-suffix-fluent-search--cosy, + %form-group-prefix-fluent--cosy, + %form-group-suffix-fluent--cosy { + height: $prefix-height-cosy; + } + + %form-group-prefix-fluent-search--compact, + %form-group-suffix-fluent-search--compact, + %form-group-prefix-fluent--compact, + %form-group-suffix-fluent--compact { + font-size: rem(map-get($base-scale-size, 'compact') - 1px, map-get($base-scale-size, 'compact')); + height: $prefix-height-compact; + } + + %form-group-prefix-fluent-search--cosy, + %form-group-prefix-fluent--cosy { + padding: rem(8px, map-get($base-scale-size, 'cosy')); + + [dir='rtl'] & { + padding: rem(8px, map-get($base-scale-size, 'cosy')); + } + } + + %form-group-prefix-fluent-search--compact, + %form-group-prefix-fluent--compact { + padding: rem(8px, map-get($base-scale-size, 'compact')); + + [dir='rtl'] & { + padding: rem(8px, map-get($base-scale-size, 'compact')); + } + } + + %form-group-suffix-fluent-search--cosy, + %form-group-suffix-fluent--cosy { + padding: rem(8px, map-get($base-scale-size, 'cosy')); + } + + %form-group-suffix-fluent-search--compact, + %form-group-suffix-fluent--compact { + padding: rem(8px, map-get($base-scale-size, 'compact')); + } + + /// FLUENT END /// + %form-group-prefix--box, %form-group-suffix--box { height: 100%; @@ -886,24 +1284,22 @@ $input-text: map-get($categories, 'input-text'); $input-text-props: igx-type-scale-category($type-scale, $input-text); - @include igx-scope('.igx-typography') { - %form-group-input { - @include igx-type-style($type-scale, $input-text) { - margin: 0; - } + %form-group-input { + @include igx-type-style($type-scale, $input-text) { + margin: 0; } + } - %form-group-helper { - @include igx-type-style($type-scale, $helper-text) { - margin: 0; - } + %form-group-helper { + @include igx-type-style($type-scale, $helper-text) { + margin: 0; } + } - %form-group-prefix, - %form-group-suffix { - @include igx-type-style($type-scale, $input-text) { - margin: 0; - } + %form-group-prefix, + %form-group-suffix { + @include igx-type-style($type-scale, $input-text) { + margin: 0; } } } 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 6dd3c55a2ad..58fda431857 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 @@ -592,30 +592,28 @@ $title: map-get($categories, 'title'); $subtitle: map-get($categories, 'subtitle'); - @include igx-scope('.igx-typography') { - %igx-list-header { - @include igx-type-style($type-scale, $header) { - margin: 0; - } + %igx-list-header { + @include igx-type-style($type-scale, $header) { + margin: 0; } + } - %igx-list-item { - @include igx-type-style($type-scale, $item) { - margin: 0; - } + %igx-list-item { + @include igx-type-style($type-scale, $item) { + margin: 0; } + } - %igx-list__item-lines, - %igx-list__item-line-title { - @include igx-type-style($type-scale, $title) { - margin: 0; - } + %igx-list__item-lines, + %igx-list__item-line-title { + @include igx-type-style($type-scale, $title) { + margin: 0; } + } - %igx-list__item-line-subtitle { - @include igx-type-style($type-scale, $subtitle) { - margin: 0; - } + %igx-list__item-line-subtitle { + @include igx-type-style($type-scale, $subtitle) { + margin: 0; } } } 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 535ab66dbfc..2d4cf48dfd1 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 @@ -145,9 +145,7 @@ @mixin igx-navbar-typography($type-scale, $categories: (title: 'h6')) { $title: map-get($categories, 'title'); - @include igx-scope('.igx-typography') { - %igx-navbar-title { - @include igx-type-style($type-scale, $title); - } + %igx-navbar-title { + @include igx-type-style($type-scale, $title); } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-component.scss index 3dc6e7e95ca..62e04529c0a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-component.scss @@ -12,6 +12,10 @@ @extend %radio-display !optional; &:hover { + @include e(composite) { + @extend %igx-radio-hover__composite !optional; + } + @include e(ripple) { @extend %radio-ripple--hover !optional; @extend %radio-ripple--hover-unchecked !optional; @@ -19,6 +23,10 @@ } &:active { + @include e(composite) { + @extend %igx-radio-hover__composite !optional; + } + @include e(ripple) { @extend %radio-ripple--hover !optional; @extend %radio-ripple--hover-unchecked !optional; @@ -60,6 +68,10 @@ } &:hover { + @include e(composite) { + @extend %igx-radio--checked-active__composite !optional; + } + @include e(ripple) { @extend %radio-ripple--hover !optional; @extend %radio-ripple--hover-checked !optional; @@ -67,6 +79,10 @@ } &:active { + @include e(composite) { + @extend %igx-radio--checked-active__composite !optional; + } + @include e(ripple) { @extend %radio-ripple--hover !optional; @extend %radio-ripple--hover-checked !optional; 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 c074970c8f4..bdde99206d3 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 @@ -33,7 +33,9 @@ $label-color: null, $empty-color: null, $fill-color: null, - $disabled-color: null + $fill-hover-border-color:null, + $disabled-color: null, + $hover-color: null ) { $name: 'igx-radio'; @@ -45,7 +47,9 @@ label-color: $label-color, empty-color: $empty-color, fill-color: $fill-color, + fill-hover-border-color: $fill-hover-border-color, disabled-color: $disabled-color, + hover-color: $hover-color, )); } @@ -67,7 +71,22 @@ $size: em(20px); - $border-style: 2px solid; + $border-width: map-get(( + material: 2px, + fluent: 1px + ), map-get($theme, variant)); + + $radio-hover-scale: map-get(( + material: null, + fluent: scale3d(.5, .5, .5) + ), map-get($theme, variant)); + + $ripple-display: map-get(( + material: block, + fluent: none + ), map-get($theme, variant)); + + $border-style: rem($border-width) solid; $border-radius: 50% 50%; $transition: all .2s ease-in; @@ -142,6 +161,24 @@ } } + %igx-radio-hover__composite { + &::before { + background: --var($theme, 'hover-color'); + transform: $radio-hover-scale; + } + } + + %igx-radio--checked-active__composite { + &::before { + border-color: --var($theme, 'fill-hover-border-color'); + background: --var($theme, 'fill-hover-border-color'); + } + + &::after { + border-color: --var($theme, 'fill-hover-border-color'); + } + } + %radio-composite--disabled { &::after { border: $border-style --var($theme, 'disabled-color'); @@ -200,6 +237,7 @@ %radio-ripple { @include igx-ripple($ripple-theme); @include igx-css-vars($ripple-theme); + display: $ripple-display; position: absolute; top: calc(50% - #{$ripple-radius}); left: calc(50% - #{$ripple-radius}); @@ -265,12 +303,10 @@ ) { $label: map-get($categories, 'label'); - @include igx-scope('.igx-typography') { - %radio-label { - @include igx-type-style($type-scale, $label) { - margin-top: 0; - margin-bottom: 0; - } + %radio-label { + @include igx-type-style($type-scale, $label) { + margin-top: 0; + margin-bottom: 0; } } } 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 c4c7fb0550c..721459b5bc5 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 @@ -39,8 +39,12 @@ $disabled-thumb-color: null, $base-track-color: null, - $disabled-base-track-color: null - + $disabled-base-track-color: null, + $thumb-border-color: null, + $thumb-disabled-border-color: null, + $track-hover-color: null, + $thumb-hover-color: null, + $base-track-hover-color: null ) { $name: 'igx-slider'; $theme: apply-palette(map-get($schema, $name), $palette); @@ -53,12 +57,17 @@ name: $name, palette: $palette, track-color: $track-color, + track-hover-color: $track-hover-color, thumb-color: $thumb-color, + thumb-hover-color: $thumb-hover-color, label-background-color: $label-background-color, label-text-color: $label-text-color, disabled-thumb-color: $disabled-thumb-color, base-track-color: $base-track-color, - disabled-base-track-color: $disabled-base-track-color + disabled-base-track-color: $disabled-base-track-color, + thumb-border-color: $thumb-border-color, + thumb-disabled-border-color: $thumb-disabled-border-color, + base-track-hover-color: $base-track-hover-color )); } @@ -69,10 +78,17 @@ @mixin igx-slider($theme) { @include igx-root-css-vars($theme); - // @debug $theme; - $slider-height: 48px; - $slider-track-height: 2px; + + $slider-track-height: map-get(( + material: 2px, + fluent: 4px + ), map-get($theme, variant)); + + $thumb-border-width: map-get(( + material: 0, + fluent: 2px + ), map-get($theme, variant)); // Slider Thumb $slider-thumb-width: 40px; @@ -87,11 +103,48 @@ $slider-label-font-weight: 600; $slider-label-padding: 0 rem(2px); + $switch-display: map-get(( + material: block, + fluent: none + ), map-get($theme, variant)); + + $dot-size: map-get(( + material: 12px, + fluent: 16px + ), map-get($theme, variant)); + %igx-slider-display { display: flex; position: relative; height: rem($slider-height); align-items: center; + transition: all .2s $ease-out-quad; + + &:hover { + %igx-slider-track-fill { + background: --var($theme, 'track-hover-color'); + } + + %igx-slider-track { + background: --var($theme, 'base-track-hover-color'); + } + + %igx-slider-track--disabled { + background: --var($theme, 'disabled-base-track-color'); + } + + %igx-thumb-dot { + &::before { + border-color: --var($theme, 'track-hover-color'); + } + } + + %igx-thumb-dot--disabled { + &::before { + border-color: --var($theme, 'thumb-disabled-border-color'); + } + } + } } %igx-slider-thumbs-container { @@ -230,17 +283,19 @@ &::before { position: absolute; content: ''; - width: rem(12px); - height: rem(12px); - left: #{rem($slider-thumb-radius) - rem(6px)}; - top: #{rem($slider-thumb-radius) - rem(6px)}; + width: rem($dot-size); + height: rem($dot-size); + left: #{rem($slider-thumb-radius) - (rem($dot-size) / 2)}; + top: #{rem($slider-thumb-radius) - (rem($dot-size) / 2)}; background: --var($theme, 'thumb-color'); + border: rem($thumb-border-width) solid --var($theme, 'thumb-border-color'); transform: rotate(45deg); transition: transform .1s $ease-out-quad, border-radius .1s $ease-out-quad; border-radius: rem($slider-thumb-radius); } &::after { + display: $switch-display; position: absolute; content: ''; width: rem($slider-thumb-width); @@ -261,6 +316,7 @@ &::before { background: --var($theme, 'disabled-thumb-color'); + border-color: --var($theme, 'thumb-disabled-border-color'); border-radius: rem($slider-thumb-radius); } 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 09f02813333..c7bad9bc717 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 @@ -138,9 +138,7 @@ @mixin igx-snackbar-typography($type-scale, $categories: (text: 'body-2')) { $text: map-get($categories, 'text'); - @include igx-scope('.igx-typography') { - %igx-snackbar-message { - @include igx-type-style($type-scale, $text); - } + %igx-snackbar-message { + @include igx-type-style($type-scale, $text); } } 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 eaa96cc100b..44f29292e19 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 @@ -61,7 +61,12 @@ $border-radius-track: null, $border-radius-thumb: null, - $border-radius-ripple: 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 ) { $name: 'igx-switch'; $switch-schema: map-get($schema, $name); @@ -116,7 +121,12 @@ border-radius-track: $border-radius-track, border-radius-thumb: $border-radius-thumb, - border-radius-ripple: $border-radius-ripple + 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, )); } @@ -135,10 +145,51 @@ @include igx-root-css-vars($theme); @include scale-in-out($start-scale: .9); - $switch-width: 36px ; - $switch-height: 14px ; + $switch-width: map-get(( + material: 36px, + fluent: 40px, + ), map-get($theme, variant)); + + $switch-height: map-get(( + material: 14px, + fluent: 20px + ), map-get($theme, variant)); + + $switch-thumb-width: map-get(( + material: 20px, + fluent: 12px + ), map-get($theme, variant)); + + $switch-on-offset: map-get(( + material: 1px, + fluent: $switch-thumb-width / 2 + ), map-get($theme, variant)); + + $switch-off-offset: map-get(( + material: -1px, + fluent: $switch-thumb-width / 3 + ), map-get($theme, variant)); + + $ripple-display: map-get(( + material: block, + fluent: none + ), map-get($theme, variant)); + + $thumb-resting-shadow: map-get(( + material: --var($theme, 'resting-shadow'), + fluent: none + ), map-get($theme, variant)); + + $thumb-hover-shadow: map-get(( + material: --var($theme, 'hover-shadow'), + fluent: none + ), map-get($theme, variant)); + + $thumb-disabled-shadow: map-get(( + material: --var($theme, 'disabled-shadow'), + fluent: none + ), map-get($theme, variant)); - $switch-thumb-width: 20px ; $switch-thumb-height: $switch-thumb-width ; $ripple-size: em(48px); @@ -172,56 +223,71 @@ %switch-composite { display: flex; align-items: center; - width: $switch-width; - height: $switch-height; + width: rem($switch-width); + height: rem($switch-height); + border: 1px solid --var($theme, 'border-color'); border-radius: --var($theme, 'border-radius-track'); background: --var($theme, 'track-off-color'); cursor: pointer; user-select: none; transition: $input-transition; + + &:hover, + &:focus { + border-color: --var($theme, 'border-hover-color'); + } } %switch-composite--x { background: --var($theme, 'track-on-color'); + border-color: --var($theme, 'border-on-color'); + + &:hover, + &:focus { + border-color: --var($theme, 'border-on-hover-color'); + } } %switch-composite--disabled { background: --var($theme, 'track-disabled-color'); + border-color: --var($theme, 'border-disabled-color'); } %switch-composite-thumb { position: relative; display: block; - width: $switch-thumb-width; + width: rem($switch-thumb-width); height: $switch-thumb-height; - min-width: $switch-thumb-width; + min-width: rem($switch-thumb-width); border-radius: --var($theme, 'border-radius-thumb'); background: --var($theme, 'thumb-off-color'); - box-shadow: --var($theme, 'resting-shadow'); + box-shadow: $thumb-resting-shadow; transition: $input-transition; + transform: translateX(rem($switch-off-offset)); &:hover { - box-shadow: --var($theme, 'hover-shadow'); + box-shadow: $thumb-hover-shadow; } } %switch-composite-thumb--x { - transform: translateX(#{$switch-width - $switch-thumb-width}); + transform: translateX(#{rem($switch-width) - rem($switch-thumb-width) - rem($switch-on-offset)}); background: --var($theme, 'thumb-on-color'); [dir='rtl'] & { - transform: translateX(-#{$switch-width - $switch-thumb-width}); + transform: translateX(-#{rem($switch-width) - rem($switch-thumb-width) - rem($switch-on-offset)}); } } %switch-composite-thumb--disabled { background: --var($theme, 'thumb-disabled-color'); - box-shadow: --var($theme, 'disabled-shadow'); + box-shadow: $thumb-disabled-shadow; } %switch-ripple { @include igx-ripple($ripple-theme); @include igx-css-vars($ripple-theme); + display: $ripple-display; position: absolute; top: calc(50% - #{$ripple-radius}); left: calc(50% - #{$ripple-radius}); @@ -330,12 +396,10 @@ ) { $label: map-get($categories, 'label'); - @include igx-scope('.igx-typography') { - %switch-label { - @include igx-type-style($type-scale, $label) { - margin-top: 0; - margin-bottom: 0; - } + %switch-label { + @include igx-type-style($type-scale, $label) { + margin-top: 0; + margin-bottom: 0; } } } 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 d34549e4fd2..219cb3ca00f 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 @@ -421,12 +421,10 @@ @mixin igx-tabs-typography($type-scale, $categories: (label: 'button')) { $label: map-get($categories, 'label'); - @include igx-scope('.igx-typography') { - %igx-tabs__item-label { - @include igx-type-style($type-scale, $label) { - margin-top: 0; - margin-bottom: 0; - } + %igx-tabs__item-label { + @include igx-type-style($type-scale, $label) { + margin-top: 0; + margin-bottom: 0; } } } 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 3e62b027482..685649fd772 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 @@ -290,20 +290,18 @@ $header-hour: map-get($categories, 'header-hour'); $content: map-get($categories, 'content'); - @include igx-scope('.igx-typography') { - %time-picker__header-ampm { - @include igx-type-style($type-scale, $time-period); - } + %time-picker__header-ampm { + @include igx-type-style($type-scale, $time-period); + } - %time-picker__header-hour { - @include igx-type-style($type-scale, $header-hour); - } + %time-picker__header-hour { + @include igx-type-style($type-scale, $header-hour); + } - %time-picker__column { - @include igx-type-style($type-scale, $content) { - margin-top: 0; - margin-bottom: 0; - } + %time-picker__column { + @include igx-type-style($type-scale, $content) { + margin-top: 0; + margin-bottom: 0; } } } 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 9f2cfe82280..19cb713e3ed 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 @@ -69,8 +69,6 @@ $toast-padding: rem(16px) rem(24px); $toast-margin: rem(42px) auto; - // @debug $theme; - %igx-toast-display { position: fixed; display: flex; @@ -112,11 +110,9 @@ @mixin igx-toast-typography($type-scale, $categories: (text: 'body-2')) { $text: map-get($categories, 'text'); - @include igx-scope('.igx-typography') { - %igx-toast-display { - @include igx-type-style($type-scale, $text) { - margin: 0; - } + %igx-toast-display { + @include igx-type-style($type-scale, $text) { + margin: 0; } } } 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 068c3397765..7944912f5b2 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 @@ -99,21 +99,18 @@ $text-desktop: map-get($categories, 'text-desktop'); $text-mobile: map-get($categories, 'text-mobile'); + %tooltip--mobile { + @include igx-type-style($type-scale, $text-mobile); + } - @include igx-scope('.igx-typography') { - %tooltip--mobile { - @include igx-type-style($type-scale, $text-mobile); + @if $text-desktop != null { + %tooltip--desktop { + @include igx-type-style($type-scale, $text-desktop); } - - @if $text-desktop != null { - %tooltip--desktop { - @include igx-type-style($type-scale, $text-desktop); - } - } @else { - %tooltip--desktop { - font-size: rem(10px); - font-weight: 600; - } + } @else { + %tooltip--desktop { + font-size: rem(10px); + font-weight: 600; } } } 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 4a387012884..c38ac6926fc 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss @@ -108,9 +108,6 @@ @warn unquote('You have excluded the following components from the theme: "#{$excluded}". You can now add your own themes for the excluded components.'); } - // @debug 'All registered: #{$components}'; - // @debug 'All excluded: #{$excluded}'; - @if not(index($exclude, 'igx-ripple')) { @include igx-ripple(igx-ripple-theme($palette, $schema)); } @@ -476,3 +473,67 @@ $elevation: $elevation, ); } + +/// Creates a global fluent theme that can be used with light backgrounds. +/// @param {Map} $palette - An igx-palette to be used by the global theme. +/// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles. +/// @param {Boolean} $legacy-support - Turn off support for IE11, allowing you to use css variables to style components. +@mixin igx-fluent-theme( + $palette, + $exclude: (), + $legacy-support: true +) { + $primary: igx-color($palette, 'primary'); + $secondary: igx-color($palette, 'secondary'); + $surface: igx-color($palette, 'surface'); + + @include igx-typography( + $font-family: "'Open Sans', Helvetica, Arial, sans-serif", + $type-scale: $fluent-type-scale, + $base-color: #323130 + ); + + @include igx-theme( + $palette: igx-palette( + $primary, + $secondary, + $surface: if($surface != #fff, $surface, #fff), + $grays: #000 + ), + $schema: $light-fluent-schema, + $legacy-support: $legacy-support, + $exclude: $exclude + ); +} + +/// Creates a global fluent theme that can be used with dark backgrounds. +/// @param {Map} $palette - An igx-palette to be used by the global theme. +/// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles. +/// @param {Boolean} $legacy-support - Turn off support for IE11, allowing you to use css variables to style components. +@mixin igx-fluent-dark-theme( + $palette, + $exclude: (), + $legacy-support: true +) { + $primary: igx-color($palette, 'primary'); + $secondary: igx-color($palette, 'secondary'); + $surface: igx-color($palette, 'surface'); + + @include igx-typography( + $font-family: "'Open Sans', Helvetica, Arial, sans-serif", + $type-scale: $fluent-type-scale, + $base-color: #fff + ); + + @include igx-theme( + $palette: igx-palette( + $primary, + $secondary, + $surface: if($surface != #fff, $surface, #222), + $grays: #fff + ), + $schema: $dark-fluent-schema, + $legacy-support: $legacy-support, + $exclude: $exclude + ); +} diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss index 0eee139add2..aa91b9910b6 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss @@ -72,9 +72,38 @@ $elevations: igx-elevations( /// Green palette /// @type {Map} /// @group palettes -$green-palette: igx-palette($primary: #09f, $secondary: #72da67) !default; +$green-palette: igx-palette( + $primary: #09f, + $secondary: #72da67 +) !default; /// Red palette /// @type {Map} /// @group palettes -$purple-palette: igx-palette($primary: #00b4d6, $secondary: #514590) !default; +$purple-palette: igx-palette( + $primary: #00b4d6, + $secondary: #514590 +) !default; + + +/// Fluent Excel palette +/// @type {Map} +/// @group palettes +$fluent-excel-palette: igx-palette( + $primary: #217346, + $secondary: #217346, + $success: #107c10, + $warn: #797673, + $error: #a80000 +) !default; + +/// Fluent Word palette +/// @type {Map} +/// @group palettes +$fluent-word-palette: igx-palette( + $primary: #2b579a, + $secondary: #2b579a, + $success: #107c10, + $warn: #797673, + $error: #a80000 +) !default; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-dark-excel.scss b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-dark-excel.scss new file mode 100644 index 00000000000..f801e9f3b52 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-dark-excel.scss @@ -0,0 +1,4 @@ +@import '../index'; + +@include igx-core(); +@include igx-fluent-dark-theme($fluent-excel-palette); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-dark-word.scss b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-dark-word.scss new file mode 100644 index 00000000000..8b472db773b --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-dark-word.scss @@ -0,0 +1,4 @@ +@import '../index'; + +@include igx-core(); +@include igx-fluent-dark-theme($fluent-word-palette); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-light-excel.scss b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-light-excel.scss new file mode 100644 index 00000000000..99b32b40ae6 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-light-excel.scss @@ -0,0 +1,4 @@ +@import '../index'; + +@include igx-core(); +@include igx-fluent-theme($fluent-excel-palette); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-light-word.scss b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-light-word.scss new file mode 100644 index 00000000000..f0e9b98d026 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-light-word.scss @@ -0,0 +1,4 @@ +@import '../index'; + +@include igx-core(); +@include igx-fluent-theme($fluent-word-palette); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_avatar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_avatar.scss index 06846dc04c8..bda7a59c6e2 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_avatar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_avatar.scss @@ -10,4 +10,10 @@ /// @requires {function} extend /// @requires $_light-avatar /// @see $default-palette -$_dark-avatar: extend($_light-avatar, ()); +$_dark-avatar: extend($_light-avatar); + +/// Generates a dark fluent avatar schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_fluent-avatar +$_dark-fluent-avatar: extend($_fluent-avatar); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_badge.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_badge.scss index 3c1b4b552de..d890a09f780 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_badge.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_badge.scss @@ -11,4 +11,10 @@ /// @requires extend /// @requires $_light-badge /// @see $default-palette -$_dark-badge: extend($_light-badge, ()); +$_dark-badge: extend($_light-badge); + +/// Generates a dark fluent badge schema. +/// @type {Map} +/// @requires extend +/// @requires $_fluent-badge +$_dark-fluent-badge: extend($_fluent-badge); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_banner.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_banner.scss index 05e4b4bbad1..0ff1d13f098 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_banner.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_banner.scss @@ -10,5 +10,10 @@ /// @requires extend /// @requires $_light-banner /// @see $default-palette +$_dark-banner: extend($_light-banner); -$_dark-banner: extend($_light-banner, ()); +/// Generates a dark fluent banner schema. +/// @type {Map} +/// @requires extend +/// @requires $_fluent-banner +$_dark-fluent-banner: extend($_fluent-banner); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_bottom-nav.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_bottom-nav.scss index 6188ec0eec6..33790a48900 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_bottom-nav.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_bottom-nav.scss @@ -5,13 +5,24 @@ /// @author Simeon Simeonoff //// -/// Generates a dark bottom navigation schema. +/// Generates the base dark bottom-nav schema. /// @type {Map} /// @prop {Color} background [#222] - The background color used for the toast. +$_base-dark-bottom-nav: ( + background: #222 +); + +/// Generates a dark bottom-nav schema based on a mix of $_light-bottom-nav and $_base-dark-bottom-nav +/// @type {Map} /// @requires {function} extend /// @requires $_light-bottom-nav +/// @requires $_base-dark-bottom-nav /// @see $default-palette +$_dark-bottom-nav: extend($_light-bottom-nav, $_base-dark-bottom-nav); -$_dark-bottom-nav: extend($_light-bottom-nav, ( - background: #222 -)); +/// Generates a dark fluent bottom-nav schema based on a mix of $_fluent-bottom-nav and $_base-dark-bottom-nav +/// @type {Map} +/// @requires {function} extend +/// @requires $_fluent-bottom-nav +/// @requires $_base-dark-bottom-na +$_dark-fluent-bottom-nav: extend($_fluent-bottom-nav, $_base-dark-bottom-nav); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_button-group.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_button-group.scss index b74288ee246..4e6d0320488 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_button-group.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_button-group.scss @@ -5,13 +5,80 @@ /// @author Simeon Simeonoff //// -/// Generates a dark button group schema. + +/// Generates the base dark button-group schema. /// @type {Map} /// @prop {Color} item-background [#222] - The background color for button group items . +$_base-dark-button-group: ( + item-background: #222 +); + +/// Generates a dark button-group schema based on a mix of $_light-button-group and $_base-dark-button-group +/// @type {Map} /// @requires {function} extend /// @requires $_light-button-group +/// @requires $_base-dark-button-group /// @see $default-palette +$_dark-button-group: extend($_light-button-group, $_base-dark-button-group); -$_dark-button-group: extend($_light-button-group, ( - item-background: #222 -)); +/// Generates a dark fluent button-group schema based on a mix of $_fluent-button-group and $_base-dark-button-group +/// @type {Map} +/// +/// @prop {map} item-border-color [igx-color: ('grays', 100), hexrgba: #000] - The border color for button group items. +/// @prop {map} item-selected-border-color [igx-color: ('grays', 100), hexrgba: #000] - The border color for button group selected items. +/// @prop {map} item-disabled-border: [igx-color: ('grays', 100), hexrgba: #000] - The border color for button group disabled items. +/// @prop {map} item-text-color [igx-color: ('grays', 900)] - The text color for button group items. +/// @prop {map} item-hover-text-color [igx-color: ('primary', 200)] - The text color for button group items on hover. +/// @prop {Color} item-hover-background [#222] - The background color for button group items on hover. +/// @prop {map} item-selected-background [igx-color: ('grays', 100)] - The background color for button group selected items. +/// @prop {map} item-selected-hover-background [igx-color: ('grays', 100)] - The background color for button group selected items on hover. +/// @prop {map} item-selected-hover-background [igx-color: ('primary', 200)] - The text color for button group selected items. +/// @prop {Color} item-hover-background [#222] - The background color for button group disabled items. +/// +/// @requires {function} extend +/// @requires $_fluent-button-group +/// @requires $_base-dark-button-group +$_dark-fluent-button-group: extend( + $_fluent-button-group, + $_base-dark-button-group, + ( + item-border-color: ( + igx-color: ('grays', 100), + hexrgba: #000 + ), + + item-selected-border-color: ( + igx-color: ('grays', 100), + hexrgba: #000 + ), + + item-disabled-border: ( + igx-color: ('grays', 100), + hexrgba: #000 + ), + + item-text-color: ( + igx-color: ('grays', 900) + ), + + item-hover-text-color: ( + igx-color: ('primary', 200) + ), + + item-hover-background: #222, + + item-selected-background: ( + igx-color: ('grays', 100) + ), + + item-selected-hover-background: ( + igx-color: ('grays', 100) + ), + + item-selected-text-color: ( + igx-color: ('primary', 200) + ), + + disabled-background-color: #222, + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_button.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_button.scss index 34b1465d939..36355f64634 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_button.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_button.scss @@ -5,6 +5,7 @@ /// @author Simeon Simeonoff //// + /// Generates a dark button schema. /// @type {Map} /// @prop {Map} flat-hover-background [igx-color: ('secondary', 500), rgba: .12 ] - The hover background color of a flat button. @@ -14,7 +15,6 @@ /// @requires extend /// @requires $_light-button /// @see $default-palette - $_dark-button: extend($_light-button, ( flat-hover-background: ( igx-color: ('secondary', 500), @@ -34,3 +34,29 @@ $_dark-button: extend($_light-button, ( igx-color: ('grays', 200) ) )); + +/// Generates a dark fluent button schema. +/// @type {Map} +/// @prop {Map} flat-icon-color [igx-color: ('primary', 200)] - The icon color of a flat button. +/// @prop {Map} flat-hover-icon-color [igx-color: ('primary', 200)] - The icon color of a flat button on hover. +/// @prop {Map} flat-focus-icon-color [igx-color: ('primary', 200)] - The icon color of a flat button on focus. +/// @prop {Map} flat-hover-text-color [igx-color: ('primary', 200)] - The text color of a flat button on hover. +/// @requires extend +/// @requires $_fluent-button +$_dark-fluent-button: extend($_fluent-button, ( + flat-icon-color: ( + igx-color: ('primary', 200) + ), + + flat-hover-icon-color: ( + igx-color: ('primary', 200) + ), + + flat-focus-icon-color: ( + igx-color: ('primary', 200) + ), + + flat-hover-text-color: ( + igx-color: ('primary', 200) + ), +)); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_calendar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_calendar.scss index 0bc958ac817..5fc94be6d4f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_calendar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_calendar.scss @@ -18,3 +18,9 @@ $_dark-calendar: extend($_light-calendar, ( rgba: .38 ), )); + +/// Generates a dark fluent calendar schema. +/// @type {Map} +/// @requires extend +/// @requires $_fluent-calendar +$_dark-fluent-calendar: extend($_fluent-calendar); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_card.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_card.scss index 19e00a2d9cd..c3a98277d9f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_card.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_card.scss @@ -10,4 +10,10 @@ /// @requires extend /// @requires $_light-card /// @see $default-palette -$_dark-card: extend($_light-card, ()); +$_dark-card: extend($_light-card); + +/// Generates a dark fluent card schema. +/// @type {Map} +/// @requires extend +/// @requires $_fluent-card +$_dark-fluent-card: extend($_fluent-card); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_carousel.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_carousel.scss index d70835f06bd..345ca2d9860 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_carousel.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_carousel.scss @@ -5,14 +5,27 @@ /// @author Simeon Simeonoff //// -/// Generates a dark carousel schema. +/// Generates the base dark carousel schema. /// @type {Map} /// @prop {Color} button-background [#222] - The previous/next buttons idle background color. /// @prop {Color} button-hover-background [#222] - The previous/next buttons hover background color. +$_base-dark-carousel: ( + button-background: #222, + button-hover-background: #222, +); + +/// Generates a dark carousel schema based on a mix of $_light-carousel and $_base-dark-carousel +/// @type {Map} /// @requires extend /// @requires $_light-carousel +/// @requires $_base-dark-carousel /// @see $default-palette -$_dark-carousel: extend($_light-carousel, ( - button-background: #222, - button-hover-background: #222, -)); +$_dark-carousel: extend($_light-carousel, $_base-dark-carousel); + +/// Generates a dark fluent carousel schema based on a mix of $_fluent-carousel and $_base-dark-carousel +/// @type {Map} +/// @requires extend +/// @requires $_fluent-carousel +/// @requires $_base-dark-carousel +$_dark-fluent-carousel: extend($_fluent-carousel, $_base-dark-carousel); + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_checkbox.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_checkbox.scss index b6bbd8e965d..513162a2fbe 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_checkbox.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_checkbox.scss @@ -14,3 +14,12 @@ $_dark-checkbox: extend($_light-checkbox, ( tick-color: #222 )); + +/// Generates a dark fluent checkbox schema. +/// @type {Map} +/// @prop {Color} tick-color [#fff] - The checked mark color. +/// @requires extend +/// @requires $_fluent-checkbox +$_dark-fluent-checkbox: extend($_fluent-checkbox, ( + tick-color: #fff +)); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_chip.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_chip.scss index 3ef07efb460..989d9f6bc65 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_chip.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_chip.scss @@ -5,15 +5,27 @@ /// @author Simeon Simeonoff //// -/// Generates a dark chip schema. +/// Generates the base dark chip schema. /// @type {Map} /// @prop {Map} ghost-background [igx-color: ('grays', 400), hexrgba: #000] - The chip ghost background color. -/// @requires extend -/// @requires $_light-chip -/// @see $default-palette -$_dark-chip: extend($_light-chip, ( +$_base-dark-chip: ( ghost-background: ( igx-color: ('grays', 400), hexrgba: #000 ) -)); +); + +/// Generates a dark chip schema based on a mix of $_light-chip and $_base-dark-chip. +/// @type {Map} +/// @requires extend +/// @requires $_light-chip +/// @requires $_base-dark-chip +/// @see $default-palette +$_dark-chip: extend($_light-chip, $_base-dark-chip); + +/// Generates a dark fluent chip schema based on a mix of $_fluent-chip and $_base-dark-chip. +/// @type {Map} +/// @requires extend +/// @requires $_fluent-chip +/// @requires $_base-dark-chip +$_dark-fluent-chip: extend($_fluent-chip, $_base-dark-chip); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_column-hiding.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_column-hiding.scss index c4a6c358830..4a1f32ec9bf 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_column-hiding.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_column-hiding.scss @@ -10,4 +10,10 @@ /// @requires extend /// @requires $_light-column-hiding /// @see $default-palette -$_dark-column-hiding: extend($_light-column-hiding, ()); +$_dark-column-hiding: extend($_light-column-hiding); + +/// Generates a dark column hiding schema. +/// @type {Map} +/// @requires extend +/// @requires $_fluent-column-hiding +$_dark-fluent-column-hiding: extend($_fluent-column-hiding); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_combo.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_combo.scss index 4fc02516221..83814208d2e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_combo.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_combo.scss @@ -11,4 +11,10 @@ /// @requires extend /// @requires $_light-combo /// @see $default-palette -$_dark-combo: extend($_light-combo, ()); +$_dark-combo: extend($_light-combo); + +/// Generates a dark fluent combo schema. +/// @type {Map} +/// @requires extend +/// @requires $_fluent-combo +$_dark-fluent-combo: extend($_fluent-combo); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_dialog.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_dialog.scss index a83f0b7d7ef..807a13c565f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_dialog.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_dialog.scss @@ -10,4 +10,10 @@ /// @requires extend /// @requires $_light-dialog /// @see $default-palette -$_dark-dialog: extend($_light-dialog, ()); +$_dark-dialog: extend($_light-dialog); + +/// Generates a dark fluent dialog schema. +/// @type {Map} +/// @requires extend +/// @requires $_fluent-dialog +$_dark-fluent-dialog: extend($_fluent-dialog); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_divider.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_divider.scss index b08b9854dfc..fbf1a62a982 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_divider.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_divider.scss @@ -6,8 +6,13 @@ /// Generates a dark divider schema. /// @type {Map} -/// /// @requires {function} extend /// @requires $_light-divider /// @see $default-palette -$_dark-divider: extend($_light-divider, ()); +$_dark-divider: extend($_light-divider); + +/// Generates a dark fluent divider schema. +/// @type {Map} +/// @requires {function} extend +/// @requires$_fluent-divider +$_dark-fluent-divider: extend($_fluent-divider); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_drop-down.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_drop-down.scss index 7b2d80d8f32..14bf90e094c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_drop-down.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_drop-down.scss @@ -11,4 +11,23 @@ /// @requires $_light-drop-down /// @requires extend /// @see $default-palette -$_dark-drop-down: extend($_light-drop-down, ()); +$_dark-drop-down: extend($_light-drop-down); + +/// Generates a dark fluent drop-down schema. +/// @type {Map} +/// @prop {color} selected-item-text-color [#fff)] - The drop-down selected item text color. +/// @prop {color} selected-hover-item-text-color [#fff] - The drop-down selected item hover text color. +/// @prop {color} selected-focus-item-text-color [#fff] - The drop-down selected item focus text color. +/// @requires extend +/// @requires $_fluent-drop-down +/// @requires extend +$_dark-fluent-drop-down: extend( + $_fluent-drop-down, + ( + selected-item-text-color: #fff, + + selected-hover-item-text-color: #fff, + + selected-focus-item-text-color: #fff, + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_expansion-panel.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_expansion-panel.scss index 89edfe30549..c8307325ef8 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_expansion-panel.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_expansion-panel.scss @@ -9,10 +9,22 @@ /// @type {Map} /// @prop {Color} header-background [#222] - The panel header background color. /// @prop {Color} body-background [#222] - The panel body background color. +$_base-dark-expansion-panel: ( + header-background: #222, + body-background: #222, +); + +/// Generates a dark expansion panel schema based on a mix of $_light-expansion-panel and $_base-dark-expansion-panel. +/// @type {Map} /// @requires extend /// @requires $_light-expansion-panel +/// @requires $_base-dark-expansion-panel /// @see $default-palette -$_dark-expansion-panel: extend($_light-expansion-panel, ( - header-background: #222, - body-background: #222, -)); +$_dark-expansion-panel: extend($_light-expansion-panel, $_base-dark-expansion-panel); + +/// Generates a dark fluent expansion panel schema based on a mix of $_fluent-expansion-panel and $_base-dark-expansion-panel. +/// @type {Map} +/// @requires extend +/// @requires $_fluent-expansion-panel +/// @requires $_base-dark-expansion-panel +$_dark-fluent-expansion-panel: extend($_fluent-expansion-panel, $_base-dark-expansion-panel); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-filtering.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-filtering.scss index 46d0ed80db4..c0e65cd721f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-filtering.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-filtering.scss @@ -10,4 +10,10 @@ /// @requires extend /// @requires $_light-grid-filtering /// @see $default-palette -$_dark-grid-filtering: extend($_light-grid-filtering, ()); +$_dark-grid-filtering: extend($_light-grid-filtering); + +/// Generates a dark fluent grid-filtering schema. +/// @type {Map} +/// @requires extend +/// @requires $_fluent-grid-filtering +$_dark-fluent-grid-filtering: extend($_fluent-grid-filtering); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-pagination.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-pagination.scss index b2d92bcc773..38a5a6fafac 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-pagination.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-pagination.scss @@ -5,12 +5,27 @@ /// @author Simeon Simeonoff //// -/// Generates a dark grid pagination schema. +/// Generates a base dark grid pagination schema. /// @type {Map} /// @requires extend /// @prop {Map} background-color [#222] - The background color of the paging panel. /// @requires $_light-grid-pagination /// @see $default-palette -$_dark-grid-pagination: extend($_light-grid-pagination, ( +$_base-dark-grid-pagination: ( background-color: #222 -)); +); + +/// Generates a dark grid pagination schema based on a mix of $_light-grid-pagination and $_base-dark-grid-pagination. +/// @type {Map} +/// @requires extend +/// @requires $_light-grid-pagination +/// @requires $_base-dark-grid-pagination +/// @see $default-palette +$_dark-grid-pagination: extend($_light-grid-pagination, $_base-dark-grid-pagination); + +/// Generates a dark fluent grid pagination schema based on a mix of $_fluent-grid-pagination and $_base-dark-grid-pagination. +/// @type {Map} +/// @requires extend +/// @requires $_fluent-grid-pagination +/// @requires $_base-dark-grid-pagination +$_dark-fluent-grid-pagination: extend($_fluent-grid-pagination, $_base-dark-grid-pagination); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-summary.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-summary.scss index a0af439b4f4..5706ceab727 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-summary.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-summary.scss @@ -11,5 +11,10 @@ /// @requires {function} extend /// @requires $_light-grid-summary /// @see $default-palette +$_dark-grid-summary: extend($_light-grid-summary); -$_dark-grid-summary: extend($_light-grid-summary, ()); +/// Generates a dark fluent grid-summary schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_fluent-grid-summary +$_dark-fluent-grid-summary: extend($_fluent-grid-summary); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-toolbar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-toolbar.scss index 652d0a3b8c7..dc0cd89ab48 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-toolbar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-toolbar.scss @@ -5,14 +5,26 @@ /// @author Marin Popov //// -/// Generates a dark grid-toolbar schema. +/// Generates a base dark grid-toolbar schema. /// @type {Map} /// @prop {map} background-color [#222] - The toolbar background color. /// @prop {map} dropdown-background [#222] - The toolbar drop-down background color. +$_base-dark-grid-toolbar: ( + background-color: #222, + dropdown-background: #222 +); + +/// Generates a dark grid-toolbar schema based on a mix of $_light-grid-toolbar and $_base-dark-grid-toolbar. +/// @type {Map} /// @requires {function} extend /// @requires $_light-grid-toolbar +/// @requires $_base-dark-grid-toolbar /// @see $default-palette -$_dark-grid-toolbar: extend($_light-grid-toolbar, ( - background-color: #222, - dropdown-background: #222 -)); +$_dark-grid-toolbar: extend($_light-grid-toolbar, $_base-dark-grid-toolbar); + +/// Generates a dark fluent grid-toolbar schema based on a mix of $_fluent-grid-toolbar and $_base-dark-grid-toolbar.. +/// @type {Map} +/// @requires {function} extend +/// @requires $_fluent-grid-toolbar +/// @requires $_base-dark-grid-toolbar +$_dark-fluent-grid-toolbar: extend($_fluent-grid-toolbar, $_base-dark-grid-toolbar); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid.scss index ba8d8d0e676..baef7724404 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid.scss @@ -5,7 +5,7 @@ /// @author Simeon Simeonoff //// -/// Generates a dark grid schema. +/// Generates the base dark grid schema. /// @type {Map} /// @prop {Map} header-background [igx-color: ('grays', 100), hexrgba: #222] - The table header background color. /// @prop {Color} content-background [#222] - The table body background color. @@ -27,10 +27,7 @@ /// @prop {Map} body-summaries-text-color [igx-color: ('grays', 300), hexrgba: #222, text-contrast: ()] - The text color of the summary groups located the body. /// @prop {Map} root-summaries-background [igx-color: ('grays', 100), hexrgba: #222] - The background color of the summary groups located the footer. /// @prop {Map} root-summaries-text-color [igx-color: ('grays', 100), hexrgba: #222, text-contrast: ()] - The text color of the summary groups located the footer. -/// @requires extend -/// @requires $_light-grid -/// @see $default-palette -$_dark-grid: extend($_light-grid, ( +$_base-dark-grid: ( header-background: ( igx-color: ('grays', 100), hexrgba: #222 @@ -88,7 +85,7 @@ $_dark-grid: extend($_light-grid, ( cell-selected-text-color: #fff, body-summaries-background: ( - igx-color: ('grays', 100), + igx-color: ('grays', 300), hexrgba: #222 ), @@ -116,4 +113,37 @@ $_dark-grid: extend($_light-grid, ( row-ghost-background: ( igx-color: ('primary', 900) ) -)); +); + +/// Generates a dark grid schema based on a mix of $_light-grid and $_base-dark-grid. +/// @requires extend +/// @requires $_light-grid +/// @requires $_base-dark-grid +/// @see $default-palette +$_dark-grid: extend($_light-grid, $_base-dark-grid); + + +/// Generates a dark fluent grid schema based on a mix of $_fluent-grid and $_base-dark-grid. +/// @requires extend +/// @requires $_fluent-grid +/// @requires $_base-dark-grid +$_dark-fluent-grid: extend( + $_fluent-grid, + $_base-dark-grid, + ( + row-hover-background: ( + igx-color: ('grays', 100), + hexrgba: #222 + ), + + row-selected-background: ( + igx-color: ('grays', 200), + hexrgba: #222 + ), + + row-selected-hover-background: ( + igx-color: ('grays', 300), + hexrgba: #222 + ), + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_icon.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_icon.scss index b17768c9639..d3b9a3054c5 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_icon.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_icon.scss @@ -11,6 +11,21 @@ /// @requires {function} extend /// @requires $_light-icon /// @see $default-palette +$_dark-icon: extend($_light-icon); +/// Generates a dark icon schema. +/// @type {Map} +/// @property {Color} color [#fff] - The icon color. +/// @property {map} disabled-color [igx-color: ('grays' 500)] - The icon color. +/// @requires {function} extend +/// @requires $_light-icon +$_dark-fluent-icon: extend( + $_fluent-icon, + ( + color: #fff, -$_dark-icon: extend($_light-icon, ()); + disabled-color: ( + igx-color: ('grays' 500) + ) + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss index 08a5ea72800..c1838937e46 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss @@ -83,7 +83,6 @@ /// @property {Map} igx-time-picker [$_dark-time-picker] /// @property {Map} igx-toast [$_dark-toast] /// @property {Map} igx-tooltip [$_dark-tooltip] - $dark-schema: ( igx-avatar: $_dark-avatar, igx-badge: $_dark-badge, @@ -125,3 +124,86 @@ $dark-schema: ( igx-toast: $_dark-toast, igx-tooltip: $_dark-tooltip ); + +/// The default dark fluent schema for all components. +/// @type {Map} +/// @property {map} igx-avatar: [$_dark-fluent-avatar], +/// @property {map} igx-badge: [$_dark-fluent-badge], +/// @property {map} igx-banner: [$_dark-fluent-banner], +/// @property {map} igx-bottom-nav: [$_dark-fluent-bottom-nav], +/// @property {map} igx-button: [$_dark-fluent-button], +/// @property {map} igx-button-group: [$_dark-fluent-button-group], +/// @property {map} igx-calendar: [$_dark-fluent-calendar], +/// @property {map} igx-card: [$_dark-fluent-card], +/// @property {map} igx-carousel: [$_dark-fluent-carousel], +/// @property {map} igx-checkbox: [$_dark-fluent-checkbox], +/// @property {map} igx-chip: [$_dark-fluent-chip], +/// @property {map} igx-column-hiding: [$_dark-fluent-column-hiding], +/// @property {map} igx-combo: [$_dark-fluent-combo], +/// @property {map} igx-dialog: [$_dark-fluent-dialog], +/// @property {map} igx-divider: [$_dark-fluent-divider], +/// @property {map} igx-drop-down: [$_dark-fluent-drop-down], +/// @property {map} igx-expansion-panel: [$_dark-fluent-expansion-panel], +/// @property {map} igx-grid: [$_dark-fluent-grid], +/// @property {map} igx-grid-filtering: [$_dark-fluent-grid-filtering], +/// @property {map} igx-grid-paginator: [$_dark-fluent-grid-pagination], +/// @property {map} igx-grid-summary: [$_dark-fluent-grid-summary], +/// @property {map} igx-grid-toolbar: [$_dark-fluent-grid-toolbar], +/// @property {map} igx-icon: [$_dark-fluent-icon], +/// @property {map} igx-input-group: [$_dark-fluent-input-group], +/// @property {map} igx-list: [$_dark-fluent-list], +/// @property {map} igx-navbar: [$_dark-fluent-navbar], +/// @property {map} igx-navdrawer: [$_dark-fluent-navdrawer], +/// @property {map} igx-overlay: [$_dark-fluent-overlay], +/// @property {map} igx-linear-bar: [$_dark-fluent-progress-linear], +/// @property {map} igx-circular-bar: [$_dark-fluent-progress-circular], +/// @property {map} igx-radio: [$_dark-fluent-radio], +/// @property {map} igx-ripple: [$_dark-fluent-ripple], +/// @property {map} igx-slider: [$_dark-fluent-slider], +/// @property {map} igx-snackbar: [$_dark-fluent-snackbar], +/// @property {map} igx-switch: [$_dark-fluent-switch], +/// @property {map} igx-tabs: [$_dark-fluent-tabs], +/// @property {map} igx-time-picker: [$_dark-fluent-time-picker], +/// @property {map} igx-toast: [$_dark-fluent-toast], +/// @property {map} igx-tooltip: [$_dark-fluent-tooltip] +$dark-fluent-schema: ( + igx-avatar: $_dark-fluent-avatar, + igx-badge: $_dark-fluent-badge, + igx-banner: $_dark-fluent-banner, + igx-bottom-nav: $_dark-fluent-bottom-nav, + igx-button: $_dark-fluent-button, + igx-button-group: $_dark-fluent-button-group, + igx-calendar: $_dark-fluent-calendar, + igx-card: $_dark-fluent-card, + igx-carousel: $_dark-fluent-carousel, + igx-checkbox: $_dark-fluent-checkbox, + igx-chip: $_dark-fluent-chip, + igx-column-hiding: $_dark-fluent-column-hiding, + igx-combo: $_dark-fluent-combo, + igx-dialog: $_dark-fluent-dialog, + igx-divider: $_dark-fluent-divider, + igx-drop-down: $_dark-fluent-drop-down, + igx-expansion-panel: $_dark-fluent-expansion-panel, + igx-grid: $_dark-fluent-grid, + igx-grid-filtering: $_dark-fluent-grid-filtering, + igx-grid-paginator: $_dark-fluent-grid-pagination, + igx-grid-summary: $_dark-fluent-grid-summary, + igx-grid-toolbar: $_dark-fluent-grid-toolbar, + igx-icon: $_dark-fluent-icon, + igx-input-group: $_dark-fluent-input-group, + igx-list: $_dark-fluent-list, + igx-navbar: $_dark-fluent-navbar, + igx-navdrawer: $_dark-fluent-navdrawer, + igx-overlay: $_dark-fluent-overlay, + igx-linear-bar: $_dark-fluent-progress-linear, + igx-circular-bar: $_dark-fluent-progress-circular, + igx-radio: $_dark-fluent-radio, + igx-ripple: $_dark-fluent-ripple, + igx-slider: $_dark-fluent-slider, + igx-snackbar: $_dark-fluent-snackbar, + igx-switch: $_dark-fluent-switch, + igx-tabs: $_dark-fluent-tabs, + igx-time-picker: $_dark-fluent-time-picker, + igx-toast: $_dark-fluent-toast, + igx-tooltip: $_dark-fluent-tooltip +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_input-group.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_input-group.scss index 344a6522e23..43cf2e804a2 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_input-group.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_input-group.scss @@ -6,13 +6,38 @@ /// @author Marin Popov //// -/// Generates a light input-group schema. +/// Generates a base dark input-group schema. /// @type {Map} /// @prop {Color} search-background [#222] - The background color of an input group of type search. +$_base-dark-input-group: ( + search-background: #222 +); + +/// Generates a dark input-group schema based on a mix of $_light-input-group and $_base-dark-input-group.. +/// @type {Map} /// @requires {function} extend /// @requires $_light-input-group +/// @requires $_base-dark-input-group /// @see $default-palette +$_dark-input-group: extend($_light-input-group, $_base-dark-input-group); -$_dark-input-group: extend($_light-input-group, ( - search-background: #222 -)); +/// Generates a dark fluent input-group schema based on a mix of $_fluent-input-group and $_base-dark-input-group. +/// @type {Map} +/// @requires {function} extend +/// @requires $_fluent-input-group +/// @requires $_base-dark-input-group +$_dark-fluent-input-group: extend( + $_fluent-input-group, + $_base-dark-input-group, + ( + input-prefix-background: ( + igx-color: ('grays', 100), + hexrgba: #222 + ), + + input-suffix-background: ( + igx-color: ('grays', 100), + hexrgba: #222 + ), + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_list.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_list.scss index 6efaf45a28a..42e70e3f1d3 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_list.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_list.scss @@ -6,14 +6,11 @@ /// @author Marin Popov //// -/// Generates a dark list schema. +/// Generates a base dark list schema. /// @type {Map} /// @property {Map} item-background-hover [igx-color: ('grays', 400), hexrgba: (#000)] - The list item hover background. /// @property {Map} item-background-active [igx-color: ('grays', 400), hexrgba: (#000)] - The active list item background color. -/// @requires {function} extend -/// @requires $_light-list -/// @see $default-palette -$_dark-list: extend($_light-list, ( +$_base-dark-list: ( item-background-hover: ( igx-color: ('grays', 400), hexrgba: (#000) @@ -23,4 +20,20 @@ $_dark-list: extend($_light-list, ( igx-color: ('grays', 400), hexrgba: (#000) ), -)); +); + +/// Generates a base dark list schema based on a mix of $_light-list and $_base-dark-list. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-list +/// @requires $_base-dark-list +/// @see $default-palette +$_dark-list: extend($_light-list, $_base-dark-list); + +/// Generates a base dark fluent list schema based on a mix of $_fluent-list and $_base-dark-list.. +/// @type {Map} +/// @requires {function} extend +/// @requires $_fluent-list +/// @requires $_base-dark-list +$_dark-fluent-list: extend($_fluent-list, $_base-dark-list); + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_navbar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_navbar.scss index 51586576014..dda3ff4fc6d 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_navbar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_navbar.scss @@ -11,5 +11,11 @@ /// @requires {function} extend /// @requires $_light-navbar /// @see $default-palette +$_dark-navbar: extend($_light-navbar); + +/// Generates a dark fluent navbar schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_fluent-navbar +$_dark-fluent-navbar: extend($_fluent-navbar); -$_dark-navbar: extend($_light-navbar, ()); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_navdrawer.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_navdrawer.scss index c37c91dea79..5316da4d54b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_navdrawer.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_navdrawer.scss @@ -11,5 +11,29 @@ /// @requires {function} extend /// @requires $_light-navdrawer /// @see $default-palette +$_dark-navdrawer: extend($_light-navdrawer); -$_dark-navdrawer: extend($_light-navdrawer, ()); +/// Generates a dark fluent navdrawer schema. +/// @type {Map} +/// @prop {map} item-active-text-color [igx-color: ('primary', 200)] - The item's active text color. +/// @prop {map} item-active-icon-color [igx-color: ('primary', 100)] - The item's icon active color. +/// @prop {map} item-active-background [igx-color: ('primary', 400), rgba: .12] - The item's active background color. +/// @requires {function} extend +/// @requires $_fluent-navdrawer +$_dark-fluent-navdrawer: extend( + $_fluent-navdrawer, + ( + item-active-text-color: ( + igx-color: ('primary', 200) + ), + + item-active-icon-color: ( + igx-color: ('primary', 100) + ), + + item-active-background: ( + igx-color: ('primary', 400), + rgba: .12 + ), + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_overlay.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_overlay.scss index 57266926130..ef6908b7c50 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_overlay.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_overlay.scss @@ -11,5 +11,16 @@ /// @requires {function} extend /// @requires $_light-overlay /// @see $default-palette +$_dark-overlay: extend($_light-overlay); -$_dark-overlay: extend($_light-overlay, ()); +/// Generates a dark fluent overlay schema. +/// @type {Map} +/// @property {color} background-color [rgba(0, 0, 0, .4)] - The background color used for modal overlays. +/// @requires {function} extend +/// @requires $_fluent-overlay +$_dark-fluent-overlay: extend( + $_fluent-overlay, + ( + background-color: rgba(0, 0, 0, .4) + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_progress.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_progress.scss index 6613f0e8aa0..b17b62b55db 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_progress.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_progress.scss @@ -11,13 +11,23 @@ /// @requires {function} extend /// @requires $_light-progress-linear /// @see $default-palette +$_dark-progress-linear: extend($_light-progress-linear); -$_dark-progress-linear: extend($_light-progress-linear, ()); +/// Generates a dark fluent progress-linear schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_fluent-progress-linear +/// @see $default-palette +$_dark-fluent-progress-linear: extend($_fluent-progress-linear); /// Generates a dark progress-circular schema. /// @type {Map} /// @requires {function} extend /// @requires $_light-progress-circular -/// @see $default-palette +$_dark-progress-circular: extend($_light-progress-circular); -$_dark-progress-circular: extend($_light-progress-circular, ()); +/// Generates a dark fluent progress-circular schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_fluent-progress-circular +$_dark-fluent-progress-circular: extend($_fluent-progress-circular); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_radio.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_radio.scss index 7c2486480eb..cae0b01a81c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_radio.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_radio.scss @@ -11,5 +11,10 @@ /// @requires {function} extend /// @requires $_light-ripple /// @see $default-palette +$_dark-radio: extend($_light-radio); -$_dark-radio: extend($_light-radio, ()); +/// Generates a dark fluent radio schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_fluent-radio +$_dark-fluent-radio: extend($_fluent-radio); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_ripple.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_ripple.scss index d2dc5de9d1b..6de7e704481 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_ripple.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_ripple.scss @@ -11,6 +11,10 @@ /// @requires {function} extend /// @requires $_light-ripple /// @see $default-palette +$_dark-ripple: extend($_light-ripple); - -$_dark-ripple: extend($_light-ripple, ()); +/// Generates a dark fluent ripple schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_fluent-ripple +$_dark-fluent-ripple: extend($_fluent-ripple); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_slider.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_slider.scss index f8bc1804bb3..f62d0e52890 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_slider.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_slider.scss @@ -11,5 +11,25 @@ /// @requires {function} extend /// @requires $_light-slider /// @see $default-palette +$_dark-slider: extend($_light-slider); -$_dark-slider: extend($_light-slider, ()); +/// Generates a dark fluent slider schema. +/// @type {Map} +/// @property {map} track-color [igx-color: ('secondary', 700), hexrgba: #222] - The thumb border color. +/// @property {map} thumb-disabled-border-color [igx-color: ('grays', 400), hexrgba: #222] - The thumb border color when its disabled +/// @requires {function} extend +/// @requires $_fluent-slider +$_dark-fluent-slider: extend( + $_fluent-slider, + ( + track-color: ( + igx-color: ('grays', 700), + hexrgba: #222 + ), + + thumb-disabled-border-color: ( + igx-color: ('grays', 400), + hexrgba: #222 + ), + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_snackbar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_snackbar.scss index 0a69ca92015..72fe0ff1cf1 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_snackbar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_snackbar.scss @@ -11,4 +11,10 @@ /// @requires {function} extend /// @requires $_light-snackbar /// @see $default-palette -$_dark-snackbar: extend($_light-snackbar, ()); +$_dark-snackbar: extend($_light-snackbar); + +/// Generates a dark fluent snackbar schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_fluent-snackbar +$_dark-fluent-snackbar: extend($_fluent-snackbar); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_switch.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_switch.scss index 44b7c384575..58c531e6e81 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_switch.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_switch.scss @@ -6,16 +6,48 @@ /// @author Marin Popov //// -/// Generates a light switch schema. +/// Generates a base dark switch schema. /// @type {Map} /// @prop {map} thumb-disabled-color [igx-color: ('grays', 400), hexrgba: #000] - The color of the thumb when the switch is disabled. -/// @requires {function} extend -/// @requires $_light-switch /// @see $default-palette - -$_dark-switch: extend($_light-switch, ( +$_base-dark-switch: ( thumb-disabled-color: ( igx-color: ('grays', 400), hexrgba: #000 ) +); + +/// Generates a dark switch schema based on a mix of $_light-switch and $_base-dark-switch. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-switch +/// @requires $_base-dark-switch +/// @see $default-palette +$_dark-switch: extend($_light-switch, $_base-dark-switch); + +/// Generates a dark fluent switch schema based on a mix of $_fluent-switch and $_base-dark-switch. +/// @type {Map} +/// @property {map} border-color [igx-color: ('grays', 500)] - The border color of the switch. +/// @property {map} border-hover-color [igx-color: ('grays', 800)] - The border color of the switch on hover. +/// @property {map} border-disabled-color [igx-color: ('grays', 200)] - The border color of the disabled switch. +/// @property {map} track-disabled-color [igx-color: ('grays', 200)] - The color of the track when the switch is disabled. +/// @requires {function} extend +/// @requires $_fluent-switch +/// @requires $_base-dark-switch +$_dark-fluent-switch: extend($_fluent-switch, $_base-dark-switch, ( + border-color: ( + igx-color: ('grays', 500) + ), + + border-hover-color:( + igx-color: ('grays', 800) + ), + + border-disabled-color:( + igx-color: ('grays', 200) + ), + + track-disabled-color: ( + igx-color: ('grays', 200) + ) )); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_tabs.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_tabs.scss index 1f111f5c30e..3783410a071 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_tabs.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_tabs.scss @@ -6,15 +6,25 @@ /// @author Marin Popov //// -/// Generates a dark tabs schema. +/// Generates a base dark tabs schema. /// @type {Map} /// @prop {Color} item-background [#222] - The background color used for the tabs header. /// @prop {Color} button-background [#222] - The color used for the button background. +$_base-dark-tabs: ( + item-background: #222, + button-background: #222 +); + +/// Generates a dark tabs schema based on a mix of $_light-tabs and $_base-dark-tabs. +/// @type {Map} /// @requires {function} extend /// @requires $_light-tabs /// @see $default-palette +$_dark-tabs: extend($_light-tabs, $_base-dark-tabs); + +/// Generates a dark fluent tabs schema based on a mix of $_fluent-tabs and $_base-dark-tabs. +/// @type {Map} +/// @requires {function} extend +/// @requires $_fluent-tabs +$_dark-fluent-tabs: extend($_fluent-tabs, $_base-dark-tabs); -$_dark-tabs: extend($_light-tabs, ( - item-background: #222, - button-background: #222 -)); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_time-picker.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_time-picker.scss index 9caed7955c8..4356dada714 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_time-picker.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_time-picker.scss @@ -11,6 +11,11 @@ /// @requires {function} extend /// @requires $_light-time-picker /// @see $default-palette +$_dark-time-picker: extend($_light-time-picker); +/// Generates a dark fluent time-picker schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_fluent-time-picker +$_dark-fluent-time-picker: extend($_fluent-time-picker); -$_dark-time-picker: extend($_light-time-picker, ()); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_toast.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_toast.scss index ff1da5a1ba9..f9e89fb1890 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_toast.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_toast.scss @@ -11,5 +11,11 @@ /// @requires {function} extend /// @requires $_light-toast /// @see $default-palette +$_dark-toast: extend($_light-toast); + +/// Generates a dark fluent toast schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_fluent-toast +$_dark-fluent-toast: extend($_fluent-toast); -$_dark-toast: extend($_light-toast, ()); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_tooltip.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_tooltip.scss index b7c66c27bc4..92a2bf65db2 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_tooltip.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_tooltip.scss @@ -10,5 +10,10 @@ /// @requires {function} extend /// @requires $_light-tooltip /// @see $default-palette +$_dark-tooltip: extend($_light-tooltip); -$_dark-tooltip: extend($_light-tooltip, ()); +/// Generates a dark fluent tooltip schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_fluent-tooltip +$_dark-fluent-tooltip: extend($_fluent-tooltip); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_bottom-nav.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_bottom-nav.scss index 37e9ac9779b..01374d9a5ab 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_bottom-nav.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_bottom-nav.scss @@ -6,3 +6,8 @@ $_default-elevation-bottom-nav: ( elevation: 8 ); + +$_fluent-elevation-bottom-nav: ( + elevation: 1 +); + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_button-group.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_button-group.scss index cb60ce51191..4edac969a48 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_button-group.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_button-group.scss @@ -6,3 +6,8 @@ $_default-elevation-button-group: ( elevation: 2 ); + +$_fluent-elevation-button-group: ( + elevation: 0 +); + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_button.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_button.scss index 96c1d506dd1..76bc0b51dd9 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_button.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_button.scss @@ -12,3 +12,14 @@ $_default-elevation-button: ( fab-hover-elevation: 12, fab-focus-elevation: 12 ); + +$_fluent-elevation-button: ( + raised-resting-elevation: 0, + raised-hover-elevation: 0, + raised-focus-elevation: 0, + + fab-resting-elevation: 0, + fab-hover-elevation: 0, + fab-focus-elevation: 0 +); + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_card.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_card.scss index 73505458851..577c69b432c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_card.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_card.scss @@ -7,3 +7,9 @@ $_default-elevation-card: ( resting-elevation: 2, hover-elevation: 8 ); + +$_fluent-elevation-card: ( + resting-elevation: 0, + hover-elevation: 0 +); + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_chip.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_chip.scss index f4ad3d87445..95ffa05c7c0 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_chip.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_chip.scss @@ -1,8 +1,12 @@ //// /// @group schemas /// @access private -/// @author Simeon Simeonoff +/// @author Marin Popov //// $_default-elevation-chip: ( - ghost-elevation: 8, + ghost-elevation: 8 +); + +$_fluent-elevation-chip: ( + ghost-elevation: 2 ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_drop-down.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_drop-down.scss index 883fc1de469..b7a999a3e35 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_drop-down.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_drop-down.scss @@ -6,3 +6,8 @@ $_default-elevation-drop-down: ( elevation: 8 ); + +$_fluent-elevation-drop-down: ( + elevation: 4 +); + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_grid.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_grid.scss index b7e9b43ea68..052894f5664 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_grid.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_grid.scss @@ -7,3 +7,8 @@ $_default-elevation-grid: ( grid-elevation: 2, drag-elevation: 5, ); + +$_fluent-elevation-grid: ( + grid-elevation: 0, + drag-elevation: 1, +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_input-group.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_input-group.scss index 398bd4efa01..2aec15fec55 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_input-group.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_input-group.scss @@ -8,3 +8,10 @@ $_default-elevation-input-group: ( search-hover-elevation: 2, search-disabled-elevation: 0, ); + +$_fluent-elevation-input-group: ( + search-resting-elevation: 0, + search-hover-elevation: 0, + search-disabled-elevation: 0, +); + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_avatar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_avatar.scss index b75bc13fb96..a27aadc7247 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_avatar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_avatar.scss @@ -36,3 +36,9 @@ $_light-avatar: extend( image-background: transparent ) ); + +/// Generates a fluent avatar schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-avatar +$_fluent-avatar: extend($_light-avatar); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_badge.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_badge.scss index 6ca63ef53d9..b4bace03d70 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_badge.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_badge.scss @@ -35,3 +35,9 @@ $_light-badge: extend( ) ) ); + +/// Generates a fluent badge schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-badge +$_fluent-badge: extend($_light-badge); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_banner.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_banner.scss index 3b631d6610c..c841ae5fd03 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_banner.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_banner.scss @@ -13,7 +13,6 @@ /// @property {Map} banner-illustration-background [igx-color: ('grays', 100)] - The background color used for banner illustration. /// @property {Map} banner-illustration-color [igx-color: 'surface', text-contrast: (), rgba: .87] - The color used banner illustration. /// @see $default-palette - $_light-banner: extend( $_default-shape-banner, ( @@ -38,3 +37,9 @@ $_light-banner: extend( ) ) ); + +/// Generates a fluent banner schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-banner +$_fluent-banner: extend($_light-banner); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_bottom-nav.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_bottom-nav.scss index 823bfc47ede..98d233356b6 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_bottom-nav.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_bottom-nav.scss @@ -13,8 +13,10 @@ /// @prop {Color} idle-item-color [igx-color: ('grays', 700)] - The text-color used for the idle color. /// @prop {Color} active-item-color [igx-color: ('primary', 500)] - The text-color used for the active color. /// @prop {number} elevation [8] - The elevation level of the bar. +/// @requires {function} extend +/// @requires {map} $_default-shape-bottom-nav +/// @requires {map} $_default-elevation-bottom-nav /// @see $default-palette - $_light-bottom-nav: extend( $_default-shape-bottom-nav, $_default-elevation-bottom-nav, @@ -30,3 +32,10 @@ $_light-bottom-nav: extend( ), ) ); + +/// Generates a fluent bottom navigation schema. +/// @type {Map} +/// @requires {function} extend +/// @requires {map} $_light-bottom-nav +/// @requires {map} $_fluent-elevation-bottom-nav +$_fluent-bottom-nav: extend($_light-bottom-nav, $_fluent-elevation-bottom-nav); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button-group.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button-group.scss index d63386eafab..0eb5d004dc2 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button-group.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button-group.scss @@ -9,22 +9,25 @@ /// Generates a light button group schema. /// @type {Map} -/// @prop {Color} item-text-color [igx-color: ('grays', 700)]- The text color for button group items. +/// @prop {map} item-text-color [igx-color: ('grays', 700)]- The text color for button group items. /// @prop {Color} item-background [#fff] - The background color for button group items . /// @prop {Color} item-border-color [transparent] - The border color between button group items. /// -/// @prop {Color} item-hover-text-color [igx-color: ('grays', 800)] - The hover text color for button group items. -/// @prop {Color} item-hover-background [igx-color: ('grays', 400)] - The hover background color for button group items. +/// @prop {map} item-hover-text-color [igx-color: ('grays', 800)] - The hover text color for button group items. +/// @prop {map} item-hover-background [igx-color: ('grays', 400)] - The hover background color for button group items. /// -/// @prop {Color} disabled-text-color [igx-color: ('grays', 400)]- The text/icon color for a disabled item in the button group. -/// @prop {Color} disabled-background-color [igx-color: ('grays', 100)] - The background color for a disabled item in the button group. +/// @prop {map} disabled-text-color [igx-color: ('grays', 400)]- The text/icon color for a disabled item in the button group. +/// @prop {map} disabled-background-color [igx-color: ('grays', 100)] - The background color for a disabled item in the button group. /// -/// @prop {Color} item-selected-text-color [igx-color: ('grays', 800)]- The text color for a selected item in the button group. -/// @prop {Color} item-selected-background [igx-color: ('grays', 400)] - The background color for a selected item in the button group. -/// @prop {Color} item-selected-border-color [igx-color: ('grays', 600), rgba: .12] - The border color for a selected item from the button group. -/// @prop {Color} item-selected-hover-background [igx-color: ('grays', 500)] - The background color for a selected item in hover or focus state in the button group. +/// @prop {map} item-selected-text-color [igx-color: ('grays', 800)]- The text color for a selected item in the button group. +/// @prop {map} item-selected-background [igx-color: ('grays', 400)] - The background color for a selected item in the button group. +/// @prop {map} item-selected-border-color [igx-color: ('grays', 600), rgba: .12] - The border color for a selected item from the button group. +/// @prop {map} item-selected-hover-background [igx-color: ('grays', 500)] - The background color for a selected item in hover or focus state in the button group. /// @prop {Number} elevation [2] - The elevation level, between 0-24, to be used for the badge shadow. /// @prop {Number} border-radius [.2] - The border radius fraction, between 0-1 to be used for button-group component. +/// @requires {function} extend +/// @requires {map} $_default-shape-button-group +/// @requires {map} $_default-elevation-button-group /// @see $default-palette $_light-button-group: extend( $_default-shape-button-group, @@ -33,11 +36,8 @@ $_light-button-group: extend( item-background: #fff, item-border-color: ( - igx-color: ('grays', 300) - ), - - item-disabled-border: ( - igx-color: ('grays', 300) + igx-color: ('grays', 300), + hexrgba: #fff ), item-text-color: ( @@ -65,7 +65,8 @@ $_light-button-group: extend( ), item-selected-border-color: ( - igx-color: ('grays', 300) + igx-color: ('grays', 300), + hexrgba: #fff ), disabled-text-color: ( @@ -75,5 +76,59 @@ $_light-button-group: extend( disabled-background-color: ( igx-color: ('grays', 50) ), + + item-disabled-border: ( + igx-color: ('grays', 300), + hexrgba: #fff + ), + ) +); + +/// Generates a fluent button group schema. +/// @type {Map} +/// @prop {map} item-text-color [igx-color: ('grays', 900)]- The text color for button group items. +/// +/// @prop {map} item-hover-text-color [igx-color: ('primary', 200)] - The hover text color for button group items. +/// @prop {map} item-hover-background [transparent] - The hover background color for button group items. +/// @prop {map} item-selected-background [igx-color: ('grays', 100)] - The background color for a selected item in the button group. +/// @prop {map} item-selected-hover-background [igx-color: ('grays', 100)] - The background color for a selected item in hover or focus state in the button group. +/// @prop {map} item-selected-text-color [igx-color: ('primary', 200)]- The text color for a selected item in the button group. +/// @prop {Color} disabled-background-color [transparent] - The background color for a disabled item in the button group. +/// +/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the badge shadow. +/// @prop {Number} border-radius [2px] - The border radius fraction, between 0-1 to be used for button-group component. +/// +/// @requires {function} extend +/// @requires {map} $_light-button-group +/// @requires {map} $_fluent-shape-button-group +/// @requires {map} $_fluent-elevation-button-group +$_fluent-button-group: extend( + $_light-button-group, + $_fluent-shape-button-group, + $_fluent-elevation-button-group, + ( + item-text-color: ( + igx-color: ('grays', 900) + ), + + item-hover-text-color: ( + igx-color: ('primary', 200) + ), + + item-hover-background: transparent, + + item-selected-background: ( + igx-color: ('grays', 100) + ), + + item-selected-hover-background: ( + igx-color: ('grays', 100) + ), + + item-selected-text-color: ( + igx-color: ('primary', 200) + ), + + disabled-background-color: transparent, ) ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button.scss index 6e131806494..f08107bff49 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button.scss @@ -16,25 +16,38 @@ /// @prop {Map} flat-hover-text-color [igx-color: ('secondary', 500)] - The hover text color of a flat button. /// @prop {Map} flat-focus-background [igx-color: ('secondary', 400), rgba: .12] - The focus background color of a flat button. /// @prop {Map} flat-focus-text-color [igx-color: ('secondary', 500)] - The focus text color of a flat button. +/// @prop {Color} flat-icon-color [currentColor] - The color of a flat button icon. +/// @prop {Color} flat-hover-icon-color [currentColor] - The hover color of a flat button icon. +/// @prop {Color} flat-focus-icon-color [currentColor] - The focus color of a flat button icon. +/// /// @prop {Map} outlined-text-color [igx-color: ('secondary', 500)] - The idle text color of an outlined button. /// @prop {Map} outlined-outline-color [igx-color: ('grays', 300)] - The border color of an outlined button. /// @prop {Map} outlined-disabled-outline-color [igx-color: ('grays', 300)] - The border color of an outlined button. -/// @prop {Color} outlined-hover-background [transparent] - The hover background color of an outlined button. +/// @prop {Color} outlined-hover-background [igx-color: ('secondary', 500), rgba: .05] - The hover background color of an outlined button. /// @prop {Map} outlined-hover-text-color [igx-color: ('secondary', 500)] - The hover text color of an outlined button. /// @prop {Map} outlined-focus-background [igx-color: ('secondary', 400), rgba: .12] - The focus background color of an outlined button. /// @prop {Map} outlined-focus-text-color [igx-color: ('secondary', 500)] - The focus text color of an outlined button. +/// @prop {Color} outlined-icon-color [currentColor] - The color of a outlined button icon. +/// @prop {Color} outlined-hover-icon-color [currentColor] - The hover color of a outlined button icon. +/// @prop {Color} outlined-focus-icon-color [currentColor] - The focus color of a outlined button icon. +/// /// @prop {Map} raised-background [igx-color: ('secondary', 500)] - The background color of an raised button. /// @prop {Map} raised-text-color [igx-contrast-color: ('secondary', 500)] - The idle text color of a raised button. /// @prop {Map} raised-hover-background [igx-color: ('secondary', 300)] - The hover background of a raised button. /// @prop {Map} raised-hover-text-color [igx-contrast-color: ('secondary', 300)] - The hover text color of a raised button. /// @prop {Map} raised-focus-background [igx-color: ('secondary', 300)] - The focus background color of a raised button. /// @prop {Map} raised-focus-text-color [igx-contrast-color: ('secondary', 300)] - The focus text color of a raised button. +/// @prop {Color} raised-icon-color [currentColor] - The color of a raised button icon. +/// @prop {Color} raised-hover-icon-color [currentColor] - The hover color of a raised button icon. +/// @prop {Color} raised-focus-icon-color [currentColor] - The focus color of a raised button icon. +/// /// @prop {Map} fab-background [igx-color: ('secondary', 500)] - The background color of a floating action button. /// @prop {Map} fab-text-color [igx-contrast-color: ('secondary', 500)] - The text color of a floating action button. /// @prop {Map} fab-hover-background [igx-color: ('secondary', 300)] - The hover background color of a floating action button. /// @prop {Map} fab-hover-text-color [igx-contrast-color: ('secondary', 300)] - The hover text color of a floating action button. /// @prop {Map} fab-focus-background [igx-color: ('secondary', 300)] - The focus background color of floating action button. /// @prop {Map} fab-focus-text-color [igx-contrast-color: ('secondary', 300)] - The focus text color of a floating action button. +/// /// @prop {Map} icon-color [igx-color: ('grays', 800)] - The icon color of an icon button. /// @prop {Map} icon-hover-color [igx-color: ('grays', 800)] - The hover icon color of an icon button. /// @prop {Color} icon-background [transparent] - The background color of the an icon button. @@ -43,6 +56,7 @@ /// @prop {Map} icon-focus-background [igx-color: ('grays', 400] - The focus background color an icon button. /// @prop {Color} disabled-color [igx-color: ('grays', 400)] - The disabled text/icon color of a button. /// @prop {Color} disabled-background [igx-color: ('grays', 100)] - The disabled background color of raised, fab, or icon buttons. +/// /// @prop {Number} raised-resting-elevation [2] - The elevation level, between 0-24, to be used for the resting state. /// @prop {Number} raised-hover-elevation [4] - The elevation level, between 0-24, to be used for the hover state. /// @prop {Number} raised-focus-elevation [8] - The elevation level, between 0-24, to be used for the focus state. @@ -55,17 +69,34 @@ /// @prop {Number} outlined-border-radius [1] - The border radius fraction used for outlined button. /// @prop {Number} fab-border-radius [1] - The border radius fraction used for fab button. /// @prop {Number} icon-border-radius [1] - The border radius fraction used for icon button. +/// @requires {function} extend +/// @requires {map} $_default-shape-button +/// @requires {map} $_default-elevation-button /// @see $default-palette $_light-button: extend( $_default-shape-button, $_default-elevation-button, ( + variant: 'material', + flat-background: transparent, flat-text-color: ( igx-color: ('secondary', 500) ), + flat-icon-color: currentColor, + flat-hover-icon-color: currentColor, + flat-focus-icon-color: currentColor, + + raised-icon-color: currentColor, + raised-hover-icon-color: currentColor, + raised-focus-icon-color: currentColor, + + outlined-icon-color: currentColor, + outlined-hover-icon-color: currentColor, + outlined-focus-icon-color: currentColor, + flat-hover-background: ( igx-color: ('secondary', 500), rgba: .05 @@ -90,10 +121,6 @@ $_light-button: extend( igx-color: ('grays', 300) ), - outlined-disabled-outline-color: ( - igx-color: ('grays', 300) - ), - outlined-text-color: ( igx-color: ('secondary', 500) ), @@ -116,6 +143,10 @@ $_light-button: extend( igx-color: ('secondary', 500) ), + outlined-disabled-outline-color: ( + igx-color: ('grays', 300) + ), + raised-background: ( igx-color: ('secondary', 500) ), @@ -196,3 +227,162 @@ $_light-button: extend( ) ) ); + +/// Generates a fluent bottom navigation schema. +/// @type {Map} +/// @prop {Map} flat-text-color [igx-color: ('grays', 900)] - The idle text color of a flat button. +/// @prop {Map} flat-icon-color [igx-color: ('primary', 500)] - The color of a flat button icon. +/// @prop {Map} flat-hover-icon-color [igx-color: ('primary', 500)] - The hover color of a flat button icon. +/// @prop {Map} flat-focus-icon-color [igx-color: ('primary', 500)] - The focus color of a flat button icon. +/// +/// @prop {Color} flat-hover-background [transparent] - The hover background color of a flat button. +/// @prop {Map} flat-hover-text-color [igx-color: ('primary', 500)] - The hover text color of a flat button. +/// @prop {Map} flat-focus-background [igx-color:('grays', 100)] - The focus background color of a flat button. +/// @prop {Map} flat-focus-text-color [igx-color: ('primary', 500)] - The focus text color of a flat button. +/// +/// @prop {Map} outlined-outline-color [igx-color: ('grays', 800)] - The border color of an outlined button. +/// @prop {Map} outlined-text-color [igx-color: ('grays', 000)] - The idle text color of an outlined button. +/// @prop {Color} outlined-hover-background [igx-color: ('grays', 100)] - The hover background color of an outlined button. +/// @prop {Map} outlined-hover-text-color [igx-color: ('grays', 900)] - The hover text color of an outlined button. +/// @prop {Map} outlined-focus-background [igx-color: ('grays', 100)] - The focus background color of an outlined button. +/// @prop {Map} outlined-focus-text-color [igx-color: ('grays', 900)] - The focus text color of an outlined button. +/// +/// @prop {Map} raised-background [igx-color: ('primary', 500)] - The background color of an raised button. +/// @prop {Color} raised-text-color [#fff] - The idle text color of a raised button. +/// @prop {Map} raised-hover-background [igx-color: ('primary', 600)] - The hover background of a raised button. +/// @prop {Color} raised-hover-text-color [#fff] - The hover text color of a raised button. +/// @prop {Map} raised-focus-background [igx-color: ('primary', 600)] - The focus background color of a raised button. +/// @prop {Color} raised-focus-text-color [#fff] - The focus text color of a raised button. + +/// @prop {Map} fab-background [igx-color: ('primary', 500)] - The background color of a floating action button. +/// @prop {Color} fab-text-color [#fff] - The text color of a floating action button. +/// @prop {Map} fab-hover-background [igx-color: ('primary', 600)] - The hover background color of a floating action button. +/// @prop {Color} fab-hover-text-color [#fff] - The hover text color of a floating action button. +/// @prop {Map} fab-focus-background [igx-color: ('primary', 600))] - The focus background color of floating action button. +/// @prop {Color} fab-focus-text-color [#fff] - The focus text color of a floating action button. +/// +/// @prop {Map} icon-hover-background [igx-color: ('grays', 50)] - The hover background color of an icon button. +/// @prop {Map} icon-focus-background [igx-color: ('grays', 100)] - The focus icon color of an icon button. +/// +/// @prop {Number} raised-resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state. +/// @prop {Number} raised-hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state. +/// @prop {Number} raised-focus-elevation [0] - The elevation level, between 0-24, to be used for the focus state. +/// @prop {Number} fab-resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state. +/// @prop {Number} fab-hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state. +/// @prop {Number} fab-focus-elevation [0] - The elevation level, between 0-24, to be used for the focus state. +/// +/// @prop {Number} flat-border-radius [0] - The border radius fraction used for flat button. +/// @prop {Number} raised-border-radius [2px] - The border radius fraction used for raised button. +/// @prop {Number} outlined-border-radius [2px] - The border radius fraction used for outlined button. +/// @prop {Number} icon-border-radius [2px] - The border radius fraction used for icon button. +/// +/// @requires {function} extend +/// @requires {map} $_light-button +/// @requires {map} $_fluent-shape-button +/// @requires {map} $_fluent-elevation-button +$_fluent-button: extend( + $_light-button, + $_fluent-shape-button, + $_fluent-elevation-button, + ( + variant: 'fluent', + + flat-text-color: ( + igx-color: ('grays', 900) + ), + + flat-icon-color: ( + igx-color: ('primary', 500) + ), + + flat-hover-icon-color: ( + igx-color: ('primary', 500) + ), + + flat-focus-icon-color: ( + igx-color: ('primary', 500) + ), + + flat-hover-background: transparent, + + flat-hover-text-color: ( + igx-color: ('primary', 500) + ), + + flat-focus-background:( + igx-color:('grays', 100) + ), + + flat-focus-text-color: ( + igx-color: ('primary', 500) + ), + + outlined-outline-color: ( + igx-color: ('grays', 800) + ), + + outlined-text-color: ( + igx-color: ('grays', 900) + ), + + outlined-hover-background: ( + igx-color: ('grays', 100) + ), + + outlined-hover-text-color: ( + igx-color: ('grays', 900) + ), + + outlined-focus-background: ( + igx-color: ('grays', 100) + ), + + outlined-focus-text-color: ( + igx-color: ('grays', 900) + ), + + raised-background: ( + igx-color: ('primary', 500) + ), + + raised-text-color: #fff, + + raised-hover-background: ( + igx-color: ('primary', 600) + ), + + raised-hover-text-color: #fff, + + raised-focus-background: ( + igx-color: ('primary', 600) + ), + + raised-focus-text-color: #fff, + + fab-background: ( + igx-color: ('primary', 500) + ), + + fab-text-color: #fff, + + fab-hover-background: ( + igx-color: ('primary', 600) + ), + + fab-hover-text-color: #fff, + + fab-focus-background: ( + igx-color: ('primary', 600) + ), + + fab-focus-text-color: #fff, + + icon-hover-background: ( + igx-color: ('grays', 50) + ), + + icon-focus-background: ( + igx-color: ('grays', 100) + ), + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_calendar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_calendar.scss index f06e4d68b03..e96a953689e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_calendar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_calendar.scss @@ -26,14 +26,17 @@ /// @prop {Map} date-selected-background [igx-color: ('secondary', 500)] - The background color for the selected date. /// @prop {Map} date-selected-text-color [igx-contrast-color: ('secondary', 500)] - The text color for the selected date. /// @prop {Map} date-current-text-color [igx-color: ('secondary', 500)] - The text color for the current date. +/// @prop {Map} date-current-bg-color [igx-color: (transparent] - The background color for the current date. /// @prop {Map} date-hover-background [igx-color: ('grays', 200)] - The hover date background color. /// @prop {Map} date-special-background [igx-color: ('grays', 100)] - The background color used for special dates. /// @prop {Map} date-special-text-color [igx-color: ('grays', 900)] - The text color used for special dates. /// @prop {Map} date-disabled-text-color [igx-color: ('grays', 500), hexrgba: (), rgba: .6] - The text color for disabled dates. /// @prop {Map} date-disabled-background [igx-color: ('grays', 100), hexrgba: ()] - The background color for disabled dates. -/// @prop {Number} border-radius [1] - The border radius fraction, between 0-1 to be used for calendar. +/// @prop {Number} border-radius [.2] - The border radius fraction, between 0-1 to be used for calendar. /// @prop {Number} date-border-radius [1] - The border radius fraction, between 0-1 to be used for calendar. /// @prop {Number} month-border-radius [1] - The border radius fraction, between 0-1 to be used for calendar. +/// @requires {function} extend +/// @requires {map} $_default-shape-calendar /// @see $default-palette $_light-calendar: extend( $_default-shape-calendar, @@ -121,6 +124,10 @@ $_light-calendar: extend( igx-color: ('secondary', 500) ), + date-current-bg-color: transparent, + date-current-bg-hover-color: transparent, + date-current-bg-focus-color: transparent, + date-hover-background: ( igx-color: ('grays', 200) ), @@ -141,6 +148,42 @@ $_light-calendar: extend( date-disabled-background: ( igx-color: ('grays', 100), - ) + ), + ) +); + +/// Generates a fluent calendar schema. +/// @type {Map} +/// @prop {Color} date-current-text-color [#fff] - The text color for the current date. +/// @prop {Map} date-current-bg-color [igx-color: ('primary', 500)] - The background color for the current date. +/// @prop {map} date-selected-background [igx-color: ('primary', 100), rgba: .5, hexrgba: #fff] - The background color for the selected date. +/// @prop {Map} date-selected-text-color [igx-color: ('primary', 100)] - The text color for the selected date. +/// +/// @prop {Number} border-radius [0%] - The border radius fraction, between 0-1 to be used for calendar. +/// @prop {Number} date-border-radius [0%] - The border radius fraction, between 0-1 to be used for calendar. +/// @prop {Number} month-border-radius [0%] - The border radius fraction, between 0-1 to be used for calendar. +/// +/// @requires {function} extend +/// @requires {map} $_light-calendar +/// @requires {map} $_fluent-shape-calendar +$_fluent-calendar: extend( + $_light-calendar, + $_fluent-shape-calendar, + ( + date-current-text-color: #fff, + + date-current-bg-color: ( + igx-color: ('primary', 500) + ), + + date-selected-background: ( + igx-color: ('primary', 100), + rgba: .5, + hexrgba: #fff + ), + + date-selected-text-color: ( + igx-contrast-color: ('primary', 100) + ), ) ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_card.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_card.scss index 96d02b0710c..97f718658d8 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_card.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_card.scss @@ -18,6 +18,11 @@ /// @prop {Number} hover-elevation [8] - The elevation level, between 0-24, to be used for the hover state. /// @prop {Number} border-radius [.17] - The border radius fraction, between 0-1 to be used for card date. /// @prop {Map} outline-color [igx-color: ('grays', 400)] - The outline color of an outlined type card. +/// @prop {color} card-border-color [transparent] - The border color of an card. +/// +/// @requires {function} extend +/// @requires {map} $_default-shape-card +/// @requires {map} $_default-elevation-card /// @see $default-palette $_light-card: extend( $_default-shape-card, @@ -51,8 +56,37 @@ $_light-card: extend( rgba: .6 ), + card-border-color: transparent, + outline-color: ( igx-color: ('grays', 400) ) ) ); + +/// Generates a fluent card schema. +/// @type {Map} +/// @prop {Map} outline-color [igx-color: ('grays', 200)] - The outline color of an outlined type card. +/// @prop {map} card-border-color [ igx-color: ('grays', 200)] - The border color of an card. +/// +/// @prop {Number} resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state. +/// @prop {Number} hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state. +/// @prop {Number} border-radius [2px] - The border radius fraction, between 0-1 to be used for card date. +/// +/// @requires {function} extend +/// @requires {map} $_fluent-shape-card +/// @requires {map} $_fluent-elevation-card +$_fluent-card: extend( + $_light-card, + $_fluent-shape-card, + $_fluent-elevation-card, + ( + outline-color: ( + igx-color: ('grays', 200) + ), + + card-border-color: ( + igx-color: ('grays', 200) + ), + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_carousel.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_carousel.scss index 8ef3162090d..18e9b6e0ff0 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_carousel.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_carousel.scss @@ -16,7 +16,9 @@ /// @prop {Color} indicator-border-color [#fff] - The idle indicator border color. /// @prop {Color} indicator-active-border-color [#fff] - The active indicator border color. /// @prop {Number} border-radius [0] - The border radius fraction, between 0-1 to be used for carousel. -/// @see $default-palette +/// +/// @requires {function} extend +/// @requires {map} $_default-shape-carousel $_light-carousel: extend( $_default-shape-carousel, ( @@ -36,3 +38,10 @@ $_light-carousel: extend( indicator-active-border-color: #fff ) ); + +/// Generates a fluent carousel schema. +/// @type {Map} +/// @requires {function} extend +/// @requires {map} $_light-carousel +/// @see $default-palette +$_fluent-carousel: extend($_light-carousel, $_fluent-shape-carousel); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_checkbox.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_checkbox.scss index be1d8196397..08b4ed5e568 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_checkbox.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_checkbox.scss @@ -13,12 +13,17 @@ /// @prop {Map} empty-color [igx-color: ('grays', 600)] - The unchecked border color. /// @prop {Map} fill-color [igx-color: ('secondary', 500)] - The checked border and fill colors. /// @prop {Map} disabled-color [igx-color: ('grays', 400)] - The disabled border and fill colors. +/// @prop {Map} disabled-color-label [igx-color: ('grays', 400)] - The disabled color of the label. /// @prop {Number} border-radius [.2] - The border radius fraction, between 0-10 to be used for checkbox. -/// @prop {Number} border-radius [1] - The border radius fraction, between 0-24 to be used for checkbox ripple. +/// @prop {Number} border-radius-ripple [1] - The border radius fraction, between 0-24 to be used for checkbox ripple. +/// +/// @requires {function} extend +/// @requires {map} $_default-shape-checkbox /// @see $default-palette $_light-checkbox: extend( $_default-shape-checkbox, ( + variant: 'material', tick-color: #fff, label-color: ( @@ -35,6 +40,41 @@ $_light-checkbox: extend( disabled-color: ( igx-color: ('grays', 400) + ), + + disabled-color-label: ( + igx-color: ('grays', 400) ) ) ); + +/// Generates a fluent checkbox schema. +/// @type {Map} +/// @prop {Map} empty-color [igx-color: ('grays', 900)] - The unchecked border color. +/// @prop {Map} fill-color [igx-color: ('primary', 500)] - The checked border and fill colors. +/// @prop {Map} disabled-color [igx-color: ('grays', 300)] - The disabled border and fill colors. +/// @prop {Number} border-radius [2px] - The border radius fraction, between 0-10 to be used for checkbox. +/// @prop {Number} border-radius-ripple [2px] - The border radius fraction, between 0-24 to be used for checkbox ripple. +/// +/// @requires {function} extend +/// @requires {map} $_light-checkbox +/// @requires {map} $_fluent-shape-checkbox +$_fluent-checkbox: extend( + $_light-checkbox, + $_fluent-shape-checkbox, + ( + variant: 'fluent', + + empty-color: ( + igx-color: ('grays', 900) + ), + + fill-color: ( + igx-color: ('primary', 500) + ), + + disabled-color: ( + igx-color: ('grays', 300) + ), + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_chip.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_chip.scss index f43109616fd..34c570fa84f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_chip.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_chip.scss @@ -20,17 +20,26 @@ /// @prop {Map} selected-text-color [igx-color: ('grays', 700)] - The selected chip text color. /// @prop {Map} selected-background [igx-color: ('grays', 300)] - The selected chip background color. /// @prop {Color} selected-border-color [transparent] The selected chip border color. +/// @prop {Map} focus-background [igx-color: ('grays', 400)] The focused chip background color. +/// @prop {Map} focus-text-color [igx-color: ('grays', 700)] The focused chip text color. /// @prop {Map} hover-selected-text-color [igx-color: ('grays', 700)] - The selected chip hover text color. /// @prop {Map} hover-selected-background [igx-color: ('grays', 400)] - The selected chip hover background color. /// @prop {Map} hover-selected-border-color [transparent] - The selected chip hover border color. /// @prop {Map} focus-selected-text-color [igx-color: ('grays', 700)] - The selected chip text focus color. /// @prop {Map} focus-selected-background [igx-color: ('grays', 400)] - The selected chip focus background color. /// @prop {Map} focus-selected-border-color [transparent] - The selected chip focus border color. +/// @prop {Number} ghost-elevation [8] - The elevation level for the chip's ghost (dragging mode). Between 0-24. +/// +/// @requires {function} extend +/// @requires {map} $_default-shape-chip +/// @requires {map} $_default-elevation-chip /// @see $default-palette $_light-chip: extend( $_default-shape-chip, $_default-elevation-chip, ( + variant:'material', + text-color: ( igx-color: ('grays', 700) ), @@ -97,3 +106,73 @@ $_light-chip: extend( focus-selected-border-color: transparent ) ); + +/// Generates a fluent chip schema. +/// @type {Map} +/// @prop {Map} background [igx-color: ('grays', 100)] - The chip background color. +/// @prop {Color} ghost-background [#fff] - The chip ghost background color. +/// @prop {Map} hover-background [igx-color: ('grays', 200)] - The chip hover background color. +/// @prop {Map} selected-text-color [igx-contrast-color: ('primary', 500))] - The selected chip text color. +/// @prop {Map} selected-background [igx-color: ('primary', 500)] - The selected chip background color. +/// @prop {Map} focus-background [igx-color: ('primary', 500)] The focused chip background color. +/// @prop {Map} focus-text-color [igx-contrast-color: ('primary', 500)] The focused chip text color. +/// @prop {Map} hover-selected-text-color [igx-contrast-color: ('primary', 500)] - The selected chip hover text color. +/// @prop {Map} hover-selected-background [igx-color: ('primary', 500)] - The selected chip hover background color. +/// @prop {Map} focus-selected-text-color [igx-contrast-color: ('primary', 500)] - The selected chip text focus color. +/// @prop {Map} focus-selected-background [igx-color: ('primary', 500)] - The selected chip focus background color. +/// @prop {Number} ghost-elevation [2] - The elevation level for the chip's ghost (dragging mode). Between 0-24. +/// +/// @requires {function} extend +/// @requires {map} $_light-chip +/// @requires {map} $_fluent-shape-chip +/// @requires {map} $_fluent-elevation-chip +$_fluent-chip: extend( + $_light-chip, + $_fluent-shape-chip, + $_fluent-elevation-chip, + ( + variant:'fluent', + + background: ( + igx-color: ('grays', 100), + ), + + ghost-background: #fff, + + hover-background: ( + igx-color: ('grays', 200), + ), + + selected-text-color: ( + igx-contrast-color: ('primary', 500), + ), + + selected-background: ( + igx-color: ('primary', 500), + ), + + focus-background: ( + igx-color: ('primary', 500), + ), + + focus-text-color: ( + igx-contrast-color: ('primary', 500) + ), + + hover-selected-text-color: ( + igx-contrast-color: ('primary', 500) + ), + + hover-selected-background: ( + igx-color: ('primary', 500), + ), + + focus-selected-text-color: ( + igx-contrast-color: ('primary', 500) + ), + + focus-selected-background:( + igx-color: ('primary', 500), + ), + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_column-hiding.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_column-hiding.scss index 260a8efd101..8bfa76a2d99 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_column-hiding.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_column-hiding.scss @@ -11,12 +11,15 @@ /// @prop {Map} title-color [igx-color: ('primary', 500)]- The text color used for the title of the list. /// @prop {Color} background-color [transparent] - The background color of the panel. /// @see $default-palette -$_light-column-hiding: extend( - $_default-shape-column-hiding, - ( - background-color: transparent, - title-color: ( - igx-color: ('primary', 500) - ) +$_light-column-hiding: ( + background-color: transparent, + title-color: ( + igx-color: ('primary', 500) ) ); + +/// Generates a fluent column hiding schema. +/// @type {Map} +/// @requires {function} extend +/// @requires {map} $_light-column-hiding +$_fluent-column-hiding: extend($_light-column-hiding); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_combo.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_combo.scss index d435b7c9231..52385143630 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_combo.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_combo.scss @@ -11,26 +11,30 @@ /// @prop {Map} empty-list-background [igx-color: 'surface'] - The combo list background color. /// @prop {Map} search-separator-border-color [igx-color: 'surface', hexrgba: (), text-contrast: (), rgba: .12] - The combo search box separator color. /// @prop {Map} empty-list-placeholder-color [igx-color: 'surface', hexrgba: (), text-contrast: (), rgba: .26] - The combo placeholder text color. -/// @see $default-palette -$_light-combo: extend( - $_default-shape-combo, - ( - empty-list-background: ( - igx-color: 'surface' - ), +$_light-combo: ( + empty-list-background: ( + igx-color: 'surface' + ), - search-separator-border-color: ( - igx-color: 'surface', - hexrgba: (), - text-contrast: (), - rgba: .12 - ), + search-separator-border-color: ( + igx-color: 'surface', + hexrgba: (), + text-contrast: (), + rgba: .12 + ), - empty-list-placeholder-color: ( - igx-color: 'surface', - hexrgba: (), - text-contrast: (), - rgba: .26 - ) + empty-list-placeholder-color: ( + igx-color: 'surface', + hexrgba: (), + text-contrast: (), + rgba: .26 ) ); + +/// Generates a fluent combo schema. +/// @type {Map} +/// @requires {function} extend +/// @requires {map} $_light-combo +/// @see $default-palette +$_fluent-combo: extend($_light-combo); + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_dialog.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_dialog.scss index 8c744885708..ef2887ac2ae 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_dialog.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_dialog.scss @@ -14,11 +14,15 @@ /// @prop {Map} message-color [igx-color: 'surface', text-contrast: (), rgba: .6] - The dialog message text color. /// @prop {number} elevation [24] - The elevation level for the dialog. /// @prop {Number} border-radius [.1] - The border radius fraction, between 0-1 to be used for dialog component. -/// @see $default-palette +/// +/// @requires {function} extend +/// @requires {map} $_default-shape-dialog +/// @requires {map} $_default-elevation-dialog $_light-dialog: extend( $_default-shape-dialog, $_default-elevation-dialog, ( + variant: 'material', background: ( igx-color: 'surface' ), @@ -36,3 +40,18 @@ $_light-dialog: extend( ), ) ); + +/// Generates a fluent dialog schema. +/// @type {Map} +/// @prop {Number} border-radius [2px] - The border radius fraction, between 0-1 to be used for dialog component. +/// +/// @requires {function} extend +/// @requires {map} $_light-dialog +/// @requires {map} $_fluent-shape-dialog +$_fluent-dialog: extend( + $_light-dialog, + $_fluent-shape-dialog, + ( + variant: 'fluent', + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_divider.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_divider.scss index 6c954c65852..443eca01302 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_divider.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_divider.scss @@ -8,15 +8,16 @@ /// Generates a light divider schema. /// @type {Map} -/// /// @property {Map} color [igx-color: ('grays', 300)] - The color used for the divider. -/// /// @see $default-palette -$_light-divider: extend( - $_default-shape-divider, - ( - color: ( - igx-color: ('grays', 300) - ) +$_light-divider: ( + color: ( + igx-color: ('grays', 300) ) ); + +/// Generates a light divider schema. +/// @type {Map} +/// @requires {function} extend +/// @requires {map} $_light-divider +$_fluent-divider: extend($_light-divider); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_drop-down.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_drop-down.scss index ccda9d3100c..c66f3baf13e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_drop-down.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_drop-down.scss @@ -26,6 +26,10 @@ /// @prop {Map} disabled-item-text-color [igx-color: 'surface', text-contrast: (), rgba: .38] - The drop-down disabled item text color. /// @prop {Number} elevation [8] - The elevation level, between 0-24, to be used for the badge shadow. /// @prop {Number} border-radius [.2] - The border radius fraction, between 0-1 to be used for drop-down component. +/// +/// @requires {function} extend +/// @requires {map} $_default-shape-drop-down +/// @requires {map} $_default-elevation-drop-down /// @see $default-palette $_light-drop-down: extend( $_default-shape-drop-down, @@ -102,3 +106,49 @@ $_light-drop-down: extend( ), ) ); + +/// Generates a fluent drop-down schema. +/// @type {Map} +/// @prop {Map} selected-item-background [igx-color: ('grays', 100)] - The drop-down selected item background color. +/// @prop {Map} selected-item-text-color [igx-contrast-color: ('grays', 100)] - The drop-down selected item text color. +/// @prop {Map} selected-hover-item-background [igx-color: ('grays', 200)] - The drop-down selected item hover background color. +/// @prop {Map} selected-hover-item-text-color [igx-contrast-color: ('grays', 200)] - The drop-down selected item hover text color. +/// @prop {Map} selected-focus-item-background [igx-color: ('grays', 200)] - The drop-down selected item focus background color. +/// @prop {Map} selected-focus-item-text-color [igx-contrast-color: ('grays', 200)] - The drop-down selected item focus text color. +/// @prop {Number} elevation [4] - The elevation level, between 0-24, to be used for the badge shadow. +/// @prop {Number} border-radius [2px] - The border radius fraction, between 0-1 to be used for drop-down component. +/// +/// @requires {function} extend +/// @requires {map} $_light-drop-down +/// @requires {map} $_fluent-shape-drop-down +/// @requires {map} $_fluent-elevation-drop-down +$_fluent-drop-down: extend( + $_light-drop-down, + $_fluent-shape-drop-down, + $_fluent-elevation-drop-down, + ( + selected-item-background: ( + igx-color: ('grays', 100) + ), + + selected-item-text-color: ( + igx-contrast-color: ('grays', 100) + ), + + selected-hover-item-background: ( + igx-color: ('grays', 200) + ), + + selected-hover-item-text-color: ( + igx-contrast-color: ('grays', 200) + ), + + selected-focus-item-background: ( + igx-color: ('grays', 200) + ), + + selected-focus-item-text-color: ( + igx-contrast-color: ('grays', 200) + ), + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_expansion-panel.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_expansion-panel.scss index e0c21aea9c3..5d5b0e43dd2 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_expansion-panel.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_expansion-panel.scss @@ -17,6 +17,9 @@ /// @prop {Map} body-color [igx-color: ('grays', 800)] - The panel body text color. /// @prop {Map} disabled-color [igx-color: ('grays', 500)] - The panel disabled text color. /// @prop {Number} border-radius [0] - The border radius fraction, between 0-1 to be used for expansion-panel. +/// +/// @requires {function} extend +/// @requires {Map} $_default-shape-expansion-panel /// @see $default-palette $_light-expansion-panel: extend( $_default-shape-expansion-panel, @@ -49,3 +52,9 @@ $_light-expansion-panel: extend( ) ) ); + +/// Generates a fluent expansion panel schema. +/// @type {Map} +/// @requires {function} extend +/// @requires {Map} $_light-expansion-panel +$_fluent-expansion-panel: extend($_light-expansion-panel); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-filtering.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-filtering.scss index e285d056789..b6849b54744 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-filtering.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-filtering.scss @@ -20,6 +20,8 @@ /// @prop {Color} toggle-active-background [igx-color: ('secondary', 500)] - The active toggle background color. /// @prop {Color} menu-text-color [igx-color: ('grays', 900)] - The idle menu text color. /// @prop {Color} menu-button-text-color [igx-color: ('secondary', 500)] - The menu button text color. +/// @requires {function} extend +/// @requires {map} $_default-shape-grid-filtering /// @see $default-palette $_light-grid-filtering: extend( $_default-shape-grid-filtering, @@ -56,3 +58,17 @@ $_light-grid-filtering: extend( ) ) ); + +/// Generates a fluent grid-filtering schema. +/// @type {Map} +/// @prop {Map} menu-background [igx-color: 'surface'] - The idle menu background color. +/// @requires {function} extend +/// @requires {map} $_default-shape-grid-filtering +$_fluent-grid-filtering: extend( + $_light-grid-filtering, + ( + menu-background: ( + igx-color: 'surface' + ), + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-pagination.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-pagination.scss index c495b23fbf0..e0d0d1c9685 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-pagination.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-pagination.scss @@ -12,18 +12,35 @@ /// @prop {Map} background-color [igx-color: ('grays', 100), hexrgba: #fff] - The background color of the paging panel. /// @prop {Map} border-color [igx-color: ('grays', 400)] - The border color of the paging panel. /// @see $default-palette -$_light-grid-pagination: extend( - $_default-shape-grid-pagination, - ( - text-color: currentColor, +$_light-grid-pagination: ( + text-color: currentColor, + + background-color: ( + igx-color: ('grays', 100), + hexrgba: #fff + ), + + border-color: ( + igx-color: ('grays', 400) + ) +); +/// Generates a light avatar schema. +/// @type {Map} +/// @prop {Map} background-color [igx-color: 'surface'] - The background color of the paging panel. +/// @prop {Map} border-color [igx-color: ('grays', 100), hexrgba: #fff] - The border color of the paging panel. +/// @requires {function} extend +/// @requires {map} $_light-grid-pagination +$_fluent-grid-pagination: extend( + $_light-grid-pagination, + ( background-color: ( - igx-color: ('grays', 100), - hexrgba: #fff + igx-color: 'surface' ), border-color: ( - igx-color: ('grays', 400) + igx-color: ('grays', 100), + hexrgba: #fff ) ) ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-summary.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-summary.scss index 07189784f4b..b771d181f28 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-summary.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-summary.scss @@ -12,12 +12,12 @@ /// @property {Color} background-color [inherit] - The summaries background color is inherited form igx-grid__tfoot. /// @property {Color} focus-background-color [igx-color] - The background color when a summary item is on focus. /// @property {map} label-color [igx-color: ('primary', 500)] - The summaries label color. +/// @property {map} label-hover-color [igx-color: ('primary', 700)] - The summaries hover label color. /// @property {Color} result-color [currentColor] - The summaries value/result color. /// @property {map} border-color [igx-color: ('grays', 400)] - The summaries border color. /// @property {String} pinned-border-width [2px] - The border width of the summary panel. /// @property {String} pinned-border-style [solid] - The border style of the summary panel. /// @property {map} pinned-border-color [igx-color: ('grays', 400)] - The border color of the summary panel. -/// @property {map} label-hover-color [igx-color: ('primary', 700)] - The summaries hover label color. /// /// @see $default-palette @@ -34,7 +34,12 @@ $_light-grid-summary: extend( igx-color: ('primary', 500) ), + label-hover-color: ( + igx-color: ('primary', 700) + ), + result-color: currentColor, + border-color: ( igx-color: ('grays', 400) ), @@ -44,9 +49,32 @@ $_light-grid-summary: extend( pinned-border-color: ( igx-color: ('grays', 400) ), + ) +); - label-hover-color: ( - igx-color: ('primary', 700) - ) +/// Generates a fluent grid-summary schema. +/// @type {Map} +/// +/// @property {Color} background-color [ igx-color: ('surface')] - The summaries background color is inherited form igx-grid__tfoot +/// @property {map} border-color [ igx-color: ('grays', 100)] - The summaries border color. +/// @property {map} pinned-border-color [igx-color: ('grays', 300), hexrgba: #fff] - The border color of the summary panel. +/// +/// @requires {function} extend +/// @requires {map} $_light-grid-summary +$_fluent-grid-summary: extend( + $_light-grid-summary, + ( + background-color: ( + igx-color: ('surface') + ), + + border-color: ( + igx-color: ('grays', 100) + ), + + pinned-border-color: ( + igx-color: ('grays', 300), + hexrgba: #fff + ), ) ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-toolbar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-toolbar.scss index 69e4c67a18b..ea3b8632e5f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-toolbar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-toolbar.scss @@ -26,61 +26,79 @@ /// /// @see $default-palette -$_light-grid-toolbar: extend( - $_default-shape-grid-toolbar, - ( - background-color: ( - igx-color: ('grays', 50) - ), +$_light-grid-toolbar: ( + background-color: ( + igx-color: ('grays', 50) + ), - title-text-color : ( - igx-color: ('grays', 600) - ), + title-text-color : ( + igx-color: ('grays', 600) + ), - button-background: ( - igx-color: ('grays', 100) - ), + button-background: ( + igx-color: ('grays', 100) + ), - button-text-color: ( - igx-color: ('grays', 600) - ), + button-text-color: ( + igx-color: ('grays', 600) + ), - button-hover-background: ( - igx-color: ('grays', 100) - ), + button-hover-background: ( + igx-color: ('grays', 100) + ), - button-hover-text-color: ( - igx-color: ('grays', 600) - ), + button-hover-text-color: ( + igx-color: ('grays', 600) + ), - button-focus-background: ( - igx-color: ('grays', 100) - ), + button-focus-background: ( + igx-color: ('grays', 100) + ), - button-focus-text-color: ( - igx-color: ('grays', 600) - ), + button-focus-text-color: ( + igx-color: ('grays', 600) + ), - dropdown-background: #fff, + dropdown-background: #fff, - item-text-color: ( - igx-color: ('grays', 600) - ), + item-text-color: ( + igx-color: ('grays', 600) + ), - item-hover-background: ( - igx-color: ('grays', 100) - ), + item-hover-background: ( + igx-color: ('grays', 100) + ), - item-hover-text-color: ( - igx-color: ('grays', 600) - ), + item-hover-text-color: ( + igx-color: ('grays', 600) + ), + + item-focus-background: ( + igx-color: ('grays', 100) + ), + + item-focus-text-color: ( + igx-color: ('grays', 600) + ) +); - item-focus-background: ( - igx-color: ('grays', 100) +/// Generates a fluent grid-toolbar schema. +/// @type {Map} +/// +/// @property {map} background-color [igx-color: 'surface'] - The toolbar background color. +/// @property {map} button-hover-text-color [igx-color: ('primary', 500)] - The toolbar button hover text color. +/// +/// @requires {function} extend +/// @requires {map} $_light-grid-toolbar +$_fluent-grid-toolbar: extend( + $_light-grid-toolbar, + ( + background-color: ( + igx-color: 'surface' ), - item-focus-text-color: ( - igx-color: ('grays', 600) - ) + button-hover-text-color: ( + igx-color: ('primary', 500) + ), ) ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss index 54e08e93fb8..039642195c5 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss @@ -29,6 +29,7 @@ /// @prop {Color} row-even-text-color [inherit] - The text color of even rows. /// @prop {Map} row-selected-background [igx-color: ('secondary', 50), hexrgba: #fff] - The selected row background color. /// @prop {Map} row-selected-text-color [igx-contrast-color: ('secondary', 50)] - The selected row text color. +/// @prop {Map} row-selected-hover-background [igx-color: ('secondary', 50), hexrgba: #fff] - The selected row hover background. /// @prop {Map} row-hover-background [igx-color: ('grays', 100), hexrgba: #fff] - The hover row background color. /// @prop {Map} row-hover-text-color [igx-contrast-color: ('grays', 200)] - The hover row text color. /// @prop {Map} row-border-color [igx-color: ('grays', 300)] - The row bottom border color. @@ -71,12 +72,20 @@ /// @prop {Map} row-ghost-background [igx-color: ('primary', 50))] - The background color of the dragged row. /// @prop {number} grid-elevation [2] - The elevation used for the grid. /// @prop {number} drag-elevation [5] - The elevation used for movable elements (ex. column header). -/// @prop {Number} border-radius [1] - The border radius fraction, between 0-1 to be used for card date. +/// @prop {Number} drop-area-border-radius [1] - The border radius fraction, between 0-1 to be used for card date. +/// +/// @requires {function} extend +/// @requires {map} $_default-shape-grid +/// @requires {map} $_default-elevation-grid /// @see $default-palette $_light-grid: extend( $_default-shape-grid, $_default-elevation-grid, ( + variant: 'material', + + grid-border-color: transparent, + header-background: ( igx-color: ('grays', 100), hexrgba: #fff @@ -126,6 +135,11 @@ $_light-grid: extend( hexrgba: #fff ), + row-selected-hover-background: ( + igx-color: ('secondary', 50), + hexrgba: #fff + ), + row-selected-text-color: ( igx-contrast-color: ('secondary', 50) ), @@ -311,3 +325,121 @@ $_light-grid: extend( ) ) ); + +/// Generates a fluent grid schema. +/// @type {Map} +/// @prop {Map} grid-border-color [igx-color: ('grays', 100)] - The grid border color only. +/// @prop {Map} header-background [igx-color: 'surface'] - The table header background color. +/// @prop {Map} header-border-color [igx-color: ('grays', 100)] - The color used for header borders. +/// @prop {Map} row-selected-hover-background [igx-color: ('grays', 200), hexrgba: #fff] - The selected row hover background. +/// @prop {Map} row-border-color [igx-color: ('grays', 100)] - The row bottom border color. +/// @prop {Map} pinned-border-color [igx-color: ('grays', 200)] - The color of the pinned border. +/// @prop {Map} cell-active-border-color [igx-color: ('primary', 100), hexrgba: #fff] - The active(focused) cell border color. +/// @prop {Map} cell-selected-background [igx-color: ('grays', 300), hexrgba: #fff] - The selected cell background color. +/// @prop {Map} grouparea-background [igx-color: 'surface'] - The grid group area background color. +/// @prop {Map} group-row-background [igx-color: ('grays', 50), hexrgba: #fff] - The grid group row background color. +/// @prop {Map} group-row-selected-background [igx-color: ('grays', 100), hexrgba: #fff] - The drop area background on drop color. +/// @prop {Map} filtering-header-background [igx-color: ('grays', 100), hexrgba: #fff] - The background color of the filtered column header. +/// @prop {Map} filtering-header-text-color [igx-color: ('grays', 900), hexrgba: #fff] - The text color color of the filtered column header. +/// @prop {Map} filtering-row-background [igx-color: ('grays', 100), hexrgba: #fff] - The background color of the filtering row. +/// @prop {Map} root-summaries-background [igx-color: 'surface'] - The background color of the summary groups located the footer. +/// @prop {Map} row-ghost-background [igx-color: 'surface'] - The background color of the dragged row. +/// @prop {number} grid-elevation [0] - The elevation used for the grid. +/// @prop {number} drag-elevation [1] - The elevation used for movable elements (ex. column header). +/// @prop {Number} drop-area-border-radius [2px] - The border radius fraction, between 0-1 to be used drop-area. +/// +/// @requires {function} extend +/// @requires {map} $_light-grid +/// @requires {map} $_fluent-elevation-grid +$_fluent-grid: extend( + $_light-grid, + $_fluent-shape-grid, + $_fluent-elevation-grid, + ( + variant: 'fluent', + + grid-border-color: ( + igx-color: ('grays', 100) + ), + + header-background: ( + igx-color: 'surface' + ), + + header-border-color: ( + igx-color: ('grays', 100) + ), + + row-selected-hover-background: ( + igx-color: ('grays', 200), + hexrgba: #fff + ), + + row-border-color: ( + igx-color: ('grays', 100) + ), + + pinned-border-color: ( + igx-color: ('grays', 200) + ), + + cell-active-border-color: ( + igx-color: ('primary', 100), + hexrgba: #fff + ), + + cell-selected-background: ( + igx-color: ('grays', 300), + hexrgba: #fff + ), + + grouparea-background: ( + igx-color: 'surface' + ), + + group-row-background: ( + igx-color: ('grays', 50), + hexrgba: #fff + ), + + group-row-selected-background: ( + igx-color: ('grays', 100), + hexrgba: #fff + ), + + filtering-header-background: ( + igx-color: ('grays', 100), + hexrgba: #fff + ), + + filtering-header-text-color: ( + igx-color: ('grays', 900), + hexrgba: #fff + ), + + filtering-row-background: ( + igx-color: ('grays', 100), + hexrgba: #fff + ), + + header-text-color: ( + igx-color: ('grays', 900), + hexrgba: #fff + ), + + row-selected-background: ( + igx-color: ('grays', 100), + hexrgba: #fff + ), + + root-summaries-background: ( + igx-color: 'surface' + ), + + row-ghost-background: ( + igx-color: 'surface' + ), + ) +); + + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_icon.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_icon.scss index 19e556b45bf..939bded8a84 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_icon.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_icon.scss @@ -15,13 +15,15 @@ /// /// @see $default-palette -$_light-icon: extend( - $_default-shape-icon, - ( - color: currentColor, - - size: rem(24px), - - disabled-color: currentColor - ) +$_light-icon: ( + color: currentColor, + size: rem(24px), + disabled-color: currentColor ); + +/// Generates a fluent icon schema. +/// @type {Map} +/// +/// @requires {function} extend +/// @requires {map} $_light-icon +$_fluent-icon: extend($_light-icon); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss index 4bd61355520..c6dee81a4d2 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss @@ -85,6 +85,8 @@ /// @property {Map} igx-toast [$_light-toast] /// @property {Map} igx-tooltip [$_light-tooltip] + +/// The default light schema for all components. $light-schema: ( igx-avatar: $_light-avatar, igx-badge: $_light-badge, @@ -126,3 +128,46 @@ $light-schema: ( igx-toast: $_light-toast, igx-tooltip: $_light-tooltip ); + + +$light-fluent-schema: ( + igx-avatar: $_fluent-avatar, + igx-badge: $_fluent-badge, + igx-banner: $_fluent-banner, + igx-bottom-nav: $_fluent-bottom-nav, + igx-button: $_fluent-button, + igx-button-group: $_fluent-button-group, + igx-calendar: $_fluent-calendar, + igx-card: $_fluent-card, + igx-carousel: $_fluent-carousel, + igx-checkbox: $_fluent-checkbox, + igx-chip: $_fluent-chip, + igx-column-hiding: $_fluent-column-hiding, + igx-combo: $_fluent-combo, + igx-dialog: $_fluent-dialog, + igx-divider: $_fluent-divider, + igx-drop-down: $_fluent-drop-down, + igx-expansion-panel: $_fluent-expansion-panel, + igx-grid: $_fluent-grid, + igx-grid-filtering: $_fluent-grid-filtering, + igx-grid-paginator: $_fluent-grid-pagination, + igx-grid-summary: $_fluent-grid-summary, + igx-grid-toolbar: $_fluent-grid-toolbar, + igx-icon: $_fluent-icon, + igx-input-group: $_fluent-input-group, + igx-list: $_fluent-list, + igx-navbar: $_fluent-navbar, + igx-navdrawer: $_fluent-navdrawer, + igx-overlay: $_fluent-overlay, + igx-linear-bar: $_fluent-progress-linear, + igx-circular-bar: $_fluent-progress-circular, + igx-radio: $_fluent-radio, + igx-ripple: $_fluent-ripple, + igx-slider: $_fluent-slider, + igx-snackbar: $_fluent-snackbar, + igx-switch: $_fluent-switch, + igx-tabs: $_fluent-tabs, + igx-time-picker: $_fluent-time-picker, + igx-toast: $_fluent-toast, + igx-tooltip: $_fluent-tooltip +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss index 16587e41aed..c7b0e53b858 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss @@ -19,12 +19,18 @@ /// @prop {map} filled-secondary-color [igx-color: ('grays', 600)] - The label color in the filled state. /// @prop {map} focused-secondary-color [ igx-color: ('primary', 500)] - The label color in the focused state. /// +/// @prop {map} border-color [igx-color: ('grays', 600)] - The border color for inputs with border. + /// @prop {map} idle-bottom-line-color [igx-color: ('grays', 600)] - The bottom line and border colors in the idle state. /// @prop {map} hover-bottom-line-color [igx-color: ('grays', 900)] - The bottom line and border colors in the hover state. /// @prop {map} focused-bottom-line-color [igx-color: ('primary', 500)] - The bottom line and border colors in the focused state. /// @prop {map} interim-bottom-line-color [igx-color: ('primary', 500), rgba: .12] - The bottom line and border colors during the to-focused transition. /// @prop {map} disabled-bottom-line-color [igx-color: ('grays', 500)] - The bottom line and border colors in the disabled state. -/// @prop {map} disabled-border-color [igx-color: ('grays', 500), rgba: .06] - The disabled border color for input groups of type border. +/// +/// @prop {map} border-color [igx-color: ('grays', 600)] - The border color for input groups of type border and fluent. +/// @prop {map} hover-border-color [igx-color: ('grays', 600)] - The hover input border for input groups of type border and fluent. +/// @prop {map} focused-border-color [igx-color: ('primary', 500)] - The focused input border color for input groups of type border and fluent. +/// @prop {map} disabled-border-color [igx-color: ('grays', 500), rgba: .06] - The disabled border color for input groups of type border and fluent. /// /// @prop {map} box-background [igx-color: ('grays', 200)] - The background color of an input group of type box. /// @prop {map} box-disabled-background [igx-color: ('grays', 100)] - The background color of an input group of type box in the disabled state. @@ -47,17 +53,44 @@ /// @prop {Number} border-border-radius [.2] - The border radius fraction, between 0-1 to be used for border input . /// @prop {Number} search-border-radius [.2] - The border radius fraction, between 0-1 to be used for search input . /// +/// @requires {function} extend +/// @requires {map} $_default-shape-input-group +/// @requires {map} $_default-elevation-input-group /// @see $default-palette - - $_light-input-group: extend( $_default-shape-input-group, $_default-elevation-input-group, ( + variant: 'material', + + input-prefix-color: ( + igx-color: ('grays', 600) + ), + + input-prefix-background: transparent, + + input-suffix-color: ( + igx-color: ('grays', 600) + ), + + input-suffix-background: transparent, + idle-text-color: ( igx-color: ('grays', 600) ), + border-color: ( + igx-color: ('grays', 600) + ), + + hover-border-color: ( + igx-color: ('grays', 900) + ), + + focused-border-color: ( + igx-color: ('primary', 500) + ), + filled-text-color: ( igx-color: ('grays', 900) ), @@ -146,6 +179,76 @@ $_light-input-group: extend( disabled-placeholder-color: ( igx-color: ('grays', 400) - ) + ), + ) +); + +/// Generates a fluent input-group schema. +/// @type {Map} +/// +/// @prop {map} border-color [igx-color: ('grays', 500)] - The border color for input groups of type border and fluent. +/// @prop {map} hover-border-color [igx-color: ('grays', 800)] - The hover input border for input groups of type border and fluent. +/// @prop {map} focused-border-color [igx-color: ('grays', 500)] - The focused input border color for input groups of type border and fluent. +/// @prop {map} disabled-border-color [igx-color: ('grays', 500)] - The disabled border color for input groups of type border and fluent. +/// +/// @prop {map} border-disabled-background [igx-color: ('grays', 100)] - The background color of an input group of type border in the disabled state. +/// +/// @prop {Color} search-disabled-background [igx-color: ('grays', 100)] - The background color of an input group of type search in the disabled state. +/// +/// @prop {Color} input-prefix-background [igx-color: ('grays', 100), hexrgba: #fff] - The background color of an input prefix of type line, box, border and fluent. +/// @prop {Color} input-suffix-background [ igx-color: ('grays', 100), hexrgba: #fff] - The background color of an input suffix of type line, box, border and fluent. +/// +/// @prop {Number} search-resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state of the search input. +/// @prop {Number} search-hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state of the search input. +/// @prop {Number} search-disabled-elevation [0] - The elevation level, between 0-24, to be used for the disabled state of the search input. +/// +/// @prop {Number} box-border-radius [2px] - The border radius fraction, between 0-1 to be used for box input . +/// @prop {Number} border-border-radius [2px] - The border radius fraction, between 0-1 to be used for border input . +/// @prop {Number} search-border-radius [2px] - The border radius fraction, between 0-1 to be used for search input . +/// +/// @requires {function} extend +/// @requires {map} $_light-input-group +/// @requires {map} $_fluent-shape-input-group +/// @requires {map} $_fluent-elevation-input-group +$_fluent-input-group: extend( + $_light-input-group, + $_fluent-shape-input-group, + $_fluent-elevation-input-group, + ( + variant: 'fluent', + + border-color: ( + igx-color: ('grays', 500) + ), + + hover-border-color: ( + igx-color: ('grays', 800) + ), + + focused-border-color: ( + igx-color: ('grays', 500) + ), + + disabled-border-color: ( + igx-color: ('grays', 500) + ), + + border-disabled-background: ( + igx-color: ('grays', 100), + ), + + search-disabled-background: ( + igx-color: ('grays', 100) + ), + + input-prefix-background: ( + igx-color: ('grays', 100), + hexrgba: #fff + ), + + input-suffix-background: ( + igx-color: ('grays', 100), + hexrgba: #fff + ), ) ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_list.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_list.scss index 1235bfb4fc8..5c38483fb6c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_list.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_list.scss @@ -41,7 +41,6 @@ /// @prop {Number} item-border-radius [0] - The border radius fraction, between 0-1 to be used for list item. /// /// @see $default-palette - $_light-list: extend( $_default-shape-list, ( @@ -114,3 +113,9 @@ $_light-list: extend( item-thumbnail-color-active: currentColor ) ); + +/// Generates a fluent schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-list +$_fluent-list: extend($_light-list); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navbar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navbar.scss index 56d36616f1d..803a7eaacf3 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navbar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navbar.scss @@ -17,7 +17,6 @@ /// @prop {Number} $elevation [4] - The navbar elevation shadow level. /// /// @see $default-palette - $_light-navbar: extend( $_default-shape-navbar, $_default-elevation-navbar, @@ -37,5 +36,11 @@ $_light-navbar: extend( hover-icon-color: ( igx-contrast-color: ('primary', 500) ), - ), + ) ); + +/// Generates a fluent navbar schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-navbar +$_fluent-navbar: extend($_light-navbar); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navdrawer.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navdrawer.scss index 9799301d2d8..4dad5d69008 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navdrawer.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navdrawer.scss @@ -26,7 +26,6 @@ /// @prop {Number} item-border-radius [.16667] - The border radius fraction, between 0 - 24 to be used for the navdrawer item. /// /// @see $default-palette - $_light-navdrawer: extend( $_default-shape-navdrawer, $_default-elevation-navdrawer, @@ -87,3 +86,9 @@ $_light-navdrawer: extend( ), ) ); + +/// Generates a fluent navdrawer schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-navdrawer +$_fluent-navdrawer: extend($_light-navdrawer); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_overlay.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_overlay.scss index 19521b4a763..74d72720111 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_overlay.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_overlay.scss @@ -8,9 +8,9 @@ /// Generates a light overlay schema. /// @type {Map} -/// /// @property {map} background-color [igx-color: ('grays', 500)] - The background color used for modal overlays. -/// +/// @requires {function} extend +/// @requires $_fluent-overlay /// @see $default-palette $_light-overlay: extend( $_default-shape-overlay, @@ -20,3 +20,15 @@ $_light-overlay: extend( ) ) ); + +/// Generates a fluent overlay schema. +/// @type {Map} +/// @property {Color} background-color [rgba(255, 255, 255, .4)] - The background color used for modal overlays. +/// @requires {function} extend +/// @requires $_light-overlay +$_fluent-overlay: extend( + $_light-overlay, + ( + background-color: rgba(255, 255, 255, .4) + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_progress.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_progress.scss index d89953d1fb5..0bba2148ec7 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_progress.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_progress.scss @@ -19,7 +19,6 @@ /// @property {map} text-color [igx-color: ('grays', 700)] - The track value text color. /// /// @see $default-palette - $_light-progress-linear: extend( $_default-shape-progress, ( @@ -55,15 +54,18 @@ $_light-progress-linear: extend( ) ); +/// Generates a fluent progress-linear schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-progress-linear +$_fluent-progress-linear: extend($_light-progress-linear); + /// Generates a light progress-circular schema. /// @type {Map} /// /// @property {map} base-circle-color [igx-color: ('grays', 300)] - The base circle fill color. /// @property {map} progress-circle-color [igx-color: ('primary', 500)] - The progress circle fill color. /// @property {map} text-color [igx-color: ('grays', 700)] - The value text color. -/// -/// @see $default-palette - $_light-progress-circular: extend( $_default-shape-progress, ( @@ -80,3 +82,9 @@ $_light-progress-circular: extend( ) ) ); + +/// Generates a fluent progress-circular schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-progress-circular +$_fluent-progress-circular: extend($_light-progress-circular); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_radio.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_radio.scss index 24305a0af63..e23f094e021 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_radio.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_radio.scss @@ -9,18 +9,25 @@ /// Generates a light radio schema. /// @type {Map} /// +/// @property {map} hover-color [igx-color: ('grays', 900)] - The text color used for the label text. +/// @property {map} fill-hover-border-color [igx-color: ('grays', 900)] - The text color used for the label text. /// @property {map} label-color [igx-color: ('grays', 900)] - The text color used for the label text. /// @property {map} empty-color [igx-color: ('grays', 600)] - The unchecked border color. /// @property {map} fill-color [igx-color: ('secondary', 500)] - The checked border and dot colors. /// @property {map} disabled-color [igx-color: ('grays', 400)] - The disabled border and dot colors. -/// /// @see $default-palette - $_light-radio: extend( $_default-shape-radio, ( + variant: 'material', name: 'igx-radio', + hover-color: transparent, + + fill-hover-border-color:( + igx-color: ('secondary', 500) + ), + label-color: ( igx-color: ('grays', 900) ), @@ -38,3 +45,31 @@ $_light-radio: extend( ) ) ); + +/// Generates a fluent radio radio schema. +/// @type {Map} +/// +/// @property {map} hover-color [igx-color: ('grays', 800)] - The text color used for the label text. +/// @property {map} fill-hover-border-color [igx-color: ('secondary', 600)] - The text color used for the label text. +/// @property {map} empty-color [igx-color: ('grays', 800)] - The unchecked border color. +/// @property {map} fill-color [igx-color: ('secondary', 300)] - The checked border and dot colors. +$_fluent-radio: extend($_light-radio,( + variant: 'fluent', + + hover-color: ( + igx-color: ('grays', 800) + ), + + fill-hover-border-color: ( + igx-color: ('secondary', 600) + ), + + empty-color: ( + igx-color: ('grays', 800) + ), + + fill-color: ( + igx-color: ('secondary', 300) + ), +)); + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_ripple.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_ripple.scss index d965838a59b..32ab5ae2733 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_ripple.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_ripple.scss @@ -12,7 +12,6 @@ /// @property {map} color [igx-color: ('grays', 800)] - The color of the ripple. /// /// @see $default-palette - $_light-ripple: extend( $_default-shape-ripple, ( @@ -21,3 +20,9 @@ $_light-ripple: extend( ) ) ); + +/// Generates a fluent ripple schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-ripple +$_fluent-ripple: extend($_light-ripple); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_slider.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_slider.scss index 47e9b05a81e..98d6ff3a683 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_slider.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_slider.scss @@ -10,18 +10,23 @@ /// @type {Map} /// /// @property {map} track-color [igx-color: ('secondary', 500)] - The color of the track. +/// @property {map} track-hover-color [igx-color: ('secondary', 500)] - The color of the track on hover. /// @property {map} thumb-color [igx-color: ('secondary', 500)] - The color of the thumb. +/// @property {map} thumb-border-color [igx-color: ('secondary', 500)] - The thumb border color. +/// @property {map} thumb-disabled-border-color [igx-color: ('grays', 400)] - The thumb border color when its disabled +/// @property {map} disabled-thumb-color [igx-color: ('grays', 400), hexrgba: ()] - The thumb color when its disabled. /// @property {map} label-background-color [igx-color: ('secondary', 500)] - The background color of the bubble label. /// @property {map} label-text-color [igx-contrast-color: ('secondary', 500)] - The text color of the bubble label. -/// @property {map} disabled-thumb-color [igx-color: ('grays', 400), hexrgba: ()] - The thumb color when its disabled. /// @property {map} base-track-color [igx-color: ('grays', 500)] - The base background color of the track. +/// @property {map} base-track-hover-color [igx-color: ('secondary', 500), rgba: .24] - The base background color of the track on hover. /// @property {map} disabled-base-track-color [igx-color: ('grays', 400)] - The base background color of the track when is disabled. /// /// @see $default-palette - $_light-slider: extend( $_default-shape-slider, ( + variant: 'material', + track-color: ( igx-color: ('secondary', 500) ), @@ -30,6 +35,9 @@ $_light-slider: extend( igx-color: ('secondary', 500) ), + thumb-border-color: ( + igx-color: ('secondary', 500) + ), label-background-color: ( igx-color: ('secondary', 500), @@ -45,13 +53,77 @@ $_light-slider: extend( hexrgba: () ), + disabled-base-track-color: ( + igx-color: ('grays', 400) + ), + + thumb-disabled-border-color: ( + igx-color: ('grays', 400) + ), + base-track-color: ( igx-color: ('secondary', 500), rgba: .24 ), - disabled-base-track-color: ( - igx-color: ('grays', 400) + base-track-hover-color: ( + igx-color: ('secondary', 500), + rgba: .24 + ), + + track-hover-color: ( + igx-color: ('secondary', 500) ) ) ); + +/// Generates a fluent slider schema. +/// @type {Map} +/// +/// @property {map} track-color [igx-color: ('grays', 700), hexrgba: #fff] - The color of the track. +/// @property {map} track-hover-color [igx-color: ('primary', 500)] - The color of the track on hover. +/// @property {map} thumb-color [igx-color: 'surface'] - The color of the thumb. +/// @property {map} thumb-border-color [igx-color: ('grays', 700)] - The thumb border color. +/// @property {map} thumb-disabled-border-color [igx-color: ('grays', 400), hexrgba: #fff] - The thumb border color when its disabled +/// @property {map} disabled-thumb-color [igx-color: 'surface'] - The thumb color when its disabled. +/// @property {map} base-track-color [igx-color: ('grays', 400)] - The base background color of the track. +/// @property {map} base-track-hover-color [igx-color: ('primary', 500), rgba: .32] - The base background color of the track on hover. +$_fluent-slider: extend($_light-slider, ( + variant: 'fluent', + + track-color: ( + igx-color: ('grays', 700), + hexrgba: #fff + ), + + track-hover-color: ( + igx-color: ('primary', 500) + ), + + thumb-color: ( + igx-color: 'surface' + ), + + thumb-border-color: ( + igx-color: ('grays', 700) + ), + + thumb-disabled-border-color: ( + igx-color: ('grays', 400), + hexrgba: #fff + ), + + disabled-thumb-color: ( + igx-color: 'surface' + ), + + base-track-color: ( + igx-color: ('grays', 400) + ), + + base-track-hover-color: ( + igx-color: ('primary', 500), + rgba: .32 + ), +)); + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_snackbar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_snackbar.scss index e319e8f3c12..44791e6e4a8 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_snackbar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_snackbar.scss @@ -34,3 +34,11 @@ $_light-snackbar: extend( ), ) ); + +/// Generates a fluent snackbar schema. +/// @type {Map} +/// @prop {Number} border-radius [2px] - The border radius fraction, between 0-1 to be used for the snackbar component. +/// @requires {function} extend +/// @requires $_light-snackbar +/// @requires $_fluent-shape-snackbar +$_fluent-snackbar: extend($_light-snackbar, $_fluent-shape-snackbar); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss index fdbee000b02..72b4e565a4d 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss @@ -18,20 +18,33 @@ /// @property {map} track-disabled-color [igx-color: ('grays', 300)] - The color of the track when the switch is disabled. /// @property {map} label-color [gx-color: ('grays', 900)] - The color of the switch label /// @property {map} label-disabled-color [gx-color: ('grays', 400)] - The color of the switch label when the switch is disabled -/// @prop {Number} resting-elevation [2] - The elevation level, between 0-24, to be used for the resting state. -/// @prop {Number} hover-elevation [3] - The elevation level, between 0-24, to be used for the hover state. -/// @prop {Number} disabled-elevation [1] - The elevation level, between 0-24, to be used for the disabled state. +/// @property {Number} resting-elevation [2] - The elevation level, between 0-24, to be used for the resting state. +/// @property {Number} hover-elevation [3] - The elevation level, between 0-24, to be used for the hover state. +/// @property {Number} disabled-elevation [1] - The elevation level, between 0-24, to be used for the disabled state. /// -/// @prop {Number} border-radius-track [1] - The border radius fraction, between 0-7 to be used for switch track. -/// @prop {Number} border-radius-thumb [1] - The border radius fraction, between 0-10 to be used for switch thumb. -/// @prop {Number} border-radius-ripple [1] - The border radius fraction, between 0-24 to be used for switch ripple. +/// @property {Number} border-radius-track [1] - The border radius fraction, between 0-7 to be used for switch track. +/// @property {Number} border-radius-thumb [1] - The border radius fraction, between 0-10 to be used for switch thumb. +/// @property {Number} border-radius-ripple [1] - The border radius fraction, between 0-24 to be used for switch ripple. +/// +/// @property {color} border-color [transparent] - The border color of the switch. +/// @property {color} border-hover-color [transparent] - The border color of the switch on hover. +/// @property {color} border-disabled-color [transparent] - The border color of the disabled switch. +/// @property {color} border-on-color [transparent] - The border color of the on-switch. +/// @property {color} border-on-hover-color [transparent] - The border color of the on-switch. /// /// @see $default-palette - $_light-switch: extend( $_default-shape-switch, $_default-elevation-switch, ( + variant: 'material', + + border-color: transparent, + border-hover-color: transparent, + border-disabled-color: transparent, + border-on-color: transparent, + border-on-hover-color: transparent, + thumb-on-color: ( igx-color: ('secondary', 500) ), @@ -68,3 +81,66 @@ $_light-switch: extend( ), ) ); + +/// Generates a fluent switch schema. +/// @type {Map} +/// +/// @property {map} border-color [igx-color('grays', 500), hexrgba: #fff] - The border color of the switch. +/// @property {map} border-hover-color [igx-color('grays', 800), hexrgba: #fff] - The border color of the switch on hover. +/// @property {map} border-disabled-color [igx-color('grays', 300), hexrgba: #fff] - The border color of the disabled switch. +/// @property {map} border-on-color [igx-color('primary', 500)] - The border color of the on-switch. +/// @property {map} border-on-hover-color [igx-color('primary', 500)] - The border color of the on-switch. +/// +/// @property {color} thumb-on-color [#fff] - The color of the thumb when the switch is on. +/// @property {map} thumb-off-color [igx-color: ('grays', 900), hexrgba: #fff] - The color of the thumb when the switch is off. +/// @property {map} track-on-color [igx-color: ('secondary', 500)] - The color of the track when the switch is on. +/// @property {color} track-off-color [transparent] - The color of the track when the switch is off. +/// +/// @property {Number} border-radius-track [10px] - The border radius fraction, between 0-7 to be used for switch track. +/// +/// @requires {function} extend +/// @requires $_light-switch +/// @requires $_fluent-shape-switch +$_fluent-switch: extend( + $_light-switch, + $_fluent-shape-switch, + ( + variant: 'fluent', + + border-color: ( + igx-color: ('grays', 500), + hexrgba: #fff + ), + + border-hover-color:( + igx-color: ('grays', 800), + hexrgba: #fff + ), + + border-disabled-color:( + igx-color: ('grays', 300), + hexrgba: #fff + ), + + border-on-color:( + igx-color: ('primary', 500) + ), + + border-on-hover-color:( + igx-color: ('primary', 500) + ), + + thumb-on-color: #fff, + + thumb-off-color: ( + igx-color: ('grays', 900), + hexrgba: #fff + ), + + track-on-color: ( + igx-color: ('secondary', 500), + ), + + track-off-color: transparent, + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tabs.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tabs.scss index 0ca0fbb1d6d..9441d609c7e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tabs.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tabs.scss @@ -28,8 +28,6 @@ /// @property {map} button-ripple-color [igx-color: ('grays', 100)] - The color used for the button background on hover. /// /// @see $default-palette - - $_light-tabs: extend( $_default-shape-tabs, ( @@ -86,3 +84,9 @@ $_light-tabs: extend( ) ) ); + +/// Generates a fluent tabs schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-tabs +$_fluent-tabs: extend($_light-tabs); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_time-picker.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_time-picker.scss index c7b1e1d9500..5d56d28956b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_time-picker.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_time-picker.scss @@ -20,9 +20,10 @@ /// @prop {Map} background-color [igx-color: 'surface'] - The time-picker panel background color. /// @prop {Number} modal-elevation [24] - The elevation level used for the time picker in modal mode. /// @prop {Number} dropdown-elevation [8] - The elevation level used for the time picker in dropdown mode. +/// @prop {Number} border-radius [.2] - The border radius fraction used for the overall shape of the time-picker. +/// @prop {Number} active-item-border-radius [.75] - The border-radius used for the highlight of the active item in the time-picker. /// /// @see $default-palette - $_light-time-picker: extend( $_default-shape-time-picker, $_default-elevation-time-picker, @@ -64,3 +65,12 @@ $_light-time-picker: extend( ), ) ); + +/// Generates a fluent time-picker schema. +/// @type {Map} +/// @prop {Number} border-radius [2px] - The border radius fraction used for the overall shape of the time-picker. +/// @prop {Number} active-item-border-radius [2px] - The border-radius used for the highlight of the active item in the time-picker. +/// @requires {function} extend +/// @requires $_light-time-picker +/// @requires $_fluent-shape-time-picker +$_fluent-time-picker: extend($_light-time-picker, $_fluent-shape-time-picker); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_toast.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_toast.scss index 8f7c06879c6..1b397b23681 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_toast.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_toast.scss @@ -14,7 +14,6 @@ /// @prop {Number} border-radius [.15] - The border radius fraction, between 0-1 to be used for the toast component. /// /// @see $default-palette - $_light-toast: extend( $_default-shape-toast, ( @@ -27,3 +26,11 @@ $_light-toast: extend( ) ) ); + +/// Generates a fluent toast schema. +/// @type {Map} +/// @prop {Number} border-radius [2px] - The border radius fraction, between 0-1 to be used for the toast component. +/// @requires {function} extend +/// @requires $_light-toast +/// @requires $_fluent-shape-toast +$_fluent-toast: extend($_light-toast, $_fluent-shape-toast); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tooltip.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tooltip.scss index 969a7619e08..a4e1451874b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tooltip.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tooltip.scss @@ -14,7 +14,6 @@ /// @prop {Number} border-radius [.1] - The border radius fraction, between 0-1 to be used for the tooltip component. /// /// @see $default-palette - $_light-tooltip: extend( $_default-shape-tooltip, ( @@ -34,3 +33,20 @@ $_light-tooltip: extend( roundness: rem(4px) ) ); + +/// Generates a light fluent tooltip schema. +/// @type {Map} +/// @property {map} background [igx-color: 'surface'] - The background color of the tooltip. +/// @prop {Number} border-radius [2px] - The border radius fraction, between 0-1 to be used for the tooltip component. +/// @requires {function} extend +/// @requires $_light-tooltip +/// @requires $_fluent-shape-tooltip +$_fluent-tooltip: extend( + $_light-tooltip, + $_fluent-shape-tooltip, + ( + background: ( + igx-color: 'surface' + ) + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_button-group.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_button-group.scss index 633a9aaca07..573931b8345 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_button-group.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_button-group.scss @@ -14,3 +14,8 @@ $_round-shape-button-group: ( $_square-shape-button-group: ( border-radius: 0%, ); + +$_fluent-shape-button-group: ( + border-radius: 2px, +); + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_button.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_button.scss index ce2c82e4734..65eeb8a4693 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_button.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_button.scss @@ -26,3 +26,11 @@ $_square-shape-button: ( fab-border-radius: 0%, icon-border-radius: 0%, ); + +$_fluent-shape-button: ( + flat-border-radius: 0, + raised-border-radius: 2px, + outlined-border-radius: 2px, + fab-border-radius: 1, + icon-border-radius: 0, +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_calendar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_calendar.scss index 53a35da8e06..5e3821b2381 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_calendar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_calendar.scss @@ -20,3 +20,9 @@ $_square-shape-calendar: ( date-border-radius: 0%, month-border-radius: 0%, ); + +$_fluent-shape-calendar: ( + border-radius: 0%, + date-border-radius: 0%, + month-border-radius: 0%, +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_card.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_card.scss index 4f7df1ead54..cf435b46a15 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_card.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_card.scss @@ -14,3 +14,7 @@ $_round-shape-card: ( $_square-shape-card: ( border-radius: 0%, ); + +$_fluent-shape-card: ( + border-radius: 2px, +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_carousel.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_carousel.scss index 14e30b83fa5..1df6bb84f03 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_carousel.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_carousel.scss @@ -14,3 +14,7 @@ $_round-shape-carousel: ( $_square-shape-carousel: ( border-radius: 0%, ); + +$_fluent-shape-carousel: ( + border-radius: 0% +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_checkbox.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_checkbox.scss index e6ce6dfb184..88eb58895d6 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_checkbox.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_checkbox.scss @@ -17,3 +17,9 @@ $_square-shape-checkbox: ( border-radius: 0%, border-radius-ripple: 0% ); + +$_fluent-shape-checkbox: ( + border-radius: 2px, + border-radius-ripple: 2px +); + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_chip.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_chip.scss index 72cdccaff40..1dd2d4c737b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_chip.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_chip.scss @@ -14,3 +14,7 @@ $_round-shape-chip: ( $_square-shape-chip: ( border-radius: 0%, ); + +$_fluent-shape-chip: ( + border-radius: 1, +) diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_dialog.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_dialog.scss index 2faab13ed54..32598ff4d1e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_dialog.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_dialog.scss @@ -14,3 +14,7 @@ $_round-shape-dialog: ( $_square-shape-dialog: ( border-radius: 0%, ); + +$_fluent-shape-dialog: ( + border-radius: 2px, +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_drop-down.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_drop-down.scss index c33f3f413fc..e3516daefb4 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_drop-down.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_drop-down.scss @@ -14,3 +14,7 @@ $_round-shape-drop-down: ( $_square-shape-drop-down: ( border-radius: 0%, ); + +$_fluent-shape-drop-down: ( + border-radius: 2px, +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_grid.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_grid.scss index 1fe00046bd6..e1a044078dd 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_grid.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_grid.scss @@ -12,3 +12,7 @@ $_round-shape-grid: (); $_square-shape-grid: ( drop-area-border-radius: 0% ); + +$_fluent-shape-grid: ( + drop-area-border-radius: 2px +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_input-group.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_input-group.scss index b1bc3b11f72..26e8d45ec3f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_input-group.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_input-group.scss @@ -20,3 +20,9 @@ $_square-shape-input-group: ( border-border-radius: 0%, search-border-radius: 0%, ); + +$_fluent-shape-input-group: ( + box-border-radius: 2px, + border-border-radius: 2px, + search-border-radius: 2px, +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_snackbar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_snackbar.scss index d8d48023503..bbe9c84f595 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_snackbar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_snackbar.scss @@ -14,3 +14,8 @@ $_round-shape-snackbar: ( $_square-shape-snackbar: ( border-radius: 0%, ); + + +$_fluent-shape-snackbar: ( + border-radius: 2px, +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_switch.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_switch.scss index ebf1add007d..35e2a56d7f4 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_switch.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_switch.scss @@ -20,3 +20,8 @@ $_square-shape-switch: ( border-radius-thumb: 0%, border-radius-ripple: 0% ); + +$_fluent-shape-switch: ( + border-radius-track: 10px, +); + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_time-picker.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_time-picker.scss index d50a42573fa..3081a37b83d 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_time-picker.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_time-picker.scss @@ -17,3 +17,10 @@ $_square-shape-time-picker: ( border-radius: 0%, active-item-border-radius: 0%, ); + + +$_fluent-shape-time-picker: ( + border-radius: 2px, + active-item-border-radius: 2px, +); + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_toast.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_toast.scss index 425be773b8e..33d3e8423c7 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_toast.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_toast.scss @@ -14,3 +14,7 @@ $_round-shape-toast: ( $_square-shape-toast: ( border-radius: 0%, ); + +$_fluent-shape-toast: ( + border-radius: 2px +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_tooltip.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_tooltip.scss index 11369eb5bc2..4d925bd3304 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_tooltip.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_tooltip.scss @@ -14,3 +14,7 @@ $_round-shape-tooltip: ( $_square-shape-tooltip: ( border-radius: 0%, ); + +$_fluent-shape-tooltip: ( + border-radius: 2px, +); diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_base.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_base.scss index 05d4258501a..0f8b14e3270 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_base.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_base.scss @@ -21,7 +21,7 @@ $letter-spacing: null, $text-transform: null, $margin-top: null, - $margin-bottom: null, + $margin-bottom: null ) { @return ( font-family: $font-family, @@ -88,7 +88,7 @@ $line-height: rem(112px), $text-transform: none, $margin-top: rem(28px), - $margin-bottom: rem(56px), + $margin-bottom: rem(56px) ), h2: igx-type-style( $font-size: rem(60px), @@ -97,7 +97,7 @@ $line-height: rem(71px), $text-transform: none, $margin-top: rem(28px), - $margin-bottom: rem(28px), + $margin-bottom: rem(28px) ), h3: igx-type-style( $font-size: rem(48px), @@ -106,7 +106,7 @@ $line-height: rem(57px), $text-transform: none, $margin-top: rem(28px), - $margin-bottom: 0, + $margin-bottom: 0 ), h4: igx-type-style( $font-size: rem(34px), @@ -115,7 +115,7 @@ $line-height: rem(40px), $text-transform: none, $margin-top: rem(28px), - $margin-bottom: 0, + $margin-bottom: 0 ), h5: igx-type-style( $font-size: rem(24px), @@ -124,7 +124,7 @@ $line-height: rem(28px), $text-transform: none, $margin-top: rem(28px), - $margin-bottom: 0, + $margin-bottom: 0 ), h6: igx-type-style( $font-size: rem(20px), @@ -133,7 +133,7 @@ $line-height: rem(24px), $text-transform: none, $margin-top: 0, - $margin-bottom: 0, + $margin-bottom: 0 ), subtitle-1: igx-type-style( $font-size: rem(16px), @@ -156,35 +156,35 @@ $line-height: rem(28px), $text-transform: none, $margin-top: rem(28px), - $margin-bottom: rem(16), + $margin-bottom: rem(16) ), body-2: igx-type-style( $font-size: rem(14px), $font-weight: 400, $letter-spacing: rem(.25px), $line-height: rem(20px), - $text-transform: none, + $text-transform: none ), button: igx-type-style( $font-size: rem(14px), $font-weight: 600, $letter-spacing: rem(.75px), $line-height: rem(16px), - $text-transform: uppercase, + $text-transform: uppercase ), caption: igx-type-style( $font-size: rem(12px), $font-weight: 400, $letter-spacing: rem(.4px), $line-height: rem(16px), - $text-transform: none, + $text-transform: none ), overline: igx-type-style( $font-size: rem(10px), $font-weight: 400, $letter-spacing: rem(1.5px), $line-height: rem(16px), - $text-transform: uppercase, + $text-transform: uppercase ) ); diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_index.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_index.scss index 30801933ab9..24808744372 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_index.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_index.scss @@ -1,3 +1,4 @@ @import './base'; @import './variables'; @import './typography'; +@import './scale-presets/index'; diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss index 3050c7165e0..18ccc029746 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss @@ -53,10 +53,13 @@ body-1: 'p' ); + $this: bem--selector-to-string(&); + $scope: if(is-root(), 'igx-typography', #{str-slice($this, 2, -1)}); + // Use the BEM notation to create a link // between the igx-typography class selector // and all typographic elements. - @include b(igx-typography) { + @include b($scope) { font-family: unquote($font-family); font-size: $browser-context; line-height: $browser-line-height; @@ -91,30 +94,30 @@ @extend %#{$category}; } } - } - // Call the individual component styles with the type scale - @include igx-bottom-nav-typography($type-scale); - @include igx-button-typography($type-scale); - @include igx-banner-typography($type-scale); - @include igx-calendar-typography($type-scale); - @include igx-card-typography($type-scale); - @include igx-checkbox-typography($type-scale); - @include igx-chip-typography($type-scale); - @include igx-column-hiding-typography($type-scale); - @include igx-dialog-typography($type-scale); - @include igx-drop-down-typography($type-scale); - @include igx-expansion-panel-typography($type-scale); - @include _excel-filtering-typography($type-scale); - @include igx-input-group-typography($type-scale); - @include igx-navbar-typography($type-scale); - @include igx-navdrawer-typography($type-scale); - @include igx-list-typography($type-scale); - @include igx-radio-typography($type-scale); - @include igx-snackbar-typography($type-scale); - @include igx-switch-typography($type-scale); - @include igx-tabs-typography($type-scale); - @include igx-time-picker-typography($type-scale); - @include igx-toast-typography($type-scale); - @include igx-tooltip-typography($type-scale); + // Call the individual component styles with the type scale + @include igx-button-typography($type-scale); + @include igx-bottom-nav-typography($type-scale); + @include igx-banner-typography($type-scale); + @include igx-calendar-typography($type-scale); + @include igx-card-typography($type-scale); + @include igx-checkbox-typography($type-scale); + @include igx-chip-typography($type-scale); + @include igx-column-hiding-typography($type-scale); + @include igx-dialog-typography($type-scale); + @include igx-drop-down-typography($type-scale); + @include igx-expansion-panel-typography($type-scale); + @include _excel-filtering-typography($type-scale); + @include igx-input-group-typography($type-scale); + @include igx-navbar-typography($type-scale); + @include igx-navdrawer-typography($type-scale); + @include igx-list-typography($type-scale); + @include igx-radio-typography($type-scale); + @include igx-snackbar-typography($type-scale); + @include igx-switch-typography($type-scale); + @include igx-tabs-typography($type-scale); + @include igx-time-picker-typography($type-scale); + @include igx-toast-typography($type-scale); + @include igx-tooltip-typography($type-scale); + } } diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/scale-presets/_fluent.scss b/projects/igniteui-angular/src/lib/core/styles/typography/scale-presets/_fluent.scss new file mode 100644 index 00000000000..256148091a4 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/typography/scale-presets/_fluent.scss @@ -0,0 +1,112 @@ +$fluent_h1: igx-type-style( + $font-size: rem(68px), + $font-weight: 700, + $line-height: rem(76px), + $text-transform: none, + $margin-top: 0, + $margin-bottom: 0 +); + +$fluent_h2: igx-type-style( + $font-size: rem(42px), + $font-weight: 700, + $line-height: rem(52px), + $text-transform: none, + $margin-top: 0, + $margin-bottom: 0 +); + +$fluent_h3: igx-type-style( + $font-size: rem(32px), + $font-weight: 600, + $line-height: rem(40px), + $text-transform: none, + $margin-top: 0, + $margin-bottom: 0 +); + +$fluent_h4: igx-type-style( + $font-size: rem(28px), + $font-weight: 400, + $line-height: rem(36px), + $text-transform: none, + $margin-top: 0, + $margin-bottom: 0 +); + +$fluent_h5: igx-type-style( + $font-size: rem(20px), + $font-weight: 400, + $line-height: rem(28px), + $text-transform: none, + $margin-top: 0, + $margin-bottom: 0 +); + +$fluent_h6: igx-type-style( + $font-size: rem(18px), + $font-weight: 400, + $line-height: rem(22px), + $text-transform: none, + $margin-top: 0, + $margin-bottom: 0 +); + +$fluent_body-1: igx-type-style( + $font-size: rem(16px), + $font-weight: 400, + $line-height: rem(22px), + $text-transform: none, + $margin-top: 0, + $margin-bottom: 0 +); + +$fluent_body-2: igx-type-style( + $font-size: rem(14px), + $font-weight: 400, + $line-height: rem(20px), + $text-transform: none, + $margin-top: 0, + $margin-bottom: 0 +); + +$fluent_subtitle-1: igx-type-style( + $font-size: rem(12px), + $font-weight: 400, + $line-height: rem(16px), + $text-transform: none, + $margin-top: 0, + $margin-bottom: 0 +); + +$fluent_subtitle-2: igx-type-style( + $font-size: rem(10px), + $font-weight: 400, + $line-height: rem(14px), + $text-transform: none, + $margin-top: 0, + $margin-bottom: 0 +); + +$fluent_button: igx-type-style( + $font-size: rem(14px), + $font-weight: 600, + $line-height: rem(14px), + $text-transform: capitalize, + $margin-top: 0, + $margin-bottom: 0 +); + +$fluent-type-scale: igx-type-scale( + $h1: $fluent_h1, + $h2: $fluent_h2, + $h3: $fluent_h3, + $h4: $fluent_h4, + $h5: $fluent_h5, + $h6: $fluent_h6, + $subtitle-1: $fluent_subtitle-1, + $subtitle-2: $fluent_subtitle-2, + $body-1: $fluent_body-1, + $body-2: $fluent_body-2, + $button: $fluent_button +); diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/scale-presets/_index.scss b/projects/igniteui-angular/src/lib/core/styles/typography/scale-presets/_index.scss new file mode 100644 index 00000000000..9e98ea819c5 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/typography/scale-presets/_index.scss @@ -0,0 +1 @@ +@import './fluent'; diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.html b/projects/igniteui-angular/src/lib/input-group/input-group.component.html index aa2b750b67b..ed69e014baa 100644 --- a/projects/igniteui-angular/src/lib/input-group/input-group.component.html +++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.html @@ -1,14 +1,31 @@
+
+ + + + + + + + + + +
- + + + + + +
diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts index 569ad73e716..a375674f847 100644 --- a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts +++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts @@ -26,7 +26,9 @@ enum IgxInputGroupType { LINE, BOX, BORDER, - SEARCH + FLUENT, + SEARCH, + FLUENT_SEARCH, } @Component({ @@ -104,6 +106,18 @@ export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInp */ @HostBinding('class.igx-input-group--search') public isSearch = false; + /** + * @hidden + */ + + @HostBinding('class.igx-input-group--fluent-search') + public isFluentSearch = false; + + /** + * @hidden + */ + @HostBinding('class.igx-input-group--fluent') + public isFluent = false; /** * An @Input property that disables the `IgxInputGroupComponent`. @@ -161,7 +175,7 @@ export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInp /** * An @Input property that sets how the input will be styled. - * The allowed values are `line`, `box`, `border` and `search`. The default is `line`. + * The allowed values are `line`, `box`, `border`, `fluent`, `search` and `fluentSearch`. The default is `line`. * ```html * * ``` @@ -170,7 +184,7 @@ export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInp set type(value: string) { const type: IgxInputGroupType = (IgxInputGroupType as any)[value.toUpperCase()]; if (type !== undefined) { - this.isBox = this.isBorder = this.isSearch = false; + this.isBox = this.isFluent = this.isFluentSearch = this.isBorder = this.isSearch = false; switch (type) { case IgxInputGroupType.BOX: this.isBox = true; @@ -178,6 +192,12 @@ export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInp case IgxInputGroupType.BORDER: this.isBorder = true; break; + case IgxInputGroupType.FLUENT: + this.isFluent = true; + break; + case IgxInputGroupType.FLUENT_SEARCH: + this.isFluentSearch = true; + break; case IgxInputGroupType.SEARCH: this.isSearch = true; break; @@ -243,7 +263,7 @@ export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInp /** * Returns the type of the `IgxInputGroupComponent`. How the input is styled. - * Values are `line` - 0, `box` - 1, `border` - 2 and `search` - 3. The default is `line`. + * Values are `line` - 0, `box` - 1, `border` - 2, `fluent` - 3 `fluentSearch` - 4 and `search` - 5. The default is `line`. * ```typescript *@ViewChild("MyInputGroup") *public inputGroup: IgxInputGroupComponent; @@ -333,6 +353,20 @@ export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInp return this._type === IgxInputGroupType.BORDER; } + /** + * Returns whether the `IgxInputGroupComponent` type is Fluent. + * ```typescript + *@ViewChild("MyInputGroup1") + *public inputGroup: IgxInputGroupComponent; + *ngAfterViewInit(){ + * let isTypeFluent = this.inputGroup.isTypeFluent; + *} + * ``` + */ + get isTypeFluent() { + return this._type === IgxInputGroupType.FLUENT; + } + /** * Returns whether the `IgxInputGroupComponent` type is search. * ```typescript @@ -347,6 +381,20 @@ export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInp return this._type === IgxInputGroupType.SEARCH; } + /** + * Returns whether the `IgxInputGroupComponent` type is fluentSearch. + * ```typescript + *@ViewChild("MyInputGroup1") + *public inputGroup: IgxInputGroupComponent; + *ngAfterViewInit(){ + * let isTypeFluentSearch = this.inputGroup.isTypeFluentSearch; + *} + * ``` + */ + get isTypeFluentSearch() { + return this._type === IgxInputGroupType.FLUENT_SEARCH; + } + get filled() { return this._filled; } diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.directive.spec.ts b/projects/igniteui-angular/src/lib/input-group/input-group.directive.spec.ts index d61dbd36675..575e5127fc7 100644 --- a/projects/igniteui-angular/src/lib/input-group/input-group.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/input-group/input-group.directive.spec.ts @@ -11,7 +11,9 @@ import { configureTestSuite } from '../test-utils/configure-suite'; const INPUT_GROUP_CSS_CLASS = 'igx-input-group'; const INPUT_GROUP_BOX_CSS_CLASS = 'igx-input-group--box'; const INPUT_GROUP_BORDER_CSS_CLASS = 'igx-input-group--border'; +const INPUT_GROUP_FLUENT_CSS_CLASS = 'igx-input-group--fluent'; const INPUT_GROUP_SEARCH_CSS_CLASS = 'igx-input-group--search'; +const INPUT_GROUP_FLUENT_SEARCH_CSS_CLASS = 'igx-input-group--fluent-search'; const INPUT_GROUP_COMFORTABLE_DENSITY_CSS_CLASS = 'igx-input-group--comfortable'; const INPUT_GROUP_COMPACT_DENSITY_CSS_CLASS = 'igx-input-group--compact'; const INPUT_GROUP_COSY_DENSITY_CSS_CLASS = 'igx-input-group--cosy'; @@ -24,6 +26,7 @@ describe('IgxInputGroup', () => { InputGroupComponent, InputGroupBoxComponent, InputGroupBorderComponent, + InputGroupFluentComponent, InputGroupSearchComponent, InputGroupDisabledComponent, InputGroupDisabledByDefaultComponent, @@ -224,11 +227,22 @@ class InputGroupSearchComponent { @ViewChild('igxInputGroup', { static: true }) public igxInputGroup: IgxInputGroupComponent; } +@Component({ + template: ` + + ` +}) +class InputGroupFluentComponent { + @ViewChild('igxInputGroup', { static: true }) public igxInputGroup: IgxInputGroupComponent; +} + function testInputGroupType(type, component: IgxInputGroupComponent, nativeElement) { let isLine = false; let isBorder = false; let isBox = false; let isSearch = false; + let isFluent = false; + let isFluentSearch = false; switch (type) { case 'line': @@ -240,6 +254,12 @@ function testInputGroupType(type, component: IgxInputGroupComponent, nativeEleme case 'box': isBox = true; break; + case 'fluent': + isFluent = true; + break; + case 'fluentSearch': + isFluentSearch = true; + break; case 'search': isSearch = true; break; @@ -248,12 +268,16 @@ function testInputGroupType(type, component: IgxInputGroupComponent, nativeEleme expect(nativeElement.classList.contains(INPUT_GROUP_BOX_CSS_CLASS)).toBe(isBox); expect(nativeElement.classList.contains(INPUT_GROUP_BORDER_CSS_CLASS)).toBe(isBorder); + expect(nativeElement.classList.contains(INPUT_GROUP_FLUENT_CSS_CLASS)).toBe(isFluent); expect(nativeElement.classList.contains(INPUT_GROUP_SEARCH_CSS_CLASS)).toBe(isSearch); + expect(nativeElement.classList.contains(INPUT_GROUP_FLUENT_SEARCH_CSS_CLASS)).toBe(isFluentSearch); expect(component.isTypeLine).toBe(isLine); expect(component.isTypeBorder).toBe(isBorder); expect(component.isTypeBox).toBe(isBox); + expect(component.isTypeFluent).toBe(isFluent); expect(component.isTypeSearch).toBe(isSearch); + expect(component.isTypeFluentSearch).toBe(isFluentSearch); } @Component({ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2275775cf9e..494898ed486 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -105,6 +105,7 @@ import { TreeGridLoadOnDemandSampleComponent } from './tree-grid-load-on-demand/ import { GridFilterTemplateSampleComponent } from './grid-filter-template/grid-filter-template.sample'; import { GridMRLConfigSampleComponent } from './grid-multi-row-layout-config/grid-mrl-config.sample'; import { GridMRLCustomNavigationSampleComponent } from './grid-mrl-custom-navigation/grid-mrl-custom-navigation'; +import { InputGroupFluentSampleComponent } from './input-group/input-group-fluent.sample'; import { GridClipboardSampleComponent } from './grid-clipboard/grid-clipboard.sample'; import { GridAutoSizeSampleComponent } from './grid-auto-size/grid-auto-size.sample'; import { GridFlexSampleComponent } from './grid-flex-layout/grid-flex.sample'; @@ -138,6 +139,7 @@ const components = [ InputSampleComponent, InputGroupSampleComponent, InputGroupChildSampleComponent, + InputGroupFluentSampleComponent, LayoutSampleComponent, ListSampleComponent, ListPanningSampleComponent, diff --git a/src/app/chips/chips.sample.scss b/src/app/chips/chips.sample.scss index 8301013ab2e..65f1a950158 100644 --- a/src/app/chips/chips.sample.scss +++ b/src/app/chips/chips.sample.scss @@ -55,6 +55,12 @@ igx-chip { min-width: 24px; } +.fluent-excel-theme .chip-area-avatar, +.fluent-word-theme .chip-area-avatar, +.fluent-excel-dark-theme .chip-area-avatar { + margin-left: rem(-4px) !important; +} + .wrapperAreaCc, .wrapperAreaTo { display: flex; diff --git a/src/app/dialog/dialog.sample.html b/src/app/dialog/dialog.sample.html index 3bd532b3c1b..725b9ea404d 100644 --- a/src/app/dialog/dialog.sample.html +++ b/src/app/dialog/dialog.sample.html @@ -15,6 +15,24 @@

Alert

+
+

Fluent

+

Fluent dialog.

+
+ + + +
+

Generic Dialog

Detailed description to be added

diff --git a/src/app/input-group/input-group-fluent.sample.html b/src/app/input-group/input-group-fluent.sample.html new file mode 100644 index 00000000000..e27efef7328 --- /dev/null +++ b/src/app/input-group/input-group-fluent.sample.html @@ -0,0 +1,114 @@ + +
+

FLUENT INPUT GROUP

+
+ + +
+
Current density: {{displayDensityOptions.displayDensity}}
+ + + + + search + + + clear + + + +
+ + + + + search + + + +
+ + + + + favorite + + None + Sofia + London + Paris + New York + + +
+ + + + + + + + date_range + + + + + + + + + + + data_usage + + + + + + + This one has no label + + + + + + + http:// + + + + .com + + Type you web address + + + + + + + + + + + + + + + + + + + + phone + + +
+ diff --git a/src/app/input-group/input-group-fluent.sample.ts b/src/app/input-group/input-group-fluent.sample.ts new file mode 100644 index 00000000000..3d4c2c85527 --- /dev/null +++ b/src/app/input-group/input-group-fluent.sample.ts @@ -0,0 +1,42 @@ +import { Component, Inject } from '@angular/core'; +import { DisplayDensityToken, DisplayDensity, IDisplayDensityOptions } from 'projects/igniteui-angular/src/lib/core/displayDensity'; + +@Component({ + // tslint:disable-next-line:component-selector + selector: 'input-group-fluent-sample', + styleUrls: ['input-group.sample.css'], + templateUrl: 'input-group-fluent.sample.html', + providers: [{ provide: DisplayDensityToken, useValue: { displayDensity: DisplayDensity.compact} }] +}) + +export class InputGroupFluentSampleComponent { + public user = { + firstName: 'Koke', + lastName: 'Duduka' + }; + public inputType = 'fluent'; + public inputSearchType = 'fluent_search'; + date = new Date(); + constructor(@Inject(DisplayDensityToken) public displayDensityOptions: IDisplayDensityOptions) {} + public value: 'opt1'; + + changeDisplayDensity() { + switch (this.displayDensityOptions.displayDensity) { + case DisplayDensity.comfortable: this.displayDensityOptions.displayDensity = DisplayDensity.compact; break; + case DisplayDensity.compact: this.displayDensityOptions.displayDensity = DisplayDensity.cosy; break; + case DisplayDensity.cosy: this.displayDensityOptions.displayDensity = DisplayDensity.comfortable; break; + } + } + changeInputType() { + if (this.inputType === 'fluent') { + this.inputType = 'box'; + } else if (this.inputType === 'box') { + this.inputType = 'fluent'; + } + if (this.inputSearchType === 'fluent_search') { + this.inputSearchType = 'search'; + } else if (this.inputSearchType === 'search') { + this.inputSearchType = 'fluent_search'; + } + } +} diff --git a/src/app/input-group/input-group.sample.css b/src/app/input-group/input-group.sample.css index b98b1fe6f2e..e23d90e1066 100644 --- a/src/app/input-group/input-group.sample.css +++ b/src/app/input-group/input-group.sample.css @@ -9,7 +9,37 @@ font-size: 24px; } -.igx-input-group+.igx-input-group, -.form+.form { +.igx-input-group + .igx-input-group, +.form + .form { margin-top: 24px; } + +igx-date-picker { + display: block; + margin-bottom: 24px; +} + +.fluent-form { + display: flex; + flex-direction: column; +} + +.fluent-card-holder { + padding: 30px; + max-width: 500px; + margin: 0 auto 50px; +} + +.fluent-form-btn-label { + margin-bottom: 24px; +} + +.fluent-form button { + margin-right: 16px; +} + +.fluent-form__buttons { + margin-bottom: 16px; + display: flex; + align-items: center; +} diff --git a/src/app/input-group/input-group.sample.html b/src/app/input-group/input-group.sample.html index b03e0f4793c..5b4580662b4 100644 --- a/src/app/input-group/input-group.sample.html +++ b/src/app/input-group/input-group.sample.html @@ -1,5 +1,6 @@
+

Line Style Input with required @Input

diff --git a/src/app/tabs/tabs.sample.html b/src/app/tabs/tabs.sample.html index 47e5926d30d..851cdbf9dea 100644 --- a/src/app/tabs/tabs.sample.html +++ b/src/app/tabs/tabs.sample.html @@ -287,14 +287,10 @@

Same size tabs

-
- -
-

{{contact.text}}

- {{contact.phone}} -
- phone -
+ +

{{contact.text}}

+ {{contact.phone}} + phone @@ -302,14 +298,10 @@

Same size tabs

-
- -
-

{{contact.text}}

- {{contact.phone}} -
- phone -
+ +

{{contact.text}}

+ {{contact.phone}} + phone @@ -317,14 +309,10 @@

Same size tabs

-
- -
-

{{contact.text}}

- {{contact.phone}} -
- phone -
+ +

{{contact.text}}

+ {{contact.phone}} + phone @@ -574,4 +562,4 @@

Tab two Content

- \ No newline at end of file + diff --git a/src/index.html b/src/index.html index 91a926bdd06..f9d6b4e7678 100644 --- a/src/index.html +++ b/src/index.html @@ -8,7 +8,7 @@ - + diff --git a/src/styles/igniteui-theme.scss b/src/styles/igniteui-theme.scss index dc6a2ea678d..eb1227b4153 100644 --- a/src/styles/igniteui-theme.scss +++ b/src/styles/igniteui-theme.scss @@ -1,7 +1,6 @@ @import url('https://fonts.googleapis.com/icon?family=Material+Icons'); @import url('https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700'); @import '../../projects/igniteui-angular/src/lib/core/styles/themes/index'; - @import 'mixins'; @import 'app-palettes'; @import 'app-layout'; @@ -24,22 +23,37 @@ } } -.light-square-theme { - $igx-background-color: #fff; +.dark-theme { + $igx-background-color: #333; $igx-foreground-color: text-contrast($igx-background-color); + + background: $igx-background-color; + color: $igx-foreground-color; + + @include scrollbar-love(lighten($igx-background-color, 15%)); + @include igx-dark-theme($green-palette); + + .nav-header { + @include nav-logo('../assets/images/rsrcs/igniteui-logo-dark-bg', $igx-background-color); + } +} +.fluent-excel-theme { + $igx-background-color: #fff; + $igx-foreground-color: text-contrast($igx-background-color); + background: $igx-background-color; color: $igx-foreground-color; @include scrollbar-love(); - @include igx-light-square-theme($purple-palette); + @include igx-fluent-theme($fluent-excel-palette); .nav-header { - @include nav-logo('../assets/images/rsrcs/igniteui-logo-light-bg', $igx-background-color); + @include nav-logo('../assets/images/rsrcs/igniteui-logo-light-bg', $igx-foreground-color); } } -.light-round-theme { +.fluent-word-theme { $igx-background-color: #fff; $igx-foreground-color: text-contrast($igx-background-color); @@ -47,25 +61,53 @@ color: $igx-foreground-color; @include scrollbar-love(); - @include igx-theme($palette: $purple-palette, $schema: $light-round-schema); + @include igx-fluent-theme($fluent-word-palette); + + .nav-header { + @include nav-logo('../assets/images/rsrcs/igniteui-logo-light-bg', $igx-foreground-color); + } } -.dark-theme { +.fluent-excel-dark-theme { $igx-background-color: #333; $igx-foreground-color: text-contrast($igx-background-color); - + background: $igx-background-color; color: $igx-foreground-color; - + @include scrollbar-love(lighten($igx-background-color, 15%)); - @include igx-dark-theme($green-palette); - + @include igx-fluent-dark-theme($fluent-excel-palette); + .nav-header { - @include nav-logo('../assets/images/rsrcs/igniteui-logo-dark-bg', $igx-background-color); + @include nav-logo('../assets/images/rsrcs/igniteui-logo-light-bg', $igx-foreground-color); } } +.light-square-theme { + $igx-background-color: #fff; + $igx-foreground-color: text-contrast($igx-background-color); + + background: $igx-background-color; + color: $igx-foreground-color; + + @include scrollbar-love(); + @include igx-light-square-theme($purple-palette); + + .nav-header { + @include nav-logo('../assets/images/rsrcs/igniteui-logo-light-bg', $igx-background-color); + } +} +.light-round-theme { + $igx-background-color: #fff; + $igx-foreground-color: text-contrast($igx-background-color); + + background: $igx-background-color; + color: $igx-foreground-color; + + @include scrollbar-love(); + @include igx-theme($palette: $purple-palette, $schema: $light-round-schema); +} @media print { html,