diff --git a/index.html b/index.html
index e2ca2122..89940f99 100644
--- 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
index 06466fef..ee1ae619 100644
--- 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
index 57973758..2a52bd0f 100644
--- 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
index 20c4bf4d..fb0a4c47 100644
--- a/src/date-picker-dialog/stylings.ts
+++ b/src/date-picker-dialog/stylings.ts
@@ -1,17 +1,12 @@
-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;
}
@@ -19,18 +14,17 @@ export const datePickerDialogDialogStyling = css`
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
index 6c9f5bd9..3710c1bc 100644
--- 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
index 5c7ae902..f21524c6 100644
--- 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
index f6109d40..34761d50 100644
--- 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
index 7aca4004..7184995c 100644
--- 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
index 139da589..07a958e7 100644
--- 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
index 7ccfbc1a..84ef7b0c 100644
--- 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
index 0936152a..8e6a3ac7 100644
--- 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
index f86d1b12..d2965142 100644
--- 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
index 32b2fa8a..bd49dd46 100644
--- 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
index 3b6cce20..fb2553ac 100644
--- 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 {