@ngxsmk/theme 3.0.0 → 3.1.0

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 (21) hide show
  1. package/README.md +50 -9
  2. package/esm2022/lib/css.mjs +139 -4
  3. package/esm2022/lib/define-config.mjs +3 -3
  4. package/esm2022/lib/presets.mjs +167 -1
  5. package/esm2022/lib/theme-injector.service.mjs +2 -4
  6. package/esm2022/lib/types.mjs +1 -1
  7. package/fesm2022/ngxsmk-theme.mjs +308 -9
  8. package/fesm2022/ngxsmk-theme.mjs.map +1 -1
  9. package/lib/css.d.ts.map +1 -1
  10. package/lib/presets.d.ts +14 -0
  11. package/lib/presets.d.ts.map +1 -1
  12. package/lib/theme-injector.service.d.ts.map +1 -1
  13. package/lib/types.d.ts +13 -0
  14. package/lib/types.d.ts.map +1 -1
  15. package/package.json +1 -1
  16. package/styles/ngxsmk.css +98 -3
  17. package/styles/ngxsmk.emerald.css +98 -3
  18. package/styles/ngxsmk.ink.css +500 -0
  19. package/styles/ngxsmk.neutral.css +98 -3
  20. package/styles/ngxsmk.rose.css +98 -3
  21. package/styles/ngxsmk.violet.css +98 -3
package/styles/ngxsmk.rose.css CHANGED
@@ -54,10 +54,21 @@
54
54
  --ngxsmk-button-font-weight: 500;
55
55
  --ngxsmk-button-radius: var(--ngxsmk-radius-base);
56
56
  --ngxsmk-button-disabled-opacity: 0.5;
57
+ --ngxsmk-button-border-width: 1px;
58
+ --ngxsmk-button-gap: var(--ngxsmk-space-2);
59
+ --ngxsmk-input-bg: var(--ngxsmk-color-surface);
60
+ --ngxsmk-input-color: var(--ngxsmk-color-on-surface);
61
+ --ngxsmk-input-border: var(--ngxsmk-color-outline-strong);
62
+ --ngxsmk-input-radius: var(--ngxsmk-radius-base);
63
+ --ngxsmk-input-height: var(--ngxsmk-control-height);
64
+ --ngxsmk-input-padding-inline: var(--ngxsmk-space-3);
65
+ --ngxsmk-input-placeholder: var(--ngxsmk-color-on-surface-variant);
57
66
  --ngxsmk-card-bg: var(--ngxsmk-color-surface);
58
67
  --ngxsmk-card-radius: var(--ngxsmk-radius-xl);
59
68
  --ngxsmk-card-shadow: var(--ngxsmk-shadow-sm);
60
69
  --ngxsmk-card-border-color: var(--ngxsmk-color-outline);
70
+ --ngxsmk-card-border-width: 1px;
71
+ --ngxsmk-card-padding: var(--ngxsmk-space-5);
61
72
  --ngxsmk-accordion-bg: var(--ngxsmk-color-surface);
62
73
  --ngxsmk-accordion-radius: var(--ngxsmk-radius-lg);
63
74
  --ngxsmk-accordion-border-color: var(--ngxsmk-color-outline);
@@ -72,6 +83,86 @@
72
83
  --ngxsmk-switch-thumb-size: 0.875rem;
73
84
  --ngxsmk-switch-thumb-bg: var(--ngxsmk-color-surface);
74
85
  --ngxsmk-switch-checked-bg: var(--ngxsmk-color-primary);
86
+ --ngxsmk-checkbox-size: 1.125rem;
87
+ --ngxsmk-checkbox-radius: var(--ngxsmk-radius-sm);
88
+ --ngxsmk-checkbox-border: var(--ngxsmk-color-outline-strong);
89
+ --ngxsmk-checkbox-checked-bg: var(--ngxsmk-color-primary);
90
+ --ngxsmk-badge-radius: var(--ngxsmk-radius-full);
91
+ --ngxsmk-badge-font-weight: 600;
92
+ --ngxsmk-badge-padding-inline: 0.5rem;
93
+ --ngxsmk-badge-padding-block: 0.125rem;
94
+ --ngxsmk-badge-border-mix: 20%;
95
+ --ngxsmk-alert-radius: var(--ngxsmk-radius-lg);
96
+ --ngxsmk-alert-border-mix: 22%;
97
+ --ngxsmk-alert-padding: var(--ngxsmk-space-4);
98
+ --ngxsmk-dialog-radius: var(--ngxsmk-radius-2xl);
99
+ --ngxsmk-dialog-shadow: var(--ngxsmk-shadow-xl);
100
+ --ngxsmk-dialog-bg: var(--ngxsmk-color-surface-elevated);
101
+ --ngxsmk-dialog-backdrop: var(--ngxsmk-color-backdrop);
102
+ --ngxsmk-dialog-blur: 4px;
103
+ --ngxsmk-dialog-max-width: 28rem;
104
+ --ngxsmk-sheet-radius: var(--ngxsmk-radius-xl);
105
+ --ngxsmk-sheet-shadow: var(--ngxsmk-shadow-xl);
106
+ --ngxsmk-sheet-bg: var(--ngxsmk-color-surface-elevated);
107
+ --ngxsmk-sheet-backdrop: var(--ngxsmk-color-backdrop);
108
+ --ngxsmk-sheet-width: 24rem;
109
+ --ngxsmk-lightbox-backdrop: rgb(0 0 0 / 0.9);
110
+ --ngxsmk-lightbox-fg: #ffffff;
111
+ --ngxsmk-lightbox-control-bg: rgb(255 255 255 / 0.12);
112
+ --ngxsmk-lightbox-control-bg-hover: rgb(255 255 255 / 0.22);
113
+ --ngxsmk-toast-radius: var(--ngxsmk-radius-lg);
114
+ --ngxsmk-toast-shadow: var(--ngxsmk-shadow-lg);
115
+ --ngxsmk-toast-bg: var(--ngxsmk-color-surface-elevated);
116
+ --ngxsmk-toast-accent-width: 3px;
117
+ --ngxsmk-table-border: var(--ngxsmk-color-outline);
118
+ --ngxsmk-table-header-bg: color-mix(in srgb, var(--ngxsmk-color-surface-variant) 55%, transparent);
119
+ --ngxsmk-table-row-hover: var(--ngxsmk-color-surface-hover);
120
+ --ngxsmk-table-stripe: color-mix(in srgb, var(--ngxsmk-color-surface-variant) 35%, transparent);
121
+ --ngxsmk-table-drop-indicator: inset 2px 0 0 var(--ngxsmk-color-primary);
122
+ --ngxsmk-table-cell-padding: 0.625rem 0.75rem;
123
+ --ngxsmk-tabs-indicator: 2px;
124
+ --ngxsmk-tabs-radius: var(--ngxsmk-radius-md);
125
+ --ngxsmk-tabs-gap: var(--ngxsmk-space-1);
126
+ --ngxsmk-select-bg: var(--ngxsmk-color-surface);
127
+ --ngxsmk-select-border: var(--ngxsmk-color-outline-strong);
128
+ --ngxsmk-select-radius: var(--ngxsmk-radius-base);
129
+ --ngxsmk-select-list-shadow: var(--ngxsmk-shadow-lg);
130
+ --ngxsmk-select-list-radius: var(--ngxsmk-radius-lg);
131
+ --ngxsmk-menu-bg: var(--ngxsmk-color-surface-elevated);
132
+ --ngxsmk-menu-radius: var(--ngxsmk-radius-lg);
133
+ --ngxsmk-menu-shadow: var(--ngxsmk-shadow-lg);
134
+ --ngxsmk-menu-border: var(--ngxsmk-color-outline);
135
+ --ngxsmk-menu-item-radius: var(--ngxsmk-radius-md);
136
+ --ngxsmk-pagination-size: 2.25rem;
137
+ --ngxsmk-pagination-radius: var(--ngxsmk-radius-md);
138
+ --ngxsmk-form-field-gap: var(--ngxsmk-space-1-5);
139
+ --ngxsmk-form-field-label-weight: 500;
140
+ --ngxsmk-radio-size: 1.125rem;
141
+ --ngxsmk-radio-dot-size: 0.5rem;
142
+ --ngxsmk-radio-border: var(--ngxsmk-color-outline-strong);
143
+ --ngxsmk-data-table-border: var(--ngxsmk-color-outline);
144
+ --ngxsmk-data-table-radius: var(--ngxsmk-radius-md);
145
+ --ngxsmk-data-table-filter-bg: color-mix(in srgb, var(--ngxsmk-color-surface-variant) 40%, transparent);
146
+ --ngxsmk-data-table-filter-label-size: 0.7rem;
147
+ --ngxsmk-data-table-page-size: 2rem;
148
+ --ngxsmk-data-table-loading-height: 3px;
149
+ --ngxsmk-ai-chat-radius: var(--ngxsmk-radius-xl);
150
+ --ngxsmk-ai-chat-border: var(--ngxsmk-color-outline);
151
+ --ngxsmk-ai-chat-bg: var(--ngxsmk-color-surface);
152
+ --ngxsmk-ai-chat-header-bg: var(--ngxsmk-color-surface-variant);
153
+ --ngxsmk-ai-chat-bubble-bg: var(--ngxsmk-color-surface-variant);
154
+ --ngxsmk-ai-chat-bubble-user-bg: var(--ngxsmk-color-primary);
155
+ --ngxsmk-ai-chat-bubble-radius: var(--ngxsmk-radius-lg);
156
+ --ngxsmk-ai-chat-composer-radius: var(--ngxsmk-radius-full);
157
+ --ngxsmk-prompt-radius: var(--ngxsmk-radius-xl);
158
+ --ngxsmk-prompt-border: var(--ngxsmk-color-outline-strong);
159
+ --ngxsmk-prompt-shadow: var(--ngxsmk-shadow-sm);
160
+ --ngxsmk-prompt-bg: var(--ngxsmk-color-surface);
161
+ --ngxsmk-prompt-send-radius: var(--ngxsmk-radius-full);
162
+ --ngxsmk-chat-bubble-radius: var(--ngxsmk-radius-lg);
163
+ --ngxsmk-chat-bubble-bg: var(--ngxsmk-color-surface-container);
164
+ --ngxsmk-chat-bubble-user-bg: var(--ngxsmk-color-primary-container);
165
+ --ngxsmk-chat-bubble-padding: var(--ngxsmk-space-2) var(--ngxsmk-space-3);
75
166
  --ngxsmk-spreadsheet-bg: var(--ngxsmk-color-surface);
76
167
  --ngxsmk-spreadsheet-header-bg: var(--ngxsmk-color-surface-variant);
77
168
  --ngxsmk-spreadsheet-header-color: var(--ngxsmk-color-on-surface-variant);
@@ -100,15 +191,19 @@
100
191
  --ngxsmk-input-group-radius: var(--ngxsmk-radius-md);
101
192
  --ngxsmk-input-group-shadow: none;
102
193
  --ngxsmk-input-group-focus-border: var(--ngxsmk-color-primary);
103
- --ngxsmk-input-group-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--ngxsmk-color-primary) 15%, transparent);
194
+ --ngxsmk-input-group-focus-shadow: var(--ngxsmk-focus-ring);
104
195
  --ngxsmk-input-group-error-border: var(--ngxsmk-color-error);
105
- --ngxsmk-input-group-error-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--ngxsmk-color-error) 15%, transparent);
196
+ --ngxsmk-input-group-error-focus-shadow: var(--ngxsmk-focus-ring-error);
106
197
  --ngxsmk-input-group-success-border: var(--ngxsmk-color-success);
107
198
  --ngxsmk-input-group-warning-border: var(--ngxsmk-color-warning);
108
- --ngxsmk-input-group-height: 2.5rem;
199
+ --ngxsmk-input-group-height: var(--ngxsmk-control-height);
109
200
  --ngxsmk-input-group-padding: 0.75rem;
110
201
  --ngxsmk-input-group-gap: var(--ngxsmk-space-2);
111
202
  --ngxsmk-input-group-font: var(--ngxsmk-font-sans);
203
+ --ngxsmk-heatmap-level-1: color-mix(in srgb, var(--ngxsmk-color-success) 28%, var(--ngxsmk-color-surface-variant));
204
+ --ngxsmk-heatmap-level-2: color-mix(in srgb, var(--ngxsmk-color-success) 52%, var(--ngxsmk-color-surface-variant));
205
+ --ngxsmk-heatmap-level-3: color-mix(in srgb, var(--ngxsmk-color-success) 76%, var(--ngxsmk-color-surface-variant));
206
+ --ngxsmk-heatmap-level-4: var(--ngxsmk-color-success);
112
207
  --ngxsmk-control-height-sm: 2rem;
113
208
  --ngxsmk-control-height-md: 2.5rem;
114
209
  --ngxsmk-control-height-lg: 3rem;
package/styles/ngxsmk.violet.css CHANGED
@@ -54,10 +54,21 @@
54
54
  --ngxsmk-button-font-weight: 500;
55
55
  --ngxsmk-button-radius: var(--ngxsmk-radius-base);
56
56
  --ngxsmk-button-disabled-opacity: 0.5;
57
+ --ngxsmk-button-border-width: 1px;
58
+ --ngxsmk-button-gap: var(--ngxsmk-space-2);
59
+ --ngxsmk-input-bg: var(--ngxsmk-color-surface);
60
+ --ngxsmk-input-color: var(--ngxsmk-color-on-surface);
61
+ --ngxsmk-input-border: var(--ngxsmk-color-outline-strong);
62
+ --ngxsmk-input-radius: var(--ngxsmk-radius-base);
63
+ --ngxsmk-input-height: var(--ngxsmk-control-height);
64
+ --ngxsmk-input-padding-inline: var(--ngxsmk-space-3);
65
+ --ngxsmk-input-placeholder: var(--ngxsmk-color-on-surface-variant);
57
66
  --ngxsmk-card-bg: var(--ngxsmk-color-surface);
58
67
  --ngxsmk-card-radius: var(--ngxsmk-radius-xl);
59
68
  --ngxsmk-card-shadow: var(--ngxsmk-shadow-sm);
60
69
  --ngxsmk-card-border-color: var(--ngxsmk-color-outline);
70
+ --ngxsmk-card-border-width: 1px;
71
+ --ngxsmk-card-padding: var(--ngxsmk-space-5);
61
72
  --ngxsmk-accordion-bg: var(--ngxsmk-color-surface);
62
73
  --ngxsmk-accordion-radius: var(--ngxsmk-radius-lg);
63
74
  --ngxsmk-accordion-border-color: var(--ngxsmk-color-outline);
@@ -72,6 +83,86 @@
72
83
  --ngxsmk-switch-thumb-size: 0.875rem;
73
84
  --ngxsmk-switch-thumb-bg: var(--ngxsmk-color-surface);
74
85
  --ngxsmk-switch-checked-bg: var(--ngxsmk-color-primary);
86
+ --ngxsmk-checkbox-size: 1.125rem;
87
+ --ngxsmk-checkbox-radius: var(--ngxsmk-radius-sm);
88
+ --ngxsmk-checkbox-border: var(--ngxsmk-color-outline-strong);
89
+ --ngxsmk-checkbox-checked-bg: var(--ngxsmk-color-primary);
90
+ --ngxsmk-badge-radius: var(--ngxsmk-radius-full);
91
+ --ngxsmk-badge-font-weight: 600;
92
+ --ngxsmk-badge-padding-inline: 0.5rem;
93
+ --ngxsmk-badge-padding-block: 0.125rem;
94
+ --ngxsmk-badge-border-mix: 20%;
95
+ --ngxsmk-alert-radius: var(--ngxsmk-radius-lg);
96
+ --ngxsmk-alert-border-mix: 22%;
97
+ --ngxsmk-alert-padding: var(--ngxsmk-space-4);
98
+ --ngxsmk-dialog-radius: var(--ngxsmk-radius-2xl);
99
+ --ngxsmk-dialog-shadow: var(--ngxsmk-shadow-xl);
100
+ --ngxsmk-dialog-bg: var(--ngxsmk-color-surface-elevated);
101
+ --ngxsmk-dialog-backdrop: var(--ngxsmk-color-backdrop);
102
+ --ngxsmk-dialog-blur: 4px;
103
+ --ngxsmk-dialog-max-width: 28rem;
104
+ --ngxsmk-sheet-radius: var(--ngxsmk-radius-xl);
105
+ --ngxsmk-sheet-shadow: var(--ngxsmk-shadow-xl);
106
+ --ngxsmk-sheet-bg: var(--ngxsmk-color-surface-elevated);
107
+ --ngxsmk-sheet-backdrop: var(--ngxsmk-color-backdrop);
108
+ --ngxsmk-sheet-width: 24rem;
109
+ --ngxsmk-lightbox-backdrop: rgb(0 0 0 / 0.9);
110
+ --ngxsmk-lightbox-fg: #ffffff;
111
+ --ngxsmk-lightbox-control-bg: rgb(255 255 255 / 0.12);
112
+ --ngxsmk-lightbox-control-bg-hover: rgb(255 255 255 / 0.22);
113
+ --ngxsmk-toast-radius: var(--ngxsmk-radius-lg);
114
+ --ngxsmk-toast-shadow: var(--ngxsmk-shadow-lg);
115
+ --ngxsmk-toast-bg: var(--ngxsmk-color-surface-elevated);
116
+ --ngxsmk-toast-accent-width: 3px;
117
+ --ngxsmk-table-border: var(--ngxsmk-color-outline);
118
+ --ngxsmk-table-header-bg: color-mix(in srgb, var(--ngxsmk-color-surface-variant) 55%, transparent);
119
+ --ngxsmk-table-row-hover: var(--ngxsmk-color-surface-hover);
120
+ --ngxsmk-table-stripe: color-mix(in srgb, var(--ngxsmk-color-surface-variant) 35%, transparent);
121
+ --ngxsmk-table-drop-indicator: inset 2px 0 0 var(--ngxsmk-color-primary);
122
+ --ngxsmk-table-cell-padding: 0.625rem 0.75rem;
123
+ --ngxsmk-tabs-indicator: 2px;
124
+ --ngxsmk-tabs-radius: var(--ngxsmk-radius-md);
125
+ --ngxsmk-tabs-gap: var(--ngxsmk-space-1);
126
+ --ngxsmk-select-bg: var(--ngxsmk-color-surface);
127
+ --ngxsmk-select-border: var(--ngxsmk-color-outline-strong);
128
+ --ngxsmk-select-radius: var(--ngxsmk-radius-base);
129
+ --ngxsmk-select-list-shadow: var(--ngxsmk-shadow-lg);
130
+ --ngxsmk-select-list-radius: var(--ngxsmk-radius-lg);
131
+ --ngxsmk-menu-bg: var(--ngxsmk-color-surface-elevated);
132
+ --ngxsmk-menu-radius: var(--ngxsmk-radius-lg);
133
+ --ngxsmk-menu-shadow: var(--ngxsmk-shadow-lg);
134
+ --ngxsmk-menu-border: var(--ngxsmk-color-outline);
135
+ --ngxsmk-menu-item-radius: var(--ngxsmk-radius-md);
136
+ --ngxsmk-pagination-size: 2.25rem;
137
+ --ngxsmk-pagination-radius: var(--ngxsmk-radius-md);
138
+ --ngxsmk-form-field-gap: var(--ngxsmk-space-1-5);
139
+ --ngxsmk-form-field-label-weight: 500;
140
+ --ngxsmk-radio-size: 1.125rem;
141
+ --ngxsmk-radio-dot-size: 0.5rem;
142
+ --ngxsmk-radio-border: var(--ngxsmk-color-outline-strong);
143
+ --ngxsmk-data-table-border: var(--ngxsmk-color-outline);
144
+ --ngxsmk-data-table-radius: var(--ngxsmk-radius-md);
145
+ --ngxsmk-data-table-filter-bg: color-mix(in srgb, var(--ngxsmk-color-surface-variant) 40%, transparent);
146
+ --ngxsmk-data-table-filter-label-size: 0.7rem;
147
+ --ngxsmk-data-table-page-size: 2rem;
148
+ --ngxsmk-data-table-loading-height: 3px;
149
+ --ngxsmk-ai-chat-radius: var(--ngxsmk-radius-xl);
150
+ --ngxsmk-ai-chat-border: var(--ngxsmk-color-outline);
151
+ --ngxsmk-ai-chat-bg: var(--ngxsmk-color-surface);
152
+ --ngxsmk-ai-chat-header-bg: var(--ngxsmk-color-surface-variant);
153
+ --ngxsmk-ai-chat-bubble-bg: var(--ngxsmk-color-surface-variant);
154
+ --ngxsmk-ai-chat-bubble-user-bg: var(--ngxsmk-color-primary);
155
+ --ngxsmk-ai-chat-bubble-radius: var(--ngxsmk-radius-lg);
156
+ --ngxsmk-ai-chat-composer-radius: var(--ngxsmk-radius-full);
157
+ --ngxsmk-prompt-radius: var(--ngxsmk-radius-xl);
158
+ --ngxsmk-prompt-border: var(--ngxsmk-color-outline-strong);
159
+ --ngxsmk-prompt-shadow: var(--ngxsmk-shadow-sm);
160
+ --ngxsmk-prompt-bg: var(--ngxsmk-color-surface);
161
+ --ngxsmk-prompt-send-radius: var(--ngxsmk-radius-full);
162
+ --ngxsmk-chat-bubble-radius: var(--ngxsmk-radius-lg);
163
+ --ngxsmk-chat-bubble-bg: var(--ngxsmk-color-surface-container);
164
+ --ngxsmk-chat-bubble-user-bg: var(--ngxsmk-color-primary-container);
165
+ --ngxsmk-chat-bubble-padding: var(--ngxsmk-space-2) var(--ngxsmk-space-3);
75
166
  --ngxsmk-spreadsheet-bg: var(--ngxsmk-color-surface);
76
167
  --ngxsmk-spreadsheet-header-bg: var(--ngxsmk-color-surface-variant);
77
168
  --ngxsmk-spreadsheet-header-color: var(--ngxsmk-color-on-surface-variant);
@@ -100,15 +191,19 @@
100
191
  --ngxsmk-input-group-radius: var(--ngxsmk-radius-md);
101
192
  --ngxsmk-input-group-shadow: none;
102
193
  --ngxsmk-input-group-focus-border: var(--ngxsmk-color-primary);
103
- --ngxsmk-input-group-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--ngxsmk-color-primary) 15%, transparent);
194
+ --ngxsmk-input-group-focus-shadow: var(--ngxsmk-focus-ring);
104
195
  --ngxsmk-input-group-error-border: var(--ngxsmk-color-error);
105
- --ngxsmk-input-group-error-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--ngxsmk-color-error) 15%, transparent);
196
+ --ngxsmk-input-group-error-focus-shadow: var(--ngxsmk-focus-ring-error);
106
197
  --ngxsmk-input-group-success-border: var(--ngxsmk-color-success);
107
198
  --ngxsmk-input-group-warning-border: var(--ngxsmk-color-warning);
108
- --ngxsmk-input-group-height: 2.5rem;
199
+ --ngxsmk-input-group-height: var(--ngxsmk-control-height);
109
200
  --ngxsmk-input-group-padding: 0.75rem;
110
201
  --ngxsmk-input-group-gap: var(--ngxsmk-space-2);
111
202
  --ngxsmk-input-group-font: var(--ngxsmk-font-sans);
203
+ --ngxsmk-heatmap-level-1: color-mix(in srgb, var(--ngxsmk-color-success) 28%, var(--ngxsmk-color-surface-variant));
204
+ --ngxsmk-heatmap-level-2: color-mix(in srgb, var(--ngxsmk-color-success) 52%, var(--ngxsmk-color-surface-variant));
205
+ --ngxsmk-heatmap-level-3: color-mix(in srgb, var(--ngxsmk-color-success) 76%, var(--ngxsmk-color-surface-variant));
206
+ --ngxsmk-heatmap-level-4: var(--ngxsmk-color-success);
112
207
  --ngxsmk-control-height-sm: 2rem;
113
208
  --ngxsmk-control-height-md: 2.5rem;
114
209
  --ngxsmk-control-height-lg: 3rem;