@ngstarter-ui/components 1.0.45 → 1.0.47

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/README.md +212 -0
  2. package/ai/component-registry.json +11 -19
  3. package/fesm2022/ngstarter-ui-components-core.mjs +567 -5
  4. package/fesm2022/ngstarter-ui-components-core.mjs.map +1 -1
  5. package/fesm2022/ngstarter-ui-components-paginator.mjs +2 -2
  6. package/fesm2022/ngstarter-ui-components-paginator.mjs.map +1 -1
  7. package/package.json +1 -1
  8. package/styles/_tokens.scss +223 -303
  9. package/styles/themes/modern.scss +174 -181
  10. package/types/ngstarter-ui-components-core.d.ts +9 -3
  11. package/styles/themes/enterprise.scss +0 -82
package/styles/themes/modern.scss CHANGED
@@ -17,26 +17,27 @@
17
17
  --ngs-shadow-md: 0 16px 42px rgba(39, 52, 105, 0.14);
18
18
  --ngs-shadow-lg: 0 28px 70px rgba(39, 52, 105, 0.20);
19
19
 
20
- --ngs-color-primary: #4f46e5;
20
+ --ngs-color-primary-seed: #4f46e5;
21
+ --ngs-color-primary: var(--ngs-color-primary-seed);
21
22
  --ngs-color-on-primary: #ffffff;
22
- --ngs-color-primary-container: #e6e9ff;
23
- --ngs-color-on-primary-container: #27226e;
24
- --ngs-color-secondary: #0f766e;
23
+ --ngs-color-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 86%);
24
+ --ngs-color-on-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #000000 62%);
25
+ --ngs-color-secondary: color-mix(in srgb, var(--ngs-color-primary-seed), #0f766e 58%);
25
26
  --ngs-color-on-secondary: #ffffff;
26
- --ngs-color-secondary-container: #ccfbf1;
27
- --ngs-color-on-secondary-container: #134e4a;
28
- --ngs-color-tertiary: #db2777;
27
+ --ngs-color-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #ffffff 84%);
28
+ --ngs-color-on-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #000000 68%);
29
+ --ngs-color-tertiary: color-mix(in srgb, var(--ngs-color-primary-seed), #db2777 50%);
29
30
  --ngs-color-on-tertiary: #ffffff;
30
- --ngs-color-tertiary-container: #fce7f3;
31
- --ngs-color-on-tertiary-container: #831843;
31
+ --ngs-color-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #ffffff 86%);
32
+ --ngs-color-on-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #000000 62%);
32
33
  --ngs-color-danger: #e11d48;
33
34
  --ngs-color-on-danger: #ffffff;
34
35
  --ngs-color-danger-container: #ffe4e6;
35
36
  --ngs-color-on-danger-container: #9f1239;
36
- --ngs-color-info: #2563eb;
37
+ --ngs-color-info: color-mix(in srgb, var(--ngs-color-primary-seed), #2563eb 40%);
37
38
  --ngs-color-on-info: #ffffff;
38
- --ngs-color-info-container: #dbeafe;
39
- --ngs-color-on-info-container: #1e3a8a;
39
+ --ngs-color-info-container: color-mix(in srgb, var(--ngs-color-info), #ffffff 86%);
40
+ --ngs-color-on-info-container: color-mix(in srgb, var(--ngs-color-info), #000000 62%);
40
41
  --ngs-color-success: #059669;
41
42
  --ngs-color-on-success: #ffffff;
42
43
  --ngs-color-success-container: #d1fae5;
@@ -45,42 +46,42 @@
45
46
  --ngs-color-on-warning: #ffffff;
46
47
  --ngs-color-warning-container: #fef3c7;
47
48
  --ngs-color-on-warning-container: #92400e;
48
- --ngs-color-background: #f7f8ff;
49
+ --ngs-color-background: color-mix(in srgb, var(--ngs-color-primary-seed), #f7f8ff 98%);
49
50
  --ngs-color-on-background: #172033;
50
- --ngs-color-surface: #f9fbff;
51
+ --ngs-color-surface: color-mix(in srgb, var(--ngs-color-primary-seed), #f9fbff 98%);
51
52
  --ngs-color-surface-bright: #ffffff;
52
53
  --ngs-color-on-surface: #172033;
53
- --ngs-color-on-surface-variant: #667085;
54
- --ngs-color-neutral-50: #fafbff;
55
- --ngs-color-neutral-100: #f3f5fb;
56
- --ngs-color-neutral-200: #e8ecf6;
57
- --ngs-color-neutral-300: #d7deee;
58
- --ngs-color-neutral-400: #a9b4cc;
59
- --ngs-color-neutral-500: #74809a;
60
- --ngs-color-neutral-600: #566176;
61
- --ngs-color-neutral-650: #495466;
62
- --ngs-color-neutral-700: #384254;
63
- --ngs-color-neutral-800: #20283a;
64
- --ngs-color-neutral-900: #111827;
65
- --ngs-color-neutral-950: #070b15;
54
+ --ngs-color-on-surface-variant: color-mix(in srgb, var(--ngs-color-primary-seed), #667085 88%);
55
+ --ngs-color-neutral-50: color-mix(in srgb, var(--ngs-color-primary-seed), #fafbff 98%);
56
+ --ngs-color-neutral-100: color-mix(in srgb, var(--ngs-color-primary-seed), #f3f5fb 96%);
57
+ --ngs-color-neutral-200: color-mix(in srgb, var(--ngs-color-primary-seed), #e8ecf6 94%);
58
+ --ngs-color-neutral-300: color-mix(in srgb, var(--ngs-color-primary-seed), #d7deee 92%);
59
+ --ngs-color-neutral-400: color-mix(in srgb, var(--ngs-color-primary-seed), #a9b4cc 90%);
60
+ --ngs-color-neutral-500: color-mix(in srgb, var(--ngs-color-primary-seed), #74809a 88%);
61
+ --ngs-color-neutral-600: color-mix(in srgb, var(--ngs-color-primary-seed), #566176 86%);
62
+ --ngs-color-neutral-650: color-mix(in srgb, var(--ngs-color-primary-seed), #495466 84%);
63
+ --ngs-color-neutral-700: color-mix(in srgb, var(--ngs-color-primary-seed), #384254 82%);
64
+ --ngs-color-neutral-800: color-mix(in srgb, var(--ngs-color-primary-seed), #20283a 80%);
65
+ --ngs-color-neutral-900: color-mix(in srgb, var(--ngs-color-primary-seed), #111827 78%);
66
+ --ngs-color-neutral-950: color-mix(in srgb, var(--ngs-color-primary-seed), #070b15 76%);
66
67
  --ngs-color-surface-container-lowest: #ffffff;
67
- --ngs-color-surface-container-low: #fbfcff;
68
- --ngs-color-surface-container: #f3f5ff;
69
- --ngs-color-surface-container-high: #e9edff;
70
- --ngs-color-surface-container-highest: #dde5ff;
71
- --ngs-color-outline: #8c96b3;
72
- --ngs-color-outline-variant: #d7deee;
73
- --ngs-color-border: #e1e7f4;
74
- --ngs-color-faint: #f1f5ff;
75
- --ngs-color-subtle: #e7ecfb;
76
- --ngs-color-muted: #d7deee;
77
- --ngs-color-emphasis: #9aa6c0;
78
- --ngs-color-strong: #566176;
68
+ --ngs-color-surface-container-low: var(--ngs-color-neutral-50);
69
+ --ngs-color-surface-container: var(--ngs-color-neutral-100);
70
+ --ngs-color-surface-container-high: var(--ngs-color-neutral-200);
71
+ --ngs-color-surface-container-highest: var(--ngs-color-neutral-300);
72
+ --ngs-color-outline: color-mix(in srgb, var(--ngs-color-primary-seed), #8c96b3 82%);
73
+ --ngs-color-outline-variant: color-mix(in srgb, var(--ngs-color-primary-seed), #d7deee 90%);
74
+ --ngs-color-border: color-mix(in srgb, var(--ngs-color-primary-seed), #e1e7f4 92%);
75
+ --ngs-color-faint: var(--ngs-color-surface-container);
76
+ --ngs-color-subtle: var(--ngs-color-surface-container-high);
77
+ --ngs-color-muted: var(--ngs-color-surface-container-highest);
78
+ --ngs-color-emphasis: var(--ngs-color-neutral-400);
79
+ --ngs-color-strong: var(--ngs-color-neutral-600);
79
80
 
80
- --ngs-state-hover-bg: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(15, 118, 110, 0.08));
81
- --ngs-state-active-bg: linear-gradient(135deg, rgba(79, 70, 229, 0.13), rgba(15, 118, 110, 0.12));
82
- --ngs-state-selected-bg: linear-gradient(135deg, #e6e9ff, #ccfbf1);
83
- --ngs-state-selected-color: #3730a3;
81
+ --ngs-state-hover-bg: linear-gradient(135deg, color-mix(in srgb, var(--ngs-color-primary), transparent 92%), color-mix(in srgb, var(--ngs-color-secondary), transparent 92%));
82
+ --ngs-state-active-bg: linear-gradient(135deg, color-mix(in srgb, var(--ngs-color-primary), transparent 87%), color-mix(in srgb, var(--ngs-color-secondary), transparent 88%));
83
+ --ngs-state-selected-bg: linear-gradient(135deg, var(--ngs-color-primary-container), var(--ngs-color-secondary-container));
84
+ --ngs-state-selected-color: var(--ngs-color-primary);
84
85
  --ngs-state-focus-ring: var(--ngs-field-border-focus-color);
85
86
  --ngs-state-disabled-bg: #edf1f8;
86
87
  --ngs-state-disabled-color: #9aa6c0;
@@ -89,29 +90,26 @@
89
90
  --ngs-control-height-sm: calc(2.25rem + var(--ngs-density-scale) * 1px);
90
91
  --ngs-control-height-md: calc(3rem + var(--ngs-density-scale) * 1px);
91
92
  --ngs-control-height-lg: calc(3.5rem + var(--ngs-density-scale) * 1px);
92
- --ngs-control-padding-x: --spacing(5);
93
93
  --ngs-control-gap: --spacing(2.5);
94
94
  --ngs-control-radius: var(--ngs-radius-xl);
95
95
  --ngs-icon-size: --spacing(6);
96
96
  --ngs-button-font-size: 0.9375rem;
97
- --ngs-button-font-weight: 700;
98
- --ngs-button-tonal-bg: linear-gradient(135deg, #e6e9ff, #ccfbf1);
99
- --ngs-button-tonal-color: #27226e;
100
- --ngs-button-outlined-border: #c7d2fe;
97
+ --ngs-button-tonal-bg: linear-gradient(135deg, var(--ngs-color-primary-container), var(--ngs-color-secondary-container));
98
+ --ngs-button-tonal-color: var(--ngs-color-on-primary-container);
99
+ --ngs-button-outlined-border: var(--ngs-color-outline-variant);
101
100
  --ngs-field-bg: rgba(255, 255, 255, 0.92);
102
101
  --ngs-field-disabled-bg: #edf1f8;
103
- --ngs-field-border-color: #ccd5ea;
104
- --ngs-field-border-focus-color: #4f46e5;
102
+ --ngs-field-border-color: var(--ngs-color-outline-variant);
103
+ --ngs-field-border-focus-color: var(--ngs-color-primary);
105
104
  --ngs-field-radius: var(--ngs-radius-lg);
106
105
  --ngs-field-font-size: 0.9375rem;
107
106
  --ngs-field-container-height: 3.125rem;
108
107
  --ngs-field-infix-height: 3.125rem;
109
- --ngs-field-padding-x: --spacing(4);
110
- --ngs-field-filled-bg: #f3f5ff;
108
+ --ngs-field-filled-bg: var(--ngs-color-surface-container);
111
109
  --ngs-dropdown-bg: rgba(255, 255, 255, 0.98);
112
110
  --ngs-dropdown-shadow: 0 20px 52px rgba(39, 52, 105, 0.18);
113
111
  --ngs-dropdown-radius: var(--ngs-radius-xl);
114
- --ngs-dropdown-border: 1px solid rgba(215, 222, 238, 0.9);
112
+ --ngs-dropdown-border: 1px solid var(--ngs-color-border);
115
113
  --ngs-dropdown-height: 2.625rem;
116
114
  --ngs-dialog-radius: 1.75rem;
117
115
  --ngs-dialog-shadow: 0 34px 86px rgba(39, 52, 105, 0.24);
@@ -119,64 +117,58 @@
119
117
  --ngs-overlay-backdrop-blur: 8px;
120
118
 
121
119
  --ngs-table-bg: #ffffff;
122
- --ngs-table-header-bg: linear-gradient(135deg, #f3f5ff, #eefcf9);
120
+ --ngs-table-header-bg: linear-gradient(135deg, var(--ngs-color-surface-container), var(--ngs-color-secondary-container));
123
121
  --ngs-table-row-bg: #ffffff;
124
- --ngs-table-border-color: #e1e7f4;
122
+ --ngs-table-border-color: var(--ngs-color-border);
125
123
  --ngs-table-row-height: calc(3.5rem + var(--ngs-density-scale) * 1px);
126
124
  --ngs-table-header-row-height: calc(3.25rem + var(--ngs-density-scale) * 1px);
127
- --ngs-table-cell-padding: --spacing(2) --spacing(5);
128
125
  --ngs-table-cell-font-size: 0.9375rem;
129
126
  --ngs-table-header-cell-font-size: 0.75rem;
130
- --ngs-table-header-cell-font-weight: 800;
131
127
 
132
128
  --ngs-nav-item-height: var(--ngs-dropdown-height);
133
129
  --ngs-nav-items-gap: --spacing(1.5);
134
- --ngs-nav-item-padding: 0 --spacing(4);
135
130
  --ngs-nav-item-radius: var(--ngs-radius-full);
136
131
  --ngs-nav-item-font-size: 0.9375rem;
137
- --ngs-nav-item-font-weight: 700;
138
132
  --ngs-nav-item-color: #566176;
139
133
  --ngs-nav-item-hover-color: #172033;
140
- --ngs-nav-item-active-color: #3730a3;
141
- --ngs-nav-item-hover-bg: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(15, 118, 110, 0.08));
142
- --ngs-nav-item-active-bg: linear-gradient(135deg, #e6e9ff, #ccfbf1);
134
+ --ngs-nav-item-active-color: var(--ngs-color-primary);
135
+ --ngs-nav-item-hover-bg: var(--ngs-state-hover-bg);
136
+ --ngs-nav-item-active-bg: var(--ngs-state-selected-bg);
143
137
  --ngs-nav-item-icon-color: #74809a;
144
- --ngs-nav-item-hover-icon-color: #4f46e5;
145
- --ngs-nav-item-active-icon-color: #4f46e5;
138
+ --ngs-nav-item-hover-icon-color: var(--ngs-color-primary);
139
+ --ngs-nav-item-active-icon-color: var(--ngs-color-primary);
146
140
  --ngs-nav-item-icon-font-size: 1.375rem;
147
141
  --ngs-nav-heading-font-size: 0.75rem;
148
- --ngs-nav-heading-font-weight: 800;
149
142
  --ngs-nav-heading-margin-top: --spacing(7);
150
143
  --ngs-nav-heading-margin-bottom: --spacing(2);
151
144
  --ngs-nav-divider-margin: --spacing(6) 0;
152
- --ngs-nav-nested-item-margin: 0 0 0 52px;
153
- --ngs-sidebar-width: var(--ngs-sidenav-width, 18.5rem);
154
145
  }
155
146
 
156
147
  @media (prefers-color-scheme: dark) {
157
148
  :root:not([data-ngs-color-scheme='light']) {
158
149
  color-scheme: dark;
159
150
 
160
- --ngs-color-primary: #a5b4fc;
151
+ --ngs-color-primary-seed: #4f46e5;
152
+ --ngs-color-primary: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 42%);
161
153
  --ngs-color-on-primary: #111827;
162
- --ngs-color-primary-container: #3730a3;
163
- --ngs-color-on-primary-container: #e0e7ff;
164
- --ngs-color-secondary: #5eead4;
154
+ --ngs-color-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #000000 42%);
155
+ --ngs-color-on-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 86%);
156
+ --ngs-color-secondary: color-mix(in srgb, var(--ngs-color-primary-seed), #5eead4 58%);
165
157
  --ngs-color-on-secondary: #042f2e;
166
- --ngs-color-secondary-container: #115e59;
167
- --ngs-color-on-secondary-container: #ccfbf1;
168
- --ngs-color-tertiary: #f9a8d4;
158
+ --ngs-color-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #000000 62%);
159
+ --ngs-color-on-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #ffffff 82%);
160
+ --ngs-color-tertiary: color-mix(in srgb, var(--ngs-color-primary-seed), #f9a8d4 50%);
169
161
  --ngs-color-on-tertiary: #500724;
170
- --ngs-color-tertiary-container: #9d174d;
171
- --ngs-color-on-tertiary-container: #fce7f3;
162
+ --ngs-color-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #000000 58%);
163
+ --ngs-color-on-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #ffffff 84%);
172
164
  --ngs-color-danger: #fb7185;
173
165
  --ngs-color-on-danger: #4c0519;
174
166
  --ngs-color-danger-container: #9f1239;
175
167
  --ngs-color-on-danger-container: #ffe4e6;
176
- --ngs-color-info: #93c5fd;
168
+ --ngs-color-info: color-mix(in srgb, var(--ngs-color-primary-seed), #93c5fd 46%);
177
169
  --ngs-color-on-info: #0f1e46;
178
- --ngs-color-info-container: #1d4ed8;
179
- --ngs-color-on-info-container: #dbeafe;
170
+ --ngs-color-info-container: color-mix(in srgb, var(--ngs-color-info), #000000 58%);
171
+ --ngs-color-on-info-container: color-mix(in srgb, var(--ngs-color-info), #ffffff 84%);
180
172
  --ngs-color-success: #6ee7b7;
181
173
  --ngs-color-on-success: #042f2e;
182
174
  --ngs-color-success-container: #047857;
@@ -185,70 +177,70 @@
185
177
  --ngs-color-on-warning: #451a03;
186
178
  --ngs-color-warning-container: #92400e;
187
179
  --ngs-color-on-warning-container: #fef3c7;
188
- --ngs-color-background: #090d1a;
180
+ --ngs-color-background: color-mix(in srgb, var(--ngs-color-primary-seed), #090d1a 96%);
189
181
  --ngs-color-on-background: #eef2ff;
190
- --ngs-color-surface: #11162a;
191
- --ngs-color-surface-bright: #1b2138;
182
+ --ngs-color-surface: color-mix(in srgb, var(--ngs-color-primary-seed), #11162a 94%);
183
+ --ngs-color-surface-bright: color-mix(in srgb, var(--ngs-color-primary-seed), #1b2138 90%);
192
184
  --ngs-color-on-surface: #eef2ff;
193
- --ngs-color-on-surface-variant: #b6c0d6;
194
- --ngs-color-neutral-50: #090d1a;
195
- --ngs-color-neutral-100: #11162a;
196
- --ngs-color-neutral-200: #1b2138;
197
- --ngs-color-neutral-300: #28304a;
198
- --ngs-color-neutral-400: #3c4664;
199
- --ngs-color-neutral-500: #697491;
200
- --ngs-color-neutral-600: #8d98b5;
201
- --ngs-color-neutral-650: #a3aec7;
202
- --ngs-color-neutral-700: #b6c0d6;
203
- --ngs-color-neutral-800: #d5dcf0;
204
- --ngs-color-neutral-900: #eef2ff;
185
+ --ngs-color-on-surface-variant: color-mix(in srgb, var(--ngs-color-primary-seed), #b6c0d6 86%);
186
+ --ngs-color-neutral-50: color-mix(in srgb, var(--ngs-color-primary-seed), #090d1a 96%);
187
+ --ngs-color-neutral-100: color-mix(in srgb, var(--ngs-color-primary-seed), #11162a 94%);
188
+ --ngs-color-neutral-200: color-mix(in srgb, var(--ngs-color-primary-seed), #1b2138 92%);
189
+ --ngs-color-neutral-300: color-mix(in srgb, var(--ngs-color-primary-seed), #28304a 90%);
190
+ --ngs-color-neutral-400: color-mix(in srgb, var(--ngs-color-primary-seed), #3c4664 88%);
191
+ --ngs-color-neutral-500: color-mix(in srgb, var(--ngs-color-primary-seed), #697491 86%);
192
+ --ngs-color-neutral-600: color-mix(in srgb, var(--ngs-color-primary-seed), #8d98b5 84%);
193
+ --ngs-color-neutral-650: color-mix(in srgb, var(--ngs-color-primary-seed), #a3aec7 82%);
194
+ --ngs-color-neutral-700: color-mix(in srgb, var(--ngs-color-primary-seed), #b6c0d6 80%);
195
+ --ngs-color-neutral-800: color-mix(in srgb, var(--ngs-color-primary-seed), #d5dcf0 78%);
196
+ --ngs-color-neutral-900: color-mix(in srgb, var(--ngs-color-primary-seed), #eef2ff 76%);
205
197
  --ngs-color-neutral-950: #ffffff;
206
- --ngs-color-surface-container-lowest: #090d1a;
207
- --ngs-color-surface-container-low: #11162a;
208
- --ngs-color-surface-container: #1b2138;
209
- --ngs-color-surface-container-high: #28304a;
210
- --ngs-color-surface-container-highest: #3c4664;
211
- --ngs-color-outline: #8d98b5;
212
- --ngs-color-outline-variant: #3c4664;
213
- --ngs-color-border: #28304a;
214
- --ngs-color-faint: #11162a;
215
- --ngs-color-subtle: #1b2138;
216
- --ngs-color-muted: #28304a;
217
- --ngs-color-emphasis: #8d98b5;
218
- --ngs-color-strong: #d5dcf0;
219
- --ngs-state-hover-bg: linear-gradient(135deg, rgba(165, 180, 252, 0.12), rgba(94, 234, 212, 0.10));
220
- --ngs-state-active-bg: linear-gradient(135deg, rgba(165, 180, 252, 0.18), rgba(94, 234, 212, 0.16));
221
- --ngs-state-selected-bg: linear-gradient(135deg, #3730a3, #115e59);
198
+ --ngs-color-surface-container-lowest: var(--ngs-color-neutral-50);
199
+ --ngs-color-surface-container-low: var(--ngs-color-neutral-100);
200
+ --ngs-color-surface-container: var(--ngs-color-neutral-200);
201
+ --ngs-color-surface-container-high: var(--ngs-color-neutral-300);
202
+ --ngs-color-surface-container-highest: var(--ngs-color-neutral-400);
203
+ --ngs-color-outline: color-mix(in srgb, var(--ngs-color-primary-seed), #8d98b5 82%);
204
+ --ngs-color-outline-variant: color-mix(in srgb, var(--ngs-color-primary-seed), #3c4664 90%);
205
+ --ngs-color-border: color-mix(in srgb, var(--ngs-color-primary-seed), #28304a 92%);
206
+ --ngs-color-faint: var(--ngs-color-surface-container-low);
207
+ --ngs-color-subtle: var(--ngs-color-surface-container);
208
+ --ngs-color-muted: var(--ngs-color-surface-container-high);
209
+ --ngs-color-emphasis: var(--ngs-color-neutral-600);
210
+ --ngs-color-strong: var(--ngs-color-neutral-800);
211
+ --ngs-state-hover-bg: linear-gradient(135deg, color-mix(in srgb, var(--ngs-color-primary), transparent 88%), color-mix(in srgb, var(--ngs-color-secondary), transparent 90%));
212
+ --ngs-state-active-bg: linear-gradient(135deg, color-mix(in srgb, var(--ngs-color-primary), transparent 82%), color-mix(in srgb, var(--ngs-color-secondary), transparent 84%));
213
+ --ngs-state-selected-bg: linear-gradient(135deg, var(--ngs-color-primary-container), var(--ngs-color-secondary-container));
222
214
  --ngs-state-selected-color: #eef2ff;
223
215
  --ngs-state-focus-ring: var(--ngs-field-border-focus-color);
224
216
  --ngs-state-disabled-bg: #1b2138;
225
217
  --ngs-state-disabled-color: #697491;
226
218
  --ngs-state-disabled-border: #28304a;
227
- --ngs-button-tonal-bg: linear-gradient(135deg, #3730a3, #115e59);
219
+ --ngs-button-tonal-bg: var(--ngs-state-selected-bg);
228
220
  --ngs-button-tonal-color: #eef2ff;
229
- --ngs-button-outlined-border: #4f5d82;
221
+ --ngs-button-outlined-border: var(--ngs-color-outline-variant);
230
222
  --ngs-field-bg: rgba(17, 22, 42, 0.92);
231
223
  --ngs-field-disabled-bg: #1b2138;
232
- --ngs-field-border-color: #4f5d82;
233
- --ngs-field-border-focus-color: #a5b4fc;
234
- --ngs-field-filled-bg: #1b2138;
224
+ --ngs-field-border-color: var(--ngs-color-outline-variant);
225
+ --ngs-field-border-focus-color: var(--ngs-color-primary);
226
+ --ngs-field-filled-bg: var(--ngs-color-surface-container);
235
227
  --ngs-dropdown-bg: rgba(17, 22, 42, 0.98);
236
228
  --ngs-dropdown-shadow: 0 24px 64px rgba(0, 0, 0, 0.42);
237
- --ngs-dropdown-border: 1px solid #28304a;
229
+ --ngs-dropdown-border: 1px solid var(--ngs-color-border);
238
230
  --ngs-dialog-shadow: 0 34px 86px rgba(0, 0, 0, 0.52);
239
231
  --ngs-overlay-backdrop-bg: rgba(2, 6, 23, 0.62);
240
- --ngs-table-bg: #11162a;
241
- --ngs-table-header-bg: linear-gradient(135deg, #1b2138, #102f35);
242
- --ngs-table-row-bg: #11162a;
243
- --ngs-table-border-color: #28304a;
232
+ --ngs-table-bg: var(--ngs-color-surface);
233
+ --ngs-table-header-bg: linear-gradient(135deg, var(--ngs-color-surface-container), var(--ngs-color-secondary-container));
234
+ --ngs-table-row-bg: var(--ngs-color-surface);
235
+ --ngs-table-border-color: var(--ngs-color-border);
244
236
  --ngs-nav-item-color: #b6c0d6;
245
237
  --ngs-nav-item-hover-color: #eef2ff;
246
238
  --ngs-nav-item-active-color: #eef2ff;
247
- --ngs-nav-item-hover-bg: linear-gradient(135deg, rgba(165, 180, 252, 0.12), rgba(94, 234, 212, 0.10));
248
- --ngs-nav-item-active-bg: linear-gradient(135deg, #3730a3, #115e59);
239
+ --ngs-nav-item-hover-bg: var(--ngs-state-hover-bg);
240
+ --ngs-nav-item-active-bg: var(--ngs-state-selected-bg);
249
241
  --ngs-nav-item-icon-color: #8d98b5;
250
- --ngs-nav-item-hover-icon-color: #a5b4fc;
251
- --ngs-nav-item-active-icon-color: #ccfbf1;
242
+ --ngs-nav-item-hover-icon-color: var(--ngs-color-primary);
243
+ --ngs-nav-item-active-icon-color: var(--ngs-color-secondary);
252
244
  }
253
245
  }
254
246
 
@@ -258,26 +250,27 @@
258
250
  [data-ngs-theme='modern'][data-ngs-color-scheme='dark'] {
259
251
  color-scheme: dark;
260
252
 
261
- --ngs-color-primary: #a5b4fc;
253
+ --ngs-color-primary-seed: #4f46e5;
254
+ --ngs-color-primary: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 42%);
262
255
  --ngs-color-on-primary: #111827;
263
- --ngs-color-primary-container: #3730a3;
264
- --ngs-color-on-primary-container: #e0e7ff;
265
- --ngs-color-secondary: #5eead4;
256
+ --ngs-color-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #000000 42%);
257
+ --ngs-color-on-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 86%);
258
+ --ngs-color-secondary: color-mix(in srgb, var(--ngs-color-primary-seed), #5eead4 58%);
266
259
  --ngs-color-on-secondary: #042f2e;
267
- --ngs-color-secondary-container: #115e59;
268
- --ngs-color-on-secondary-container: #ccfbf1;
269
- --ngs-color-tertiary: #f9a8d4;
260
+ --ngs-color-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #000000 62%);
261
+ --ngs-color-on-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #ffffff 82%);
262
+ --ngs-color-tertiary: color-mix(in srgb, var(--ngs-color-primary-seed), #f9a8d4 50%);
270
263
  --ngs-color-on-tertiary: #500724;
271
- --ngs-color-tertiary-container: #9d174d;
272
- --ngs-color-on-tertiary-container: #fce7f3;
264
+ --ngs-color-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #000000 58%);
265
+ --ngs-color-on-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #ffffff 84%);
273
266
  --ngs-color-danger: #fb7185;
274
267
  --ngs-color-on-danger: #4c0519;
275
268
  --ngs-color-danger-container: #9f1239;
276
269
  --ngs-color-on-danger-container: #ffe4e6;
277
- --ngs-color-info: #93c5fd;
270
+ --ngs-color-info: color-mix(in srgb, var(--ngs-color-primary-seed), #93c5fd 46%);
278
271
  --ngs-color-on-info: #0f1e46;
279
- --ngs-color-info-container: #1d4ed8;
280
- --ngs-color-on-info-container: #dbeafe;
272
+ --ngs-color-info-container: color-mix(in srgb, var(--ngs-color-info), #000000 58%);
273
+ --ngs-color-on-info-container: color-mix(in srgb, var(--ngs-color-info), #ffffff 84%);
281
274
  --ngs-color-success: #6ee7b7;
282
275
  --ngs-color-on-success: #042f2e;
283
276
  --ngs-color-success-container: #047857;
@@ -286,68 +279,68 @@
286
279
  --ngs-color-on-warning: #451a03;
287
280
  --ngs-color-warning-container: #92400e;
288
281
  --ngs-color-on-warning-container: #fef3c7;
289
- --ngs-color-background: #090d1a;
282
+ --ngs-color-background: color-mix(in srgb, var(--ngs-color-primary-seed), #090d1a 96%);
290
283
  --ngs-color-on-background: #eef2ff;
291
- --ngs-color-surface: #11162a;
292
- --ngs-color-surface-bright: #1b2138;
284
+ --ngs-color-surface: color-mix(in srgb, var(--ngs-color-primary-seed), #11162a 94%);
285
+ --ngs-color-surface-bright: color-mix(in srgb, var(--ngs-color-primary-seed), #1b2138 90%);
293
286
  --ngs-color-on-surface: #eef2ff;
294
- --ngs-color-on-surface-variant: #b6c0d6;
295
- --ngs-color-neutral-50: #090d1a;
296
- --ngs-color-neutral-100: #11162a;
297
- --ngs-color-neutral-200: #1b2138;
298
- --ngs-color-neutral-300: #28304a;
299
- --ngs-color-neutral-400: #3c4664;
300
- --ngs-color-neutral-500: #697491;
301
- --ngs-color-neutral-600: #8d98b5;
302
- --ngs-color-neutral-650: #a3aec7;
303
- --ngs-color-neutral-700: #b6c0d6;
304
- --ngs-color-neutral-800: #d5dcf0;
305
- --ngs-color-neutral-900: #eef2ff;
287
+ --ngs-color-on-surface-variant: color-mix(in srgb, var(--ngs-color-primary-seed), #b6c0d6 86%);
288
+ --ngs-color-neutral-50: color-mix(in srgb, var(--ngs-color-primary-seed), #090d1a 96%);
289
+ --ngs-color-neutral-100: color-mix(in srgb, var(--ngs-color-primary-seed), #11162a 94%);
290
+ --ngs-color-neutral-200: color-mix(in srgb, var(--ngs-color-primary-seed), #1b2138 92%);
291
+ --ngs-color-neutral-300: color-mix(in srgb, var(--ngs-color-primary-seed), #28304a 90%);
292
+ --ngs-color-neutral-400: color-mix(in srgb, var(--ngs-color-primary-seed), #3c4664 88%);
293
+ --ngs-color-neutral-500: color-mix(in srgb, var(--ngs-color-primary-seed), #697491 86%);
294
+ --ngs-color-neutral-600: color-mix(in srgb, var(--ngs-color-primary-seed), #8d98b5 84%);
295
+ --ngs-color-neutral-650: color-mix(in srgb, var(--ngs-color-primary-seed), #a3aec7 82%);
296
+ --ngs-color-neutral-700: color-mix(in srgb, var(--ngs-color-primary-seed), #b6c0d6 80%);
297
+ --ngs-color-neutral-800: color-mix(in srgb, var(--ngs-color-primary-seed), #d5dcf0 78%);
298
+ --ngs-color-neutral-900: color-mix(in srgb, var(--ngs-color-primary-seed), #eef2ff 76%);
306
299
  --ngs-color-neutral-950: #ffffff;
307
- --ngs-color-surface-container-lowest: #090d1a;
308
- --ngs-color-surface-container-low: #11162a;
309
- --ngs-color-surface-container: #1b2138;
310
- --ngs-color-surface-container-high: #28304a;
311
- --ngs-color-surface-container-highest: #3c4664;
312
- --ngs-color-outline: #8d98b5;
313
- --ngs-color-outline-variant: #3c4664;
314
- --ngs-color-border: #28304a;
315
- --ngs-color-faint: #11162a;
316
- --ngs-color-subtle: #1b2138;
317
- --ngs-color-muted: #28304a;
318
- --ngs-color-emphasis: #8d98b5;
319
- --ngs-color-strong: #d5dcf0;
320
- --ngs-state-hover-bg: linear-gradient(135deg, rgba(165, 180, 252, 0.12), rgba(94, 234, 212, 0.10));
321
- --ngs-state-active-bg: linear-gradient(135deg, rgba(165, 180, 252, 0.18), rgba(94, 234, 212, 0.16));
322
- --ngs-state-selected-bg: linear-gradient(135deg, #3730a3, #115e59);
300
+ --ngs-color-surface-container-lowest: var(--ngs-color-neutral-50);
301
+ --ngs-color-surface-container-low: var(--ngs-color-neutral-100);
302
+ --ngs-color-surface-container: var(--ngs-color-neutral-200);
303
+ --ngs-color-surface-container-high: var(--ngs-color-neutral-300);
304
+ --ngs-color-surface-container-highest: var(--ngs-color-neutral-400);
305
+ --ngs-color-outline: color-mix(in srgb, var(--ngs-color-primary-seed), #8d98b5 82%);
306
+ --ngs-color-outline-variant: color-mix(in srgb, var(--ngs-color-primary-seed), #3c4664 90%);
307
+ --ngs-color-border: color-mix(in srgb, var(--ngs-color-primary-seed), #28304a 92%);
308
+ --ngs-color-faint: var(--ngs-color-surface-container-low);
309
+ --ngs-color-subtle: var(--ngs-color-surface-container);
310
+ --ngs-color-muted: var(--ngs-color-surface-container-high);
311
+ --ngs-color-emphasis: var(--ngs-color-neutral-600);
312
+ --ngs-color-strong: var(--ngs-color-neutral-800);
313
+ --ngs-state-hover-bg: linear-gradient(135deg, color-mix(in srgb, var(--ngs-color-primary), transparent 88%), color-mix(in srgb, var(--ngs-color-secondary), transparent 90%));
314
+ --ngs-state-active-bg: linear-gradient(135deg, color-mix(in srgb, var(--ngs-color-primary), transparent 82%), color-mix(in srgb, var(--ngs-color-secondary), transparent 84%));
315
+ --ngs-state-selected-bg: linear-gradient(135deg, var(--ngs-color-primary-container), var(--ngs-color-secondary-container));
323
316
  --ngs-state-selected-color: #eef2ff;
324
317
  --ngs-state-focus-ring: var(--ngs-field-border-focus-color);
325
318
  --ngs-state-disabled-bg: #1b2138;
326
319
  --ngs-state-disabled-color: #697491;
327
320
  --ngs-state-disabled-border: #28304a;
328
- --ngs-button-tonal-bg: linear-gradient(135deg, #3730a3, #115e59);
321
+ --ngs-button-tonal-bg: var(--ngs-state-selected-bg);
329
322
  --ngs-button-tonal-color: #eef2ff;
330
- --ngs-button-outlined-border: #4f5d82;
323
+ --ngs-button-outlined-border: var(--ngs-color-outline-variant);
331
324
  --ngs-field-bg: rgba(17, 22, 42, 0.92);
332
325
  --ngs-field-disabled-bg: #1b2138;
333
- --ngs-field-border-color: #4f5d82;
334
- --ngs-field-border-focus-color: #a5b4fc;
335
- --ngs-field-filled-bg: #1b2138;
326
+ --ngs-field-border-color: var(--ngs-color-outline-variant);
327
+ --ngs-field-border-focus-color: var(--ngs-color-primary);
328
+ --ngs-field-filled-bg: var(--ngs-color-surface-container);
336
329
  --ngs-dropdown-bg: rgba(17, 22, 42, 0.98);
337
330
  --ngs-dropdown-shadow: 0 24px 64px rgba(0, 0, 0, 0.42);
338
- --ngs-dropdown-border: 1px solid #28304a;
331
+ --ngs-dropdown-border: 1px solid var(--ngs-color-border);
339
332
  --ngs-dialog-shadow: 0 34px 86px rgba(0, 0, 0, 0.52);
340
333
  --ngs-overlay-backdrop-bg: rgba(2, 6, 23, 0.62);
341
- --ngs-table-bg: #11162a;
342
- --ngs-table-header-bg: linear-gradient(135deg, #1b2138, #102f35);
343
- --ngs-table-row-bg: #11162a;
344
- --ngs-table-border-color: #28304a;
334
+ --ngs-table-bg: var(--ngs-color-surface);
335
+ --ngs-table-header-bg: linear-gradient(135deg, var(--ngs-color-surface-container), var(--ngs-color-secondary-container));
336
+ --ngs-table-row-bg: var(--ngs-color-surface);
337
+ --ngs-table-border-color: var(--ngs-color-border);
345
338
  --ngs-nav-item-color: #b6c0d6;
346
339
  --ngs-nav-item-hover-color: #eef2ff;
347
340
  --ngs-nav-item-active-color: #eef2ff;
348
- --ngs-nav-item-hover-bg: linear-gradient(135deg, rgba(165, 180, 252, 0.12), rgba(94, 234, 212, 0.10));
349
- --ngs-nav-item-active-bg: linear-gradient(135deg, #3730a3, #115e59);
341
+ --ngs-nav-item-hover-bg: var(--ngs-state-hover-bg);
342
+ --ngs-nav-item-active-bg: var(--ngs-state-selected-bg);
350
343
  --ngs-nav-item-icon-color: #8d98b5;
351
- --ngs-nav-item-hover-icon-color: #a5b4fc;
352
- --ngs-nav-item-active-icon-color: #ccfbf1;
344
+ --ngs-nav-item-hover-icon-color: var(--ngs-color-primary);
345
+ --ngs-nav-item-active-icon-color: var(--ngs-color-secondary);
353
346
  }
package/types/ngstarter-ui-components-core.d.ts CHANGED
@@ -325,7 +325,7 @@ declare class SeoService {
325
325
  static ɵprov: i0.ɵɵInjectableDeclaration<SeoService>;
326
326
  }
327
327
 
328
- type NgsThemeName = 'default' | 'enterprise' | 'modern' | string;
328
+ type NgsThemeName = 'default' | 'modern' | string;
329
329
  type NgsColorScheme = 'light' | 'dark' | 'auto';
330
330
  type NgsRadius = 'none' | 'small' | 'medium' | 'large';
331
331
  interface NgsThemeOptions {
@@ -403,6 +403,12 @@ interface Autofocusable {
403
403
  }
404
404
  declare const AUTOFOCUSABLE: InjectionToken<Autofocusable>;
405
405
 
406
+ type NgsGeneratedThemeColorScheme = 'light' | 'dark';
407
+ type NgsThemeCssProperties = Record<`--ngs-${string}`, string>;
408
+ declare const NGS_GENERATED_THEME_PROPERTY_NAMES: readonly ["--ngs-color-primary-seed", "--ngs-color-primary", "--ngs-color-on-primary", "--ngs-color-primary-container", "--ngs-color-on-primary-container", "--ngs-color-secondary", "--ngs-color-on-secondary", "--ngs-color-secondary-container", "--ngs-color-on-secondary-container", "--ngs-color-tertiary", "--ngs-color-on-tertiary", "--ngs-color-tertiary-container", "--ngs-color-on-tertiary-container", "--ngs-color-info", "--ngs-color-on-info", "--ngs-color-info-container", "--ngs-color-on-info-container", "--ngs-color-danger", "--ngs-color-on-danger", "--ngs-color-danger-container", "--ngs-color-on-danger-container", "--ngs-color-danger-container-lowest", "--ngs-color-danger-container-low", "--ngs-color-danger-container-high", "--ngs-color-danger-container-highest", "--ngs-color-success", "--ngs-color-on-success", "--ngs-color-success-container", "--ngs-color-on-success-container", "--ngs-color-warning", "--ngs-color-on-warning", "--ngs-color-warning-container", "--ngs-color-on-warning-container", "--ngs-color-orange-container", "--ngs-color-on-orange-container", "--ngs-color-green-500", "--ngs-color-background", "--ngs-color-on-background", "--ngs-color-surface", "--ngs-color-surface-bright", "--ngs-color-on-surface", "--ngs-color-on-surface-variant", "--ngs-color-neutral-50", "--ngs-color-neutral-100", "--ngs-color-neutral-200", "--ngs-color-neutral-300", "--ngs-color-neutral-400", "--ngs-color-neutral-500", "--ngs-color-neutral-600", "--ngs-color-neutral-650", "--ngs-color-neutral-700", "--ngs-color-neutral-800", "--ngs-color-neutral-900", "--ngs-color-neutral-950", "--ngs-color-surface-container-lowest", "--ngs-color-surface-container-low", "--ngs-color-surface-container", "--ngs-color-surface-container-high", "--ngs-color-surface-container-highest", "--ngs-color-outline", "--ngs-color-outline-variant", "--ngs-color-border", "--ngs-color-faint", "--ngs-color-subtle", "--ngs-color-muted", "--ngs-color-emphasis", "--ngs-color-strong", "--ngs-state-hover-bg", "--ngs-state-active-bg", "--ngs-state-selected-bg", "--ngs-state-selected-color", "--ngs-state-focus-ring", "--ngs-state-disabled-bg", "--ngs-state-disabled-color", "--ngs-state-disabled-border", "--ngs-color-primary-100", "--ngs-color-primary-200", "--ngs-color-primary-300", "--ngs-color-primary-400", "--ngs-color-primary-500", "--ngs-color-primary-600", "--ngs-color-secondary-100", "--ngs-color-secondary-200", "--ngs-color-secondary-300", "--ngs-color-secondary-400", "--ngs-color-secondary-fixed", "--ngs-color-on-secondary-fixed", "--ngs-color-tertiary-100", "--ngs-color-tertiary-200", "--ngs-color-tertiary-300", "--ngs-color-tertiary-700", "--ngs-color-tertiary-800", "--ngs-button-tonal-bg", "--ngs-button-tonal-color", "--ngs-button-outlined-border", "--ngs-field-border-color", "--ngs-field-border-focus-color", "--ngs-field-filled-bg", "--ngs-dropdown-item-selected-bg", "--ngs-dropdown-item-selected-color", "--ngs-nav-item-active-color", "--ngs-nav-item-active-bg", "--ngs-nav-item-active-icon-color"];
409
+ declare function generateNgsThemeProperties(primaryColor: string, colorScheme?: NgsGeneratedThemeColorScheme): NgsThemeCssProperties;
410
+ declare function generateNgsThemeCssText(primaryColor: string, colorScheme?: NgsGeneratedThemeColorScheme): string;
411
+
406
412
  /** Provider for managing the error state of a form control. */
407
413
  declare class ErrorStateMatcher {
408
414
  /**
@@ -450,5 +456,5 @@ declare function zonefreeScheduler(): SchedulerLike;
450
456
 
451
457
  declare function typedFromEvent<E extends Event>(target: EventTarget, event: string, options?: EventListenerOptions | boolean): Observable<E>;
452
458
 
453
- export { AUTOFOCUSABLE, AnalyticsService, AutoFocusDirective, DebounceTimeDirective, ENVIRONMENT, EnvironmentService, ErrorStateMatcher, FilterByPropertyPipe, FocusElementDirective, FormatFileSizePipe, GlobalStore, InactivityTrackerService, InitialsPipe, MutationObserverService, NGS_THEME_OPTIONS, OrderByPipe, PageTitleStrategyService, RIPPLE_GLOBAL_OPTIONS, ResizeObserverService, Ripple, RippleRef, RippleRenderer, RippleState, SafeHtmlPipe, SafeResourceUrlPipe, ScreenLoaderService, SearchByPropertyPipe, SeoService, ShowOnDirtyErrorStateMatcher, SoundEffectDirective, TextareaAutoSize, ThemeManagerService, arrayShallowEquals, defaultRippleAnimationConfig, getActualTarget, injectElement, isElement, provideNgsTheme, px, typedFromEvent, zonefreeScheduler };
454
- export type { Autofocusable, GlobalState, NgsColorScheme, NgsRadius, NgsThemeName, NgsThemeOptions, RippleAnimationConfig, RippleConfig, RippleGlobalOptions };
459
+ export { AUTOFOCUSABLE, AnalyticsService, AutoFocusDirective, DebounceTimeDirective, ENVIRONMENT, EnvironmentService, ErrorStateMatcher, FilterByPropertyPipe, FocusElementDirective, FormatFileSizePipe, GlobalStore, InactivityTrackerService, InitialsPipe, MutationObserverService, NGS_GENERATED_THEME_PROPERTY_NAMES, NGS_THEME_OPTIONS, OrderByPipe, PageTitleStrategyService, RIPPLE_GLOBAL_OPTIONS, ResizeObserverService, Ripple, RippleRef, RippleRenderer, RippleState, SafeHtmlPipe, SafeResourceUrlPipe, ScreenLoaderService, SearchByPropertyPipe, SeoService, ShowOnDirtyErrorStateMatcher, SoundEffectDirective, TextareaAutoSize, ThemeManagerService, arrayShallowEquals, defaultRippleAnimationConfig, generateNgsThemeCssText, generateNgsThemeProperties, getActualTarget, injectElement, isElement, provideNgsTheme, px, typedFromEvent, zonefreeScheduler };
460
+ export type { Autofocusable, GlobalState, NgsColorScheme, NgsGeneratedThemeColorScheme, NgsRadius, NgsThemeCssProperties, NgsThemeName, NgsThemeOptions, RippleAnimationConfig, RippleConfig, RippleGlobalOptions };
package/styles/themes/enterprise.scss DELETED
@@ -1,82 +0,0 @@
1
- @use "../_common";
2
- @use "../_global";
3
-
4
- :root {
5
- color-scheme: light;
6
- }
7
-
8
- :root,
9
- [data-ngs-theme='enterprise']:not([data-ngs-color-scheme='dark']):not(.dark) {
10
- color-scheme: light;
11
-
12
- --ngs-font-family-base: Inter, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
13
- --ngs-color-primary: #036fe3;
14
- --ngs-color-on-primary: #ffffff;
15
- --ngs-color-primary-container: #d6eaff;
16
- --ngs-color-on-primary-container: #001a36;
17
- --ngs-color-secondary: #21805a;
18
- --ngs-color-on-secondary: #ffffff;
19
- --ngs-color-secondary-container: #e8f6ef;
20
- --ngs-color-on-secondary-container: #0d3f2b;
21
- --ngs-color-background: #f0eff4;
22
- --ngs-color-on-background: #1d1e2a;
23
- --ngs-color-surface: #ffffff;
24
- --ngs-color-on-surface: #20212d;
25
- --ngs-color-on-surface-variant: #747684;
26
- --ngs-color-surface-container-lowest: #ffffff;
27
- --ngs-color-surface-container-low: #fafafd;
28
- --ngs-color-surface-container: #f5f4f8;
29
- --ngs-color-surface-container-high: #eeeef5;
30
- --ngs-color-surface-container-highest: #e7e6ef;
31
- --ngs-color-border: rgba(35, 36, 49, 0.1);
32
- --ngs-color-outline: rgba(35, 36, 49, 0.18);
33
- --ngs-color-outline-variant: rgba(35, 36, 49, 0.1);
34
- --ngs-color-danger: #c93c3c;
35
-
36
- --ngs-button-height: 2.625rem;
37
- --ngs-button-padding-x: 0.875rem;
38
- --ngs-button-font-size: 0.875rem;
39
- --ngs-button-font-weight: 650;
40
- --ngs-button-radius: 0.5rem;
41
- --ngs-button-outlined-border: var(--corporate-border);
42
- --ngs-button-outlined-color: var(--corporate-text);
43
- --ngs-button-tonal-bg: #f4f2fb;
44
- --ngs-button-tonal-color: var(--corporate-text);
45
-
46
- --ngs-nav-badge-size: 1.35rem;
47
- --ngs-nav-badge-padding: 0 0.4rem;
48
- --ngs-nav-items-gap: 0.28rem;
49
- --ngs-nav-item-height: 2.35rem;
50
- --ngs-nav-item-padding: 0 0.625rem;
51
- --ngs-nav-item-gap: 0.625rem;
52
- --ngs-nav-item-radius: 0.5rem;
53
- --ngs-nav-item-font-size: 0.94rem;
54
- --ngs-nav-item-font-weight: 400;
55
- --ngs-nav-item-color: #59677e;
56
- --ngs-nav-item-hover-color: #20212d;
57
- --ngs-nav-item-active-color: #036fe3;
58
- --ngs-nav-item-hover-bg: #ffffff;
59
- --ngs-nav-item-active-bg: #ffffff;
60
- --ngs-nav-item-icon-width: 1.25rem;
61
- --ngs-nav-item-icon-color: #6d7d97;
62
- --ngs-nav-item-hover-icon-color: #59677e;
63
- --ngs-nav-item-active-icon-color: #036fe3;
64
-
65
- --corporate-stage-bg: #ffffff;
66
- --corporate-shell-bg: #ffffff;
67
- --corporate-sidebar-bg: #f5f5f7;
68
- --corporate-panel-bg: #ffffff;
69
- --corporate-input-bg: #e8e6ed;
70
- --corporate-muted: #858793;
71
- --corporate-soft: #f6f5f9;
72
- --corporate-border: rgba(34, 35, 48, 0.085);
73
- --corporate-border-strong: rgba(34, 35, 48, 0.14);
74
- --corporate-text: #20212d;
75
- --corporate-primary: #036fe3;
76
- --corporate-primary-soft: #d6eaff;
77
- --corporate-green: #25a765;
78
- --corporate-blue: #2d87f0;
79
- --corporate-orange: #ec6d28;
80
- --corporate-gold: #f1bd28;
81
- --corporate-shadow: 0 24px 65px rgba(59, 56, 75, 0.18);
82
- }