Scheduler - Form - dynamic subject icon color (DevExpress#31490)

Signed-off-by: Eldar Iusupzhanov <84278206+Tucchhaa@users.noreply.github.com>

Author: Tucchhaa

apps/demos/testing/widgets/scheduler/etalons/scheduler_resources_appointment_popup (fluent.blue.light).png

@@ -64,7 +64,6 @@ $scheduler-workspace-accent-color: $base-accent !default;
 $scheduler-current-time-cell-color: $base-accent !default;
 $scheduler-time-indicator-color: #eb5757 !default;
 $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default;
-$scheduler-form-subject-icon-color: null !default;
 $scheduler-form-icon-color: $base-icon-color !default;
 $scheduler-popup-title-bg: $scheduler-workspace-background-color !default;
 $scheduler-workspace-month-text-color: color.change($base-text-color, $alpha: 0.54) !default;
@@ -90,7 +89,6 @@ $agenda-appointment-text-color: $base-text-color !default;
 $header-panel-cell-date: null !default;
 
 @if $mode == "light" {
-  $scheduler-form-subject-icon-color: lighten(saturate(adjust-hue($base-accent, 3), 2.21), 44.31) !default;
   $scheduler-workspace-month-text-color: #707070;
   $scheduler-appointment-text-color: #000 !default;
   $scheduler-panel-text-color: #707070;
@@ -112,7 +110,6 @@ $header-panel-cell-date: null !default;
 }
 
 @if $mode == "dark" {
-  $scheduler-form-subject-icon-color: darken(desaturate(adjust-hue($base-accent, -3), 11.06), 36.27);
   $scheduler-workspace-month-text-color: #999;
   $scheduler-appointment-base-color: darken($base-accent, 48%) !default;
   $scheduler-appointment-text-color: #fff !default;

apps/demos/testing/widgets/scheduler/etalons/scheduler_resources_appointment_popup (material.blue.light).png

@@ -629,7 +629,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
     }
 
     .dx-scheduler-form-subject-group .dx-scheduler-form-icon {
-      color: $scheduler-form-subject-icon-color;
+      color: $scheduler-appointment-base-color;
     }
 
     .dx-scheduler-form-description-group .dx-scheduler-form-icon,

e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form.png (recurring=true,allDay=true,theme=material.blue.light).png

@@ -68,7 +68,6 @@ $scheduler-current-time-cell-color: $base-accent !default;
 $scheduler-time-indicator-color: null !default;
 $scheduler-dd-appointment-hover-text-color: null !default;
 $scheduler-form-icon-color: $base-icon-color !default;
-$scheduler-form-subject-icon-color: null !default;
 $scheduler-popup-title-bg: $scheduler-workspace-background-color !default;
 $scheduler-workspace-month-text-color: null !default;
 $scheduler-dropdown-appointment-date-color: null !default;
@@ -116,7 +115,6 @@ $agenda-appointment-text-color: null !default;
   $scheduler-panel-text-color: $base-header-color !default;
   $scheduler-time-indicator-color: lighten($scheduler-current-time-cell-color, 15%) !default;
   $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default;
-  $scheduler-form-subject-icon-color: darken(desaturate($base-accent, 44.18), 25.88) !default;
   $scheduler-workspace-month-text-color: $month-text-color-light !default;
   $scheduler-dropdown-appointment-date-color: lighten($base-text-color, 38.5%) !default;
   $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default;
@@ -151,7 +149,6 @@ $agenda-appointment-text-color: null !default;
   $scheduler-appointment-base-color: $base-accent !default;
   $scheduler-appointment-text-color: $base-text-color !default;
   $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default;
-  $scheduler-form-subject-icon-color: $base-accent !default;
   $scheduler-appointment-focus-color: extcolor.difference(#fff, $base-text-color) !default;
   $scheduler-appointment-start-color: $base-inverted-bg !default;
   $scheduler-workspace-focused-cell-color: lighten($base-accent, 5%) !default;
@@ -195,7 +192,6 @@ $agenda-appointment-text-color: null !default;
   $scheduler-panel-text-color: $base-text-color !default;
   $scheduler-time-indicator-color: lighten($scheduler-current-time-cell-color, 15%) !default;
   $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default;
-  $scheduler-form-subject-icon-color: darken(desaturate($base-accent, 44.18), 25.88) !default;
   $scheduler-workspace-month-text-color: $month-text-color-dark !default;
   $scheduler-dropdown-appointment-date-color: lighten($base-text-color, 38.5%) !default;
   $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default;
@@ -237,7 +233,6 @@ $agenda-appointment-text-color: null !default;
   $scheduler-panel-text-color: $base-text-color !default;
   $scheduler-time-indicator-color: lighten($scheduler-current-time-cell-color, 15%) !default;
   $scheduler-dd-appointment-hover-text-color: #fff !default;
-  $scheduler-form-subject-icon-color: darken(desaturate($base-accent, 44.18), 25.88) !default;
   $scheduler-workspace-month-text-color: $month-text-color-dark !default;
   $scheduler-dropdown-appointment-date-color: lighten($base-text-color, 38.5%) !default;
   $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default;
@@ -277,7 +272,6 @@ $agenda-appointment-text-color: null !default;
   $scheduler-panel-text-color: $base-header-color !default;
   $scheduler-time-indicator-color: lighten($scheduler-current-time-cell-color, 15%) !default;
   $scheduler-dd-appointment-hover-text-color: $base-text-color !default;
-  $scheduler-form-subject-icon-color: darken(desaturate($base-accent, 44.18), 25.88) !default;
   $scheduler-workspace-month-text-color: $month-text-color-dark !default;
   $scheduler-dropdown-appointment-date-color: lighten($base-text-color, 38.5%) !default;
   $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default;
@@ -317,7 +311,6 @@ $agenda-appointment-text-color: null !default;
   $scheduler-panel-text-color: lighten($base-text-color, 38.5%) !default;
   $scheduler-time-indicator-color: lighten($scheduler-current-time-cell-color, 15%) !default;
   $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default;
-  $scheduler-form-subject-icon-color: lighten(desaturate(adjust-hue($base-accent, 1), 7.32), 43.33) !default;
   $scheduler-workspace-month-text-color: lighten($base-text-color, 38.5%) !default;
   $scheduler-dropdown-appointment-date-color: lighten($base-text-color, 38.5%) !default;
   $scheduler-time-panel-background-color: $scheduler-workspace-background-color !default;
@@ -359,7 +352,6 @@ $agenda-appointment-text-color: null !default;
   $scheduler-panel-text-color: $base-text-color !default;
   $scheduler-time-indicator-color: lighten($scheduler-current-time-cell-color, 15%) !default;
   $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default;
-  $scheduler-form-subject-icon-color: lighten(desaturate(adjust-hue($base-accent, 1), 7.32), 43.33) !default;
   $scheduler-workspace-month-text-color: $month-text-color-light !default;
   $scheduler-dropdown-appointment-date-color: lighten($base-text-color, 38.5%) !default;
   $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default;
@@ -398,7 +390,6 @@ $agenda-appointment-text-color: null !default;
   $scheduler-panel-text-color: $base-text-color !default;
   $scheduler-time-indicator-color: lighten($scheduler-current-time-cell-color, 15%) !default;
   $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default;
-  $scheduler-form-subject-icon-color: lighten(desaturate(adjust-hue($base-accent, 1), 7.32), 43.33) !default;
   $scheduler-workspace-month-text-color: $month-text-color-light !default;
   $scheduler-dropdown-appointment-date-color: lighten($base-text-color, 38.5%) !default;
   $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default;

packages/devextreme-scss/scss/widgets/fluent/scheduler/_colors.scss

@@ -277,7 +277,7 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c
     }
 
     .dx-scheduler-form-subject-group .dx-scheduler-form-icon {
-      color: $scheduler-form-subject-icon-color;
+      color: $scheduler-appointment-base-color;
     }
 
     .dx-scheduler-form-description-group .dx-scheduler-form-icon,

packages/devextreme-scss/scss/widgets/fluent/scheduler/_index.scss

@@ -64,7 +64,6 @@ $scheduler-current-time-cell-color: $base-accent !default;
 $scheduler-time-indicator-color: #eb5757 !default;
 $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default;
 $scheduler-form-icon-color: $base-icon-color !default;
-$scheduler-form-subject-icon-color: color.change($base-accent, $alpha: 0.24) !default;
 $scheduler-popup-title-bg: $scheduler-workspace-background-color !default;
 $scheduler-workspace-month-text-color: color.change($base-text-color, $alpha: 0.54) !default;
 $scheduler-dropdown-appointment-date-color: color.change($base-text-color, $alpha: 0.54) !default;

packages/devextreme-scss/scss/widgets/generic/scheduler/_colors.scss

@@ -581,7 +581,7 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
     }
 
     .dx-scheduler-form-subject-group .dx-scheduler-form-icon {
-      color: $scheduler-form-subject-icon-color;
+      color: $scheduler-appointment-base-color;
     }
 
     .dx-scheduler-form-description-group .dx-scheduler-form-icon,

packages/devextreme-scss/scss/widgets/generic/scheduler/_index.scss

@@ -27,6 +27,10 @@ export class PopupModel {
     return this.element.querySelector('.dx-scheduler-form-recurrence-group');
   }
 
+  get subjectIcon(): Element | null {
+    return this.element.querySelector('.dx-scheduler-form-subject-group .dx-scheduler-form-icon .dx-icon');
+  }
+
   get startDate(): Element | null {
     return this.element.querySelector('.dx-scheduler-form-start-date-editor .dx-datebox.dx-widget');
   }