From d7f21c633a4f5f9385db040b315f63ea9413b34e Mon Sep 17 00:00:00 2001
From: Martijn Russchen <martijn@hackerone.com>
Date: Mon, 1 Dec 2025 12:12:22 +0100
Subject: [PATCH 1/2] fix: use em units for internal sizing to allow font-size
 inheritance

Converts internal sizing units from rem to em in the datepicker stylesheets.
This allows users to easily inherit font size from parent elements by
overriding the root .react-datepicker font-size to 'inherit' or '1em'.

The default appearance remains unchanged since the root element still
uses font-size: 0.8rem.

Fixes #624
---
 src/stylesheets/datepicker.scss | 34 ++++++++++++++++-----------------
 src/stylesheets/variables.scss  |  9 +++++----
 2 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/src/stylesheets/datepicker.scss b/src/stylesheets/datepicker.scss
index 2c87fe2f7c..2f9de7d86a 100644
--- a/src/stylesheets/datepicker.scss
+++ b/src/stylesheets/datepicker.scss
@@ -42,8 +42,8 @@
 
   .react-datepicker__time,
   .react-datepicker__time-box {
-    border-bottom-left-radius: 0.3rem;
-    border-bottom-right-radius: 0.3rem;
+    border-bottom-left-radius: 0.3em;
+    border-bottom-right-radius: 0.3em;
   }
 }
 
@@ -222,7 +222,7 @@ h2.react-datepicker__current-month {
 
   .react-datepicker__year-text {
     display: inline-block;
-    width: 4rem;
+    width: 4em;
     margin: 2px;
   }
 }
@@ -234,7 +234,7 @@ h2.react-datepicker__current-month {
   .react-datepicker__month-text,
   .react-datepicker__quarter-text {
     display: inline-block;
-    width: 4rem;
+    width: 4em;
     margin: 2px;
   }
 }
@@ -287,7 +287,7 @@ h2.react-datepicker__current-month {
   &--with-today-button {
     display: inline;
     border: 1px solid #aeaeae;
-    border-radius: 0.3rem;
+    border-radius: 0.3em;
     position: absolute;
     right: -87px;
     top: 0;
@@ -296,14 +296,14 @@ h2.react-datepicker__current-month {
   .react-datepicker__time {
     position: relative;
     background: white;
-    border-bottom-right-radius: 0.3rem;
+    border-bottom-right-radius: 0.3em;
 
     .react-datepicker__time-box {
       width: 85px;
       overflow-x: hidden;
       margin: 0 auto;
       text-align: center;
-      border-bottom-right-radius: 0.3rem;
+      border-bottom-right-radius: 0.3em;
 
       ul.react-datepicker__time-list {
         list-style: none;
@@ -552,7 +552,7 @@ h2.react-datepicker__current-month {
 
   .react-datepicker__calendar-icon {
     position: absolute;
-    padding: 0.5rem;
+    padding: 0.5em;
     box-sizing: content-box;
   }
 }
@@ -725,16 +725,16 @@ h2.react-datepicker__current-month {
   .react-datepicker__day-name,
   .react-datepicker__day,
   .react-datepicker__time-name {
-    width: 3rem;
-    line-height: 3rem;
+    width: 3em;
+    line-height: 3em;
   }
 
   @media (max-width: 400px), (max-height: 550px) {
     .react-datepicker__day-name,
     .react-datepicker__day,
     .react-datepicker__time-name {
-      width: 2rem;
-      line-height: 2rem;
+      width: 2em;
+      line-height: 2em;
     }
   }
 
@@ -745,10 +745,10 @@ h2.react-datepicker__current-month {
 }
 
 .react-datepicker__children-container {
-  width: 13.8rem;
-  margin: 0.4rem;
-  padding-right: 0.2rem;
-  padding-left: 0.2rem;
+  width: 13.8em;
+  margin: 0.4em;
+  padding-right: 0.2em;
+  padding-left: 0.2em;
   height: auto;
 }
 
@@ -771,5 +771,5 @@ h2.react-datepicker__current-month {
 }
 
 .react-datepicker-popper-offset {
-  margin-top: -0.7rem;
+  margin-top: -0.7em;
 }
diff --git a/src/stylesheets/variables.scss b/src/stylesheets/variables.scss
index 750d2011fe..5b49741ace 100644
--- a/src/stylesheets/variables.scss
+++ b/src/stylesheets/variables.scss
@@ -15,9 +15,10 @@ $datepicker__navigation-disabled-color: color.adjust(
 ) !default;
 $datepicker__border: 1px solid $datepicker__border-color;
 $datepicker__border-radius: 0.3rem !default;
-$datepicker__day-margin: 0.166rem !default;
+$datepicker__day-margin: 0.166em !default;
 $datepicker__font-size: 0.8rem !default;
-$datepicker__font-family: "Helvetica Neue", helvetica, arial, sans-serif !default;
-$datepicker__item-size: 1.7rem !default;
-$datepicker__margin: 0.4rem !default;
+$datepicker__font-family:
+  "Helvetica Neue", helvetica, arial, sans-serif !default;
+$datepicker__item-size: 1.7em !default;
+$datepicker__margin: 0.4em !default;
 $datepicker__navigation-button-size: 32px !default;

From 44113521c50795e0ed42e630b51650f0f7af2580 Mon Sep 17 00:00:00 2001
From: Martijn Russchen <martijn@hackerone.com>
Date: Mon, 1 Dec 2025 12:22:10 +0100
Subject: [PATCH 2/2] fix lint issue

---
 src/stylesheets/variables.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/stylesheets/variables.scss b/src/stylesheets/variables.scss
index 5b49741ace..69be2e1a39 100644
--- a/src/stylesheets/variables.scss
+++ b/src/stylesheets/variables.scss
@@ -17,6 +17,7 @@ $datepicker__border: 1px solid $datepicker__border-color;
 $datepicker__border-radius: 0.3rem !default;
 $datepicker__day-margin: 0.166em !default;
 $datepicker__font-size: 0.8rem !default;
+// stylelint-disable-next-line scss/dollar-variable-colon-space-after
 $datepicker__font-family:
   "Helvetica Neue", helvetica, arial, sans-serif !default;
 $datepicker__item-size: 1.7em !default;