@elderbyte/ngx-starter 19.4.0 → 19.4.2

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 (6) hide show
  1. package/fesm2022/elderbyte-ngx-starter.mjs +3 -1
  2. package/fesm2022/elderbyte-ngx-starter.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/theming/abstracts/_elder-design-tokens.scss +3 -139
  5. package/theming/abstracts/_elder-m3-color-tokens.scss +130 -0
  6. package/theming/components/_elder-toolbar-theme.scss +21 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elderbyte/ngx-starter",
3
- "version": "19.4.0",
3
+ "version": "19.4.2",
4
4
  "peerDependencies": {
5
5
  "@angular/core": "^18.0.0 || ^19.0.0",
6
6
  "@angular/common": "^18.0.0 || ^19.0.0",
package/theming/abstracts/_elder-design-tokens.scss CHANGED
@@ -1,11 +1,12 @@
1
1
  @use 'sass:map';
2
2
  @use '@angular/material' as mat;
3
3
  @use './elder-scss-variables' as config;
4
+ @use './elder-m3-color-tokens' as elder-m3-color-tokens;
4
5
 
5
6
  @mixin elder-design-tokens() {
6
7
  @include elder-badge-sizing();
7
8
 
8
- @include m3-color-tokens();
9
+ @include elder-m3-color-tokens.m3-color-tokens();
9
10
 
10
11
  &.elder-light-theme,
11
12
  &.elder-dark-theme {
@@ -37,9 +38,6 @@
37
38
  --mat-tree-container-background-color: transparent;
38
39
 
39
40
  // typography overwrites
40
- // --md-sys-typescale-title-large-line-height: 1.75rem;
41
- // --md-sys-typescale-title-large-size: 1.375rem;
42
- // --md-sys-typescale-title-large: 400 1.375rem / 1.75rem Roboto, sans-serif;
43
41
  --md-sys-typescale-title-large-line-height: 1.625rem;
44
42
  --md-sys-typescale-title-large-size: 1.3125rem;
45
43
  --md-sys-typescale-title-large: 400 1.3125rem / 1.625rem Roboto, sans-serif;
@@ -142,7 +140,7 @@
142
140
  // data footer
143
141
  --elder-data-element-footer-height: 48px;
144
142
 
145
- // xy
143
+ // round form field
146
144
  --elder-round-form-field-outline: none;
147
145
 
148
146
  // fix button width / padding to not break existing layouts
@@ -156,14 +154,11 @@
156
154
 
157
155
  // light theme overwrites
158
156
  &.elder-light-theme {
159
- //--md-sys-color-primary: var(--elder-blue);
160
157
  --md-sys-color-tertiary: var(--elder-gold);
161
158
  --md-sys-color-tertiary-container: var(--elder-gold-light);
162
159
  --md-sys-color-on-tertiary: var(--md-sys-color-on-surface);
163
160
  --md-sys-color-secondary-container: hsl(214, 44%, 84%);
164
161
  --md-sys-color-secondary-fixed: hsl(214, 44%, 89%);
165
- //--md-sys-color-primary-container: #a6c7ed;
166
- //--md-sys-color-primary: #0b284f;
167
162
 
168
163
  .mat-toolbar.mat-primary {
169
164
  --mat-icon-button-hover-state-layer-opacity: 0.24;
@@ -225,8 +220,6 @@
225
220
  --md-sys-color-surface-container-low: #1b1c1e;
226
221
  --md-sys-color-surface-container-lowest: #232324;
227
222
 
228
- // --md-sys-color-surface-container: #1e1f20;
229
- // --md-sys-color-surface-container-low: #1b1c1e;
230
223
  --md-sys-color-error: #ff897d;
231
224
  --md-sys-color-inverse-primary: var(--md-sys-color-primary-container);
232
225
  --md-sys-color-surface-tint: var(--elder-gold-dark);
@@ -270,132 +263,3 @@
270
263
  --mat-badge-large-size-line-height: var(--mat-badge-legacy-large-size-container-size);
271
264
  }
272
265
  }
273
-
274
- @mixin m3-color-tokens() {
275
- &.elder-light-theme,
276
- &.elder-dark-theme {
277
- @include mat.theme-overrides(
278
- (
279
- primary: #475f89,
280
- on-primary: #ffffff,
281
- primary-container: #d7e3ff,
282
- on-primary-container: #001b3e,
283
- inverse-primary: #afc7f7,
284
- primary-fixed: #d7e3ff,
285
- primary-fixed-dim: #afc7f7,
286
- on-primary-fixed: #001b3e,
287
- on-primary-fixed-variant: #2f476f,
288
- secondary: #565e71,
289
- on-secondary: #ffffff,
290
- secondary-container: #dae2f9,
291
- on-secondary-container: #131b2c,
292
- secondary-fixed: #dae2f9,
293
- secondary-fixed-dim: #bec6dc,
294
- on-secondary-fixed: #131b2c,
295
- on-secondary-fixed-variant: #3f4759,
296
- tertiary: #6f5c2e,
297
- on-tertiary: #ffffff,
298
- tertiary-container: #fae0a5,
299
- on-tertiary-container: #251a00,
300
- tertiary-fixed: #fae0a5,
301
- tertiary-fixed-dim: #ddc48c,
302
- on-tertiary-fixed: #251a00,
303
- on-tertiary-fixed-variant: #564518,
304
- background: #fcf8f8,
305
- on-background: #1c1b1c,
306
- surface: #fcf8f8,
307
- surface-dim: #ddd9d9,
308
- surface-bright: #fcf8f8,
309
- surface-container-lowest: #ffffff,
310
- surface-container-low: #f7f3f2,
311
- surface-container: #f1eded,
312
- surface-container-high: #ebe7e7,
313
- surface-container-highest: #e5e2e1,
314
- on-surface: #1c1b1c,
315
- shadow: #000000,
316
- scrim: #000000,
317
- surface-tint: #5e5e62,
318
- inverse-surface: #313030,
319
- inverse-on-surface: #f4f0f0,
320
- outline: #76777b,
321
- outline-variant: #c6c6cb,
322
- neutral: #787676,
323
- neutral10: #1c1b1c,
324
- error: #ba1a1a,
325
- error-container: #ffdad6,
326
- on-error: #ffffff,
327
- on-error-container: #410002,
328
- surface-variant: #e2e2e7,
329
- on-surface-variant: #45474b,
330
- neutral-variant: #76777c,
331
- neutral-variant20: #2f3034,
332
- inverse-secondary: #bec6dc,
333
- inverse-tertiary: #ddc48c,
334
- ),
335
- 'md-sys-color'
336
- );
337
- }
338
-
339
- &.elder-dark-theme {
340
- @include mat.theme-overrides(
341
- (
342
- primary: #afc7f7,
343
- on-primary: #163057,
344
- primary-container: #2f476f,
345
- on-primary-container: #d7e3ff,
346
- inverse-primary: #475f89,
347
- primary-fixed: #d7e3ff,
348
- primary-fixed-dim: #afc7f7,
349
- on-primary-fixed: #001b3e,
350
- on-primary-fixed-variant: #2f476f,
351
- secondary: #bec6dc,
352
- on-secondary: #283042,
353
- secondary-container: #3f4759,
354
- on-secondary-container: #dae2f9,
355
- secondary-fixed: #dae2f9,
356
- secondary-fixed-dim: #bec6dc,
357
- on-secondary-fixed: #131b2c,
358
- on-secondary-fixed-variant: #3f4759,
359
- tertiary: #ddc48c,
360
- on-tertiary: #3d2e04,
361
- tertiary-container: #564518,
362
- on-tertiary-container: #fae0a5,
363
- tertiary-fixed: #fae0a5,
364
- tertiary-fixed-dim: #ddc48c,
365
- on-tertiary-fixed: #251a00,
366
- on-tertiary-fixed-variant: #564518,
367
- background: #141313,
368
- on-background: #e5e2e1,
369
- surface: #141313,
370
- surface-dim: #141313,
371
- surface-bright: #3a3939,
372
- surface-container-lowest: #0e0e0e,
373
- surface-container-low: #1c1b1c,
374
- surface-container: #201f20,
375
- surface-container-high: #2a2a2a,
376
- surface-container-highest: #353435,
377
- on-surface: #e5e2e1,
378
- shadow: #000000,
379
- scrim: #000000,
380
- surface-tint: #c7c6ca,
381
- inverse-surface: #e5e2e1,
382
- inverse-on-surface: #313030,
383
- outline: #909095,
384
- outline-variant: #45474b,
385
- neutral: #787676,
386
- neutral10: #1c1b1c,
387
- error: #ffb4ab,
388
- error-container: #93000a,
389
- on-error: #690005,
390
- on-error-container: #ffdad6,
391
- surface-variant: #45474b,
392
- on-surface-variant: #c6c6cb,
393
- neutral-variant: #76777c,
394
- neutral-variant20: #2f3034,
395
- inverse-secondary: #565e71,
396
- inverse-tertiary: #6f5c2e,
397
- ),
398
- 'md-sys-color'
399
- );
400
- }
401
- }
package/theming/abstracts/_elder-m3-color-tokens.scss ADDED
@@ -0,0 +1,130 @@
1
+ @use '@angular/material' as mat;
2
+
3
+ @mixin m3-color-tokens() {
4
+ &.elder-light-theme,
5
+ &.elder-dark-theme {
6
+ @include mat.theme-overrides(
7
+ (
8
+ primary: #475f89,
9
+ on-primary: #ffffff,
10
+ primary-container: #d7e3ff,
11
+ on-primary-container: #001b3e,
12
+ inverse-primary: #afc7f7,
13
+ primary-fixed: #d7e3ff,
14
+ primary-fixed-dim: #afc7f7,
15
+ on-primary-fixed: #001b3e,
16
+ on-primary-fixed-variant: #2f476f,
17
+ secondary: #565e71,
18
+ on-secondary: #ffffff,
19
+ secondary-container: #dae2f9,
20
+ on-secondary-container: #131b2c,
21
+ secondary-fixed: #dae2f9,
22
+ secondary-fixed-dim: #bec6dc,
23
+ on-secondary-fixed: #131b2c,
24
+ on-secondary-fixed-variant: #3f4759,
25
+ tertiary: #6f5c2e,
26
+ on-tertiary: #ffffff,
27
+ tertiary-container: #fae0a5,
28
+ on-tertiary-container: #251a00,
29
+ tertiary-fixed: #fae0a5,
30
+ tertiary-fixed-dim: #ddc48c,
31
+ on-tertiary-fixed: #251a00,
32
+ on-tertiary-fixed-variant: #564518,
33
+ background: #fcf8f8,
34
+ on-background: #1c1b1c,
35
+ surface: #fcf8f8,
36
+ surface-dim: #ddd9d9,
37
+ surface-bright: #fcf8f8,
38
+ surface-container-lowest: #ffffff,
39
+ surface-container-low: #f7f3f2,
40
+ surface-container: #f1eded,
41
+ surface-container-high: #ebe7e7,
42
+ surface-container-highest: #e5e2e1,
43
+ on-surface: #1c1b1c,
44
+ shadow: #000000,
45
+ scrim: #000000,
46
+ surface-tint: #5e5e62,
47
+ inverse-surface: #313030,
48
+ inverse-on-surface: #f4f0f0,
49
+ outline: #76777b,
50
+ outline-variant: #c6c6cb,
51
+ neutral: #787676,
52
+ neutral10: #1c1b1c,
53
+ error: #ba1a1a,
54
+ error-container: #ffdad6,
55
+ on-error: #ffffff,
56
+ on-error-container: #410002,
57
+ surface-variant: #e2e2e7,
58
+ on-surface-variant: #45474b,
59
+ neutral-variant: #76777c,
60
+ neutral-variant20: #2f3034,
61
+ inverse-secondary: #bec6dc,
62
+ inverse-tertiary: #ddc48c,
63
+ ),
64
+ 'md-sys-color'
65
+ );
66
+ }
67
+
68
+ &.elder-dark-theme {
69
+ @include mat.theme-overrides(
70
+ (
71
+ primary: #afc7f7,
72
+ on-primary: #163057,
73
+ primary-container: #2f476f,
74
+ on-primary-container: #d7e3ff,
75
+ inverse-primary: #475f89,
76
+ primary-fixed: #d7e3ff,
77
+ primary-fixed-dim: #afc7f7,
78
+ on-primary-fixed: #001b3e,
79
+ on-primary-fixed-variant: #2f476f,
80
+ secondary: #bec6dc,
81
+ on-secondary: #283042,
82
+ secondary-container: #3f4759,
83
+ on-secondary-container: #dae2f9,
84
+ secondary-fixed: #dae2f9,
85
+ secondary-fixed-dim: #bec6dc,
86
+ on-secondary-fixed: #131b2c,
87
+ on-secondary-fixed-variant: #3f4759,
88
+ tertiary: #ddc48c,
89
+ on-tertiary: #3d2e04,
90
+ tertiary-container: #564518,
91
+ on-tertiary-container: #fae0a5,
92
+ tertiary-fixed: #fae0a5,
93
+ tertiary-fixed-dim: #ddc48c,
94
+ on-tertiary-fixed: #251a00,
95
+ on-tertiary-fixed-variant: #564518,
96
+ background: #141313,
97
+ on-background: #e5e2e1,
98
+ surface: #141313,
99
+ surface-dim: #141313,
100
+ surface-bright: #3a3939,
101
+ surface-container-lowest: #0e0e0e,
102
+ surface-container-low: #1c1b1c,
103
+ surface-container: #201f20,
104
+ surface-container-high: #2a2a2a,
105
+ surface-container-highest: #353435,
106
+ on-surface: #e5e2e1,
107
+ shadow: #000000,
108
+ scrim: #000000,
109
+ surface-tint: #c7c6ca,
110
+ inverse-surface: #e5e2e1,
111
+ inverse-on-surface: #313030,
112
+ outline: #909095,
113
+ outline-variant: #45474b,
114
+ neutral: #787676,
115
+ neutral10: #1c1b1c,
116
+ error: #ffb4ab,
117
+ error-container: #93000a,
118
+ on-error: #690005,
119
+ on-error-container: #ffdad6,
120
+ surface-variant: #45474b,
121
+ on-surface-variant: #c6c6cb,
122
+ neutral-variant: #76777c,
123
+ neutral-variant20: #2f3034,
124
+ inverse-secondary: #565e71,
125
+ inverse-tertiary: #6f5c2e,
126
+ ),
127
+ 'md-sys-color'
128
+ );
129
+ }
130
+ }
package/theming/components/_elder-toolbar-theme.scss CHANGED
@@ -76,4 +76,25 @@
76
76
  }
77
77
  }
78
78
  }
79
+
80
+ &.elder-light-theme,
81
+ &.elder-dark-theme {
82
+ --mat-text-button-state-layer-color: var(--md-sys-color-on-surface);
83
+ .mat-toolbar.mat-primary .mat-mdc-unelevated-button:not(:disabled) {
84
+ --mat-filled-button-state-layer-color: var(--md-sys-color-primary);
85
+ --mdc-filled-button-label-text-color: var(--md-sys-color-primary);
86
+ --mdc-filled-button-container-color: var(--md-sys-color-on-primary);
87
+ }
88
+ }
89
+
90
+ &.elder-dark-theme {
91
+ .mat-toolbar.mat-primary .mat-mdc-unelevated-button:not(:disabled) {
92
+ --mdc-filled-button-container-color: var(--md-sys-color-primary);
93
+ --mat-filled-button-state-layer-color: var(--md-sys-color-on-primary);
94
+ --mdc-filled-button-label-text-color: var(--md-sys-color-on-primary);
95
+ .mdc-button__label {
96
+ color: var(--md-sys-color-on-primary) !important;
97
+ }
98
+ }
99
+ }
79
100
  }