/* * TEMA ÇEKİRDEĞİ — çalışma alanının bütün renklerinin tek kaynağı. * * NE İŞE YARIYOR * Taiga, Proje Çizimleri, Not Defteri ve kendi sayfalarımız (giriş, kişisel * alan, profil, yönetim, çizimler, dokümanlar) bugüne kadar aynı paleti * dokuz ayrı isim altında taşıyordu: --k- (Taiga), --n- (Not Defteri), * --x- (Çizim), --c-, --d-, --p-, --y- ve iki ayrı --teal. Aynı teal dokuz * yerde yazılıydı; birini değiştirmek diğer sekizini ıskalamak demekti. * * Bu dosya o dokuz ismin arkasına tek bir katman koyuyor. Artık hepsi * buradan okuyor (--k-accent: var(--m-accent) gibi), yani rengi değiştiren * tek yer burası. * * NEDEN SADECE BİRKAÇ SAYI * Palet zaten OKLCH ile yazılmıştı ve neredeyse tamamı hue 200'de (marka * teal), 220'de (degradenin ikinci durağı), 210'da (gölge), 340'ta (logonun * karşıt rengi) ve 60'ta (zemindeki sıcak ışık lekesi) duruyordu. OKLCH'te * aynı L (parlaklık) değeri her hue'da gerçekten aynı parlaklıkta görünür - * HSL'in aksine. Bu yüzden bu beş sayıyı döndürmek kontrast oranlarını * bozmuyor: sekiz temanın hepsi aynı okunurlukta kalıyor. Tema tanımı da * bu yüzden yedi satır: beş hue, bir doygunluk çarpanı, bir de ad. * * İKİ EKSEN * data-tema = renk (okyanus, yosun, gok, murekkep, orkide, gul, bakir, grafit) * data-zemin = açık / koyu * İkisi bağımsız: sekiz renk × iki zemin = on altı görünüm. Renk tokenları * hue'dan, yüzey tokenları zeminden türüyor; ikisi birbirine karışmıyor. * * ANLAM RENKLERİ TEMAYA UYMAZ * Hata kırmızısı (25), uyarı turuncusu (55) ve onay yeşili (150) hiçbir * temada dönmüyor. Bakır temada silme düğmesinin turuncuya kayması, * kullanıcının "sil"i "kaydet" sanmasına açık kapı bırakırdı. Aynı üçlü * kart önceliğini de anlatıyor (Yüksek/Orta/Düşük) - orada da rengin * temayla dönmesi "acil"i "tamam" gibi göstermek olurdu. * * NEREDEN GELİYOR * Kapı (taiga.conf) bu dosyayı üç uygulamanın da 'ine koyuyor; kendi * sayfalarımız kendi 'lerinde çağırıyor. Seçimi etiketine * yazan taraf tema.js. * * BOZULURSA * üzerindeki data-tema / data-zemin niteliklerini sil: aşağıdaki ilk * blok (Okyanus + açık zemin) devreye girer, yani sistem bugünkü rengine * döner. Tema motorunu tamamen çıkarmak için bu dosyanın 'ini kaldır; * her isim alanının kendi var(--m-…, yedek) yedeği yerinde durduğu için * sayfalar yine bugünkü paletle çizilir. */ /* ===================================================================== * 1. TEMA GİRDİLERİ * * Her tema yalnızca aşağıdaki yedi değeri veriyor: * --m-h ana marka hue'su (düğme, bağlantı, etkin durum) * --m-h2 degradenin ikinci durağı (genelde h + 20) * --m-hm gölgelerin ara hue'su (h ile h2'nin ortası) * --m-h3 karşıt renk (logo degradesi, süs lekesi) * --m-hw sıcak ışık lekesi (sayfa zemininin sağ üst köşesi) * --m-hb zemin degradesinin orta durağı * --m-c doygunluk çarpanı (1 = normal, 0.2 = neredeyse gri) * * Sıra: hue'lar 45 → 355 arasında olabildiğince eşit dağıtıldı ki sekiz kart * yan yana dururken hiçbiri diğerinin tonu gibi görünmesin. * ================================================================== */ /* Okyanus — çalışma alanının bugünkü rengi. Seçim yapılmamışsa bu geçerli, yani tema motoru eklendiğinde hiç kimsenin ekranı değişmiyor. */ :root, [data-tema="okyanus"] { --m-h: 200; --m-h2: 220; --m-hm: 210; --m-h3: 340; --m-hw: 60; --m-hb: 90; --m-c: 1; } /* Yosun — yaprak yeşili. Onay yeşiline (150) yakın duruyor; ayırt edilsin diye ana hue 138'e çekildi ve doygunluğu biraz yüksek tutuldu. */ [data-tema="yosun"] { --m-h: 138; --m-h2: 158; --m-hm: 148; --m-h3: 300; --m-hw: 75; --m-hb: 105; --m-c: 1.05; } /* Gök — klasik kurumsal mavi. */ [data-tema="gok"] { --m-h: 245; --m-h2: 262; --m-hm: 253; --m-h3: 20; --m-hw: 60; --m-hb: 85; --m-c: 1.1; } /* Mürekkep — indigo/mor. Yazılım araçlarının (Linear, Plane) sevdiği ton. */ [data-tema="murekkep"] { --m-h: 288; --m-h2: 302; --m-hm: 295; --m-h3: 45; --m-hw: 55; --m-hb: 80; --m-c: 1.15; } /* Orkide — magenta. */ [data-tema="orkide"] { --m-h: 325; --m-h2: 342; --m-hm: 334; --m-h3: 255; --m-hw: 45; --m-hb: 70; --m-c: 1.2; } /* Gül — pembe-kırmızı. Hata kırmızısı 25'te; bu 355'te, yani pembe tarafta duruyor ve karışmıyor. */ [data-tema="gul"] { --m-h: 355; --m-h2: 12; --m-hm: 4; --m-h3: 300; --m-hw: 45; --m-hb: 65; --m-c: 1.25; } /* Bakır — yanık turuncu. Sıcak hue'lar aynı L'de daha az doygun görünür, o yüzden çarpan yüksek; yoksa kahverengiye düşüyor. */ [data-tema="bakir"] { --m-h: 45; --m-h2: 28; --m-hm: 37; --m-h3: 200; --m-hw: 75; --m-hb: 95; --m-c: 1.4; } /* Grafit — neredeyse renksiz. Doygunluk çarpanı düşürülüyor, hue yerinde kalıyor: renk kaybolurken zemin ve gölgeler soğuk grinin içinde kalsın, ölü bir nötr griye düşmesin diye. */ [data-tema="grafit"] { --m-h: 250; --m-h2: 236; --m-hm: 243; --m-h3: 250; --m-hw: 250; --m-hb: 250; --m-c: 0.22; } /* ===================================================================== * 2. AÇIK ZEMİN * * Yukarıdaki yedi sayıdan çalışma alanının bütün renkleri burada türüyor. * Aşağıdaki L (parlaklık) ve C (doygunluk) değerleri Okyanus temasının * bugünkü paletinden birebir alındı; --m-c 1 iken bu blok bugünkü renklerin * aynısını üretiyor. * ================================================================== */ /* Türetmeler yalnızca :root'ta değil, data-tema taşıyan her öğede yeniden yapılıyor. Sebebi CSS'in kendi kuralı: özel değişkenler hesaplanmış değer olarak miras alınır, yani --m-accent bir kez :root'ta çözülürse alttaki bir öğenin --m-h'yi değiştirmesi onu etkilemez. Türetmeler de birlikte tekrarlanınca, içine data-tema yazılan her kutu kendi temasını çiziyor. */ :root, [data-tema] { color-scheme: light; /* --- vurgu --- */ --m-accent: oklch(0.55 calc(0.09 * var(--m-c)) var(--m-h)); --m-accent-deep: oklch(0.45 calc(0.1 * var(--m-c)) var(--m-h)); --m-accent-mid: oklch(0.5 calc(0.09 * var(--m-c)) var(--m-h)); --m-accent-bright: oklch(0.6 calc(0.11 * var(--m-c)) var(--m-h)); --m-accent-soft: oklch(0.95 calc(0.02 * var(--m-c)) var(--m-h)); /* hover zemini */ --m-accent-tint: oklch(0.93 calc(0.04 * var(--m-c)) var(--m-h)); /* seçili zemin */ --m-accent-wash: oklch(0.97 calc(0.015 * var(--m-c)) var(--m-h)); /* en hafif zemin */ --m-accent-edge: oklch(0.85 calc(0.05 * var(--m-c)) var(--m-h)); /* çerçeve, odak */ --m-accent-pale: oklch(0.75 calc(0.1 * var(--m-c)) var(--m-h)); /* süs, ikon */ --m-accent-ink: oklch(0.42 calc(0.1 * var(--m-c)) var(--m-h)); /* renkli zemin üstü metin */ --m-on-accent: #ffffff; /* vurgu üstündeki metin */ /* Odak halkası ve saydam vurgu. Doygunluk çarpanı burada da geçerli. */ --m-accent-ring: oklch(0.55 calc(0.09 * var(--m-c)) var(--m-h) / 0.12); --m-accent-ring-strong: oklch(0.55 calc(0.09 * var(--m-c)) var(--m-h) / 0.25); /* --- degradeler --- */ --m-grad: linear-gradient(135deg, oklch(0.6 calc(0.11 * var(--m-c)) var(--m-h)), oklch(0.5 calc(0.1 * var(--m-c)) var(--m-h2))); --m-grad-shadow: 0 6px 16px oklch(0.55 calc(0.1 * var(--m-c)) var(--m-hm) / 0.3); --m-grad-shadow-sm: 0 6px 14px oklch(0.55 calc(0.1 * var(--m-c)) var(--m-hm) / 0.3); /* Marka degradesi: logo ve avatar. Ana renkten karşıt renge geçer. */ --m-brand: linear-gradient(135deg, oklch(0.6 calc(0.11 * var(--m-c)) var(--m-h)), oklch(0.65 calc(0.12 * var(--m-c)) var(--m-h3))); /* --- karşıt ve sıcak renk (süs) --- */ --m-alt: oklch(0.65 calc(0.12 * var(--m-c)) var(--m-h3)); --m-alt-pale: oklch(0.78 calc(0.1 * var(--m-c)) var(--m-h3)); --m-warm: oklch(0.82 calc(0.11 * var(--m-c)) var(--m-hw)); /* --- tipografi --- Üç uygulamada da Manrope; dosyalar kapının kendi dizininden servis ediliyor (@font-face tanımları uygulamaların kendi temalarında). */ --m-font: "Manrope", Ubuntu, system-ui, -apple-system, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; /* --- metin --- */ --m-ink: #22303a; --m-ink-mid: #55646e; --m-ink-soft: #7c8a94; --m-ink-faint: #93a1aa; --m-ink-faintest: #a0acb4; --m-ink-label: #8a97a0; /* --- yüzeyler --- */ --m-sheet: #ffffff; /* kart, modal, açılır menü */ --m-glass: rgba(255, 255, 255, 0.55); --m-glass-strong: rgba(255, 255, 255, 0.78); --m-glass-solid: rgba(255, 255, 255, 0.9); /* Tül: renkli bir zeminin üstüne düşen ince ışık (etkin sekmenin parlaklığı, degrade düğmenin üst kenarı). Beyaz kalıyor çünkü koyu zeminde de aynı işi görüyor - yüzeyi değil, üstündeki ışığı tarif ediyor. */ --m-tul: rgba(255, 255, 255, 0.22); --m-edge: rgba(255, 255, 255, 0.9); --m-line: #e6ebee; /* form kenarlıkları */ --m-line-strong: #d7dee2; --m-line-soft: #eef2f4; /* tablo satır ayracı */ --m-field: #fbfcfd; /* girdi zemini */ --m-surface-low: #f2f6f8; --m-surface-mid: #f7fafb; --m-surface-high: #eaf1f4; /* --- gölgeler --- */ --m-shadow-sm: 0 3px 10px rgba(30, 60, 75, 0.06); --m-shadow-md: 0 8px 20px rgba(30, 60, 75, 0.12); --m-shadow-lg: 0 12px 36px rgba(30, 60, 75, 0.07); --m-shadow-pop: 0 24px 60px rgba(20, 40, 55, 0.22); --m-shadow-perde: rgba(30, 60, 75, 0.35); /* --- sayfa zemini --- Sağ üstteki sıcak leke ayrı bir katman değil, aynı background'un ikinci durağı: yeni bir yığılma bağlamı doğmasın, açılır menülerin katman sırası bozulmasın diye. */ --m-page-bg: radial-gradient(340px 340px at calc(100% - 60px) -40px, oklch(0.88 calc(0.09 * var(--m-c)) var(--m-hw) / 0.42) 0%, oklch(0.88 calc(0.09 * var(--m-c)) var(--m-hw) / 0) 70%), linear-gradient(160deg, oklch(0.97 calc(0.03 * var(--m-c)) var(--m-h)) 0%, oklch(0.98 calc(0.02 * var(--m-c)) var(--m-hb)) 55%, oklch(0.96 calc(0.03 * var(--m-c)) var(--m-h3)) 100%); /* Lekesiz sürümü: Not Defteri ve Çizim bunu kullanıyor. */ --m-page-bg-duz: linear-gradient(160deg, oklch(0.97 calc(0.03 * var(--m-c)) var(--m-h)) 0%, oklch(0.98 calc(0.02 * var(--m-c)) var(--m-hb)) 55%, oklch(0.96 calc(0.03 * var(--m-c)) var(--m-h3)) 100%); /* Süs lekeleri (blob) */ --m-blob-a: oklch(0.88 calc(0.08 * var(--m-c)) var(--m-h) / 0.45); --m-blob-b: oklch(0.88 calc(0.09 * var(--m-c)) var(--m-hw) / 0.5); --m-blob-c: oklch(0.88 calc(0.08 * var(--m-c)) var(--m-h3) / 0.4); /* Tuval nokta ızgarası */ --m-nokta: oklch(0.85 calc(0.02 * var(--m-c)) var(--m-h2)); /* Sarı vurgu zemini (Taiga'nın "değişti" işaretleri). */ --m-warm-wash: oklch(0.97 calc(0.05 * var(--m-c)) var(--m-hw)); /* --- anlam renkleri: temayla dönmez --- */ --m-danger: oklch(0.55 0.18 25); --m-danger-deep: oklch(0.45 0.18 25); --m-danger-soft: oklch(0.95 0.04 25); /* Renkli zemin üstü değil, sayfa zemini üstündeki kırmızı metin. Üç anlam ailesinin (kırmızı/turuncu/yeşil) de bir "ink" tonu var ki aynı işi yapan üç metin aynı okunurlukta olsun. */ --m-danger-ink: oklch(0.42 0.16 25); /* Uyarı (turuncu). Kırmızı 25'te, bu 55'te: otuz derece aralık iki rengi yan yana dururken bile ayırmaya yetiyor. Sarıya (75+) kaçırılmadı, çünkü sarı açık zeminde okunmuyor ve "uyarı" değil "vurgulanmış" görünüyor. Kırmızı ve yeşil gibi bu da hiçbir temada dönmüyor. */ --m-uyari: oklch(0.62 0.16 55); --m-uyari-deep: oklch(0.5 0.15 50); --m-uyari-soft: oklch(0.94 0.06 65); --m-uyari-ink: oklch(0.46 0.13 50); --m-ok: oklch(0.5 0.12 150); --m-ok-bright: oklch(0.62 0.13 150); --m-ok-soft: oklch(0.93 0.05 150); --m-ok-ink: oklch(0.4 0.1 150); } /* ===================================================================== * 3. KOYU ZEMİN * * Yalnızca yüzey ve metin tokenları değişiyor; hue'lara hiç dokunulmuyor. * Sekiz renk de koyu zeminde çalışıyor. * * Vurgu koyuda açılıyor (L 0.55 -> 0.70): koyu zeminde aynı L daha sönük * görünür ve düğme metni okunmaz hâle gelir. Açılan vurgunun üstündeki metin * de bu yüzden beyaz değil, koyu (--m-on-accent). * * Yüzeyler nötr gri değil, ana hue'nun çok az bulaştığı gri: koyu zeminde * tam nötr gri "ölü" görünüyor, birkaç birim renk tonu bütün ekranı tek * parça tutuyor. * ================================================================== */ [data-zemin="koyu"] { color-scheme: dark; --m-accent: oklch(0.72 calc(0.12 * var(--m-c)) var(--m-h)); --m-accent-deep: oklch(0.62 calc(0.12 * var(--m-c)) var(--m-h)); --m-accent-mid: oklch(0.67 calc(0.12 * var(--m-c)) var(--m-h)); --m-accent-bright: oklch(0.78 calc(0.12 * var(--m-c)) var(--m-h)); --m-accent-soft: oklch(0.32 calc(0.04 * var(--m-c)) var(--m-h)); --m-accent-tint: oklch(0.38 calc(0.06 * var(--m-c)) var(--m-h)); --m-accent-wash: oklch(0.27 calc(0.03 * var(--m-c)) var(--m-h)); --m-accent-edge: oklch(0.5 calc(0.08 * var(--m-c)) var(--m-h)); --m-accent-pale: oklch(0.62 calc(0.1 * var(--m-c)) var(--m-h)); --m-accent-ink: oklch(0.86 calc(0.08 * var(--m-c)) var(--m-h)); --m-on-accent: oklch(0.2 0.02 var(--m-h)); --m-accent-ring: oklch(0.72 calc(0.12 * var(--m-c)) var(--m-h) / 0.2); --m-accent-ring-strong: oklch(0.72 calc(0.12 * var(--m-c)) var(--m-h) / 0.35); --m-grad: linear-gradient(135deg, oklch(0.68 calc(0.13 * var(--m-c)) var(--m-h)), oklch(0.58 calc(0.12 * var(--m-c)) var(--m-h2))); --m-grad-shadow: 0 6px 16px oklch(0.5 calc(0.12 * var(--m-c)) var(--m-hm) / 0.45); --m-grad-shadow-sm: 0 6px 14px oklch(0.5 calc(0.12 * var(--m-c)) var(--m-hm) / 0.45); --m-brand: linear-gradient(135deg, oklch(0.68 calc(0.13 * var(--m-c)) var(--m-h)), oklch(0.72 calc(0.13 * var(--m-c)) var(--m-h3))); --m-alt: oklch(0.7 calc(0.13 * var(--m-c)) var(--m-h3)); --m-alt-pale: oklch(0.6 calc(0.11 * var(--m-c)) var(--m-h3)); --m-warm: oklch(0.68 calc(0.12 * var(--m-c)) var(--m-hw)); --m-ink: oklch(0.96 0.005 var(--m-h)); --m-ink-mid: oklch(0.81 0.012 var(--m-h)); --m-ink-soft: oklch(0.69 0.014 var(--m-h)); --m-ink-faint: oklch(0.6 0.014 var(--m-h)); --m-ink-faintest: oklch(0.55 0.014 var(--m-h)); --m-ink-label: oklch(0.63 0.014 var(--m-h)); --m-sheet: oklch(0.26 0.012 var(--m-h)); --m-glass: oklch(0.29 0.016 var(--m-h) / 0.62); --m-glass-strong: oklch(0.29 0.016 var(--m-h) / 0.84); --m-glass-solid: oklch(0.29 0.016 var(--m-h) / 0.94); --m-tul: rgba(255, 255, 255, 0.12); --m-edge: oklch(0.52 0.02 var(--m-h) / 0.24); --m-line: oklch(0.37 0.016 var(--m-h)); --m-line-strong: oklch(0.45 0.018 var(--m-h)); --m-line-soft: oklch(0.32 0.014 var(--m-h)); --m-field: oklch(0.23 0.012 var(--m-h)); --m-surface-low: oklch(0.3 0.014 var(--m-h)); --m-surface-mid: oklch(0.28 0.013 var(--m-h)); --m-surface-high: oklch(0.34 0.015 var(--m-h)); --m-shadow-sm: 0 3px 10px rgba(0, 0, 0, 0.3); --m-shadow-md: 0 8px 20px rgba(0, 0, 0, 0.42); --m-shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.4); --m-shadow-pop: 0 24px 60px rgba(0, 0, 0, 0.6); --m-shadow-perde: rgba(0, 0, 0, 0.62); /* Sıcak leke koyuda çok daha zayıf: açık zeminde "ışık düşmüş" gibi duran aynı leke koyu zeminde kahverengi bir bulanıklığa dönüşüyor. */ --m-page-bg: radial-gradient(340px 340px at calc(100% - 60px) -40px, oklch(0.4 calc(0.05 * var(--m-c)) var(--m-hw) / 0.16) 0%, oklch(0.4 calc(0.05 * var(--m-c)) var(--m-hw) / 0) 70%), linear-gradient(160deg, oklch(0.21 calc(0.025 * var(--m-c)) var(--m-h)) 0%, oklch(0.19 calc(0.018 * var(--m-c)) var(--m-hb)) 55%, oklch(0.22 calc(0.028 * var(--m-c)) var(--m-h3)) 100%); --m-page-bg-duz: linear-gradient(160deg, oklch(0.21 calc(0.025 * var(--m-c)) var(--m-h)) 0%, oklch(0.19 calc(0.018 * var(--m-c)) var(--m-hb)) 55%, oklch(0.22 calc(0.028 * var(--m-c)) var(--m-h3)) 100%); /* Süs lekeleri koyuda çok daha zayıf. Açık zeminde ekranın kenarında hafif bir renk olan aynı leke, koyu zeminde karanlığın içinde parlayan bir nokta hâline geliyor ve gözü içeriğin değil köşenin çekiyor. */ --m-blob-a: oklch(0.45 calc(0.08 * var(--m-c)) var(--m-h) / 0.13); --m-blob-b: oklch(0.45 calc(0.08 * var(--m-c)) var(--m-hw) / 0.1); --m-blob-c: oklch(0.45 calc(0.08 * var(--m-c)) var(--m-h3) / 0.11); --m-nokta: oklch(0.38 0.02 var(--m-h2)); --m-warm-wash: oklch(0.32 calc(0.05 * var(--m-c)) var(--m-hw)); --m-danger: oklch(0.68 0.17 25); --m-danger-deep: oklch(0.58 0.18 25); --m-danger-soft: oklch(0.33 0.07 25); --m-danger-ink: oklch(0.84 0.12 25); --m-uyari: oklch(0.76 0.15 60); --m-uyari-deep: oklch(0.66 0.15 55); --m-uyari-soft: oklch(0.34 0.07 55); --m-uyari-ink: oklch(0.86 0.11 65); --m-ok: oklch(0.72 0.13 150); --m-ok-bright: oklch(0.78 0.14 150); --m-ok-soft: oklch(0.33 0.06 150); --m-ok-ink: oklch(0.85 0.1 150); } /* ===================================================================== * 4. RESİMLER VE GÖMÜLÜ SVG * * Koyu zeminde beyaz zeminli PNG'ler (Taiga'nın boş ekran çizimleri, proje * logoları) parlayan lekeler gibi duruyor. Tam çözüm her varlığın koyu * sürümünü çizmek; buradaki tek satır, o iş yapılana kadar göz yormasını * engelleyen ucuz bir yumuşatma. * ================================================================== */ :root[data-zemin="koyu"] img:not([src$=".svg"]):not(.tema-dokunma) { filter: brightness(0.88) contrast(1.04); } /* Ekran okuyucu ve baskı: koyu tema kâğıda basılmaz. */ @media print { [data-zemin="koyu"] { color-scheme: light; } }