@nettyapps/ntyux 21.0.25 → 21.0.27

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 (12) hide show
  1. package/fesm2022/nettyapps-ntyux.mjs +52 -36
  2. package/fesm2022/nettyapps-ntyux.mjs.map +1 -1
  3. package/package.json +2 -2
  4. package/themes/deep-bluetheme.css +86 -132
  5. package/themes/graytheme.css +66 -76
  6. package/themes/greentheme.css +66 -76
  7. package/themes/nettytheme.css +276 -0
  8. package/themes/orangetheme.css +65 -75
  9. package/themes/purpletheme.css +65 -75
  10. package/themes/redtheme.css +65 -75
  11. package/themes/themes.css +1 -0
  12. package/types/nettyapps-ntyux.d.ts +14 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nettyapps/ntyux",
3
- "version": "21.0.25",
3
+ "version": "21.0.27",
4
4
  "description": "Generic UI components for NettyApps Angular applications.",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -8,7 +8,7 @@
8
8
  "peerDependencies": {
9
9
  "@angular/common": ">= 21.0.0",
10
10
  "@angular/core": ">= 21.0.0",
11
- "@nettyapps/ntybase": ">= 21.0.32"
11
+ "@nettyapps/ntybase": ">= 21.0.33"
12
12
  },
13
13
  "dependencies": {
14
14
  "tslib": "^2.3.0"
package/themes/deep-bluetheme.css CHANGED
@@ -1,23 +1,12 @@
1
1
  /* Note: Color palettes are generated from primary: #1976D2 */
2
2
  .deep-blue-theme {
3
3
  /* COLOR SYSTEM VARIABLES */
4
- color-scheme: dark;
4
+ color-scheme: light;
5
5
 
6
6
  /* Required field */
7
- --mat-sys-required: light-dark(
8
- var(--mat-sys-secondary-container),
9
- var(--mat-sys-inverse-primary)
10
- );
11
-
12
- --mat-nty-save-record-header-bar: light-dark(
13
- var(--mat-sys-secondary-container),
14
- var(--mat-sys-primary)
15
- );
16
-
17
- --mat-nty-save-record-identifier: light-dark(
18
- var(--mat-sys-on-primary-container),
19
- var(--mat-sys-on-primary)
20
- );
7
+ --mat-sys-required: var(--mat-sys-inverse-primary);
8
+ --mat-nty-save-record-header-bar: var(--mat-sys-primary);
9
+ --mat-nty-save-record-identifier: var(--mat-sys-on-primary);
21
10
 
22
11
  /* Alert */
23
12
  --mat-sys-netty-success: #00f0a0;
@@ -30,58 +19,56 @@
30
19
  --mat-sys-netty-on-warning-container: #ffb800;
31
20
 
32
21
  /* Primary palette variables */
33
- --mat-sys-primary: light-dark(#005faf, #a5c8ff);
34
- --mat-sys-on-primary: light-dark(#ffffff, #00315f);
35
- --mat-sys-primary-container: light-dark(#d4e3ff, #004786);
36
- --mat-sys-on-primary-container: light-dark(#001c3a, #d4e3ff);
37
- --mat-sys-inverse-primary: light-dark(#a5c8ff, #005faf);
38
- --mat-sys-primary-fixed: light-dark(#d4e3ff, #d4e3ff);
39
- --mat-sys-primary-fixed-dim: light-dark(#a5c8ff, #a5c8ff);
40
- --mat-sys-on-primary-fixed: light-dark(#001c3a, #001c3a);
41
- --mat-sys-on-primary-fixed-variant: light-dark(#004786, #004786);
22
+ --mat-sys-primary: #005faf;
23
+ --mat-sys-on-primary: #ffffff;
24
+ --mat-sys-primary-container: #d4e3ff;
25
+ --mat-sys-on-primary-container: #001c3a;
26
+ --mat-sys-inverse-primary: #a5c8ff;
27
+ --mat-sys-primary-fixed: #d4e3ff;
28
+ --mat-sys-primary-fixed-dim: #a5c8ff;
29
+ --mat-sys-on-primary-fixed: #001c3a;
30
+ --mat-sys-on-primary-fixed-variant: #004786;
42
31
 
43
32
  /* Secondary palette variables */
44
- --mat-sys-secondary: light-dark(#475f84, #afc8f1);
45
- --mat-sys-on-secondary: light-dark(#ffffff, #163153);
46
- --mat-sys-secondary-container: light-dark(#d4e3ff, #2f486a);
47
- --mat-sys-on-secondary-container: light-dark(#001c3a, #d4e3ff);
48
- --mat-sys-secondary-fixed: light-dark(#d4e3ff, #d4e3ff);
49
- --mat-sys-secondary-fixed-dim: light-dark(#afc8f1, #afc8f1);
50
- --mat-sys-on-secondary-fixed: light-dark(#001c3a, #001c3a);
51
- --mat-sys-on-secondary-fixed-variant: light-dark(#2f486a, #2f486a);
33
+ --mat-sys-secondary: #475f84;
34
+ --mat-sys-on-secondary: #ffffff;
35
+ --mat-sys-secondary-container: #d4e3ff;
36
+ --mat-sys-on-secondary-container: #001c3a;
37
+ --mat-sys-secondary-fixed: #d4e3ff;
38
+ --mat-sys-secondary-fixed-dim: #afc8f1;
39
+ --mat-sys-on-secondary-fixed: #001c3a;
40
+ --mat-sys-on-secondary-fixed-variant: #2f486a;
52
41
 
53
42
  /* Tertiary palette variables */
54
- --mat-sys-tertiary: light-dark(#8540a1, #edb1ff);
55
- --mat-sys-on-tertiary: light-dark(#ffffff, #52046e);
56
- --mat-sys-tertiary-container: light-dark(#f9d8ff, #6b2687);
57
- --mat-sys-on-tertiary-container: light-dark(#320046, #f9d8ff);
58
- --mat-sys-tertiary-fixed: light-dark(#f9d8ff, #f9d8ff);
59
- --mat-sys-tertiary-fixed-dim: light-dark(#edb1ff, #edb1ff);
60
- --mat-sys-on-tertiary-fixed: light-dark(#320046, #320046);
61
- --mat-sys-on-tertiary-fixed-variant: light-dark(#6b2687, #6b2687);
43
+ --mat-sys-tertiary: #8540a1;
44
+ --mat-sys-on-tertiary: #ffffff;
45
+ --mat-sys-tertiary-container: #f9d8ff;
46
+ --mat-sys-on-tertiary-container: #320046;
47
+ --mat-sys-tertiary-fixed: #f9d8ff;
48
+ --mat-sys-tertiary-fixed-dim: #edb1ff;
49
+ --mat-sys-on-tertiary-fixed: #320046;
50
+ --mat-sys-on-tertiary-fixed-variant: #6b2687;
62
51
 
63
52
  /* Neutral palette variables */
64
- --mat-sys-background: light-dark(#f9f9ff, #101319);
65
- --mat-sys-on-background: light-dark(#181c21, #e0e2ea);
66
- --mat-sys-surface: light-dark(#f9f9ff, #101319);
67
- --mat-sys-surface-dim: light-dark(#d8dae2, #101319);
68
- --mat-sys-surface-bright: light-dark(#f9f9ff, #363940);
69
- --mat-sys-surface-container-lowest: light-dark(#ffffff, #0b0e14);
70
- --mat-sys-surface-container: light-dark(#ecedf6, #1c2026);
71
- --mat-sys-surface-container-high: light-dark(#e6e8f0, #272a30);
72
- --mat-sys-surface-container-highest: light-dark(#e0e2ea, #32353b);
73
- --mat-sys-on-surface: light-dark(#181c21, #e0e2ea);
74
- --mat-sys-shadow: light-dark(#000000, #000000);
75
- --mat-sys-scrim: light-dark(#000000, #000000);
76
- --mat-sys-surface-tint: light-dark(#005faf, #a5c8ff);
77
- --mat-sys-inverse-surface: light-dark(#2d3037, #e0e2ea);
78
- --mat-sys-inverse-on-surface: light-dark(#eff0f9, #2d3037);
79
- --mat-sys-outline: light-dark(#717783, #8b919e);
80
- --mat-sys-outline-variant: light-dark(#c1c6d4, #414752);
81
- --mat-sys-neutral10: light-dark(
82
- #181c21,
83
- #181c21
84
- ); /* Variable used for the form field native select option text color */
53
+ --mat-sys-background: #f9f9ff;
54
+ --mat-sys-on-background: #181c21;
55
+ --mat-sys-surface: #f9f9ff;
56
+ --mat-sys-surface-dim: #d8dae2;
57
+ --mat-sys-surface-bright: #f9f9ff;
58
+ --mat-sys-surface-container-lowest: #ffffff;
59
+ --mat-sys-surface-container: #ecedf6;
60
+ --mat-sys-surface-container-high: #e6e8f0;
61
+ --mat-sys-surface-container-highest: #e0e2ea;
62
+ --mat-sys-on-surface: #181c21;
63
+ --mat-sys-shadow: #000000;
64
+ --mat-sys-scrim: #000000;
65
+ --mat-sys-surface-tint: #005faf;
66
+ --mat-sys-inverse-surface: #2d3037;
67
+ --mat-sys-inverse-on-surface: #eff0f9;
68
+ --mat-sys-outline: #717783;
69
+ --mat-sys-outline-variant: #c1c6d4;
70
+ --mat-sys-neutral10: #181c21;
71
+ /* Variable used for the form field native select option text color */
85
72
 
86
73
  /* Error palette variables */
87
74
  --mat-sys-error: light-dark(#ba1a1a, #ffb4ab);
@@ -92,26 +79,28 @@
92
79
  /* Neutral variant palette variables */
93
80
  --mat-sys-surface-variant: light-dark(#dde2f0, #414752);
94
81
  --mat-sys-on-surface-variant: light-dark(#414752, #c1c6d4);
95
- --mat-sys-neutral-variant20: light-dark(
96
- #2b313b,
97
- #2b313b
98
- ); /* Variable used for the sidenav scrim (container background shadow when opened) */
82
+ --mat-sys-neutral-variant20: light-dark(#2b313b,
83
+ #2b313b);
84
+ /* Variable used for the sidenav scrim (container background shadow when opened) */
99
85
 
100
86
  /* TYPOGRAPHY SYSTEM VARIABLES */
101
87
 
102
88
  /* Typography variables. Only used in the different typescale system variables. */
103
- --mat-sys-brand-font-family: Roboto; /* The font-family to use for brand text. */
104
- --mat-sys-plain-font-family: Roboto; /* The font-family to use for plain text. */
105
- --mat-sys-bold-font-weight: 700; /* The font-weight to use for bold text. */
106
- --mat-sys-medium-font-weight: 500; /* The font-weight to use for medium text. */
107
- --mat-sys-regular-font-weight: 400; /* The font-weight to use for regular text. */
89
+ --mat-sys-brand-font-family: Roboto;
90
+ /* The font-family to use for brand text. */
91
+ --mat-sys-plain-font-family: Roboto;
92
+ /* The font-family to use for plain text. */
93
+ --mat-sys-bold-font-weight: 700;
94
+ /* The font-weight to use for bold text. */
95
+ --mat-sys-medium-font-weight: 500;
96
+ /* The font-weight to use for medium text. */
97
+ --mat-sys-regular-font-weight: 400;
98
+ /* The font-weight to use for regular text. */
108
99
 
109
100
  /* Typescale variables. */
110
101
  /* Warning: Risk of reduced fidelity from using the composite typography tokens (ex. --mat-sys-body-large) since
111
102
  tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */
112
- --mat-sys-body-large: var(--mat-sys-body-large-weight)
113
- var(--mat-sys-body-large-size) / var(--mat-sys-body-large-line-height)
114
- var(--mat-sys-body-large-font);
103
+ --mat-sys-body-large: var(--mat-sys-body-large-weight) var(--mat-sys-body-large-size) / var(--mat-sys-body-large-line-height) var(--mat-sys-body-large-font);
115
104
  --mat-sys-body-large-font: var(--mat-sys-plain-font-family);
116
105
  --mat-sys-body-large-line-height: 1.5rem;
117
106
  --mat-sys-body-large-size: 1rem;
@@ -119,9 +108,7 @@
119
108
  --mat-sys-body-large-weight: var(--mat-sys-regular-font-weight);
120
109
 
121
110
  /* Body medium typescale */
122
- --mat-sys-body-medium: var(--mat-sys-body-medium-weight)
123
- var(--mat-sys-body-medium-size) / var(--mat-sys-body-medium-line-height)
124
- var(--mat-sys-body-medium-font);
111
+ --mat-sys-body-medium: var(--mat-sys-body-medium-weight) var(--mat-sys-body-medium-size) / var(--mat-sys-body-medium-line-height) var(--mat-sys-body-medium-font);
125
112
  --mat-sys-body-medium-font: var(--mat-sys-plain-font-family);
126
113
  --mat-sys-body-medium-line-height: 1.25rem;
127
114
  --mat-sys-body-medium-size: 0.875rem;
@@ -129,9 +116,7 @@
129
116
  --mat-sys-body-medium-weight: var(--mat-sys-regular-font-weight);
130
117
 
131
118
  /* Body small typescale */
132
- --mat-sys-body-small: var(--mat-sys-body-small-weight)
133
- var(--mat-sys-body-small-size) / var(--mat-sys-body-small-line-height)
134
- var(--mat-sys-body-small-font);
119
+ --mat-sys-body-small: var(--mat-sys-body-small-weight) var(--mat-sys-body-small-size) / var(--mat-sys-body-small-line-height) var(--mat-sys-body-small-font);
135
120
  --mat-sys-body-small-font: var(--mat-sys-plain-font-family);
136
121
  --mat-sys-body-small-line-height: 1rem;
137
122
  --mat-sys-body-small-size: 0.75rem;
@@ -139,9 +124,7 @@
139
124
  --mat-sys-body-small-weight: var(--mat-sys-regular-font-weight);
140
125
 
141
126
  /* Display large typescale */
142
- --mat-sys-display-large: var(--mat-sys-display-large-weight)
143
- var(--mat-sys-display-large-size) / var(--mat-sys-display-large-line-height)
144
- var(--mat-sys-display-large-font);
127
+ --mat-sys-display-large: var(--mat-sys-display-large-weight) var(--mat-sys-display-large-size) / var(--mat-sys-display-large-line-height) var(--mat-sys-display-large-font);
145
128
  --mat-sys-display-large-font: var(--mat-sys-brand-font-family);
146
129
  --mat-sys-display-large-line-height: 4rem;
147
130
  --mat-sys-display-large-size: 3.562rem;
@@ -149,9 +132,7 @@
149
132
  --mat-sys-display-large-weight: var(--mat-sys-regular-font-weight);
150
133
 
151
134
  /* Display medium typescale */
152
- --mat-sys-display-medium: var(--mat-sys-display-medium-weight)
153
- var(--mat-sys-display-medium-size) /
154
- var(--mat-sys-display-medium-line-height) var(--mat-sys-display-medium-font);
135
+ --mat-sys-display-medium: var(--mat-sys-display-medium-weight) var(--mat-sys-display-medium-size) / var(--mat-sys-display-medium-line-height) var(--mat-sys-display-medium-font);
155
136
  --mat-sys-display-medium-font: var(--mat-sys-brand-font-family);
156
137
  --mat-sys-display-medium-line-height: 3.25rem;
157
138
  --mat-sys-display-medium-size: 2.812rem;
@@ -159,9 +140,7 @@
159
140
  --mat-sys-display-medium-weight: var(--mat-sys-regular-font-weight);
160
141
 
161
142
  /* Display small typescale */
162
- --mat-sys-display-small: var(--mat-sys-display-small-weight)
163
- var(--mat-sys-display-small-size) / var(--mat-sys-display-small-line-height)
164
- var(--mat-sys-display-small-font);
143
+ --mat-sys-display-small: var(--mat-sys-display-small-weight) var(--mat-sys-display-small-size) / var(--mat-sys-display-small-line-height) var(--mat-sys-display-small-font);
165
144
  --mat-sys-display-small-font: var(--mat-sys-brand-font-family);
166
145
  --mat-sys-display-small-line-height: 2.75rem;
167
146
  --mat-sys-display-small-size: 2.25rem;
@@ -169,9 +148,7 @@
169
148
  --mat-sys-display-small-weight: var(--mat-sys-regular-font-weight);
170
149
 
171
150
  /* Headline large typescale */
172
- --mat-sys-headline-large: var(--mat-sys-headline-large-weight)
173
- var(--mat-sys-headline-large-size) /
174
- var(--mat-sys-headline-large-line-height) var(--mat-sys-headline-large-font);
151
+ --mat-sys-headline-large: var(--mat-sys-headline-large-weight) var(--mat-sys-headline-large-size) / var(--mat-sys-headline-large-line-height) var(--mat-sys-headline-large-font);
175
152
  --mat-sys-headline-large-font: var(--mat-sys-brand-font-family);
176
153
  --mat-sys-headline-large-line-height: 2.5rem;
177
154
  --mat-sys-headline-large-size: 2rem;
@@ -179,10 +156,7 @@
179
156
  --mat-sys-headline-large-weight: var(--mat-sys-regular-font-weight);
180
157
 
181
158
  /* Headline medium typescale */
182
- --mat-sys-headline-medium: var(--mat-sys-headline-medium-weight)
183
- var(--mat-sys-headline-medium-size) /
184
- var(--mat-sys-headline-medium-line-height)
185
- var(--mat-sys-headline-medium-font);
159
+ --mat-sys-headline-medium: var(--mat-sys-headline-medium-weight) var(--mat-sys-headline-medium-size) / var(--mat-sys-headline-medium-line-height) var(--mat-sys-headline-medium-font);
186
160
  --mat-sys-headline-medium-font: var(--mat-sys-brand-font-family);
187
161
  --mat-sys-headline-medium-line-height: 2.25rem;
188
162
  --mat-sys-headline-medium-size: 1.75rem;
@@ -190,9 +164,7 @@
190
164
  --mat-sys-headline-medium-weight: var(--mat-sys-regular-font-weight);
191
165
 
192
166
  /* Headline small typescale */
193
- --mat-sys-headline-small: var(--mat-sys-headline-small-weight)
194
- var(--mat-sys-headline-small-size) /
195
- var(--mat-sys-headline-small-line-height) var(--mat-sys-headline-small-font);
167
+ --mat-sys-headline-small: var(--mat-sys-headline-small-weight) var(--mat-sys-headline-small-size) / var(--mat-sys-headline-small-line-height) var(--mat-sys-headline-small-font);
196
168
  --mat-sys-headline-small-font: var(--mat-sys-brand-font-family);
197
169
  --mat-sys-headline-small-line-height: 2rem;
198
170
  --mat-sys-headline-small-size: 1.5rem;
@@ -200,9 +172,7 @@
200
172
  --mat-sys-headline-small-weight: var(--mat-sys-regular-font-weight);
201
173
 
202
174
  /* Label large typescale */
203
- --mat-sys-label-large: var(--mat-sys-label-large-weight)
204
- var(--mat-sys-label-large-size) / var(--mat-sys-label-large-line-height)
205
- var(--mat-sys-label-large-font);
175
+ --mat-sys-label-large: var(--mat-sys-label-large-weight) var(--mat-sys-label-large-size) / var(--mat-sys-label-large-line-height) var(--mat-sys-label-large-font);
206
176
  --mat-sys-label-large-font: var(--mat-sys-plain-font-family);
207
177
  --mat-sys-label-large-line-height: 1.25rem;
208
178
  --mat-sys-label-large-size: 0.875rem;
@@ -211,9 +181,7 @@
211
181
  --mat-sys-label-large-weight-prominent: var(--mat-sys-bold-font-weight);
212
182
 
213
183
  /* Label medium typescale */
214
- --mat-sys-label-medium: var(--mat-sys-label-medium-weight)
215
- var(--mat-sys-label-medium-size) / var(--mat-sys-label-medium-line-height)
216
- var(--mat-sys-label-medium-font);
184
+ --mat-sys-label-medium: var(--mat-sys-label-medium-weight) var(--mat-sys-label-medium-size) / var(--mat-sys-label-medium-line-height) var(--mat-sys-label-medium-font);
217
185
  --mat-sys-label-medium-font: var(--mat-sys-plain-font-family);
218
186
  --mat-sys-label-medium-line-height: 1rem;
219
187
  --mat-sys-label-medium-size: 0.75rem;
@@ -222,9 +190,7 @@
222
190
  --mat-sys-label-medium-weight-prominent: var(--mat-sys-bold-font-weight);
223
191
 
224
192
  /* Label small typescale */
225
- --mat-sys-label-small: var(--mat-sys-label-small-weight)
226
- var(--mat-sys-label-small-size) / var(--mat-sys-label-small-line-height)
227
- var(--mat-sys-label-small-font);
193
+ --mat-sys-label-small: var(--mat-sys-label-small-weight) var(--mat-sys-label-small-size) / var(--mat-sys-label-small-line-height) var(--mat-sys-label-small-font);
228
194
  --mat-sys-label-small-font: var(--mat-sys-plain-font-family);
229
195
  --mat-sys-label-small-line-height: 1rem;
230
196
  --mat-sys-label-small-size: 0.688rem;
@@ -232,9 +198,7 @@
232
198
  --mat-sys-label-small-weight: var(--mat-sys-medium-font-weight);
233
199
 
234
200
  /* Title large typescale */
235
- --mat-sys-title-large: var(--mat-sys-title-large-weight)
236
- var(--mat-sys-title-large-size) / var(--mat-sys-title-large-line-height)
237
- var(--mat-sys-title-large-font);
201
+ --mat-sys-title-large: var(--mat-sys-title-large-weight) var(--mat-sys-title-large-size) / var(--mat-sys-title-large-line-height) var(--mat-sys-title-large-font);
238
202
  --mat-sys-title-large-font: var(--mat-sys-brand-font-family);
239
203
  --mat-sys-title-large-line-height: 1.75rem;
240
204
  --mat-sys-title-large-size: 1.375rem;
@@ -242,9 +206,7 @@
242
206
  --mat-sys-title-large-weight: var(--mat-sys-regular-font-weight);
243
207
 
244
208
  /* Title medium typescale */
245
- --mat-sys-title-medium: var(--mat-sys-title-medium-weight)
246
- var(--mat-sys-title-medium-size) / var(--mat-sys-title-medium-line-height)
247
- var(--mat-sys-title-medium-font);
209
+ --mat-sys-title-medium: var(--mat-sys-title-medium-weight) var(--mat-sys-title-medium-size) / var(--mat-sys-title-medium-line-height) var(--mat-sys-title-medium-font);
248
210
  --mat-sys-title-medium-font: var(--mat-sys-plain-font-family);
249
211
  --mat-sys-title-medium-line-height: 1.5rem;
250
212
  --mat-sys-title-medium-size: 1rem;
@@ -252,9 +214,7 @@
252
214
  --mat-sys-title-medium-weight: var(--mat-sys-medium-font-weight);
253
215
 
254
216
  /* Title small typescale */
255
- --mat-sys-title-small: var(--mat-sys-title-small-weight)
256
- var(--mat-sys-title-small-size) / var(--mat-sys-title-small-line-height)
257
- var(--mat-sys-title-small-font);
217
+ --mat-sys-title-small: var(--mat-sys-title-small-weight) var(--mat-sys-title-small-size) / var(--mat-sys-title-small-line-height) var(--mat-sys-title-small-font);
258
218
  --mat-sys-title-small-font: var(--mat-sys-plain-font-family);
259
219
  --mat-sys-title-small-line-height: 1.25rem;
260
220
  --mat-sys-title-small-size: 0.875rem;
@@ -264,21 +224,15 @@
264
224
  /* ELEVATION SYSTEM VARIABLES */
265
225
 
266
226
  /* Box shadow colors. Only used in the elevation level system variables. */
267
- --mat-sys-umbra-color: color-mix(
268
- in srgb,
269
- var(--mat-sys-shadow),
270
- transparent 80%
271
- );
272
- --mat-sys-penumbra-color: color-mix(
273
- in srgb,
274
- var(--mat-sys-shadow),
275
- transparent 86%
276
- );
277
- --mat-sys-ambient-color: color-mix(
278
- in srgb,
279
- var(--mat-sys-shadow),
280
- transparent 88%
281
- );
227
+ --mat-sys-umbra-color: color-mix(in srgb,
228
+ var(--mat-sys-shadow),
229
+ transparent 80%);
230
+ --mat-sys-penumbra-color: color-mix(in srgb,
231
+ var(--mat-sys-shadow),
232
+ transparent 86%);
233
+ --mat-sys-ambient-color: color-mix(in srgb,
234
+ var(--mat-sys-shadow),
235
+ transparent 88%);
282
236
 
283
237
  /* Elevation level system variables. These are used as the value for box-shadow CSS property. */
284
238
  --mat-sys-level0: 0px 0px 0px 0px var(--mat-sys-umbra-color),
@@ -319,4 +273,4 @@
319
273
  --mat-sys-focus-state-layer-opacity: 0.12;
320
274
  --mat-sys-hover-state-layer-opacity: 0.08;
321
275
  --mat-sys-pressed-state-layer-opacity: 0.12;
322
- }
276
+ }
package/themes/graytheme.css CHANGED
@@ -4,20 +4,9 @@
4
4
  color-scheme: light;
5
5
 
6
6
  /* Required field */
7
- --mat-sys-required: light-dark(
8
- var(--mat-sys-secondary-container),
9
- var(--mat-sys-inverse-primary)
10
- );
11
-
12
- --mat-nty-save-record-header-bar: light-dark(
13
- var(--mat-sys-secondary-container),
14
- var(--mat-sys-primary)
15
- );
16
-
17
- --mat-nty-save-record-identifier: light-dark(
18
- var(--mat-sys-on-primary-container),
19
- var(--mat-sys-on-primary)
20
- );
7
+ --mat-sys-required: var(--mat-sys-secondary-container);
8
+ --mat-nty-save-record-header-bar: var(--mat-sys-secondary-container);
9
+ --mat-nty-save-record-identifier: var(--mat-sys-on-primary-container);
21
10
 
22
11
  /* Alert */
23
12
  --mat-sys-netty-success: #00f0a0;
@@ -30,82 +19,83 @@
30
19
  --mat-sys-netty-on-warning-container: #ffb800;
31
20
 
32
21
  /* Primary palette variables */
33
- --mat-sys-primary: light-dark(#5e5e5e, #c8c6c6);
34
- --mat-sys-on-primary: light-dark(#ffffff, #303030);
35
- --mat-sys-primary-container: light-dark(#e4e2e2, #464747);
36
- --mat-sys-on-primary-container: light-dark(#1b1c1c, #e4e2e2);
37
- --mat-sys-inverse-primary: light-dark(#c8c6c6, #5e5e5e);
38
- --mat-sys-primary-fixed: light-dark(#e4e2e2, #e4e2e2);
39
- --mat-sys-primary-fixed-dim: light-dark(#c8c6c6, #c8c6c6);
40
- --mat-sys-on-primary-fixed: light-dark(#1b1c1c, #1b1c1c);
41
- --mat-sys-on-primary-fixed-variant: light-dark(#464747, #464747);
22
+ --mat-sys-primary: #5e5e5e;
23
+ --mat-sys-on-primary: #ffffff;
24
+ --mat-sys-primary-container: #e4e2e2;
25
+ --mat-sys-on-primary-container: #1b1c1c;
26
+ --mat-sys-inverse-primary: #c8c6c6;
27
+ --mat-sys-primary-fixed: #e4e2e2;
28
+ --mat-sys-primary-fixed-dim: #c8c6c6;
29
+ --mat-sys-on-primary-fixed: #1b1c1c;
30
+ --mat-sys-on-primary-fixed-variant: #464747;
42
31
 
43
32
  /* Secondary palette variables */
44
- --mat-sys-secondary: light-dark(#5f5e5e, #c8c6c5);
45
- --mat-sys-on-secondary: light-dark(#ffffff, #313030);
46
- --mat-sys-secondary-container: light-dark(#e5e2e1, #474746);
47
- --mat-sys-on-secondary-container: light-dark(#1c1b1b, #e5e2e1);
48
- --mat-sys-secondary-fixed: light-dark(#e5e2e1, #e5e2e1);
49
- --mat-sys-secondary-fixed-dim: light-dark(#c8c6c5, #c8c6c5);
50
- --mat-sys-on-secondary-fixed: light-dark(#1c1b1b, #1c1b1b);
51
- --mat-sys-on-secondary-fixed-variant: light-dark(#474746, #474746);
33
+ --mat-sys-secondary: #5f5e5e;
34
+ --mat-sys-on-secondary: #ffffff;
35
+ --mat-sys-secondary-container: #e5e2e1;
36
+ --mat-sys-on-secondary-container: #1c1b1b;
37
+ --mat-sys-secondary-fixed: #e5e2e1;
38
+ --mat-sys-secondary-fixed-dim: #c8c6c5;
39
+ --mat-sys-on-secondary-fixed: #1c1b1b;
40
+ --mat-sys-on-secondary-fixed-variant: #474746;
52
41
 
53
42
  /* Tertiary palette variables */
54
- --mat-sys-tertiary: light-dark(#615d5f, #cac5c7);
55
- --mat-sys-on-tertiary: light-dark(#ffffff, #323032);
56
- --mat-sys-tertiary-container: light-dark(#e7e1e3, #494648);
57
- --mat-sys-on-tertiary-container: light-dark(#1d1b1d, #e7e1e3);
58
- --mat-sys-tertiary-fixed: light-dark(#e7e1e3, #e7e1e3);
59
- --mat-sys-tertiary-fixed-dim: light-dark(#cac5c7, #cac5c7);
60
- --mat-sys-on-tertiary-fixed: light-dark(#1d1b1d, #1d1b1d);
61
- --mat-sys-on-tertiary-fixed-variant: light-dark(#494648, #494648);
43
+ --mat-sys-tertiary: #615d5f;
44
+ --mat-sys-on-tertiary: #ffffff;
45
+ --mat-sys-tertiary-container: #e7e1e3;
46
+ --mat-sys-on-tertiary-container: #1d1b1d;
47
+ --mat-sys-tertiary-fixed: #e7e1e3;
48
+ --mat-sys-tertiary-fixed-dim: #cac5c7;
49
+ --mat-sys-on-tertiary-fixed: #1d1b1d;
50
+ --mat-sys-on-tertiary-fixed-variant: #494648;
62
51
 
63
52
  /* Neutral palette variables */
64
- --mat-sys-background: light-dark(#fcf8f8, #141313);
65
- --mat-sys-on-background: light-dark(#1c1b1b, #e5e2e1);
66
- --mat-sys-surface: light-dark(#fcf8f8, #141313);
67
- --mat-sys-surface-dim: light-dark(#ddd9d8, #141313);
68
- --mat-sys-surface-bright: light-dark(#fcf8f8, #3a3939);
69
- --mat-sys-surface-container-low: light-dark(#f7f3f2, #1c1b1b);
70
- --mat-sys-surface-container-lowest: light-dark(#ffffff, #0e0e0e);
71
- --mat-sys-surface-container: light-dark(#f1edec, #201f1f);
72
- --mat-sys-surface-container-high: light-dark(#ebe7e7, #2a2a2a);
73
- --mat-sys-surface-container-highest: light-dark(#e5e2e1, #353434);
74
- --mat-sys-on-surface: light-dark(#1c1b1b, #e5e2e1);
75
- --mat-sys-shadow: light-dark(#000000, #000000);
76
- --mat-sys-scrim: light-dark(#000000, #000000);
77
- --mat-sys-surface-tint: light-dark(#5e5e5e, #c8c6c6);
78
- --mat-sys-inverse-surface: light-dark(#313030, #e5e2e1);
79
- --mat-sys-inverse-on-surface: light-dark(#f4f0ef, #313030);
80
- --mat-sys-outline: light-dark(#747878, #8e9192);
81
- --mat-sys-outline-variant: light-dark(#c4c7c7, #444748);
82
- --mat-sys-neutral10: light-dark(
83
- #1c1b1b,
84
- #1c1b1b
85
- ); /* Variable used for the form field native select option text color */
53
+ --mat-sys-background: #fcf8f8;
54
+ --mat-sys-on-background: #1c1b1b;
55
+ --mat-sys-surface: #fcf8f8;
56
+ --mat-sys-surface-dim: #ddd9d8;
57
+ --mat-sys-surface-bright: #fcf8f8;
58
+ --mat-sys-surface-container-low: #f7f3f2;
59
+ --mat-sys-surface-container-lowest: #ffffff;
60
+ --mat-sys-surface-container: #f1edec;
61
+ --mat-sys-surface-container-high: #ebe7e7;
62
+ --mat-sys-surface-container-highest: #e5e2e1;
63
+ --mat-sys-on-surface: #1c1b1b;
64
+ --mat-sys-shadow: #000000;
65
+ --mat-sys-scrim: #000000;
66
+ --mat-sys-surface-tint: #5e5e5e;
67
+ --mat-sys-inverse-surface: #313030;
68
+ --mat-sys-inverse-on-surface: #f4f0ef;
69
+ --mat-sys-outline: #747878;
70
+ --mat-sys-outline-variant: #c4c7c7;
71
+ --mat-sys-neutral10: #1c1b1b;
72
+ /* Variable used for the form field native select option text color */
86
73
 
87
74
  /* Error palette variables */
88
- --mat-sys-error: light-dark(#ba1a1a, #ffb4ab);
89
- --mat-sys-on-error: light-dark(#ffffff, #690005);
90
- --mat-sys-error-container: light-dark(#ffdad6, #93000a);
91
- --mat-sys-on-error-container: light-dark(#410002, #ffdad6);
75
+ --mat-sys-error: #ba1a1a;
76
+ --mat-sys-on-error: #ffffff;
77
+ --mat-sys-error-container: #ffdad6;
78
+ --mat-sys-on-error-container: #410002;
92
79
 
93
80
  /* Neutral variant palette variables */
94
- --mat-sys-surface-variant: light-dark(#e0e3e3, #444748);
95
- --mat-sys-on-surface-variant: light-dark(#444748, #c4c7c7);
96
- --mat-sys-neutral-variant20: light-dark(
97
- #2d3132,
98
- #2d3132
99
- ); /* Variable used for the sidenav scrim (container background shadow when opened) */
81
+ --mat-sys-surface-variant: #e0e3e3;
82
+ --mat-sys-on-surface-variant: #444748;
83
+ --mat-sys-neutral-variant20: #2d3132;
84
+ /* Variable used for the sidenav scrim (container background shadow when opened) */
100
85
 
101
86
  /* TYPOGRAPHY SYSTEM VARIABLES */
102
87
 
103
88
  /* Typography variables. Only used in the different typescale system variables. */
104
- --mat-sys-brand-font-family: Roboto; /* The font-family to use for brand text. */
105
- --mat-sys-plain-font-family: Roboto; /* The font-family to use for plain text. */
106
- --mat-sys-bold-font-weight: 700; /* The font-weight to use for bold text. */
107
- --mat-sys-medium-font-weight: 500; /* The font-weight to use for medium text. */
108
- --mat-sys-regular-font-weight: 400; /* The font-weight to use for regular text. */
89
+ --mat-sys-brand-font-family: Roboto;
90
+ /* The font-family to use for brand text. */
91
+ --mat-sys-plain-font-family: Roboto;
92
+ /* The font-family to use for plain text. */
93
+ --mat-sys-bold-font-weight: 700;
94
+ /* The font-weight to use for bold text. */
95
+ --mat-sys-medium-font-weight: 500;
96
+ /* The font-weight to use for medium text. */
97
+ --mat-sys-regular-font-weight: 400;
98
+ /* The font-weight to use for regular text. */
109
99
 
110
100
  /* Typescale variables. */
111
101
  /* Warning: Risk of reduced fidelity from using the composite typography tokens (ex. --mat-sys-body-large) since