fix: fix stylings not using the correct CSS Variables

Signed-off-by: Rong Sen Ng (motss) <wes.ngrongsen@gmail.com>
motss · Mar 9, 2022 · 13e5209 · 13e5209
1 parent b249e4f
commit 13e5209
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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 {