@dsrc-cm/core 0.1.2 → 0.2.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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dsrc-cm/core",
3
- "version": "0.1.2",
3
+ "version": "0.2.0",
4
4
  "description": "Core CSS components for DSRC - Cameroon State Design System",
5
5
  "main": "dist/dsrc.css",
6
6
  "style": "dist/dsrc.css",
@@ -333,10 +333,249 @@
333
333
  /* ==========================================================================
334
334
  5. COLOR UTILITIES
335
335
  Background and text color using design tokens.
336
+ Convention: .dsrc-text-{name} for color, .dsrc-bg-{name} for background.
336
337
  ========================================================================== */
337
338
 
338
339
  /* --------------------------------------------------------------------------
339
- 5.1 Background color
340
+ 5.1 Semantic text colors
341
+ -------------------------------------------------------------------------- */
342
+
343
+ .dsrc-text-primary { color: var(--dsrc-color-primary) !important; }
344
+ .dsrc-text-white { color: var(--dsrc-color-white) !important; }
345
+ .dsrc-text-black { color: var(--dsrc-color-black) !important; }
346
+ .dsrc-text-secondary { color: var(--dsrc-color-text-secondary) !important; }
347
+ .dsrc-text-disabled { color: var(--dsrc-color-text-disabled) !important; }
348
+ .dsrc-text-inverted { color: var(--dsrc-color-text-inverted) !important; }
349
+ .dsrc-text-success { color: var(--dsrc-color-success-text) !important; }
350
+ .dsrc-text-error { color: var(--dsrc-color-error-text) !important; }
351
+ .dsrc-text-warning { color: var(--dsrc-color-warning-text) !important; }
352
+ .dsrc-text-info { color: var(--dsrc-color-info-text) !important; }
353
+
354
+ /* --------------------------------------------------------------------------
355
+ 5.2 Semantic background colors
356
+ -------------------------------------------------------------------------- */
357
+
358
+ .dsrc-bg-primary { background-color: var(--dsrc-color-primary) !important; }
359
+ .dsrc-bg-white { background-color: var(--dsrc-color-white) !important; }
360
+ .dsrc-bg-black { background-color: var(--dsrc-color-black) !important; }
361
+ .dsrc-bg-background { background-color: var(--dsrc-color-background) !important; }
362
+ .dsrc-bg-surface { background-color: var(--dsrc-color-surface) !important; }
363
+ .dsrc-bg-surface-alt { background-color: var(--dsrc-color-surface-alt) !important; }
364
+ .dsrc-bg-success { background-color: var(--dsrc-color-success-bg) !important; }
365
+ .dsrc-bg-error { background-color: var(--dsrc-color-error-bg) !important; }
366
+ .dsrc-bg-warning { background-color: var(--dsrc-color-warning-bg) !important; }
367
+ .dsrc-bg-info { background-color: var(--dsrc-color-info-bg) !important; }
368
+
369
+ /* --------------------------------------------------------------------------
370
+ 5.3 Green palette
371
+ -------------------------------------------------------------------------- */
372
+
373
+ .dsrc-text-green-50 { color: var(--dsrc-color-green-50) !important; }
374
+ .dsrc-text-green-100 { color: var(--dsrc-color-green-100) !important; }
375
+ .dsrc-text-green-200 { color: var(--dsrc-color-green-200) !important; }
376
+ .dsrc-text-green-300 { color: var(--dsrc-color-green-300) !important; }
377
+ .dsrc-text-green-400 { color: var(--dsrc-color-green-400) !important; }
378
+ .dsrc-text-green-500 { color: var(--dsrc-color-green-500) !important; }
379
+ .dsrc-text-green-600 { color: var(--dsrc-color-green-600) !important; }
380
+ .dsrc-text-green-700 { color: var(--dsrc-color-green-700) !important; }
381
+ .dsrc-text-green-800 { color: var(--dsrc-color-green-800) !important; }
382
+ .dsrc-text-green-900 { color: var(--dsrc-color-green-900) !important; }
383
+
384
+ .dsrc-bg-green-50 { background-color: var(--dsrc-color-green-50) !important; }
385
+ .dsrc-bg-green-100 { background-color: var(--dsrc-color-green-100) !important; }
386
+ .dsrc-bg-green-200 { background-color: var(--dsrc-color-green-200) !important; }
387
+ .dsrc-bg-green-300 { background-color: var(--dsrc-color-green-300) !important; }
388
+ .dsrc-bg-green-400 { background-color: var(--dsrc-color-green-400) !important; }
389
+ .dsrc-bg-green-500 { background-color: var(--dsrc-color-green-500) !important; }
390
+ .dsrc-bg-green-600 { background-color: var(--dsrc-color-green-600) !important; }
391
+ .dsrc-bg-green-700 { background-color: var(--dsrc-color-green-700) !important; }
392
+ .dsrc-bg-green-800 { background-color: var(--dsrc-color-green-800) !important; }
393
+ .dsrc-bg-green-900 { background-color: var(--dsrc-color-green-900) !important; }
394
+
395
+ /* --------------------------------------------------------------------------
396
+ 5.4 Red palette
397
+ -------------------------------------------------------------------------- */
398
+
399
+ .dsrc-text-red-50 { color: var(--dsrc-color-red-50) !important; }
400
+ .dsrc-text-red-100 { color: var(--dsrc-color-red-100) !important; }
401
+ .dsrc-text-red-200 { color: var(--dsrc-color-red-200) !important; }
402
+ .dsrc-text-red-300 { color: var(--dsrc-color-red-300) !important; }
403
+ .dsrc-text-red-400 { color: var(--dsrc-color-red-400) !important; }
404
+ .dsrc-text-red-500 { color: var(--dsrc-color-red-500) !important; }
405
+ .dsrc-text-red-600 { color: var(--dsrc-color-red-600) !important; }
406
+ .dsrc-text-red-700 { color: var(--dsrc-color-red-700) !important; }
407
+ .dsrc-text-red-800 { color: var(--dsrc-color-red-800) !important; }
408
+ .dsrc-text-red-900 { color: var(--dsrc-color-red-900) !important; }
409
+
410
+ .dsrc-bg-red-50 { background-color: var(--dsrc-color-red-50) !important; }
411
+ .dsrc-bg-red-100 { background-color: var(--dsrc-color-red-100) !important; }
412
+ .dsrc-bg-red-200 { background-color: var(--dsrc-color-red-200) !important; }
413
+ .dsrc-bg-red-300 { background-color: var(--dsrc-color-red-300) !important; }
414
+ .dsrc-bg-red-400 { background-color: var(--dsrc-color-red-400) !important; }
415
+ .dsrc-bg-red-500 { background-color: var(--dsrc-color-red-500) !important; }
416
+ .dsrc-bg-red-600 { background-color: var(--dsrc-color-red-600) !important; }
417
+ .dsrc-bg-red-700 { background-color: var(--dsrc-color-red-700) !important; }
418
+ .dsrc-bg-red-800 { background-color: var(--dsrc-color-red-800) !important; }
419
+ .dsrc-bg-red-900 { background-color: var(--dsrc-color-red-900) !important; }
420
+
421
+ /* --------------------------------------------------------------------------
422
+ 5.5 Yellow palette
423
+ -------------------------------------------------------------------------- */
424
+
425
+ .dsrc-text-yellow-50 { color: var(--dsrc-color-yellow-50) !important; }
426
+ .dsrc-text-yellow-100 { color: var(--dsrc-color-yellow-100) !important; }
427
+ .dsrc-text-yellow-200 { color: var(--dsrc-color-yellow-200) !important; }
428
+ .dsrc-text-yellow-300 { color: var(--dsrc-color-yellow-300) !important; }
429
+ .dsrc-text-yellow-400 { color: var(--dsrc-color-yellow-400) !important; }
430
+ .dsrc-text-yellow-500 { color: var(--dsrc-color-yellow-500) !important; }
431
+ .dsrc-text-yellow-600 { color: var(--dsrc-color-yellow-600) !important; }
432
+ .dsrc-text-yellow-700 { color: var(--dsrc-color-yellow-700) !important; }
433
+ .dsrc-text-yellow-800 { color: var(--dsrc-color-yellow-800) !important; }
434
+ .dsrc-text-yellow-900 { color: var(--dsrc-color-yellow-900) !important; }
435
+
436
+ .dsrc-bg-yellow-50 { background-color: var(--dsrc-color-yellow-50) !important; }
437
+ .dsrc-bg-yellow-100 { background-color: var(--dsrc-color-yellow-100) !important; }
438
+ .dsrc-bg-yellow-200 { background-color: var(--dsrc-color-yellow-200) !important; }
439
+ .dsrc-bg-yellow-300 { background-color: var(--dsrc-color-yellow-300) !important; }
440
+ .dsrc-bg-yellow-400 { background-color: var(--dsrc-color-yellow-400) !important; }
441
+ .dsrc-bg-yellow-500 { background-color: var(--dsrc-color-yellow-500) !important; }
442
+ .dsrc-bg-yellow-600 { background-color: var(--dsrc-color-yellow-600) !important; }
443
+ .dsrc-bg-yellow-700 { background-color: var(--dsrc-color-yellow-700) !important; }
444
+ .dsrc-bg-yellow-800 { background-color: var(--dsrc-color-yellow-800) !important; }
445
+ .dsrc-bg-yellow-900 { background-color: var(--dsrc-color-yellow-900) !important; }
446
+
447
+ /* --------------------------------------------------------------------------
448
+ 5.6 Blue palette
449
+ -------------------------------------------------------------------------- */
450
+
451
+ .dsrc-text-blue-50 { color: var(--dsrc-color-blue-50) !important; }
452
+ .dsrc-text-blue-100 { color: var(--dsrc-color-blue-100) !important; }
453
+ .dsrc-text-blue-200 { color: var(--dsrc-color-blue-200) !important; }
454
+ .dsrc-text-blue-300 { color: var(--dsrc-color-blue-300) !important; }
455
+ .dsrc-text-blue-400 { color: var(--dsrc-color-blue-400) !important; }
456
+ .dsrc-text-blue-500 { color: var(--dsrc-color-blue-500) !important; }
457
+ .dsrc-text-blue-600 { color: var(--dsrc-color-blue-600) !important; }
458
+ .dsrc-text-blue-700 { color: var(--dsrc-color-blue-700) !important; }
459
+ .dsrc-text-blue-800 { color: var(--dsrc-color-blue-800) !important; }
460
+ .dsrc-text-blue-900 { color: var(--dsrc-color-blue-900) !important; }
461
+
462
+ .dsrc-bg-blue-50 { background-color: var(--dsrc-color-blue-50) !important; }
463
+ .dsrc-bg-blue-100 { background-color: var(--dsrc-color-blue-100) !important; }
464
+ .dsrc-bg-blue-200 { background-color: var(--dsrc-color-blue-200) !important; }
465
+ .dsrc-bg-blue-300 { background-color: var(--dsrc-color-blue-300) !important; }
466
+ .dsrc-bg-blue-400 { background-color: var(--dsrc-color-blue-400) !important; }
467
+ .dsrc-bg-blue-500 { background-color: var(--dsrc-color-blue-500) !important; }
468
+ .dsrc-bg-blue-600 { background-color: var(--dsrc-color-blue-600) !important; }
469
+ .dsrc-bg-blue-700 { background-color: var(--dsrc-color-blue-700) !important; }
470
+ .dsrc-bg-blue-800 { background-color: var(--dsrc-color-blue-800) !important; }
471
+ .dsrc-bg-blue-900 { background-color: var(--dsrc-color-blue-900) !important; }
472
+
473
+ /* --------------------------------------------------------------------------
474
+ 5.7 Gray palette
475
+ -------------------------------------------------------------------------- */
476
+
477
+ .dsrc-text-gray-50 { color: var(--dsrc-color-gray-50) !important; }
478
+ .dsrc-text-gray-100 { color: var(--dsrc-color-gray-100) !important; }
479
+ .dsrc-text-gray-200 { color: var(--dsrc-color-gray-200) !important; }
480
+ .dsrc-text-gray-300 { color: var(--dsrc-color-gray-300) !important; }
481
+ .dsrc-text-gray-400 { color: var(--dsrc-color-gray-400) !important; }
482
+ .dsrc-text-gray-500 { color: var(--dsrc-color-gray-500) !important; }
483
+ .dsrc-text-gray-600 { color: var(--dsrc-color-gray-600) !important; }
484
+ .dsrc-text-gray-700 { color: var(--dsrc-color-gray-700) !important; }
485
+ .dsrc-text-gray-800 { color: var(--dsrc-color-gray-800) !important; }
486
+ .dsrc-text-gray-900 { color: var(--dsrc-color-gray-900) !important; }
487
+
488
+ .dsrc-bg-gray-50 { background-color: var(--dsrc-color-gray-50) !important; }
489
+ .dsrc-bg-gray-100 { background-color: var(--dsrc-color-gray-100) !important; }
490
+ .dsrc-bg-gray-200 { background-color: var(--dsrc-color-gray-200) !important; }
491
+ .dsrc-bg-gray-300 { background-color: var(--dsrc-color-gray-300) !important; }
492
+ .dsrc-bg-gray-400 { background-color: var(--dsrc-color-gray-400) !important; }
493
+ .dsrc-bg-gray-500 { background-color: var(--dsrc-color-gray-500) !important; }
494
+ .dsrc-bg-gray-600 { background-color: var(--dsrc-color-gray-600) !important; }
495
+ .dsrc-bg-gray-700 { background-color: var(--dsrc-color-gray-700) !important; }
496
+ .dsrc-bg-gray-800 { background-color: var(--dsrc-color-gray-800) !important; }
497
+ .dsrc-bg-gray-900 { background-color: var(--dsrc-color-gray-900) !important; }
498
+
499
+ /* --------------------------------------------------------------------------
500
+ 5.8 Purple palette
501
+ -------------------------------------------------------------------------- */
502
+
503
+ .dsrc-text-purple-50 { color: var(--dsrc-color-purple-50) !important; }
504
+ .dsrc-text-purple-100 { color: var(--dsrc-color-purple-100) !important; }
505
+ .dsrc-text-purple-200 { color: var(--dsrc-color-purple-200) !important; }
506
+ .dsrc-text-purple-300 { color: var(--dsrc-color-purple-300) !important; }
507
+ .dsrc-text-purple-400 { color: var(--dsrc-color-purple-400) !important; }
508
+ .dsrc-text-purple-500 { color: var(--dsrc-color-purple-500) !important; }
509
+ .dsrc-text-purple-600 { color: var(--dsrc-color-purple-600) !important; }
510
+ .dsrc-text-purple-700 { color: var(--dsrc-color-purple-700) !important; }
511
+ .dsrc-text-purple-800 { color: var(--dsrc-color-purple-800) !important; }
512
+ .dsrc-text-purple-900 { color: var(--dsrc-color-purple-900) !important; }
513
+
514
+ .dsrc-bg-purple-50 { background-color: var(--dsrc-color-purple-50) !important; }
515
+ .dsrc-bg-purple-100 { background-color: var(--dsrc-color-purple-100) !important; }
516
+ .dsrc-bg-purple-200 { background-color: var(--dsrc-color-purple-200) !important; }
517
+ .dsrc-bg-purple-300 { background-color: var(--dsrc-color-purple-300) !important; }
518
+ .dsrc-bg-purple-400 { background-color: var(--dsrc-color-purple-400) !important; }
519
+ .dsrc-bg-purple-500 { background-color: var(--dsrc-color-purple-500) !important; }
520
+ .dsrc-bg-purple-600 { background-color: var(--dsrc-color-purple-600) !important; }
521
+ .dsrc-bg-purple-700 { background-color: var(--dsrc-color-purple-700) !important; }
522
+ .dsrc-bg-purple-800 { background-color: var(--dsrc-color-purple-800) !important; }
523
+ .dsrc-bg-purple-900 { background-color: var(--dsrc-color-purple-900) !important; }
524
+
525
+ /* --------------------------------------------------------------------------
526
+ 5.9 Teal palette
527
+ -------------------------------------------------------------------------- */
528
+
529
+ .dsrc-text-teal-50 { color: var(--dsrc-color-teal-50) !important; }
530
+ .dsrc-text-teal-100 { color: var(--dsrc-color-teal-100) !important; }
531
+ .dsrc-text-teal-200 { color: var(--dsrc-color-teal-200) !important; }
532
+ .dsrc-text-teal-300 { color: var(--dsrc-color-teal-300) !important; }
533
+ .dsrc-text-teal-400 { color: var(--dsrc-color-teal-400) !important; }
534
+ .dsrc-text-teal-500 { color: var(--dsrc-color-teal-500) !important; }
535
+ .dsrc-text-teal-600 { color: var(--dsrc-color-teal-600) !important; }
536
+ .dsrc-text-teal-700 { color: var(--dsrc-color-teal-700) !important; }
537
+ .dsrc-text-teal-800 { color: var(--dsrc-color-teal-800) !important; }
538
+ .dsrc-text-teal-900 { color: var(--dsrc-color-teal-900) !important; }
539
+
540
+ .dsrc-bg-teal-50 { background-color: var(--dsrc-color-teal-50) !important; }
541
+ .dsrc-bg-teal-100 { background-color: var(--dsrc-color-teal-100) !important; }
542
+ .dsrc-bg-teal-200 { background-color: var(--dsrc-color-teal-200) !important; }
543
+ .dsrc-bg-teal-300 { background-color: var(--dsrc-color-teal-300) !important; }
544
+ .dsrc-bg-teal-400 { background-color: var(--dsrc-color-teal-400) !important; }
545
+ .dsrc-bg-teal-500 { background-color: var(--dsrc-color-teal-500) !important; }
546
+ .dsrc-bg-teal-600 { background-color: var(--dsrc-color-teal-600) !important; }
547
+ .dsrc-bg-teal-700 { background-color: var(--dsrc-color-teal-700) !important; }
548
+ .dsrc-bg-teal-800 { background-color: var(--dsrc-color-teal-800) !important; }
549
+ .dsrc-bg-teal-900 { background-color: var(--dsrc-color-teal-900) !important; }
550
+
551
+ /* --------------------------------------------------------------------------
552
+ 5.10 Orange palette
553
+ -------------------------------------------------------------------------- */
554
+
555
+ .dsrc-text-orange-50 { color: var(--dsrc-color-orange-50) !important; }
556
+ .dsrc-text-orange-100 { color: var(--dsrc-color-orange-100) !important; }
557
+ .dsrc-text-orange-200 { color: var(--dsrc-color-orange-200) !important; }
558
+ .dsrc-text-orange-300 { color: var(--dsrc-color-orange-300) !important; }
559
+ .dsrc-text-orange-400 { color: var(--dsrc-color-orange-400) !important; }
560
+ .dsrc-text-orange-500 { color: var(--dsrc-color-orange-500) !important; }
561
+ .dsrc-text-orange-600 { color: var(--dsrc-color-orange-600) !important; }
562
+ .dsrc-text-orange-700 { color: var(--dsrc-color-orange-700) !important; }
563
+ .dsrc-text-orange-800 { color: var(--dsrc-color-orange-800) !important; }
564
+ .dsrc-text-orange-900 { color: var(--dsrc-color-orange-900) !important; }
565
+
566
+ .dsrc-bg-orange-50 { background-color: var(--dsrc-color-orange-50) !important; }
567
+ .dsrc-bg-orange-100 { background-color: var(--dsrc-color-orange-100) !important; }
568
+ .dsrc-bg-orange-200 { background-color: var(--dsrc-color-orange-200) !important; }
569
+ .dsrc-bg-orange-300 { background-color: var(--dsrc-color-orange-300) !important; }
570
+ .dsrc-bg-orange-400 { background-color: var(--dsrc-color-orange-400) !important; }
571
+ .dsrc-bg-orange-500 { background-color: var(--dsrc-color-orange-500) !important; }
572
+ .dsrc-bg-orange-600 { background-color: var(--dsrc-color-orange-600) !important; }
573
+ .dsrc-bg-orange-700 { background-color: var(--dsrc-color-orange-700) !important; }
574
+ .dsrc-bg-orange-800 { background-color: var(--dsrc-color-orange-800) !important; }
575
+ .dsrc-bg-orange-900 { background-color: var(--dsrc-color-orange-900) !important; }
576
+
577
+ /* --------------------------------------------------------------------------
578
+ 5.11 Legacy French aliases (backward compatibility)
340
579
  -------------------------------------------------------------------------- */
341
580
 
342
581
  .dsrc-bg-primaire { background-color: var(--dsrc-color-primaire) !important; }
@@ -344,10 +583,6 @@
344
583
  .dsrc-bg-gris-50 { background-color: var(--dsrc-color-gris-50) !important; }
345
584
  .dsrc-bg-gris-100 { background-color: var(--dsrc-color-gris-100) !important; }
346
585
 
347
- /* --------------------------------------------------------------------------
348
- 5.2 Text color
349
- -------------------------------------------------------------------------- */
350
-
351
586
  .dsrc-text-primaire { color: var(--dsrc-color-primaire) !important; }
352
587
  .dsrc-text-noir { color: var(--dsrc-color-noir) !important; }
353
588
  .dsrc-text-gris-600 { color: var(--dsrc-color-gris-600) !important; }