@elderbyte/ngx-starter 19.1.0-beta.4 → 19.1.0-beta.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/package.json +1 -1
  2. package/src/lib/components/data-view/table/elder-table/elder-table.component.scss +4 -4
  3. package/theming/style-tweaks/_elder-style-fixes.scss +1 -1
  4. package/theming/system/_elder-design-tokens.scss +28 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elderbyte/ngx-starter",
3
- "version": "19.1.0-beta.4",
3
+ "version": "19.1.0-beta.5",
4
4
  "peerDependencies": {
5
5
  "@angular/core": "^18.0.0 || ^19.0.0",
6
6
  "@angular/common": "^18.0.0 || ^19.0.0",
package/src/lib/components/data-view/table/elder-table/elder-table.component.scss CHANGED
@@ -83,7 +83,7 @@
83
83
  }
84
84
 
85
85
  .elder-table-row:hover {
86
- background-color: var(--md-sys-color-surface-container);
86
+ background-color: var(--elder-color-highlight-dim);
87
87
  cursor: pointer;
88
88
  }
89
89
 
@@ -93,7 +93,7 @@
93
93
  outline-style: none;
94
94
  td {
95
95
  background-color: var(
96
- --md-sys-color-primary-container
96
+ --elder-color-highlight
97
97
  ); // OLD: background-color: mat.m2-get-color-from-palette($accent, default, 0.3);
98
98
  border-bottom: var(
99
99
  --md-sys-color-tertiary-fixed
@@ -102,11 +102,11 @@
102
102
  }
103
103
  .elder-table-row.elder-table-row-activated {
104
104
  //background-color: var(--md-sys-color-surface-dim);
105
- background-color: var(--md-sys-color-primary-container);
105
+ background-color: var(--elder-color-highlight);
106
106
  }
107
107
 
108
108
  .elder-table-row.elder-table-row-selected {
109
- background-color: var(--md-sys-color-primary-container);
109
+ background-color: var(--elder-color-highlight);
110
110
  }
111
111
 
112
112
  .elder-mat-table-flat {
package/theming/style-tweaks/_elder-style-fixes.scss CHANGED
@@ -376,6 +376,6 @@
376
376
 
377
377
  &.elder-light-theme,
378
378
  &.elder-dark-theme {
379
- --mdc-linear-progress-track-color: var(--md-sys-color-secondary-fixed-dim);
379
+ --mdc-linear-progress-track-color: var(--elder-color-highlight-dim);
380
380
  }
381
381
  }
package/theming/system/_elder-design-tokens.scss CHANGED
@@ -55,22 +55,47 @@
55
55
  --elder-toolbar-main-nav-button-color: var(--md-sys-color-on-primary);
56
56
  --elder-toolbar-main-nav-button-container-bg-color: var(--md-sys-color-primary);
57
57
 
58
+ // custom colors
59
+ --elder-blue: rgb(11, 40, 79);
60
+ --elder-gold: rgb(182, 159, 106);
61
+ --elder-gold-darkest: #423d32;
62
+ --elder-gold-semi-dark: #7f7054;
63
+
64
+ --elder-color-highlight: var(--md-sys-color-primary-container);
65
+ --elder-color-highlight-dim: rgb(232, 239, 255);
66
+
67
+ // missing md3 color
68
+ --md-sys-color-on-primary-fixed-dim: var(--md-sys-color-on-surface);
69
+
70
+ &.elder-dark-theme {
71
+ }
72
+
58
73
  // light theme overwrites
59
74
  &.elder-light-theme {
60
- --md-sys-color-primary: rgb(11, 40, 79);
61
- --md-sys-color-tertiary: rgb(182, 159, 106);
75
+ --md-sys-color-primary: var(--elder-blue);
76
+ --md-sys-color-tertiary: var(--elder-gold);
62
77
  }
63
78
 
64
79
  // dark theme overwrites
65
80
  &.elder-dark-theme {
66
- --md-sys-color-primary-container: #826e38; // lighten up dark mode container color
81
+ //--md-sys-color-primary-container: #d2cab4; // lighten up dark mode container color
82
+ --md-sys-color-primary-container: var(--elder-gold-semi-dark);
83
+ --md-sys-color-primary-fixed-dim: var(--elder-gold-darkest);
84
+ --elder-color-highlight-dim: var(--elder-gold-darkest);
85
+ --elder-color-highlight: var(--elder-gold-semi-dark);
86
+ --md-sys-color-tertiary-fixed-dim: var(--md-sys-color-primary-fixed-dim);
87
+ --md-sys-color-on-primary-fixed-dim: var(--md-sys-color-on-surface);
67
88
  --md-sys-color-tertiary-container: var(--md-sys-color-primary-container);
68
89
  --md-sys-color-surface-container-highest: #191919;
69
90
  --md-sys-color-surface-container-lowest: #262626;
70
91
  --md-sys-color-error: #FF999F;
92
+ --md-sys-color-inverse-primary: var(--md-sys-color-primary-container);
93
+ --md-sys-color-surface-tint: var(--elder-gold-darkest);
71
94
  --elder-dark-gray: var(--md-sys-color-surface-container);
72
95
  --mdc-chip-outline-color: rgba(255, 255, 255, 0.3);
73
96
 
97
+
98
+
74
99
  // dark mode specific colors
75
100
  --elder-dark-mode-color-primary: var(--md-sys-color-primary);
76
101
  --elder-dark-mode-color-on-primary: var(--md-sys-color-on-primary);