refactor: try to standardize stylings with MD3

motss · Jan 23, 2022 · 105da7c · 105da7c
1 parent fd2f5b3
commit 105da7c
Show file tree

Hide file tree

Showing 14 changed files with 83 additions and 64 deletions.
diff --git a/index.html b/index.html
@@ -25,16 +25,19 @@
         --a: rgba(255, 255, 255, .55);
         --b: #000;
         --c: #fff;
+        --d: #1c1b1f;
 
-        --app-disabled-color: var(--a);
-        --app-focus-color: var(--c);
-        --app-hover-color: var(--c);
-        --app-primary-color: var(--c);
-        --app-selected-bg-color: var(--a);
-        --app-selected-color: var(--b);
-        --app-text-color: var(--b);
-        --app-today-color: var(--c);
-        --app-weekday-color: var(--a);
+        /* --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);
+        --date-picker-input-on-icon: var(--a);
 
         --bg-color: #000;
         --text-color: #fff;

diff --git a/src/__demo__/demo-app.ts b/src/__demo__/demo-app.ts
@@ -38,9 +38,15 @@ export class DemoApp extends RootElement {
     }
 
     app-date-picker {
-      border: 1px solid #fff;
+      border: 1px solid #000;
       border-radius: 4px;
     }
+
+    @media (prefers-color-scheme: dark) {
+      app-date-picker {
+        border-color: #fff;
+      }
+    }
     `,
   ];
 

diff --git a/src/date-picker-dialog/date-picker-dialog-base.ts b/src/date-picker-dialog/date-picker-dialog-base.ts
@@ -11,8 +11,9 @@ import { toResolvedDate } from '../helpers/to-resolved-date.js';
 import { DatePickerMinMaxMixin } from '../mixins/date-picker-min-max-mixin.js';
 import { DatePickerMixin } from '../mixins/date-picker-mixin.js';
 import { RootElement } from '../root-element/root-element.js';
+import { baseStyling } from '../stylings.js';
 import type { CustomEventDetail } from '../typings.js';
-import { datePickerDialogStyling } from './stylings.js';
+import { datePickerDialogBaseStyling } from './stylings.js';
 import type { DatePickerDialogProperties, DialogClosedEventDetail, DialogClosingEventDetail } from './typings.js';
 
 export class DatePickerDialogBase extends DatePickerMixin(DatePickerMinMaxMixin(RootElement)) implements DatePickerDialogProperties {
@@ -35,7 +36,8 @@ export class DatePickerDialogBase extends DatePickerMixin(DatePickerMinMaxMixin(
   #valueAsDate: Date;
 
   public static override styles = [
-    datePickerDialogStyling,
+    baseStyling,
+    datePickerDialogBaseStyling,
   ];
 
   public constructor() {

diff --git a/src/date-picker-dialog/stylings.ts b/src/date-picker-dialog/stylings.ts
@@ -1,36 +1,30 @@
-import { css, unsafeCSS } from 'lit';
-
-import { appDatePickerDialogName } from './constants.js';
+import { css } from 'lit';
 
 export const datePickerDialogDialogStyling = css`
-:host {
-  display: block;
-
-  --mdc-dialog-min-width: 256px;
-  --mdc-dialog-content-ink-color: var(--base-primary-color);
-  --mdc-theme-primary: var(--base-primary-color);
-}
 .mdc-dialog .mdc-dialog__surface,
 .mdc-dialog .mdc-dialog__content {
+  --mdc-dialog-content-ink-color: var(--base-on-primary);
+  --mdc-dialog-min-width: 256px;
+  --mdc-theme-surface: var(--base-primary);
+
   overflow: initial;
 }
 
 .mdc-dialog .mdc-dialog__content {
   background-color: inherit;
   padding: 0;
 }
-`;
 
-export const datePickerDialogStyling = css`
-${unsafeCSS(appDatePickerDialogName)} {
-  display: block;
+.mdc-dialog .mdc-dialog__actions {
+  --mdc-theme-primary: var(--base-on-primary);
 }
+`;
 
-${unsafeCSS(appDatePickerDialogName)} app-date-picker {
-  background-color: var(--mdc-theme-surface);
+export const datePickerDialogBaseStyling = css`
+.secondary-actions {
+  margin: 0;
 }
-
-${unsafeCSS(appDatePickerDialogName)} .secondary-actions mwc-button + mwc-button {
+.secondary-actions mwc-button + mwc-button {
   margin: 0 0 0 8px;
 }
 `;
diff --git a/src/date-picker-input-surface/stylings.ts b/src/date-picker-input-surface/stylings.ts
@@ -2,6 +2,9 @@ import { css } from 'lit';
 
 export const DatePickerInputSurfaceStyling = css`
 :host {
+  --mdc-theme-surface: var(--base-primary);
+  --mdc-theme-on-surface: var(--base-on-primary);
+
   display: block;
   position: relative;
 }

diff --git a/src/date-picker-input/date-picker-input.ts b/src/date-picker-input/date-picker-input.ts
@@ -17,6 +17,7 @@ import { DatePickerMinMaxMixin } from '../mixins/date-picker-min-max-mixin.js';
 import { DatePickerMixin } from '../mixins/date-picker-mixin.js';
 import { ElementMixin } from '../mixins/element-mixin.js';
 import type { DatePickerMixinProperties } from '../mixins/typings.js';
+import { baseStyling } from '../stylings.js';
 import type { ChangedProperties, CustomEventDetail, DatePickerProperties } from '../typings.js';
 import { appDatePickerInputClearLabel, appDatePickerInputType } from './constants.js';
 import { datePickerInputStyling } from './stylings.js';
@@ -51,6 +52,7 @@ export class DatePickerInput extends ElementMixin(DatePickerMixin(DatePickerMinM
 
   public static override styles = [
     ...TextField.styles,
+    baseStyling,
     datePickerInputStyling,
   ];
 

diff --git a/src/date-picker-input/stylings.ts b/src/date-picker-input/stylings.ts
@@ -2,6 +2,14 @@ import { css } from 'lit';
 
 export const datePickerInputStyling = css`
 :host {
+  --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-theme-primary: var(--base-primary);
+
   position: relative;
 }
 
@@ -11,5 +19,6 @@ export const datePickerInputStyling = css`
 
 .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon--trailing {
   pointer-events: auto;
+  color: var(--date-picker-input-on-icon, rgba(0, 0, 0, 0.54));
 }
 `;
diff --git a/src/date-picker/date-picker.ts b/src/date-picker/date-picker.ts
@@ -26,7 +26,7 @@ import { DatePickerMinMaxMixin } from '../mixins/date-picker-min-max-mixin.js';
 import { DatePickerMixin } from '../mixins/date-picker-mixin.js';
 import type { AppMonthCalendar } from '../month-calendar/app-month-calendar.js';
 import { RootElement } from '../root-element/root-element.js';
-import { resetShadowRoot, webkitScrollbarStyling } from '../stylings.js';
+import { baseStyling, resetShadowRoot, webkitScrollbarStyling } from '../stylings.js';
 import type { CustomEventDetail, DatePickerProperties, Formatters, StartView, ValueUpdatedEvent } from '../typings.js';
 import type { AppYearGrid } from '../year-grid/app-year-grid.js';
 import type { YearGridData } from '../year-grid/typings.js';
@@ -66,6 +66,7 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(RootElemen
   #valueAsDate: Date;
 
   public static override styles = [
+    baseStyling,
     resetShadowRoot,
     datePickerStyling,
     webkitScrollbarStyling,

diff --git a/src/date-picker/stylings.ts b/src/date-picker/stylings.ts
@@ -19,6 +19,8 @@ export const datePickerStyling = css`
   max-height: var(--date-picker-height);
   width: 100%;
   height: 100%;
+  background-color: var(--base-primary);
+  color: var(--base-on-primary);
   overscroll-behavior: contain;
 }
 :host([startview="calendar"][show-week-number]) {
@@ -74,7 +76,11 @@ export const datePickerStyling = css`
 /** #endregion header */
 
 .year-grid {
+  max-height: var(--base-year-grid-height);
+  height: 100%;
   padding: 4px 20px 8px 12px;
+  overflow: auto;
+  overscroll-behavior: contain;
 }
 
 .calendar {

diff --git a/src/month-calendar/stylings.ts b/src/month-calendar/stylings.ts
@@ -35,14 +35,14 @@ td {
 .weekday-value {
   max-height: 16px;
   height: 16px;
-  color: var(--base-weekday-color);
+  color: var(--base-on-weekday);
   line-height: 1;
 }
 
 .calendar-day {
   width: 32px;
   height: 32px;
-  color: var(--base-primary-color);
+  color: var(--base-on-primary);
 }
 @media (any-hover: hover) {
   .calendar-day:not([aria-hidden="true"]):not([aria-disabled="true"]):hover {
@@ -77,10 +77,10 @@ td {
   z-index: 1;
 }
 .calendar-day[aria-selected="true"]::before {
-  color: var(--base-selected-color);
+  color: var(--base-on-selected);
 }
 .calendar-day.day--today:not([aria-selected="true"])::before {
-  border-color: var(--base-today-color);
+  border-color: var(--base-today);
 }
 .calendar-day.day--today:not([aria-selected="true"]):focus::before,
 .calendar-day.day--today:not([aria-selected="true"]):hover::before {
@@ -94,15 +94,15 @@ td {
   content: '';
 }
 .calendar-day[aria-selected="true"]::after {
-  background-color: var(--base-selected-bg-color);
+  background-color: var(--base-selected);
 }
 .calendar-day:focus::after {
-  border-color: var(--base-focus-color);
+  border-color: var(--base-focus);
 }
 .calendar-day:hover::after {
-  border-color: var(--base-hover-color);
+  border-color: var(--base-hover);
 }
 .calendar-day[aria-disabled="true"] {
-  color: var(--base-disabled-color);
+  color: var(--base-on-disabled);
 }
 `;
diff --git a/src/stylings.ts b/src/stylings.ts
@@ -4,15 +4,15 @@ export const absoluteHidden = css`[hidden] { display: none !important; }`;
 
 export const baseStyling = css`
 :host {
-  --base-disabled-color: var(--app-disabled-color, rgba(0, 0, 0, .38));
-  --base-focus-color: var(--app-focus-color, #b5b5b5);
-  --base-hover-color: var(--app-hover-color, #b5b5b5);
-  --base-primary-color: var(--app-primary-color, #000);
-  --base-selected-bg-color: var(--app-selected-bg-color, #1d1d1d);
-  --base-selected-color: var(--app-selected-color, #fff);
-  --base-text-color: var(--app-text-color, #000);
-  --base-today-color: var(--app-today-color, #000);
-  --base-weekday-color: var(--app-weekday-color, #8c8c8c);
+  --base-focus: var(--app-focus, #b5b5b5);
+  --base-hover: var(--app-hover, #b5b5b5);
+  --base-on-disabled: var(--app-on-disabled, rgba(0, 0, 0, .38));
+  --base-on-primary: var(--app-on-primary, #000);
+  --base-on-selected: var(--app-on-selected, #fff);
+  --base-on-weekday: var(--app-on-weekday, #8c8c8c);
+  --base-primary: var(--app-primary, #fff);
+  --base-selected: var(--app-selected, #1d1d1d);
+  --base-today: var(--app-today, #000);
 }
 `;
 

diff --git a/src/year-grid-button/stylings.ts b/src/year-grid-button/stylings.ts
@@ -3,8 +3,8 @@ import { css } from 'lit';
 export const yearGridButtonStyling = css`
 :host {
   --mdc-button-horizontal-padding: 0;
-  --mdc-theme-primary: var(--base-primary-color);
-  --mdc-theme-on-primary: var(--base-text-color);
+  --mdc-theme-primary: var(--base-primary);
+  --mdc-theme-on-primary: var(--base-on-primary);
 
   align-items: center;
   justify-content: center;

diff --git a/src/year-grid/stylings.ts b/src/year-grid/stylings.ts
@@ -9,10 +9,6 @@ export const yearGridStyling = css`
   justify-items: center;
 
   width: calc(56px * 4);
-  max-height: var(--base-year-grid-height);
-  height: 100%;
-  overflow: auto;
-  overscroll-behavior: contain;
 }
 @supports (scrollbar-width: thin) {
   .year-grid {
@@ -27,7 +23,7 @@ export const yearGridStyling = css`
   position: relative;
   width: 56px;
   height: 32px;
-  color: var(--base-primary-color);
+  color: var(--base-on-primary);
   font-size: 13px;
 }
 @media (any-hover: hover) {
@@ -55,13 +51,13 @@ export const yearGridStyling = css`
   z-index: 1;
 }
 .year-grid > .year-grid-button[aria-selected="true"]::before {
-  color: var(--base-selected-color);
+  color: var(--base-on-selected);
 }
 .year-grid > .year-grid-button:focus::before {
-  border-color: var(--base-focus-color);
+  border-color: var(--base-focus);
 }
 .year-grid > .year-grid-button:hover::before {
-  border-color: var(--base-hover-color);
+  border-color: var(--base-hover);
 }
 
 .year-grid > .year-grid-button::after {
@@ -72,10 +68,10 @@ export const yearGridStyling = css`
   border-radius: 52px;
 }
 .year-grid > .year-grid-button[aria-selected="true"]::after {
-  background-color: var(--base-selected-bg-color);
+  background-color: var(--base-selected);
 }
 .year-grid > .year-grid-button.year--today:not([aria-selected="true"])::after {
-  border-color: var(--base-today-color);
+  border-color: var(--base-today);
 }
 .year-grid > .year-grid-button.year--today:not([aria-selected="true"]):focus::after,
 .year-grid > .year-grid-button.year--today:not([aria-selected="true"]):hover::after {

diff --git a/src/year-grid/year-grid.ts b/src/year-grid/year-grid.ts
@@ -66,10 +66,7 @@ export class YearGrid extends RootElement implements YearGridProperties {
      * instead of just the year grid container. So what is doing here is to calculate the position of
      * the selected year and updates the `.scrollTop`.
      */
-    const yearGrid = await this.yearGrid;
-
-    yearGrid &&
-      (yearGrid.scrollTop = Math.floor((this.$focusingYear - this.data.min.getUTCFullYear()) / 4) * 32);
+    this.scrollTop = Math.floor((this.$focusingYear - this.data.min.getUTCFullYear()) / 4) * 32;
   }
 
   protected override render(): TemplateResult {