@moontra/moonui 6.28.0 → 6.29.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/dist/cdn/moonui.css +2 -2
- package/dist/cdn/moonui.esm.js +3 -3
- package/dist/cdn/moonui.global.js +3 -3
- package/dist/index.js +157 -16
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +157 -16
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/__tests__/issue-646-dark-scope-override.test.tsx +19 -2
- package/src/__tests__/issue-708-badge-outline-override.test.tsx +319 -0
- package/src/__tests__/issue-715-button-override-hover.test.tsx +631 -0
- package/src/components/ui/__tests__/select.test.tsx +13 -3
- package/src/components/ui/badge.tsx +25 -1
- package/src/components/ui/button.tsx +131 -14
- package/src/components/ui/select.tsx +1 -1
- package/src/styles/tokens.css +45 -1
package/dist/index.js
CHANGED
|
@@ -472,12 +472,36 @@ var badgeVariants = classVarianceAuthority.cva(
|
|
|
472
472
|
"focus-visible:ring-gray-400/30 dark:focus-visible:ring-gray-500/40",
|
|
473
473
|
"dark:bg-gray-700/50 dark:text-gray-50 dark:shadow-inner dark:shadow-gray-950/10"
|
|
474
474
|
],
|
|
475
|
+
// #708 kalem 3: `outline` varyantı TÜKETİCİYİ EZİYORDU — #715'in `button`da
|
|
476
|
+
// kapattığı deliğin birebir aynısı. `cn()` = `twMerge(clsx(...))`; tüketici
|
|
477
|
+
// `className="text-white"` yazınca twMerge ÖNEKSİZ `text-foreground`u eler,
|
|
478
|
+
// ama `dark:text-gray-100` AYRI modifier grubu olduğu için ELENMEZ ve koyu
|
|
479
|
+
// temada özgüllükle kazanır: (0,2,0) > (0,1,0).
|
|
480
|
+
//
|
|
481
|
+
// Ölçülen sonuç (docs "PRO" rozeti, `from-brand-600 to-brand-accent-600`
|
|
482
|
+
// gradyanı üstünde, `text-xs` = küçük metin → AA 4.5:1):
|
|
483
|
+
// light beyaz → en kötü uç 4.60 ✓ (tüketicinin istediği renk)
|
|
484
|
+
// dark gray-100 → en kötü uç 4.18 ✗ (varyantın dayattığı renk)
|
|
485
|
+
// A18-V 10/10 sayfada ölçtü; axe bunu `violations`a HİÇ yazmıyor (gradyan
|
|
486
|
+
// zemin → `incomplete` kovası), bu yüzden 11 koşu boyunca görülmedi.
|
|
487
|
+
//
|
|
488
|
+
// #715'in AYRIMI satır satır uygulandı:
|
|
489
|
+
// · `dark:bg-transparent` → öneksiz `bg-transparent` zaten aşağıda ve
|
|
490
|
+
// `outline`da başka `bg-*` yok (sıralama guard'ı da değil) → SAF TEKRAR,
|
|
491
|
+
// kaldırıldı.
|
|
492
|
+
// · `dark:text-gray-100` → öneksiz ikizinden (`--foreground` dark =
|
|
493
|
+
// rgb(225,231,239)) FARKLI bir değere gidiyordu, ama fark rozetin kendi
|
|
494
|
+
// okunurluğunda ölçülemeyecek kadar küçük (koyu kart üstünde 15.0 → 13.5;
|
|
495
|
+
// ikisi de AA'nın çok üstünde) ve karşılığında tüketicinin AA'yı GEÇEN
|
|
496
|
+
// `text-white`ını eziyordu → kaldırıldı.
|
|
497
|
+
// · `dark:backdrop-blur-sm` → öneksiz ikizi yok, koyu-temaya özgü gerçek
|
|
498
|
+
// bir efekt → KORUNDU.
|
|
475
499
|
outline: [
|
|
476
500
|
"border-gray-200 dark:border-gray-600",
|
|
477
501
|
"bg-transparent text-foreground",
|
|
478
502
|
"hover:border-gray-300 dark:hover:border-gray-500",
|
|
479
503
|
"focus-visible:ring-gray-400/30 dark:focus-visible:ring-gray-500/40",
|
|
480
|
-
"dark:
|
|
504
|
+
"dark:backdrop-blur-sm"
|
|
481
505
|
],
|
|
482
506
|
// #544: `bg-error` (= --error, #ef4343) beyaz metinle 3.78 veriyordu (AA 4.5 ister),
|
|
483
507
|
// `dark:bg-error/90` ise gerçek koyu kart (#111827) üstünde 4.43 ile kalıyordu.
|
|
@@ -832,11 +856,68 @@ var buttonVariants = classVarianceAuthority.cva(
|
|
|
832
856
|
{
|
|
833
857
|
variants: {
|
|
834
858
|
variant: {
|
|
859
|
+
// #715 Dal 1 — GEREKSİZ `dark:` TEKRARI KALDIRILDI.
|
|
860
|
+
// `--primary` ve `--primary-foreground` `.dark` bloğunda ZATEN farklı değer
|
|
861
|
+
// alıyor (tokens.css:129/137 ↔ :545/546), yani öneksiz `bg-primary
|
|
862
|
+
// text-primary-foreground` iki temada da doğru çifti veriyor. `dark:` ikizi
|
|
863
|
+
// hiçbir şey KAZANDIRMIYOR, yalnız özgüllüğü şişiriyordu:
|
|
864
|
+
// .dark\:text-primary-foreground:is(.dark *) → (0,2,0)
|
|
865
|
+
// tüketicinin text-white → (0,1,0)
|
|
866
|
+
// `cn()` = twMerge: tüketici `text-white` yazınca twMerge öneksiz
|
|
867
|
+
// `text-primary-foreground`u ELER ama `dark:` ikizi AYRI modifier grubu
|
|
868
|
+
// olduğu için KALIR → koyu temada metin sessizce dark
|
|
869
|
+
// `--primary-foreground`a (222.2 47.4% 1.2% = rgb(2,2,5)) düşüyordu.
|
|
870
|
+
// Ölçüldü: beyaz metin beklerken 1.28:1 (docs/click-animations gradyan
|
|
871
|
+
// butonları). Öneksiz satır kaldığı için TEMA DAVRANIŞI DEĞİŞMEZ.
|
|
872
|
+
// Kardeş presedans: #533/#646 badge'de `dark:bg-primary/90`ı aynı gerekçeyle
|
|
873
|
+
// kaldırdı; button'a o turda uğranmamıştı.
|
|
874
|
+
//
|
|
875
|
+
// #715 Dal 3 — `primary`nin hover/active ALFA kompoziti AA altındaydı;
|
|
876
|
+
// `destructive`in (Dal 2) birebir aynı kusuru. `/90` ve `/80` zemini BEYAZLA
|
|
877
|
+
// karıştırıp rengi AÇIYOR, metin ise sabit `--primary-foreground` (#f8fafc):
|
|
878
|
+
// resting bg-primary #1067f4 → 4.70 ✓ (#442: geçiyor → DOKUNULMADI)
|
|
879
|
+
// hover bg-primary/90 #2876f5 → 4.01 ✗
|
|
880
|
+
// active bg-primary/80 #4085f6 → 3.40 ✗
|
|
881
|
+
// Koyu tema ZATEN geçiyor (near-white zemin + near-black metin: 19.80 /
|
|
882
|
+
// 15.96 / 12.50) → düzeltmenin onu bozmaması ŞART.
|
|
883
|
+
//
|
|
884
|
+
// ⚠️ Dal 2'nin çözümü (alfa yerine opak `error-NNN` kademesi) BURADA
|
|
885
|
+
// UYGULANAMAZ — `primary`nin skala ailesi YANLIŞ HUE'DA:
|
|
886
|
+
// --primary 217.2 91.2% 51% = #1067f4 (blue, h≈217)
|
|
887
|
+
// --primary-700 3 105 161 = #0369a1 (sky, h≈199)
|
|
888
|
+
// `--primary-50…950` (tokens.css:15-25) Tailwind SKY paleti; `--primary`nin
|
|
889
|
+
// koyusu DEĞİL, başka bir renk. Üstüne preset o kademeleri hiçbir utility'ye
|
|
890
|
+
// bağlamıyor → `bg-primary-700` bugün HİÇ CSS ÜRETMEYEN ölü sınıf (#713).
|
|
891
|
+
// Ölçülen adaylar ve RET gerekçeleri:
|
|
892
|
+
// · preset'e sky kademelerini bağla → açık temada 5.67 ✓, AMA (a) görünür
|
|
893
|
+
// hue kayması, (b) `bg-primary-600` (3.91 ✗) "primary'nin koyusu" sanılan
|
|
894
|
+
// yanıltıcı public API, (c) öneksiz sınıf koyu temada DA uygulanır ve
|
|
895
|
+
// near-black metinle 3.49'a ÇÖKER. → RET
|
|
896
|
+
// · `bg-blue-700` (6.41 ✓) → token'ı by-pass eder; tüketici `--primary`yi
|
|
897
|
+
// override edince hover mavide takılı kalır. → RET
|
|
898
|
+
// · `bg-primary-subtle-foreground` (#0950c3, 6.81 ✓, doğru hue, sınıf ZATEN
|
|
899
|
+
// üretiliyor) → FOREGROUND rolündeki token'ı ZEMİN yapmak iki rolü
|
|
900
|
+
// birbirine kilitler. → RET
|
|
901
|
+
// SEÇİLEN: koyu tonu `--primary`nin KENDİSİNDEN türet (`color-mix`, siyaha
|
|
902
|
+
// doğru). Tek öneksiz sınıf iki temada da doğru sonuç verir ve tüketici
|
|
903
|
+
// `--primary`yi değiştirdiğinde hover/active KENDİLİĞİNDEN uyar —
|
|
904
|
+
// tokens.css:120-128'in bilinçle koruduğu sözleşme bozulmaz.
|
|
905
|
+
// GERÇEK TARAYICIDA ÖLÇÜLDÜ (headless Chrome 140, piksel örneklemesi):
|
|
906
|
+
// hover 85% + black açık #0e57cf → 6.11 ✓ | koyu #d3d4d6 → 13.97 ✓
|
|
907
|
+
// active 75% + black açık #0c4db7 → 7.27 ✓ | koyu #babbbd → 10.79 ✓
|
|
908
|
+
// (Testteki kanal-bazlı model 1/255 yuvarlama farkıyla #0e58cf → 6.05 der;
|
|
909
|
+
// ikisi de eşiğin çok üstünde. `color-mix` gerçekten ÇÖZÜLÜYOR — tarayıcı
|
|
910
|
+
// `color(srgb 0.053652 0.342337 0.813348)` döndürüyor, yani sınıf ölü değil.)
|
|
911
|
+
// `dark:` GUARD GEREKMEZ: Dal 1'den sonra dizide hiç `dark:bg-*` yok; tek
|
|
912
|
+
// rakip öneksiz `bg-primary` (0,1,0) ve `hover:`/`active:` (0,2,0) onu yener.
|
|
913
|
+
// `[color:…]` ETİKETİ BİLEREK yazıldı: sınıfın renk olarak tanınmasını hem
|
|
914
|
+
// Tailwind'in hem twMerge'ün tip ÇIKARIMINA bırakmaz. (Etiketsiz form da
|
|
915
|
+
// bugün doğru çalışıyor — ikisi de deterministik probe'la ölçüldü — ama
|
|
916
|
+
// #715'in tamamı "sessizce yanlış sınıflandırılan sınıf" hikâyesidir.)
|
|
835
917
|
primary: [
|
|
836
918
|
"bg-primary text-primary-foreground",
|
|
837
|
-
"
|
|
838
|
-
"
|
|
839
|
-
"active:bg-primary/80 dark:active:bg-primary/80",
|
|
919
|
+
"hover:bg-[color:color-mix(in_srgb,hsl(var(--primary))_85%,black)]",
|
|
920
|
+
"active:bg-[color:color-mix(in_srgb,hsl(var(--primary))_75%,black)]",
|
|
840
921
|
"shadow-sm hover:shadow-md",
|
|
841
922
|
"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
842
923
|
"transition-all duration-200"
|
|
@@ -850,12 +931,18 @@ var buttonVariants = classVarianceAuthority.cva(
|
|
|
850
931
|
"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
851
932
|
"shadow-sm hover:shadow-md"
|
|
852
933
|
],
|
|
934
|
+
// #715 Dal 1 — `outline`ın DÖRT `dark:` satırı da aynı token'ın tekrarıydı
|
|
935
|
+
// (`--background`/`--foreground`/`--input`/`--accent(-foreground)` hepsi
|
|
936
|
+
// `.dark` bloğunda tanımlı) → kaldırıldı. Kaskad davranışı korunuyor:
|
|
937
|
+
// Tailwind 3.4.17 çıktısında `hover:`/`active:` kuralları `dark:`ten ÖNCE
|
|
938
|
+
// yazılıyor, yani rakip `dark:bg-background` (0,2,0) gitmeden `hover:bg-accent`
|
|
939
|
+
// (0,2,0) koyu temada kaybederdi — bu yüzden satırlar TEK TEK değil,
|
|
940
|
+
// varyant bazında BÜTÜN olarak kaldırıldı.
|
|
853
941
|
outline: [
|
|
854
942
|
"bg-background text-foreground",
|
|
855
|
-
"
|
|
856
|
-
"
|
|
857
|
-
"
|
|
858
|
-
"active:bg-accent/80 dark:active:bg-accent/80",
|
|
943
|
+
"border border-input",
|
|
944
|
+
"hover:bg-accent hover:text-accent-foreground",
|
|
945
|
+
"active:bg-accent/80",
|
|
859
946
|
"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
860
947
|
"transition-all duration-200"
|
|
861
948
|
],
|
|
@@ -876,11 +963,34 @@ var buttonVariants = classVarianceAuthority.cva(
|
|
|
876
963
|
// Not: `dark:bg-destructive` KALDIRILDI, yanına eklenmedi — iki `dark:bg-*`
|
|
877
964
|
// utility'si aynı anda yazılırsa hangisinin kazanacağını sınıf dizgesi sırası
|
|
878
965
|
// DEĞİL Tailwind'in kendi iç sıralaması belirler.
|
|
966
|
+
//
|
|
967
|
+
// #715 Dal 2 — #544 yalnız RESTING durumu ölçmüştü; alfa harmanlı DURUM
|
|
968
|
+
// dalları sayılmadı. Açık temada `/90` ve `/80` zemini BEYAZLA karıştırıp
|
|
969
|
+
// rengi AÇIYOR, yani AA'yı düşürüyor (metin sabit `--destructive-foreground`
|
|
970
|
+
// #f8fafc):
|
|
971
|
+
// resting bg-destructive #e11313 → 4.66 ✓ (#544'ün ölçtüğü)
|
|
972
|
+
// hover bg-destructive/90 #e42b2b → 4.29 ✗ (axe: 4.28, serious)
|
|
973
|
+
// active bg-destructive/80 #e74242 → 3.82 ✗
|
|
974
|
+
// Çözüm koyu dalın ZATEN kullandığı yaklaşım: alfa yerine opak `error`
|
|
975
|
+
// kademesi. Açık dal da aynı kademelere bağlandı:
|
|
976
|
+
// hover bg-error-700 #b91c1c → 6.18 ✓
|
|
977
|
+
// active bg-error-800 #991b1b → 7.94 ✓
|
|
978
|
+
// Yan fayda: durum ilerlemesi artık tutarlı KOYULAŞIYOR (e11313 → b91c1c →
|
|
979
|
+
// 991b1b); alfa sürümünde active, hover'dan DAHA AÇIK oluyordu.
|
|
980
|
+
// `--destructive` token'ına ve resting sınıfına DOKUNULMADI (#442).
|
|
981
|
+
//
|
|
982
|
+
// ⚠️ `dark:hover:`/`dark:active:` ikizleri öneksiziyle aynı değeri taşısa da
|
|
983
|
+
// KALDIRILAMAZ — `dark:bg-error-600` (resting, farklı değer) hâlâ gerekli ve
|
|
984
|
+
// Tailwind 3.4.17 `dark:`i `hover:`ten SONRA yazıyor (aynı özgüllük, 0,2,0):
|
|
985
|
+
// .hover\:bg-error-700:hover < .dark\:bg-error-600:is(.dark *)
|
|
986
|
+
// Öneki atarsak koyu temada hover, resting rengine geri düşer. `dark:hover:`
|
|
987
|
+
// (0,3,0) bu sıralamayı yener. Bu, Dal 1'deki "gereksiz tekrar"dan farklıdır:
|
|
988
|
+
// burada satırın ÖLÇÜLEBİLİR bir işlevi var.
|
|
879
989
|
destructive: [
|
|
880
990
|
"bg-destructive text-destructive-foreground",
|
|
881
|
-
"dark:bg-error-600
|
|
882
|
-
"hover:bg-
|
|
883
|
-
"active:bg-
|
|
991
|
+
"dark:bg-error-600",
|
|
992
|
+
"hover:bg-error-700 dark:hover:bg-error-700",
|
|
993
|
+
"active:bg-error-800 dark:active:bg-error-800",
|
|
884
994
|
"shadow-sm hover:shadow-md",
|
|
885
995
|
"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
886
996
|
"transition-all duration-200"
|
|
@@ -891,10 +1001,38 @@ var buttonVariants = classVarianceAuthority.cva(
|
|
|
891
1001
|
// dokunulmadı (#442 kuralı: geçen yüzeyde regresyon riski açma).
|
|
892
1002
|
// Dolgu opak `success` skalasına bağlandı: -600 hâlâ 3.15, ölçümle geçen
|
|
893
1003
|
// en açık kademe -700 (4.79).
|
|
1004
|
+
// #715 Dal 1: `dark:text-success-foreground` gereksiz tekrardı (aynı token,
|
|
1005
|
+
// `.dark` bloğunda tanımlı) → kaldırıldı. `dark:bg-success-700` FARKLI bir
|
|
1006
|
+
// değere işaret ettiği için KALDI.
|
|
1007
|
+
//
|
|
1008
|
+
// #715 Dal 3 — AÇIK temanın hover/active alfası da AA altındaydı
|
|
1009
|
+
// (metin sabit `--success-foreground` #f8fafc, zemin beyaz):
|
|
1010
|
+
// resting bg-success #12823b → 4.69 ✓ (#442 → DOKUNULMADI)
|
|
1011
|
+
// hover bg-success/90 #2a8f4f → 3.90 ✗
|
|
1012
|
+
// active bg-success/80 #419b62 → 3.30 ✗
|
|
1013
|
+
// Burada `destructive`in çözümü AYNEN geçerli, çünkü `--success-NNN`
|
|
1014
|
+
// skalası `--success` ile AYNI hue'da (#15803d ↔ #12823b) — `primary`den
|
|
1015
|
+
// ayrıldığı nokta tam da bu. Açık dal, KOYU dalın zaten kullandığı
|
|
1016
|
+
// kademelere bağlandı (tek kaynak, tutarlı ilerleme):
|
|
1017
|
+
// hover bg-success-800 #166534 → 6.81 ✓
|
|
1018
|
+
// active bg-success-900 #14532d → 8.71 ✓
|
|
1019
|
+
// -700 (4.79) BİLEREK seçilmedi: hem eşiğe fazla yakın hem de `bg-success`
|
|
1020
|
+
// ile neredeyse aynı renk (#15803d ↔ #12823b) — hover geri bildirimi
|
|
1021
|
+
// görünmez olurdu.
|
|
1022
|
+
//
|
|
1023
|
+
// ⚠️ `dark:hover:`/`dark:active:` ikizleri artık öneksiziyle AYNI değeri
|
|
1024
|
+
// taşıyor ama KALDIRILAMAZ — `destructive`teki sıralama guard'ının aynısı.
|
|
1025
|
+
// Tailwind 3.4.17 çıktısı (deterministik CLI probe'uyla doğrulandı) `dark:`i
|
|
1026
|
+
// `hover:`ten SONRA yazıyor ve ikisi de (0,2,0):
|
|
1027
|
+
// .hover\:bg-success-800:hover < .dark\:bg-success-700:is(.dark *)
|
|
1028
|
+
// `dark:hover:` (0,3,0) bu sıralamayı yener. GERÇEK TARAYICIDA KANITLANDI:
|
|
1029
|
+
// guard'sız ikinci bir buton üretilip koyu temada hover'landığında zemin
|
|
1030
|
+
// rgb(21,128,61)'de KALDI (= resting/-700, hover HİÇ uygulanmadı);
|
|
1031
|
+
// guard'lı buton rgb(22,101,52)'ye (-800) geçti.
|
|
894
1032
|
"bg-success text-success-foreground",
|
|
895
|
-
"dark:bg-success-700
|
|
896
|
-
"hover:bg-success
|
|
897
|
-
"active:bg-success
|
|
1033
|
+
"dark:bg-success-700",
|
|
1034
|
+
"hover:bg-success-800 dark:hover:bg-success-800",
|
|
1035
|
+
"active:bg-success-900 dark:active:bg-success-900",
|
|
898
1036
|
"shadow-sm hover:shadow-md",
|
|
899
1037
|
"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
900
1038
|
"transition-all duration-200"
|
|
@@ -944,7 +1082,10 @@ var buttonVariants = classVarianceAuthority.cva(
|
|
|
944
1082
|
// üretiyor, `--primary-foreground` ise koyu — ikisi birbirini yiyordu.
|
|
945
1083
|
// #354'ün sidebar'da kanıtlanmış çözümü: subtle token ÇİFTİ (zemin+metin
|
|
946
1084
|
// birlikte tanımlı, koyu temada koyu zemin + açık metin).
|
|
947
|
-
|
|
1085
|
+
// #715 Dal 1: bu çift ARTIK yukarıdaki öneksiz satırdan geliyor —
|
|
1086
|
+
// `dark:bg-primary-subtle dark:text-primary-subtle-foreground` aynı token'ın
|
|
1087
|
+
// tekrarıydı, kaldırıldı (#686'nın çözümü aynen KORUNUYOR, yalnız tek
|
|
1088
|
+
// yerden yazılıyor). Hover/active dalları FARKLI alfa taşıdığı için KALDI.
|
|
948
1089
|
"dark:hover:bg-primary/30 dark:active:bg-primary/40",
|
|
949
1090
|
"transition-colors duration-200"
|
|
950
1091
|
],
|
|
@@ -6698,7 +6839,7 @@ var SelectItem = React12__namespace.forwardRef(({ className, children, variant =
|
|
|
6698
6839
|
variant === "subtle" && "focus:bg-gray-100 dark:focus:bg-gray-800 focus:text-foreground dark:focus:text-gray-200",
|
|
6699
6840
|
variant === "destructive" && "text-destructive-subtle-foreground focus:bg-destructive-subtle focus:text-destructive-subtle-foreground",
|
|
6700
6841
|
variant === "success" && "text-success-subtle-foreground focus:bg-success-subtle focus:text-success-subtle-foreground",
|
|
6701
|
-
variant === "warning" && "text-warning-
|
|
6842
|
+
variant === "warning" && "text-warning-subtle-foreground focus:bg-warning-subtle focus:text-warning-subtle-foreground",
|
|
6702
6843
|
className
|
|
6703
6844
|
),
|
|
6704
6845
|
...props,
|