@maboussoleaidant/design-system 0.1.14 → 0.1.16

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 (10) hide show
  1. package/dist/mba-design-system.css +56 -22
  2. package/dist/mba-design-system.css.map +1 -1
  3. package/dist/mba-design-system.min.css +1 -1
  4. package/dist/mba-tailwind.css +58 -22
  5. package/dist/mba-tailwind.css.map +1 -1
  6. package/dist/mba-tailwind.min.css +1 -1
  7. package/dist/mba-tokens-only.css +11 -0
  8. package/dist/mba-tokens-only.css.map +1 -1
  9. package/package.json +1 -1
  10. package/src/tokens/_shadows.css +11 -0
package/dist/mba-design-system.css CHANGED
@@ -420,6 +420,17 @@
420
420
  =========================================== */
421
421
  --mba-shadow-none: 0 0 #0000;
422
422
  --mba-shadow-inner: inset 0 2px 4px 0 rgba(113, 113, 122, 0.08);
423
+
424
+ /* ===========================================
425
+ INPUT RINGS (focus/hover states)
426
+ 1.5px outline pour les champs de formulaire
427
+ =========================================== */
428
+ --mba-input-ring-info: 0 0 0 1.5px var(--mba-color-info-100);
429
+ --mba-input-ring-info-focus: 0 0 0 1.5px var(--mba-color-info-300);
430
+ --mba-input-ring-error: 0 0 0 1.5px var(--mba-color-error-100);
431
+ --mba-input-ring-error-focus: 0 0 0 1.5px var(--mba-color-error-300);
432
+ --mba-input-ring-success: 0 0 0 1.5px var(--mba-color-success-100);
433
+ --mba-input-ring-success-focus: 0 0 0 1.5px var(--mba-color-success-300);
423
434
  }
424
435
 
425
436
  /**
@@ -2460,7 +2471,7 @@ a:hover {
2460
2471
  .mba-textarea:focus {
2461
2472
  outline: none;
2462
2473
  border-color: var(--mba-color-info-400);
2463
- box-shadow: 0 0 0 1.5px var(--mba-color-info-300);
2474
+ box-shadow: var(--mba-input-ring-info-focus);
2464
2475
  }
2465
2476
 
2466
2477
  /* Active state (typing) - placeholder devient noir si visible */
@@ -2482,29 +2493,29 @@ a:hover {
2482
2493
  /* Hover state */
2483
2494
  .mba-textarea:hover:not(:focus):not(:disabled):not(.mba-textarea--error):not(.mba-textarea--valid) {
2484
2495
  border-color: var(--mba-color-info-400);
2485
- box-shadow: 0 0 0 1.5px var(--mba-color-info-100);
2496
+ box-shadow: var(--mba-input-ring-info);
2486
2497
  }
2487
2498
 
2488
2499
  /* Error state */
2489
2500
  .mba-textarea--error {
2490
2501
  border-color: var(--mba-color-error-500);
2491
- box-shadow: 0 0 0 1.5px var(--mba-color-error-100);
2502
+ box-shadow: var(--mba-input-ring-error);
2492
2503
  }
2493
2504
 
2494
2505
  .mba-textarea--error:focus {
2495
2506
  border-color: var(--mba-color-error-500);
2496
- box-shadow: 0 0 0 1.5px var(--mba-color-error-300);
2507
+ box-shadow: var(--mba-input-ring-error-focus);
2497
2508
  }
2498
2509
 
2499
2510
  /* Valid state */
2500
2511
  .mba-textarea--valid {
2501
2512
  border-color: var(--mba-color-success-500);
2502
- box-shadow: 0 0 0 1.5px var(--mba-color-success-100);
2513
+ box-shadow: var(--mba-input-ring-success);
2503
2514
  }
2504
2515
 
2505
2516
  .mba-textarea--valid:focus {
2506
2517
  border-color: var(--mba-color-success-500);
2507
- box-shadow: 0 0 0 1.5px var(--mba-color-success-300);
2518
+ box-shadow: var(--mba-input-ring-success-focus);
2508
2519
  }
2509
2520
 
2510
2521
  /* ===========================================
@@ -2532,14 +2543,14 @@ a:hover {
2532
2543
  /* Hover state */
2533
2544
  .mba-input:hover:not(:focus):not(:disabled):not(.mba-input--error):not(.mba-input--valid) {
2534
2545
  border-color: var(--mba-color-info-400);
2535
- box-shadow: 0 0 0 1.5px var(--mba-color-info-100);
2546
+ box-shadow: var(--mba-input-ring-info);
2536
2547
  }
2537
2548
 
2538
2549
  /* Focus state */
2539
2550
  .mba-input:focus {
2540
2551
  outline: none;
2541
2552
  border-color: var(--mba-color-info-400);
2542
- box-shadow: 0 0 0 1.5px var(--mba-color-info-300);
2553
+ box-shadow: var(--mba-input-ring-info-focus);
2543
2554
  }
2544
2555
 
2545
2556
  /* Disabled state */
@@ -2558,12 +2569,12 @@ a:hover {
2558
2569
  =========================================== */
2559
2570
  .mba-input--error {
2560
2571
  border-color: var(--mba-color-error-500);
2561
- box-shadow: 0 0 0 1.5px var(--mba-color-error-100);
2572
+ box-shadow: var(--mba-input-ring-error);
2562
2573
  }
2563
2574
 
2564
2575
  .mba-input--error:focus {
2565
2576
  border-color: var(--mba-color-error-500);
2566
- box-shadow: 0 0 0 1.5px var(--mba-color-error-300);
2577
+ box-shadow: var(--mba-input-ring-error-focus);
2567
2578
  }
2568
2579
 
2569
2580
  /* ===========================================
@@ -2571,12 +2582,12 @@ a:hover {
2571
2582
  =========================================== */
2572
2583
  .mba-input--valid {
2573
2584
  border-color: var(--mba-color-success-500);
2574
- box-shadow: 0 0 0 1.5px var(--mba-color-success-100);
2585
+ box-shadow: var(--mba-input-ring-success);
2575
2586
  }
2576
2587
 
2577
2588
  .mba-input--valid:focus {
2578
2589
  border-color: var(--mba-color-success-500);
2579
- box-shadow: 0 0 0 1.5px var(--mba-color-success-300);
2590
+ box-shadow: var(--mba-input-ring-success-focus);
2580
2591
  }
2581
2592
 
2582
2593
  /* ===========================================
@@ -2629,13 +2640,13 @@ a:hover {
2629
2640
 
2630
2641
  .mba-dropdown:not(.mba-dropdown--error):not(.mba-dropdown--valid) .mba-dropdown__trigger:hover {
2631
2642
  border-color: var(--mba-color-info-400);
2632
- box-shadow: 0 0 0 1.5px var(--mba-color-info-100);
2643
+ box-shadow: var(--mba-input-ring-info);
2633
2644
  }
2634
2645
 
2635
2646
  .mba-dropdown__trigger:focus {
2636
2647
  outline: none;
2637
2648
  border-color: var(--mba-color-info-400);
2638
- box-shadow: 0 0 0 1.5px var(--mba-color-info-300);
2649
+ box-shadow: var(--mba-input-ring-info-focus);
2639
2650
  }
2640
2651
 
2641
2652
  .mba-dropdown__trigger:disabled {
@@ -2659,23 +2670,23 @@ a:hover {
2659
2670
  /* Error state */
2660
2671
  .mba-dropdown--error .mba-dropdown__trigger {
2661
2672
  border-color: var(--mba-color-error-500);
2662
- box-shadow: 0 0 0 1.5px var(--mba-color-error-100);
2673
+ box-shadow: var(--mba-input-ring-error);
2663
2674
  }
2664
2675
 
2665
2676
  .mba-dropdown--error .mba-dropdown__trigger:focus {
2666
2677
  border-color: var(--mba-color-error-500);
2667
- box-shadow: 0 0 0 1.5px var(--mba-color-error-300);
2678
+ box-shadow: var(--mba-input-ring-error-focus);
2668
2679
  }
2669
2680
 
2670
2681
  /* Valid state */
2671
2682
  .mba-dropdown--valid .mba-dropdown__trigger {
2672
2683
  border-color: var(--mba-color-success-500);
2673
- box-shadow: 0 0 0 1.5px var(--mba-color-success-100);
2684
+ box-shadow: var(--mba-input-ring-success);
2674
2685
  }
2675
2686
 
2676
2687
  .mba-dropdown--valid .mba-dropdown__trigger:focus {
2677
2688
  border-color: var(--mba-color-success-500);
2678
- box-shadow: 0 0 0 1.5px var(--mba-color-success-300);
2689
+ box-shadow: var(--mba-input-ring-success-focus);
2679
2690
  }
2680
2691
 
2681
2692
  /* Panel */
@@ -2849,13 +2860,13 @@ button.mba-input-icon__icon:hover {
2849
2860
  /* Hover state */
2850
2861
  .mba-input-icon:hover:not(:focus-within):not(.mba-input-icon--disabled):not(.mba-input-icon--error) {
2851
2862
  border-color: var(--mba-color-info-400);
2852
- box-shadow: 0 0 0 1.5px var(--mba-color-info-100);
2863
+ box-shadow: var(--mba-input-ring-info);
2853
2864
  }
2854
2865
 
2855
2866
  /* Focus state */
2856
2867
  .mba-input-icon:focus-within {
2857
2868
  border-color: var(--mba-color-info-400);
2858
- box-shadow: 0 0 0 1.5px var(--mba-color-info-300);
2869
+ box-shadow: var(--mba-input-ring-info-focus);
2859
2870
  }
2860
2871
 
2861
2872
  /* Disabled state */
@@ -2872,12 +2883,12 @@ button.mba-input-icon__icon:hover {
2872
2883
  /* Error state */
2873
2884
  .mba-input-icon--error {
2874
2885
  border-color: var(--mba-color-error-500);
2875
- box-shadow: 0 0 0 1.5px var(--mba-color-error-100);
2886
+ box-shadow: var(--mba-input-ring-error);
2876
2887
  }
2877
2888
 
2878
2889
  .mba-input-icon--error:focus-within {
2879
2890
  border-color: var(--mba-color-error-500);
2880
- box-shadow: 0 0 0 1.5px var(--mba-color-error-300);
2891
+ box-shadow: var(--mba-input-ring-error-focus);
2881
2892
  }
2882
2893
 
2883
2894
  .mba-input-icon--error .mba-input-icon__icon {
@@ -3582,6 +3593,29 @@ button.mba-input-icon__icon:hover {
3582
3593
  ACCESSIBILITY UTILITIES
3583
3594
  =========================================== */
3584
3595
 
3596
+ /* Reduced motion - Respect user preference for reduced animations
3597
+ Triggered when user enables "Reduce motion" in system settings
3598
+ (macOS, Windows, iOS, Android)
3599
+
3600
+ Benefits:
3601
+ - Users with vestibular disorders
3602
+ - Users with epilepsy or seizure disorders
3603
+ - Users with migraines or motion sensitivity
3604
+
3605
+ WCAG 2.1 Success Criterion 2.3.3 (AAA)
3606
+ */
3607
+
3608
+ @media (prefers-reduced-motion: reduce) {
3609
+ *,
3610
+ *::before,
3611
+ *::after {
3612
+ animation-duration: 0.01ms !important;
3613
+ animation-iteration-count: 1 !important;
3614
+ transition-duration: 0.01ms !important;
3615
+ scroll-behavior: auto !important;
3616
+ }
3617
+ }
3618
+
3585
3619
  /* Visually hidden (accessible) */
3586
3620
 
3587
3621
  .mba-sr-only {