diff --git a/src/app/data-display/chip/chip-styling/chip-styling.component.scss b/src/app/data-display/chip/chip-styling/chip-styling.component.scss index 975d79863a..02eda91f02 100644 --- a/src/app/data-display/chip/chip-styling/chip-styling.component.scss +++ b/src/app/data-display/chip/chip-styling/chip-styling.component.scss @@ -2,17 +2,10 @@ @use "igniteui-angular/theming" as *; $custom-theme: chip-theme( - $background: #011627, - $hover-background: #011627dc, - $focus-background: #0116276c, + $background: #57a5cd, $selected-background: #ecaa53, - $hover-selected-background: #ecaa53, - $focus-selected-background: #ecaa53, - $text-color: #fefefe, - $remove-icon-color: #f14545, - $remove-icon-color-focus: #da0000, + $remove-icon-color: #d81414, $border-radius: 5px, ); @include css-vars($custom-theme); - \ No newline at end of file diff --git a/src/app/data-display/circular-progressbar/circular-styling-sample/circular-styling-sample.component.scss b/src/app/data-display/circular-progressbar/circular-styling-sample/circular-styling-sample.component.scss index 699a7c61dc..e3a8672ad2 100644 --- a/src/app/data-display/circular-progressbar/circular-styling-sample/circular-styling-sample.component.scss +++ b/src/app/data-display/circular-progressbar/circular-styling-sample/circular-styling-sample.component.scss @@ -1,9 +1,7 @@ @use "igniteui-angular/theming" as *; $custom-theme: progress-circular-theme( - $base-circle-color: lightgray, $fill-color-default: rgb(32, 192, 17), ); @include css-vars($custom-theme); - \ No newline at end of file diff --git a/src/app/data-display/linear-progressbar/linear-progressbar-styling-sample/linear-progressbar-styling-sample.component.scss b/src/app/data-display/linear-progressbar/linear-progressbar-styling-sample/linear-progressbar-styling-sample.component.scss index fe4e1ec0bb..1ded704784 100644 --- a/src/app/data-display/linear-progressbar/linear-progressbar-styling-sample/linear-progressbar-styling-sample.component.scss +++ b/src/app/data-display/linear-progressbar/linear-progressbar-styling-sample/linear-progressbar-styling-sample.component.scss @@ -2,10 +2,8 @@ @use "igniteui-angular/theming" as *; $custom-theme: progress-linear-theme( - $track-color: #d3d3d3, $fill-color-default: #ecaa53, $text-color: #ecaa53, ); @include css-vars($custom-theme); - \ No newline at end of file diff --git a/src/app/data-entries/buttonGroup/button-group-style/button-group-style.component.scss b/src/app/data-entries/buttonGroup/button-group-style/button-group-style.component.scss index 5dd331f72c..0498b2e0b1 100644 --- a/src/app/data-entries/buttonGroup/button-group-style/button-group-style.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-style/button-group-style.component.scss @@ -2,16 +2,8 @@ @use "igniteui-angular/theming" as *; $custom-button-group: button-group-theme( - $item-text-color: #fdfdfd, - $item-background: #2f4d6a, - $item-hover-text-color: #fdfdfd, - $item-hover-background: #1f3347, - $item-selected-text-color: #fdfdfd, - $item-selected-background: #1f3347, - $item-selected-hover-background: #1f3347, - $disabled-text-color: gray, - $disabled-background-color: lightgray, + $item-background: #57a5cd, ); @include css-vars($custom-button-group); - + diff --git a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss index f7e5123af2..c5b8a77146 100644 --- a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss +++ b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss @@ -2,12 +2,9 @@ @use "igniteui-angular/theming" as *; $custom-checkbox-theme: checkbox-theme( - $border-radius: 10px, - $label-color: #011627, $empty-color: #ecaa53, $fill-color: #ecaa53, - $tick-color: #011627, + $border-radius: 5px ); @include css-vars($custom-checkbox-theme); - \ No newline at end of file diff --git a/src/app/data-entries/dropdown/dropdown-styling/dropdown-styling.component.scss b/src/app/data-entries/dropdown/dropdown-styling/dropdown-styling.component.scss index 6f8ad200d9..8ed051d734 100644 --- a/src/app/data-entries/dropdown/dropdown-styling/dropdown-styling.component.scss +++ b/src/app/data-entries/dropdown/dropdown-styling/dropdown-styling.component.scss @@ -2,20 +2,13 @@ @use "igniteui-angular/theming" as *; $custom-drop-down-theme: drop-down-theme( - $background-color: #fdfdfd, $header-text-color: #345779, $item-text-color: #2dabe8, + $hover-item-text-color: #345779, $selected-item-background: #345779, - $selected-item-text-color: #fdfdfd, - $selected-hover-item-background: #345779, - $selected-hover-item-text-color: #fdfdfd, - $selected-focus-item-background: #345779, - $selected-focus-item-text-color: #fdfdfd, $hover-item-background: rgba(0, 0, 0, 0.12), - $hover-item-text-color: #345779, ); .drop-down__scroll-container { @include css-vars($custom-drop-down-theme); } - \ No newline at end of file diff --git a/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss b/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss index 914c4b0e02..27c5c84b09 100644 --- a/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss +++ b/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss @@ -3,14 +3,10 @@ $custom-input-group: input-group-theme( $filled-text-color: #288a54, - $focused-text-color: #174f30, $idle-text-color: #288a54, $idle-bottom-line-color: #288a54, - $interim-bottom-line-color: #288a54, - $hover-bottom-line-color: #288a54, $focused-secondary-color: #174f30, $box-background: #eeeeee ); @include css-vars($custom-input-group); - \ No newline at end of file diff --git a/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss b/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss index e036fb1265..c2c3383809 100644 --- a/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss +++ b/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss @@ -2,12 +2,8 @@ @use "igniteui-angular/theming" as *; $custom-radio-theme: radio-theme( - $disabled-color: lightgray, $empty-color: #345779, $fill-color: #2dabe8, - $fill-color-hover: #2dabe8, - $fill-hover-border-color: #2dabe8 ); @include css-vars($custom-radio-theme); - \ No newline at end of file diff --git a/src/app/data-entries/select/select-styling/select-styling.component.scss b/src/app/data-entries/select/select-styling/select-styling.component.scss index b9a35cb1ba..0737cd2e41 100644 --- a/src/app/data-entries/select/select-styling/select-styling.component.scss +++ b/src/app/data-entries/select/select-styling/select-styling.component.scss @@ -7,4 +7,3 @@ $custom-select-theme: select-theme( ); @include css-vars($custom-select-theme); - \ No newline at end of file diff --git a/src/app/data-entries/switch/switch-styling/switch-styling.component.scss b/src/app/data-entries/switch/switch-styling/switch-styling.component.scss index 2e54c8e4cc..b4e472ddbb 100644 --- a/src/app/data-entries/switch/switch-styling/switch-styling.component.scss +++ b/src/app/data-entries/switch/switch-styling/switch-styling.component.scss @@ -3,8 +3,6 @@ $custom-switch-theme: switch-theme( $thumb-on-color: #ecaa53, - $track-on-color: #f0cb9c ); @include css-vars($custom-switch-theme); - \ No newline at end of file diff --git a/src/app/interactions/dialog/dialog-styling-sample/dialog-styling-sample.component.scss b/src/app/interactions/dialog/dialog-styling-sample/dialog-styling-sample.component.scss index e7978787f1..0a146da742 100644 --- a/src/app/interactions/dialog/dialog-styling-sample/dialog-styling-sample.component.scss +++ b/src/app/interactions/dialog/dialog-styling-sample/dialog-styling-sample.component.scss @@ -4,11 +4,10 @@ $my-dialog-theme: dialog-theme( $background: #011627, $title-color: #ecaa53, - $message-color: #fefefe, $border-radius: .3, ); -$dark-button: button-theme( +$dark-button: contained-button-theme( $background: #ecaa53, $foreground: #011627, ); @@ -19,7 +18,6 @@ $dark-button: button-theme( :host { ::ng-deep { - @include css-vars($my-dialog-theme); + @include css-vars($my-dialog-theme); } } - \ No newline at end of file diff --git a/src/app/interactions/query-builder/query-builder-style/query-builder-style.component.scss b/src/app/interactions/query-builder/query-builder-style/query-builder-style.component.scss index 256ee12da3..620b939624 100644 --- a/src/app/interactions/query-builder/query-builder-style/query-builder-style.component.scss +++ b/src/app/interactions/query-builder/query-builder-style/query-builder-style.component.scss @@ -8,23 +8,11 @@ $muted-yellow: #ffe482; $custom-query-builder: query-builder-theme( $schema: $dark-material-schema, $background: $black, - $subquery-header-background: #373532, - $subquery-border-color: #4e4d4a, - $header-background: $black, - $header-foreground: $yellow, - $color-expression-group-and: #4e78ea, - $color-expression-group-or: #b64fcb ); -$custom-button: button-theme( +$custom-button: flat-button-theme( $schema: $dark-material-schema, - $background: $black, $foreground: $yellow, - $hover-foreground: $black, - $hover-background: $yellow, - $focus-foreground: $yellow, - $focus-background: $black, - $border-color: $yellow ); $custom-input-group: input-group-theme( @@ -34,13 +22,11 @@ $custom-input-group: input-group-theme( $custom-chip: chip-theme( $schema: $dark-material-schema, $background: $yellow, - $text-color: $black ); -$custom-icon-button: icon-button-theme( +$custom-icon-button: outlined-icon-button-theme( $schema: $dark-material-schema, - $background: $yellow, - $foreground: $black + $foreground: $yellow, ); @include css-vars($custom-query-builder); @@ -51,10 +37,7 @@ $custom-icon-button: icon-button-theme( @include css-vars($custom-input-group); @include css-vars($custom-chip); @include css-vars($custom-icon-button); - - .igx-filter-tree__buttons { - @include css-vars($custom-button); - } + @include css-vars($custom-button); } } @@ -63,4 +46,3 @@ $custom-icon-button: icon-button-theme( height: 100%; overflow-y: auto; } - \ No newline at end of file diff --git a/src/app/interactions/slider/slider-styling-sample/app-slider-styling.component.scss b/src/app/interactions/slider/slider-styling-sample/app-slider-styling.component.scss index dc0e11d904..a0196efc1c 100644 --- a/src/app/interactions/slider/slider-styling-sample/app-slider-styling.component.scss +++ b/src/app/interactions/slider/slider-styling-sample/app-slider-styling.component.scss @@ -3,17 +3,8 @@ $custom-slider-theme: slider-theme( $track-color: #ff7400, - $track-hover-color: #ff7400, - - $thumb-color: #ff7400, - - $base-track-color: #ddd, - $base-track-hover-color: #ccc, - $tick-label-color: #b246c2, - $tick-color: #b246c2 ); @include css-vars($custom-slider-theme); - \ No newline at end of file diff --git a/src/app/layouts/accordion/accordion-style/accordion-style.component.scss b/src/app/layouts/accordion/accordion-style/accordion-style.component.scss index 78609314d7..d08f8342c4 100644 --- a/src/app/layouts/accordion/accordion-style/accordion-style.component.scss +++ b/src/app/layouts/accordion/accordion-style/accordion-style.component.scss @@ -2,10 +2,8 @@ @use "igniteui-angular/theming" as *; $custom-panel-theme: expansion-panel-theme( + $header-background: #011627, $expanded-margin: 10px, - $body-color: #282885, - $header-focus-background: #efefef ); @include css-vars($custom-panel-theme); - \ No newline at end of file diff --git a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss index de0aa9bc7a..0479f13a1d 100644 --- a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss +++ b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss @@ -3,13 +3,11 @@ $initials-avatar-theme: avatar-theme( $background: #72da67, - $color: #000000, $border-radius: 16px ); $icon-avatar-theme: avatar-theme( $background: #217346, - $color: #ffffff ); .initials{ diff --git a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss index f71ac841b4..ceb14c46ba 100644 --- a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss +++ b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss @@ -3,10 +3,7 @@ $colorful-card: card-theme( $background: #011627, - $header-text-color: #fefefe, $subtitle-text-color: #ecaa53, - $content-text-color: #fefefe ); @include css-vars($colorful-card); - \ No newline at end of file diff --git a/src/app/layouts/expansion-panel/expansion-styling/expansion-styling.component.scss b/src/app/layouts/expansion-panel/expansion-styling/expansion-styling.component.scss index f63225154f..478745d01c 100644 --- a/src/app/layouts/expansion-panel/expansion-styling/expansion-styling.component.scss +++ b/src/app/layouts/expansion-panel/expansion-styling/expansion-styling.component.scss @@ -1,29 +1,14 @@ @use "layout.scss"; @use "igniteui-angular/theming" as *; -// Add your brand colors -$my-primary-color:#353a4b; -$my-secondary-color: #ffd351; -$my-surface-color: #efefef; - -// Create custom palette. -$my-color-palette: palette( - $primary: $my-primary-color, - $secondary: $my-secondary-color, - $surface: $my-surface-color -); - // Create expansion panel theme $custom-panel-theme: expansion-panel-theme( - $header-background: color($my-color-palette, "primary", 700), - $header-focus-background: color($my-color-palette, "primary", 700), - $header-title-color: color($my-color-palette, "secondary"), - $header-icon-color: color($my-color-palette, "secondary"), - $body-background: color($my-color-palette, "primary", 700), - $body-color: color($my-color-palette, "secondary", 100), + $header-background: #353a4b, + $header-title-color: #ffd351, + $header-icon-color: #ffd351, + $body-background: #353a4b, $border-radius: .5 ); -// Apply the custom themes to the compoents mixins. +// Apply the custom themes to the components mixins. @include css-vars($custom-panel-theme); - \ No newline at end of file diff --git a/src/app/layouts/splitter/splitter-styling-sample/splitter-styling-sample.component.scss b/src/app/layouts/splitter/splitter-styling-sample/splitter-styling-sample.component.scss index 89d73459e7..759451add1 100644 --- a/src/app/layouts/splitter/splitter-styling-sample/splitter-styling-sample.component.scss +++ b/src/app/layouts/splitter/splitter-styling-sample/splitter-styling-sample.component.scss @@ -5,10 +5,7 @@ $splitter-theme: splitter-theme( $bar-color: #011627, $handle-color: #ecaa53, $expander-color: #ecaa53, - $border-radius: 0, - $focus-color: #ecaa53, $size: 4px ); @include css-vars($splitter-theme); - \ No newline at end of file diff --git a/src/app/layouts/stepper/stepper-styling-sample/stepper-styling-sample.component.scss b/src/app/layouts/stepper/stepper-styling-sample/stepper-styling-sample.component.scss index 1c29128b8b..49f21c084c 100644 --- a/src/app/layouts/stepper/stepper-styling-sample/stepper-styling-sample.component.scss +++ b/src/app/layouts/stepper/stepper-styling-sample/stepper-styling-sample.component.scss @@ -11,7 +11,6 @@ $stepper-theme: stepper-theme( $current-subtitle-color: #5f4691, $complete-indicator-background: #351e65, - $complete-indicator-outline: #351e65, $complete-title-color: red, $complete-subtitle-color: #5f4691, @@ -24,4 +23,3 @@ $stepper-theme: stepper-theme( ); @include css-vars($stepper-theme); - \ No newline at end of file diff --git a/src/app/layouts/tabbar/tabbar-style/tabbar-style.component.scss b/src/app/layouts/tabbar/tabbar-style/tabbar-style.component.scss index 605ef641aa..63360d9f6b 100644 --- a/src/app/layouts/tabbar/tabbar-style/tabbar-style.component.scss +++ b/src/app/layouts/tabbar/tabbar-style/tabbar-style.component.scss @@ -2,9 +2,8 @@ @use "igniteui-angular/theming" as *; $dark-bottom-nav: bottom-nav-theme( - $background: #292826, + $background: #011627, $icon-selected-color: #F4D45C ); @include css-vars($dark-bottom-nav); - \ No newline at end of file diff --git a/src/app/lists/combo/combo-styling/combo-styling.component.scss b/src/app/lists/combo/combo-styling/combo-styling.component.scss index e86653bb51..99f5a88490 100644 --- a/src/app/lists/combo/combo-styling/combo-styling.component.scss +++ b/src/app/lists/combo/combo-styling/combo-styling.component.scss @@ -2,31 +2,18 @@ @use "igniteui-angular/theming" as *; $custom-drop-down-theme: drop-down-theme( - $background-color: #d9f5d6, - $header-text-color: #1a5214, - $item-text-color: #1a5214, - - $focused-item-background: #72da67, - $focused-item-text-color: #1a5214, - $hover-item-background: #a0e698, - $hover-item-text-color: #1a5214, - - $selected-item-background: #a0e698, - $selected-item-text-color: #1a5214, - $selected-hover-item-background: #72da67, - $selected-hover-item-text-color: #1a5214, - $selected-focus-item-background: #72da67, - $selected-focus-item-text-color: #1a5214, + $background-color: #57a5cd, ); $custom-combo-theme: combo-theme( - $search-separator-border-color: #1a5214 + $search-separator-border-color: #1d3743, + $toggle-button-background: #57a5cd, ); $custom-checkbox-theme: checkbox-theme( $border-radius: 10px, - $fill-color: #1a5214, - $empty-color: #1a5214, + $fill-color: #1d3743, + $empty-color: #1d3743, ); :host ::ng-deep { @@ -34,4 +21,3 @@ $custom-checkbox-theme: checkbox-theme( @include css-vars($custom-combo-theme); @include css-vars($custom-checkbox-theme); } - \ No newline at end of file diff --git a/src/app/lists/list/list-sample-8/list-sample-8.component.scss b/src/app/lists/list/list-sample-8/list-sample-8.component.scss index 3b81ad8a3a..432249985e 100644 --- a/src/app/lists/list/list-sample-8/list-sample-8.component.scss +++ b/src/app/lists/list/list-sample-8/list-sample-8.component.scss @@ -2,8 +2,7 @@ @use "igniteui-angular/theming" as *; $my-list-theme: list-theme( - $background: #0568ab + $background: #57a5cd ); @include css-vars($my-list-theme); - \ No newline at end of file diff --git a/src/app/lists/tree/tree-styling/tree-styling.component.scss b/src/app/lists/tree/tree-styling/tree-styling.component.scss index cc8e15836e..a6caa0069b 100644 --- a/src/app/lists/tree/tree-styling/tree-styling.component.scss +++ b/src/app/lists/tree/tree-styling/tree-styling.component.scss @@ -2,10 +2,7 @@ @use "igniteui-angular/theming" as *; $custom-tree-theme: tree-theme( - $background-selected: #ffe6cc, - $background-active: #ecaa53, - $background-active-selected: #ff8c1a + $background: #ecaa53, ); @include css-vars($custom-tree-theme); - \ No newline at end of file diff --git a/src/app/menus/action-strip/action-strip-paragraph-styling/action-strip-paragraph-styling.component.scss b/src/app/menus/action-strip/action-strip-paragraph-styling/action-strip-paragraph-styling.component.scss index 874b7c8cbc..f04a1a04e7 100644 --- a/src/app/menus/action-strip/action-strip-paragraph-styling/action-strip-paragraph-styling.component.scss +++ b/src/app/menus/action-strip/action-strip-paragraph-styling/action-strip-paragraph-styling.component.scss @@ -2,12 +2,14 @@ @use "igniteui-angular/theming" as *; $custom-strip: action-strip-theme( - $background: rgba(150, 133, 143, 0.7), - $actions-background: rgba(109, 121, 147, 0.9), - $icon-color: null, - $delete-action: null, + $background: rgba(109, 121, 147, 0.2), + $actions-background: rgba(#011627, 0.9), $actions-border-radius: 0 ); +$custom-btn: flat-button-theme( + $foreground: #ecaa53 +); + @include css-vars($custom-strip); - \ No newline at end of file +@include css-vars($custom-btn); diff --git a/src/app/menus/navbar/navbar-style/navbar-style.component.scss b/src/app/menus/navbar/navbar-style/navbar-style.component.scss index fe39da7a35..117e7da741 100644 --- a/src/app/menus/navbar/navbar-style/navbar-style.component.scss +++ b/src/app/menus/navbar/navbar-style/navbar-style.component.scss @@ -1,11 +1,8 @@ @use "igniteui-angular/theming" as *; $custom-navbar-theme: navbar-theme( - $text-color: #151515, - $background: #dedede, - $idle-icon-color: #151515, - $hover-icon-color: #8c8c8c + $background: #011627, + $idle-icon-color: #ecaa53, ); @include css-vars($custom-navbar-theme); - \ No newline at end of file diff --git a/src/app/notifications/banner/banner-styling/banner-styling.component.scss b/src/app/notifications/banner/banner-styling/banner-styling.component.scss index 79c2c68cdc..63ffb88be4 100644 --- a/src/app/notifications/banner/banner-styling/banner-styling.component.scss +++ b/src/app/notifications/banner/banner-styling/banner-styling.component.scss @@ -1,10 +1,7 @@ @use "igniteui-angular/theming" as *; $custom-banner-theme: banner-theme( - $banner-message-color: #151515, - $banner-background: #dedede, - $banner-illustration-color: #666666 + $banner-background: #011627, ); @include css-vars($custom-banner-theme); - \ No newline at end of file diff --git a/src/app/notifications/toast/toast-style/toast-style.component.scss b/src/app/notifications/toast/toast-style/toast-style.component.scss index 1ded3f8f0d..0176582c9f 100644 --- a/src/app/notifications/toast/toast-style/toast-style.component.scss +++ b/src/app/notifications/toast/toast-style/toast-style.component.scss @@ -2,10 +2,9 @@ @use "igniteui-angular/theming" as *; $custom-toast-theme: toast-theme( - $background: #dedede, - $text-color: #151515, + $text-color: #ffcd0f, + $background: #292826, $border-radius: 12px ); @include css-vars($custom-toast-theme); - \ No newline at end of file diff --git a/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss b/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss index 4897af5dbe..7a54891f9c 100644 --- a/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss +++ b/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss @@ -2,19 +2,8 @@ @use "igniteui-angular/theming" as *; $custom-calendar-theme: calendar-theme( - $header-background: #345779, - $content-background: #fdfdfd, - $header-foreground: #ffffff, - $date-current-foreground: #2dabe8, - $navigation-color: #2dabe8, - $date-selected-foreground: #fdfdfd, - $date-current-background: #fdfdfd, - $navigation-hover-color: #345779, - $ym-current-foreground: #2dabe8, - $ym-hover-foreground: #2dabe8, - $picker-foreground: #2dabe8, - $picker-hover-foreground: #345779, + $header-background: #ecaa53, + $content-background: #011627, ); @include css-vars($custom-calendar-theme); - \ No newline at end of file diff --git a/src/app/scheduling/datepicker/datepicker-styling-sample/datepicker-styling-sample.component.scss b/src/app/scheduling/datepicker/datepicker-styling-sample/datepicker-styling-sample.component.scss index 3e089c5d14..0b67c51b99 100644 --- a/src/app/scheduling/datepicker/datepicker-styling-sample/datepicker-styling-sample.component.scss +++ b/src/app/scheduling/datepicker/datepicker-styling-sample/datepicker-styling-sample.component.scss @@ -2,23 +2,11 @@ @use "igniteui-angular/theming" as *; $custom-datepicker-theme: calendar-theme( - $header-background: #345779, - $content-background: #fdfdfd, - $header-foreground: #ffffff, - $date-current-foreground: #2dabe8, - $navigation-color: #2dabe8, - $date-selected-foreground: #fdfdfd, - $date-current-background: #fdfdfd, - $navigation-hover-color: #345779, - $ym-current-foreground: #2dabe8, - $ym-hover-foreground: #2dabe8, - $picker-foreground: #2dabe8, - $picker-hover-foreground: #345779, -); + $header-background: #57a5cd, + ); :host { ::ng-deep { @include css-vars($custom-datepicker-theme); } } - \ No newline at end of file diff --git a/src/app/scheduling/monthpicker/monthpicker-styling/monthpicker-styling.component.scss b/src/app/scheduling/monthpicker/monthpicker-styling/monthpicker-styling.component.scss index a06d05eee6..347190595a 100644 --- a/src/app/scheduling/monthpicker/monthpicker-styling/monthpicker-styling.component.scss +++ b/src/app/scheduling/monthpicker/monthpicker-styling/monthpicker-styling.component.scss @@ -3,15 +3,7 @@ $my-calendar-theme: calendar-theme( $border-radius: 15px, - $content-background: #011627, - $picker-background: #011627, - $ym-current-foreground: #ecaa53, - $ym-hover-background: #ecaa53, - $navigation-color: #ecaa53, - $picker-hover-foreground: #d37b08, - $navigation-hover-color: #d37b08, - $picker-foreground: #ecaa53, + $content-background: #57a5cd, ); @include css-vars($my-calendar-theme); - \ No newline at end of file diff --git a/src/app/scheduling/timepicker/timepicker-styling/timepicker-styling.component.scss b/src/app/scheduling/timepicker/timepicker-styling/timepicker-styling.component.scss index 450c9d6295..e7ab5ef825 100644 --- a/src/app/scheduling/timepicker/timepicker-styling/timepicker-styling.component.scss +++ b/src/app/scheduling/timepicker/timepicker-styling/timepicker-styling.component.scss @@ -6,17 +6,14 @@ $my-time-picker-theme: time-picker-theme( $hover-text-color: #ecaa53, $selected-text-color: #ecaa53, $header-background: #ecaa53, - $header-hour-text-color: #011627, $background-color: #011627 ); -$dark-button: button-theme( +$dark-button: flat-button-theme( $foreground: #ecaa53, - $hover-background: #ecaa53 ); :host ::ng-deep { @include css-vars($my-time-picker-theme); @include css-vars($dark-button); } - \ No newline at end of file