@ahmetilhn/hanui 3.3.1 → 4.0.0

package/build/index.d.ts

@@ -455,26 +455,21 @@ export declare type CommonElementProps = Partial<{
     testId: string;
 }>;
 
-/** YOĞUN (compact) KİP — `<html data-hanui-density="compact">`. */
+/**
+ * YOĞUN (compact) KİP — `<html data-hanui-density="compact">`.
+ *
+ * <p>⚠ <strong>17 SABİT DEĞER İKİ ÇARPANA İNDİ.</strong> Eski kip ölçeğin her
+ * kademesini elle eziyordu ve o değerler (11/12/13/15/16/18/21/25/31/39)
+ * akışkan ölçeğin mobil tabanlarıyla **neredeyse birebir aynıydı**. Sonuç:
+ * yoğun kipi açan panel bir telefonda küçülmeyi İKİ KEZ yiyor, `2xs` 10px'in
+ * altına düşüyordu. Ezme yerine çarpma, ikisini yapısal olarak uzlaştırıyor.
+ *
+ * <p>İkinci kazanç: kip artık ölçeğin ÜST ucunu da doğru taşıyor. Eski liste
+ * elle yazıldığı için bir kademe eklendiğinde güncellenmesi unutulabilirdi.
+ */
 export declare const COMPACT_DENSITY: {
-    readonly 'space-2': "6px";
-    readonly 'space-3': "8px";
-    readonly 'space-4': "12px";
-    readonly 'space-5': "16px";
-    readonly 'space-6': "24px";
-    readonly 'space-7': "32px";
-    readonly 'font-size-2xs': "11px";
-    readonly 'font-size-xs': "12px";
-    readonly 'font-size-sm': "13px";
-    readonly 'font-size-base': "15px";
-    readonly 'font-size-body': "16px";
-    readonly 'font-size-lg': "18px";
-    readonly 'font-size-xl': "21px";
-    readonly 'font-size-2xl': "25px";
-    readonly 'font-size-3xl': "31px";
-    readonly 'font-size-4xl': "39px";
-    readonly 'leading-normal': "1.5";
-    readonly 'leading-relaxed': "1.6";
+    readonly 'type-scale': "0.93";
+    readonly 'space-scale': "0.88";
 };
 
 export declare const ConfirmDialog: typeof ConfirmDialog_2;
@@ -1025,82 +1020,92 @@ testId?: string;
 
 /** AÇIK TEMA — varsayılan. */
 export declare const LIGHT_THEME: {
-    readonly page: "#ffffff";
-    readonly surface: "#ffffff";
-    readonly 'surface-2': "#eff4f1";
-    readonly 'surface-3': "#e8efec";
-    readonly 'surface-inset': "#f9fbfa";
-    readonly border: "#d6e1dc";
-    readonly 'border-strong': "#c5d3cc";
-    readonly text: "#00120f";
-    readonly 'text-2': "#38594f";
-    readonly 'text-3': "#506d63";
-    readonly graphite: "#00322a";
-    readonly 'graphite-2': "#004d40";
-    readonly 'graphite-3': "#0f574a";
+    readonly page: "#f7fcf8";
+    readonly surface: "#fdfefd";
+    readonly 'surface-2': "#e9f7ed";
+    readonly 'surface-3': "#dff3e5";
+    /** Girinti sayfanın ALTINA iner (arama kutusu, kod bloğu, pasif girdi). */
+    readonly 'surface-inset': "#f1faf4";
+    readonly border: "#c0eacf";
+    readonly 'border-strong': "#aaddbf";
+    readonly text: "#010f0b";
+    readonly 'text-2': "#325a4d";
+    readonly 'text-3': "#467060";
+    readonly shell: "#00322a";
+    readonly 'shell-2': "#154c3d";
+    readonly 'shell-3': "#225f4d";
     readonly action: "#00322a";
-    readonly 'action-hover': "#004d40";
-    readonly 'action-active': "#0f574a";
-    readonly 'on-action': "#ffffff";
+    readonly 'action-hover': "#154c3d";
+    readonly 'action-active': "#225f4d";
+    readonly 'on-action': "#fdfefd";
     /** Dolgunun SINIRI; açık temada dolgunun kendisi (bkz. `ACTION_LINE`). */
     readonly 'action-line': "#00322a";
     /** Pasif dolgu; saydamlık DEĞİL kendi rengi (bkz. Button `:disabled`). */
-    readonly 'action-soft': "#c5d3cc";
+    readonly 'action-soft': "#aaddbf";
     /** PASİF DOLGU ÜZERİNDEKİ METİN. */
-    readonly 'on-action-soft': "#26403a";
-    readonly amber: "#22a76d";
-    readonly 'amber-hover': "#2ab97a";
-    readonly 'amber-active': "#1d9a64";
-    readonly 'amber-soft': "#8fd3b6";
-    readonly 'on-amber': "#02180f";
-    readonly blue: "#1a7f61";
-    readonly 'blue-hover': "#10654b";
-    readonly 'blue-active': "#0a4d39";
-    readonly 'blue-text': "#147155";
-    readonly 'blue-tint': "#e9f6f2";
-    readonly 'blue-line': "#acd8cb";
-    readonly 'on-blue': "#ffffff";
-    readonly 'ok-bg': "#e6f4ed";
-    readonly 'ok-fg': "#156f4e";
-    readonly 'ok-line': "#a8dcc4";
-    readonly 'warn-bg': "#fdf0dd";
-    readonly 'warn-fg': "#7a3e02";
-    readonly 'warn-line': "#ebc687";
-    readonly 'off-bg': "#f0f4f3";
-    readonly 'off-fg': "#26403a";
-    readonly 'off-line': "#cddad4";
-    readonly 'bad-bg': "#f8ebeb";
-    readonly 'bad-fg': "#bb1e1e";
-    readonly 'bad-line': "#e6a6a6";
-    readonly 'oem-bg': "#edf8f5";
-    readonly 'oem-fg': "#0d5942";
-    readonly 'oem-line': "#b5ded2";
-    readonly 'alt-bg': "#eeebfa";
-    readonly 'alt-fg': "#2e2661";
-    readonly 'alt-line': "#c0b6ea";
-    readonly 'sale-bg': "#e6f4ed";
-    readonly 'sale-fg': "#156f4e";
-    readonly 'red-accent': "#dc2626";
-    readonly 'green-accent': "#1d9a64";
-    readonly 'green-accent-hover': "#17814f";
-    readonly 'on-green': "#02180f";
-    readonly star: "#9a5f04";
-    readonly 'danger-solid': "#dc2626";
-    readonly 'danger-solid-hover': "#bb1e1e";
-    readonly 'on-danger': "#ffffff";
-    readonly 'nav-bg': "#ffffff";
-    readonly 'nav-bg-2': "#eff4f1";
-    readonly 'nav-fg': "#00120f";
-    readonly 'nav-fg-2': "#38594f";
-    readonly 'nav-fg-3': "#506d63";
-    readonly 'nav-line': "#e3eae7";
-    readonly 'nav-line-strong': "#c5d3cc";
-    readonly 'nav-hover': "#eff4f1";
-    readonly 'footer-bg': "#eff4f1";
+    readonly 'on-action-soft': "#1d4238";
+    readonly cart: "#1ba055";
+    readonly 'cart-hover': "#20b360";
+    readonly 'cart-active': "#19934e";
+    readonly 'cart-soft': "#84cb97";
+    readonly 'on-cart': "#021407";
+    readonly role: "#1f7b56";
+    readonly 'role-hover': "#176446";
+    readonly 'role-active': "#115037";
+    readonly 'role-text': "#17704e";
+    readonly 'role-tint': "#d5f6e4";
+    readonly 'role-line': "#93dfba";
+    readonly 'on-role': "#fdfefd";
+    readonly 'ok-bg': "#c2f6cf";
+    readonly 'ok-fg': "#166e3a";
+    readonly 'ok-line': "#7eda99";
+    readonly 'warn-bg': "#f6e4cf";
+    readonly 'warn-fg': "#7c5212";
+    readonly 'warn-line': "#e8b97f";
+    readonly 'off-bg': "#daece5";
+    readonly 'off-fg': "#4d625a";
+    readonly 'off-line': "#afcabf";
+    readonly 'bad-bg': "#f6e2e0";
+    readonly 'bad-fg': "#a91922";
+    readonly 'bad-line': "#e9b3ae";
+    readonly 'oem-bg': "#a7f7c8";
+    readonly 'oem-fg': "#0c5d3a";
+    readonly 'oem-line': "#6ace97";
+    readonly 'alt-bg': "#e9e4f6";
+    readonly 'alt-fg': "#751dc8";
+    readonly 'alt-line': "#c9bae7";
+    readonly 'sale-bg': "#c2f6cf";
+    readonly 'sale-fg': "#166e3a";
+    readonly 'red-accent': "#de1b2c";
+    readonly 'green-accent': "#18904c";
+    readonly 'green-accent-hover': "#12783e";
+    readonly 'on-green': "#021407";
+    readonly star: "#8c6a11";
+    readonly 'danger-solid': "#c21625";
+    readonly 'danger-solid-hover': "#a2111d";
+    readonly 'on-danger': "#fdfefd";
+    readonly 'nav-bg': "#fdfefd";
+    readonly 'nav-bg-2': "#e9f7ed";
+    readonly 'nav-fg': "#010f0b";
+    readonly 'nav-fg-2': "#325a4d";
+    readonly 'nav-fg-3': "#467060";
+    readonly 'nav-line': "#d5f0de";
+    readonly 'nav-line-strong': "#aaddbf";
+    readonly 'nav-hover': "#e9f7ed";
+    readonly 'footer-bg': "#e9f7ed";
     readonly 'band-bg': "#00322a";
-    readonly 'band-fg': "#eff4f1";
-    readonly 'band-fg-2': "#8fb3a7";
-    readonly 'band-line': "#0a4a3e";
+    readonly 'band-fg': "#e9f7ed";
+    readonly 'band-fg-2': "#8abaa1";
+    /**
+     * Bandın ÜÇÜNCÜ metin kademesi ve imza vurgusu.
+     *
+     * <p>Panelin kenar çubuğu rayı bu ikisini bir dönem SABİT HEX olarak
+     * taşıyordu (`#799a8f`, `#43ff9c`) — uygulamada kalan son renk
+     * literalleriydi ve paletten bağımsız hareket ediyorlardı.
+     */
+    readonly 'band-fg-3': "#79a790";
+    readonly 'band-accent': "#43ff9c";
+    readonly 'band-line': "#143f34";
     readonly 'band-hover': string;
     readonly 'shadow-xs': `0 1px 2px ${string}`;
     readonly 'shadow-sm': `0 1px 2px ${string}, 0 1px 3px ${string}`;
@@ -1111,22 +1116,22 @@ export declare const LIGHT_THEME: {
     readonly 'shadow-up': `0 -2px 4px ${string}, 0 -8px 24px ${string}`;
     /** Odak halkası MAVİ: odak bir gezinme olayıdır, bir dönüşüm değil. */
     readonly ring: `0 0 0 3px ${string}`;
-    readonly 'ring-color': "#1a7f61";
+    readonly 'ring-color': "#1f7b56";
     readonly 'ring-danger': `0 0 0 3px ${string}`;
     readonly 'ring-ok': `0 0 0 4px ${string}`;
     readonly scrim: string;
     readonly 'scrim-soft': string;
     readonly glass: string;
-    readonly 'glass-solid': "#ffffff";
-    readonly 'on-scrim': "#ffffff";
-    readonly 'skeleton-a': "#eff4f1";
-    readonly 'skeleton-b': "#f9fbfa";
+    readonly 'glass-solid': "#fdfefd";
+    readonly 'on-scrim': "#fdfefd";
+    readonly 'skeleton-a': "#e9f7ed";
+    readonly 'skeleton-b': "#f7fcf8";
     readonly track: string;
     /** Görsel yer tutucu (medya yoksa). */
-    readonly 'media-bg': "#eff4f1";
+    readonly 'media-bg': "#e9f7ed";
     readonly 'glow-1': string;
     readonly 'glow-2': string;
-    readonly 'glow-amber': string;
+    readonly 'glow-cart': string;
 };
 
 declare type LinkProps = BaseProps_4 & {
@@ -1182,26 +1187,46 @@ export declare const METRIC_TOKENS: {
     readonly 'radius-lg': "12px";
     readonly 'radius-xl': "16px";
     readonly 'radius-pill': "999px";
+    /**
+     * YOĞUNLUK ÇARPANLARI — akışkan ölçeğin üzerine binen tek ayar.
+     *
+     * <p>Varsayılan `1`, yani hiçbir şeyi değiştirmez; `data-hanui-density`
+     * ya da tüketicinin kendi metrik ezmesi bunları düşürür.
+     */
+    readonly 'type-scale': "1";
+    readonly 'space-scale': "1";
     readonly 'space-0': "0";
     readonly 'space-1': "4px";
     readonly 'space-2': "8px";
-    readonly 'space-3': "12px";
-    readonly 'space-4': "16px";
-    readonly 'space-5': "24px";
-    readonly 'space-6': "32px";
-    readonly 'space-7': "48px";
-    readonly 'space-8': "64px";
-    readonly 'space-9': "96px";
-    readonly 'font-size-2xs': "12px";
-    readonly 'font-size-xs': "13px";
-    readonly 'font-size-sm': "15px";
-    readonly 'font-size-base': "16px";
-    readonly 'font-size-body': "17px";
-    readonly 'font-size-lg': "19px";
-    readonly 'font-size-xl': "23px";
-    readonly 'font-size-2xl': "29px";
-    readonly 'font-size-3xl': "37px";
-    readonly 'font-size-4xl': "47px";
+    readonly 'space-3': string;
+    readonly 'space-4': string;
+    readonly 'space-5': string;
+    readonly 'space-6': string;
+    readonly 'space-7': string;
+    readonly 'space-8': string;
+    readonly 'space-9': string;
+    readonly 'font-size-2xs': string;
+    readonly 'font-size-xs': string;
+    readonly 'font-size-sm': string;
+    readonly 'font-size-base': string;
+    readonly 'font-size-body': string;
+    readonly 'font-size-lg': string;
+    readonly 'font-size-xl': string;
+    readonly 'font-size-2xl': string;
+    readonly 'font-size-3xl': string;
+    readonly 'font-size-4xl': string;
+    /**
+     * FORM DENETİMİ PUNTOSU — ölçekten AYRI ve 16px'in altına inmez.
+     *
+     * <p>⚠ iOS Safari, hesaplanan puntosu 16px'in ALTINDA olan bir `input`a
+     * odaklanıldığında sayfayı zorla yakınlaştırır ve geri çıkmaz. `font-size-base`
+     * akışkan olunca dar ekranda 15px'e iniyor, yani bu düzeltme olmadan
+     * **telefonda her form alanı sayfayı zıplatırdı.**
+     *
+     * <p>`max()` kullanılıyor çünkü ölçek büyüdüğünde denetim de büyümeli;
+     * sabit `16px` yazmak üst uçta alanı ölçeğin gerisinde bırakırdı.
+     */
+    readonly 'font-size-control': `max(16px, ${string})`;
     readonly 'leading-none': "1";
     readonly 'leading-tight': "1.16";
     readonly 'leading-snug': "1.35";