# Teme

Fă conținutul blogului să arate nativ pe site-ul tău. Întregul sistem de
componente MD2 citește **cincisprezece token-uri de culoare** (plus o rază
de colț) — le setezi o singură dată per blog, iar fiecare callout, grafic,
ghid pas cu pas și badge le urmează.

## Editorul de teme

Pe pagina blogului, cardul **Temă MD2** are selectoare grupate:

| Grup | Token-uri |
|---|---|
| Accente | informativ · avertisment · pericol · succes · notă |
| Nuanțe | un fundal discret per accent (stă în spatele textului) |
| Suprafețe | fundal · suprafață discretă · contur |
| Text | text · estompat |
| Rotunjire colțuri | rotunjirea colțurilor pentru panouri |

Un exemplu live se re-randează pe măsură ce alegi culori, deci vezi
callout-uri, nuanțe și contururi pe paleta ta înainte de a salva.
**Salvează tema** o aplică pe paginile tale live în mai puțin de un minut;
**Elimină tema** revine la aspectul neutru implicit. Dacă site-ul tău are un
comutator light/dark, activează **Variantă dark** ca să menții o paletă per
schemă — secțiunea „Site-uri cu comutator light/dark" de mai jos explică cum
e servită perechea.

:::callout{severity=info title="Setezi un token din propriul CSS? Două nume nu se potrivesc cu selectorul"}
Majoritatea token-urilor se mapează direct la variabila CSS: `info` →
`--md2-info`, `warning` → `--md2-warning`, `success` → `--md2-success`,
`bg` → `--md2-bg`, `bg_soft` → `--md2-bg-soft`, `border` → `--md2-border`,
`text` → `--md2-text`, `muted` → `--md2-muted`. Două accente nu: **Pericol**
din selector e `--md2-blocking`, iar **Notă** e `--md2-nit`. Fiecare accent
are și o variantă de nuanță `-bg` (`--md2-blocking-bg`, `--md2-nit-bg`, …).
:::

## Propune pornind de la site-ul tău

Sari peste munca manuală: **Propune după site** scanează designul real al
site-ului tău — pagina principală, foile ei de stil, culoarea de temă
declarată și stivele de fonturi — și pune AI-ul să mapeze paleta ta
existentă pe cele cincisprezece token-uri, cu o motivație de o linie pentru
alegerile făcute.

::::steps

:::step[Scanare]
baas preia pagina ta principală și până la trei dintre foile ei de stil și
inventariază culorile pe care chiar le folosești, ordonate după frecvență.
:::

:::step[Propunere]
Modelul păstrează schema ta luminoasă sau întunecată, refolosește culorile
tale de accent unde se potrivesc și construiește nuanțe lizibile —
avertismentul rămâne cald, pericolul se citește ca pericol, textul rămâne
cu contrast ridicat.
:::

:::step[Revizuire și aplicare]
Propunerea apare cu mostre de culoare. **Încarcă în editor** completează
selectoarele — ajustezi orice, apoi salvezi. Nimic nu se schimbă pe
site-ul tău până nu salvezi.
:::

::::

## Cum se livrează

Paleta ajunge ca un bloc CSS mic și scoped, împreună cu conținutul tău —
inline pe paginile randate server-side, injectat o singură dată de SDK.
Culorile sunt valori hex validate, deci blocul e inert dincolo de setarea
token-urilor tale.

:::callout{severity=info title="Suprascrii token-urile singur? Două reguli"}
Token-urile sunt proprietăți CSS custom simple, deci poți redirecționa
oricare dintre ele din propria foaie de stil. Două lucruri decid dacă
regula ta chiar are efect.

**Depășește (0,1,0).** Fiecare bloc pe care îl injectăm își declară
token-urile la specificitatea (0,1,0) pe `.baas-wrap` și `[data-baas-blog]`
— aceeași greutate în orice schemă de culoare. Dar noi injectăm la runtime,
după CSS-ul tău de build, deci egalitatea ne revine nouă: regula ta are
nevoie de (0,2,0) sau mai mult. Un strămoș plus hook-ul e suficient —
`.my-blog .baas-wrap`.

**Numește wrapper-ul, nu doar containerul tău.** O proprietate custom
declarată *pe* un element bate una moștenită de la un strămoș, oricât de
specifică ar fi regula strămoșului — iar noi le declarăm pe `.baas-wrap`.
Setarea `--md2-*` pe propriul container, care e părintele lui, nu face
absolut nimic.
:::

## Site-uri cu comutator light/dark

Un blog poate stoca o **pereche light/dark** în loc de o singură paletă.
Activează **Variantă dark** în editorul de teme: selectoarele se împart în
tab-uri Light și Dark, ambele palete se previzualizează una lângă alta, iar
**Inversează light ↔ dark** schimbă cele două seturi între ele (util când
paleta ta unică a fost scanată din tema întunecată). Cu opțiunea dezactivată,
paleta unică se aplică tuturor vizitatorilor, exact ca înainte.

Ce set primește un cititor se decide în această ordine, prima potrivire
câștigând:

1. **`data-baas-theme="light"` sau `"dark"` pe containerul blogului** — tu
   ne spui direct ce e blogul acesta, indiferent ce face pagina din jur.
2. **Propriul tău `data-theme="light"` / `"dark"`**, pe `<html>`, pe un
   wrapper sau pe container. Acesta e modul convențional în care site-urile
   își fac temele, deci un site cu un comutator obișnuit re-temează blogul
   gratuit, fără niciun CSS de-al tău.
3. **Preferința de sistem a cititorului** (`prefers-color-scheme`).
4. Dacă nimic din toate acestea, setul light.

**Propune de pe website** înțelege și comutatoarele: când scanarea găsește
media query-uri `prefers-color-scheme` sau reguli `data-theme` în CSS-ul
tău, inventariază separat culorile fiecărei scheme și propune ambele seturi
dintr-o singură trecere. Verifică ambele tab-uri înainte de a salva, ca la
orice propunere.

:::callout{severity=info title="Nu scriem niciodată data-theme pe pagina ta"}
`data-theme` e hook-ul convențional de teme din web, iar site-urile care îl
folosesc declară de obicei o paletă întreagă cu o regulă simplă
`[data-theme="light"] { … }` — un selector care se potrivește cu *orice*
element ce poartă atributul. Așa că nu îl punem niciodată pe markup-ul pe
care îl injectăm: atributul pe care îl setăm și îl citim pe propriul nostru
wrapper e `data-baas-theme`. Regulile tale de temă nu pot captura subarborele
blogului și nu trebuie să le rescrii.
:::

:::callout{severity=warning title="Comutatoare care nu folosesc data-theme"}
Dacă site-ul tău schimbă schemele altfel — o clasă `.dark` pe `<html>`, un
atribut custom — doar preferința de sistem e vizibilă pentru CSS-ul injectat,
deci un comutator forțat poate ieși din sincron. Fă puntea din propriul CSS.
Numește wrapper-ul pe lângă container și începe cu un strămoș, ca regula să
treacă de (0,1,0):

```css
/* Exemplu: site-ul comută printr-o clasă .dark; redirecționezi token-urile */
:root.dark .my-blog[data-baas-blog],
:root.dark .my-blog .baas-wrap {
  --md2-bg: #101720;
  --md2-bg-soft: #16202b;
  --md2-border: #2b3a4a;
  --md2-text: #e8eef4;
  --md2-muted: #93a1b0;
}
```

Suprascrie oricare dintre cele 15 token-uri pe care le folosește conținutul
tău (inclusiv nuanțele de fundal `*-bg`); verifică ambele teme pe un
articol cu callout-uri și panouri.
:::

## Lasă site-ul tău să dețină paleta

Dacă site-ul tău are deja un strat de token-uri, îndreaptă-le pe ale noastre
către el o singură dată, iar blogul se re-temează odată cu site-ul pentru
totdeauna — nicio a doua paletă de întreținut și nicio scanare de refăcut
când se schimbă brandul. Pune `data-baas-theme="inherit"` pe container ca să
retragi complet paleta configurată a blogului, apoi furnizează token-urile
tu:

```html
<div data-baas-blog data-baas-theme="inherit" data-key="pk_…" …></div>
```

```css
.my-blog[data-baas-blog],
.my-blog .baas-wrap {
  --md2-text: var(--text-body);
  --md2-muted: var(--text-muted);
  --md2-border: var(--border-neutral);
  --md2-bg: var(--surface-raised);
  --md2-bg-soft: var(--surface-card);
  --color-base-100: var(--surface-raised);   /* fallback-uri citite și de MD2 */
  --color-base-200: var(--surface-card);
  --color-base-300: var(--border-neutral);
  --color-base-content: var(--text-body);
}
```

Fiindcă variabilele tale fac treaba, ambele teme sunt acoperite de un
singur bloc. Suprafețele și textul au nevoie de acest tratament; cele cinci
accente sunt tonuri medii și se citesc pe ambele fundaluri, deci de obicei e
corect să le lași pe seama paletei blogului.