@fastwork/xosmoz-css 0.0.24 → 0.0.26

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 (3) hide show
  1. package/dist/atomic.css +132 -120
  2. package/dist/component.css +1 -1
  3. package/package.json +2 -2
package/dist/atomic.css CHANGED
@@ -1846,12 +1846,16 @@
1846
1846
  color: var(--xz-color-bg-400) !important;
1847
1847
  }
1848
1848
 
1849
- ._cl-content-100 {
1850
- color: var(--xz-color-content-100) !important;
1849
+ ._cl-fg-100 {
1850
+ color: var(--xz-color-fg-100) !important;
1851
1851
  }
1852
1852
 
1853
- ._cl-content-200 {
1854
- color: var(--xz-color-content-200) !important;
1853
+ ._cl-fg-200 {
1854
+ color: var(--xz-color-fg-200) !important;
1855
+ }
1856
+
1857
+ ._cl-fg-300 {
1858
+ color: var(--xz-color-fg-300) !important;
1855
1859
  }
1856
1860
 
1857
1861
  ._cl-line-100 {
@@ -1898,16 +1902,16 @@
1898
1902
  color: var(--xz-color-primary-bg-200) !important;
1899
1903
  }
1900
1904
 
1901
- ._cl-primary-content-100 {
1902
- color: var(--xz-color-primary-content-100) !important;
1905
+ ._cl-primary-fg-50 {
1906
+ color: var(--xz-color-primary-fg-50) !important;
1903
1907
  }
1904
1908
 
1905
- ._cl-primary-content-200 {
1906
- color: var(--xz-color-primary-content-200) !important;
1909
+ ._cl-primary-fg-100 {
1910
+ color: var(--xz-color-primary-fg-100) !important;
1907
1911
  }
1908
1912
 
1909
- ._cl-primary-fg {
1910
- color: var(--xz-color-primary-fg) !important;
1913
+ ._cl-primary-fg-200 {
1914
+ color: var(--xz-color-primary-fg-200) !important;
1911
1915
  }
1912
1916
 
1913
1917
  ._cl-danger-soft-100 {
@@ -1942,16 +1946,16 @@
1942
1946
  color: var(--xz-color-danger-bg-200) !important;
1943
1947
  }
1944
1948
 
1945
- ._cl-danger-content-100 {
1946
- color: var(--xz-color-danger-content-100) !important;
1949
+ ._cl-danger-fg-50 {
1950
+ color: var(--xz-color-danger-fg-50) !important;
1947
1951
  }
1948
1952
 
1949
- ._cl-danger-content-200 {
1950
- color: var(--xz-color-danger-content-200) !important;
1953
+ ._cl-danger-fg-100 {
1954
+ color: var(--xz-color-danger-fg-100) !important;
1951
1955
  }
1952
1956
 
1953
- ._cl-danger-fg {
1954
- color: var(--xz-color-danger-fg) !important;
1957
+ ._cl-danger-fg-200 {
1958
+ color: var(--xz-color-danger-fg-200) !important;
1955
1959
  }
1956
1960
 
1957
1961
  ._cl-success-soft-100 {
@@ -1986,16 +1990,16 @@
1986
1990
  color: var(--xz-color-success-bg-200) !important;
1987
1991
  }
1988
1992
 
1989
- ._cl-success-content-100 {
1990
- color: var(--xz-color-success-content-100) !important;
1993
+ ._cl-success-fg-50 {
1994
+ color: var(--xz-color-success-fg-50) !important;
1991
1995
  }
1992
1996
 
1993
- ._cl-success-content-200 {
1994
- color: var(--xz-color-success-content-200) !important;
1997
+ ._cl-success-fg-100 {
1998
+ color: var(--xz-color-success-fg-100) !important;
1995
1999
  }
1996
2000
 
1997
- ._cl-success-fg {
1998
- color: var(--xz-color-success-fg) !important;
2001
+ ._cl-success-fg-200 {
2002
+ color: var(--xz-color-success-fg-200) !important;
1999
2003
  }
2000
2004
 
2001
2005
  ._cl-warning-soft-100 {
@@ -2030,16 +2034,16 @@
2030
2034
  color: var(--xz-color-warning-bg-200) !important;
2031
2035
  }
2032
2036
 
2033
- ._cl-warning-content-100 {
2034
- color: var(--xz-color-warning-content-100) !important;
2037
+ ._cl-warning-fg-50 {
2038
+ color: var(--xz-color-warning-fg-50) !important;
2035
2039
  }
2036
2040
 
2037
- ._cl-warning-content-200 {
2038
- color: var(--xz-color-warning-content-200) !important;
2041
+ ._cl-warning-fg-100 {
2042
+ color: var(--xz-color-warning-fg-100) !important;
2039
2043
  }
2040
2044
 
2041
- ._cl-warning-fg {
2042
- color: var(--xz-color-warning-fg) !important;
2045
+ ._cl-warning-fg-200 {
2046
+ color: var(--xz-color-warning-fg-200) !important;
2043
2047
  }
2044
2048
 
2045
2049
  ._cl-info-soft-100 {
@@ -2074,16 +2078,16 @@
2074
2078
  color: var(--xz-color-info-bg-200) !important;
2075
2079
  }
2076
2080
 
2077
- ._cl-info-content-100 {
2078
- color: var(--xz-color-info-content-100) !important;
2081
+ ._cl-info-fg-50 {
2082
+ color: var(--xz-color-info-fg-50) !important;
2079
2083
  }
2080
2084
 
2081
- ._cl-info-content-200 {
2082
- color: var(--xz-color-info-content-200) !important;
2085
+ ._cl-info-fg-100 {
2086
+ color: var(--xz-color-info-fg-100) !important;
2083
2087
  }
2084
2088
 
2085
- ._cl-info-fg {
2086
- color: var(--xz-color-info-fg) !important;
2089
+ ._cl-info-fg-200 {
2090
+ color: var(--xz-color-info-fg-200) !important;
2087
2091
  }
2088
2092
 
2089
2093
  ._cl-neutral-soft-100 {
@@ -2118,16 +2122,16 @@
2118
2122
  color: var(--xz-color-neutral-bg-200) !important;
2119
2123
  }
2120
2124
 
2121
- ._cl-neutral-content-100 {
2122
- color: var(--xz-color-neutral-content-100) !important;
2125
+ ._cl-neutral-fg-50 {
2126
+ color: var(--xz-color-neutral-fg-50) !important;
2123
2127
  }
2124
2128
 
2125
- ._cl-neutral-content-200 {
2126
- color: var(--xz-color-neutral-content-200) !important;
2129
+ ._cl-neutral-fg-100 {
2130
+ color: var(--xz-color-neutral-fg-100) !important;
2127
2131
  }
2128
2132
 
2129
- ._cl-neutral-fg {
2130
- color: var(--xz-color-neutral-fg) !important;
2133
+ ._cl-neutral-fg-200 {
2134
+ color: var(--xz-color-neutral-fg-200) !important;
2131
2135
  }
2132
2136
 
2133
2137
  ._cl-fastwork-100 {
@@ -2599,12 +2603,16 @@
2599
2603
  background-color: var(--xz-color-bg-400) !important;
2600
2604
  }
2601
2605
 
2602
- ._bgcl-content-100 {
2603
- background-color: var(--xz-color-content-100) !important;
2606
+ ._bgcl-fg-100 {
2607
+ background-color: var(--xz-color-fg-100) !important;
2608
+ }
2609
+
2610
+ ._bgcl-fg-200 {
2611
+ background-color: var(--xz-color-fg-200) !important;
2604
2612
  }
2605
2613
 
2606
- ._bgcl-content-200 {
2607
- background-color: var(--xz-color-content-200) !important;
2614
+ ._bgcl-fg-300 {
2615
+ background-color: var(--xz-color-fg-300) !important;
2608
2616
  }
2609
2617
 
2610
2618
  ._bgcl-line-100 {
@@ -2651,16 +2659,16 @@
2651
2659
  background-color: var(--xz-color-primary-bg-200) !important;
2652
2660
  }
2653
2661
 
2654
- ._bgcl-primary-content-100 {
2655
- background-color: var(--xz-color-primary-content-100) !important;
2662
+ ._bgcl-primary-fg-50 {
2663
+ background-color: var(--xz-color-primary-fg-50) !important;
2656
2664
  }
2657
2665
 
2658
- ._bgcl-primary-content-200 {
2659
- background-color: var(--xz-color-primary-content-200) !important;
2666
+ ._bgcl-primary-fg-100 {
2667
+ background-color: var(--xz-color-primary-fg-100) !important;
2660
2668
  }
2661
2669
 
2662
- ._bgcl-primary-fg {
2663
- background-color: var(--xz-color-primary-fg) !important;
2670
+ ._bgcl-primary-fg-200 {
2671
+ background-color: var(--xz-color-primary-fg-200) !important;
2664
2672
  }
2665
2673
 
2666
2674
  ._bgcl-danger-soft-100 {
@@ -2695,16 +2703,16 @@
2695
2703
  background-color: var(--xz-color-danger-bg-200) !important;
2696
2704
  }
2697
2705
 
2698
- ._bgcl-danger-content-100 {
2699
- background-color: var(--xz-color-danger-content-100) !important;
2706
+ ._bgcl-danger-fg-50 {
2707
+ background-color: var(--xz-color-danger-fg-50) !important;
2700
2708
  }
2701
2709
 
2702
- ._bgcl-danger-content-200 {
2703
- background-color: var(--xz-color-danger-content-200) !important;
2710
+ ._bgcl-danger-fg-100 {
2711
+ background-color: var(--xz-color-danger-fg-100) !important;
2704
2712
  }
2705
2713
 
2706
- ._bgcl-danger-fg {
2707
- background-color: var(--xz-color-danger-fg) !important;
2714
+ ._bgcl-danger-fg-200 {
2715
+ background-color: var(--xz-color-danger-fg-200) !important;
2708
2716
  }
2709
2717
 
2710
2718
  ._bgcl-success-soft-100 {
@@ -2739,16 +2747,16 @@
2739
2747
  background-color: var(--xz-color-success-bg-200) !important;
2740
2748
  }
2741
2749
 
2742
- ._bgcl-success-content-100 {
2743
- background-color: var(--xz-color-success-content-100) !important;
2750
+ ._bgcl-success-fg-50 {
2751
+ background-color: var(--xz-color-success-fg-50) !important;
2744
2752
  }
2745
2753
 
2746
- ._bgcl-success-content-200 {
2747
- background-color: var(--xz-color-success-content-200) !important;
2754
+ ._bgcl-success-fg-100 {
2755
+ background-color: var(--xz-color-success-fg-100) !important;
2748
2756
  }
2749
2757
 
2750
- ._bgcl-success-fg {
2751
- background-color: var(--xz-color-success-fg) !important;
2758
+ ._bgcl-success-fg-200 {
2759
+ background-color: var(--xz-color-success-fg-200) !important;
2752
2760
  }
2753
2761
 
2754
2762
  ._bgcl-warning-soft-100 {
@@ -2783,16 +2791,16 @@
2783
2791
  background-color: var(--xz-color-warning-bg-200) !important;
2784
2792
  }
2785
2793
 
2786
- ._bgcl-warning-content-100 {
2787
- background-color: var(--xz-color-warning-content-100) !important;
2794
+ ._bgcl-warning-fg-50 {
2795
+ background-color: var(--xz-color-warning-fg-50) !important;
2788
2796
  }
2789
2797
 
2790
- ._bgcl-warning-content-200 {
2791
- background-color: var(--xz-color-warning-content-200) !important;
2798
+ ._bgcl-warning-fg-100 {
2799
+ background-color: var(--xz-color-warning-fg-100) !important;
2792
2800
  }
2793
2801
 
2794
- ._bgcl-warning-fg {
2795
- background-color: var(--xz-color-warning-fg) !important;
2802
+ ._bgcl-warning-fg-200 {
2803
+ background-color: var(--xz-color-warning-fg-200) !important;
2796
2804
  }
2797
2805
 
2798
2806
  ._bgcl-info-soft-100 {
@@ -2827,16 +2835,16 @@
2827
2835
  background-color: var(--xz-color-info-bg-200) !important;
2828
2836
  }
2829
2837
 
2830
- ._bgcl-info-content-100 {
2831
- background-color: var(--xz-color-info-content-100) !important;
2838
+ ._bgcl-info-fg-50 {
2839
+ background-color: var(--xz-color-info-fg-50) !important;
2832
2840
  }
2833
2841
 
2834
- ._bgcl-info-content-200 {
2835
- background-color: var(--xz-color-info-content-200) !important;
2842
+ ._bgcl-info-fg-100 {
2843
+ background-color: var(--xz-color-info-fg-100) !important;
2836
2844
  }
2837
2845
 
2838
- ._bgcl-info-fg {
2839
- background-color: var(--xz-color-info-fg) !important;
2846
+ ._bgcl-info-fg-200 {
2847
+ background-color: var(--xz-color-info-fg-200) !important;
2840
2848
  }
2841
2849
 
2842
2850
  ._bgcl-neutral-soft-100 {
@@ -2871,16 +2879,16 @@
2871
2879
  background-color: var(--xz-color-neutral-bg-200) !important;
2872
2880
  }
2873
2881
 
2874
- ._bgcl-neutral-content-100 {
2875
- background-color: var(--xz-color-neutral-content-100) !important;
2882
+ ._bgcl-neutral-fg-50 {
2883
+ background-color: var(--xz-color-neutral-fg-50) !important;
2876
2884
  }
2877
2885
 
2878
- ._bgcl-neutral-content-200 {
2879
- background-color: var(--xz-color-neutral-content-200) !important;
2886
+ ._bgcl-neutral-fg-100 {
2887
+ background-color: var(--xz-color-neutral-fg-100) !important;
2880
2888
  }
2881
2889
 
2882
- ._bgcl-neutral-fg {
2883
- background-color: var(--xz-color-neutral-fg) !important;
2890
+ ._bgcl-neutral-fg-200 {
2891
+ background-color: var(--xz-color-neutral-fg-200) !important;
2884
2892
  }
2885
2893
 
2886
2894
  ._bgcl-fastwork-100 {
@@ -3352,12 +3360,16 @@
3352
3360
  border-color: var(--xz-color-bg-400) !important;
3353
3361
  }
3354
3362
 
3355
- ._bdcl-content-100 {
3356
- border-color: var(--xz-color-content-100) !important;
3363
+ ._bdcl-fg-100 {
3364
+ border-color: var(--xz-color-fg-100) !important;
3365
+ }
3366
+
3367
+ ._bdcl-fg-200 {
3368
+ border-color: var(--xz-color-fg-200) !important;
3357
3369
  }
3358
3370
 
3359
- ._bdcl-content-200 {
3360
- border-color: var(--xz-color-content-200) !important;
3371
+ ._bdcl-fg-300 {
3372
+ border-color: var(--xz-color-fg-300) !important;
3361
3373
  }
3362
3374
 
3363
3375
  ._bdcl-line-100 {
@@ -3404,16 +3416,16 @@
3404
3416
  border-color: var(--xz-color-primary-bg-200) !important;
3405
3417
  }
3406
3418
 
3407
- ._bdcl-primary-content-100 {
3408
- border-color: var(--xz-color-primary-content-100) !important;
3419
+ ._bdcl-primary-fg-50 {
3420
+ border-color: var(--xz-color-primary-fg-50) !important;
3409
3421
  }
3410
3422
 
3411
- ._bdcl-primary-content-200 {
3412
- border-color: var(--xz-color-primary-content-200) !important;
3423
+ ._bdcl-primary-fg-100 {
3424
+ border-color: var(--xz-color-primary-fg-100) !important;
3413
3425
  }
3414
3426
 
3415
- ._bdcl-primary-fg {
3416
- border-color: var(--xz-color-primary-fg) !important;
3427
+ ._bdcl-primary-fg-200 {
3428
+ border-color: var(--xz-color-primary-fg-200) !important;
3417
3429
  }
3418
3430
 
3419
3431
  ._bdcl-danger-soft-100 {
@@ -3448,16 +3460,16 @@
3448
3460
  border-color: var(--xz-color-danger-bg-200) !important;
3449
3461
  }
3450
3462
 
3451
- ._bdcl-danger-content-100 {
3452
- border-color: var(--xz-color-danger-content-100) !important;
3463
+ ._bdcl-danger-fg-50 {
3464
+ border-color: var(--xz-color-danger-fg-50) !important;
3453
3465
  }
3454
3466
 
3455
- ._bdcl-danger-content-200 {
3456
- border-color: var(--xz-color-danger-content-200) !important;
3467
+ ._bdcl-danger-fg-100 {
3468
+ border-color: var(--xz-color-danger-fg-100) !important;
3457
3469
  }
3458
3470
 
3459
- ._bdcl-danger-fg {
3460
- border-color: var(--xz-color-danger-fg) !important;
3471
+ ._bdcl-danger-fg-200 {
3472
+ border-color: var(--xz-color-danger-fg-200) !important;
3461
3473
  }
3462
3474
 
3463
3475
  ._bdcl-success-soft-100 {
@@ -3492,16 +3504,16 @@
3492
3504
  border-color: var(--xz-color-success-bg-200) !important;
3493
3505
  }
3494
3506
 
3495
- ._bdcl-success-content-100 {
3496
- border-color: var(--xz-color-success-content-100) !important;
3507
+ ._bdcl-success-fg-50 {
3508
+ border-color: var(--xz-color-success-fg-50) !important;
3497
3509
  }
3498
3510
 
3499
- ._bdcl-success-content-200 {
3500
- border-color: var(--xz-color-success-content-200) !important;
3511
+ ._bdcl-success-fg-100 {
3512
+ border-color: var(--xz-color-success-fg-100) !important;
3501
3513
  }
3502
3514
 
3503
- ._bdcl-success-fg {
3504
- border-color: var(--xz-color-success-fg) !important;
3515
+ ._bdcl-success-fg-200 {
3516
+ border-color: var(--xz-color-success-fg-200) !important;
3505
3517
  }
3506
3518
 
3507
3519
  ._bdcl-warning-soft-100 {
@@ -3536,16 +3548,16 @@
3536
3548
  border-color: var(--xz-color-warning-bg-200) !important;
3537
3549
  }
3538
3550
 
3539
- ._bdcl-warning-content-100 {
3540
- border-color: var(--xz-color-warning-content-100) !important;
3551
+ ._bdcl-warning-fg-50 {
3552
+ border-color: var(--xz-color-warning-fg-50) !important;
3541
3553
  }
3542
3554
 
3543
- ._bdcl-warning-content-200 {
3544
- border-color: var(--xz-color-warning-content-200) !important;
3555
+ ._bdcl-warning-fg-100 {
3556
+ border-color: var(--xz-color-warning-fg-100) !important;
3545
3557
  }
3546
3558
 
3547
- ._bdcl-warning-fg {
3548
- border-color: var(--xz-color-warning-fg) !important;
3559
+ ._bdcl-warning-fg-200 {
3560
+ border-color: var(--xz-color-warning-fg-200) !important;
3549
3561
  }
3550
3562
 
3551
3563
  ._bdcl-info-soft-100 {
@@ -3580,16 +3592,16 @@
3580
3592
  border-color: var(--xz-color-info-bg-200) !important;
3581
3593
  }
3582
3594
 
3583
- ._bdcl-info-content-100 {
3584
- border-color: var(--xz-color-info-content-100) !important;
3595
+ ._bdcl-info-fg-50 {
3596
+ border-color: var(--xz-color-info-fg-50) !important;
3585
3597
  }
3586
3598
 
3587
- ._bdcl-info-content-200 {
3588
- border-color: var(--xz-color-info-content-200) !important;
3599
+ ._bdcl-info-fg-100 {
3600
+ border-color: var(--xz-color-info-fg-100) !important;
3589
3601
  }
3590
3602
 
3591
- ._bdcl-info-fg {
3592
- border-color: var(--xz-color-info-fg) !important;
3603
+ ._bdcl-info-fg-200 {
3604
+ border-color: var(--xz-color-info-fg-200) !important;
3593
3605
  }
3594
3606
 
3595
3607
  ._bdcl-neutral-soft-100 {
@@ -3624,16 +3636,16 @@
3624
3636
  border-color: var(--xz-color-neutral-bg-200) !important;
3625
3637
  }
3626
3638
 
3627
- ._bdcl-neutral-content-100 {
3628
- border-color: var(--xz-color-neutral-content-100) !important;
3639
+ ._bdcl-neutral-fg-50 {
3640
+ border-color: var(--xz-color-neutral-fg-50) !important;
3629
3641
  }
3630
3642
 
3631
- ._bdcl-neutral-content-200 {
3632
- border-color: var(--xz-color-neutral-content-200) !important;
3643
+ ._bdcl-neutral-fg-100 {
3644
+ border-color: var(--xz-color-neutral-fg-100) !important;
3633
3645
  }
3634
3646
 
3635
- ._bdcl-neutral-fg {
3636
- border-color: var(--xz-color-neutral-fg) !important;
3647
+ ._bdcl-neutral-fg-200 {
3648
+ border-color: var(--xz-color-neutral-fg-200) !important;
3637
3649
  }
3638
3650
 
3639
3651
  ._bdcl-fastwork-100 {
package/dist/component.css CHANGED
@@ -1 +1 @@
1
- :root{--xz-button-font-family: var( --xz-font-family-primary, system-ui, sans-serif );--xz-button-font-weight: 600;--xz-button-border-radius: 0.5rem;--xz-button-small-height: 2rem;--xz-button-small-font-size: 0.8125rem;--xz-button-medium-height: 2.5rem;--xz-button-medium-font-size: 0.875rem;--xz-button-large-height: 3rem;--xz-button-large-font-size: 1rem}.xz-button{position:relative;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;min-height:var(--xz-button-medium-height);padding:0 1.125rem;border:none;border-radius:var(--xz-button-border-radius);background:var(--xz-color-primary-bg-100);color:var(--xz-color-primary-fg);outline:none;font-weight:var(--xz-button-font-weight);font-size:var(--xz-button-medium-font-size);font-family:var(--xz-button-font-family);line-height:100%;cursor:pointer;user-select:none;transition:all .16s ease-in-out}@media(hover: hover){.xz-button:hover::before{background:var(--xz-color-black-alpha-100)}.xz-button:focus{box-shadow:0 0 0 .175rem var(--xz-color-primary-line-200)}}.xz-button>span{z-index:1}.xz-button .start-icon,.xz-button .end-icon{display:flex;align-items:center;min-width:1.375rem}.xz-button .end-icon{justify-content:flex-end}.xz-button::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;transition:all .16s ease-in-out}.xz-button.is-loading{color:rgba(0,0,0,0);pointer-events:none}.xz-button.is-loading::after{content:"";position:absolute;right:0;left:0;width:1em;height:1em;margin:auto;border:2px solid;border-top-color:var(--xz-color-primary-fg);border-right-color:var(--xz-color-primary-fg);border-radius:999px;animation:button-loading-spin .48s infinite linear}.xz-button.is-size-small{min-height:var(--xz-button-small-height);padding:0 1rem;font-size:var(--xz-button-small-font-size)}.xz-button.is-size-small .start-icon,.xz-button.is-size-small .end-icon{min-width:1.125rem}.xz-button.is-size-medium{min-height:var(--xz-button-medium-height);padding:0 1.125rem;font-size:var(--xz-button-medium-font-size)}.xz-button.is-size-medium .start-icon,.xz-button.is-size-medium .end-icon{min-width:1.375rem}.xz-button.is-size-large{min-height:var(--xz-button-large-height);padding:0 1.25rem;font-size:var(--xz-button-large-font-size)}.xz-button.is-size-large .start-icon,.xz-button.is-size-large .end-icon{min-width:1.625rem}.xz-button.is-variant-danger{background:var(--xz-color-danger-bg-100)}@media(hover: hover){.xz-button.is-variant-danger:focus{box-shadow:0 0 0 .175rem var(--xz-color-danger-line-200)}}.xz-button.is-variant-danger.is-loading{color:rgba(0,0,0,0)}.xz-button.is-variant-danger.is-loading::after{border-top-color:var(--xz-color-danger-fg);border-right-color:var(--xz-color-danger-fg)}.xz-button.is-variant-success{background:var(--xz-color-success-bg-100)}@media(hover: hover){.xz-button.is-variant-success:focus{box-shadow:0 0 0 .175rem var(--xz-color-success-line-200)}}.xz-button.is-variant-success.is-loading{color:rgba(0,0,0,0)}.xz-button.is-variant-success.is-loading::after{border-top-color:var(--xz-color-success-fg);border-right-color:var(--xz-color-success-fg)}.xz-button.is-variant-secondary{border:1px solid var(--xz-color-line-100);background:rgba(0,0,0,0);color:var(--xz-color-primary-content-100)}@media(hover: hover){.xz-button.is-variant-secondary:focus{box-shadow:0 0 0 .175rem var(--xz-color-primary-line-200)}}@media(hover: hover){.xz-button.is-variant-secondary:hover{border:1px solid var(--xz-color-line-200);color:var(--xz-color-primary-content-100)}.xz-button.is-variant-secondary:hover::before{background:var(--xz-color-black-alpha-100)}}.xz-button.is-variant-secondary.is-loading{color:rgba(0,0,0,0)}.xz-button.is-variant-secondary.is-loading::after{border-top-color:var(--xz-color-primary-content-100);border-right-color:var(--xz-color-primary-content-100)}.xz-button.is-variant-outline{border:1px solid var(--xz-color-line-100);background:rgba(0,0,0,0);color:var(--xz-color-content-200)}@media(hover: hover){.xz-button.is-variant-outline:focus{box-shadow:0 0 0 .175rem var(--xz-color-primary-line-200)}}@media(hover: hover){.xz-button.is-variant-outline:hover{border:1px solid var(--xz-color-line-200);color:var(--xz-color-content-100)}.xz-button.is-variant-outline:hover::before{background:var(--xz-color-black-alpha-100)}}.xz-button.is-variant-outline.is-loading{color:rgba(0,0,0,0)}.xz-button.is-variant-outline.is-loading::after{border-top-color:var(--xz-color-content-200);border-right-color:var(--xz-color-content-200)}.xz-button.is-variant-tertiary{border:unset;background:var(--xz-color-neutral-soft-100);color:var(--xz-color-content-100)}@media(hover: hover){.xz-button.is-variant-tertiary:focus{box-shadow:0 0 0 .175rem var(--xz-color-primary-line-200)}}.xz-button.is-variant-tertiary.is-loading{color:rgba(0,0,0,0)}.xz-button.is-variant-tertiary.is-loading::after{border-top-color:var(--xz-color-content-200);border-right-color:var(--xz-color-content-200)}.xz-button.is-variant-ghost{border:unset;background:rgba(0,0,0,0);color:var(--xz-color-content-200)}@media(hover: hover){.xz-button.is-variant-ghost:focus{box-shadow:0 0 0 .175rem var(--xz-color-primary-line-200)}}.xz-button.is-variant-ghost.is-loading{color:rgba(0,0,0,0)}.xz-button.is-variant-ghost.is-loading::after{border-top-color:var(--xz-color-content-200);border-right-color:var(--xz-color-content-200)}.xz-button.is-variant-white{border:1px solid var(--xz-color-line-100);background:var(--xz-color-bg-100);color:var(--xz-color-primary-content-100)}@media(hover: hover){.xz-button.is-variant-white:focus{box-shadow:0 0 0 .175rem var(--xz-color-primary-line-200)}}.xz-button.is-variant-white.is-loading{color:rgba(0,0,0,0)}.xz-button.is-variant-white.is-loading::after{border-top-color:var(--xz-color-primary-content-100);border-right-color:var(--xz-color-primary-content-100)}.xz-button.is-variant-white-secondary{border:1px solid var(--xz-color-white-alpha-1000);background:rgba(0,0,0,0);color:var(--xz-color-white-alpha-1000)}@media(hover: hover){.xz-button.is-variant-white-secondary:focus{box-shadow:0 0 0 .175rem var(--xz-color-primary-line-200)}}@media(hover: hover){.xz-button.is-variant-white-secondary:hover{border:1px solid var(--xz-color-line-200);color:var(--xz-color-white-alpha-1000)}.xz-button.is-variant-white-secondary:hover::before{background:var(--xz-color-black-alpha-100)}}.xz-button.is-variant-white-secondary.is-loading{color:rgba(0,0,0,0)}.xz-button.is-variant-white-secondary.is-loading::after{border-top-color:var(--xz-color-white-alpha-1000);border-right-color:var(--xz-color-white-alpha-1000)}.xz-button[disabled],.xz-button.is-disabled{opacity:.6;cursor:not-allowed}.xz-button.is-fluid{width:100%}.xz-button.is-pill{border-radius:999px}.xz-button.is-square{aspect-ratio:1/1}@keyframes button-loading-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}
1
+ :root{--xz-button-font-family: var( --xz-font-family-primary, system-ui, sans-serif );--xz-button-font-weight: 600;--xz-button-border-radius: 0.5rem;--xz-button-small-height: 2rem;--xz-button-small-font-size: 0.8125rem;--xz-button-medium-height: 2.5rem;--xz-button-medium-font-size: 0.875rem;--xz-button-large-height: 3rem;--xz-button-large-font-size: 1rem}.xz-button{position:relative;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;min-height:var(--xz-button-medium-height);padding:0 1.125rem;border:none;border-radius:var(--xz-button-border-radius);background:var(--xz-color-primary-bg-100);color:var(--xz-color-primary-fg-50);outline:none;font-weight:var(--xz-button-font-weight);font-size:var(--xz-button-medium-font-size);font-family:var(--xz-button-font-family);line-height:100%;cursor:pointer;user-select:none;transition:all .16s ease-in-out}@media(hover: hover){.xz-button:hover::before{background:var(--xz-color-black-alpha-100)}.xz-button:focus{box-shadow:0 0 0 .175rem var(--xz-color-primary-line-200)}}.xz-button>span{z-index:1}.xz-button .start-icon,.xz-button .end-icon{display:flex;align-items:center;min-width:1.375rem}.xz-button .end-icon{justify-content:flex-end}.xz-button::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;transition:all .16s ease-in-out}.xz-button.is-loading{color:rgba(0,0,0,0);pointer-events:none}.xz-button.is-loading::after{content:"";position:absolute;right:0;left:0;width:1em;height:1em;margin:auto;border:2px solid;border-top-color:var(--xz-color-primary-fg-50);border-right-color:var(--xz-color-primary-fg-50);border-radius:999px;animation:button-loading-spin .48s infinite linear}.xz-button.is-size-small{min-height:var(--xz-button-small-height);padding:0 1rem;font-size:var(--xz-button-small-font-size)}.xz-button.is-size-small .start-icon,.xz-button.is-size-small .end-icon{min-width:1.125rem}.xz-button.is-size-medium{min-height:var(--xz-button-medium-height);padding:0 1.125rem;font-size:var(--xz-button-medium-font-size)}.xz-button.is-size-medium .start-icon,.xz-button.is-size-medium .end-icon{min-width:1.375rem}.xz-button.is-size-large{min-height:var(--xz-button-large-height);padding:0 1.25rem;font-size:var(--xz-button-large-font-size)}.xz-button.is-size-large .start-icon,.xz-button.is-size-large .end-icon{min-width:1.625rem}.xz-button.is-variant-danger{background:var(--xz-color-danger-bg-100)}@media(hover: hover){.xz-button.is-variant-danger:focus{box-shadow:0 0 0 .175rem var(--xz-color-danger-line-200)}}.xz-button.is-variant-danger.is-loading{color:rgba(0,0,0,0)}.xz-button.is-variant-danger.is-loading::after{border-top-color:var(--xz-color-danger-fg-50);border-right-color:var(--xz-color-danger-fg-50)}.xz-button.is-variant-success{background:var(--xz-color-success-bg-100)}@media(hover: hover){.xz-button.is-variant-success:focus{box-shadow:0 0 0 .175rem var(--xz-color-success-line-200)}}.xz-button.is-variant-success.is-loading{color:rgba(0,0,0,0)}.xz-button.is-variant-success.is-loading::after{border-top-color:var(--xz-color-success-fg-50);border-right-color:var(--xz-color-success-fg-50)}.xz-button.is-variant-secondary{border:1px solid var(--xz-color-line-100);background:rgba(0,0,0,0);color:var(--xz-color-primary-fg-100)}@media(hover: hover){.xz-button.is-variant-secondary:focus{box-shadow:0 0 0 .175rem var(--xz-color-primary-line-200)}}@media(hover: hover){.xz-button.is-variant-secondary:hover{border:1px solid var(--xz-color-line-200);color:var(--xz-color-primary-fg-100)}.xz-button.is-variant-secondary:hover::before{background:var(--xz-color-black-alpha-100)}}.xz-button.is-variant-secondary.is-loading{color:rgba(0,0,0,0)}.xz-button.is-variant-secondary.is-loading::after{border-top-color:var(--xz-color-primary-fg-100);border-right-color:var(--xz-color-primary-fg-100)}.xz-button.is-variant-outline{border:1px solid var(--xz-color-line-100);background:rgba(0,0,0,0);color:var(--xz-color-fg-200)}@media(hover: hover){.xz-button.is-variant-outline:focus{box-shadow:0 0 0 .175rem var(--xz-color-primary-line-200)}}@media(hover: hover){.xz-button.is-variant-outline:hover{border:1px solid var(--xz-color-line-200);color:var(--xz-color-fg-100)}.xz-button.is-variant-outline:hover::before{background:var(--xz-color-black-alpha-100)}}.xz-button.is-variant-outline.is-loading{color:rgba(0,0,0,0)}.xz-button.is-variant-outline.is-loading::after{border-top-color:var(--xz-color-fg-200);border-right-color:var(--xz-color-fg-200)}.xz-button.is-variant-tertiary{border:unset;background:var(--xz-color-neutral-soft-100);color:var(--xz-color-fg-100)}@media(hover: hover){.xz-button.is-variant-tertiary:focus{box-shadow:0 0 0 .175rem var(--xz-color-primary-line-200)}}.xz-button.is-variant-tertiary.is-loading{color:rgba(0,0,0,0)}.xz-button.is-variant-tertiary.is-loading::after{border-top-color:var(--xz-color-fg-200);border-right-color:var(--xz-color-fg-200)}.xz-button.is-variant-ghost{border:unset;background:rgba(0,0,0,0);color:var(--xz-color-fg-200)}@media(hover: hover){.xz-button.is-variant-ghost:focus{box-shadow:0 0 0 .175rem var(--xz-color-primary-line-200)}}.xz-button.is-variant-ghost.is-loading{color:rgba(0,0,0,0)}.xz-button.is-variant-ghost.is-loading::after{border-top-color:var(--xz-color-fg-200);border-right-color:var(--xz-color-fg-200)}.xz-button.is-variant-white{border:1px solid var(--xz-color-line-100);background:var(--xz-color-bg-100);color:var(--xz-color-primary-fg-100)}@media(hover: hover){.xz-button.is-variant-white:focus{box-shadow:0 0 0 .175rem var(--xz-color-primary-line-200)}}.xz-button.is-variant-white.is-loading{color:rgba(0,0,0,0)}.xz-button.is-variant-white.is-loading::after{border-top-color:var(--xz-color-primary-fg-100);border-right-color:var(--xz-color-primary-fg-100)}.xz-button.is-variant-white-secondary{border:1px solid var(--xz-color-white-alpha-1000);background:rgba(0,0,0,0);color:var(--xz-color-white-alpha-1000)}@media(hover: hover){.xz-button.is-variant-white-secondary:focus{box-shadow:0 0 0 .175rem var(--xz-color-primary-line-200)}}@media(hover: hover){.xz-button.is-variant-white-secondary:hover{border:1px solid var(--xz-color-line-200);color:var(--xz-color-white-alpha-1000)}.xz-button.is-variant-white-secondary:hover::before{background:var(--xz-color-black-alpha-100)}}.xz-button.is-variant-white-secondary.is-loading{color:rgba(0,0,0,0)}.xz-button.is-variant-white-secondary.is-loading::after{border-top-color:var(--xz-color-white-alpha-1000);border-right-color:var(--xz-color-white-alpha-1000)}.xz-button[disabled],.xz-button.is-disabled{opacity:.6;cursor:not-allowed}.xz-button.is-fluid{width:100%}.xz-button.is-pill{border-radius:999px}.xz-button.is-square{aspect-ratio:1/1}@keyframes button-loading-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fastwork/xosmoz-css",
3
- "version": "0.0.24",
3
+ "version": "0.0.26",
4
4
  "description": "CSS utility classes and component styles for Xosmoz design system",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
@@ -35,7 +35,7 @@
35
35
  "clean": "rm -rf dist"
36
36
  },
37
37
  "dependencies": {
38
- "@fastwork/xosmoz-theme": "^0.0.37"
38
+ "@fastwork/xosmoz-theme": "^0.0.40"
39
39
  },
40
40
  "devDependencies": {
41
41
  "@types/node": "^20.11.0",