From 5c0dce33dc92a846596d821e45c7e56a4478a4fd Mon Sep 17 00:00:00 2001 From: Dharmen Shah Date: Wed, 19 Jun 2024 21:18:24 +0530 Subject: [PATCH] feat: changes for M3 BREAKING CHANGE: peer deps updated to angular v18 --- projects/docs/src/app/app.component.html | 3 + projects/docs/src/app/app.component.ts | 28 ++- projects/docs/src/app/app.module.ts | 2 + .../docs/src/app/getting-started/index.md | 28 ++- projects/docs/src/assets/icons/palette.svg | 1 + projects/docs/src/styles.scss | 35 ++-- projects/docs/src/styles/_all-components.scss | 28 +++ projects/docs/src/styles/_theme.scss | 39 ++++- projects/mat-timepicker/_index.scss | 2 +- .../mat-timepicker/_timepicker-theme.scss | 160 ++---------------- projects/mat-timepicker/package.json | 8 +- .../mat-timepicker/src/lib/clock-dial.scss | 3 +- projects/mat-timepicker/src/lib/clock-size.ts | 2 +- .../mat-timepicker/src/lib/time-inputs.scss | 4 +- .../mat-timepicker/src/lib/time-period.scss | 8 + .../src/lib/timepicker-content-layout.scss | 1 - .../src/lib/timepicker-content.scss | 4 - .../src/lib/timepicker-content.ts | 1 + projects/mat-timepicker/themes/m2/_color.scss | 111 ++++++++++++ .../mat-timepicker/themes/m2/_density.scss | 8 + projects/mat-timepicker/themes/m2/_theme.scss | 9 + .../mat-timepicker/themes/m2/_typography.scss | 27 +++ .../mat-timepicker/themes/m2/_variables.scss | 5 + projects/mat-timepicker/themes/m3/_color.scss | 111 ++++++++++++ .../mat-timepicker/themes/m3/_density.scss | 21 +++ projects/mat-timepicker/themes/m3/_theme.scss | 9 + .../mat-timepicker/themes/m3/_typography.scss | 41 +++++ 27 files changed, 516 insertions(+), 183 deletions(-) create mode 100644 projects/docs/src/assets/icons/palette.svg create mode 100644 projects/docs/src/styles/_all-components.scss create mode 100644 projects/mat-timepicker/themes/m2/_color.scss create mode 100644 projects/mat-timepicker/themes/m2/_density.scss create mode 100644 projects/mat-timepicker/themes/m2/_theme.scss create mode 100644 projects/mat-timepicker/themes/m2/_typography.scss create mode 100644 projects/mat-timepicker/themes/m2/_variables.scss create mode 100644 projects/mat-timepicker/themes/m3/_color.scss create mode 100644 projects/mat-timepicker/themes/m3/_density.scss create mode 100644 projects/mat-timepicker/themes/m3/_theme.scss create mode 100644 projects/mat-timepicker/themes/m3/_typography.scss 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 + ); + } +}