Inspector’daki Stil sekmesi seçili düğüme görsel stil uygular. Stiller ham class dizisi olarak değil, düğümün _tecofStyles prop’unda yapısal token’lar olarak saklanır; editör ve TecofRender bunları aynı yoldan sınıflara ve CSS’e çevirir.

Token modeli#

JSON

{
  "base": { "p": "8", "bg": "primary-500", "radius": "2xl" },
  "sm": { "p": "4" },
  "states": {
    "hover": { "bg": "primary-600" },
    "md:hover": { "bg": "primary-700" }
  }
}

compileStyles() bu modeli sınıf dizisine çevirir; her sınıf ! (important) son ekiyle üretilir ki bileşenin kendi sınıflarını yensin:

Metin

p-8! bg-primary-500! rounded-2xl! sm:p-4! hover:bg-primary-600! md:hover:bg-primary-700!

Değer bir token’dır, Tailwind sınıfı değil: p: "6", bg: "primary-600", radius: "xl".
Serbest değerler köşeli parantezle yazılır: "[40px]", "[#ff6b00]", "[var(--theme-color-primary)]".
Model node.props._tecofStyles içinde kayıpsız gidip gelir; editör her kontrolün mevcut değerini gösterebilir.
Kontrol listesi, preset’ler ve sınıf derlemesinin tek kaynağı paketin STYLE_CONTROLS dizisidir (54 kontrol).

Kırılımlar masaüstü önceliklidir#

Katman	Uygulandığı ekran	Önek
`base`	Tüm ekranlar	—
`xl`	≤ 1280 px	`xl:`
`lg`	≤ 1024 px	`lg:`
`md`	≤ 768 px (tablet ve altı)	`md:`
`sm`	≤ 640 px (mobil)	`sm:`

Dar bir ekran birden çok sorguya uyduğu için CSS büyükten küçüğe sırayla basılır; en dar katman kazanır. Editörde üst katmanda değer yoksa daha geniş katmandan miras alınan değer soluk ipucu olarak gösterilir; değer içeren katmanlar küçük bir noktayla işaretlenir.

Durumlar: hover, focus, active. Durum anahtarı çıplaksa (hover) tüm ekranlarda, md:hover biçimindeyse yalnız o kırılımda uygulanır (base:hover geçersizdir).

Kontroller#

Grup	Kontroller (`*` serbest değer alır)
Yerleşim	`display`, `flexDir`, `justify`, `items`, `flexWrap`, `gap*`, `alignSelf`, `position`, `zIndex`, `overflow`
Boşluk	`p`, `px`, `py`, `pt`, `pb`, `pl`, `pr`, `m`, `mx`, `my`, `mt`, `mb`, `ml`, `mr`, `marginAlign`
Boyut	`w`, `h`, `maxW*`
Arka plan	`bg`, `bgGradient`, `gradientFrom`, `gradientTo*`
Tipografi	`fontFamily`, `text`, `fontSize`, `fontWeight`, `align`, `leading`, `tracking`, `textTransform`, `decoration`
Kenarlık	`radius`, `border`, `borderColor*`
Efektler	`shadow`, `opacity`, `blur`, `scale`, `rotate`, `transition`, `anim`, `animDelay`, `reveal`, `parallax`

Serbest uzunluklar [12px], [1.5rem], [50%], [80vh] biçimindedir (negatif yalnız margin’de); serbest renkler [#hex], [rgb(…)], [rgba(…)] ya da [var(--theme-color-<anahtar>)]; yazı tipi yalnız yerleşik [var(--font-<id>)]. reveal (görününce animasyon) ve parallax kontrolleri yayında TecofRender’ın küçük bir çalışma zamanıyla uygulanır; prefers-reduced-motion’a uyar.

Renk kaynakları#

Arka plan, metin ve kenarlık renkleri tek bir seçici panelinde beş kaynaktan seçilir:

Kaynak	Saklanan token	Derlenen sınıf
Hızlı seçim	`white`, `black`, `transparent`	`bg-white!`
Tema renkleri (canlı)	`[var(--theme-color-primary)]`	`bg-[var(--theme-color-primary)]!`
Marka skalası (temanın `--color-primary-*` değişkenleri)	`primary-600`	`bg-primary-600!`
Tailwind paleti (22 renk × 11 ton)	`red-500`	`bg-red-500!`
Özel renk (seçici / hex)	`[#ff6b00]`	`bg-[#ff6b00]!`

Tema renkleri --theme-color-* değişkenlerine bağlanır: tema panelinde rengi değiştirmek bu düğümü de değiştirir (Canlı tema). Palet verisi TAILWIND_PALETTE ve TAILWIND_SHADES olarak dışa aktarılır.

CSS’i kim üretir#

TecofRender, dokümanda kullanılan her stil sınıfının CSS’ini kendisi üretip sayfaya <style data-tecof-styles> olarak basar; editör kanvası da aynı üreteci kullanır. Bu yüzden:

TecofRender ile yayınlanan sayfalarda Tailwind safelist’i gerekmez,
serbest değerler (p-[10px]!, bg-[#ff0000]!) de ek kurulum olmadan çalışır,
editörde gördüğünüz ile yayındaki sonuç aynı kuralları paylaşır.

getSafelist() (tüm preset sınıfları), collectStyleClasses(styles) ve collectDocumentClasses(pageData) (bir dokümanda kullanılan tüm sınıflar) analiz ve özel araçlar için dışa aktarılmaya devam eder; örneğin bir sayfanın hangi stil sınıflarını kullandığını raporlamak için:

TypeScript

import { collectDocumentClasses } from "@tecof/theme-editor";

const used = collectDocumentClasses(page.publishedData); // string[]

Tema marka paleti#

Stil editöründeki marka skalası token’ları (primary-50 … primary-950) temanın renk değişkenine bağlanır: TecofRender, bg-primary-600! için background-color: var(--color-primary-600, var(--tecof-brand-600)) üretir. --tecof-brand-* yalnız editörün CSS’inde tanımlıdır; yayın sayfasında rengin görünmesi için temanın --color-primary-* değişkenlerini tanımlaması gerekir. Tailwind v4’te bunu @theme bloğu yapar (değişkenleri CSS custom property olarak yayınlar). Tailwind paleti token’ları (red-500 gibi) ise var(--color-red-500, <varsayılan hex>) olarak üretildiği için tema tanımlamasa da çalışır.

app/globals.css

@import "tailwindcss";

@theme {
  --color-primary-50: #faffe4;
  --color-primary-100: #f2ffc5;
  --color-primary-200: #e3ff92;
  --color-primary-300: #ceff53;
  --color-primary-400: #b6fb20;
  --color-primary-500: #9ae600;
  --color-primary-600: #74b500;
  --color-primary-700: #588902;
  --color-primary-800: #476c08;
  --color-primary-900: #3c5b0c;
  --color-primary-950: #1d3300;
}

Sayfalar arası stil#

Bir bileşenin stilini aynı temadaki diğer sayfalarda eşleşen bileşenlere taşıyabilirsiniz. Yalnız _tecofStyles taşınır; içerik değişmez.

Mod	Nerede	Ne yapar
Tek seferlik	Stil sekmesi → “Diğer sayfalara uygula…”, `⌘K`, sağ tık menüsü	Seçilen sayfalardaki eşleşen bileşenlere stili bir kez yazar
Sürekli senkron	Stil sekmesi → “Bu bileşeni stil kaynağı yap”	Düğüme `_tecofStyleSync` yazar; sayfa her kaydedildiğinde backend yayılımı kendisi yapar

Eşleşme kuralları (editör ve backend aynı): node.type aynı olmalı; “yalnız aynı adlı” seçilirse props._layerName ya da props.name eşit olmalı; ortak bileşenler atlanır; hedefte stil kaynağı olan düğüm ezilmez, çakışma olarak raporlanır. Stil birleştirilmez, değiştirilir; yalnız taslaklar yazılır (hedef sayfaları ayrıca yayınlayın); kaynak sayfa hedeflere dahil edilmez.

Kendi arayüzünü kuran host’lar için aynı kurallar dışa açıktır:

TypeScript

import { STYLE_SYNC_PROP, buildStyleMatch, buildStyleSyncFlag, isStyleSourceNode, mergeStyleSyncPages } from "@tecof/theme-editor";

const preview = await client.previewApplyStyles({ sourcePageId, sourceNodeId, styles, match: { type: "HeroSection" } });
await client.applyStylesToPages({ sourcePageId, sourceNodeId, styles, match: { type: "HeroSection" }, targetPageIds: ["…"], preview: false });

Uç: POST /api/store/editor/apply-styles (JWT + ekip/admin yetkisi).