@dontdrinkandroot/ngx-material-extensions 0.7.4 → 0.7.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/assets/_extensions.scss +3 -6
  2. package/assets/_theme.scss +39 -110
  3. package/assets/utils/_color.scss +4 -16
  4. package/package.json +1 -1
package/assets/_extensions.scss CHANGED
@@ -111,9 +111,9 @@
111
111
  z-index: 2;
112
112
  }
113
113
 
114
- height: var(--mat-toolbar-mobile-height);
114
+ height: var(--mat-toolbar-mobile-height, 56px);
115
115
  @media (min-width: $ddr-breakpoint-sm) {
116
- height: var(--mat-toolbar-standard-height);
116
+ height: var(--mat-toolbar-standard-height, 64px);
117
117
  }
118
118
  }
119
119
 
@@ -133,10 +133,7 @@ p.mat-mdc-list-item-line {
133
133
  body.ddr-mat-scrolled {
134
134
  .ddr-mat-toolbar-fixed-top-container {
135
135
  .mat-toolbar {
136
- background: mat.get-theme-color($ddr-light-theme, 'surface-container');
137
- @media (prefers-color-scheme: dark) {
138
- background: mat.get-theme-color($ddr-dark-theme, 'surface-container');
139
- }
136
+ background: var(--mat-sys-surface-container)
140
137
  }
141
138
  }
142
139
  }
package/assets/_theme.scss CHANGED
@@ -1,135 +1,64 @@
1
1
  @use '@angular/material' as mat;
2
2
 
3
- @include mat.core();
4
-
5
3
  $ddr-mat-primary: mat.$azure-palette !default;
6
4
  $ddr-mat-tertiary: mat.$magenta-palette !default;
7
- $ddr-mat-density: 0;
8
-
9
- $ddr-light-theme: mat.define-theme((
10
- color: (
11
- primary: $ddr-mat-primary,
12
- tertiary: $ddr-mat-tertiary,
13
- ),
14
- typography: (
15
- plain-family: 'Roboto Flex Variable'
16
- ),
17
- density: $ddr-mat-density
18
- )) !default;
19
-
20
- $ddr-dark-theme: mat.define-theme((
21
- color: (
22
- theme-type: dark,
23
- primary: $ddr-mat-primary,
24
- tertiary: $ddr-mat-tertiary,
25
- )
26
- )) !default;
5
+ $ddr-mat-density: 0 !default;
27
6
 
28
7
  html {
29
- @include mat.all-component-themes($ddr-light-theme);
30
- @media (prefers-color-scheme: dark) {
31
- @include mat.all-component-colors($ddr-dark-theme);
32
- }
8
+ color-scheme: light dark;
9
+ @include mat.theme((
10
+ color: (
11
+ primary: $ddr-mat-primary,
12
+ tertiary: $ddr-mat-tertiary,
13
+ ),
14
+ typography: (
15
+ plain-family: 'Roboto Flex Variable'
16
+ ),
17
+ density: $ddr-mat-density
18
+ ));
33
19
  }
34
20
 
35
- .mat-mdc-button {
21
+ .mdc-button {
36
22
  &.mat-secondary {
37
- @include mat.button-color($ddr-light-theme, $color-variant: secondary);
38
- @media (prefers-color-scheme: dark) {
39
- @include mat.button-color($ddr-dark-theme, $color-variant: secondary);
40
- }
23
+ @include mat.button-overrides((
24
+ filled-container-color: var(--mat-sys-secondary),
25
+ outlined-label-text-color: var(--mat-sys-secondary),
26
+ protected-label-text-color: var(--mat-sys-secondary),
27
+ text-label-text-color: var(--mat-sys-secondary)
28
+ ));
41
29
  }
42
30
 
43
31
  &.mat-tertiary {
44
- @include mat.button-color($ddr-light-theme, $color-variant: tertiary);
45
- @media (prefers-color-scheme: dark) {
46
- @include mat.button-color($ddr-dark-theme, $color-variant: tertiary);
47
- }
32
+ @include mat.button-overrides((
33
+ filled-container-color: var(--mat-sys-tertiary),
34
+ outlined-label-text-color: var(--mat-sys-tertiary),
35
+ protected-label-text-color: var(--mat-sys-tertiary),
36
+ text-label-text-color: var(--mat-sys-tertiary)
37
+ ));
48
38
  }
49
39
 
50
40
  &.mat-error {
51
- @include mat.button-color($ddr-light-theme, $color-variant: error);
52
- @media (prefers-color-scheme: dark) {
53
- @include mat.button-color($ddr-dark-theme, $color-variant: error);
54
- }
41
+ @include mat.button-overrides((
42
+ filled-container-color: var(--mat-sys-error),
43
+ outlined-label-text-color: var(--mat-sys-error),
44
+ protected-label-text-color: var(--mat-sys-error),
45
+ text-label-text-color: var(--mat-sys-error)
46
+ ));
55
47
  }
56
48
  }
57
49
 
58
- .mat-mdc-raised-button {
59
- &.mat-secondary {
60
- @include mat.button-color($ddr-light-theme, $color-variant: secondary);
61
- @media (prefers-color-scheme: dark) {
62
- @include mat.button-color($ddr-dark-theme, $color-variant: secondary);
63
- }
64
- }
65
-
66
- &.mat-tertiary {
67
- @include mat.button-color($ddr-light-theme, $color-variant: tertiary);
68
- @media (prefers-color-scheme: dark) {
69
- @include mat.button-color($ddr-dark-theme, $color-variant: tertiary);
70
- }
71
- }
72
-
73
- &.mat-error {
74
- @include mat.button-color($ddr-light-theme, $color-variant: error);
75
- @media (prefers-color-scheme: dark) {
76
- @include mat.button-color($ddr-dark-theme, $color-variant: error);
77
- }
78
- }
79
- }
80
-
81
- .mat-mdc-outlined-button {
82
- &.mat-secondary {
83
- @include mat.button-color($ddr-light-theme, $color-variant: secondary);
84
- @media (prefers-color-scheme: dark) {
85
- @include mat.button-color($ddr-dark-theme, $color-variant: secondary);
86
- }
87
- }
88
-
89
- &.mat-tertiary {
90
- @include mat.button-color($ddr-light-theme, $color-variant: tertiary);
91
- @media (prefers-color-scheme: dark) {
92
- @include mat.button-color($ddr-dark-theme, $color-variant: tertiary);
93
- }
94
- }
95
-
96
- &.mat-error {
97
- @include mat.button-color($ddr-light-theme, $color-variant: error);
98
- @media (prefers-color-scheme: dark) {
99
- @include mat.button-color($ddr-dark-theme, $color-variant: error);
100
- }
101
- }
102
- }
103
-
104
- .mat-mdc-unelevated-button {
105
- &.mat-secondary {
106
- @include mat.button-color($ddr-light-theme, $color-variant: secondary);
107
- @media (prefers-color-scheme: dark) {
108
- @include mat.button-color($ddr-dark-theme, $color-variant: secondary);
109
- }
110
- }
111
-
112
- &.mat-tertiary {
113
- @include mat.button-color($ddr-light-theme, $color-variant: tertiary);
114
- @media (prefers-color-scheme: dark) {
115
- @include mat.button-color($ddr-dark-theme, $color-variant: tertiary);
116
- }
117
- }
118
-
119
- &.mat-error {
120
- @include mat.button-color($ddr-light-theme, $color-variant: error);
121
- @media (prefers-color-scheme: dark) {
122
- @include mat.button-color($ddr-dark-theme, $color-variant: error);
123
- }
124
- }
125
- }
126
-
127
- @include mat.typography-hierarchy($ddr-light-theme);
128
-
129
50
  html, body {
130
51
  height: 100%;
131
52
  }
132
53
 
54
+ // Hack? https://github.com/angular/components/issues/30444
55
+ $typo-theme: mat.define-theme((
56
+ typography: (
57
+ plain-family: 'Roboto Flex Variable'
58
+ )
59
+ )) !default;
60
+ @include mat.typography-hierarchy($typo-theme);
61
+
133
62
  body {
134
63
  margin: 0;
135
64
  font-family: 'Roboto Flex Variable', 'Helvetica Neue', sans-serif;
package/assets/utils/_color.scss CHANGED
@@ -1,29 +1,17 @@
1
1
  @use '@angular/material' as mat;
2
2
 
3
3
  .text-primary {
4
- color: mat.get-theme-color($ddr-light-theme, primary) !important;
5
- @media (prefers-color-scheme: dark) {
6
- color: mat.get-theme-color($ddr-dark-theme, primary) !important;
7
- }
4
+ color: var(--mat-sys-primary);
8
5
  }
9
6
 
10
7
  .text-secondary {
11
- color: mat.get-theme-color($ddr-light-theme, secondary) !important;
12
- @media (prefers-color-scheme: dark) {
13
- color: mat.get-theme-color($ddr-dark-theme, secondary) !important;
14
- }
8
+ color: var(--mat-sys-secondary);
15
9
  }
16
10
 
17
11
  .text-tertiary {
18
- color: mat.get-theme-color($ddr-light-theme, tertiary) !important;
19
- @media (prefers-color-scheme: dark) {
20
- color: mat.get-theme-color($ddr-dark-theme, tertiary) !important;
21
- }
12
+ color: var(--mat-sys-tertiary);
22
13
  }
23
14
 
24
15
  .text-error {
25
- color: mat.get-theme-color($ddr-light-theme, error) !important;
26
- @media (prefers-color-scheme: dark) {
27
- color: mat.get-theme-color($ddr-dark-theme, error) !important;
28
- }
16
+ color: var(--mat-sys-error);
29
17
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dontdrinkandroot/ngx-material-extensions",
3
- "version": "0.7.4",
3
+ "version": "0.7.5",
4
4
  "peerDependencies": {
5
5
  "@angular/cdk": "^19",
6
6
  "@angular/common": "^19",