Global Styles — stiluri globale pe canvas (Constructor)

Acest conținut nu este încă disponibil în limba selectată.

Nu e un BlockKind. Tema trăiește pe GdsProject.meta (partajată pe toate paginile), nu pe blocuri.
Surse: projects/gds-core/src/lib/tokens.ts, blocks.ts (GdsProject.meta), projects/constructor/src/app/state/doc-store.ts, panoul Stiluri / app-global-styles-panel.

Ce controlează

Pe artboard-ul Constructor (și în Preview / export), Global Styles setează:

Ce	Unde
Paleta de brand (butoane, nav activ, highlight)	`meta.accent` → clase `gds-accent-*` + `--gds-accent` / `--gds-primary` / `--gds-secondary`
Familie tipografică	`meta.font` → clase `gds-font-*` + `--gds-font` / `--gds-mono`
Culoare bordură globală (opțional)	`meta.borderColor` → `--gds-border` / `--gds-border-strong`
Limbă UI + conținut faker	`meta.lang` (`ro` \| `en`)
Dimensiune artboard design (export %)	`meta.boardWidthPx` / `meta.boardHeightPx`

Nu sunt câmpuri pe meta (doar tokeni CSS fizați, afișați în panou): status (--gds-positive…), ink (--gds-ink-*), serii grafice (--gds-series-0…6), scala tipografică (--gds-fs-*). Acestea se consumă prin CSS vars — nu se inventează valori per bloc.

Câmpuri pe `project.meta`

Tipuri din @gstack/gds-core (GdsProject.meta / GdsMockDoc.meta).

Câmp	Tip	Allowed / default	Note
`title`	`string`	—	Titlu proiect / document
`product`	`string`	—	Nume produs (poate veni din sidenav)
`accent`	`AccentName`	`indigo` \| `emerald` \| `amber` \| `rose` \| `blue` \| `teal` · default `indigo` (`DEFAULT_ACCENT`)	Obligatoriu
`font`	`FontName`	`ibm-plex` \| `inter` \| `source-sans` \| `manrope` \| `nunito` · default `ibm-plex` (`DEFAULT_FONT`)	Omis pe legacy → tratează ca `ibm-plex`
`borderColor`	`string?`	CSS color sanitarizat (hex / rgb / named / `var()`); max ~80 caractere	Omis → `GDS_BORDER` (`#eef1f5`). Gol / invalid → șters
`colorScheme`	`light` / `dark` (opțional)	default light (omis)	`dark` → clasa `gds-theme-dark` pe `.gds-root` (tokeni CSS dark; mobile `.gds-m-*` adaptate)
`lang`	`Lang`	`'ro'` \| `'en'`	Etichete UI, faker, export `<html lang>`
`seed`	`number`	—	Seed faker / regenerare conținut
`gridCell`	`number?`	curent `8` (`GDS_GRID_CELL`)	Snap pe grilă; omis → legacy 40 la import
`boardWidthPx`	`number?`	default `1920` (`GDS_BOARD_DEFAULT_WIDTH_PX`)	Lățime artboard design (nu frame-ul device UI)
`boardHeightPx`	`number?`	default `1080` (`GDS_BOARD_DEFAULT_HEIGHT_PX`)	Înălțime floor artboard
`deletedPageIds`	`string[]?`	—	Doar merge bibliotecă; nu e stil

Accente (etichete + rol)

`AccentName`	Rol scurt
`indigo`	Default brand
`emerald` / `amber` / `rose`	Variante brand
`blue`	Stil GLog — shell deschis (`lightShell`), accent `#1d4ed8`
`teal`	Aliniat panoului ink (integritate); primary ≈ `--gds-ink-to`

Fonturi

`FontName`	Label UI
`ibm-plex`	IBM Plex Sans (default)
`inter`	Inter
`source-sans`	Source Sans 3
`manrope`	Manrope
`nunito`	Nunito Sans

Mapare CSS

Canvas-ul aplică pe root:

<div
  class="gds-root gds-accent-{{meta.accent}} gds-font-{{meta.font || 'ibm-plex'}} {{meta.colorScheme === 'dark' ? 'gds-theme-dark' : ''}}"
  …
></div>

Clasele din GDS_ACCENTS_CSS / GDS_FONTS_CSS (css.ts) setează variabilele via accentVars() / fontVars().

Tema întunecată (meta.colorScheme: 'dark') adaugă clasa gds-theme-dark pe .gds-root. Override-urile din GDS_DARK_THEME_CSS sunt concatenate la final în GDS_CSS (specificitate .gds-root.gds-theme-dark) ca să câștige față de .gds-accent-* / pastel softs.

Din `meta.accent` (`accentVars`)

CSS var	Sens
`--gds-primary` / `--gds-accent`	Brand principal (butoane, active)
`--gds-accent-strong` / `--gds-accent-soft`	Hover / tint
`--gds-on-accent`	Text pe accent
`--gds-secondary` / `--gds-secondary-strong`	Shell sidenav / chrome
`--gds-surface`	Card / surface
`--gds-text-normal` / `--gds-text-white`	Text pe shell
`--gds-border` / `--gds-border-strong`	Default bordură (suprascrise de `borderColor`)
`--gds-positive` / `--gds-neutral` / `--gds-warning` / `--gds-negative` / `--gds-critical*`	Status (comun pe toate accentele)
`--gds-ink` / `--gds-ink-from` / `--gds-ink-to` / `--gds-ink-muted` / `--gds-ink-label` / …	Panou dark integritate (independent de accent)
`--gds-series-0` … `--gds-series-6` (+ `-soft`)	Paletă grafice colorate

La blue, --gds-bg poate deveni #eef1f5 (shell luminos).

Din `meta.font` (`fontVars`)

CSS var	Sens
`--gds-font`	Stack sans
`--gds-mono`	Stack mono (de obicei IBM Plex Mono)

Scala tipografică (--gds-fs-title, --gds-fw-heading, …) e comună; se schimbă doar familia, nu scale-ul.

Din `meta.borderColor`

Pe canvas: stil inline --gds-border / --gds-border-strong.
În export: borderThemeVars(borderColor) (după sanitizeBorderColor).

Regulă absolută (AGENTS.md): în CSS / componente folosește doar aceste vars — fără hex hardcodat pe brand. Hex-urile din tokens.ts sunt sursa internă a paletelor; consumatorii citesc vars.

UI Constructor

Editor — tab „Stiluri” / „Styles” în paleta stângă (PaletteUiService tab styles).
Click pe fundalul gol al board-ului → DocStore.deselectToStyles() (deselectează blocul + deschide Stiluri).
Pagina Proiecte — sidebar app-global-styles-panel cu scope="library": accent / font se aplică pe toate proiectele din bibliotecă.

Panoul arată și tokenii read-only (status, ink, series, type scale). Bordura globală e afișată; mutațiile trec prin DocStore (setGlobalBorderColor / setBorderColor).

Nu confunda cu BlockChrome.borderColor din inspector (per-bloc / sidenav). Aia e chrome local pe frame, nu Global Styles.

API DocStore (doar metode reale)

// Proiect activ
setAccent(accent: AccentName): void
setFont(font: FontName): void
setLang(lang: Lang): void  // 'en' | 'ro' — UI labels + faker
setBorderColor(borderColor: string | undefined): void  // undefined / '' → șterge override
setBoardSize(widthPx: number, heightPx: number): void   // > 0; rotunjit

// Bibliotecă (toate proiectele) — folosit de tab Stiluri / projects page
setGlobalAccent(accent: AccentName): void
setGlobalFont(font: FontName): void
setGlobalBorderColor(borderColor: string | undefined): void

Intern, setGlobal* apelează ProjectLibraryService.applyThemeToAll({ accent | font | borderColor }).

Chat AI: set_global_styles acoperă accent/font/border/board; limba e acțiunea separată set_lang → DocStore.setLang. Normalizarea library la create poate forța lang: 'en' pe proiecte noi — verifică snapshot-ul după create.

Instrucțiuni pentru agenți (Kimi / Cursor)

Citește project.meta din snapshot (vezi tools/kimi-client.mjs → buildKimiMessages).
Pentru temă globală, propune doar patch pe câmpurile din tabelul de mai sus / apelurile DocStore de mai sus.
Accent: doar cele 6 AccentName. Font: doar cele 5 FontName.
Culori brand / status / ink / series: spune „folosește --gds-…”, nu inventa hex pe blocuri.
Panouri dark (integritate CTA): panel: 'ink' pe CtaData + tokens --gds-ink-* — nu hardcoda gradient; accentul teal e opțiunea brand aliniată ink.
Shell sidenav: culoarea vine din --gds-secondary (setat de accent), nu din stil pe sidenav.
Dimensiune board: setBoardSize / boardWidthPx+boardHeightPx — nu confunda cu frame-ul phone/tablet din UI (UI-only; nu rescrie meta).
Astăzi agentul din chat analizează și explică schimbări exacte; nu pretinde că a mutat proiectul până există apply. Când aplică: folosește metodele DocStore de mai sus.

Exemple meta (înainte → după)

Accent emerald + font Inter:

// înainte
{ "accent": "indigo", "font": "ibm-plex", "lang": "en" }

// după
{ "accent": "emerald", "font": "inter", "lang": "en" }

Echivalent DocStore (bibliotecă, ca în UI Stiluri):

store.setGlobalAccent('emerald');
store.setGlobalFont('inter');

Bordură personalizată, apoi reset la token:

// setează
{ "borderColor": "#cbd5e1" }

// șterge override (înapoi la GDS_BORDER)
// omit field SAU:

store.setGlobalBorderColor(undefined);

Board Full HD → 1440×900:

{ "boardWidthPx": 1440, "boardHeightPx": 900 }

store.setBoardSize(1440, 900);

Greșit — nu face așa:

// ❌ accent inventat
{ "accent": "purple" }

// ❌ hex pe brand în loc de accent name
{ "primaryColor": "#7c3aed" }

// ❌ stil pe fiecare KPI în loc de meta.accent
{ "blocks": [{ "kind": "kpi-row", "data": { "cardColor": "#059669" } }] }

Ce NU trebuie făcut

Nu inventa API (setTheme, primaryColor, accent names în afara listei).
Nu hardcoda hex pentru accent / secondary / ink / status în componente sau pe data de bloc când există token global.
Nu stiliza individual blocuri pentru o schimbare de brand — schimbă meta.accent / meta.font.
Nu confunda BlockChrome (inspector) cu Global Styles.
Nu rescrie boardWidthPx doar pentru preview pe telefon — frame-ul device e separat.
Nu pretinde că tokenii status / series / type scale sunt editabili pe meta.

Surse de adevăr

Ce	Unde
`AccentName`, `FontName`, `accentVars`, `GDS_*`	`projects/gds-core/src/lib/tokens.ts`
`GdsProject.meta`	`projects/gds-core/src/lib/blocks.ts`
CSS clase accent/font	`projects/gds-core/src/lib/css.ts`
Mutatori	`projects/constructor/src/app/state/doc-store.ts`
UI panou	`global-styles-panel.component.ts`, tab Stiluri în `palette.component.ts`
Catalog componente	`README.md`