Estilização

Estilize componentes com utilitários de className ou props tipadas. Apps Text.js não têm folhas de estilo.

#Utilitários

className aceita utilitários no estilo Tailwind. Uma unidade equivale a uma célula.

<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>

#Props tipadas

Cada utilitário tem uma prop. As props têm prioridade sobre className.

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

#Cores

Use valores hexadecimais, nomes do Tailwind ou tokens do tema como fg, muted, surface, accent, success e danger. Os tokens seguem o tema ativo.

#Temas

Cinco predefinições vêm incluídas: geistDark, geistLight, opencodeDark, tokyoNight e 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");

#Viewports responsivos

Por padrão, os apps preenchem o console acoplado do DevTools (viewport.responsive) e se redimensionam conforme você arrasta o painel. Organize o layout com flex e consulte o tamanho quando precisar:

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

A página só consegue detectar um painel acoplado. O DevTools desacoplado, o zoom do DevTools e a barra lateral do Console são invisíveis para ela, então o app usa viewport.width × viewport.height (padrão 120×36) ou um tamanho que você fixa:

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