Academy Theme Engine (Global Tema)

Builder’da Global Tema sekmesi, storefront için ortak bir “theme globals” katmanı sağlar. Bu ayarlar, blokların tek tek settings alanından bağımsız olarak, tüm sayfada tutarlı renk/tipografi/buton davranışı üretmek için CSS değişkenlerine çevrilir.

---

Nerede yönetilir?

• UI: /:lang/instructor/academy/builder → app/routes/instructor.academy.builder.tsx
• Persist: draft/publish action’ında themeGlobals ile themeConfig.siteTheme alanına yazılır.

---

Site Theme (storefront) alanları

siteTheme “blokların üstünde” çalışan bir global ayar setidir.

Renk sistemi

• sitePrimary: ana aksiyon rengi (--primary)
• siteSecondary: ikincil vurgu rengi (--secondary)
• siteText: temel metin rengi (--text-color)
• siteAccent: sayfa arka planı/zemin rengi (--background)

Tipografi

• siteHeadingFont: başlık fontu (--font-heading)
• siteBodyFont: gövde fontu (--font-body)
• siteBaseFontSize: temel font boyutu (--font-size)

Butonlar

• buttonRadius: --radius
• buttonPaddingX / buttonPaddingY: --btn-px, --btn-py
• buttonShadow / buttonShadowHover: --btn-shadow, --btn-shadow-hover

---

CSS değişkenleri → semantic token’lar

Storefront/preview katmanında Theme Engine, hem “raw” değişkenleri hem de Polaris-flat semantic token’ları besleyecek şekilde uygulanır. Amaç:

• bg-surface*, text-on-surface*, border-outline* gibi class’ların global tema ile uyumlu görünmesi
• Blokların var(--primary) gibi değişkenleri kullanarak tek noktadan tema alması

Bu sayede örneğin bir blok kendi primaryColor alanını boş bıraksa bile global --primary üzerinden doğru rengi alır.

---

Preview davranışı (iframe benzeri)

Builder preview, gerçek tenant sayfası gibi davranacak şekilde “iframe benzeri” bir katmanda theme globals uygular:

• Global tema değişince preview anında güncellenir
• Bloklar siteTheme üzerinden gelen CSS değişkenlerini okur

---

İlgili dokümanlar

• Academy Visual Builder (Blok Tabanlı CMS)
• Tasarım Sistemi (Polaris-flat)