From b45704d5133fab977d49a0ae08f70db6c9e689fe Mon Sep 17 00:00:00 2001
From: Jared Snider <116684653+JaredSnider-Bitwarden@users.noreply.github.com>
Date: Fri, 11 Nov 2022 15:41:07 -0500
Subject: [PATCH] =?UTF-8?q?SG-428=20-=20Browser=20Extension=20-=20Send=20-?=
 =?UTF-8?q?=20Expiration=20/=20Deletion=20date=20calendar=20icon=20+?=
 =?UTF-8?q?=E2=80=A6=20(#4034)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Browser Extension - Send - Expiration / Deletion date calendar icon + datepicker pop up now respect theme better in Chrome / Chromium based browsers and Safari (Firefox datepicker pop up doesn't seem to have an easy mechanism for theming)

* SG-428 - Extension - Iconography for date inputs for Chromium browsers now reflects theme colors properly + hover states; icon not shown on non-Chromium browsers

* Variables.scss - ran prettier locally after tweaking comments to pass eslint checks
---
 apps/browser/src/popup/scss/base.scss      | 19 +++++++++++++++++
 apps/browser/src/popup/scss/variables.scss | 24 ++++++++++++++++++++++
 2 files changed, 43 insertions(+)

diff --git a/apps/browser/src/popup/scss/base.scss b/apps/browser/src/popup/scss/base.scss
index 079b039939..29548d17aa 100644
--- a/apps/browser/src/popup/scss/base.scss
+++ b/apps/browser/src/popup/scss/base.scss
@@ -98,6 +98,25 @@ button {
   font-family: $font-family-sans-serif;
 }
 
+input[type*="date"] {
+  @include themify($themes) {
+    color-scheme: themed("dateInputColorScheme");
+  }
+}
+
+::-webkit-calendar-picker-indicator {
+  @include themify($themes) {
+    filter: themed("webkitCalendarPickerFilter");
+  }
+}
+
+::-webkit-calendar-picker-indicator:hover {
+  @include themify($themes) {
+    filter: themed("webkitCalendarPickerHoverFilter");
+  }
+  cursor: pointer;
+}
+
 select {
   width: 100%;
   padding: 0.35rem;
diff --git a/apps/browser/src/popup/scss/variables.scss b/apps/browser/src/popup/scss/variables.scss
index 14b2c312b1..0e99f1058a 100644
--- a/apps/browser/src/popup/scss/variables.scss
+++ b/apps/browser/src/popup/scss/variables.scss
@@ -114,6 +114,13 @@ $themes: (
     toastTextColor: #ffffff,
     svgSuffix: "-light.svg",
     transparentColor: rgba(0, 0, 0, 0),
+    dateInputColorScheme: light,
+    // https://stackoverflow.com/a/53336754
+    webkitCalendarPickerFilter: invert(46%) sepia(69%) saturate(6397%) hue-rotate(211deg)
+      brightness(85%) contrast(103%),
+    // light has no hover so use same color
+    webkitCalendarPickerHoverFilter: invert(46%) sepia(69%) saturate(6397%) hue-rotate(211deg)
+      brightness(85%) contrast(103%),
   ),
   dark: (
     textColor: #ffffff,
@@ -168,6 +175,12 @@ $themes: (
     toastTextColor: #1f242e,
     svgSuffix: "-dark.svg",
     transparentColor: rgba(0, 0, 0, 0),
+    dateInputColorScheme: dark,
+    // https://stackoverflow.com/a/53336754 - must prepend brightness(0) saturate(100%) to dark themed date inputs
+    webkitCalendarPickerFilter: brightness(0) saturate(100%) invert(86%) sepia(19%) saturate(152%)
+      hue-rotate(184deg) brightness(87%) contrast(93%),
+    webkitCalendarPickerHoverFilter: brightness(0) saturate(100%) invert(100%) sepia(0%)
+      saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%),
   ),
   nord: (
     textColor: $nord5,
@@ -222,6 +235,12 @@ $themes: (
     toastTextColor: #ffffff,
     svgSuffix: "-dark.svg",
     transparentColor: rgba(0, 0, 0, 0),
+    dateInputColorScheme: dark,
+    webkitCalendarPickerFilter: brightness(0) saturate(100%) invert(94%) sepia(5%) saturate(454%)
+      hue-rotate(185deg) brightness(93%) contrast(96%),
+    // has no hover so use same color
+    webkitCalendarPickerHoverFilter: brightness(0) saturate(100%) invert(94%) sepia(5%)
+      saturate(454%) hue-rotate(185deg) brightness(93%) contrast(96%),
   ),
   solarizedDark: (
     textColor: $solarizedDarkBase2,
@@ -276,6 +295,11 @@ $themes: (
     toastTextColor: #ffffff,
     svgSuffix: "-solarized.svg",
     transparentColor: rgba(0, 0, 0, 0),
+    dateInputColorScheme: dark,
+    webkitCalendarPickerFilter: brightness(0) saturate(100%) invert(61%) sepia(13%) saturate(289%)
+      hue-rotate(138deg) brightness(92%) contrast(90%),
+    webkitCalendarPickerHoverFilter: brightness(0) saturate(100%) invert(94%) sepia(10%)
+      saturate(462%) hue-rotate(345deg) brightness(103%) contrast(87%),
   ),
 );