/* ========================================================================== AceX tasarım jetonları — uygulamanın TEK görsel merkezi ============================================================================= Kural: bileşenler sabit değer yazmaz, buradaki bir jetonu kullanır. Yeni bir renk, boyut, yarıçap ya da gölge gerekiyorsa önce buraya eklenir. Jetonların tamamı MudBlazor'un yayınladığı --mud-palette-* değişkenlerinden türer. Dolayısıyla gerçek kaynak C# tarafındaki AceXTheme'dir: CustomColors.cs -> AceXTheme.cs -> --mud-palette-* -> --acex-* Bunun iki sonucu var: 1. Renk değiştirmek için tek yer var (CustomColors.cs). 2. Açık/koyu tema kendiliğinden çalışır — MudBlazor --mud-palette-*'ı temaya göre değiştirdiği için buradaki her jeton onunla birlikte döner. Bileşen tarafında ayrı bir koyu tema kuralı yazmak gerekmez. Bu dosyada :root dışında SELEKTÖR YOKTUR ve olmamalıdır. Bileşen kuralı içermeyen bir merkez, cascade savaşına hiç giremez. Yükleme sırası: MudBlazor.min.css'ten SONRA, uygulama CSS'lerinden ÖNCE. ============================================================================= */ :root { /* ------------------------------------------------------------------------- 1. RENK — roller, ham değerler değil ---------------------------------------------------------------------- */ /* Marka. Vurgu, seçili durum, bağlantı ve etkin kenarlık bunu kullanır. */ --acex-brand: var(--mud-palette-primary, #3eaf7c); --acex-brand-soft: color-mix(in srgb, var(--acex-brand) 14%, transparent); --acex-brand-strong: color-mix(in srgb, var(--acex-brand) 78%, #000); --acex-accent: var(--mud-palette-secondary, #2196f3); /* Durum renkleri markadan AYRI. Marka yeşiliyle "başarılı" aynı renk olduğunda durum bilgisi okunmaz hale geliyor. */ --acex-success: var(--mud-palette-success, #16a34a); --acex-info: var(--mud-palette-info, #2563eb); --acex-warning: var(--mud-palette-warning, #d97706); --acex-error: var(--mud-palette-error, #dc2626); --acex-success-soft: color-mix(in srgb, var(--acex-success) 12%, transparent); --acex-warning-soft: color-mix(in srgb, var(--acex-warning) 14%, transparent); --acex-error-soft: color-mix(in srgb, var(--acex-error) 12%, transparent); --acex-info-soft: color-mix(in srgb, var(--acex-info) 12%, transparent); /* Yüzeyler. canvas = sayfa zemini, surface = kart/panel, sunken = girinti. MudBlazor'un "grey" yazımı sürüme göre değişebildiği için ikisi de var. */ --acex-canvas: var(--mud-palette-background, #f8fafc); --acex-surface: var(--mud-palette-surface, #ffffff); --acex-sunken: var(--mud-palette-background-grey, var(--mud-palette-background-gray, #f1f5f9)); /* Kartın üstüne binen ikinci kademe yüzey (açılır kutu, tooltip, popover). */ --acex-raised: color-mix(in srgb, var(--acex-surface) 94%, var(--acex-text)); /* Metin üç kademe. Eskiden birincil ve ikincil metin ikisi de saf siyahtı; her bileşen kendi grisini kendi uyduruyordu. */ --acex-text: var(--mud-palette-text-primary, #0f172a); --acex-text-muted: var(--mud-palette-text-secondary, #475569); --acex-text-faint: var(--mud-palette-text-disabled, #94a3b8); /* Renkli zemin (marka/durum dolgusu) üstündeki metin. */ --acex-text-on-brand: #ffffff; /* Çizgiler. soft ve strong türetilmiş: üç ayrı çizgi rengi elle tanımlanınca kaçınılmaz olarak birbirinden ayrışıyordu. */ --acex-line: var(--mud-palette-lines-default, rgba(127, 127, 127, .22)); --acex-line-soft: color-mix(in srgb, var(--acex-line) 55%, transparent); --acex-line-strong: color-mix(in srgb, var(--acex-line) 100%, var(--acex-text) 18%); /* Etkileşim katmanları. Hover ve seçili durum için ayrı renk tanımlamak yerine metin/marka renginden türeyen saydam katmanlar. */ --acex-hover: color-mix(in srgb, var(--acex-text) 5%, transparent); --acex-active: color-mix(in srgb, var(--acex-text) 9%, transparent); --acex-selected: color-mix(in srgb, var(--acex-brand) 11%, transparent); /* Odak halkası — klavye erişilebilirliği için tek tanım. */ --acex-focus-ring: 0 0 0 3px color-mix(in srgb, var(--acex-brand) 38%, transparent); /* Modül kimlik renkleri. Uygulama düzeyinde bir alan kavramı: bir sayaç elektrikse aynı mor her ekranda aynı anlama gelmeli. Metin rengine doğru karıştırıldıkları için açık temada koyulaşır, koyu temada açılır — yani her iki temada da okunur kalırlar. */ --acex-mod-electricity: color-mix(in srgb, #7c5cff 84%, var(--acex-text)); --acex-mod-gas: color-mix(in srgb, #f0a020 84%, var(--acex-text)); --acex-mod-water: color-mix(in srgb, #2196f3 84%, var(--acex-text)); --acex-mod-abys: color-mix(in srgb, #5c7cfa 84%, var(--acex-text)); --acex-mod-setups: var(--acex-text-faint); --acex-mod-bi: color-mix(in srgb, #0d6efd 84%, var(--acex-text)); /* Scada alarm şiddet renkleri. Operatörler bu dört rengi konvansiyon olarak biliyor — "yeşil normal, sarı uyarı, mor bakım, kırmızı kritik". Değerler bilinçli olarak DEĞİŞTİRİLMEDİ; yalnızca tek yere alındı ki bir daha app.css içinde gömülü kalmasınlar. Durum renklerinden (--acex-success vs.) ayrı tutuluyorlar: bunlar arayüz durumu değil, saha ekipmanı şiddeti. */ --acex-alarm-1: #4caf50; --acex-alarm-2: #ffc107; --acex-alarm-3: #ab47bc; --acex-alarm-4: #f44336; /* Amber zeminde okunabilir tek koyu ton; kontrast için sabit. */ --acex-alarm-2-text: #211a00; /* ------------------------------------------------------------------------- 2. TİPOGRAFİ — 14px taban, sabit ölçek Denetimde 73 ayrı font-size sayılmıştı, 46'sı 10-15px arasında sıkışıktı. Sebebi ölçeğin olmamasıydı. Ölçek dışına çıkmak gerekiyorsa buraya yeni bir basamak eklenir, bileşene sayı yazılmaz. ---------------------------------------------------------------------- */ --acex-font: var(--mud-typography-body1-family, "Montserrat", "Helvetica", Arial, sans-serif); /* Alt basamak: pano kartlarında rozet ve birim satırı 11px'in altına iniyor. Eskiden 9px · 10px · 10.5px olarak üç ayrı değer yazılıyordu. */ --acex-text-3xs: .625rem; /* 10px — rozet, birim, mikro etiket */ --acex-text-2xs: .6875rem; /* 11px — eyebrow, tablo başlığı */ --acex-text-xs: .75rem; /* 12px — alt not, tablo başlığı */ --acex-text-sm: .8125rem; /* 13px — ikincil gövde, kart başlığı */ --acex-text-md: .875rem; /* 14px — TABAN gövde */ --acex-text-lg: 1rem; /* 16px — bölüm başlığı */ --acex-text-xl: 1.25rem; /* 20px */ --acex-text-2xl: 1.5rem; /* 24px */ --acex-text-3xl: 1.875rem; /* 30px — büyük rakam */ --acex-text-4xl: 2.25rem; /* 36px — pano metriği */ --acex-weight-regular: 400; --acex-weight-medium: 500; --acex-weight-semibold: 600; --acex-weight-bold: 700; --acex-leading-tight: 1.2; --acex-leading-snug: 1.35; --acex-leading-base: 1.5; --acex-leading-loose: 1.65; /* Büyük rakamlar için negatif, küçük büyük-harf etiketler için pozitif. */ --acex-tracking-tight: -.02em; --acex-tracking-base: 0; --acex-tracking-wide: .08em; /* ------------------------------------------------------------------------- 3. BOŞLUK — 4px tabanlı ---------------------------------------------------------------------- */ --acex-space-1: 4px; --acex-space-2: 8px; --acex-space-3: 12px; --acex-space-4: 16px; --acex-space-5: 20px; --acex-space-6: 24px; --acex-space-8: 32px; --acex-space-10: 40px; --acex-space-12: 48px; /* Kart iç boşluğu ve ızgara aralığı: sayfalar arası ritmi bu ikisi tutuyor. */ --acex-pad-card: var(--acex-space-4); --acex-gap: var(--acex-space-4); --acex-gap-tight: var(--acex-space-2); /* ------------------------------------------------------------------------- 4. YARIÇAP — taban MudBlazor'dan, büyük yüzeyler ölçekten ---------------------------------------------------------------------- */ --acex-radius-xs: 4px; --acex-radius-sm: var(--mud-default-borderradius, 6px); --acex-radius-md: 8px; --acex-radius-lg: 12px; --acex-radius-xl: 16px; --acex-radius-pill: 999px; /* ------------------------------------------------------------------------- 5. GÖLGE — tek formül, dört kademe Gölge rengi bilinçli olarak sabit koyu: koyu temada koyu gölge zemine karışıp kaybolur, ki doğrusu da bu — koyu arayüzler gölge değil çizgi kullanır. Metin renginden türetilse koyu temada beyaz parlama olurdu. ---------------------------------------------------------------------- */ --acex-shadow-rgb: 15, 23, 42; --acex-shadow-1: 0 1px 2px rgba(var(--acex-shadow-rgb), .06); --acex-shadow-2: 0 2px 6px -1px rgba(var(--acex-shadow-rgb), .09); --acex-shadow-3: 0 8px 20px -8px rgba(var(--acex-shadow-rgb), .16); --acex-shadow-4: 0 20px 44px -18px rgba(var(--acex-shadow-rgb), .22); /* Marka renginde kalkış gölgesi (hover). */ --acex-shadow-brand: 0 10px 28px -14px color-mix(in srgb, var(--acex-brand) 45%, transparent); /* ------------------------------------------------------------------------- 6. Z-INDEX — MudBlazor ölçeğiyle uyumlu MudBlazor: drawer 1300, popover 1400, dialog 1500, snackbar 1600. Kendi katmanlarımız drawer ile popover arasına giriyor. ---------------------------------------------------------------------- */ --acex-z-base: 1; --acex-z-sticky: 20; --acex-z-overlay: 1305; --acex-z-panel: 1310; --acex-z-toast: 1650; /* ------------------------------------------------------------------------- 7. HAREKET ---------------------------------------------------------------------- */ --acex-dur-fast: .12s; --acex-dur-base: .18s; --acex-dur-slow: .32s; --acex-ease: cubic-bezier(.4, 0, .2, 1); --acex-ease-out: cubic-bezier(0, 0, .2, 1); /* ------------------------------------------------------------------------- 8. KIRILIMLAR — bilgi amaçlı CSS medya sorgusu custom property kabul etmez, bu yüzden bunlar doğrudan kullanılamaz. Ama kanonik üç kırılım bunlar ve bileşenler BUNLARIN DIŞINA çıkmamalı. Denetimde 7 ayrı kırılım sayılmıştı (460 · 520 · 720 · 960 · 1024 · 1280 · 1440). --acex-bp-sm: 600px telefon / tek kolon --acex-bp-md: 960px tablet / iki kolon --acex-bp-lg: 1280px masaüstü dar ---------------------------------------------------------------------- */ --acex-bp-sm: 600px; --acex-bp-md: 960px; --acex-bp-lg: 1280px; /* Uygulama kabuğu ölçüleri. */ --acex-appbar-height: var(--mud-appbar-height, 50px); }