fix(datepicker): disabled selected styling (#1398)

allianz · Dec 4, 2024 · c55a66b · c55a66b
1 parent d33c2da
commit c55a66b
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git a/projects/ng-aquila/src/datefield/datepicker/calendar-body.scss b/projects/ng-aquila/src/datefield/datepicker/calendar-body.scss
@@ -92,10 +92,6 @@ $item-size: nx-spacer(3m);
         @include focus-style;
     }
 
-    &.nx-calendar-body-disabled {
-        color: v(datefield-cell-disabled-color);
-    }
-
     .nx-calendar-body-cell-content:not(.nx-calendar-body-selected) {
         background-color: v(datefield-cell-focused-background-color);
 
@@ -106,12 +102,27 @@ $item-size: nx-spacer(3m);
 }
 
 .nx-calendar-body-disabled {
-    .nx-calendar-body-today {
-        color: v(datefield-controls-disabled-color) !important;
+    color: v(datefield-cell-disabled-color);
+
+    /* Disabled current date */
+    &.nx-calendar-body-today {
+        color: v(datefield-cell-disabled-today-color) !important;
         &::after {
-            background-color: v(datefield-controls-disabled-color) !important;
+            background-color: v(datefield-cell-disabled-today-color) !important;
+        }
+
+        /* Disabled selected current date */
+        &.nx-calendar-body-selected {
+            &::after {
+                background-color: v(datefield-cell-selected-color) !important;
+            }
         }
     }
+
+    /* Disabled selected date */
+    &.nx-calendar-body-selected {
+        background-color: v(datefield-cell-disabled-selected-background-color) !important;
+    }
 }
 
 :not(.nx-calendar-body-disabled) {

diff --git a/projects/ng-aquila/src/shared-styles/theming/tokens.scss b/projects/ng-aquila/src/shared-styles/theming/tokens.scss
@@ -731,6 +731,8 @@ $nx-theme: (
     datefield-cell-hover-background-color: ui-03,
     datefield-cell-hover-color: text-01,
     datefield-cell-disabled-color: #767676,
+    datefield-cell-disabled-today-color: #b6b6b6,
+    datefield-cell-disabled-selected-background-color: #b6b6b6,
     datefield-cell-focused-background-color: ui-01,
     datefield-header-cell-color: datefield-cell-disabled-color,
     datefield-header-cell-font-weight: 600,