@ngstarter-ui/components 1.0.40 → 1.0.41

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 (29) hide show
  1. package/ai/component-registry.json +20 -8
  2. package/fesm2022/ngstarter-ui-components-alert.mjs +2 -2
  3. package/fesm2022/ngstarter-ui-components-alert.mjs.map +1 -1
  4. package/fesm2022/ngstarter-ui-components-button.mjs +2 -2
  5. package/fesm2022/ngstarter-ui-components-core.mjs +0 -12
  6. package/fesm2022/ngstarter-ui-components-core.mjs.map +1 -1
  7. package/fesm2022/ngstarter-ui-components-country-select.mjs +2 -2
  8. package/fesm2022/ngstarter-ui-components-country-select.mjs.map +1 -1
  9. package/fesm2022/ngstarter-ui-components-currency-select.mjs +2 -2
  10. package/fesm2022/ngstarter-ui-components-currency-select.mjs.map +1 -1
  11. package/fesm2022/ngstarter-ui-components-form-field.mjs +5 -3
  12. package/fesm2022/ngstarter-ui-components-form-field.mjs.map +1 -1
  13. package/fesm2022/ngstarter-ui-components-input.mjs +3 -0
  14. package/fesm2022/ngstarter-ui-components-input.mjs.map +1 -1
  15. package/fesm2022/ngstarter-ui-components-select.mjs +2 -2
  16. package/fesm2022/ngstarter-ui-components-select.mjs.map +1 -1
  17. package/fesm2022/ngstarter-ui-components-table.mjs +4 -2
  18. package/fesm2022/ngstarter-ui-components-table.mjs.map +1 -1
  19. package/package.json +1 -1
  20. package/schematics/utils.js +0 -1
  21. package/schematics/utils.js.map +1 -1
  22. package/styles/_global.scss +8 -0
  23. package/styles/_tokens.scss +85 -261
  24. package/styles/themes/compact.scss +2 -3
  25. package/styles/themes/enterprise.scss +65 -332
  26. package/styles/themes/modern.scss +7 -6
  27. package/types/ngstarter-ui-components-core.d.ts +1 -6
  28. package/types/ngstarter-ui-components-form-field.d.ts +1 -0
  29. package/types/ngstarter-ui-components-input.d.ts +1 -0
package/styles/themes/enterprise.scss CHANGED
@@ -7,343 +7,76 @@
7
7
 
8
8
  :root,
9
9
  [data-ngs-theme='enterprise']:not([data-ngs-color-scheme='dark']):not(.dark) {
10
- --ngs-font-family-base: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
11
- --ngs-radius-xs: 0.125rem;
12
- --ngs-radius-sm: 0.25rem;
13
- --ngs-radius-md: 0.375rem;
14
- --ngs-radius-lg: 0.5rem;
15
- --ngs-radius-xl: 0.625rem;
16
- --ngs-shadow-sm: 0 1px 1px rgba(16, 24, 40, 0.06);
17
- --ngs-shadow-md: 0 2px 8px rgba(16, 24, 40, 0.08);
18
- --ngs-shadow-lg: 0 12px 28px rgba(16, 24, 40, 0.14);
10
+ color-scheme: light;
19
11
 
20
- --ngs-color-primary: #173b66;
12
+ --ngs-font-family-base: Inter, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
13
+ --ngs-color-primary: #036fe3;
21
14
  --ngs-color-on-primary: #ffffff;
22
- --ngs-color-primary-container: #e3ebf5;
23
- --ngs-color-on-primary-container: #0e2744;
24
- --ngs-color-secondary: #536170;
15
+ --ngs-color-primary-container: #d6eaff;
16
+ --ngs-color-on-primary-container: #001a36;
17
+ --ngs-color-secondary: #21805a;
25
18
  --ngs-color-on-secondary: #ffffff;
26
- --ngs-color-secondary-container: #eef2f6;
27
- --ngs-color-on-secondary-container: #202b37;
28
- --ngs-color-tertiary: #0f6b6e;
29
- --ngs-color-on-tertiary: #ffffff;
30
- --ngs-color-tertiary-container: #d9eeee;
31
- --ngs-color-on-tertiary-container: #083c3e;
32
- --ngs-color-danger: #b42318;
33
- --ngs-color-on-danger: #ffffff;
34
- --ngs-color-danger-container: #fecdca;
35
- --ngs-color-on-danger-container: #7a271a;
36
- --ngs-color-info: #175cd3;
37
- --ngs-color-on-info: #ffffff;
38
- --ngs-color-info-container: #d1e9ff;
39
- --ngs-color-on-info-container: #1849a9;
40
- --ngs-color-success: #067647;
41
- --ngs-color-on-success: #ffffff;
42
- --ngs-color-success-container: #d1fadf;
43
- --ngs-color-on-success-container: #054f31;
44
- --ngs-color-warning: #b54708;
45
- --ngs-color-on-warning: #ffffff;
46
- --ngs-color-warning-container: #fedf89;
47
- --ngs-color-on-warning-container: #7a2e0e;
48
- --ngs-color-background: #f3f5f7;
49
- --ngs-color-on-background: #17202a;
50
- --ngs-color-surface: #f7f9fb;
51
- --ngs-color-surface-bright: #ffffff;
52
- --ngs-color-on-surface: #17202a;
53
- --ngs-color-on-surface-variant: #5e6b7a;
54
- --ngs-color-neutral-50: #f8fafc;
55
- --ngs-color-neutral-100: #f1f4f7;
56
- --ngs-color-neutral-200: #e4e9ef;
57
- --ngs-color-neutral-300: #d5dce5;
58
- --ngs-color-neutral-400: #a7b1be;
59
- --ngs-color-neutral-500: #758295;
60
- --ngs-color-neutral-600: #536170;
61
- --ngs-color-neutral-650: #465260;
62
- --ngs-color-neutral-700: #344051;
63
- --ngs-color-neutral-800: #202b37;
64
- --ngs-color-neutral-900: #111827;
65
- --ngs-color-neutral-950: #0b1118;
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;
66
26
  --ngs-color-surface-container-lowest: #ffffff;
67
- --ngs-color-surface-container-low: #fafbfc;
68
- --ngs-color-surface-container: #f4f6f8;
69
- --ngs-color-surface-container-high: #e9eef3;
70
- --ngs-color-surface-container-highest: #d9e1ea;
71
- --ngs-color-outline: #8b97a7;
72
- --ngs-color-outline-variant: #c6ced8;
73
- --ngs-color-border: #d5dce5;
74
- --ngs-color-faint: #edf1f5;
75
- --ngs-color-subtle: #dfe5ec;
76
- --ngs-color-muted: #c6ced8;
77
- --ngs-color-emphasis: #758295;
78
- --ngs-color-strong: #344051;
79
-
80
- --ngs-state-hover-bg: #eef2f6;
81
- --ngs-state-active-bg: #e4e9ef;
82
- --ngs-state-selected-bg: #e3ebf5;
83
- --ngs-state-selected-color: #173b66;
84
- --ngs-state-focus-ring: rgba(23, 59, 102, 0.18);
85
- --ngs-state-disabled-bg: #eef2f6;
86
- --ngs-state-disabled-color: #8b97a7;
87
- --ngs-state-disabled-border: #d5dce5;
88
-
89
- --ngs-control-height-sm: calc(1.875rem + var(--ngs-density-scale) * 1px);
90
- --ngs-control-height-md: calc(2.375rem + var(--ngs-density-scale) * 1px);
91
- --ngs-control-height-lg: calc(2.75rem + var(--ngs-density-scale) * 1px);
92
- --ngs-control-padding-x: --spacing(3);
93
- --ngs-control-radius: var(--ngs-radius-md);
94
- --ngs-button-font-size: 0.8125rem;
95
- --ngs-button-font-weight: 600;
96
- --ngs-button-tonal-bg: #eef2f6;
97
- --ngs-button-tonal-color: #202b37;
98
- --ngs-button-outlined-border: #a7b1be;
99
- --ngs-field-bg: #ffffff;
100
- --ngs-field-disabled-bg: #eef2f6;
101
- --ngs-field-border-color: #a7b1be;
102
- --ngs-field-border-focus-color: #173b66;
103
- --ngs-field-radius: var(--ngs-radius-md);
104
- --ngs-field-font-size: 0.875rem;
105
- --ngs-field-container-height: calc(2.625rem + var(--ngs-density-scale) * 1px);
106
- --ngs-field-infix-height: calc(2.625rem + var(--ngs-density-scale) * 1px);
107
- --ngs-field-filled-bg: #f4f6f8;
108
- --ngs-dropdown-bg: #ffffff;
109
- --ngs-dropdown-shadow: 0 6px 18px rgba(16, 24, 40, 0.12);
110
- --ngs-dropdown-radius: var(--ngs-radius-md);
111
- --ngs-dropdown-border: 1px solid #d5dce5;
112
- --ngs-dialog-radius: var(--ngs-radius-lg);
113
- --ngs-dialog-shadow: 0 18px 44px rgba(16, 24, 40, 0.18);
114
- --ngs-overlay-backdrop-bg: rgba(17, 24, 39, 0.36);
115
- --ngs-overlay-backdrop-blur: 1px;
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;
116
35
 
117
- --ngs-table-bg: #ffffff;
118
- --ngs-table-header-bg: #f4f6f8;
119
- --ngs-table-row-bg: #ffffff;
120
- --ngs-table-border-color: #d5dce5;
121
- --ngs-table-row-height: calc(2.625rem + var(--ngs-density-scale) * 1px);
122
- --ngs-table-header-row-height: calc(2.5rem + var(--ngs-density-scale) * 1px);
123
- --ngs-table-cell-padding: --spacing(1) --spacing(3);
124
- --ngs-table-cell-font-size: 0.8125rem;
125
- --ngs-table-header-cell-font-size: 0.6875rem;
126
- --ngs-table-header-cell-font-weight: 700;
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);
127
45
 
128
- --ngs-nav-item-height: calc(2.125rem + var(--ngs-density-scale) * 1px);
129
- --ngs-nav-items-gap: --spacing(0.5);
130
- --ngs-nav-item-padding: 0 --spacing(2.5);
131
- --ngs-nav-item-radius: var(--ngs-radius-sm);
132
- --ngs-nav-item-font-size: 0.8125rem;
133
- --ngs-nav-item-font-weight: 600;
134
- --ngs-nav-item-border-width: 1px;
135
- --ngs-nav-item-border-color: transparent;
136
- --ngs-nav-item-color: #465260;
137
- --ngs-nav-item-hover-color: #17202a;
138
- --ngs-nav-item-active-color: #173b66;
139
- --ngs-nav-item-hover-bg: #eef2f6;
140
- --ngs-nav-item-active-bg: #e3ebf5;
141
- --ngs-nav-item-icon-color: #758295;
142
- --ngs-nav-item-hover-icon-color: #344051;
143
- --ngs-nav-item-active-icon-color: #173b66;
144
- --ngs-nav-item-icon-font-size: 1.25rem;
145
- --ngs-nav-heading-font-size: 0.6875rem;
146
- --ngs-nav-heading-font-weight: 700;
147
- --ngs-nav-heading-margin-top: --spacing(5);
148
- --ngs-nav-heading-margin-bottom: --spacing(1.5);
149
- --ngs-nav-divider-margin: --spacing(4) 0;
150
- --ngs-nav-nested-item-margin: 0 0 0 38px;
151
- --ngs-sidebar-width: var(--ngs-sidenav-width, 16rem);
152
- }
153
-
154
- @media (prefers-color-scheme: dark) {
155
- :root:not([data-ngs-color-scheme='light']) {
156
- color-scheme: dark;
157
- --ngs-color-primary: #8fb8ff;
158
- --ngs-color-on-primary: #07111f;
159
- --ngs-color-primary-container: #173b66;
160
- --ngs-color-on-primary-container: #d7e7ff;
161
- --ngs-color-secondary: #a7b1be;
162
- --ngs-color-on-secondary: #0b1118;
163
- --ngs-color-secondary-container: #202b37;
164
- --ngs-color-on-secondary-container: #e4e9ef;
165
- --ngs-color-tertiary: #7bd2d5;
166
- --ngs-color-on-tertiary: #082f32;
167
- --ngs-color-tertiary-container: #0f4f52;
168
- --ngs-color-on-tertiary-container: #d9eeee;
169
- --ngs-color-danger: #f97066;
170
- --ngs-color-on-danger: #4e1b16;
171
- --ngs-color-danger-container: #7a271a;
172
- --ngs-color-on-danger-container: #fee4e2;
173
- --ngs-color-info: #84caff;
174
- --ngs-color-on-info: #102a56;
175
- --ngs-color-info-container: #1849a9;
176
- --ngs-color-on-info-container: #d1e9ff;
177
- --ngs-color-success: #75e0a7;
178
- --ngs-color-on-success: #053321;
179
- --ngs-color-success-container: #05603a;
180
- --ngs-color-on-success-container: #d1fadf;
181
- --ngs-color-warning: #fdb022;
182
- --ngs-color-on-warning: #4e1d09;
183
- --ngs-color-warning-container: #93370d;
184
- --ngs-color-on-warning-container: #fef0c7;
185
- --ngs-color-background: #0b1118;
186
- --ngs-color-on-background: #e6edf3;
187
- --ngs-color-surface: #111922;
188
- --ngs-color-surface-bright: #182230;
189
- --ngs-color-on-surface: #e6edf3;
190
- --ngs-color-on-surface-variant: #9ba8b6;
191
- --ngs-color-neutral-50: #0b1118;
192
- --ngs-color-neutral-100: #111922;
193
- --ngs-color-neutral-200: #182230;
194
- --ngs-color-neutral-300: #202b37;
195
- --ngs-color-neutral-400: #344051;
196
- --ngs-color-neutral-500: #536170;
197
- --ngs-color-neutral-600: #758295;
198
- --ngs-color-neutral-650: #8b97a7;
199
- --ngs-color-neutral-700: #a7b1be;
200
- --ngs-color-neutral-800: #c6ced8;
201
- --ngs-color-neutral-900: #e4e9ef;
202
- --ngs-color-neutral-950: #f8fafc;
203
- --ngs-color-surface-container-lowest: #0b1118;
204
- --ngs-color-surface-container-low: #111922;
205
- --ngs-color-surface-container: #182230;
206
- --ngs-color-surface-container-high: #202b37;
207
- --ngs-color-surface-container-highest: #293544;
208
- --ngs-color-outline: #758295;
209
- --ngs-color-outline-variant: #344051;
210
- --ngs-color-border: #293544;
211
- --ngs-color-faint: #182230;
212
- --ngs-color-subtle: #202b37;
213
- --ngs-color-muted: #344051;
214
- --ngs-color-emphasis: #8b97a7;
215
- --ngs-color-strong: #c6ced8;
216
- --ngs-state-hover-bg: #182230;
217
- --ngs-state-active-bg: #202b37;
218
- --ngs-state-selected-bg: #173b66;
219
- --ngs-state-selected-color: #d7e7ff;
220
- --ngs-state-focus-ring: rgba(143, 184, 255, 0.26);
221
- --ngs-state-disabled-bg: #182230;
222
- --ngs-state-disabled-color: #758295;
223
- --ngs-state-disabled-border: #293544;
224
- --ngs-button-tonal-bg: #202b37;
225
- --ngs-button-tonal-color: #e4e9ef;
226
- --ngs-button-outlined-border: #536170;
227
- --ngs-field-bg: #111922;
228
- --ngs-field-disabled-bg: #182230;
229
- --ngs-field-border-color: #536170;
230
- --ngs-field-border-focus-color: #8fb8ff;
231
- --ngs-field-filled-bg: #182230;
232
- --ngs-dropdown-bg: #111922;
233
- --ngs-dropdown-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
234
- --ngs-dropdown-border: 1px solid #293544;
235
- --ngs-dialog-shadow: 0 24px 54px rgba(0, 0, 0, 0.42);
236
- --ngs-overlay-backdrop-bg: rgba(3, 7, 12, 0.62);
237
- --ngs-table-bg: #111922;
238
- --ngs-table-header-bg: #182230;
239
- --ngs-table-row-bg: #111922;
240
- --ngs-table-border-color: #293544;
241
- --ngs-nav-item-color: #a7b1be;
242
- --ngs-nav-item-hover-color: #e6edf3;
243
- --ngs-nav-item-active-color: #d7e7ff;
244
- --ngs-nav-item-hover-bg: #182230;
245
- --ngs-nav-item-active-bg: #173b66;
246
- --ngs-nav-item-icon-color: #8b97a7;
247
- --ngs-nav-item-hover-icon-color: #e6edf3;
248
- --ngs-nav-item-active-icon-color: #d7e7ff;
249
- }
250
- }
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;
251
64
 
252
- :root.dark,
253
- :root[data-ngs-color-scheme='dark'],
254
- .dark[data-ngs-theme='enterprise'],
255
- [data-ngs-theme='enterprise'][data-ngs-color-scheme='dark'] {
256
- color-scheme: dark;
257
- --ngs-color-primary: #8fb8ff;
258
- --ngs-color-on-primary: #07111f;
259
- --ngs-color-primary-container: #173b66;
260
- --ngs-color-on-primary-container: #d7e7ff;
261
- --ngs-color-secondary: #a7b1be;
262
- --ngs-color-on-secondary: #0b1118;
263
- --ngs-color-secondary-container: #202b37;
264
- --ngs-color-on-secondary-container: #e4e9ef;
265
- --ngs-color-tertiary: #7bd2d5;
266
- --ngs-color-on-tertiary: #082f32;
267
- --ngs-color-tertiary-container: #0f4f52;
268
- --ngs-color-on-tertiary-container: #d9eeee;
269
- --ngs-color-danger: #f97066;
270
- --ngs-color-on-danger: #4e1b16;
271
- --ngs-color-danger-container: #7a271a;
272
- --ngs-color-on-danger-container: #fee4e2;
273
- --ngs-color-info: #84caff;
274
- --ngs-color-on-info: #102a56;
275
- --ngs-color-info-container: #1849a9;
276
- --ngs-color-on-info-container: #d1e9ff;
277
- --ngs-color-success: #75e0a7;
278
- --ngs-color-on-success: #053321;
279
- --ngs-color-success-container: #05603a;
280
- --ngs-color-on-success-container: #d1fadf;
281
- --ngs-color-warning: #fdb022;
282
- --ngs-color-on-warning: #4e1d09;
283
- --ngs-color-warning-container: #93370d;
284
- --ngs-color-on-warning-container: #fef0c7;
285
- --ngs-color-background: #0b1118;
286
- --ngs-color-on-background: #e6edf3;
287
- --ngs-color-surface: #111922;
288
- --ngs-color-surface-bright: #182230;
289
- --ngs-color-on-surface: #e6edf3;
290
- --ngs-color-on-surface-variant: #9ba8b6;
291
- --ngs-color-neutral-50: #0b1118;
292
- --ngs-color-neutral-100: #111922;
293
- --ngs-color-neutral-200: #182230;
294
- --ngs-color-neutral-300: #202b37;
295
- --ngs-color-neutral-400: #344051;
296
- --ngs-color-neutral-500: #536170;
297
- --ngs-color-neutral-600: #758295;
298
- --ngs-color-neutral-650: #8b97a7;
299
- --ngs-color-neutral-700: #a7b1be;
300
- --ngs-color-neutral-800: #c6ced8;
301
- --ngs-color-neutral-900: #e4e9ef;
302
- --ngs-color-neutral-950: #f8fafc;
303
- --ngs-color-surface-container-lowest: #0b1118;
304
- --ngs-color-surface-container-low: #111922;
305
- --ngs-color-surface-container: #182230;
306
- --ngs-color-surface-container-high: #202b37;
307
- --ngs-color-surface-container-highest: #293544;
308
- --ngs-color-outline: #758295;
309
- --ngs-color-outline-variant: #344051;
310
- --ngs-color-border: #293544;
311
- --ngs-color-faint: #182230;
312
- --ngs-color-subtle: #202b37;
313
- --ngs-color-muted: #344051;
314
- --ngs-color-emphasis: #8b97a7;
315
- --ngs-color-strong: #c6ced8;
316
- --ngs-state-hover-bg: #182230;
317
- --ngs-state-active-bg: #202b37;
318
- --ngs-state-selected-bg: #173b66;
319
- --ngs-state-selected-color: #d7e7ff;
320
- --ngs-state-focus-ring: rgba(143, 184, 255, 0.26);
321
- --ngs-state-disabled-bg: #182230;
322
- --ngs-state-disabled-color: #758295;
323
- --ngs-state-disabled-border: #293544;
324
- --ngs-button-tonal-bg: #202b37;
325
- --ngs-button-tonal-color: #e4e9ef;
326
- --ngs-button-outlined-border: #536170;
327
- --ngs-field-bg: #111922;
328
- --ngs-field-disabled-bg: #182230;
329
- --ngs-field-border-color: #536170;
330
- --ngs-field-border-focus-color: #8fb8ff;
331
- --ngs-field-filled-bg: #182230;
332
- --ngs-dropdown-bg: #111922;
333
- --ngs-dropdown-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
334
- --ngs-dropdown-border: 1px solid #293544;
335
- --ngs-dialog-shadow: 0 24px 54px rgba(0, 0, 0, 0.42);
336
- --ngs-overlay-backdrop-bg: rgba(3, 7, 12, 0.62);
337
- --ngs-table-bg: #111922;
338
- --ngs-table-header-bg: #182230;
339
- --ngs-table-row-bg: #111922;
340
- --ngs-table-border-color: #293544;
341
- --ngs-nav-item-color: #a7b1be;
342
- --ngs-nav-item-hover-color: #e6edf3;
343
- --ngs-nav-item-active-color: #d7e7ff;
344
- --ngs-nav-item-hover-bg: #182230;
345
- --ngs-nav-item-active-bg: #173b66;
346
- --ngs-nav-item-icon-color: #8b97a7;
347
- --ngs-nav-item-hover-icon-color: #e6edf3;
348
- --ngs-nav-item-active-icon-color: #d7e7ff;
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);
349
82
  }
package/styles/themes/modern.scss CHANGED
@@ -81,7 +81,7 @@
81
81
  --ngs-state-active-bg: linear-gradient(135deg, rgba(79, 70, 229, 0.13), rgba(15, 118, 110, 0.12));
82
82
  --ngs-state-selected-bg: linear-gradient(135deg, #e6e9ff, #ccfbf1);
83
83
  --ngs-state-selected-color: #3730a3;
84
- --ngs-state-focus-ring: rgba(79, 70, 229, 0.22);
84
+ --ngs-state-focus-ring: var(--ngs-field-border-focus-color);
85
85
  --ngs-state-disabled-bg: #edf1f8;
86
86
  --ngs-state-disabled-color: #9aa6c0;
87
87
  --ngs-state-disabled-border: #d7deee;
@@ -104,14 +104,15 @@
104
104
  --ngs-field-border-focus-color: #4f46e5;
105
105
  --ngs-field-radius: var(--ngs-radius-lg);
106
106
  --ngs-field-font-size: 0.9375rem;
107
- --ngs-field-container-height: calc(3.375rem + var(--ngs-density-scale) * 1px);
108
- --ngs-field-infix-height: calc(3.375rem + var(--ngs-density-scale) * 1px);
107
+ --ngs-field-container-height: 3.125rem;
108
+ --ngs-field-infix-height: 3.125rem;
109
109
  --ngs-field-padding-x: --spacing(4);
110
110
  --ngs-field-filled-bg: #f3f5ff;
111
111
  --ngs-dropdown-bg: rgba(255, 255, 255, 0.98);
112
112
  --ngs-dropdown-shadow: 0 20px 52px rgba(39, 52, 105, 0.18);
113
113
  --ngs-dropdown-radius: var(--ngs-radius-xl);
114
114
  --ngs-dropdown-border: 1px solid rgba(215, 222, 238, 0.9);
115
+ --ngs-dropdown-height: 2.625rem;
115
116
  --ngs-dialog-radius: 1.75rem;
116
117
  --ngs-dialog-shadow: 0 34px 86px rgba(39, 52, 105, 0.24);
117
118
  --ngs-overlay-backdrop-bg: rgba(23, 32, 51, 0.30);
@@ -128,7 +129,7 @@
128
129
  --ngs-table-header-cell-font-size: 0.75rem;
129
130
  --ngs-table-header-cell-font-weight: 800;
130
131
 
131
- --ngs-nav-item-height: calc(2.875rem + var(--ngs-density-scale) * 1px);
132
+ --ngs-nav-item-height: var(--ngs-dropdown-height);
132
133
  --ngs-nav-items-gap: --spacing(1.5);
133
134
  --ngs-nav-item-padding: 0 --spacing(4);
134
135
  --ngs-nav-item-radius: var(--ngs-radius-full);
@@ -219,7 +220,7 @@
219
220
  --ngs-state-active-bg: linear-gradient(135deg, rgba(165, 180, 252, 0.18), rgba(94, 234, 212, 0.16));
220
221
  --ngs-state-selected-bg: linear-gradient(135deg, #3730a3, #115e59);
221
222
  --ngs-state-selected-color: #eef2ff;
222
- --ngs-state-focus-ring: rgba(165, 180, 252, 0.32);
223
+ --ngs-state-focus-ring: var(--ngs-field-border-focus-color);
223
224
  --ngs-state-disabled-bg: #1b2138;
224
225
  --ngs-state-disabled-color: #697491;
225
226
  --ngs-state-disabled-border: #28304a;
@@ -320,7 +321,7 @@
320
321
  --ngs-state-active-bg: linear-gradient(135deg, rgba(165, 180, 252, 0.18), rgba(94, 234, 212, 0.16));
321
322
  --ngs-state-selected-bg: linear-gradient(135deg, #3730a3, #115e59);
322
323
  --ngs-state-selected-color: #eef2ff;
323
- --ngs-state-focus-ring: rgba(165, 180, 252, 0.32);
324
+ --ngs-state-focus-ring: var(--ngs-field-border-focus-color);
324
325
  --ngs-state-disabled-bg: #1b2138;
325
326
  --ngs-state-disabled-color: #697491;
326
327
  --ngs-state-disabled-border: #28304a;
package/types/ngstarter-ui-components-core.d.ts CHANGED
@@ -327,12 +327,10 @@ declare class SeoService {
327
327
 
328
328
  type NgsThemeName = 'default' | 'enterprise' | 'modern' | string;
329
329
  type NgsColorScheme = 'light' | 'dark' | 'auto';
330
- type NgsDensity = 'compact' | 'comfortable' | 'spacious';
331
330
  type NgsRadius = 'none' | 'small' | 'medium' | 'large';
332
331
  interface NgsThemeOptions {
333
332
  theme?: NgsThemeName;
334
333
  colorScheme?: NgsColorScheme;
335
- density?: NgsDensity;
336
334
  radius?: NgsRadius;
337
335
  primaryColor?: string;
338
336
  persist?: boolean;
@@ -347,12 +345,10 @@ declare class ThemeManagerService {
347
345
  private _options;
348
346
  private readonly _theme;
349
347
  private readonly _colorScheme;
350
- private readonly _density;
351
348
  private readonly _radius;
352
349
  private readonly _primaryColor;
353
350
  readonly theme: i0.Signal<string>;
354
351
  readonly colorScheme: i0.Signal<"light" | "dark">;
355
- readonly density: i0.Signal<NgsDensity>;
356
352
  readonly radius: i0.Signal<NgsRadius>;
357
353
  readonly primaryColor: i0.Signal<string | null>;
358
354
  constructor();
@@ -360,7 +356,6 @@ declare class ThemeManagerService {
360
356
  toggleColorScheme(): void;
361
357
  changeColorScheme(colorScheme: 'dark' | 'light'): void;
362
358
  setTheme(theme: NgsThemeName, persist?: boolean): void;
363
- setDensity(density: NgsDensity, persist?: boolean): void;
364
359
  setRadius(radius: NgsRadius, persist?: boolean): void;
365
360
  setPrimaryColor(primaryColor: string | null, persist?: boolean): void;
366
361
  applyTheme(options: NgsThemeOptions, persist?: boolean): void;
@@ -456,4 +451,4 @@ declare function zonefreeScheduler(): SchedulerLike;
456
451
  declare function typedFromEvent<E extends Event>(target: EventTarget, event: string, options?: EventListenerOptions | boolean): Observable<E>;
457
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 };
459
- export type { Autofocusable, GlobalState, NgsColorScheme, NgsDensity, NgsRadius, NgsThemeName, NgsThemeOptions, RippleAnimationConfig, RippleConfig, RippleGlobalOptions };
454
+ export type { Autofocusable, GlobalState, NgsColorScheme, NgsRadius, NgsThemeName, NgsThemeOptions, RippleAnimationConfig, RippleConfig, RippleGlobalOptions };
package/types/ngstarter-ui-components-form-field.d.ts CHANGED
@@ -18,6 +18,7 @@ declare abstract class FormFieldControl<T> {
18
18
  abstract readonly required: boolean;
19
19
  abstract readonly disabled: boolean;
20
20
  abstract readonly errorState: boolean;
21
+ readonly multiline?: boolean;
21
22
  abstract focus(): void;
22
23
  static ɵfac: i0.ɵɵFactoryDeclaration<FormFieldControl<any>, never>;
23
24
  static ɵprov: i0.ɵɵInjectableDeclaration<FormFieldControl<any>>;
package/types/ngstarter-ui-components-input.d.ts CHANGED
@@ -31,6 +31,7 @@ declare class Input implements OnInit, DoCheck, FormFieldControl<string> {
31
31
  errorStateValue: boolean;
32
32
  private _errorState;
33
33
  get errorState(): boolean;
34
+ get multiline(): boolean;
34
35
  isRequired: _angular_core.Signal<boolean>;
35
36
  emptyValue: boolean;
36
37
  private _empty;