From 13e5209458045bcde28da85501af3ee1c21b8456 Mon Sep 17 00:00:00 2001
From: "Rong Sen Ng (motss)" <wes.ngrongsen@gmail.com>
Date: Wed, 9 Mar 2022 23:01:36 +0800
Subject: [PATCH] fix: fix stylings not using the correct CSS Variables

Signed-off-by: Rong Sen Ng (motss) <wes.ngrongsen@gmail.com>
---
 src/month-calendar/stylings.ts |  6 +++++-
 src/stylings.ts                | 16 ++++++++--------
 src/year-grid/stylings.ts      |  6 +++++-
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/month-calendar/stylings.ts b/src/month-calendar/stylings.ts
index 2a079526..e1aa3556 100644
--- a/src/month-calendar/stylings.ts
+++ b/src/month-calendar/stylings.ts
@@ -97,7 +97,7 @@ td {
 }
 .calendar-day:not([aria-disabled="true"]):focus::before,
 .calendar-day:not([aria-disabled="true"]):hover::before {
-  --_border-color: var(--_selected-focus);
+  --_border-color: var(--_focus);
   --_border-width: 1px;
   --_inset: 0px;
 
@@ -113,9 +113,13 @@ td {
   color: var(--_on-primary);
 }
 .calendar-day[aria-selected="true"]:focus::before {
+  --_border-color: var(--_selected-focus);
+
   color: var(--_selected-on-focus);
 }
 .calendar-day[aria-selected="true"]:hover::before {
+  --_border-color: var(--_selected-hover);
+
   color: var(--_selected-on-hover);
 }
 .calendar-day.day--today:not([aria-selected="true"])::before {
diff --git a/src/stylings.ts b/src/stylings.ts
index 6713181e..f12ecaca 100644
--- a/src/stylings.ts
+++ b/src/stylings.ts
@@ -4,20 +4,20 @@ export const absoluteHidden = css`[hidden] { display: none !important; }`;
 
 export const baseStyling = css`
 :host {
-  --_focus: var(--app-focus, #b5b5b5);
-  --_hover: var(--app-hover, #b5b5b5);
+  --_focus: var(--app-focus, #000);
+  --_hover: var(--app-hover, #6200ee);
   --_on-disabled: var(--app-on-disabled, rgba(0, 0, 0, .38));
-  --_on-focus: var(--app-on-focus, #b5b5b5);
-  --_on-hover: var(--app-on-hover, #b5b5b5);
+  --_on-focus: var(--app-on-focus, #000);
+  --_on-hover: var(--app-on-hover, #000);
   --_on-primary: var(--app-on-primary, #fff);
   --_on-surface: var(--app-on-surface, #000);
   --_on-today: var(--app-on-today, #000);
   --_on-weekday: var(--app-on-weekday, #8c8c8c);
   --_primary: var(--app-primary, #6200ee);
-  --_selected-focus: var(--app-selected-focus);
-  --_selected-hover: var(--app-selected-hover);
-  --_selected-on-focus: var(--app-selected-on-focus);
-  --_selected-on-hover: var(--app-selected-on-hover);
+  --_selected-focus: var(--app-selected-focus, #000);
+  --_selected-hover: var(--app-selected-hover, #6200ee);
+  --_selected-on-focus: var(--app-selected-on-focus, #fff);
+  --_selected-on-hover: var(--app-selected-on-hover, #fff);
   --_shape: var(--app-shape, 0px);
   --_surface: var(--app-surface, #fff);
   --_today: var(--app-today, #000);
diff --git a/src/year-grid/stylings.ts b/src/year-grid/stylings.ts
index 40a6783d..b201553b 100644
--- a/src/year-grid/stylings.ts
+++ b/src/year-grid/stylings.ts
@@ -77,7 +77,7 @@ export const yearGridStyling = css`
 }
 .year-grid-button:focus::before,
 .year-grid-button:hover::before {
-  --_border-color: var(--_selected-focus);
+  --_border-color: var(--_focus);
   --_border-width: 1px;
   --_inset: 0px;
 
@@ -93,9 +93,13 @@ export const yearGridStyling = css`
   color: var(--_on-primary);
 }
 .year-grid-button[aria-selected="true"]:focus::before {
+  --_border-color: var(--_selected-focus);
+
   color: var(--_selected-on-focus);
 }
 .year-grid-button[aria-selected="true"]:hover::before {
+  --_border-color: var(--_selected-hover);
+
   color: var(--_selected-on-hover);
 }
 .year-grid-button.year--today:not([aria-selected="true"])::before {