/* Badminton Club — LAPISAN DELTA di atas DS. Dipasang SESUDAH ../tokens.css dan ../typography.css. Isinya cuma yang beda: font family + warna brand. Sisanya (surface, text, semantic, radius, gap, seluruh tangga --text-*) tetap datang dari DS dan ikut berubah kalau DS berubah. Jangan menyalin token DS ke sini. Kalau butuh nilai baru yang belum ada di DS, tanya dulu — bukan bikin token tandingan. ── Kenapa sumbunya data-skin, BUKAN data-theme ── tokens.css memilih palet base lewat data-theme (dark/light/stockbit-web/…). Kalau data-theme diisi "badminton", tidak ada blok DS yang cocok, halaman jatuh ke :root = Unibit Dark dan terang/gelap jadi tidak bisa dipilih lagi. Jadi sumbunya dipisah: data-theme tetap milik DS, data-skin milik project. Spesifisitas :root[data-skin] (0,2,0) menang atas :root dan [data-font] (0,1,0). ── Kenapa cuma --font-family yang perlu di-override ── Token teks di typography.css ditulis `400 14px/20px var(--font-family)` dan dideklarasikan di :root (= ). Custom property disubstitusi PER ELEMEN, jadi selama --font-family juga di-override di (bukan di ), ke-33 token --text-* ikut ganti huruf. Kalau override-nya ditaruh di atau di selector lain, token --text-* yang diwarisi sudah terlanjur "dibakar" dengan Open Sans dan TIDAK akan berubah. */ /* Cuma dua bobot yang diminta, 400 dan 700, karena cuma itu yang dipakai seluruh token --text-*. Minta bobot yang tidak terpakai berarti menunggu berkas font yang tidak pernah digambar. opsz 9..40 itu sumbu optical size bawaan DM Sans: satu berkas melayani teks 11px sampai judul, hurufnya menyesuaikan sendiri. */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,700&display=swap'); :root[data-skin="badminton"] { /* ── Font ── Open Sans dipertahankan sebagai cadangan, bukan hiasan: dia sudah dimuat typography.css, jadi kalau Google Fonts lambat atau diblokir, halaman tetap jatuh ke huruf yang benar dan bukan ke Times bawaan browser. */ --font-family: 'DM Sans', 'Open Sans', sans-serif; /* ── Brand ── hijau Wise, SATU rona per mode. Hijau Wise aslinya #9FE870 (hue 96). Warna itu SANGAT terang: di latar putih kontrasnya cuma 1.47, jadi mustahil dipakai sebagai tinta — garis chip, ikon tab aktif, dan garis bawah tab akan hilang. Wise sendiri memakainya sebagai ISIAN dengan teks gelap di atasnya, bukan sebagai tinta. Karena di app ini --brand dipakai dua-duanya (tinta DAN isian), yang dipertahankan adalah RONA-nya, dan terangnya disetel per mode: terang — #3C7B14, hue sama, kontras 5.20 di atas putih gelap — #9FE870, hijau Wise apa adanya, kontras 11.19 di atas surface brand-low/med ikut sendiri karena diturunkan dari --brand-rgb. */ --brand-rgb: 60 123 20; /* #3C7B14 — mode terang */ --brand: rgb(var(--brand-rgb)); --brand-low: rgb(var(--brand-rgb) / 12%); --brand-med: rgb(var(--brand-rgb) / 30%); /* Warna teks/ikon DI ATAS isian brand. DS punya --white untuk peran ini, tapi --white cuma benar kalau brand-nya gelap. Di mode gelap ungunya terang, teks putih di atasnya cuma 3.13 — tidak kebaca. Jadi peran ini dipisah jadi token sendiri dan nilainya ikut mode. Nilainya bukan warna baru, cuma memilih antara dua token DS yang sudah ada. */ --on-brand: var(--white); } /* --positive / --negative SENGAJA tidak diubah: itu sumbu semantik (naik/turun, berhasil/gagal), bukan identitas merek. Di DS kebetulan --positive sewarna --brand; di sini keduanya jadi beda, dan memang begitu seharusnya. */ /* Mode gelap: rona sama, terangnya dinaikkan. Ditulis untuk semua mode gelap DS, bukan cuma "dark", supaya skin ini tidak jatuh ke nada terang kalau halaman dipindah ke stockbit-dark atau bibit-dark. */ :root[data-skin="badminton"][data-theme="dark"], :root[data-skin="badminton"][data-theme="stockbit-dark"], :root[data-skin="badminton"][data-theme="bibit-dark"] { --brand-rgb: 159 232 112; /* #9FE870 — hijau Wise apa adanya */ --on-brand: var(--artboard); /* #121212 — putih kalah di hijau terang */ }