@mesgflow/ui-kit 0.6.0

package/types/mesgflow-ui-kit-theming.d.ts

@@ -0,0 +1,745 @@
+import * as _angular_core from '@angular/core';
+import { InjectionToken, Provider } from '@angular/core';
+
+type RampStep = '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | '950';
+type AccentRamp = Record<RampStep, string>;
+declare const RAMP_STEPS: readonly RampStep[];
+/**
+ * `hex` bir accent'in "600 basamağı" gibi ele alınır (kitin kendi kuralı,
+ * bkz. `color.css` "Her rampada basamak 600 = LIGHT modda dolu/etkileşimli
+ * kullanım" notu) — girdinin hue'su + kroma karakteri korunur, tüm 11
+ * basamak `LIGHTNESS_BY_STEP`/`CHROMA_MULTIPLIER_BY_STEP` sabit eğrisiyle
+ * YENİDEN üretilir (girdinin TAM OLARAK 600'e denk gelen bir L'de olması
+ * ŞART DEĞİL — ör. çok açık bir hex verilse bile 950 basamağı yine
+ * "neredeyse siyah" çıkar, ramp her zaman tutarlı).
+ *
+ * @throws girdi `#rgb`/`#rrggbb` değilse.
+ */
+declare function createAccentRamp(hex: string): AccentRamp;
+/**
+ * Bir rampa basamağının üstüne binecek metin rengi — `#ffffff` veya kitin
+ * `--mf-surface-inverse`'i (`#04110d`, `color.css`) arasından HANGİSİ WCAG
+ * kontrastı daha yüksekse. `theming/apply.ts`'teki `accentRoleLines()` bunu
+ * `ramp['600']` (LIGHT yarı) VE `ramp['400']` (DARK yarı) için AYRI AYRI
+ * çağırır — accent-fill artık İKİ basamak kullanıyor (kitin varsayılanında
+ * 900/400, tüketici aksanlarında 600/400), genelde çok farklı parlaklıkta,
+ * her biri kendi doğru metin rengini WCAG hesabıyla (sabit varsayım DEĞİL)
+ * bulur.
+ */
+declare function fgOnAccent(accentHex: string): string;
+/** `ramp`'in `600` basamağının kontrast oranını (beyaz metne karşı) döner — `ramp.spec.ts`/tüketici sağlık kontrolü için. */
+declare function accentContrastWithWhite(ramp: AccentRamp): number;
+
+type RadiusScale = 'sharp' | 'default' | 'soft';
+/** Kontrol yüksekliği merdiveni (sm/md/lg): `compact` 28/32/36px, `default` 32/36/40px, `comfortable` 36/40/44px — bkz. `radius.css` `--control-h-*`. */
+type MfDensity = 'compact' | 'default' | 'comfortable';
+type NeutralTint = 'cool' | 'neutral' | 'warm';
+/**
+ * Nötr rampa 13 basamaklı (`850`/`975` DAHİL) — diğer altı rampanın (primary/
+ * success/warning/danger/info/help) 11 basamaklık `RampStep`'inden AYRI bir
+ * tip (bkz. `color.css` "RENK — HAM RAMPALAR" notu, `NEUTRAL_STEPS` — `apply.ts`).
+ */
+declare const MF_NEUTRAL_RAMP_STEPS: readonly ["50", "100", "200", "300", "400", "500", "600", "700", "800", "850", "900", "950", "975"];
+type MfNeutralRampStep = (typeof MF_NEUTRAL_RAMP_STEPS)[number];
+/** `ramps.<tone>` altında elle geçilebilen altı 11-basamaklı rampa — `neutral` (13 basamak) AYRI ele alınır. */
+declare const MF_RAMP_TONES: readonly ["primary", "success", "warning", "danger", "info", "help"];
+type MfRampTone = (typeof MF_RAMP_TONES)[number];
+/**
+ * `color.css`'in rol katmanındaki, bir RAMPA basamağına `var()` İLE
+ * BAĞLI OLMAYAN (yani `ramps.*` override'ıyla OTOMATİK takip ETMEYEN) TEK
+ * TEK yazılmış literal token'lar — `accent`/`ramps.*` DIŞINDA kalan, marka
+ * beyaz etiketlemesi için hâlâ ayarlanabilir olması gereken son katman.
+ * (`--mf-accent`, `--mf-success-fill`, `--mf-success-tint` vb. BURADA YOK —
+ * hepsi zaten `ramps.primary`/`ramps.success` override'ıyla otomatik
+ * güncellenir, bkz. `color.css`'teki `var(--color-X-NNN)` referansları.)
+ */
+declare const MF_ROLE_TOKENS: readonly ["surface", "chrome", "overlay", "surface-inverse", "glass", "fg", "fg-muted", "fg-on-accent", "fg-inverse", "hairline", "neutral-fill", "neutral-fill-hover", "neutral-fill-fg", "success-fill-fg", "warning-fill-fg", "danger-fill-fg", "info-fill-fg", "help-fill-fg", "chart-1", "chart-2", "chart-3", "chart-4", "chart-5", "chart-6", "chart-7", "chart-8", "chart-other"];
+type MfRoleToken = (typeof MF_ROLE_TOKENS)[number];
+/**
+ * Tam beyaz etiket tema tanımı — `applyMfTheme()`/`exportMfThemeCss()`'e
+ * verilir. HER alan OPSİYONEL; hiçbiri verilmezse kit kendi "Deep Emerald &
+ * Slate" varsayılanında kalır (bkz. `applyMfTheme` doc'u). Sadece VERİLEN
+ * alanlar `applyMfTheme`'de INLINE STYLE olarak YAZILIR — bir "tüm token
+ * dökümü" ÜRETİLMEZ/GEREKMEZ, bu yüzden kitin CSS kaynağıyla asla senkron
+ * DIŞI kalamaz (delta-only, bkz. dosya üstündeki mimari not).
+ *
+ * - `accent`/`radiusScale`/`neutralTint` — mevcut kısayollar (bkz. `apply.ts`).
+ * - `density` — kit genelinde kontrol yüksekliği (Button/Input/Select/...).
+ *   Bir alt ağaç için `data-density="compact"` özniteliği de aynı işi yapar.
+ * - `ramps` — bir tonun TÜM basamaklarını (ya da bir kısmını) ELLE verir.
+ *   `ramps.primary` verilirse `accent` kısayolunu (aynı çağrıda) EZER — TAM
+ *   kontrol isteyen tüketiciler için. Bir tonun rampasını değiştirmek O
+ *   tonun TÜM türetilmiş rol token'larını (`--mf-X`, `--mf-X-fill`,
+ *   `--mf-X-tint` vb.) OTOMATİK günceller — `color.css`'in rol katmanı
+ *   zaten `var(--color-X-NNN)` ile bu rampaya BAĞLI (bkz. dosya üstündeki
+ *   `MfRoleToken` notu). Bu, TEK bir alanla ("ramps.danger") beş türetilmiş
+ *   token'ı BİRDEN doğru şekilde güncelleyen ASIL güç kaynağı.
+ * - `roles` — rampaya BAĞLI OLMAYAN literal token'lar (bkz. `MfRoleToken`).
+ *   `light`/`dark` AYRI verilir; SADECE biri verilirse İKİ modda da AYNI
+ *   değer kullanılır (basit/öngörülebilir davranış — hangi modda olduğunu
+ *   PROBE etmek yerine).
+ * - `fonts`/`radius` — moddan BAĞIMSIZ, düz değer.
+ */
+interface MfThemeJson {
+    /** Doküman/editör amaçlı — JSON Schema referansı (bkz. `schema.ts`). Kit tarafından OKUNMAZ. */
+    $schema?: string;
+    /** İnsan-okur isim (ör. "Acme Kurumsal") — kit tarafından OKUNMAZ, sadece bir tema seçici/listesi için. */
+    name?: string;
+    accent?: string | null;
+    radiusScale?: RadiusScale;
+    density?: MfDensity;
+    neutralTint?: NeutralTint;
+    ramps?: Partial<Record<MfRampTone, Partial<Record<RampStep, string>>>> & {
+        neutral?: Partial<Record<MfNeutralRampStep, string>>;
+    };
+    roles?: {
+        light?: Partial<Record<MfRoleToken, string>>;
+        dark?: Partial<Record<MfRoleToken, string>>;
+    };
+    fonts?: {
+        sans?: string;
+        display?: string;
+        mono?: string;
+    };
+    radius?: Partial<Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', string>>;
+}
+/** `MfThemeJson`'ın eski adı — `applyMfTheme({accent, radiusScale, neutralTint})` şeklindeki MEVCUT çağrılar (kısayol alt kümesi) hâlâ geçerli, bu takma ad SADECE geriye dönük TİP uyumluluğu için. */
+type MfThemeConfig = MfThemeJson;
+
+/**
+ * `MfThemeJson`'ı CSS custom property'leri olarak `target`'a (varsayılan
+ * `document.documentElement`) YAZAR — sayfa YENİDEN YÜKLENMEDEN, hiçbir
+ * bileşen dosyasına dokunmadan tüm kit anında yeni temaya geçer. Bunun
+ * mümkün olmasının nedeni: Tailwind v4'ün ürettiği utility'ler (`bg-primary-600`,
+ * `rounded-md`, ...) derleme zamanında SABİT bir değere değil, doğrudan
+ * `var(--color-primary-600)`/`var(--radius-md)` REFERANSINA derleniyor (bkz.
+ * `docs/tr/mimari.md` "Token mimarisi") — CSS cascade'de bu satırlar
+ * `@theme`'in KENDİ tanımından SONRA (inline stil her zaman kazanır)
+ * çalıştığı için token'lar üzerinden TÜM bileşenler güncellenir. SADECE
+ * `config`'te VERİLEN alanlar yazılır ("delta-only") — bu fonksiyon kitin
+ * TÜM varsayılan token setini bilmek/üretmek ZORUNDA DEĞİL, bu yüzden
+ * kitin CSS kaynağıyla asla senkron dışı kalamaz.
+ *
+ * - `accent` verilirse: `createAccentRamp()` ile 11 basamaklı `--color-primary-*`
+ *   YENİDEN üretilir + `accentRoleLines()` (`--mf-fg-on-accent`/`-accent-fill`/
+ *   `-accent-fill-hover`, `light-dark()` literal değerleri — bkz. altta).
+ *   `:root`/`.dark` bunları zaten `var()` ile referans aldığı için (bkz.
+ *   `color.css` rol katmanı) `--mf-accent`/`--mf-accent-strong`/`--mf-focus-ring`/
+ *   `--mf-primary-tint(-fg)` AYRICA yazılmaz — otomatik takip eder.
+ * - `accent: null` verilirse: yukarıdaki override'ların HEPSİ temizlenir, kit
+ *   `color.css`'teki varsayılan "Deep Emerald" rampasına döner.
+ * - `ramps.primary` verilirse (`accent`'i EZER — aynı çağrıda ikisi de
+ *   verilirse `ramps.primary` kazanır): basamak başına TAM kontrol, kısmi
+ *   olabilir (`resolvedPrimaryRamp` ile O ANKİ değerlerle birleştirilir).
+ * - `ramps.success`/`warning`/`danger`/`info`/`help`/`neutral` verilirse:
+ *   verilen basamaklar DOĞRUDAN yazılır — bu tonların TÜM türetilmiş rol
+ *   token'ları (`--mf-X`, `--mf-X-fill`, `--mf-X-tint` vb.) `color.css`'te
+ *   zaten `var(--color-X-NNN)` ile bu rampaya bağlı, OTOMATİK güncellenir.
+ * - `roles.light`/`roles.dark` verilirse: rampaya BAĞLI OLMAYAN literal
+ *   token'lar (bkz. `MfRoleToken`) `light-dark()` ile yazılır.
+ * - `fonts`/`radius` verilirse: moddan bağımsız düz değerler yazılır —
+ *   `radius` `radiusScale`'İN ÜSTÜNE (aynı çağrıda ikisi de verilirse SONRA
+ *   uygulanır) basamak-bazlı ince ayar sağlar.
+ * - `radiusScale` verilirse: `--radius-{xs,sm,md,lg,xl}` nested ölçeği
+ *   KORUYARAK (bkz. `radius.css` doktrini) birlikte küçülür/büyür.
+ * - `density` verilirse: `--control-h-{sm,md,lg}` merdiveni yazılır — tüm
+ *   kontroller (Button/Input/Select/...) aynı hizada birlikte büyür/küçülür.
+ * - `neutralTint` verilirse: 13 basamaklı `--color-neutral-*` rampası ÇOK
+ *   düşük oranda (bkz. `color-math.ts` `mixHex`) soğuk/sıcak bir tona kayar
+ *   — `ramps.neutral` AYNI ÇAĞRIDA verildiyse ONUN ÜSTÜNE uygulanır (bu
+ *   fonksiyondaki sıra: ramps → neutralTint).
+ *
+ * SSR güvenli — `document` yoksa no-op.
+ */
+declare function applyMfTheme(config: MfThemeJson, target?: HTMLElement): void;
+/**
+ * `applyMfTheme()`'in YAZABİLECEĞİ HER inline override'ı temizler — bir
+ * tema özelleştiricideki "Varsayılana sıfırla" düğmesi için `accent: null`'ın
+ * genişletilmiş hali (o SADECE accent'i temizlerdi). Kit `color.css`'teki
+ * varsayılanlara TAMAMEN geri döner.
+ */
+declare function resetMfTheme(target?: HTMLElement): void;
+/**
+ * `applyMfTheme` ile AYNI hesaplamayı yapar ama runtime'da uygulamak yerine
+ * yapıştırılabilir bir `{ selector } { ... }` bloğu (varsayılan `:root`)
+ * döner — tüketici build-time'da kendi `styles.css`'ine ekleyebilir (docs
+ * sitesindeki tema özelleştiricinin "CSS'i kopyala" düğmesi bunu kullanır).
+ * `roles.*` İÇİN de (runtime'daki AYNI `light-dark()` deseni) tek blokla
+ * hem açık hem koyu mod kapsanır, AYRI bir `.dark` bloğu GEREKMEZ. `ramps.
+ * primary` KISMİ verilip 400/500/600/700'ün TAMAMI yoksa `--mf-accent-fill`
+ * vb. satırlar (canlı DOM'dan O ANKİ değeri okuyamadığı için) ATLANIR — bu
+ * durumda `applyMfTheme`'i (runtime, `resolvedPrimaryRamp` ile tamamlar)
+ * tercih edin. `neutralTint` BURADA desteklenmez — mevcut nötr değerleri
+ * okumak için canlı bir DOM/`getComputedStyle` gerekir, statik bir string
+ * üretici bunu bilemez (tüketici tint'i kendi `applyMfTheme()` çağrısıyla
+ * runtime'da uygulamalı).
+ */
+declare function exportMfThemeCss(config: Omit<MfThemeJson, 'neutralTint'>, options?: {
+    selector?: string;
+}): string;
+
+type MfThemeIssueSeverity = 'error' | 'warning';
+interface MfThemeIssue {
+    /** Hangi alanı işaret ediyor — ör. `"ramps.danger.600"`, `"accent"`. */
+    path: string;
+    message: string;
+    severity: MfThemeIssueSeverity;
+}
+/**
+ * `MfThemeJson`'ı iki açıdan denetler:
+ *
+ * 1. Her hex alanının GEÇERLİ bir `#rgb`/`#rrggbb` olup olmadığı.
+ * 2. `ramps.<tone>['600']` (kitin "dolu blok" LIGHT çapası, bkz. `color.css`
+ *    rol katmanı doktrini — `X-fill-fg` her zaman `#ffffff` ya da mürekkep
+ *    `#04110d`'den seçilir) verilen bir ton için NE beyaz NE mürekkep
+ *    üstünde WCAG AA (4.5:1) sağlayan okunaklı bir metin rengi bulunup
+ *    bulunamadığı — ikisi de başarısızsa bu basamak "çok orta tonlu", dolu
+ *    blok üstünde okunaklı metin GARANTİSİ yok demektir. `accent` (`ramps.
+ *    primary`/`createAccentRamp` + `fgOnAccent`) BU KONTROLE İHTİYAÇ
+ *    DUYMAZ — `pickForeground` HER ZAMAN iki adaydan daha iyisini seçtiği
+ *    için kontrast garantisi İNŞA GEREĞİ var (bkz. `apply.ts`
+ *    `accentRoleLines`).
+ *
+ * Şema/yapı hatalarını (bilinmeyen alan vb.) DENETLEMEZ — TypeScript
+ * derleme zamanında zaten yakalar; `MfThemeJson` harici bir kaynaktan (ör.
+ * `JSON.parse`, bir tema dosyası yükleme formu) geliyorsa bu fonksiyon
+ * SADECE değer-düzeyi sorunları (geçersiz hex, düşük kontrast) yakalar.
+ */
+declare function validateMfTheme(theme: MfThemeJson): MfThemeIssue[];
+
+/**
+ * `MfThemeJson`'ın JSON Schema (2020-12) tanımı — IDE otomatik tamamlama
+ * (`"$schema"` alanı) ve harici doğrulayıcılar (ajv vb.) için. Düz bir JS
+ * nesnesi olarak dışa açılıyor — kitin sıfır çalışma zamanı bağımlılığı
+ * ilkesi gereği (bkz. `projects/ui-kit/README.md` "Bağımlılık politikası")
+ * hiçbir şema doğrulama KÜTÜPHANESİ KULLANILMIYOR/GEREKTİRİLMİYOR; asıl
+ * DEĞER-düzeyi doğrulama (geçerli hex, WCAG kontrastı) `validateMfTheme()`
+ * (bkz. `validate.ts`) tarafında, bu şema SADECE YAPISAL/tip doğrulaması
+ * içindir — `@mesgflow/email-core`'un `EMAIL_DOCUMENT_JSON_SCHEMA`'sıyla
+ * AYNI desen.
+ */
+declare const MF_THEME_JSON_SCHEMA: {
+    readonly $schema: "https://json-schema.org/draft/2020-12/schema";
+    readonly $id: "https://hurdenizyener.github.io/mesgflow-ui-kit/schema/theme.json";
+    readonly title: "MesgFlow ui theme";
+    readonly description: "Tam beyaz etiket tema tanımı — applyMfTheme()/exportMfThemeCss()e verilir. Her alan opsiyonel.";
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+        readonly $schema: {
+            readonly type: "string";
+        };
+        readonly name: {
+            readonly type: "string";
+        };
+        readonly accent: {
+            readonly oneOf: readonly [{
+                readonly type: "string";
+                readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+            }, {
+                readonly type: "null";
+            }];
+        };
+        readonly radiusScale: {
+            readonly enum: readonly ["sharp", "default", "soft"];
+        };
+        readonly density: {
+            readonly enum: readonly ["compact", "default", "comfortable"];
+        };
+        readonly neutralTint: {
+            readonly enum: readonly ["cool", "neutral", "warm"];
+        };
+        readonly ramps: {
+            readonly type: "object";
+            readonly additionalProperties: false;
+            readonly properties: {
+                readonly primary: {
+                    readonly type: "object";
+                    readonly additionalProperties: false;
+                    readonly properties: {
+                        readonly '50': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '100': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '200': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '300': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '400': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '500': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '600': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '700': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '800': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '900': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '950': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                    };
+                };
+                readonly success: {
+                    readonly type: "object";
+                    readonly additionalProperties: false;
+                    readonly properties: {
+                        readonly '50': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '100': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '200': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '300': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '400': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '500': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '600': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '700': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '800': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '900': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '950': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                    };
+                };
+                readonly warning: {
+                    readonly type: "object";
+                    readonly additionalProperties: false;
+                    readonly properties: {
+                        readonly '50': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '100': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '200': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '300': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '400': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '500': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '600': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '700': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '800': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '900': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '950': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                    };
+                };
+                readonly danger: {
+                    readonly type: "object";
+                    readonly additionalProperties: false;
+                    readonly properties: {
+                        readonly '50': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '100': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '200': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '300': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '400': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '500': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '600': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '700': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '800': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '900': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '950': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                    };
+                };
+                readonly info: {
+                    readonly type: "object";
+                    readonly additionalProperties: false;
+                    readonly properties: {
+                        readonly '50': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '100': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '200': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '300': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '400': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '500': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '600': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '700': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '800': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '900': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '950': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                    };
+                };
+                readonly help: {
+                    readonly type: "object";
+                    readonly additionalProperties: false;
+                    readonly properties: {
+                        readonly '50': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '100': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '200': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '300': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '400': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '500': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '600': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '700': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '800': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '900': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '950': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                    };
+                };
+                readonly neutral: {
+                    readonly type: "object";
+                    readonly additionalProperties: false;
+                    readonly properties: {
+                        readonly '850': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '975': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '50': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '100': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '200': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '300': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '400': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '500': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '600': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '700': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '800': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '900': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                        readonly '950': {
+                            readonly type: "string";
+                            readonly pattern: "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
+                        };
+                    };
+                };
+            };
+        };
+        readonly roles: {
+            readonly type: "object";
+            readonly additionalProperties: false;
+            readonly properties: {
+                readonly light: {
+                    readonly type: "object";
+                    readonly additionalProperties: false;
+                    readonly properties: {
+                        [k: string]: {
+                            type: string;
+                        };
+                    };
+                };
+                readonly dark: {
+                    readonly type: "object";
+                    readonly additionalProperties: false;
+                    readonly properties: {
+                        [k: string]: {
+                            type: string;
+                        };
+                    };
+                };
+            };
+        };
+        readonly fonts: {
+            readonly type: "object";
+            readonly additionalProperties: false;
+            readonly properties: {
+                readonly sans: {
+                    readonly type: "string";
+                };
+                readonly display: {
+                    readonly type: "string";
+                };
+                readonly mono: {
+                    readonly type: "string";
+                };
+            };
+        };
+        readonly radius: {
+            readonly type: "object";
+            readonly additionalProperties: false;
+            readonly properties: {
+                readonly xs: {
+                    readonly type: "string";
+                };
+                readonly sm: {
+                    readonly type: "string";
+                };
+                readonly md: {
+                    readonly type: "string";
+                };
+                readonly lg: {
+                    readonly type: "string";
+                };
+                readonly xl: {
+                    readonly type: "string";
+                };
+            };
+        };
+    };
+};
+
+/**
+ * Tema değişikliğini (`.dark` toggle'ı, `applyMfTheme()` çağrısı vb.) View
+ * Transitions API ile yumuşak bir çapraz geçişe sarar — sayfa her token'ı
+ * tek tek `transition` etmek yerine eski/yeni ekran görüntüsü arasında TEK
+ * bir kompozit geçiş yapar (yüzlerce `transition-colors`'ın aynı anda ve
+ * farklı sürelerle kayması yerine).
+ *
+ * `update` HER ZAMAN çağrılır — sadece NASIL çağrıldığı değişir. Geçiş
+ * atlanıp `update` doğrudan (senkron) çalıştırılır:
+ * - SSR / `document` yok,
+ * - tarayıcı `startViewTransition` desteklemiyor,
+ * - kullanıcı `prefers-reduced-motion: reduce` istiyor.
+ *
+ * ```ts
+ * transitionMfTheme(() => document.documentElement.classList.toggle('dark'));
+ * ```
+ */
+declare function transitionMfTheme(update: () => void): void;
+
+type MfColorMode = 'light' | 'dark' | 'system';
+interface MfColorModeConfig {
+    /** `localStorage` anahtarı — `colorModeInitScript()` ile AYNI olmalı. */
+    storageKey: string;
+    /** Tercih kaydı yokken. */
+    defaultMode: MfColorMode;
+}
+declare const MF_COLOR_MODE_CONFIG: InjectionToken<MfColorModeConfig>;
+/** `providers: [provideMfColorMode({ storageKey: 'app-theme' })]` */
+declare function provideMfColorMode(config: Partial<MfColorModeConfig>): Provider;
+/**
+ * Açık / koyu / sistem modu — kitin TEK kaynağı (`<mf-theme-switcher>` bunu kullanır; kendi
+ * anahtarınızla da doğrudan enjekte edebilirsiniz).
+ *
+ * - `mode`: kullanıcının seçimi (kalıcı, `localStorage`); `resolved`: gerçekte uygulanan
+ *   `light`/`dark` — `system`'de işletim sistemi tercihini CANLI izler.
+ * - Uygulama: kökte `.dark` sınıfı + `color-scheme` (yerel kaydırma çubukları ve form
+ *   kontrolleri de temaya uyar); değişim `transitionMfTheme` ile yumuşak (azaltılmış harekette
+ *   anında). Sınıf zaten doğruysa (ilk boyamada `colorModeInitScript` uyguladı) dokunulmaz.
+ * - Depolama/`matchMedia` yoksa (gizli pencere, SSR, test) sessizce varsayılana düşer.
+ */
+declare class MfColorModeService {
+    private readonly config;
+    private readonly document;
+    private readonly media;
+    private readonly systemDark;
+    readonly mode: _angular_core.WritableSignal<MfColorMode>;
+    readonly resolved: _angular_core.Signal<"light" | "dark">;
+    constructor();
+    setMode(mode: MfColorMode): void;
+    /** light → dark → system → light (tek düğmeli değiştirici için). */
+    cycle(): void;
+    private readStored;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MfColorModeService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
+}
+/**
+ * `index.html` `<head>`'ine satır içi konacak betik — Angular yüklenmeden ÖNCE `.dark`'ı uygular,
+ * koyu modda beyaz flaşı önler. Anahtar ve varsayılan servisle AYNI olmalı.
+ *
+ * ```html
+ * <script>/* colorModeInitScript('app-theme') çıktısı *\/</script>
+ * ```
+ */
+declare function colorModeInitScript(storageKey?: string, defaultMode?: MfColorMode): string;
+
+export { MF_COLOR_MODE_CONFIG, MF_NEUTRAL_RAMP_STEPS, MF_RAMP_TONES, MF_ROLE_TOKENS, MF_THEME_JSON_SCHEMA, MfColorModeService, RAMP_STEPS, accentContrastWithWhite, applyMfTheme, colorModeInitScript, createAccentRamp, exportMfThemeCss, fgOnAccent, provideMfColorMode, resetMfTheme, transitionMfTheme, validateMfTheme };
+export type { AccentRamp, MfColorMode, MfColorModeConfig, MfDensity, MfNeutralRampStep, MfRampTone, MfRoleToken, MfThemeConfig, MfThemeIssue, MfThemeIssueSeverity, MfThemeJson, NeutralTint, RadiusScale, RampStep };