From 11130cfe54853354e849770d6c7da912d9a26573 Mon Sep 17 00:00:00 2001
From: Guillermo Pages <mail@guillermo.at>
Date: Fri, 7 Feb 2025 15:41:06 +0100
Subject: [PATCH] fix: hover has dark color

---
 src/components/calendar/Day/Day.module.scss   | 75 ++++++++++++++++++-
 src/components/calendar/Day/index.tsx         |  2 +-
 .../calendar/DayNumber/DayNumber.module.scss  | 64 ----------------
 src/components/calendar/DayNumber/index.tsx   |  2 +-
 src/components/calendar/shared/_colors.scss   | 17 +++--
 5 files changed, 88 insertions(+), 72 deletions(-)
 delete mode 100644 src/components/calendar/DayNumber/DayNumber.module.scss

diff --git a/src/components/calendar/Day/Day.module.scss b/src/components/calendar/Day/Day.module.scss
index 91c1b55..352856d 100644
--- a/src/components/calendar/Day/Day.module.scss
+++ b/src/components/calendar/Day/Day.module.scss
@@ -52,7 +52,7 @@
 
       &:hover {
         box-shadow: shared.$shadow-hover;
-        background: colors.$day-content-defaultmode-selectingstate-midrange-hover-background-color;
+        background: colors.$day-color-interactive-hover;
         z-index: 1;
       }
 
@@ -61,6 +61,12 @@
         box-shadow: shared.$shadow-focus;
         z-index: 1;
       }
+
+      &.Day__Container--greyed {
+        &:hover {
+          background: colors.$day-content-greyedmode-interactivestate-any-hover-background-color;
+        }
+      }
     }
 
     &--otherMonth {
@@ -461,3 +467,70 @@
     text-align: center;
   }
 }
+
+.DayNumber {
+  &__Container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__Svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  &__Text {
+    fill: colors.$day-content-defaultmode-defaultstate-color;
+    font-weight: 700;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+    font-feature-settings: 'tnum' on, 'lnum' on;
+
+    .Day__Container--interactive:hover &:not(&--selected) {
+      fill: colors.$day-color-interactive-text-hover;
+    }
+
+    // Greyed state
+    &--greyed {
+      fill: colors.$day-content-greyedmode-defaultstate-color;
+    }
+
+    // Selected states
+    &--selected {
+      fill: colors.$day-content-defaultmode-selectedstate-midrange-color;
+
+      .DayNumber__Container--greyed & {
+        fill: colors.$day-content-greyedmode-selectedstate-midrange-color;
+      }
+    }
+
+    // Selecting states
+    &--selecting {
+      fill: colors.$day-content-defaultmode-selectingstate-midrange-color;
+
+      .DayNumber__Container--greyed & {
+        fill: colors.$day-content-greyedmode-selectingstate-midrange-color;
+      }
+    }
+
+    // Range start
+    &--rangeStart:not(&--rangeEnd) {
+      fill: colors.$day-content-defaultmode-selectedstate-rangestart-color;
+
+      .DayNumber__Container--greyed & {
+        fill: colors.$day-content-greyedmode-selectedstate-rangestart-color;
+      }
+    }
+
+    // Range end
+    &--rangeEnd:not(&--rangeStart) {
+      fill: colors.$day-content-defaultmode-selectedstate-rangeend-color;
+
+      .DayNumber__Container--greyed & {
+        fill: colors.$day-content-greyedmode-selectedstate-rangeend-color;
+      }
+    }
+  }
+}
diff --git a/src/components/calendar/Day/index.tsx b/src/components/calendar/Day/index.tsx
index 4d28f70..6457268 100644
--- a/src/components/calendar/Day/index.tsx
+++ b/src/components/calendar/Day/index.tsx
@@ -75,7 +75,7 @@ export const Day: React.FC<DayProps> = ({
         </div>
       )}
       <div className={styles.Day__Content}>
-        <DayNumber 
+        <DayNumber
           number={parseInt(format(date, 'd'), 10)}
           proportion={fontProportion}
           variations={variations}
diff --git a/src/components/calendar/DayNumber/DayNumber.module.scss b/src/components/calendar/DayNumber/DayNumber.module.scss
deleted file mode 100644
index 94879af..0000000
--- a/src/components/calendar/DayNumber/DayNumber.module.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-@use '../shared/colors' as colors;
-
-.DayNumber {
-  &__Container {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &__Svg {
-    width: 100%;
-    height: 100%;
-  }
-
-  &__Text {
-    fill: colors.$day-content-defaultmode-defaultstate-color;
-    font-weight: 700;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-    font-feature-settings: 'tnum' on, 'lnum' on;
-
-    // Greyed state
-    &--greyed {
-      fill: colors.$day-content-greyedmode-defaultstate-color;
-    }
-
-    // Selected states
-    &--selected {
-      fill: colors.$day-content-defaultmode-selectedstate-midrange-color;
-
-      .DayNumber__Container--greyed & {
-        fill: colors.$day-content-greyedmode-selectedstate-midrange-color;
-      }
-    }
-
-    // Selecting states
-    &--selecting {
-      fill: colors.$day-content-defaultmode-selectingstate-midrange-color;
-
-      .DayNumber__Container--greyed & {
-        fill: colors.$day-content-greyedmode-selectingstate-midrange-color;
-      }
-    }
-
-    // Range start
-    &--rangeStart:not(&--rangeEnd) {
-      fill: colors.$day-content-defaultmode-selectedstate-rangestart-color;
-
-      .DayNumber__Container--greyed & {
-        fill: colors.$day-content-greyedmode-selectedstate-rangestart-color;
-      }
-    }
-
-    // Range end
-    &--rangeEnd:not(&--rangeStart) {
-      fill: colors.$day-content-defaultmode-selectedstate-rangeend-color;
-
-      .DayNumber__Container--greyed & {
-        fill: colors.$day-content-greyedmode-selectedstate-rangeend-color;
-      }
-    }
-  }
-}
diff --git a/src/components/calendar/DayNumber/index.tsx b/src/components/calendar/DayNumber/index.tsx
index 09b7f35..e105546 100644
--- a/src/components/calendar/DayNumber/index.tsx
+++ b/src/components/calendar/DayNumber/index.tsx
@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useState } from 'react';
-import styles from './DayNumber.module.scss';
+import styles from '../Day/Day.module.scss';
 import classNames from 'classnames';
 import { DayVariation } from '../../../types/calendar';
 
diff --git a/src/components/calendar/shared/_colors.scss b/src/components/calendar/shared/_colors.scss
index caa0ab3..6f6915e 100644
--- a/src/components/calendar/shared/_colors.scss
+++ b/src/components/calendar/shared/_colors.scss
@@ -21,8 +21,12 @@ $day-color-greyed: #bcbcbc; // day greyed mode default state container
 $day-color-selected: #e3f2fd; // day default mode selected state container
 $day-color-selected-hover: #bbdefb; // day default mode selected state hover container
 $day-color-selecting: #f5f5f5; // day default mode selecting state container
+$day-color-selecting-rangestartend-content: #aeaeae; // day default mode selecting state container
 $day-color-selecting-border: #e0e0e0; // day default|greyed mode selecting container border
-$day-color-selecting-hover: #eeeeee;
+$day-color-selecting-hover: #727272;
+
+$day-color-interactive-hover: #939393;
+$day-color-interactive-text-hover: #ffffff;
 
 // Header colors
 $day-color-header: #2c2c2c; // day default mode default state header
@@ -44,6 +48,9 @@ $day-content-greyedmode-defaultstate-color: $day-color-text-light;
 $day-header-greyedmode-defaultstate-background-color: $day-color-header-greyed;
 $day-header-greyedmode-defaultstate-color: $day-color-header-greyed-text;
 
+// interactive state greyedmode
+$day-content-greyedmode-interactivestate-any-hover-background-color: color.mix($day-color-interactive-hover, $day-color-greyed, 80%);
+
 // Selecting State Colors
 $day-content-defaultmode-selectingstate-midrange-background-color: $day-color-selecting;
 $day-content-defaultmode-selectingstate-midrange-color: $day-color-text;
@@ -106,11 +113,11 @@ $day-header-greyedmode-selectedstate-rangeend-color: $day-color-header-text; //
 $day-header-greyedmode-selectedstate-rangeend-hover-background-color: color.adjust(color.mix($day-color-primary-dark, $day-color-greyed, 80%), $lightness: 10%);
 
 // Selecting State for Range
-$day-content-defaultmode-selectingstate-rangestart-background-color: $day-color-selecting;
+$day-content-defaultmode-selectingstate-rangestart-background-color: $day-color-selecting-rangestartend-content;
 $day-content-defaultmode-selectingstate-rangestart-color: $day-color-text;
 $day-content-defaultmode-selectingstate-rangestart-hover-background-color: $day-color-selecting-hover;
 
-$day-content-greyedmode-selectingstate-rangestart-background-color: color.mix($day-color-selecting, $day-color-greyed, 80%);
+$day-content-greyedmode-selectingstate-rangestart-background-color: color.mix($day-color-selecting-rangestartend-content, $day-color-greyed, 80%);
 $day-content-greyedmode-selectingstate-rangestart-color: $day-color-text-light;
 $day-content-greyedmode-selectingstate-rangestart-hover-background-color: color.mix($day-color-selecting-hover, $day-color-greyed, 80%);
 
@@ -123,11 +130,11 @@ $day-header-greyedmode-selectingstate-rangestart-color: $day-color-header-greyed
 $day-header-greyedmode-selectingstate-rangestart-hover-background-color: color.adjust(color.mix($day-color-header-greyed, $day-color-selecting, 80%), $lightness: 10%);
 
 // Selecting Range End
-$day-content-defaultmode-selectingstate-rangeend-background-color: $day-color-selecting;
+$day-content-defaultmode-selectingstate-rangeend-background-color: $day-color-selecting-rangestartend-content;
 $day-content-defaultmode-selectingstate-rangeend-color: $day-color-text;
 $day-content-defaultmode-selectingstate-rangeend-hover-background-color: $day-color-selecting-hover;
 
-$day-content-greyedmode-selectingstate-rangeend-background-color: color.mix($day-color-selecting, $day-color-greyed, 80%);
+$day-content-greyedmode-selectingstate-rangeend-background-color: color.mix($day-color-selecting-rangestartend-content, $day-color-greyed, 80%);
 $day-content-greyedmode-selectingstate-rangeend-color: $day-color-text-light;
 $day-content-greyedmode-selectingstate-rangeend-hover-background-color: color.mix($day-color-selecting-hover, $day-color-greyed, 80%);