@cahyo-dimas/freeday 3.6.0 → 3.7.0

package/CHANGELOG.md

@@ -9,6 +9,52 @@ benar. Perubahan seperti itu ditulis di bawah `### Changed: BREAKING (types)`
 lama → tipe baru, dan cara menyempitkannya — bukan di bawah `### Added`, betapapun aditifnya dari
 sisi kit.
 
+## [3.7.0] - 2026-10-23
+
+**Kit ini tidak bisa dipakai di Safari 15, dan yang menemukannya adalah sebuah HP.** Pemilik sebuah
+app ronda membuka aplikasinya di iPhone 7 dan menulis tiga kata: tampilannya ancur banget. Sebabnya
+`color-mix()`, 94 kemunculan tanpa satu pun cadangan, dipakai untuk `box-shadow` (26),
+`border-color` (17), `color` (11) dan `background` (5). Safari baru mendukungnya di 16.2; iPhone 7
+mentok di iOS 15.
+
+Perbaikan pertama yang dicoba justru membuktikan sebabnya. Pola cadangan yang biasa dipakai orang,
+nilai statis dulu lalu `color-mix()` sesudahnya, tidak bekerja ketika deklarasinya memuat `var()`:
+deklarasi itu sah saat parse dan baru gagal saat computed-value, dan di jalur itu properti jatuh ke
+nilai initial, bukan ke baris sebelumnya. Untuk `border-color` nilai initial itu `currentColor`,
+yaitu hitam. Keluhan tentang garis hitam tebal di mana-mana itulah bukti mekanismenya. Jadi
+`color-mix()`-nya yang dibuang.
+
+### Fixed
+- **Nol `color-mix()` di seluruh CSS yang dikirim** (`#072`). `rgba(var(--x-rgb), .p)` identik
+  dengan `color-mix(in srgb, X p%, transparent)` menurut definisi, jadi 10 token semantik baru
+  menutup 84 dari 94 kemunculan; `--color-primary-rgb` sendirian menutup 45. Sisanya yang mencampur
+  terhadap permukaan dipipihkan di `tokens/build.mjs`, yang kini menghitung nilai bertulis
+  `color-mix(in srgb, {a} p%, {b})` sekali per tema sambil menelusuri rantai `$dark ?? $value`,
+  sehingga nilai gelapnya diturunkan alih-alih diketik dua kali.
+- **Modifier tone bekerja di Safari 15** (`#072`). Delapan tone kali latar, tinta dan dua garis kini
+  33 token terhitung, dan properti privat `--_fdy-{avatar,badge,chip}-tone` hilang seluruhnya.
+  Tampilan di peramban modern terbukti tidak berubah: byte yang benar-benar dicat dibandingkan lewat
+  tangkapan layar satu piksel, nol selisih di 48 warna kali dua tema.
+- **Lima tempat yang mencetak teks dengan `--color-primary` pindah ke `--color-primary-strong`**
+  (`#073`). Kontrak kontras hanya pernah menjanjikan peran itu terhadap permukaan pada ambang 3:1,
+  yakni ambang WCAG untuk komponen UI, bukan untuk teks. Jadi suite-nya lulus sambil kit mencetak
+  tinta di bawah AA pada teal 3.74, cyan 3.68, emerald 3.77 dan lime 3.09. Azure lulus di 6.56, dan
+  itu sebabnya tidak ada yang menyadarinya. Yang pindah: tautan, centang combo, ikon dropzone saat
+  seret, dan dua panah urut tabel. Sembilan belas tempat lain yang polanya ikut tertangkap sengaja
+  tidak disentuh, sebab semuanya batas kontrol dan objek grafis yang memang sah di 3:1.
+
+### Added
+- **Penjaga yang membuat ketiganya tidak bisa kembali diam-diam.** Satu uji menegaskan nol
+  `color-mix()` di CSS yang dikirim. Satu lagi menegaskan nol properti `color` yang menyebut
+  `--color-primary` gundul, membaca nama properti alih-alih substring supaya kesembilan belas isian
+  tetap sah. Dan kontrak kontras kini mengukur `--color-primary-strong` terhadap permukaan pada
+  ambang teks untuk setiap palet, bukan hanya azure.
+
+### Catatan dukungan peramban
+Floor-nya kini Chrome 105, Safari 15.4 dan Firefox 121, ditentukan `:has()`. Angka itu diaudit dari
+fitur yang dipakai, bukan dari sesi di perangkat sungguhan. Belum ada yang menjalankan kit ini di
+Safari 15.4 nyata.
+
 ## [3.6.0] - 2026-10-22
 
 **Tiga belas hal yang dibangun ulang sebuah app back-office karena kit belum punya.** App-nya tidak

package/README.id.md

@@ -5,7 +5,7 @@
 > **Lebih banyak _free day_ buat dev. UI kit-nya sudah siap pakai.**
 
 [![Live docs](https://img.shields.io/badge/docs-live-2050d8?style=flat-square)](https://cahyo-dimas.github.io/freeday-ui-kit/)
-[![Release](https://img.shields.io/badge/release-v3.6.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.6.0)
+[![Release](https://img.shields.io/badge/release-v3.7.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.7.0)
 
 UI KIT yang token-driven & framework-agnostic. Satu sumber kebenaran untuk warna, tipografi,
 spasi, dan komponen. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`.
@@ -255,11 +255,24 @@ terlihat, HTML native dulu sebelum ARIA, komponen interaktif ikut pola WAI-ARIA
 `docs/index.html`.
 
 ## Dukungan browser
-Butuh browser evergreen, kira-kira 2023+: **Chrome 111 · Safari 16.4 · Firefox 113** (floor
-ditentukan `color-mix()`). Fitur lain: native `<dialog>`/`::backdrop`, `accent-color`, `100dvh`,
-`conic-gradient`, `scroll-snap`, semuanya ≥ Safari 15.4. Blur backdrop pakai
-`-webkit-backdrop-filter` + `backdrop-filter` (Safari lama tetap jalan, hanya tanpa blur). Belum ada
-CSS build/autoprefixer, jadi dukungan browser lama jadi tanggung jawab konsumen.
+**Chrome 105 · Safari 15.4 · Firefox 121.** Floor-nya ditentukan `:has()`, dan oleh generasi Safari
+15.4 untuk native `<dialog>`/`::backdrop`, `accent-color`, dan `100dvh`. `conic-gradient` dan
+`scroll-snap` lebih tua lagi.
+
+Dulu floor itu ditentukan `color-mix()` di Safari 16.4, dan sekarang tidak lagi. Harganya memang tak
+pernah pantas: deklarasi yang mencampur sebuah token membawa `var()`, jadi ia dianggap sah saat
+parse dan baru gagal saat computed-value, dan di jalur itu properti jatuh ke nilai *initial*-nya,
+bukan ke baris cadangan di atasnya. Di iPhone yang mentok di iOS 15, 17 deklarasi `border-color`
+berubah jadi `currentColor`, yaitu garis hitam tebal di hampir segalanya. Semua alpha di kit ini
+sekarang ditulis `rgba(var(--color-primary-rgb), .26)`, warnanya sama dan sudah bisa diparse sejak
+Safari 9; empat aturan yang memang tak bisa dijawab secara statis membawa pasangan `@supports` yang
+sungguhan. `test/color-mix.test.mjs` menjaga agar yang berikutnya tetap jujur.
+
+Yang paling baru dipakai kit ini (`@container`, `@starting-style`, `text-wrap`) sifatnya peningkatan:
+browser yang belum punya akan melewati bloknya dan tetap memakai aturan tanpa syarat di bawahnya.
+Blur backdrop pakai `-webkit-backdrop-filter` + `backdrop-filter` (Safari lama tetap jalan, hanya
+tanpa blur). Belum ada CSS build/autoprefixer, jadi dukungan di bawah floor itu jadi tanggung jawab
+konsumen.
 
 ## Lisensi
 [MIT](LICENSE) © 2026 Cahyo D. Kurnianto. Bebas dipakai, diubah, dan didistribusikan asal

package/README.md

@@ -5,7 +5,7 @@
 > **More free days for devs. The UI kit is ready to use.**
 
 [![Live docs](https://img.shields.io/badge/docs-live-2050d8?style=flat-square)](https://cahyo-dimas.github.io/freeday-ui-kit/)
-[![Release](https://img.shields.io/badge/release-v3.6.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.6.0)
+[![Release](https://img.shields.io/badge/release-v3.7.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.7.0)
 
 A token-driven, framework-agnostic UI kit. One source of truth for color, typography,
 spacing, and components. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`.
@@ -264,11 +264,23 @@ patterns, and `prefers-reduced-motion` is respected. Status is never conveyed by
 the "Accessibility" section in `docs/index.html`.
 
 ## Browser support
-Needs an evergreen browser, roughly 2023+: **Chrome 111 · Safari 16.4 · Firefox 113** (the floor is
-set by `color-mix()`). Other features used: native `<dialog>`/`::backdrop`, `accent-color`,
-`100dvh`, `conic-gradient`, `scroll-snap`, all of them ≥ Safari 15.4. Backdrop blur uses
+**Chrome 105 · Safari 15.4 · Firefox 121.** The floor is set by `:has()`, and by the Safari 15.4
+generation of native `<dialog>`/`::backdrop`, `accent-color` and `100dvh`. `conic-gradient` and
+`scroll-snap` are older still.
+
+`color-mix()` used to set that floor at Safari 16.4, and it no longer does. It was never worth it:
+a declaration that mixes a token carries `var()`, so it is assumed valid at parse time and only
+fails at computed-value time, where the property drops to its *initial* value instead of to a
+fallback line. On an iPhone that stopped at iOS 15 that turned 17 `border-color` declarations into
+`currentColor`, which is a thick black outline on roughly everything. Every alpha in the kit is now
+written `rgba(var(--color-primary-rgb), .26)`, which is the same colour and parses back to Safari 9;
+the four rules that cannot be answered statically carry a real `@supports` counterpart.
+`test/color-mix.test.mjs` keeps the next one honest.
+
+The newest things the kit touches (`@container`, `@starting-style`, `text-wrap`) are enhancements: a
+browser without them skips the block and keeps the unconditional rule underneath. Backdrop blur uses
 `-webkit-backdrop-filter` + `backdrop-filter` (older Safari still works, just without the blur).
-There's no CSS build or autoprefixer step, so supporting older browsers is the consumer's
+There's no CSS build or autoprefixer step, so supporting anything below the floor is the consumer's
 responsibility.
 
 ## License

package/USAGE.md

@@ -107,6 +107,48 @@ point, everything around it quiet.
 - **Surfaces:** most backgrounds are `--color-surface`; `--color-surface-2`/`-3` for a recessed area;
   `--color-primary-soft` only when you want a tinted callout, not as a default panel colour.
 
+### Putting an alpha on a role: use the channel triple, not `color-mix()`
+
+Every role you are likely to fade has a companion triple, so a 26% primary wash is:
+
+```css
+background: rgba(var(--color-primary-rgb), .26);
+```
+
+Reach for `color-mix(in srgb, var(--color-primary) 26%, transparent)` instead and you get the same
+colour on your machine and a missing one on an older iPhone, with **no way to put a fallback under
+it.** A declaration that mentions a custom property is assumed valid when the stylesheet is parsed
+and is only checked later, when the variable is substituted; if `color-mix()` is unknown at that
+point the declaration is thrown away *there*, and the browser does not go back to the static line
+you wrote above it. The property takes its initial value instead, which for `border-color` means
+`currentColor`: a thick black outline. Safari learned `color-mix()` in 16.2, so every phone that
+stopped at iOS 15 sees that.
+
+The triples are generated from the tokens they are named after, in all 18 palettes and both themes,
+so they follow a re-brand on their own. The ones that ship: `--color-primary-rgb`,
+`--color-on-primary-rgb`, `--color-danger-rgb`, `--color-danger-btn-rgb`, `--color-success-rgb`,
+`--color-warning-rgb`, `--color-info-rgb`, `--color-surface-rgb` and `--color-inverse-text-rgb`.
+If you need one the kit does not publish, ask for it rather than hard-coding channels.
+
+### Tinting one role over another: the colour is already a token
+
+A triple puts an alpha on **one** role. It cannot say "18% of this tone over the surface", because
+the result depends on two roles and on the theme. Those blends are computed when the kit is built
+and published as flat tokens, so you never write the mix at all:
+
+```css
+background: var(--tone-3-bg);      /* 18% of --tone-3 over --color-surface  */
+color: var(--tone-3-ink);          /* 50% of --tone-3 toward --color-text    */
+border-color: var(--tone-3-border);/* 30% of --tone-3 over --color-border    */
+```
+
+`--tone-N-bg` / `-ink` / `-border` / `-border-soft` exist for all eight tones in both themes, and are
+exactly what `.fdy-avatar--tone-N`, `.fdy-badge--tone-N` and `.fdy-chip--tone-N` paint — the
+`-ink` on the `-bg` is the pair the WCAG gate measures, so a custom element built from the same two
+tokens inherits that guarantee. `--color-danger-border` (40% of danger over the border) is the same
+idea for a row that failed. If you need a blend the kit does not publish, ask for it: it belongs in
+`tokens/tokens.json`, where the build can resolve it down both themes, not in a component.
+
 ## 5b. Theme: global by default, per-subtree when a region is inverted
 
 `data-theme="light|dark"` redefines the semantic tokens. Set it on `<html>` and it themes the app;