@elderbyte/ngx-starter 19.1.2 → 19.1.3

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 (5) hide show
  1. package/package.json +1 -1
  2. package/theming/abstracts/_elder-design-tokens.scss +12 -40
  3. package/theming/abstracts/_elder-theme-main.scss +2 -2
  4. package/theming/base/_elder-fixes-base.scss +1 -0
  5. package/theming/utilities/_elder-color-utils.scss +13 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elderbyte/ngx-starter",
3
- "version": "19.1.2",
3
+ "version": "19.1.3",
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
@@ -5,38 +5,12 @@
5
5
  @mixin elder-design-tokens() {
6
6
  @include elder-badge-sizing();
7
7
 
8
- @include color-theme-x();
9
-
10
- & {
11
- //--md-sys-color-surface-container-highest: hsl(216, 56%, 96%);
12
- }
13
-
8
+ @include m3-color-tokens();
9
+
14
10
  &.elder-light-theme,
15
11
  &.elder-dark-theme {
16
- // --md-sys-color-surface-container-highest: hsl(218, 56%, 95%); // light blue
17
- // --md-sys-color-surface-container-highest: hsl(220, 50%, 98%); // gmail bg blue
18
- // --md-sys-color-surface-container-highest: hsl(216, 56%, 98%); // google drive bg blue
19
- // --md-sys-color-surface-container-highest: hsl(216, 42%, 97%);
20
- //--md-sys-color-surface-container-highest: hsl(216, 56%, 96%);
21
- //--md-sys-color-surface-container-highest: hsl(216, 99%, 96%); // P favorit
22
- //--md-sys-color-surface-container-highest: hsl(216, 49%, 90%);
23
- --md-sys-color-surface-container-highest: hsl(41, 39%, 93%);
24
- --md-sys-color-surface-container-highest: hsl(0, 0%, 95%); // xy
25
- --md-sys-color-surface-container-highest: var(--md-sys-color-surface-container);
26
- // --md-sys-color-surface-container-high: hsl(218, 38%, 93%); // xy
27
- // --md-sys-color-surface-container: hsl(218, 38%, 91%); // xy
28
- // --md-sys-color-surface-container-low: hsl(218, 38%, 8%); // xy
29
- --md-sys-color-background: var(--md-sys-color-surface-container-highest);
30
- //--md-sys-color-background: var(--md-sys-color-surface-container-low);
12
+ --md-sys-color-background: var(--md-sys-color-surface-container);
31
13
  --mat-app-background-color: var(--md-sys-color-background);
32
- // --mat-app-background-color: hsl(218, 0%, 92%);
33
-
34
- //--mat-app-background-color: hsl(218, 21%, 34%);
35
- //--mat-app-background-color: var(--md-sys-color-primary);
36
-
37
- // .mat-mdc-tab-header * {
38
- // color: white !important;
39
- // }
40
14
 
41
15
  // mat variables
42
16
  --mat-sidenav-container-width: auto; // is set to around 300px by default in MAT 3 (MAT 2 was auto by default)
@@ -51,6 +25,7 @@
51
25
  --mat-sidenav-container-background-color: var(--mat-app-background-color);
52
26
  --mdc-dialog-container-color: var(--md-sys-color-surface-container-lowest);
53
27
  --mat-tab-header-divider-height: 0; // remove tab header divider
28
+ --mat-menu-container-color: var(--md-sys-color-surface-container-lowest);
54
29
 
55
30
  // import fix for overflow of mat-icons, default is 40px in m3, in m2 it was 48px
56
31
  --mdc-icon-button-state-layer-size: 48px;
@@ -68,7 +43,7 @@
68
43
  --elder-box-shadow-default: var(--mat-app-elevation-shadow-level-8);
69
44
  --elder-scrollbar-width: 8px;
70
45
  --elder-lightened-transparent-bg: rgba(255, 255, 255, 0.15);
71
- --elder-main-nav-bg: var(--md-sys-color-surface);
46
+ --elder-main-nav-bg: var(--md-sys-color-surface-container-lowest);
72
47
  --elder-nav-item-height: 54px;
73
48
  --elder-button-horizontal-padding: 19px;
74
49
 
@@ -118,13 +93,6 @@
118
93
 
119
94
  --elder-blue: var(--md-sys-color-primary);
120
95
  --md-sys-color-tertiary: var(--elder-gold);
121
- //--md-sys-color-tertiary-container: var(--elder-gold-semi-light);
122
- //--elder-gold: var(--md-sys-color-tertiary);
123
- // --elder-gold-dark: var(--md-sys-color-tertiary-container);
124
- // --elder-gold-semi-dark: var(--md-sys-color-tertiary-fixed-dim);
125
- // --elder-gold-semi-light: var(--md-sys-color-tertiary-fixed);
126
- // --elder-gold-light: var(--md-sys-color-tertiary-container);
127
- --elder-gray-medium: var(--md-sys-color-secondary-container);
128
96
 
129
97
  --elder-color-highlight-strong: hsl(214, 18%, 85%);
130
98
  --elder-color-highlight-strong: var(--elder-gold-light);
@@ -199,16 +167,20 @@
199
167
 
200
168
  // dark theme overwrites
201
169
  &.elder-dark-theme {
170
+ --md-sys-color-background: var(--md-sys-color-surface-container-highest);
202
171
  --elder-round-form-field-outline: solid 1px var(--md-sys-color-outline);
203
172
  --mat-sidenav-scrim-color: rgba(255, 255, 255, 0.4);
204
173
  --elder-color-highlight-light: var(--elder-gray-medium);
205
174
  --elder-color-highlight-strong: var(--elder-gold-semi-dark);
206
175
  --elder-color-highlight-variant: var(--elder-gold-dark);
207
176
  --md-sys-color-tertiary-container: var(--elder-gold-semi-dark);
208
- --md-sys-color-surface-container-highest: #191919;
209
- --md-sys-color-surface-container-lowest: #232324;
177
+ --md-sys-color-surface-container-highest: #181818;
210
178
  --md-sys-color-surface-container: #1e1f20;
211
179
  --md-sys-color-surface-container-low: #1b1c1e;
180
+ --md-sys-color-surface-container-lowest: #232324;
181
+
182
+ // --md-sys-color-surface-container: #1e1f20;
183
+ // --md-sys-color-surface-container-low: #1b1c1e;
212
184
  --md-sys-color-error: #ff897d;
213
185
  --md-sys-color-inverse-primary: var(--md-sys-color-primary-container);
214
186
  --md-sys-color-surface-tint: var(--elder-gold-dark);
@@ -253,7 +225,7 @@
253
225
  }
254
226
  }
255
227
 
256
- @mixin color-theme-x() {
228
+ @mixin m3-color-tokens() {
257
229
  &.elder-light-theme,
258
230
  &.elder-dark-theme {
259
231
  @include mat.theme-overrides(
package/theming/abstracts/_elder-theme-main.scss CHANGED
@@ -33,14 +33,14 @@
33
33
  .elder-light-theme,
34
34
  .elder-dark-theme {
35
35
  @include mat.all-component-themes($elder-light-theme);
36
- @include mat.system-level-colors($elder-light-theme);
36
+ //@include mat.system-level-colors($elder-light-theme);
37
37
  @include mat.system-level-typography($elder-light-theme);
38
38
  @include mat.color-variants-backwards-compatibility($elder-light-theme);
39
39
  }
40
40
 
41
41
  .elder-dark-theme {
42
42
  @include mat.all-component-colors($elder-dark-theme);
43
- @include mat.system-level-colors($elder-dark-theme);
43
+ //@include mat.system-level-colors($elder-dark-theme);
44
44
  @include mat.color-variants-backwards-compatibility($elder-dark-theme);
45
45
  }
46
46
 
package/theming/base/_elder-fixes-base.scss CHANGED
@@ -105,6 +105,7 @@
105
105
  .elder-card-title {
106
106
  padding-bottom: 0 !important;
107
107
  margin-bottom: 6px !important;
108
+ //font-weight: 500;
108
109
  }
109
110
 
110
111
  /**************************************************************************
package/theming/utilities/_elder-color-utils.scss CHANGED
@@ -74,6 +74,19 @@
74
74
  background-color: var(--elder-pane-bg-color);
75
75
  }
76
76
 
77
+ .bg-highlight-light {
78
+ background-color: var(--elder-color-highlight-light);
79
+ }
80
+
81
+ .bg-highlight-strong {
82
+ background-color: var(--elder-color-highlight-strong);
83
+ }
84
+
85
+ .bg-highlight-variant {
86
+ background-color: var(--elder-color-highlight-variant);
87
+ }
88
+
89
+
77
90
  // text colors
78
91
  @each $name, $value in $color-variables {
79
92
  .elder-text-#{$name} {