Productthema

Setup en configuratie

Lees vóór elke stap Voordat u begint en Basisbeginselen van de terminal. Deze instructies gaan ervan uit dat je de volledige supastack monorepo in VS Code hebt geopend; zijn root package.json markeert de root van de repository. In pnpm-opdrachten is een werkruimtepakket een app of map met gedeelde code; in het product is een werkruimte de gegevenscontainer en de beveiligingsgrens van een team. corepack pnpm --filter ... selecteert één pakket uit de monorepo terwijl opdrachten vanuit de root worden uitgevoerd. Als u alleen een gesynchroniseerde mobiele map of desktopmap hebt geopend, bevat deze niet de webbackend, Docker-installatie of rootscripts: voer de backend uit vanaf deze monorepo of een bereikbare gehoste server en gebruik de eigen scripts van de platformmap. Een omgevingsvariabele is een benoemde instelling die is opgeslagen in een lokaal .env-bestand of op uw hostingdashboard; start de relevante app opnieuw nadat u deze hebt gewijzigd en houd servergeheimen buiten de NEXT_PUBLIC_- en EXPO_PUBLIC_-waarden.

1. Open in VS Code apps/web/app/app-theme.css voor ingelogde productschermen en apps/web/src/theme/catalog.ts om een kleurenpakket toe te voegen. Bewerk apps/web/app/theme.css niet voor productkleuren; het controleert het marketingmerk.

2. Voer vanuit de root van de repository corepack pnpm --filter @supastack/web dev uit en ga vervolgens naar http://localhost:3000/settings/appearance.

3. Wijzig een token in uw lokale vestiging en vernieuw het voorbeeld. Verwacht: de dashboardbedieningen worden bijgewerkt terwijl de startpagina het geselecteerde marketingthema behoudt.

Marketingmerk en productthema zijn aparte bestanden. Bewerk apps/web/app/app-theme.css voor dashboard-, auth-, settings-, billing-, chat- en org-chrome. Voeg kleurenpakken toe in apps/web/src/theme/catalog.ts. Breid density-, radius-, font- en layout-assen uit in apps/web/src/theme/presets.ts plus bijpassende html[data-*]-regels in app-theme.css. Kies de marketingidentiteit in apps/web/src/theme/marketing-theme.ts (MARKETING_THEME_MODE: locked | inherit | een pack-id) in plaats van apps/web/app/theme.css te bewerken — de lock van dat bestand via .marketing-theme:not(.app-theme):not([data-theme]):not([data-marketing-theme="inherit"]) houdt standaard het supastack Obsidian-homepagemerk.

Tijdens runtime slaat Instellingen → Weergave → ThemePicker kleur, dichtheid, radius, lettertype en lay-out op in browsercookie + localStorage zodat theme-boot.ts alle assen vóór de eerste weergave herstelt, en synchroniseert het de volledige weergavebundel van de ingelogde gebruiker tussen browsers via user_appearance (GET/PUT /api/account/appearance). Dezelfde pagina toont de UI-galerij van de kit zodat pakketten en presets knoppen, invoervelden, kaarten, badges en dialoogvensters direct bijwerken. Ontwerpdetails en kopieerbare voorbeelden staan in docs/design/kit-product-theme.md en docs/design/kit-ui-gallery.md.

/* Edit product chrome here — not theme.css */
.app-theme {
  --radius-card: 14px;
  background: var(--page);
  color: var(--text);
}
.app-theme .button-primary {
  background: var(--accent);
  color: var(--accent-ink);
}

/* catalog.ts — append a ThemeDefinition with every THEME_TOKEN_NAMES entry */
{
  id: "coral",
  name: "Coral",
  colorScheme: "light",
  tokens: { "--page": "#fff7f4", "--accent": "#e06b4f" /* …full token set… */ }
}

Commando's om te kopiëren

Volg de opmerkingen om te zien in welke map een opdracht wordt uitgevoerd. Als twee terminals zijn gelabeld, opent u twee terminalvensters en laat u de eerste opdracht draaien terwijl u de tweede gebruikt.

corepack pnpm --filter @supastack/web dev

# In a second terminal, after changing a theme token:
corepack pnpm test -- apps/web/src/theme/contrast.test.ts

Implementatieworkflow

Gebruik bij voorkeur var(--page|--section|--raised|--text|--muted|--border|--accent|…) in app-consumers (app-theme.css, globals.css-aliassen, WorkspaceShell-routes). Herintroduceer geen teal/pale hex-shells en hardcode geen Obsidian-hex in product-UI.

Houd bij het toevoegen van een pack contrast.test.ts groen. Werk bij het toevoegen van een preset-id zowel presets.ts als de html[data-density|data-radius|data-font|data-layout]-remaps in app-theme.css bij zodat ThemePicker en FOUC-boot aligned blijven.

Bewaar de gedeelde vier-tegel-merkgeometrie in marketing/brand-geometry.ts voor marketingoppervlakken. Headermarks blijven transparant; favicon/app-iconen behouden de afgeronde zwarte achtergrond. Pure marketingpagina's blijven Obsidian zolang MARKETING_THEME_MODE "locked" blijft (de kit-default); producten mogen een ander pack pinnen of de keuze van de bezoeker erven.

Verificatie en probleemoplossing

Als een kleurverandering van invloed is op de marketingstartpagina, controleer dan of u app-theme.css hebt bewerkt en bekijk apps/web/src/theme/marketing-theme.ts.. Als de tekst moeilijk leesbaar wordt, herstel dan de vorige waarde en voer corepack pnpm test -- apps/web/src/theme/contrast.test.ts uit vanaf de root voordat u het opnieuw probeert.

Verifieer na het bewerken van kit-thematokens of -packs dat ThemePicker op /settings/appearance de kit-UI-gallery plus /dashboard, /auth, /billing, /chat en org-shells updatet. Bevestig dat / op de Obsidian-marketinglock blijft (tenzij MARKETING_THEME_MODE anders zegt). Draai theme-unitcontracten (catalog, presets, contrast, theme-ownership, kit-ui-gallery) en application-theme Playwright waar beschikbaar. Check toetsenbordfocus, contrast, 320px en reduced motion.