@moontra/moonui 6.19.0 → 6.19.2
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/index.js +185 -38
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +185 -38
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/ui/__tests__/progress-warning-error-contrast.test.ts +331 -0
- package/src/components/ui/__tests__/progress.test.tsx +9 -2
- package/src/components/ui/__tests__/slider-accent-contrast.test.ts +553 -0
- package/src/components/ui/__tests__/slider-warning-error-contrast.test.ts +478 -0
- package/src/components/ui/__tests__/slider.test.tsx +12 -4
- package/src/components/ui/__tests__/switch-variant-contrast.test.tsx +460 -0
- package/src/components/ui/__tests__/switch.test.tsx +11 -2
- package/src/components/ui/__tests__/table.test.tsx +222 -8
- package/src/components/ui/progress.tsx +25 -2
- package/src/components/ui/slider.tsx +92 -6
- package/src/components/ui/switch.tsx +44 -5
- package/src/components/ui/table.tsx +88 -43
package/dist/index.js
CHANGED
|
@@ -2586,10 +2586,70 @@ var sliderRangeVariants = classVarianceAuthority.cva(
|
|
|
2586
2586
|
// tüketici --secondary-500'ü ezerek özelleştirebilir.
|
|
2587
2587
|
// Regresyon: __tests__/slider-secondary-contrast.test.ts
|
|
2588
2588
|
secondary: "bg-[rgb(var(--secondary-500))]",
|
|
2589
|
-
accent:
|
|
2589
|
+
// #448 (#389/#407'nin `accent` kardeşi — ama ÇÖZÜM SINIFI farklı): range
|
|
2590
|
+
// `bg-accent`, track `bg-accent/20` idi — aynı yüzey token'ının iki alfası.
|
|
2591
|
+
// `--accent` HER İKİ temada da kusurluydu (warning/error'dan ağır: onlar
|
|
2592
|
+
// yalnız light'ta kusurluydu): A ekseni light 1.123 · dark 1.303 · gerçek
|
|
2593
|
+
// docs kartı (#111827) 1.162. Eşik 3:1 (WCAG 1.4.11 non-text).
|
|
2594
|
+
//
|
|
2595
|
+
// KÖK NEDEN: `--accent` bir YÜZEY token'ı — `hover:bg-accent` tinti olarak
|
|
2596
|
+
// tasarlanmış ve iki temada da kendi zeminine BİTİŞİK duruyor (light
|
|
2597
|
+
// rgb(235,239,245) beyaz üstünde, dark rgb(29,40,58) rgb(3,7,17) üstünde).
|
|
2598
|
+
// Dolgu/kenarlık rolüne yapısal olarak uygun değil; bu yüzden track'i
|
|
2599
|
+
// değiştirerek onarmak da MÜMKÜN DEĞİL (light'ta accent'ten 3:1 uzakta
|
|
2600
|
+
// duran daha açık bir yüzey yok).
|
|
2601
|
+
//
|
|
2602
|
+
// #389'un tek-orta-ton kademe araması AYNEN uygulanamadı: tokens.css'te
|
|
2603
|
+
// `--accent-50 … --accent-950` skalası YOK (skalası olan aileler:
|
|
2604
|
+
// primary/secondary/success/warning/error/brand/brand-accent).
|
|
2605
|
+
// `bg-accent-foreground` de elendi — `--accent-foreground` iki temada da
|
|
2606
|
+
// `--primary` ile BİREBİR aynı değer (varyant primary klonuna dönerdi) ve
|
|
2607
|
+
// 7 tema preset'inin 2'sinde beyaz (Creative/Nature), yani tek başına
|
|
2608
|
+
// dolgu olamaz.
|
|
2609
|
+
//
|
|
2610
|
+
// ÇÖZÜM: sistemin TEK nötr skalası olan slate (`--secondary-*`) — `--accent`
|
|
2611
|
+
// ile aynı hue ailesi (216° ↔ 215°), üstelik light temada `--accent` ile
|
|
2612
|
+
// `--secondary` BİREBİR aynı token değerini taşıyor. Tema-kör tek kademe
|
|
2613
|
+
// SEÇİLEMEDİ: bu ailede iki temayı birden geçen tek kademe 500'dür, o da
|
|
2614
|
+
// `secondary` varyantının kendi rengi (ΔE*ab = 0.0 — iki varyant klon olurdu).
|
|
2615
|
+
// Bu yüzden #442'nin `dark:` ayrımı deseni kullanıldı, tema başına ayrı kademe.
|
|
2616
|
+
// Tam tarama (11 kademe × 2 tema × 3 zemin × 2 eksen): DARK'ta eşiği geçen VE
|
|
2617
|
+
// kardeş varyantlardan ayırt edilebilen (ΔE*ab ≥ 10) TEK kademe 400
|
|
2618
|
+
// (500 = secondary klonu · ≤300 `default`/`primary` ile çakışıyor · ≥600 eşiğin
|
|
2619
|
+
// altında). LIGHT'ta {600,700,800} uygun; 700 kardeş ayrımını maksimize eder
|
|
2620
|
+
// (ΔE 21.2 · 600→12.7 · 800→14.9).
|
|
2621
|
+
// Ölçülen — A: light 1.123 → 10.081 ✓ · dark 1.303 → 7.533 ✓ · docs kartı
|
|
2622
|
+
// 1.162 → 6.717 ✓. Track `bg-accent/20` DEĞİŞMEDİ (yedi varyantın ortak deseni).
|
|
2623
|
+
// Regresyon: __tests__/slider-accent-contrast.test.ts
|
|
2624
|
+
accent: "bg-[rgb(var(--secondary-700))] dark:bg-[rgb(var(--secondary-400))]",
|
|
2590
2625
|
success: "bg-success",
|
|
2591
|
-
|
|
2592
|
-
|
|
2626
|
+
// #442 (#424/PR #440'ın slider ikizi): range `bg-warning`/`bg-error` idi —
|
|
2627
|
+
// track (`bg-warning/20` · `bg-error/20`) AYNI token'ın alfalı hâli olduğundan
|
|
2628
|
+
// LIGHT temada ayrım kayboluyordu: warning 1.835 · error 2.893 (eşik 3:1,
|
|
2629
|
+
// WCAG 1.4.11 non-text). DARK tema zaten temizdi (warning 6.97 · error 4.46).
|
|
2630
|
+
//
|
|
2631
|
+
// KÖK NEDEN: `--warning` ve `--error` tokens.css'in `.dark` bloğunda
|
|
2632
|
+
// EZİLMİYOR — iki temada aynı renk. Kardeşleri tema-uyarlanabilir olduğu
|
|
2633
|
+
// için geçiyor (`--success` light %29 → dark %36; ölçüm: success A ekseni
|
|
2634
|
+
// light 3.73 / dark 4.83). Bu iki aile o uyarlamadan yoksun.
|
|
2635
|
+
//
|
|
2636
|
+
// ÇÖZÜM: eksik tema-uyarlamasını component düzeyinde ver — light'ta skalanın
|
|
2637
|
+
// -700 kademesine in, dark'ta semantik token'a DOKUNMA (dark render bit-bit
|
|
2638
|
+
// aynı kalır, regresyon yüzeyi sıfır). Tema-KÖR bir -700 ataması dark'ı
|
|
2639
|
+
// kırardı: gerçek docs kartı (#111827) üstünde warning 2.499 ✗ · error 2.232 ✗.
|
|
2640
|
+
// Tam skala taraması (11 kademe × 2 aile × 3 zemin × 2 tema) track `/20` iken
|
|
2641
|
+
// iki temayı birden geçen kademe kümesini BOŞ buluyor → `dark:` ayrımı ZORUNLU;
|
|
2642
|
+
// #389'un tek-orta-ton (`--secondary-500`) çözümü burada uygulanamaz, çünkü
|
|
2643
|
+
// orada `--secondary` temaya göre değişiyordu. Aynı `dark:` deseni badge.tsx:51-63
|
|
2644
|
+
// ve progress.tsx:110-111'de zaten kullanılıyor.
|
|
2645
|
+
// Ölçülen sonuç — warning: light 1.835 → 4.235 ✓ · error: light 2.893 → 4.950 ✓
|
|
2646
|
+
// (dark değişmedi: 6.97 / 4.46; docs kartı 5.77 / 3.82).
|
|
2647
|
+
// Skala token'ları RGB üçlüsüdür (semantiklerin HSL'inden farklı) →
|
|
2648
|
+
// `rgb(var(--x-700))` kompozisyonu; `bg-warning-700` YAZILMADI, preset bu
|
|
2649
|
+
// ailelere sayısal skala açmıyor (#307 ölü-sınıf tuzağı).
|
|
2650
|
+
// Regresyon: __tests__/slider-warning-error-contrast.test.ts
|
|
2651
|
+
warning: "bg-[rgb(var(--warning-700))] dark:bg-warning",
|
|
2652
|
+
error: "bg-[rgb(var(--error-700))] dark:bg-error"
|
|
2593
2653
|
}
|
|
2594
2654
|
},
|
|
2595
2655
|
defaultVariants: {
|
|
@@ -2616,10 +2676,36 @@ var sliderThumbVariants = classVarianceAuthority.cva(
|
|
|
2616
2676
|
// aynı kademe: tutamaç ve dolgu tek renkte okunur.
|
|
2617
2677
|
// Regresyon: __tests__/slider-secondary-contrast.test.ts
|
|
2618
2678
|
secondary: "border-[rgb(var(--secondary-500))] bg-background",
|
|
2619
|
-
|
|
2679
|
+
// #448 EKSEN B (range'den FARKLI eksen: bileşen↔sayfa-zemini) — tutamacın
|
|
2680
|
+
// dolgusu `bg-background`, yani zeminin kendisi; ayırt edilebilirliğini
|
|
2681
|
+
// YALNIZ kenarlık taşır → non-text UI bileşeni, WCAG 1.4.11 ≥3:1.
|
|
2682
|
+
// `border-accent` iki temada da kayboluyordu: light 1.154 · dark 1.359 ·
|
|
2683
|
+
// gerçek docs kartı 1.197. Range ile AYNI kademeler seçildi — #407'nin
|
|
2684
|
+
// gerekçesi burada da geçerli: "tutamaç ve dolgu tek renkte okunur".
|
|
2685
|
+
// Ölçülen — light 1.154 → 10.355 ✓ · dark 1.359 → 7.857 ✓ · docs kartı
|
|
2686
|
+
// 1.197 → 6.919 ✓.
|
|
2687
|
+
// Regresyon: __tests__/slider-accent-contrast.test.ts
|
|
2688
|
+
accent: "border-[rgb(var(--secondary-700))] dark:border-[rgb(var(--secondary-400))] bg-background",
|
|
2620
2689
|
success: "border-success bg-background",
|
|
2621
|
-
|
|
2622
|
-
|
|
2690
|
+
// #442 EKSEN B (range'den FARKLI eksen: bileşen↔sayfa-zemini) — #407'de
|
|
2691
|
+
// `secondary` için açılan eksenin warning/error karşılığı. Tutamacın dolgusu
|
|
2692
|
+
// `bg-background`, yani zeminin kendisi; ayırt edilebilirliği YALNIZ kenarlık
|
|
2693
|
+
// taşır → non-text UI bileşeni, WCAG 1.4.11 ≥3:1.
|
|
2694
|
+
// ÖLÇÜLEN (eski değerler): warning light **2.133 ✗** · error light 3.781 ✓;
|
|
2695
|
+
// dark ikisi de rahat geçiyordu (9.45 / 5.33).
|
|
2696
|
+
//
|
|
2697
|
+
// `warning` KUSURLUYDU, düzeltildi. `error` bu eksende zaten geçiyordu ama
|
|
2698
|
+
// yine de aynı ifadeye çekildi: range light'ta -700'e indiği için kenarlık
|
|
2699
|
+
// `border-error`da bırakılsaydı LIGHT temada dolgu rgb(185,28,28), tutamaç
|
|
2700
|
+
// rgb(239,67,67) olurdu — düzeltmenin KENDİSİ iki-tonlu bir görünüm üretirdi.
|
|
2701
|
+
// #407'nin gerekçesi birebir geçerli: "tutamaç ve dolgu tek renkte okunur".
|
|
2702
|
+
// Değişim kontrastı düşürmüyor, artırıyor: error light 3.781 → 6.470.
|
|
2703
|
+
// Dark'ta `dark:border-*` semantik token'ı koruduğu için render bit-bit aynı.
|
|
2704
|
+
// Ölçülen sonuç — warning: light 2.133 → 4.923 ✓ · error: light 3.781 → 6.470 ✓
|
|
2705
|
+
// (dark değişmedi: 9.45 / 5.33; docs kartı 8.32 / 4.69).
|
|
2706
|
+
// Regresyon: __tests__/slider-warning-error-contrast.test.ts
|
|
2707
|
+
warning: "border-[rgb(var(--warning-700))] dark:border-warning bg-background",
|
|
2708
|
+
error: "border-[rgb(var(--error-700))] dark:border-error bg-background"
|
|
2623
2709
|
},
|
|
2624
2710
|
size: {
|
|
2625
2711
|
sm: "h-3 w-3",
|
|
@@ -3811,6 +3897,8 @@ var CommandShortcut = ({
|
|
|
3811
3897
|
};
|
|
3812
3898
|
CommandShortcut.displayName = "CommandShortcut";
|
|
3813
3899
|
var TableSortContext = React12__namespace.createContext(null);
|
|
3900
|
+
var TableStripedContext = React12__namespace.createContext(false);
|
|
3901
|
+
var STRIPED_ROW_CLASSES = "odd:bg-muted/50 hover:bg-accent";
|
|
3814
3902
|
function nextSortDirection(current) {
|
|
3815
3903
|
if (current === "asc")
|
|
3816
3904
|
return "desc";
|
|
@@ -3863,6 +3951,7 @@ var Table = React12__namespace.forwardRef(({
|
|
|
3863
3951
|
onRowSelectionChange: _onRowSelectionChange,
|
|
3864
3952
|
disableRowSelection: _disableRowSelection,
|
|
3865
3953
|
getRowId: _getRowId,
|
|
3954
|
+
children,
|
|
3866
3955
|
...props
|
|
3867
3956
|
}, ref) => {
|
|
3868
3957
|
const striped = variant === "striped";
|
|
@@ -3870,20 +3959,9 @@ var Table = React12__namespace.forwardRef(({
|
|
|
3870
3959
|
() => ({ sortColumn, sortDirection, onSortChange }),
|
|
3871
3960
|
[sortColumn, sortDirection, onSortChange]
|
|
3872
3961
|
);
|
|
3873
|
-
const childrenWithProps = React12__namespace.Children.map(props.children, (child) => {
|
|
3874
|
-
if (React12__namespace.isValidElement(child)) {
|
|
3875
|
-
if (child.type === "tbody") {
|
|
3876
|
-
const tbodyProps = child.props;
|
|
3877
|
-
return React12__namespace.cloneElement(child, {
|
|
3878
|
-
className: cn(tbodyProps.className, striped && "even:[&>tr]:bg-muted/50")
|
|
3879
|
-
});
|
|
3880
|
-
}
|
|
3881
|
-
}
|
|
3882
|
-
return child;
|
|
3883
|
-
});
|
|
3884
3962
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full overflow-auto", children: [
|
|
3885
3963
|
loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-background/60 flex items-center justify-center z-10", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent" }) }),
|
|
3886
|
-
/* @__PURE__ */ jsxRuntime.jsx(TableSortContext.Provider, { value: sortContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3964
|
+
/* @__PURE__ */ jsxRuntime.jsx(TableSortContext.Provider, { value: sortContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(TableStripedContext.Provider, { value: striped, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3887
3965
|
"table",
|
|
3888
3966
|
{
|
|
3889
3967
|
ref,
|
|
@@ -3893,13 +3971,13 @@ var Table = React12__namespace.forwardRef(({
|
|
|
3893
3971
|
className
|
|
3894
3972
|
),
|
|
3895
3973
|
...props,
|
|
3896
|
-
children
|
|
3974
|
+
children
|
|
3897
3975
|
}
|
|
3898
|
-
) })
|
|
3976
|
+
) }) })
|
|
3899
3977
|
] });
|
|
3900
3978
|
});
|
|
3901
3979
|
Table.displayName = "Table";
|
|
3902
|
-
var TableHeader = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: cn("moonui-theme", "[&_tr]:border-b", className), ...props }));
|
|
3980
|
+
var TableHeader = React12__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: cn("moonui-theme", "[&_tr]:border-b", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(TableStripedContext.Provider, { value: false, children }) }));
|
|
3903
3981
|
TableHeader.displayName = "TableHeader";
|
|
3904
3982
|
var TableBody = React12__namespace.forwardRef(({ className, emptyContent, emptyMessage = "No data available", children, ...props }, ref) => {
|
|
3905
3983
|
const hasChildren = React12__namespace.Children.count(children) > 0;
|
|
@@ -3914,26 +3992,31 @@ var TableBody = React12__namespace.forwardRef(({ className, emptyContent, emptyM
|
|
|
3914
3992
|
);
|
|
3915
3993
|
});
|
|
3916
3994
|
TableBody.displayName = "TableBody";
|
|
3917
|
-
var TableFooter = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
3995
|
+
var TableFooter = React12__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
3918
3996
|
"tfoot",
|
|
3919
3997
|
{
|
|
3920
3998
|
ref,
|
|
3921
3999
|
className: cn("moonui-theme", "bg-primary text-primary-foreground font-medium", className),
|
|
3922
|
-
...props
|
|
4000
|
+
...props,
|
|
4001
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(TableStripedContext.Provider, { value: false, children })
|
|
3923
4002
|
}
|
|
3924
4003
|
));
|
|
3925
4004
|
TableFooter.displayName = "TableFooter";
|
|
3926
|
-
var TableRow = React12__namespace.forwardRef(({ className, ...props }, ref) =>
|
|
3927
|
-
|
|
3928
|
-
|
|
3929
|
-
|
|
3930
|
-
|
|
3931
|
-
|
|
3932
|
-
className
|
|
3933
|
-
|
|
3934
|
-
|
|
3935
|
-
|
|
3936
|
-
)
|
|
4005
|
+
var TableRow = React12__namespace.forwardRef(({ className, ...props }, ref) => {
|
|
4006
|
+
const striped = React12__namespace.useContext(TableStripedContext);
|
|
4007
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
4008
|
+
"tr",
|
|
4009
|
+
{
|
|
4010
|
+
ref,
|
|
4011
|
+
className: cn(
|
|
4012
|
+
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
|
|
4013
|
+
striped && STRIPED_ROW_CLASSES,
|
|
4014
|
+
className
|
|
4015
|
+
),
|
|
4016
|
+
...props
|
|
4017
|
+
}
|
|
4018
|
+
);
|
|
4019
|
+
});
|
|
3937
4020
|
TableRow.displayName = "TableRow";
|
|
3938
4021
|
var TableHead = React12__namespace.forwardRef(
|
|
3939
4022
|
({ className, sortable, sorted, onSort, columnId, align = "left", children, ...props }, ref) => {
|
|
@@ -4948,8 +5031,31 @@ var progressIndicatorVariants = classVarianceAuthority.cva(
|
|
|
4948
5031
|
// Regresyon: __tests__/progress-secondary-contrast.test.ts
|
|
4949
5032
|
secondary: "bg-[rgb(var(--secondary-500))]",
|
|
4950
5033
|
success: "bg-success",
|
|
4951
|
-
|
|
4952
|
-
|
|
5034
|
+
// #424 (#372'nin kardeşi): dolgu `bg-warning`/`bg-error` idi — track
|
|
5035
|
+
// (`bg-warning/20` · `bg-error/20`) AYNI token'ın alfalı hâli olduğundan
|
|
5036
|
+
// LIGHT temada ayrım kayboluyordu: warning 1.83 · error 2.89 (eşik 3:1,
|
|
5037
|
+
// WCAG 1.4.11). DARK tema zaten temizdi (warning 6.97 · error 4.46).
|
|
5038
|
+
//
|
|
5039
|
+
// KÖK NEDEN: `--warning` ve `--error` tokens.css'te `.dark` bloğunda
|
|
5040
|
+
// EZİLMİYOR — iki temada aynı renk. Kardeşleri `--success` (light 29% →
|
|
5041
|
+
// dark 36%) ve `--primary` tema-uyarlanabilir olduğu için eşiği geçiyor;
|
|
5042
|
+
// bu iki aile o uyarlamadan yoksun kaldığı için light'ta kalıyor.
|
|
5043
|
+
//
|
|
5044
|
+
// ÇÖZÜM: eksik tema-uyarlamasını component düzeyinde ver — light'ta
|
|
5045
|
+
// skalanın -700 kademesine in, dark'ta semantik token'a DOKUNMA.
|
|
5046
|
+
// Tema-KÖR bir -700 ataması dark'ı kırardı (docs kartında warning 2.50 ✗
|
|
5047
|
+
// · error 2.23 ✗); `dark:` ayrımı tam olarak bunu önler ve dark render'ı
|
|
5048
|
+
// bit-bit aynı bırakır. Aynı desen badge.tsx:51-63'te zaten kullanılıyor.
|
|
5049
|
+
// Track alfaları BİLEREK `/20` kaldı: altı varyantın tamamı o konvansiyonu
|
|
5050
|
+
// paylaşıyor ve alfayı düşürmek track↔zemin ayrımını zayıflatırdı
|
|
5051
|
+
// (warning 1.162 → 1.081). Ölçülen sonuç — warning: light 4.24 ✓ /
|
|
5052
|
+
// dark 6.97 ✓ (docs kartı #111827: 5.77) · error: light 4.95 ✓ /
|
|
5053
|
+
// dark 4.46 ✓ (docs kartı 3.82). Skala token'ları RGB üçlüsüdür
|
|
5054
|
+
// (semantiklerin HSL'inden farklı) → `rgb(var(--x-700))` kompozisyonu;
|
|
5055
|
+
// `bg-warning-700` YAZILMADI, preset o sınıfı üretmez (#307 ölü-sınıf).
|
|
5056
|
+
// Regresyon: __tests__/progress-warning-error-contrast.test.ts
|
|
5057
|
+
warning: "bg-[rgb(var(--warning-700))] dark:bg-warning",
|
|
5058
|
+
error: "bg-[rgb(var(--error-700))] dark:bg-error"
|
|
4953
5059
|
},
|
|
4954
5060
|
animation: {
|
|
4955
5061
|
default: "transition-all duration-500",
|
|
@@ -8054,12 +8160,53 @@ var switchVariants = classVarianceAuthority.cva(
|
|
|
8054
8160
|
md: "h-6 w-11",
|
|
8055
8161
|
lg: "h-7 w-14"
|
|
8056
8162
|
},
|
|
8163
|
+
// #454 — checked track'in İKİ ekseni de ölçüldü (eşik 3:1, WCAG 1.4.11
|
|
8164
|
+
// non-text UI). Switch'te bu iki eksen AYNI sayıyı verir, çünkü thumb
|
|
8165
|
+
// `bg-background` taşır (switchThumbVariants tabanı):
|
|
8166
|
+
// A) checked track ↔ sayfa/kart zemini → kontrol "açık" okunuyor mu?
|
|
8167
|
+
// B) thumb ↔ checked track → tutamacın KONUMU görülüyor mu?
|
|
8168
|
+
// Ölçüm zeminleri: `--background` · `--card` · docs kabuğunun gerçek koyu
|
|
8169
|
+
// kartı (#111827). Regresyon: __tests__/switch-variant-contrast.test.tsx
|
|
8057
8170
|
variant: {
|
|
8058
8171
|
primary: "data-[state=checked]:bg-primary",
|
|
8172
|
+
// light 4.920 · dark 19.256 ✓
|
|
8059
8173
|
success: "data-[state=checked]:bg-success",
|
|
8060
|
-
|
|
8174
|
+
// light 4.904 · dark 6.043 ✓
|
|
8175
|
+
// #454 kardeş kusuru (#424/PR #440 progress · #442/PR #446 slider ile AYNI
|
|
8176
|
+
// sınıf, üçüncü component): `--warning` tokens.css'in `.dark` bloğunda
|
|
8177
|
+
// EZİLMİYOR, yani iki temada da aynı turuncu. Dark'ta zemin koyu olduğu
|
|
8178
|
+
// için geçiyor (9.446), LIGHT'ta beyaz üstünde 2.133 ✗ — açık temada
|
|
8179
|
+
// checked warning switch'in tutamacı da kayboluyordu (B ekseni 2.133).
|
|
8180
|
+
// ÇÖZÜM (emsalle birebir aynı şekil): eksik tema-uyarlamasını component
|
|
8181
|
+
// düzeyinde ver — light'ta skalanın -700 kademesine in, dark'ta semantik
|
|
8182
|
+
// token'a DOKUNMA (dark render bit-bit aynı kalır, regresyon yüzeyi sıfır).
|
|
8183
|
+
// Light'ta eşiği geçen kademe kümesi {700,800,900,950}; en açık olanı
|
|
8184
|
+
// seçildi (turuncu kimliğini en çok koruyan). Ölçülen: 2.133 → 4.923 ✓.
|
|
8185
|
+
warning: "data-[state=checked]:bg-[rgb(var(--warning-700))] dark:data-[state=checked]:bg-warning",
|
|
8061
8186
|
destructive: "data-[state=checked]:bg-error",
|
|
8062
|
-
|
|
8187
|
+
// light 3.781 · dark 5.328 ✓ (dokunulmadı)
|
|
8188
|
+
// #454 asıl kusuru: `secondary` varyantı `bg-accent` kullanıyordu — ADI
|
|
8189
|
+
// `secondary`, TOKEN'ı `accent`. `--accent` bir YÜZEY token'ı (`hover:bg-accent`
|
|
8190
|
+
// tinti) ve iki temada da kendi zeminine bitişik: light rgb(235,239,245)
|
|
8191
|
+
// beyaz üstünde 1.154 · dark rgb(29,40,58) 1.359 · docs kartı 1.197.
|
|
8192
|
+
// Yani checked switch hem sayfadan hem de kendi tutamacından ayrışmıyordu:
|
|
8193
|
+
// "açık" durum GÖRÜNMÜYORDU (switch'in tek işi durumu göstermek).
|
|
8194
|
+
//
|
|
8195
|
+
// AD ↔ TOKEN KARARI: varyant kendi ailesine, `--secondary-*` slate skalasına
|
|
8196
|
+
// bağlandı. `bg-secondary` (semantik) BİLEREK seçilmedi — light'ta `--accent`
|
|
8197
|
+
// ile BİREBİR aynı değer (1.154), dark'ta daha da kötü (1.007). Skala
|
|
8198
|
+
// taraması (11 kademe × 2 tema × 3 zemin × 2 eksen + kardeş ΔE*ab ≥ 10 klon
|
|
8199
|
+
// filtresi): light {500,600,700,800,900,950} · dark {300,400,500} → iki
|
|
8200
|
+
// temayı birden geçen TEK kademe **500**, yani `dark:` ayrımına gerek yok.
|
|
8201
|
+
// #448'in slider'daki 700/400 ayrımı burada GEREKMEZ ve İSTENMEZ: orada 500
|
|
8202
|
+
// elenmişti çünkü slider'ın `secondary` varyantı zaten o rengi kullanıyordu
|
|
8203
|
+
// (ΔE = 0.0 → klon). Switch'in `accent` adlı bir varyantı YOK, dolayısıyla
|
|
8204
|
+
// 500 serbest ve kardeşlerden ayrık (ΔE: primary 69.5/51.6 · success
|
|
8205
|
+
// 63.6/74.8 · warning 96.0 · destructive 85.0 — hepsi ≥ 10).
|
|
8206
|
+
// Yan fayda: slider'ın `secondary` varyantı da #389/PR #406'da aynı kademeye
|
|
8207
|
+
// sabitlenmişti → aynı varyant adı artık iki component'te aynı rengi veriyor.
|
|
8208
|
+
// Ölçülen: A/B light 1.154 → 4.759 ✓ · dark 1.359 → 4.234 ✓ · kart 1.197 → 3.728 ✓.
|
|
8209
|
+
secondary: "data-[state=checked]:bg-[rgb(var(--secondary-500))]"
|
|
8063
8210
|
}
|
|
8064
8211
|
},
|
|
8065
8212
|
defaultVariants: {
|