Skip to content

Commit

Permalink
feat: keep support for m2 theme with angular material 18
Browse files Browse the repository at this point in the history
  • Loading branch information
@shhdharmen
shhdharmen committed Jun 20, 2024
1 parent 1e74059 commit cbaf667
Show file tree
Hide file tree
Showing 5 changed files with 63 additions and 70 deletions.
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@
"private": true,
"dependencies": {
"@angular/animations": "^18.0.3",
"@angular/cdk": "^17.3.9",
"@angular/cdk": "^18.0.3",
"@angular/common": "^18.0.3",
"@angular/compiler": "^18.0.3",
"@angular/core": "^18.0.3",
"@angular/forms": "^18.0.3",
"@angular/material": "^17.3.9",
"@angular/material": "^18.0.3",
"@angular/platform-browser": "^18.0.3",
"@angular/platform-browser-dynamic": "^18.0.3",
"@angular/router": "^18.0.3",
Expand Down
22 changes: 12 additions & 10 deletions projects/docs/src/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,18 @@
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@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);
: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);
}

/* You can add global styles to this file, and also import other style files */

Expand Down
12 changes: 6 additions & 6 deletions projects/docs/src/styles/_theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,26 @@
// 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
// hue. Available color palettes: https://material.io/design/color/
$ngx-mat-timepicker-primary: mat.define-palette(mat.$indigo-palette);
$ngx-mat-timepicker-accent: mat.define-palette(
mat.$pink-palette,
$ngx-mat-timepicker-primary: mat.m2-define-palette(mat.$m2-indigo-palette);
$ngx-mat-timepicker-accent: mat.m2-define-palette(
mat.$m2-pink-palette,
A200,
A100,
A400
);

// The warn palette is optional (defaults to red).
$ngx-mat-timepicker-warn: mat.define-palette(mat.$red-palette);
$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.define-light-theme(
$ngx-mat-timepicker-theme: mat.m2-define-light-theme(
(
color: (
primary: $ngx-mat-timepicker-primary,
accent: $ngx-mat-timepicker-accent,
warn: $ngx-mat-timepicker-warn,
),
typography: mat.define-typography-config(),
typography: mat.m2-define-typography-config(),
)
);
78 changes: 34 additions & 44 deletions projects/mat-timepicker/_timepicker-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,93 +8,88 @@ $inputs-separator-font-size: 3rem !default;
$inputs-separator-line-height: 1.25rem;
$primary-opacity: 0.15;

@mixin _color($palette) {
@mixin _m2-color($theme, $palette) {
.mat-timepicker-toggle.mat-timepicker-toggle-active {
color: mat.get-color-from-palette($palette);
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-color-from-palette($palette);
background-color: mat.get-color-from-palette($palette, $primary-opacity);
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-color-from-palette($palette);
background-color: mat.get-theme-color($theme, $palette, default);
}

.mat-clock-dial-hand:not(.mat-clock-dial-hand-disabled) {
background-color: mat.get-color-from-palette($palette);
background-color: mat.get-theme-color($theme, $palette, default);

&::before {
background-color: mat.get-color-from-palette($palette);
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-color-from-palette($palette),
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-color-from-palette($palette),
mat.get-theme-color($theme, $palette, default),
$alpha: -0.6
);
}
}

@mixin color($config-or-theme) {
$config: mat.get-color-config($config-or-theme);
$is-dark-theme: map.get($config, is-dark);
$foreground: map.get($config, foreground);
$background: map.get($config, background);

@include _color(map.get($config, primary));
@mixin m2-color($theme) {
@include _m2-color($theme, primary);

.mat-timepicker-toggle {
color: mat.get-color-from-palette($foreground, icon);
color: mat.get-theme-color($theme, foreground, icon);
}

.mat-timepicker-content {
@include mat.elevation(4);
background-color: mat.get-color-from-palette($background, card);
color: mat.get-color-from-palette($foreground, text);
background-color: mat.get-theme-color($theme, background, card);
color: mat.get-theme-color($theme, foreground, text);

&.mat-accent {
@include _color(map.get($config, accent));
@include _m2-color($theme, accent);
}

&.mat-warn {
@include _color(map.get($config, warn));
@include _m2-color($theme, warn);
}
}

.mat-timepicker-content-layout-title {
color: mat.get-color-from-palette($foreground, secondary-text);
color: mat.get-theme-color($theme, foreground, secondary-text);
}

.mat-time-toggle-mode-button svg {
fill: mat.get-color-from-palette($foreground, secondary-text);
fill: mat.get-theme-color($theme, foreground, secondary-text);
}

.mat-time-period {
border-color: mat.get-color-from-palette($foreground, divider);
border-color: mat.get-theme-color($theme, foreground, divider);
}

.mat-time-period-item-disabled {
color: mat.get-color-from-palette($foreground, disabled-button);
background-color: mat.get-color-from-palette($background, disabled-button);
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-color-from-palette($background, background);
background-color: mat.get-theme-color($theme, background, background);
}

.mat-clock-dial-hand.mat-clock-dial-hand-disabled {
Expand All @@ -105,7 +100,7 @@ $primary-opacity: 0.15;
background: transparent;

&:not(.mat-clock-dial-cell-disabled):hover {
background-color: mat.get-color-from-palette($background, hover);
background-color: mat.get-theme-color($theme, background, hover);
}
}

Expand All @@ -114,21 +109,20 @@ $primary-opacity: 0.15;
}

.mat-clock-dial-cell.mat-clock-dial-cell.mat-clock-dial-cell-disabled {
color: mat.get-color-from-palette($foreground, disabled-button);
color: mat.get-theme-color($theme, foreground, disabled-button);

.mat-mdc-button-persistent-ripple::before {
background-color: transparent;
}
}
}

@mixin typography($config-or-theme) {
$config: mat.get-typography-config($config-or-theme);
@mixin m2-typography($theme) {

h6.mat-timepicker-content-layout-title {
font: {
size: $timepicker-content-title-font-size;
weight: mat.font-weight($config, subtitle-2);
weight: mat.get-theme-typography($theme, subtitle-2, font-weight);
}
}

Expand All @@ -149,18 +143,14 @@ $primary-opacity: 0.15;
}
}

@mixin theme($theme-or-color-config) {
$color: mat.get-color-config($theme-or-color-config);
$typography: mat.get-typography-config($theme-or-color-config);

@if $color != null {
@include color($color);
}

@if $typography != null {
@include typography($typography);
@mixin theme($theme) {
@if (mat.get-theme-version($theme) == 1) {
// Add your new M3 styles here.
} @else {
$typography: mat.define-typography-config();
@include typography($typography);
// Keep your old M2 styles here.

@include m2-color($theme);

@include m2-typography($theme);
}
}
17 changes: 9 additions & 8 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -258,10 +258,10 @@
vite "5.2.11"
watchpack "2.4.1"

"@angular/cdk@^17.3.9":
version "17.3.9"
resolved "https://registry.npmjs.org/@angular/cdk/-/cdk-17.3.9.tgz"
integrity sha512-N/7Is+FkIIql5UEL/I+PV6THw+yXNCCGGpwimf/yaNgT9y1fHAmBWhDY0oQqFjCuD+kXl9gQL0ONfsl5Nlnk+w==
"@angular/cdk@^18.0.3":
version "18.0.3"
resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-18.0.3.tgz#498dfd79bc6e846bc6cfb348d967a3a1b7354fc0"
integrity sha512-F6kXAoIWUbvhvbSGnMxrKJZsI7rhGKDXVFFf9m+ZQAbqboSyDbbszux7Em4CEh27LaXYNFltUcKdCQ3hdp7Kig==
dependencies:
tslib "^2.3.0"
optionalDependencies:
Expand Down Expand Up @@ -332,10 +332,10 @@
dependencies:
tslib "^2.3.0"

"@angular/material@^17.3.9":
version "17.3.9"
resolved "https://registry.npmjs.org/@angular/material/-/material-17.3.9.tgz"
integrity sha512-iNLXGfTsXYQ7lX9UkU4ifb6+lVKjDFQJkWE8HmNWC3C2KXC9k15UefPKy4/sZUVzLE/yOBHPfNDwdhaJGlcu+g==
"@angular/material@^18.0.3":
version "18.0.3"
resolved "https://registry.yarnpkg.com/@angular/material/-/material-18.0.3.tgz#9760a332badd9140464278822825f12b396f8a52"
integrity sha512-VIlK+0CxreAkDmr05TKelTr11I7yUtGPwRTFaWfQtXNkYEwGE1iuZGz3Iz8otxvHsTLC74Er4vMSYndwJvMyjQ==
dependencies:
"@material/animation" "15.0.0-canary.7f224ddd4.0"
"@material/auto-init" "15.0.0-canary.7f224ddd4.0"
Expand Down Expand Up @@ -380,6 +380,7 @@
"@material/tab-scroller" "15.0.0-canary.7f224ddd4.0"
"@material/textfield" "15.0.0-canary.7f224ddd4.0"
"@material/theme" "15.0.0-canary.7f224ddd4.0"
"@material/tokens" "15.0.0-canary.7f224ddd4.0"
"@material/tooltip" "15.0.0-canary.7f224ddd4.0"
"@material/top-app-bar" "15.0.0-canary.7f224ddd4.0"
"@material/touch-target" "15.0.0-canary.7f224ddd4.0"
Expand Down

0 comments on commit cbaf667

Please sign in to comment.