diff --git a/projects/docs/src/app/app.component.html b/projects/docs/src/app/app.component.html
index 4b9c6b0..e9b98ac 100644
--- a/projects/docs/src/app/app.component.html
+++ b/projects/docs/src/app/app.component.html
@@ -10,6 +10,9 @@
ngx-mat-timepicker
+
{
+ this.handleTheme(theme);
+ })
+ }
+
+ private handleTheme(theme: NgDocTheme | undefined) {
+ if (theme?.id === NG_DOC_NIGHT_THEME.id) {
+ this.document.documentElement.classList.add("dark-theme");
+ } else {
+ this.document.documentElement.classList.remove("dark-theme");
+ }
+ }
+
+ toggleMaterialDesign() {
+ this.document.documentElement.classList.toggle("m2");
+ }
+}
diff --git a/projects/docs/src/app/app.module.ts b/projects/docs/src/app/app.module.ts
index 25baaf4..908141b 100644
--- a/projects/docs/src/app/app.module.ts
+++ b/projects/docs/src/app/app.module.ts
@@ -17,6 +17,7 @@ import {
NG_DOC_DEFAULT_PAGE_PROCESSORS,
NgDocThemeToggleComponent,
} from '@ng-doc/app';
+import { NgDocTooltipDirective } from '@ng-doc/ui-kit';
import { NG_DOC_ROUTING, provideNgDocContext } from '@ng-doc/generated';
import { AppComponent } from './app.component';
@@ -41,6 +42,7 @@ import { AppComponent } from './app.component';
NgDocButtonIconComponent,
NgDocIconComponent,
NgDocThemeToggleComponent,
+ NgDocTooltipDirective
],
providers: [
provideNgDocContext(),
diff --git a/projects/docs/src/app/getting-started/index.md b/projects/docs/src/app/getting-started/index.md
index 61f9de0..1a57c4d 100644
--- a/projects/docs/src/app/getting-started/index.md
+++ b/projects/docs/src/app/getting-started/index.md
@@ -69,11 +69,15 @@ export class MyModule {}
Then you have to define a theme. [More details about theming](https://material.angular.io/guide/theming). As ngx-mat-timepicker uses some material components, it's necessary to add theme for them.
+`ngx-mat-timepicker` supports both, Material 2 (M2) and Material 3 (M3) designs.
+
+### M2 Design Theme
+
```scss
@use "@angular/material" as mat;
@use "@dhutaryan/ngx-mat-timepicker" as mat-timepicker;
-$my-theme: mat.define-light-theme(...);
+$my-theme: mat.m2-define-light-theme(...);
// timepicker uses these component
@include mat.form-field-theme($my-theme);
@@ -85,3 +89,25 @@ $my-theme: mat.define-light-theme(...);
// timepicker theme
@include mat-timepicker.timepicker-theme($my-theme);
```
+
+### M3 Design Theme
+
+```scss
+@use "@angular/material" as mat;
+@use "@dhutaryan/ngx-mat-timepicker" as mat-timepicker;
+
+$my-theme: mat.define-theme(...);
+
+:root {
+ // timepicker uses these component
+ @include mat.form-field-theme($my-theme);
+ @include mat.input-theme($my-theme);
+ @include mat.button-theme($my-theme);
+ @include mat.fab-theme($my-theme);
+ @include mat.icon-button-theme($my-theme);
+ @include mat.divider-theme($my-theme);
+ // timepicker theme
+ @include mat-timepicker.timepicker-theme($my-theme);
+}
+
+```
diff --git a/projects/docs/src/assets/icons/palette.svg b/projects/docs/src/assets/icons/palette.svg
new file mode 100644
index 0000000..f310010
--- /dev/null
+++ b/projects/docs/src/assets/icons/palette.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/projects/docs/src/styles.scss b/projects/docs/src/styles.scss
index d1699d6..c43ca19 100644
--- a/projects/docs/src/styles.scss
+++ b/projects/docs/src/styles.scss
@@ -1,10 +1,10 @@
// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
-@use "sass:map";
-@use "@angular/material" as mat;
-@use "projects/mat-timepicker" as mat-timepicker;
+@use 'sass:map';
+@use '@angular/material' as mat;
-@use "./styles/theme";
+@use './styles/theme';
+@use './styles/all-components';
// Plus imports for other components in your app.
@@ -17,16 +17,23 @@
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
:root {
- @include mat.core-theme(theme.$ngx-mat-timepicker-theme);
- @include mat.toolbar-theme(theme.$ngx-mat-timepicker-theme);
- @include mat.form-field-theme(theme.$ngx-mat-timepicker-theme);
- @include mat.input-theme(theme.$ngx-mat-timepicker-theme);
- @include mat.button-theme(theme.$ngx-mat-timepicker-theme);
- @include mat.fab-theme(theme.$ngx-mat-timepicker-theme);
- @include mat.icon-button-theme(theme.$ngx-mat-timepicker-theme);
- @include mat.divider-theme(theme.$ngx-mat-timepicker-theme);
- @include mat.card-theme(theme.$ngx-mat-timepicker-theme);
- @include mat-timepicker.timepicker-theme(theme.$ngx-mat-timepicker-theme);
+ &:not(.m2) {
+ @include all-components.theme(theme.$ngx-mat-timepicker-theme);
+ }
+
+ &.m2 {
+ @include all-components.theme(theme.$ngx-mat-timepicker-theme-m2);
+ }
+
+ &.dark-theme {
+ &:not(.m2) {
+ @include all-components.color(theme.$ngx-mat-timepicker-theme-dark);
+ }
+
+ &.m2 {
+ @include all-components.color(theme.$ngx-mat-timepicker-theme-m2-dark);
+ }
+ }
}
/* You can add global styles to this file, and also import other style files */
diff --git a/projects/docs/src/styles/_all-components.scss b/projects/docs/src/styles/_all-components.scss
new file mode 100644
index 0000000..a943460
--- /dev/null
+++ b/projects/docs/src/styles/_all-components.scss
@@ -0,0 +1,28 @@
+@use '@angular/material' as mat;
+@use 'projects/mat-timepicker' as mat-timepicker;
+
+@mixin theme($theme) {
+ @include mat.core-theme($theme);
+ @include mat.toolbar-theme($theme);
+ @include mat.form-field-theme($theme);
+ @include mat.input-theme($theme);
+ @include mat.button-theme($theme);
+ @include mat.fab-theme($theme);
+ @include mat.icon-button-theme($theme);
+ @include mat.divider-theme($theme);
+ @include mat.card-theme($theme);
+ @include mat-timepicker.timepicker-theme($theme);
+}
+
+@mixin color($theme) {
+ @include mat.core-color($theme);
+ @include mat.toolbar-color($theme);
+ @include mat.form-field-color($theme);
+ @include mat.input-color($theme);
+ @include mat.button-color($theme);
+ @include mat.fab-color($theme);
+ @include mat.icon-button-color($theme);
+ @include mat.divider-color($theme);
+ @include mat.card-color($theme);
+ @include mat-timepicker.timepicker-color($theme);
+ }
\ No newline at end of file
diff --git a/projects/docs/src/styles/_theme.scss b/projects/docs/src/styles/_theme.scss
index d91e940..dfacedc 100644
--- a/projects/docs/src/styles/_theme.scss
+++ b/projects/docs/src/styles/_theme.scss
@@ -1,5 +1,5 @@
-@use "sass:map";
-@use "@angular/material" as mat;
+@use 'sass:map';
+@use '@angular/material' as mat;
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
@@ -12,18 +12,43 @@ $ngx-mat-timepicker-accent: mat.m2-define-palette(
A400
);
-// The warn palette is optional (defaults to red).
-$ngx-mat-timepicker-warn: mat.m2-define-palette(mat.$m2-red-palette);
-
// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
-$ngx-mat-timepicker-theme: mat.m2-define-light-theme(
+$ngx-mat-timepicker-theme-m2: mat.m2-define-light-theme(
(
color: (
primary: $ngx-mat-timepicker-primary,
accent: $ngx-mat-timepicker-accent,
- warn: $ngx-mat-timepicker-warn,
),
typography: mat.m2-define-typography-config(),
)
);
+$ngx-mat-timepicker-theme-m2-dark: mat.m2-define-dark-theme(
+ (
+ color: (
+ primary: mat.m2-define-palette(mat.$m2-pink-palette),
+ accent: mat.m2-define-palette(mat.$m2-blue-grey-palette),
+ ),
+ typography: mat.m2-define-typography-config(),
+ )
+);
+
+$ngx-mat-timepicker-theme: mat.define-theme(
+ (
+ color: (
+ theme-type: light,
+ primary: mat.$azure-palette,
+ tertiary: mat.$blue-palette,
+ ),
+ )
+);
+
+$ngx-mat-timepicker-theme-dark: mat.define-theme(
+ (
+ color: (
+ theme-type: dark,
+ primary: mat.$azure-palette,
+ tertiary: mat.$blue-palette,
+ ),
+ )
+);
diff --git a/projects/mat-timepicker/_index.scss b/projects/mat-timepicker/_index.scss
index 06038c8..1caa42e 100644
--- a/projects/mat-timepicker/_index.scss
+++ b/projects/mat-timepicker/_index.scss
@@ -1 +1 @@
-@forward "./timepicker-theme" as timepicker-* show timepicker-theme;
+@forward "./timepicker-theme" as timepicker-* show timepicker-theme, timepicker-color;
diff --git a/projects/mat-timepicker/_timepicker-theme.scss b/projects/mat-timepicker/_timepicker-theme.scss
index cbcfc4c..f2daa17 100644
--- a/projects/mat-timepicker/_timepicker-theme.scss
+++ b/projects/mat-timepicker/_timepicker-theme.scss
@@ -1,156 +1,26 @@
-@use "sass:color";
-@use "sass:map";
-@use "@angular/material" as mat;
+@use '@angular/material' as mat;
-$timepicker-content-title-font-size: 12px !default;
-$input-font-size: 2rem !default;
-$inputs-separator-font-size: 3rem !default;
-$inputs-separator-line-height: 1.25rem;
-$primary-opacity: 0.15;
+@use './themes/m2/theme' as m2-theme;
+@use './themes/m2/color' as m2-color;
+@use './themes/m3/theme' as m3-theme;
+@use './themes/m3/color' as m3-color;
-@mixin _m2-color($theme, $palette) {
- .mat-timepicker-toggle.mat-timepicker-toggle-active {
- color: mat.get-theme-color($theme, $palette, default);
- }
-
- .mat-time-period-item-active,
- .mat-clock-dial-value.mat-clock-dial-value-active {
- color: mat.get-theme-color($theme, $palette, default);
- background-color: rgba(mat.get-theme-color($theme, $palette, default), $primary-opacity);
- }
-
- .mat-clock-dial::before {
- background-color: mat.get-theme-color($theme, $palette, default);
- }
-
- .mat-clock-dial-hand:not(.mat-clock-dial-hand-disabled) {
- background-color: mat.get-theme-color($theme, $palette, default);
-
- &::before {
- background-color: mat.get-theme-color($theme, $palette, default);
- }
- }
-
- .mat-clock-dial-hand.mat-clock-dial-hand-disabled {
- &::before {
- background-color: color.adjust(
- mat.get-theme-color($theme, $palette, default),
- $alpha: -0.6
- );
- }
- }
-
- [mat-mini-fab].mat-clock-dial-cell.mat-clock-dial-cell-disabled.mat-clock-dial-cell-active {
- background-color: color.adjust(
- mat.get-theme-color($theme, $palette, default),
- $alpha: -0.6
- );
- }
-}
-
-@mixin m2-color($theme) {
- @include _m2-color($theme, primary);
-
- .mat-timepicker-toggle {
- color: mat.get-theme-color($theme, foreground, icon);
- }
-
- .mat-timepicker-content {
- @include mat.elevation(4);
- background-color: mat.get-theme-color($theme, background, card);
- color: mat.get-theme-color($theme, foreground, text);
-
- &.mat-accent {
- @include _m2-color($theme, accent);
- }
-
- &.mat-warn {
- @include _m2-color($theme, warn);
- }
- }
-
- .mat-timepicker-content-layout-title {
- color: mat.get-theme-color($theme, foreground, secondary-text);
- }
-
- .mat-time-toggle-mode-button svg {
- fill: mat.get-theme-color($theme, foreground, secondary-text);
- }
-
- .mat-time-period {
- border-color: mat.get-theme-color($theme, foreground, divider);
- }
-
- .mat-time-period-item-disabled {
- color: mat.get-theme-color($theme, foreground, disabled-button);
- background-color: mat.get-theme-color($theme, background, disabled-button);
- }
-
- .mat-clock-dial-value,
- .mat-clock-dial,
- .mat-time-inputs-field .mat-mdc-text-field-wrapper {
- background-color: mat.get-theme-color($theme, background, background);
- }
-
- .mat-clock-dial-hand.mat-clock-dial-hand-disabled {
- background-color: transparent;
- }
-
- .mat-clock-dial-cell:not(.mat-primary):not(.mat-accent):not(.mat-warn) {
- background: transparent;
-
- &:not(.mat-clock-dial-cell-disabled):hover {
- background-color: mat.get-theme-color($theme, background, hover);
- }
- }
-
- .mat-clock-dial-cell.mat-clock-dial-cell-disabled:hover {
- cursor: default;
- }
-
- .mat-clock-dial-cell.mat-clock-dial-cell.mat-clock-dial-cell-disabled {
- color: mat.get-theme-color($theme, foreground, disabled-button);
-
- .mat-mdc-button-persistent-ripple::before {
- background-color: transparent;
- }
- }
-}
-
-@mixin m2-typography($theme) {
-
- h6.mat-timepicker-content-layout-title {
- font: {
- size: $timepicker-content-title-font-size;
- weight: mat.get-theme-typography($theme, subtitle-2, font-weight);
- }
- }
-
- .mat-time-inputs-field {
- input.mat-mdc-input-element {
- font-size: $input-font-size;
- line-height: normal;
- }
- }
-
- .mat-timepicker-content-layout-separator {
- font-size: $inputs-separator-font-size;
- line-height: $inputs-separator-line-height;
- }
-
- .mat-clock-dial-value {
- font-size: $input-font-size;
+@mixin theme($theme) {
+ @if (mat.get-theme-version($theme) == 1) {
+ // Add your new M3 styles here.
+ @include m3-theme.theme($theme);
+ } @else {
+ // Keep your old M2 styles here.
+ @include m2-theme.theme($theme);
}
}
-@mixin theme($theme) {
+@mixin color($theme) {
@if (mat.get-theme-version($theme) == 1) {
// Add your new M3 styles here.
+ @include m3-color.m3-color($theme);
} @else {
// Keep your old M2 styles here.
-
- @include m2-color($theme);
-
- @include m2-typography($theme);
+ @include m2-color.m2-color($theme);
}
}
diff --git a/projects/mat-timepicker/package.json b/projects/mat-timepicker/package.json
index 4986100..f5a89f9 100644
--- a/projects/mat-timepicker/package.json
+++ b/projects/mat-timepicker/package.json
@@ -26,12 +26,12 @@
"timepicker input"
],
"peerDependencies": {
- "@angular/common": "^17.0.0",
- "@angular/core": "^17.0.0",
- "@angular/material": "^17.0.0"
+ "@angular/common": ">=18.0.0",
+ "@angular/core": ">=18.0.0",
+ "@angular/material": ">18.0.0"
},
"dependencies": {
"tslib": ">=2.0.0"
},
"sideEffects": false
-}
\ No newline at end of file
+}
diff --git a/projects/mat-timepicker/src/lib/clock-dial.scss b/projects/mat-timepicker/src/lib/clock-dial.scss
index 4f16da3..cb2840c 100644
--- a/projects/mat-timepicker/src/lib/clock-dial.scss
+++ b/projects/mat-timepicker/src/lib/clock-dial.scss
@@ -2,7 +2,7 @@ $clock-dial-hand-width: 1px;
$clock-dial-hand-dot-size: 0.5rem;
$clock-dial-size: 16rem;
-$clock-dial-cell-size: 2rem;
+$clock-dial-cell-size: 48px;
.mat-clock-dial {
position: relative;
@@ -11,6 +11,7 @@ $clock-dial-cell-size: 2rem;
height: $clock-dial-size;
margin: 0 auto;
border-radius: 50%;
+ --mdc-fab-small-container-shape: 50%;
&::before {
position: absolute;
diff --git a/projects/mat-timepicker/src/lib/clock-size.ts b/projects/mat-timepicker/src/lib/clock-size.ts
index 1fc856d..5f7f37f 100644
--- a/projects/mat-timepicker/src/lib/clock-size.ts
+++ b/projects/mat-timepicker/src/lib/clock-size.ts
@@ -1,7 +1,7 @@
const TOUCH_UI_MULTIPLIER = 1.25;
const TOUCH_UI_TICK_MULTIPLIER = 1.5;
const CLOCK_RADIUS = 128;
-const CLOCK_TICK_RADIUS = 16;
+const CLOCK_TICK_RADIUS = 24;
const CLOCK_OUTER_RADIUS = 100;
export function getClockRadius(touchUi?: boolean): number {
diff --git a/projects/mat-timepicker/src/lib/time-inputs.scss b/projects/mat-timepicker/src/lib/time-inputs.scss
index d6a8fd1..114d9f0 100644
--- a/projects/mat-timepicker/src/lib/time-inputs.scss
+++ b/projects/mat-timepicker/src/lib/time-inputs.scss
@@ -1,10 +1,10 @@
-$form-field-padding: 1.25rem;
+// $form-field-padding: 1.25rem;
.mat-time-inputs {
display: block;
.mat-timepicker-content-layout-separator {
- margin-top: -$form-field-padding;
+ // margin-top: -$form-field-padding;
}
}
diff --git a/projects/mat-timepicker/src/lib/time-period.scss b/projects/mat-timepicker/src/lib/time-period.scss
index f321cb3..8a7752f 100644
--- a/projects/mat-timepicker/src/lib/time-period.scss
+++ b/projects/mat-timepicker/src/lib/time-period.scss
@@ -29,6 +29,14 @@
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
+ &:first-child {
+ border-top-left-radius: inherit;
+ border-top-right-radius: inherit;
+ }
+ &:last-child {
+ border-bottom-left-radius: inherit;
+ border-bottom-right-radius: inherit;
+ }
}
.mat-time-period-item-disabled {
diff --git a/projects/mat-timepicker/src/lib/timepicker-content-layout.scss b/projects/mat-timepicker/src/lib/timepicker-content-layout.scss
index a779a30..d4e1272 100644
--- a/projects/mat-timepicker/src/lib/timepicker-content-layout.scss
+++ b/projects/mat-timepicker/src/lib/timepicker-content-layout.scss
@@ -44,6 +44,5 @@ h6.mat-timepicker-content-layout-title {
justify-content: center;
align-self: center;
width: 1.5rem;
- height: 1.75rem;
font-weight: 500;
}
diff --git a/projects/mat-timepicker/src/lib/timepicker-content.scss b/projects/mat-timepicker/src/lib/timepicker-content.scss
index 047047a..735cc2d 100644
--- a/projects/mat-timepicker/src/lib/timepicker-content.scss
+++ b/projects/mat-timepicker/src/lib/timepicker-content.scss
@@ -1,5 +1,3 @@
-$button-icon-size: 3.25rem;
-
.mat-timepicker-content {
display: block;
border-radius: 4px;
@@ -20,8 +18,6 @@ $button-icon-size: 3.25rem;
}
.mat-time-toggle-mode-button {
- width: $button-icon-size;
- height: $button-icon-size;
margin-left: -0.75rem;
margin-bottom: -0.25rem;
}
diff --git a/projects/mat-timepicker/src/lib/timepicker-content.ts b/projects/mat-timepicker/src/lib/timepicker-content.ts
index a2676bc..7fc9c09 100644
--- a/projects/mat-timepicker/src/lib/timepicker-content.ts
+++ b/projects/mat-timepicker/src/lib/timepicker-content.ts
@@ -30,6 +30,7 @@ import { MatTimepickerIntl } from './timepicker-intl';
import { MatClockDials } from './clock-dials';
import { MatTimeInputs } from './time-inputs';
import { TimepickerOrientation } from './orientation';
+import { MatIconModule } from '@angular/material/icon';
// Boilerplate for applying mixins to MatTimepickerContent.
const _MatTimepickerContentBase = mixinColor(
diff --git a/projects/mat-timepicker/themes/m2/_color.scss b/projects/mat-timepicker/themes/m2/_color.scss
new file mode 100644
index 0000000..b9d0aee
--- /dev/null
+++ b/projects/mat-timepicker/themes/m2/_color.scss
@@ -0,0 +1,111 @@
+@use 'sass:color';
+@use '@angular/material' as mat;
+@use "./variables";
+
+@mixin _m2-color($theme, $palette) {
+ .mat-timepicker-toggle.mat-timepicker-toggle-active {
+ color: mat.get-theme-color($theme, $palette, default);
+ }
+
+ .mat-time-period-item-active,
+ .mat-clock-dial-value.mat-clock-dial-value-active {
+ color: mat.get-theme-color($theme, $palette, default);
+ background-color: rgba(
+ mat.get-theme-color($theme, $palette, default),
+ variables.$primary-opacity
+ );
+ }
+
+ .mat-clock-dial::before {
+ background-color: mat.get-theme-color($theme, $palette, default);
+ }
+
+ .mat-clock-dial-hand:not(.mat-clock-dial-hand-disabled) {
+ background-color: mat.get-theme-color($theme, $palette, default);
+
+ &::before {
+ background-color: mat.get-theme-color($theme, $palette, default);
+ }
+ }
+
+ .mat-clock-dial-hand.mat-clock-dial-hand-disabled {
+ &::before {
+ background-color: color.adjust(
+ mat.get-theme-color($theme, $palette, default),
+ $alpha: -0.6
+ );
+ }
+ }
+
+ [mat-mini-fab].mat-clock-dial-cell.mat-clock-dial-cell-disabled.mat-clock-dial-cell-active {
+ background-color: color.adjust(
+ mat.get-theme-color($theme, $palette, default),
+ $alpha: -0.6
+ );
+ }
+}
+
+@mixin m2-color($theme) {
+ @include _m2-color($theme, primary);
+
+ .mat-timepicker-toggle {
+ color: mat.get-theme-color($theme, foreground, icon);
+ }
+
+ .mat-timepicker-content {
+ @include mat.elevation(4);
+ background-color: mat.get-theme-color($theme, background, card);
+ color: mat.get-theme-color($theme, foreground, text);
+
+ &.mat-accent {
+ @include _m2-color($theme, accent);
+ }
+
+ &.mat-warn {
+ @include _m2-color($theme, warn);
+ }
+ }
+
+ .mat-timepicker-content-layout-title {
+ color: mat.get-theme-color($theme, foreground, secondary-text);
+ }
+
+ .mat-time-period {
+ border-color: mat.get-theme-color($theme, foreground, divider);
+ }
+
+ .mat-time-period-item-disabled {
+ color: mat.get-theme-color($theme, foreground, disabled-button);
+ background-color: mat.get-theme-color($theme, background, disabled-button);
+ }
+
+ .mat-clock-dial-value,
+ .mat-clock-dial,
+ .mat-time-inputs-field .mat-mdc-text-field-wrapper {
+ background-color: mat.get-theme-color($theme, background, background);
+ }
+
+ .mat-clock-dial-hand.mat-clock-dial-hand-disabled {
+ background-color: transparent;
+ }
+
+ .mat-clock-dial-cell:not(.mat-primary):not(.mat-accent):not(.mat-warn) {
+ background: transparent;
+
+ &:not(.mat-clock-dial-cell-disabled):hover {
+ background-color: mat.get-theme-color($theme, background, hover);
+ }
+ }
+
+ .mat-clock-dial-cell.mat-clock-dial-cell-disabled:hover {
+ cursor: default;
+ }
+
+ .mat-clock-dial-cell.mat-clock-dial-cell.mat-clock-dial-cell-disabled {
+ color: mat.get-theme-color($theme, foreground, disabled-button);
+
+ .mat-mdc-button-persistent-ripple::before {
+ background-color: transparent;
+ }
+ }
+}
diff --git a/projects/mat-timepicker/themes/m2/_density.scss b/projects/mat-timepicker/themes/m2/_density.scss
new file mode 100644
index 0000000..0147d46
--- /dev/null
+++ b/projects/mat-timepicker/themes/m2/_density.scss
@@ -0,0 +1,8 @@
+@mixin m2-density() {
+ .mat-timepicker-content-layout-separator {
+ height: 1.75rem;
+ }
+ .mat-time-inputs .mat-timepicker-content-layout-separator {
+ margin-top: -1.25rem;
+ }
+}
diff --git a/projects/mat-timepicker/themes/m2/_theme.scss b/projects/mat-timepicker/themes/m2/_theme.scss
new file mode 100644
index 0000000..1ffe08d
--- /dev/null
+++ b/projects/mat-timepicker/themes/m2/_theme.scss
@@ -0,0 +1,9 @@
+@use './color';
+@use './typography';
+@use "./density";
+
+@mixin theme($theme) {
+ @include color.m2-color($theme);
+ @include typography.m2-typography($theme);
+ @include density.m2-density();
+}
diff --git a/projects/mat-timepicker/themes/m2/_typography.scss b/projects/mat-timepicker/themes/m2/_typography.scss
new file mode 100644
index 0000000..f8fea45
--- /dev/null
+++ b/projects/mat-timepicker/themes/m2/_typography.scss
@@ -0,0 +1,27 @@
+@use '@angular/material' as mat;
+@use "./variables";
+
+@mixin m2-typography($theme) {
+ h6.mat-timepicker-content-layout-title {
+ font: {
+ size: variables.$timepicker-content-title-font-size;
+ weight: mat.get-theme-typography($theme, subtitle-2, font-weight);
+ }
+ }
+
+ .mat-time-inputs-field {
+ input.mat-mdc-input-element {
+ font-size: variables.$input-font-size;
+ line-height: normal;
+ }
+ }
+
+ .mat-timepicker-content-layout-separator {
+ font-size: variables.$inputs-separator-font-size;
+ line-height: variables.$inputs-separator-line-height;
+ }
+
+ .mat-clock-dial-value {
+ font-size: variables.$input-font-size;
+ }
+}
diff --git a/projects/mat-timepicker/themes/m2/_variables.scss b/projects/mat-timepicker/themes/m2/_variables.scss
new file mode 100644
index 0000000..cd72e72
--- /dev/null
+++ b/projects/mat-timepicker/themes/m2/_variables.scss
@@ -0,0 +1,5 @@
+$timepicker-content-title-font-size: 12px !default;
+$input-font-size: 2rem !default;
+$inputs-separator-font-size: 3rem !default;
+$inputs-separator-line-height: 1.25rem;
+$primary-opacity: 0.15;
\ No newline at end of file
diff --git a/projects/mat-timepicker/themes/m3/_color.scss b/projects/mat-timepicker/themes/m3/_color.scss
new file mode 100644
index 0000000..f4bceb1
--- /dev/null
+++ b/projects/mat-timepicker/themes/m3/_color.scss
@@ -0,0 +1,111 @@
+@use 'sass:color';
+@use '@angular/material' as mat;
+
+@mixin _m3-color($theme) {
+ .mat-timepicker-toggle.mat-timepicker-toggle-active {
+ color: mat.get-theme-color($theme, primary);
+ }
+
+ .mat-time-period-item-active,
+ .mat-clock-dial-value.mat-clock-dial-value-active {
+ color: mat.get-theme-color($theme, on-tertiary-container);
+ background-color: mat.get-theme-color($theme, tertiary-container);
+ }
+
+ .mat-clock-dial::before {
+ background-color: mat.get-theme-color($theme, primary);
+ }
+
+ .mat-clock-dial-hand:not(.mat-clock-dial-hand-disabled) {
+ background-color: mat.get-theme-color($theme, primary);
+
+ &::before {
+ background-color: mat.get-theme-color($theme, primary);
+ }
+ }
+
+ .mat-clock-dial-hand.mat-clock-dial-hand-disabled {
+ &::before {
+ background-color: color.adjust(
+ mat.get-theme-color($theme, primary),
+ $alpha: -0.6
+ );
+ }
+ }
+
+ [mat-mini-fab].mat-clock-dial-cell.mat-clock-dial-cell-disabled.mat-clock-dial-cell-active {
+ background-color: color.adjust(
+ mat.get-theme-color($theme, primary),
+ $alpha: -0.6
+ );
+ }
+ [mat-mini-fab].mat-clock-dial-cell.mat-clock-dial-cell-active {
+ background-color: mat.get-theme-color($theme, primary);
+ color: mat.get-theme-color($theme, on-primary);
+ }
+}
+
+@mixin m3-color($theme) {
+ @include _m3-color($theme);
+
+ .mat-timepicker-toggle {
+ color: mat.get-theme-color($theme, on-surface-variant);
+ }
+
+ .mat-timepicker-content {
+ @include mat.elevation(3);
+ background-color: mat.get-theme-color($theme, surface-container-high);
+ color: mat.get-theme-color($theme, on-surface);
+ }
+
+ .mat-timepicker-content-layout-title {
+ color: mat.get-theme-color($theme, on-surface-variant);
+ }
+
+ .mat-time-toggle-mode-button svg {
+ // TODO: @Dharmen
+ // color: mat.get-theme-color($theme, on-surface);
+ // color: inherit;
+ }
+
+ .mat-time-period {
+ border-color: mat.get-theme-color($theme, outline);
+ }
+
+ .mat-time-period-item-disabled {
+ color: mat.get-theme-color($theme, on-surface);
+ background-color: mat.get-theme-color($theme, surface-container-highest);
+ }
+
+ .mat-clock-dial-value,
+ .mat-clock-dial,
+ .mat-time-inputs-field .mat-mdc-text-field-wrapper {
+ background-color: mat.get-theme-color($theme, surface-container-highest);
+ }
+
+ .mat-clock-dial-hand.mat-clock-dial-hand-disabled {
+ background-color: transparent;
+ }
+
+ .mat-clock-dial-cell:not(.mat-clock-dial-cell-active) {
+ background: transparent;
+
+ &:not(.mat-clock-dial-cell-disabled):hover {
+ color: mat.get-theme-color($theme, on-primary-container);
+ background-color: mat.get-theme-color($theme, primary-container);
+ }
+ }
+
+ .mat-clock-dial-cell.mat-clock-dial-cell-disabled:hover {
+ cursor: default;
+ }
+
+ // TODO: @Dharmen
+ // .mat-clock-dial-cell.mat-clock-dial-cell.mat-clock-dial-cell-disabled {
+ // color: mat.get-theme-color($theme, foreground, disabled-button);
+
+ // .mat-mdc-button-persistent-ripple::before {
+ // background-color: transparent;
+ // }
+ // }
+}
diff --git a/projects/mat-timepicker/themes/m3/_density.scss b/projects/mat-timepicker/themes/m3/_density.scss
new file mode 100644
index 0000000..55076fd
--- /dev/null
+++ b/projects/mat-timepicker/themes/m3/_density.scss
@@ -0,0 +1,21 @@
+@mixin m3-density() {
+ .mat-clock-dial-hand {
+ width: 2px;
+ }
+ .mat-timepicker-content {
+ border-radius: 28px;
+ }
+ .mat-time-toggle-mode-button {
+ margin-top: 0.5rem;
+ }
+ .mat-time-inputs-field {
+ --mat-form-field-container-vertical-padding: 4px;
+ .mdc-text-field {
+ border-bottom-right-radius: var(--mdc-shape-small, 4px);
+ border-bottom-left-radius: var(--mdc-shape-small, 4px);
+ }
+ }
+ .mat-time-inputs .mat-timepicker-content-layout-separator {
+ margin-top: -1.5rem;
+ }
+}
diff --git a/projects/mat-timepicker/themes/m3/_theme.scss b/projects/mat-timepicker/themes/m3/_theme.scss
new file mode 100644
index 0000000..c70e89f
--- /dev/null
+++ b/projects/mat-timepicker/themes/m3/_theme.scss
@@ -0,0 +1,9 @@
+@use './color';
+@use './typography';
+@use "./density";
+
+@mixin theme($theme) {
+ @include color.m3-color($theme);
+ @include typography.m3-typography($theme);
+ @include density.m3-density();
+}
diff --git a/projects/mat-timepicker/themes/m3/_typography.scss b/projects/mat-timepicker/themes/m3/_typography.scss
new file mode 100644
index 0000000..02cbf0b
--- /dev/null
+++ b/projects/mat-timepicker/themes/m3/_typography.scss
@@ -0,0 +1,41 @@
+@use '@angular/material' as mat;
+
+@mixin m3-typography($theme) {
+ h6.mat-timepicker-content-layout-title {
+ font: mat.get-theme-typography($theme, label-medium);
+ letter-spacing: mat.get-theme-typography(
+ $theme,
+ label-medium,
+ letter-spacing
+ );
+ }
+
+ .mat-time-inputs-field {
+ input.mat-mdc-input-element {
+ font: mat.get-theme-typography($theme, display-large);
+ letter-spacing: mat.get-theme-typography(
+ $theme,
+ display-large,
+ letter-spacing
+ );
+ }
+ }
+
+ .mat-timepicker-content-layout-separator {
+ font: mat.get-theme-typography($theme, display-large);
+ letter-spacing: mat.get-theme-typography(
+ $theme,
+ display-large,
+ letter-spacing
+ );
+ }
+
+ .mat-clock-dial-value {
+ font: mat.get-theme-typography($theme, display-large);
+ letter-spacing: mat.get-theme-typography(
+ $theme,
+ display-large,
+ letter-spacing
+ );
+ }
+}