@dontdrinkandroot/ngx-material-extensions 0.7.4 → 0.7.6

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 (11) hide show
  1. package/assets/_extensions.scss +12 -12
  2. package/assets/_mixins.scss +16 -4
  3. package/assets/_theme.scss +39 -113
  4. package/assets/_utils.scss +6 -7
  5. package/assets/_variables.scss +28 -22
  6. package/assets/fonts.scss +2 -2
  7. package/assets/style.scss +5 -5
  8. package/assets/utils/_color.scss +4 -18
  9. package/assets/utils/_display.scss +6 -4
  10. package/assets/utils/_spacing.scss +8 -6
  11. package/package.json +1 -1
package/assets/_extensions.scss CHANGED
@@ -1,4 +1,7 @@
1
1
  @use '@angular/material' as mat;
2
+ @use 'variables' as ddr-vars;
3
+ @use 'mixins' as ddr-mixins;
4
+ @use 'utils' as ddr-utils;
2
5
 
3
6
  .mat-sidenav-container {
4
7
 
@@ -55,7 +58,7 @@
55
58
 
56
59
  .ddr-mat-fab-fixed-container {
57
60
 
58
- height: calc($ddr-mat-fab-height + 2rem);
61
+ height: calc(ddr-vars.$fab-height + 2rem);
59
62
 
60
63
  .mdc-fab {
61
64
  position: fixed;
@@ -67,8 +70,8 @@
67
70
  .mat-toolbar {
68
71
 
69
72
  .ddr-mat-heading {
70
- @extend .text-overflow-ellipsis;
71
- @extend .flex-auto;
73
+ @include ddr-mixins.text-overflow-ellipsis;
74
+ @include ddr-mixins.flex-auto;
72
75
  }
73
76
 
74
77
  ddr-mat-sidenav-toggle {
@@ -83,7 +86,7 @@
83
86
  padding-right: .25rem;
84
87
  }
85
88
 
86
- @include ddr-mat-mobile {
89
+ @include ddr-mixins.media-mobile {
87
90
  &.ddr-mat-toolbar-icon-start-mobile {
88
91
  padding-left: .25rem;
89
92
  }
@@ -93,7 +96,7 @@
93
96
  }
94
97
  }
95
98
 
96
- @include ddr-mat-desktop {
99
+ @include ddr-mixins.media-desktop {
97
100
  &.ddr-mat-toolbar-icon-start-desktop {
98
101
  padding-left: .25rem;
99
102
  }
@@ -111,9 +114,9 @@
111
114
  z-index: 2;
112
115
  }
113
116
 
114
- height: var(--mat-toolbar-mobile-height);
115
- @media (min-width: $ddr-breakpoint-sm) {
116
- height: var(--mat-toolbar-standard-height);
117
+ height: var(--mat-toolbar-mobile-height, 56px);
118
+ @media (min-width: ddr-vars.$breakpoint-sm) {
119
+ height: var(--mat-toolbar-standard-height, 64px);
117
120
  }
118
121
  }
119
122
 
@@ -133,10 +136,7 @@ p.mat-mdc-list-item-line {
133
136
  body.ddr-mat-scrolled {
134
137
  .ddr-mat-toolbar-fixed-top-container {
135
138
  .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
- }
139
+ background: var(--mat-sys-surface-container)
140
140
  }
141
141
  }
142
142
  }
package/assets/_mixins.scss CHANGED
@@ -1,11 +1,23 @@
1
- @mixin ddr-mat-mobile {
2
- @media (max-width: #{$ddr-breakpoint-md - 1}) {
1
+ @use 'variables' as ddr-vars;
2
+
3
+ @mixin media-mobile {
4
+ @media (max-width: #{ddr-vars.$breakpoint-md - 1}) {
3
5
  @content;
4
6
  }
5
7
  }
6
8
 
7
- @mixin ddr-mat-desktop {
8
- @media (min-width: #{$ddr-breakpoint-md}) {
9
+ @mixin media-desktop {
10
+ @media (min-width: #{ddr-vars.$breakpoint-md}) {
9
11
  @content;
10
12
  }
11
13
  }
14
+
15
+ @mixin text-overflow-ellipsis {
16
+ overflow: hidden !important;
17
+ text-overflow: ellipsis !important;
18
+ white-space: nowrap !important;
19
+ }
20
+
21
+ @mixin flex-auto {
22
+ flex: 1 1 auto !important;
23
+ }
package/assets/_theme.scss CHANGED
@@ -1,135 +1,61 @@
1
1
  @use '@angular/material' as mat;
2
-
3
- @include mat.core();
4
-
5
- $ddr-mat-primary: mat.$azure-palette !default;
6
- $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;
2
+ @use 'variables' as ddr-vars;
27
3
 
28
4
  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
- }
33
- }
34
-
35
- .mat-mdc-button {
36
- &.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
- }
41
- }
42
-
43
- &.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
- }
48
- }
49
-
50
- &.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
- }
55
- }
56
- }
57
-
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
- }
5
+ color-scheme: light dark;
6
+ @include mat.theme((
7
+ color: (
8
+ primary: ddr-vars.$primary,
9
+ tertiary: ddr-vars.$tertiary,
10
+ ),
11
+ typography: (
12
+ plain-family: 'Roboto Flex Variable'
13
+ ),
14
+ density: ddr-vars.$density
15
+ ));
79
16
  }
80
17
 
81
- .mat-mdc-outlined-button {
18
+ .mdc-button {
82
19
  &.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
- }
20
+ @include mat.button-overrides((
21
+ filled-container-color: var(--mat-sys-secondary),
22
+ outlined-label-text-color: var(--mat-sys-secondary),
23
+ protected-label-text-color: var(--mat-sys-secondary),
24
+ text-label-text-color: var(--mat-sys-secondary)
25
+ ));
87
26
  }
88
27
 
89
28
  &.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
- }
29
+ @include mat.button-overrides((
30
+ filled-container-color: var(--mat-sys-tertiary),
31
+ outlined-label-text-color: var(--mat-sys-tertiary),
32
+ protected-label-text-color: var(--mat-sys-tertiary),
33
+ text-label-text-color: var(--mat-sys-tertiary)
34
+ ));
94
35
  }
95
36
 
96
37
  &.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
- }
38
+ @include mat.button-overrides((
39
+ filled-container-color: var(--mat-sys-error),
40
+ outlined-label-text-color: var(--mat-sys-error),
41
+ protected-label-text-color: var(--mat-sys-error),
42
+ text-label-text-color: var(--mat-sys-error)
43
+ ));
101
44
  }
102
45
  }
103
46
 
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
47
  html, body {
130
48
  height: 100%;
131
49
  }
132
50
 
51
+ // Hack? https://github.com/angular/components/issues/30444
52
+ $typo-theme: mat.define-theme((
53
+ typography: (
54
+ plain-family: 'Roboto Flex Variable'
55
+ )
56
+ )) !default;
57
+ @include mat.typography-hierarchy($typo-theme);
58
+
133
59
  body {
134
60
  margin: 0;
135
61
  font-family: 'Roboto Flex Variable', 'Helvetica Neue', sans-serif;
package/assets/_utils.scss CHANGED
@@ -1,6 +1,7 @@
1
- @import "./utils/display";
2
- @import "./utils/spacing";
3
- @import "./utils/color";
1
+ @use "./utils/display";
2
+ @use "./utils/spacing";
3
+ @use "./utils/color";
4
+ @use 'mixins' as ddr-mixins;
4
5
 
5
6
  .flex-row {
6
7
  flex-direction: row !important;
@@ -11,7 +12,7 @@
11
12
  }
12
13
 
13
14
  .flex-auto {
14
- flex: 1 1 auto !important;
15
+ @include ddr-mixins.flex-auto;
15
16
  }
16
17
 
17
18
  .d-grid {
@@ -28,9 +29,7 @@
28
29
  }
29
30
 
30
31
  .text-overflow-ellipsis {
31
- overflow: hidden !important;
32
- text-overflow: ellipsis !important;
33
- white-space: nowrap !important;
32
+ @include ddr-mixins.text-overflow-ellipsis;
34
33
  }
35
34
 
36
35
 
package/assets/_variables.scss CHANGED
@@ -1,14 +1,20 @@
1
- $ddr-spacer: 1rem !default;
2
- $ddr-spacers: (
1
+ @use '@angular/material' as mat;
2
+
3
+ $primary: mat.$azure-palette !default;
4
+ $tertiary: mat.$magenta-palette !default;
5
+ $density: 0 !default;
6
+
7
+ $spacer: 1rem !default;
8
+ $spacers: (
3
9
  none: 0,
4
- quarter: $ddr-spacer * .25,
5
- half: $ddr-spacer * .5,
6
- full: $ddr-spacer,
7
- one-half: $ddr-spacer * 1.5,
8
- double: $ddr-spacer * 2
10
+ quarter: $spacer * .25,
11
+ half: $spacer * .5,
12
+ full: $spacer,
13
+ one-half: $spacer * 1.5,
14
+ double: $spacer * 2
9
15
  ) !default;
10
16
 
11
- $ddr-paddings: (
17
+ $paddings: (
12
18
  'p': 'padding',
13
19
  'ps': 'padding-left',
14
20
  'pe': 'padding-right',
@@ -16,7 +22,7 @@ $ddr-paddings: (
16
22
  'pb': 'padding-bottom'
17
23
  ) !default;
18
24
 
19
- $ddr-margins: (
25
+ $margins: (
20
26
  'm': 'margin',
21
27
  'ms': 'margin-left',
22
28
  'me': 'margin-right',
@@ -24,7 +30,7 @@ $ddr-margins: (
24
30
  'mb': 'margin-bottom'
25
31
  ) !default;
26
32
 
27
- $ddr-displays: (
33
+ $displays: (
28
34
  none: none,
29
35
  inline: inline,
30
36
  inline-block: inline-block,
@@ -38,17 +44,17 @@ $ddr-displays: (
38
44
  inline-flex: inline-flex
39
45
  ) !default;
40
46
 
41
- $ddr-mat-fab-height: 56px !default;
47
+ $fab-height: 56px !default;
42
48
 
43
- $ddr-breakpoint-xs: 0;
44
- $ddr-breakpoint-sm: 600px;
45
- $ddr-breakpoint-md: 960px;
46
- $ddr-breakpoint-lg: 1280px;
47
- $ddr-breakpoint-xl: 1920px;
48
- $ddr-breakpoints: (
49
- xs: $ddr-breakpoint-xs,
50
- sm: $ddr-breakpoint-sm,
51
- md: $ddr-breakpoint-md,
52
- lg: $ddr-breakpoint-lg,
53
- xl: $ddr-breakpoint-xl
49
+ $breakpoint-xs: 0;
50
+ $breakpoint-sm: 600px;
51
+ $breakpoint-md: 960px;
52
+ $breakpoint-lg: 1280px;
53
+ $breakpoint-xl: 1920px;
54
+ $breakpoints: (
55
+ xs: $breakpoint-xs,
56
+ sm: $breakpoint-sm,
57
+ md: $breakpoint-md,
58
+ lg: $breakpoint-lg,
59
+ xl: $breakpoint-xl
54
60
  ) !default;
package/assets/fonts.scss CHANGED
@@ -1,5 +1,5 @@
1
- @import '@fontsource-variable/roboto-flex';
2
- @import "@fontsource/material-symbols-rounded/400.css";
1
+ @use '@fontsource-variable/roboto-flex';
2
+ @use "@fontsource/material-symbols-rounded";
3
3
 
4
4
  .material-symbols-rounded {
5
5
  font-family: "Material Symbols Rounded";
package/assets/style.scss CHANGED
@@ -1,5 +1,5 @@
1
- @import "variables";
2
- @import "mixins";
3
- @import "theme";
4
- @import "utils";
5
- @import "extensions";
1
+ @forward "variables";
2
+ @use "mixins";
3
+ @use "theme";
4
+ @use "utils";
5
+ @use "extensions";
package/assets/utils/_color.scss CHANGED
@@ -1,29 +1,15 @@
1
- @use '@angular/material' as mat;
2
-
3
1
  .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
- }
2
+ color: var(--mat-sys-primary);
8
3
  }
9
4
 
10
5
  .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
- }
6
+ color: var(--mat-sys-secondary);
15
7
  }
16
8
 
17
9
  .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
- }
10
+ color: var(--mat-sys-tertiary);
22
11
  }
23
12
 
24
13
  .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
- }
14
+ color: var(--mat-sys-error);
29
15
  }
package/assets/utils/_display.scss CHANGED
@@ -1,18 +1,20 @@
1
+ @use '../variables' as ddr-vars;
2
+
1
3
  @function next-breakpoint($breakpoint) {
2
- $breakpoints: map-keys($ddr-breakpoints);
4
+ $breakpoints: map-keys(ddr-vars.$breakpoints);
3
5
  $index: index($breakpoints, $breakpoint);
4
6
  @if $index < length($breakpoints) {
5
- @return map-get($ddr-breakpoints, nth($breakpoints, $index + 1));
7
+ @return map-get(ddr-vars.$breakpoints, nth($breakpoints, $index + 1));
6
8
  }
7
9
  @return null;
8
10
  }
9
11
 
10
- @each $display, $value in $ddr-displays {
12
+ @each $display, $value in ddr-vars.$displays {
11
13
  .d-#{$display} {
12
14
  display: $value !important;
13
15
  }
14
16
 
15
- @each $breakpoint, $size in $ddr-breakpoints {
17
+ @each $breakpoint, $size in ddr-vars.$breakpoints {
16
18
  .d-min-#{$breakpoint}-#{$display} {
17
19
  @media (min-width: $size) {
18
20
  display: $value !important;
package/assets/utils/_spacing.scss CHANGED
@@ -1,12 +1,14 @@
1
- @each $prefix, $property in $ddr-paddings {
2
- @each $suffix, $size in $ddr-spacers {
1
+ @use '../variables' as ddr-vars;
2
+
3
+ @each $prefix, $property in ddr-vars.$paddings {
4
+ @each $suffix, $size in ddr-vars.$spacers {
3
5
  .#{$prefix}-#{$suffix} {
4
6
  #{$property}: #{$size} !important;
5
7
  }
6
8
  }
7
9
  }
8
10
 
9
- @each $suffix, $size in $ddr-spacers {
11
+ @each $suffix, $size in ddr-vars.$spacers {
10
12
  .px-#{$suffix} {
11
13
  padding-left: #{$size} !important;
12
14
  padding-right: #{$size} !important;
@@ -18,15 +20,15 @@
18
20
  }
19
21
  }
20
22
 
21
- @each $prefix, $property in $ddr-margins {
22
- @each $suffix, $size in $ddr-spacers {
23
+ @each $prefix, $property in ddr-vars.$margins {
24
+ @each $suffix, $size in ddr-vars.$spacers {
23
25
  .#{$prefix}-#{$suffix} {
24
26
  #{$property}: #{$size} !important;
25
27
  }
26
28
  }
27
29
  }
28
30
 
29
- @each $suffix, $size in $ddr-spacers {
31
+ @each $suffix, $size in ddr-vars.$spacers {
30
32
  .mx-#{$suffix} {
31
33
  margin-left: #{$size} !important;
32
34
  margin-right: #{$size} !important;
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.6",
4
4
  "peerDependencies": {
5
5
  "@angular/cdk": "^19",
6
6
  "@angular/common": "^19",