refactor: refactor styling in datePickerInput

motss · Jan 30, 2022 · dd5c413 · dd5c413
1 parent ef21496
commit dd5c413
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -19,25 +19,38 @@
     :root {
       --bg-color: #f5f5f5;
       --text-color: #000;
+
+      --b: #000;
+      --e: #6200ee;
+
+      --app-on-primary: var(--b);
+      --app-primary: var(--e);
     }
     @media (prefers-color-scheme: dark) {
       :root {
         --a: rgba(255, 255, 255, .55);
-        --b: #000;
         --c: #fff;
         --d: #1c1b1f;
 
         /* --app-hover: var(--c); */
         --app-focus: var(--c);
         --app-ink: var(--c);
         --app-on-disabled: var(--a);
-        --app-on-primary: var(--c);
         --app-on-selected: #fff;
         --app-on-weekday: var(--a);
-        --app-primary: var(--d);
         --app-selected: rgba(255, 255, 255, .25);
         --app-today: var(--c);
+
+        --app-on-primary: var(--a);
+        /* --app-primary: var(--d); */
+
+        --date-picker-dialog-scrim: rgba(0, 0, 0, .75);
+
+        --date-picker-input-fill: rgba(255, 255, 255, .25);
+        --date-picker-input-hover-line: var(--c);
+        --date-picker-input-idle-line: var(--a);
         --date-picker-input-on-icon: var(--a);
+        --date-picker-input-label-ink: var(--a);
 
         --bg-color: #000;
         --text-color: #fff;

diff --git a/src/date-picker-dialog/stylings.ts b/src/date-picker-dialog/stylings.ts
@@ -20,7 +20,7 @@ export const datePickerDialogBaseStyling = css`
 }
 
 .mdc-dialog .mdc-dialog__scrim {
-  --mdc-dialog-scrim-color: var(--date-picker-dialog-base-scrim);
+  --mdc-dialog-scrim-color: var(--date-picker-dialog-scrim);
 }
 `;
 

diff --git a/src/date-picker-input/stylings.ts b/src/date-picker-input/stylings.ts
@@ -2,12 +2,18 @@ import { css } from 'lit';
 
 export const datePickerInputStyling = css`
 :host {
+  --mdc-text-field-disabled-fill-color: var(--date-picker-input-disabled-fill);
+  --mdc-text-field-disabled-ink-color: var(--date-picker-input-disabled-ink);
+  --mdc-text-field-disabled-line-color: var(--date-picker-input-disabled-line);
+  --mdc-text-field-fill-color: var(--date-picker-input-fill);
+  --mdc-text-field-filled-border-radius: var(--date-picker-input-filled-border-radius);
+  --mdc-text-field-hover-line-color: var(--date-picker-input-hover-line);
+  --mdc-text-field-idle-line-color: var(--date-picker-input-idle-line);
   --mdc-text-field-ink-color: var(--base-on-primary);
-  --mdc-text-field-label-ink-color: var(--base-on-primary);
-  --mdc-text-field-hover-line-color: var(--base-on-primary);
-  --mdc-text-field-hover-idle-line-color: var(--base-hover);
-  --mdc-text-field-outlined-idle-border-color: var(--base-hover);
-  --mdc-text-field-outlined-hover-border-color: var(--base-on-primary);
+  --mdc-text-field-label-ink-color: var(--date-picker-input-label-ink);
+  --mdc-text-field-outlined-disabled-border-color: var(--date-picker-input-disabled-line);
+  --mdc-text-field-outlined-hover-border-color: var(--date-picker-input-hover-line);
+  --mdc-text-field-outlined-idle-border-color: var(--date-picker-input-idle-line);
   --mdc-theme-primary: var(--base-primary);
 
   position: relative;