@kksdev/ds-angular 1.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 (13) hide show
  1. package/README.md +63 -0
  2. package/fesm2022/kksdev-ds-angular.mjs +7800 -0
  3. package/fesm2022/kksdev-ds-angular.mjs.map +1 -0
  4. package/index.d.ts +4559 -0
  5. package/package.json +54 -0
  6. package/src/styles/_index.scss +22 -0
  7. package/src/styles/storybook.scss +45 -0
  8. package/src/styles/themes/_custom.scss +393 -0
  9. package/src/styles/themes/_dark.scss +415 -0
  10. package/src/styles/themes/_light.scss +405 -0
  11. package/src/styles/tokens/_primitives.scss +140 -0
  12. package/src/styles/tokens/_semantic.scss +363 -0
  13. package/src/styles/tokens/_tokens.scss +439 -0
package/src/styles/themes/_dark.scss ADDED
@@ -0,0 +1,415 @@
1
+ :root.theme-dark {
2
+ /* ==========================================================================
3
+ * BACKGROUNDS
4
+ * ======================================================================== */
5
+ --background-main: var(--gray-900);
6
+ --background-secondary: var(--gray-800);
7
+ --background-header: var(--gray-700);
8
+ --background-panel: var(--surface-default, var(--gray-800));
9
+ --background-panel-hover: var(--surface-hover);
10
+ --bg-disabled: color-mix(in oklab, var(--gray-700) 70%, var(--background-main));
11
+
12
+ /* ==========================================================================
13
+ * TEXT
14
+ * ======================================================================== */
15
+ --text-default: var(--gray-50);
16
+ --text-muted: var(--gray-300);
17
+ --text-disabled: var(--gray-500);
18
+ --text-disabled-alt: var(--gray-400);
19
+ --text-subtle: var(--gray-400);
20
+
21
+ /* ==========================================================================
22
+ * LINKS & SELECTIONS
23
+ * ======================================================================== */
24
+ --link: var(--role-secondary);
25
+ --link-hover: color-mix(in oklab, var(--role-secondary) 85%, var(--background-main));
26
+ --selection-bg: color-mix(in oklab, var(--role-secondary) 35%, transparent);
27
+ --selection-text: var(--text-default);
28
+
29
+ /* ==========================================================================
30
+ * BORDERS
31
+ * ======================================================================== */
32
+ --border-color: var(--gray-700);
33
+ --border-subtle: var(--gray-600);
34
+ --border-strong: var(--gray-400);
35
+ --border-default: var(--border-color);
36
+ /* Feedback border variants */
37
+ --border-success: var(--success);
38
+ --border-warning: var(--warning);
39
+ --border-error: var(--error);
40
+ --border-info: var(--info);
41
+ --border-disabled: var(--gray-700);
42
+
43
+ /* ==========================================================================
44
+ * ROLES (override light)
45
+ * ======================================================================== */
46
+ --role-primary: var(--brand-secondary); /* jaune devient primary */
47
+ --role-secondary: var(--brand-primary); /* violet devient secondary */
48
+
49
+ /* ==========================================================================
50
+ * ACCENT & STATE
51
+ * ======================================================================== */
52
+ --accent: var(--role-secondary);
53
+ --accent-alt: var(--role-primary);
54
+ --accent-warn: var(--role-primary);
55
+
56
+ /* ==========================================================================
57
+ * SURFACES
58
+ * ======================================================================== */
59
+ --surface-default: var(--gray-800);
60
+ --surface-raised: var(--gray-700);
61
+ --surface-hover: color-mix(in oklab, var(--gray-700) 85%, var(--gray-800));
62
+ --surface-overlay: color-mix(in oklab, var(--gray-900) 80%, transparent);
63
+
64
+ /* ==========================================================================
65
+ * FEEDBACK (bg + text)
66
+ * ======================================================================== */
67
+ /* Feedback backgrounds */
68
+ --bg-success: color-mix(in oklab, var(--success) 15%, var(--background-main));
69
+ --bg-warning: color-mix(in oklab, var(--warning) 20%, var(--background-main));
70
+ --bg-error: color-mix(in oklab, var(--error) 20%, var(--background-main));
71
+ --bg-info: color-mix(in oklab, var(--info) 20%, var(--background-main));
72
+ /* Feedback text */
73
+ --text-success: var(--success);
74
+ --text-warning: var(--warning);
75
+ --text-error: var(--error);
76
+ --text-info: var(--info);
77
+
78
+ /* ==========================================================================
79
+ * EFFECTS (scrollbar, hover, focus)
80
+ * ======================================================================== */
81
+ --scrollbar-thumb: var(--border-color);
82
+ --scrollbar-thumb-hover: var(--accent);
83
+ --hover-bg: color-mix(in oklab, var(--accent) 12%, transparent);
84
+ --focus-ring: 0 0 0 2px var(--focus-color);
85
+
86
+ /* ==========================================================================
87
+ * SÉMANTIQUES DS BUTTON
88
+ * ======================================================================== */
89
+ /* Primary */
90
+ --btn-primary-bg: var(--color-primary);
91
+ --btn-primary-text: var(--gray-900);
92
+ --btn-primary-border: transparent;
93
+ --btn-primary-hover-bg: color-mix(in oklab, var(--color-primary) 85%, var(--background-main));
94
+ --btn-primary-hover-text: var(--gray-900);
95
+ --btn-primary-hover-border: transparent;
96
+ --btn-primary-disabled-bg: var(--bg-disabled);
97
+ --btn-primary-disabled-text: var(--text-disabled);
98
+ --btn-primary-disabled-border: var(--border-disabled);
99
+
100
+ /* Secondary */
101
+ --btn-secondary-bg: var(--color-secondary);
102
+ --btn-secondary-text: var(--text-default);
103
+ --btn-secondary-border: var(--border-color);
104
+ --btn-secondary-hover-bg: color-mix(in oklab, var(--color-secondary) 90%, var(--background-main));
105
+ --btn-secondary-hover-text: var(--text-default);
106
+ --btn-secondary-hover-border: var(--border-color);
107
+ --btn-secondary-disabled-bg: var(--bg-disabled);
108
+ --btn-secondary-disabled-text: var(--text-disabled);
109
+ --btn-secondary-disabled-border: var(--border-disabled);
110
+
111
+ /* Ghost */
112
+ --btn-ghost-bg: transparent;
113
+ --btn-ghost-text: var(--text-default);
114
+ --btn-ghost-border: transparent;
115
+ --btn-ghost-hover-bg: var(--hover-bg);
116
+ --btn-ghost-hover-text: var(--text-default);
117
+ --btn-ghost-hover-border: var(--border-color);
118
+ --btn-ghost-disabled-bg: transparent;
119
+ --btn-ghost-disabled-text: var(--text-disabled);
120
+
121
+ /* Success */
122
+ --btn-success-bg: var(--success);
123
+ --btn-success-text: var(--gray-50);
124
+ --btn-success-border: transparent;
125
+ --btn-success-hover-bg: color-mix(in oklab, var(--success) 70%, var(--background-main));
126
+ --btn-success-hover-text: var(--gray-50);
127
+ --btn-success-hover-border: transparent;
128
+ --btn-success-disabled-bg: var(--bg-disabled);
129
+ --btn-success-disabled-text: var(--text-disabled);
130
+ --btn-success-disabled-border: var(--border-disabled);
131
+
132
+ /* Warning */
133
+ --btn-warning-bg: var(--warning);
134
+ --btn-warning-text: var(--gray-900);
135
+ --btn-warning-border: transparent;
136
+ --btn-warning-hover-bg: color-mix(in oklab, var(--warning) 90%, white);
137
+ --btn-warning-hover-text: var(--gray-900);
138
+ --btn-warning-hover-border: transparent;
139
+ --btn-warning-disabled-bg: var(--bg-disabled);
140
+ --btn-warning-disabled-text: var(--text-disabled);
141
+ --btn-warning-disabled-border: var(--border-disabled);
142
+
143
+ /* Error */
144
+ --btn-error-bg: var(--error);
145
+ --btn-error-text: var(--gray-50);
146
+ --btn-error-border: transparent;
147
+ --btn-error-hover-bg: color-mix(in oklab, var(--error) 70%, var(--background-main));
148
+ --btn-error-hover-text: var(--gray-50);
149
+ --btn-error-hover-border: transparent;
150
+ --btn-error-disabled-bg: var(--bg-disabled);
151
+ --btn-error-disabled-text: var(--text-disabled);
152
+ --btn-error-disabled-border: var(--border-disabled);
153
+
154
+ /* Info */
155
+ --btn-info-bg: var(--info);
156
+ --btn-info-text: var(--gray-50);
157
+ --btn-info-border: transparent;
158
+ --btn-info-hover-bg: color-mix(in oklab, var(--info) 90%, white);
159
+ --btn-info-hover-text: var(--gray-50);
160
+ --btn-info-hover-border: transparent;
161
+ --btn-info-disabled-bg: var(--bg-disabled);
162
+ --btn-info-disabled-text: var(--text-disabled);
163
+ --btn-info-disabled-border: var(--border-disabled);
164
+
165
+ /* Focus */
166
+ --btn-focus-outline: var(--accent);
167
+
168
+ /* Spinner */
169
+ --spinner-size: 1em;
170
+ --spinner-border: rgba(255, 255, 255, 0.6);
171
+ --spinner-border-active: currentColor;
172
+
173
+ /* ==========================================================================
174
+ * SÉMANTIQUES DS INPUT FIELDS
175
+ * ======================================================================== */
176
+
177
+ /* Background */
178
+ --input-bg: var(--gray-800);
179
+ --input-disabled-bg: var(--gray-700);
180
+
181
+ /* Text */
182
+ --input-text: var(--gray-50);
183
+ --input-placeholder: var(--gray-400);
184
+ --input-disabled-text: var(--gray-500);
185
+
186
+ /* Borders */
187
+ --input-border-color: var(--gray-700);
188
+ --input-hover-border: color-mix(in oklab, var(--gray-600) 65%, var(--background-main));
189
+ --input-focus-border: var(--focus-color);
190
+ --input-focus-shadow: 0 0 0 3px color-mix(in oklab, var(--focus-color) 35%, transparent);
191
+ --input-icon: var(--gray-400);
192
+
193
+ /* Layout */
194
+ --input-label-text-color: var(--text-muted);
195
+ --input-label-color: var(--input-label-text-color);
196
+
197
+ /* States */
198
+ --input-error: var(--error);
199
+ --input-success: var(--success);
200
+ --input-warning: var(--warning);
201
+ --input-error-border: var(--error);
202
+ --input-success-border: var(--success);
203
+ --input-warning-border: var(--warning);
204
+
205
+ /* ==========================================================================
206
+ * SÉMANTIQUES DS MODALS
207
+ * ======================================================================== */
208
+ --modal-text: var(--text-default);
209
+ --modal-border-color: var(--border-color);
210
+ --modal-backdrop: color-mix(in oklab, var(--gray-900) 60%, transparent);
211
+ --modal-bg: var(--background-main);
212
+ --modal-divider: var(--border-subtle);
213
+ --modal-footer-shadow: inset 0 1px 0 var(--modal-divider);
214
+ --modal-type-success-color: var(--success);
215
+ --modal-type-success-contrast: var(--gray-900);
216
+ --modal-type-warning-color: var(--warning);
217
+ --modal-type-warning-contrast: var(--gray-900);
218
+ --modal-type-error-color: var(--error);
219
+ --modal-type-error-contrast: var(--gray-50);
220
+ --modal-type-info-color: var(--info);
221
+ --modal-type-info-contrast: var(--gray-50);
222
+
223
+ /* ==========================================================================
224
+ * SÉMANTIQUES DS DROPDOWN
225
+ * ======================================================================== */
226
+ --dropdown-bg: var(--surface-default);
227
+ --dropdown-border-color: var(--border-color);
228
+ --dropdown-backdrop: color-mix(in oklab, var(--gray-900) 50%, transparent);
229
+ --dropdown-item-color: var(--text-muted);
230
+ --dropdown-item-hover-bg: var(--surface-hover);
231
+ --dropdown-item-hover-color: var(--text-default);
232
+ --dropdown-item-active-bg: var(--color-primary);
233
+ --dropdown-item-active-color: var(--gray-900);
234
+ --dropdown-separator: var(--border-subtle);
235
+
236
+ /* ==========================================================================
237
+ * SÉMANTIQUES DS BADGES
238
+ * ======================================================================== */
239
+ --badge-bg: var(--accent);
240
+ --badge-text: var(--text-default);
241
+ --badge-bg-secondary: var(--accent-alt);
242
+ --badge-text-secondary: var(--text-default);
243
+ --badge-bg-muted: var(--surface-raised);
244
+ --badge-text-muted: var(--text-muted);
245
+
246
+ /* Badge variables by type */
247
+ --badge-default-bg: var(--gray-600);
248
+ --badge-default-text: var(--gray-50);
249
+
250
+ --badge-primary-bg: var(--color-primary);
251
+ --badge-primary-text: var(--badge-default-text);
252
+
253
+ --badge-secondary-bg: var(--color-secondary);
254
+ --badge-secondary-text: var(--badge-default-text);
255
+
256
+ --badge-success-bg: var(--success);
257
+ --badge-success-text: var(--gray-50);
258
+
259
+ --badge-warning-bg: var(--warning);
260
+ --badge-warning-text: var(--gray-900);
261
+ --badge-warning-outline-text: var(--gray-50);
262
+
263
+ --badge-error-bg: var(--error);
264
+ --badge-error-text: var(--gray-50);
265
+
266
+ --badge-info-bg: var(--info);
267
+ --badge-info-text: var(--gray-50);
268
+
269
+ --badge-neutral-bg: var(--gray-500);
270
+ --badge-neutral-text: var(--gray-100);
271
+
272
+ --badge-accent-bg: var(--color-alt);
273
+ --badge-accent-text: var(--gray-50);
274
+
275
+ /* ==========================================================================
276
+ * SÉMANTIQUES DS TOASTS
277
+ * ======================================================================== */
278
+ --toast-bg: var(--surface-default);
279
+ --toast-text: var(--text-default);
280
+ --toast-border: var(--border-color);
281
+
282
+ --toast-success-bg: var(--bg-success);
283
+ --toast-success-text: var(--text-success);
284
+ --toast-success-border: var(--success);
285
+ --toast-warning-bg: var(--bg-warning);
286
+ --toast-warning-text: var(--text-warning);
287
+ --toast-warning-border: var(--warning);
288
+ --toast-error-bg: var(--bg-error);
289
+ --toast-error-text: var(--text-error);
290
+ --toast-error-border: var(--error);
291
+ --toast-info-bg: var(--bg-info);
292
+ --toast-info-text: var(--text-info);
293
+ --toast-info-border: var(--info);
294
+
295
+ /* ==========================================================================
296
+ * SÉMANTIQUES DS CHECKBOX
297
+ * ======================================================================== */
298
+ --checkbox-bg: var(--gray-800);
299
+ --checkbox-border: var(--gray-600);
300
+ --checkbox-checked-bg: var(--color-primary);
301
+ --checkbox-checked-border: var(--color-primary);
302
+ --checkbox-check-color: var(--gray-900);
303
+ --checkbox-hover-border: var(--gray-500);
304
+ --checkbox-focus-ring: 0 0 0 3px color-mix(in oklab, var(--color-primary) 35%, transparent);
305
+ --checkbox-disabled-bg: var(--gray-900);
306
+ --checkbox-disabled-border: var(--gray-700);
307
+ --checkbox-disabled-check: var(--gray-600);
308
+ --checkbox-indeterminate-bg: var(--color-primary);
309
+ --checkbox-indeterminate-border: var(--color-primary);
310
+
311
+ /* ==========================================================================
312
+ * SÉMANTIQUES DS RADIO
313
+ * ======================================================================== */
314
+ --radio-bg: var(--gray-800);
315
+ --radio-border: var(--gray-600);
316
+ --radio-checked-bg: var(--gray-800);
317
+ --radio-checked-border: var(--color-primary);
318
+ --radio-dot-color: var(--color-primary);
319
+ --radio-hover-border: var(--gray-500);
320
+ --radio-focus-ring: 0 0 0 3px color-mix(in oklab, var(--color-primary) 35%, transparent);
321
+ --radio-disabled-bg: var(--gray-900);
322
+ --radio-disabled-border: var(--gray-700);
323
+ --radio-disabled-dot: var(--gray-600);
324
+
325
+ /* ==========================================================================
326
+ * SÉMANTIQUES DS TOGGLE
327
+ * ======================================================================== */
328
+ --toggle-track-bg: var(--gray-700);
329
+ --toggle-track-checked-bg: var(--color-primary);
330
+ --toggle-thumb-bg: var(--gray-200);
331
+ --toggle-thumb-shadow: var(--shadow-2);
332
+ --toggle-hover-track-bg: var(--gray-600);
333
+ --toggle-hover-track-checked-bg: color-mix(in oklab, var(--color-primary) 90%, var(--background-main));
334
+ --toggle-focus-ring: 0 0 0 3px color-mix(in oklab, var(--color-primary) 35%, transparent);
335
+ --toggle-disabled-track-bg: var(--gray-900);
336
+ --toggle-disabled-thumb-bg: var(--gray-700);
337
+
338
+ /* ==========================================================================
339
+ * SÉMANTIQUES DS BREADCRUMB
340
+ * ======================================================================== */
341
+ --breadcrumb-link: var(--gray-400);
342
+ --breadcrumb-link-hover: var(--gray-100);
343
+ --breadcrumb-active: var(--gray-100);
344
+ --breadcrumb-separator-color: var(--gray-500);
345
+
346
+ /* ==========================================================================
347
+ * SÉMANTIQUES DS TABS
348
+ * ======================================================================== */
349
+ --tab-bg: transparent;
350
+ --tab-text: var(--gray-400);
351
+ --tab-hover-bg: var(--gray-800);
352
+ --tab-hover-text: var(--gray-100);
353
+ --tab-active-bg: transparent;
354
+ --tab-active-text: var(--gray-100);
355
+ --tab-active-border: var(--color-primary);
356
+ --tab-border: var(--gray-700);
357
+ --tab-disabled-text: var(--gray-600);
358
+
359
+ /* ==========================================================================
360
+ * SÉMANTIQUES DS TOOLTIP
361
+ * ======================================================================== */
362
+ --tooltip-bg: var(--gray-200);
363
+ --tooltip-text: var(--gray-900);
364
+ --tooltip-shadow: var(--shadow-3);
365
+
366
+ /* ==========================================================================
367
+ * SÉMANTIQUES DS POPOVER
368
+ * ======================================================================== */
369
+ --popover-bg: var(--gray-800);
370
+ --popover-text: var(--gray-100);
371
+ --popover-border: var(--gray-600);
372
+ --popover-header-bg: var(--gray-700);
373
+ --popover-header-border: var(--gray-700);
374
+ --popover-backdrop: color-mix(in oklab, var(--gray-900) 40%, transparent);
375
+
376
+ /* ==========================================================================
377
+ * SÉMANTIQUES DS PAGINATION
378
+ * ======================================================================== */
379
+ --pagination-btn-bg: var(--gray-800);
380
+ --pagination-btn-text: var(--gray-100);
381
+ --pagination-btn-border: var(--gray-600);
382
+ --pagination-btn-hover-bg: var(--gray-700);
383
+ --pagination-btn-hover-border: var(--color-primary);
384
+ --pagination-btn-focus-border: var(--color-primary);
385
+ --pagination-active-bg: var(--color-primary);
386
+ --pagination-active-text: var(--gray-900);
387
+ --pagination-active-hover-bg: color-mix(in oklab, var(--color-primary) 85%, var(--background-main));
388
+ --pagination-info-color: var(--gray-400);
389
+
390
+ /* ==========================================================================
391
+ * SÉMANTIQUES DS STEPPER
392
+ * ======================================================================== */
393
+ --stepper-pending-bg: var(--gray-700);
394
+ --stepper-pending-text: var(--gray-400);
395
+ --stepper-pending-border: var(--gray-600);
396
+ --stepper-active-bg: var(--color-primary);
397
+ --stepper-active-text: var(--gray-900);
398
+ --stepper-completed-bg: var(--success);
399
+ --stepper-completed-text: var(--gray-900);
400
+ --stepper-error-bg: var(--error);
401
+ --stepper-error-text: var(--gray-50);
402
+ --stepper-connector-color: var(--gray-600);
403
+
404
+ /* ==========================================================================
405
+ * SÉMANTIQUES DS ACCORDION
406
+ * ======================================================================== */
407
+ --accordion-header-bg: var(--gray-800);
408
+ --accordion-header-hover-bg: var(--gray-700);
409
+ --accordion-header-text: var(--gray-100);
410
+ --accordion-body-text: var(--gray-300);
411
+ --accordion-border-color: var(--gray-600);
412
+ --accordion-icon-color: var(--gray-400);
413
+ --accordion-focus-color: var(--color-primary);
414
+ --accordion-expanded-border-color: var(--color-primary);
415
+ }