/* ============================================================================ ByChess tasarım jetonları ---------------------------------------------------------------------------- Marka dili: **andezit + pirinç** (DECISIONS § 077; önceki mor dil § 066, ilk dil § 039): · Andezit (antrasit taş) kabuk ve birincil aksiyon — sidebar, başlık bandı, giriş paneli, dolu düğme `--ink-900` / `--primary` · Pirinç ikincil: link, aktif sekme, vurgulu rakam, koyu zeminde vurgu. Az ve yerinde — dolgu değil işaret rengi (§ 077) · Logo moru **üçüncül**: grafik serisi, tahtadaki işaretler, mor karo ikonu. Kabukta ve düğmede mor yok (§ 077) · Saf beyaz yok: koyu zeminde ve yüzeylerde ılık kırık beyaz · Oswald başlık/etiket/düğme, Poppins gövde — dar versal ile rahat gövde · Keskin köşe (4px), degrade yok, renkli gölge yok · Yarı saydam katman yok: cam çip, soluk ızgara dokusu, %50 kilitli kart yerine ölçekten opak bir ton (DECISIONS § 048). Tahtadaki kare işaretleri istisna — altındaki kare rengi görünmek zorunda. · Kare form (4px köşe): logo işareti, avatar, seviye numarası · Yalnız açık tema (§ 067): koyu kabuk + açık içerik. Beyaz kart opak taş grisi zeminde durur; ekranın yaklaşık yarısı beyaz. · Renkli şeritli kutu yok (§ 067): karo kimliği ikon rengi + köşedeki iki karelik tahta işareti; basılabilir yüzey opak "taş gölgesi"yle kalkar. Şablonlarda çıplak hex yazma; her renk buradan gelir. ========================================================================= */ :root { color-scheme: light; /* --- Andezit ölçeği — birincil renk ------------------------------------ Volkanik taşın soğuk nötr grisi. 500 birincil aksiyon, 600/700 basılı. */ --stone-50: #f3f4f5; --stone-100: #e5e7e9; --stone-200: #cbcfd3; --stone-300: #a4aab1; --stone-400: #6b727c; --stone-500: #2b3138; /* birincil aksiyon */ --stone-600: #21262c; /* basılı hâl */ --stone-700: #191d22; --stone-800: #101317; /* --- Pirinç ölçeği — ikincil renk -------------------------------------- Donuk, oksitlenmiş pirinç; neon altın değil. 500 açık zeminde metin olacak kadar koyu (≥ 4.5:1), 300 koyu zeminde okunan vurgu. */ --brass-50: #faf6ea; --brass-100: #f2e9d3; --brass-200: #e2d2a6; --brass-300: #c9ac68; /* koyu zeminde vurgu */ --brass-400: #ab8836; --brass-500: #7b5e1c; /* açık zeminde link/vurgu metni */ --brass-600: #634c16; --brass-700: #4a3910; /* --- Mor ölçeği — ÜÇÜNCÜL renk (§ 077) --------------------------------- Eski marka moru (#2f2280, § 066). Artık kabukta, düğmede, kenarda yok; yalnız veri (grafik), tahtadaki işaretler ve mor karo ikonunda. */ --violet-50: #f1eefb; --violet-100: #e2ddf6; --violet-200: #c6bdee; --violet-300: #a195de; --violet-400: #7565c9; --violet-500: #2f2280; --violet-600: #271c6c; --violet-700: #1f1657; /* --- Kabuk ölçeği — andezit zemin ve üstündeki açık tonları ------------ 900 kabuk rengi; 800/700 üstündeki hover ve aktif satır (bir ton açık). */ --ink-900: #1c2026; /* sidebar, başlık bandı, giriş paneli */ --ink-800: #252a31; --ink-700: #2f353d; --ink-600: #3b424b; --ink-500: #49515c; --ink-400: #5e6774; /* --- Yüzeyler — beyaz kart, opak taş grisi zemin (§ 067) --------------- Beyaz oranı ~%40–60: kart ve menü beyaz, sayfa zemini gri, kabuk andezit. Zemin kartı kenarsız da ayıracak kadar koyu; üstündeki silik metin yine 4.5:1'in üstünde. */ --surface: #fcfcfb; /* kart, menü, form: beyaz (saf #fff değil) */ --surface-alt: #ececeb; /* sayfa zemini: opak taş grisi */ --surface-sunken: #e3e3e1; /* girinti: log kutusu, ilerleme yatağı */ --border: #d9d9d6; /* hairline — gölgenin yerine geçen şey */ --border-strong: #b9bab6; --box-border: var(--border-strong); /* öğrenci kutularının tek kenar rengi (§ 095) */ /* Taş gölgesi: basılabilir karonun altındaki opak, bulanıksız kalınlık. Basınca karo bu kalınlığa iner. Yarı saydam gölge yok. */ --lift: #c9cac6; --lift-primary: var(--stone-800); /* --- Metin ------------------------------------------------------------- */ --text: #1a1d21; --text-muted: #555b62; --text-faint: #5e646b; /* gri zeminde ve girintide de ≥ 4.5:1 */ --text-inverse: #f7f6f2; /* andezit/koyu dolgu üstündeki metin */ --on-ink: #c9ccd2; /* koyu zemin üzerindeki ikincil metin */ --on-ink-faint: #969ca5; /* koyu zemin üzerindeki bölüm başlığı */ --on-ink-accent: var(--brass-300); /* koyu zeminde aktif işaret, kulüp adı, hata kodu — pirinç burada parlar */ /* --- Kırık beyaz — andezitin karşısındaki ton -------------------------- Logo beyazı arayüzde saf beyaz basılmaz: koyu zemin üstündeki başlık, logo ve işaretler bu. `--paper` sabit (kabuk her hâlde koyu); `--surface-paper` giriş formu zemini. -hover/-active koyu zemindeki kırık beyaz düğmenin basamakları (mor ramp'in yerine, § 077). */ --paper: #f7f6f2; --paper-hover: #e9e7de; --paper-active: #dcd8c9; --surface-paper: #faf9f6; /* "Apple ile devam et" düğmesi (§ 093): Apple'ın marka kuralı siyah, beyaz ya da beyaz-çerçeve ister; andezit yerine saf siyah. Google "G"si gibi arayüzün kendi dilinin dışındaki tek istisna. */ --apple-black: #000000; /* --- Durum — donuk, kurumsal tonlar (neon değil) ----------------------- Her biri kendi `-soft` zemininde de ≥ 4.5:1 okunur. */ --success: #106b3e; --success-hover: #0c5731; --success-soft: #eaf4ee; --danger: #9b2f28; /* mat tuğla kırmızısı — kil/çam/pirinçle aynı doygunluk (§ 095) */ --danger-hover: #7c241f; --danger-soft: #fbebe9; --warning: #8f5500; --warning-soft: #fdf5e4; --info: var(--brass-600); --info-soft: var(--brass-50); /* --- Anlamsal marka jetonları — bileşenler ramp'e değil bunlara bakar, ramp değerleri (stone/brass/violet) sabit. Koyu tema § 067'de kaldırıldı; jeton katmanı yeni bir tema ya da kulüp rengi gerekirse diye duruyor. */ --primary: var(--stone-500); /* dolu buton, aktif çip, odak halkası */ --primary-hover: var(--stone-600); --primary-active: var(--stone-700); --on-primary: var(--text-inverse); --on-primary-muted: var(--on-ink); /* dolu karonun alt yazısı/ikonu */ --border-hover: var(--stone-300); /* tıklanır kartın hover kenarı */ --accent-text: var(--brass-500); /* link, vurgulu rakam, aktif sekme */ /* Soluk renkli zemin yok (§ 090): açık pirinç/mor/yeşil yıkama yarı saydam gibi duruyordu. Seçili/hover zemin nötr opak gri. */ --soft-bg: var(--surface-alt); /* seçili seçenek, hover, "sen" satırı */ --soft-bg-hover: var(--surface-sunken); --soft-border: var(--border-strong); --soft-text: var(--brass-600); /* --- Öğrenci arayüzü vurguları ---------------------------------------- Karo dolgusu da şerit de değil (§ 067): ikon rengi ve köşedeki iki karelik tahta işareti. Şeker rengi yok: hepsi andezitle yan yana durabilen donuk tonlar. Mor artık üçüncül renk olduğu için karo vurgusu `--accent-violet` adıyla logo morunun kendisi (§ 077). */ --accent-gold: var(--brass-500); --accent-violet: var(--violet-500); --accent-pine: #0f6b5c; --accent-clay: #a4472c; /* Öğren modu yıldızı: dolu pirinç + koyu kenar, iki tahta renginde de okunur. */ --star-fill: #d9ab45; --star-edge: #5f4712; /* --- Tahta ------------------------------------------------------------- Kareler andezit ölçeğinden; üstündeki işaretler üçüncül mor (§ 077). */ --shape-green: var(--success); --shape-red: var(--danger); --shape-blue: #2f6fe0; /* ok/daire "Alt = mavi" — gerçekten mavi kalmalı */ --board-light: #e7e6e1; --board-dark: #6d7480; --board-highlight: rgba(79, 58, 168, .45); /* Koordinat pratiği (§ 042): basılan kare doğru/yanlış, yanlışta doğrusu. */ --board-hit: rgba(16, 107, 62, .62); --board-miss: rgba(192, 38, 38, .62); /* Oyun (§ 047): kareye taşın altından binen yarı saydam katmanlar. */ --board-last-move: rgba(79, 58, 168, .34); --board-premove: rgba(15, 107, 92, .5); --board-check: rgba(192, 38, 38, .6); /* Öğren modu (§ 061): seçili taş, gidebileceği kare noktası, yenecek taş halkası, çocuğu yiyecek siyah taş. */ --board-select: rgba(79, 58, 168, .5); --board-dest: rgba(26, 29, 33, .32); --board-attacker: rgba(192, 38, 38, .75); /* --- Grafik (components/charts.html) ---------------------------------- Tek seri, tek renk: üçüncül mor. Veri rengi arayüz renginden ayrı dursun diye andezit/pirinç değil mor (§ 077). Seçili sütun/nokta koyu. */ --chart-mark: var(--violet-400); --chart-mark-active: var(--violet-500); /* --- Renk aileleri: karo ve rozet (§ 089) ---------------------------- Her aile üç opak ton: zemin (soft), ana renk (dolu ikon karesi, kenar), koyu (taş gölgesi, madalya çemberi). Renk ya belirgin ya hiç: beyaz karoda küçük renkli işaret "çelişkili" duruyordu. Zemin (soft) artık soluk renk değil opak beyaz yüzey (§ 090): renk kenarda, dolu ikon karesinde ve taş gölgesinde — soluk yıkama yarı saydam gibi duruyordu. */ --fam-violet: var(--violet-500); --fam-violet-soft: var(--surface); --fam-violet-deep: var(--violet-700); --fam-gold: var(--brass-400); --fam-gold-soft: var(--surface); --fam-gold-deep: var(--brass-600); --fam-pine: #0f6b5c; --fam-pine-soft: var(--surface); --fam-pine-deep: #0a4a40; --fam-clay: #a4472c; --fam-clay-soft: var(--surface); --fam-clay-deep: #71301d; --fam-ink: var(--stone-500); --fam-ink-soft: var(--surface); --fam-ink-deep: var(--stone-800); --fam-violet-muted: var(--violet-100); /* dolu mor karonun alt yazısı */ /* --- Sınıf seviyesi işareti (§ 088) ----------------------------------- Üç kademe renkle ayrılır: başlangıç (1–3) açık pirinç, orta (4–6) mor karo, ileri (7–9) andezit + pirinç rakam. Kademe içindeki yer noktayla. */ --level-1-bg: var(--brass-100); --level-1-fg: var(--brass-600); --level-2-bg: var(--violet-500); --level-2-fg: var(--paper); --level-3-bg: var(--stone-500); --level-3-fg: var(--brass-300); /* --- Geometri — keskin, kurumsal --------------------------------------- */ --radius-xs: 2px; --radius: 4px; --radius-lg: 6px; --radius-pill: 999px; /* --- Yükselti — opak, bulanıksız (§ 067) ------------------------------- Ana ayrım aracı kenar çizgisi. Yükselti yumuşak yarı saydam gölge değil, alttan kayık opak bir kalınlık: tahta taşı gibi. */ --shadow-sm: 0 2px 0 var(--lift); --shadow: 0 4px 0 var(--lift); --shadow-lg: 0 6px 0 var(--lift-primary); /* --- Dokunma hedefleri (DESIGN_SYSTEM § Dokunma hedefleri) ------------- */ --tap: 56px; /* öğrenci panelindeki birincil aksiyonlar */ --tap-min: 44px; /* her yerde asgari (WCAG 2.5.8) */ /* --- Tipografi --------------------------------------------------------- Oswald (başlık, etiket, düğme, menü, iri rakam) dar ve uzun — gövdede uzun metni zor okutur; gövde Poppins'te kalır. Oswald değişken (200–700), Poppins statik 300–700: 800 istenen yerde tarayıcı 700'e yuvarlar. */ --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Oswald", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --step--1: .8125rem; --step-0: .9375rem; --step-1: 1.0625rem; --step-2: 1.25rem; --step-3: 1.5rem; --step-4: 2rem; /* Bölüm etiketi: küçük, versal, geniş harf aralığı, Oswald. */ --eyebrow-tracking: .1em; } /* --- Tahta temaları (§ 088) ------------------------------------------------- `` kullanıcının tercihinden gelir (services/board_prefs.py). Yalnız kare renkleri değişir; işaretler (mor vurgu, ok) her temada aynı. */ /* andezit varsayılanın aynısı; seçicideki örnek kare, sayfa başka temadayken de kendi rengini göstersin diye açıkça yazılı. */ [data-board="andezit"] { --board-light: #e7e6e1; --board-dark: #6d7480; } [data-board="kahve"] { --board-light: #f0d9b5; --board-dark: #b58863; } [data-board="yesil"] { --board-light: #ebecd0; --board-dark: #739552; } [data-board="mavi"] { --board-light: #dee3e6; --board-dark: #8ca2ad; } [data-board="mor"] { --board-light: var(--violet-50); --board-dark: var(--violet-400); }