Styling

Gestalte Komponenten mit className-Utilities oder typisierten Props. Text.js-Apps haben keine Stylesheets.

#Utilities

className akzeptiert Utilities im Tailwind-Stil. Eine Einheit entspricht einer Zelle.

<Box className="flex-row gap-2 p-1 border rounded">  <Box className="flex-col grow border rounded px-1 bg-surface">    <Text bold>p-1 · gap-2</Text>    <Text color="muted">1 unit = 1 cell</Text>  </Box>  <Box className="flex-col grow border rounded px-1 border-accent">    <Text color="accent">border-accent</Text>  </Box></Box>

#Typisierte Props

Jede Utility hat eine Prop. Props haben Vorrang vor className.

<Box flexDirection="column" padding={1} border="rounded" borderColor="accent">  <Text bold>Typed props</Text></Box>

#Farben

Verwende Hexwerte, Tailwind-Namen oder Theme-Tokens wie fg, muted, surface, accent, success und danger. Tokens richten sich nach dem aktiven Theme.

#Themes

Fünf Voreinstellungen sind integriert: geistDark, geistLight, opencodeDark, tokyoNight und amberCrt.

<ThemeProvider theme="amberCrt">  <Box className="border rounded p-1">    <Text color="accent">amberCrt</Text>  </Box></ThemeProvider>

const brand = createTheme({ id: "brand", name: "Brand", accent: "#ffffff" }, "geistDark");

#Responsive Viewports

Apps füllen standardmäßig die angedockte DevTools-Konsole aus (viewport.responsive) und passen ihre Größe an, wenn du das Panel ziehst. Gestalte das Layout mit Flex und lies die Größe aus, wenn du sie brauchst:

const { cols } = useViewport();const sidebar = cols >= 90;

Die Seite kann nur ein angedocktes Panel erkennen. Abgedockte DevTools, der DevTools-Zoom und die Seitenleiste der Konsole sind für sie unsichtbar, daher verwendet die App viewport.width × viewport.height (Standard: 120×36) oder eine von dir festgelegte Größe:

text.resize(120, 36)   // pin a sizetext.responsive(true)  // fit the console again