@mesgflow/ui-kit 0.6.0 → 0.8.0

package/tokens/controls.css

@@ -0,0 +1,145 @@
+/*
+ * mesgflow — özel çizimli seçim kontrolleri (v0.7).
+ *
+ * Checkbox/Radio önceden native kutuyu `accent-color` ile boyuyordu: işaret
+ * tarayıcıya göre farklı çiziliyor, animasyon yoktu, koyu modda kenarlık
+ * zeminde kayboluyordu. Artık `appearance: none` + `::before` işareti:
+ * - İşaret yay eğrisiyle (`ease-spring`) büyüyerek gelir.
+ * - `indeterminate` (checkbox) çizgi işareti taşır.
+ * - Tüm renkler rol token'larından — `applyMfTheme({accent})` otomatik takip eder.
+ * - `forced-colors` (Windows Yüksek Kontrast): sistem renklerine düşer.
+ * Native `<input>` KALIR — klavye, form, `:checked`, erişilebilirlik ağacı
+ * değişmez; sadece görsel katman bizim.
+ */
+
+@utility mf-check {
+  appearance: none;
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  flex-shrink: 0;
+  margin: 0;
+  cursor: pointer;
+  border: 1px solid var(--mf-border-strong);
+  border-radius: var(--radius-xs);
+  background-color: var(--mf-surface);
+  box-shadow: var(--mf-shadow-control);
+  transition-property: background-color, border-color, box-shadow, scale;
+  transition-duration: var(--duration-fast);
+  transition-timing-function: var(--ease-emphasis);
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 10%;
+    background-color: var(--mf-fg-on-accent);
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
+      center / contain no-repeat;
+    scale: 0;
+    transition: scale var(--duration-base) var(--ease-spring);
+  }
+
+  &:hover:not(:disabled):not(:checked):not(:indeterminate) {
+    border-color: var(--mf-accent);
+  }
+
+  &:active:not(:disabled) {
+    scale: 0.92;
+  }
+
+  &:checked,
+  &:indeterminate {
+    border-color: var(--mf-accent-fill);
+    background-color: var(--mf-accent-fill);
+  }
+
+  &:checked::before,
+  &:indeterminate::before {
+    scale: 1;
+  }
+
+  &:indeterminate::before {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E");
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &[aria-invalid='true'] {
+    border-color: var(--mf-danger);
+  }
+
+  @media (forced-colors: active) {
+    border-color: CanvasText;
+    &:checked,
+    &:indeterminate {
+      background-color: Highlight;
+      border-color: Highlight;
+    }
+    &::before {
+      background-color: HighlightText;
+    }
+  }
+}
+
+@utility mf-radio {
+  appearance: none;
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  flex-shrink: 0;
+  margin: 0;
+  cursor: pointer;
+  border: 1px solid var(--mf-border-strong);
+  border-radius: 9999px;
+  background-color: var(--mf-surface);
+  box-shadow: var(--mf-shadow-control);
+  transition-property: background-color, border-color, box-shadow, scale;
+  transition-duration: var(--duration-fast);
+  transition-timing-function: var(--ease-emphasis);
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 30%;
+    border-radius: 9999px;
+    background-color: var(--mf-fg-on-accent);
+    scale: 0;
+    transition: scale var(--duration-base) var(--ease-spring);
+  }
+
+  &:hover:not(:disabled):not(:checked) {
+    border-color: var(--mf-accent);
+  }
+
+  &:active:not(:disabled) {
+    scale: 0.92;
+  }
+
+  &:checked {
+    border-color: var(--mf-accent-fill);
+    background-color: var(--mf-accent-fill);
+  }
+
+  &:checked::before {
+    scale: 1;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  @media (forced-colors: active) {
+    border-color: CanvasText;
+    &:checked {
+      background-color: Highlight;
+      border-color: Highlight;
+    }
+    &::before {
+      background-color: HighlightText;
+    }
+  }
+}

package/tokens/elevation.css

@@ -35,17 +35,27 @@
   --shadow-control: var(--mf-shadow-control);
   --shadow-filled: var(--mf-shadow-filled);
   --shadow-glow: var(--mf-shadow-glow);
+  --shadow-highlight: var(--mf-shadow-highlight);
 }
 
 @layer base {
   /* `.light` — koyu sayfa içindeki açık ada, bkz. color.css'teki `@custom-variant dark` notu. */
   :root,
   .light {
-    /* Marka-tonlu (rgba primary-900) ve önceki turdan çok daha hafif — derinlik artık ağırlıklı olarak border-hairline'dan geliyor, gölge sadece küçük bir ipucu. */
+    /*
+     * KATMANLI gölgeler (v0.7) — her basamak iki katman: yakın/keskin bir
+     * "temas" gölgesi + uzak/yumuşak bir "ortam" gölgesi. Tek katmanlı
+     * gölge ya bulanık ya sert duruyordu; iki katman gerçek bir ışığın
+     * yarattığı derinliği verir (Vercel Geist / Radix Themes yaklaşımı).
+     * Marka-tonlu (rgba primary-900) — derinlik yine ağırlıklı olarak
+     * border-hairline'dan geliyor, gölge ipucu.
+     */
     --mf-shadow-1: 0 1px 2px rgba(6, 44, 34, 0.06);
-    --mf-shadow-2: 0 4px 16px -8px rgba(6, 44, 34, 0.14);
-    /* Spec'in "Gölgeler yerine çerçeveler" tarifi — dialog/drawer/sheet zaten hairline taşıyor, gölge sadece derin bir ipucu. */
-    --mf-shadow-3: 0 10px 30px rgba(6, 44, 34, 0.15);
+    --mf-shadow-2: 0 1px 2px rgba(6, 44, 34, 0.05), 0 8px 24px -10px rgba(6, 44, 34, 0.18);
+    /* Dialog/drawer/sheet — en yüksek basamak, hairline + derin ortam gölgesi. */
+    --mf-shadow-3: 0 2px 6px -1px rgba(6, 44, 34, 0.06), 0 24px 56px -16px rgba(6, 44, 34, 0.26);
+    /* Light'ta yüzey üst-kenar ışığı yok — beyaz üstünde beyaz görünmez. */
+    --mf-shadow-highlight: 0 0 #0000;
     /* Kontroller için neredeyse görünmez bir ayrım — zemin kontrastıyla karışmasın diye "gölge" değil "kenar ışığı" gibi davranır. */
     --mf-shadow-control: 0 1px 1px rgba(6, 44, 34, 0.04);
     --mf-shadow-filled: 0 1px 0 rgba(6, 44, 34, 0.12), 0 1px 2px rgba(6, 44, 34, 0.14);
@@ -55,8 +65,20 @@
 
   .dark {
     --mf-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.24);
-    --mf-shadow-2: 0 4px 16px -8px rgba(0, 0, 0, 0.5);
-    --mf-shadow-3: 0 10px 30px rgba(0, 0, 0, 0.4);
+    /*
+     * Koyu modda gölge tek başına derinlik VERMEZ (siyah üstüne siyah) —
+     * yükseltilmiş yüzeyler (overlay/dialog) ÜST KENARDAN ince bir ışık
+     * çizgisi alır: ışık yukarıdan geliyormuş gibi, panel zeminden kalkar
+     * (Apple/Linear dark UI). `--mf-shadow-highlight` tek başına da
+     * kullanılabilir (`shadow-highlight`: interaktif kartlar).
+     */
+    --mf-shadow-highlight: inset 0 1px 0 rgba(236, 243, 240, 0.06);
+    --mf-shadow-2:
+      inset 0 1px 0 rgba(236, 243, 240, 0.06), 0 1px 2px rgba(0, 0, 0, 0.3),
+      0 12px 32px -12px rgba(0, 0, 0, 0.7);
+    --mf-shadow-3:
+      inset 0 1px 0 rgba(236, 243, 240, 0.07), 0 2px 8px -2px rgba(0, 0, 0, 0.4),
+      0 32px 64px -16px rgba(0, 0, 0, 0.75);
     /* Dark modda dolu gölge yerine üstte ince bir ışık çizgisi — koyu zeminde "gölge" görsel olarak okunmuyor. */
     --mf-shadow-control: inset 0 1px 0 rgba(255, 255, 255, 0.04);
     --mf-shadow-filled: 0 1px 0 rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.4);
@@ -66,3 +88,37 @@
       0 1px 0 rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.4);
   }
 }
+
+/*
+ * Z-index katmanları — GLOBAL yığın sırası TEK yerde. Bileşen-içi yerel
+ * sıralama (sticky tablo hücresi `z-[1]`, buton grubu hover `z-10`) kendi
+ * stacking context'inde kalır, bu skalaya girmez.
+ *
+ * CDK overlay container'ı (popover/menu/select/dialog/tour) `--mf-z-overlay`'e
+ * bağlanır; toast onun ÜSTÜNDE — bir dialog açıkken gelen bildirim backdrop'un
+ * altında kalmasın (önceden toast `z-50`, CDK `1000`: gerçek hata).
+ */
+:root {
+  --mf-z-sticky: 20;
+  --mf-z-nav: 40;
+  --mf-z-overlay: 1000;
+  --mf-z-toast: 1100;
+  --mf-z-max: 2147483000;
+}
+
+.cdk-overlay-container {
+  z-index: var(--mf-z-overlay);
+}
+
+@utility z-sticky {
+  z-index: var(--mf-z-sticky);
+}
+@utility z-nav {
+  z-index: var(--mf-z-nav);
+}
+@utility z-overlay {
+  z-index: var(--mf-z-overlay);
+}
+@utility z-toast {
+  z-index: var(--mf-z-toast);
+}