@maboussoleaidant/design-system 0.1.15 → 0.1.17

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 +39 -25
  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 +53 -45
  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
  /**
@@ -972,6 +983,8 @@ video {
972
983
  * Styles de base pour le texte
973
984
  */
974
985
 
986
+ @layer base {
987
+
975
988
  body {
976
989
  font-family: var(--mba-font-family-text);
977
990
  font-size: var(--mba-font-size-xs);
@@ -983,7 +996,6 @@ body {
983
996
  }
984
997
 
985
998
  /* Liens */
986
-
987
999
  a {
988
1000
  color: var(--mba-color-link);
989
1001
  transition: color var(--mba-transition-fast);
@@ -994,19 +1006,21 @@ a:hover {
994
1006
  }
995
1007
 
996
1008
  /* Focus visible pour accessibilité */
997
-
998
1009
  :focus-visible {
999
1010
  outline: 2px solid var(--mba-color-primary-500);
1000
1011
  outline-offset: 2px;
1001
1012
  }
1002
1013
 
1003
1014
  /* Selection */
1004
-
1005
1015
  ::selection {
1006
1016
  background-color: var(--mba-color-primary-100);
1007
1017
  color: var(--mba-color-primary-900);
1008
1018
  }
1009
1019
 
1020
+ }
1021
+
1022
+ /* end @layer base */
1023
+
1010
1024
  /**
1011
1025
  * MBA Design System - Composants
1012
1026
  *
@@ -2460,7 +2474,7 @@ a:hover {
2460
2474
  .mba-textarea:focus {
2461
2475
  outline: none;
2462
2476
  border-color: var(--mba-color-info-400);
2463
- box-shadow: 0 0 0 1.5px var(--mba-color-info-300);
2477
+ box-shadow: var(--mba-input-ring-info-focus);
2464
2478
  }
2465
2479
 
2466
2480
  /* Active state (typing) - placeholder devient noir si visible */
@@ -2482,29 +2496,29 @@ a:hover {
2482
2496
  /* Hover state */
2483
2497
  .mba-textarea:hover:not(:focus):not(:disabled):not(.mba-textarea--error):not(.mba-textarea--valid) {
2484
2498
  border-color: var(--mba-color-info-400);
2485
- box-shadow: 0 0 0 1.5px var(--mba-color-info-100);
2499
+ box-shadow: var(--mba-input-ring-info);
2486
2500
  }
2487
2501
 
2488
2502
  /* Error state */
2489
2503
  .mba-textarea--error {
2490
2504
  border-color: var(--mba-color-error-500);
2491
- box-shadow: 0 0 0 1.5px var(--mba-color-error-100);
2505
+ box-shadow: var(--mba-input-ring-error);
2492
2506
  }
2493
2507
 
2494
2508
  .mba-textarea--error:focus {
2495
2509
  border-color: var(--mba-color-error-500);
2496
- box-shadow: 0 0 0 1.5px var(--mba-color-error-300);
2510
+ box-shadow: var(--mba-input-ring-error-focus);
2497
2511
  }
2498
2512
 
2499
2513
  /* Valid state */
2500
2514
  .mba-textarea--valid {
2501
2515
  border-color: var(--mba-color-success-500);
2502
- box-shadow: 0 0 0 1.5px var(--mba-color-success-100);
2516
+ box-shadow: var(--mba-input-ring-success);
2503
2517
  }
2504
2518
 
2505
2519
  .mba-textarea--valid:focus {
2506
2520
  border-color: var(--mba-color-success-500);
2507
- box-shadow: 0 0 0 1.5px var(--mba-color-success-300);
2521
+ box-shadow: var(--mba-input-ring-success-focus);
2508
2522
  }
2509
2523
 
2510
2524
  /* ===========================================
@@ -2532,14 +2546,14 @@ a:hover {
2532
2546
  /* Hover state */
2533
2547
  .mba-input:hover:not(:focus):not(:disabled):not(.mba-input--error):not(.mba-input--valid) {
2534
2548
  border-color: var(--mba-color-info-400);
2535
- box-shadow: 0 0 0 1.5px var(--mba-color-info-100);
2549
+ box-shadow: var(--mba-input-ring-info);
2536
2550
  }
2537
2551
 
2538
2552
  /* Focus state */
2539
2553
  .mba-input:focus {
2540
2554
  outline: none;
2541
2555
  border-color: var(--mba-color-info-400);
2542
- box-shadow: 0 0 0 1.5px var(--mba-color-info-300);
2556
+ box-shadow: var(--mba-input-ring-info-focus);
2543
2557
  }
2544
2558
 
2545
2559
  /* Disabled state */
@@ -2558,12 +2572,12 @@ a:hover {
2558
2572
  =========================================== */
2559
2573
  .mba-input--error {
2560
2574
  border-color: var(--mba-color-error-500);
2561
- box-shadow: 0 0 0 1.5px var(--mba-color-error-100);
2575
+ box-shadow: var(--mba-input-ring-error);
2562
2576
  }
2563
2577
 
2564
2578
  .mba-input--error:focus {
2565
2579
  border-color: var(--mba-color-error-500);
2566
- box-shadow: 0 0 0 1.5px var(--mba-color-error-300);
2580
+ box-shadow: var(--mba-input-ring-error-focus);
2567
2581
  }
2568
2582
 
2569
2583
  /* ===========================================
@@ -2571,12 +2585,12 @@ a:hover {
2571
2585
  =========================================== */
2572
2586
  .mba-input--valid {
2573
2587
  border-color: var(--mba-color-success-500);
2574
- box-shadow: 0 0 0 1.5px var(--mba-color-success-100);
2588
+ box-shadow: var(--mba-input-ring-success);
2575
2589
  }
2576
2590
 
2577
2591
  .mba-input--valid:focus {
2578
2592
  border-color: var(--mba-color-success-500);
2579
- box-shadow: 0 0 0 1.5px var(--mba-color-success-300);
2593
+ box-shadow: var(--mba-input-ring-success-focus);
2580
2594
  }
2581
2595
 
2582
2596
  /* ===========================================
@@ -2629,13 +2643,13 @@ a:hover {
2629
2643
 
2630
2644
  .mba-dropdown:not(.mba-dropdown--error):not(.mba-dropdown--valid) .mba-dropdown__trigger:hover {
2631
2645
  border-color: var(--mba-color-info-400);
2632
- box-shadow: 0 0 0 1.5px var(--mba-color-info-100);
2646
+ box-shadow: var(--mba-input-ring-info);
2633
2647
  }
2634
2648
 
2635
2649
  .mba-dropdown__trigger:focus {
2636
2650
  outline: none;
2637
2651
  border-color: var(--mba-color-info-400);
2638
- box-shadow: 0 0 0 1.5px var(--mba-color-info-300);
2652
+ box-shadow: var(--mba-input-ring-info-focus);
2639
2653
  }
2640
2654
 
2641
2655
  .mba-dropdown__trigger:disabled {
@@ -2659,23 +2673,23 @@ a:hover {
2659
2673
  /* Error state */
2660
2674
  .mba-dropdown--error .mba-dropdown__trigger {
2661
2675
  border-color: var(--mba-color-error-500);
2662
- box-shadow: 0 0 0 1.5px var(--mba-color-error-100);
2676
+ box-shadow: var(--mba-input-ring-error);
2663
2677
  }
2664
2678
 
2665
2679
  .mba-dropdown--error .mba-dropdown__trigger:focus {
2666
2680
  border-color: var(--mba-color-error-500);
2667
- box-shadow: 0 0 0 1.5px var(--mba-color-error-300);
2681
+ box-shadow: var(--mba-input-ring-error-focus);
2668
2682
  }
2669
2683
 
2670
2684
  /* Valid state */
2671
2685
  .mba-dropdown--valid .mba-dropdown__trigger {
2672
2686
  border-color: var(--mba-color-success-500);
2673
- box-shadow: 0 0 0 1.5px var(--mba-color-success-100);
2687
+ box-shadow: var(--mba-input-ring-success);
2674
2688
  }
2675
2689
 
2676
2690
  .mba-dropdown--valid .mba-dropdown__trigger:focus {
2677
2691
  border-color: var(--mba-color-success-500);
2678
- box-shadow: 0 0 0 1.5px var(--mba-color-success-300);
2692
+ box-shadow: var(--mba-input-ring-success-focus);
2679
2693
  }
2680
2694
 
2681
2695
  /* Panel */
@@ -2849,13 +2863,13 @@ button.mba-input-icon__icon:hover {
2849
2863
  /* Hover state */
2850
2864
  .mba-input-icon:hover:not(:focus-within):not(.mba-input-icon--disabled):not(.mba-input-icon--error) {
2851
2865
  border-color: var(--mba-color-info-400);
2852
- box-shadow: 0 0 0 1.5px var(--mba-color-info-100);
2866
+ box-shadow: var(--mba-input-ring-info);
2853
2867
  }
2854
2868
 
2855
2869
  /* Focus state */
2856
2870
  .mba-input-icon:focus-within {
2857
2871
  border-color: var(--mba-color-info-400);
2858
- box-shadow: 0 0 0 1.5px var(--mba-color-info-300);
2872
+ box-shadow: var(--mba-input-ring-info-focus);
2859
2873
  }
2860
2874
 
2861
2875
  /* Disabled state */
@@ -2872,12 +2886,12 @@ button.mba-input-icon__icon:hover {
2872
2886
  /* Error state */
2873
2887
  .mba-input-icon--error {
2874
2888
  border-color: var(--mba-color-error-500);
2875
- box-shadow: 0 0 0 1.5px var(--mba-color-error-100);
2889
+ box-shadow: var(--mba-input-ring-error);
2876
2890
  }
2877
2891
 
2878
2892
  .mba-input-icon--error:focus-within {
2879
2893
  border-color: var(--mba-color-error-500);
2880
- box-shadow: 0 0 0 1.5px var(--mba-color-error-300);
2894
+ box-shadow: var(--mba-input-ring-error-focus);
2881
2895
  }
2882
2896
 
2883
2897
  .mba-input-icon--error .mba-input-icon__icon {