Estilos

Aplica estilos a los componentes con utilidades de className o props tipadas. Las apps de Text.js no tienen hojas de estilo.

#Utilidades

className acepta utilidades al estilo de Tailwind. Una unidad equivale a una celda.

<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 utilidad tiene una prop. Las props tienen prioridad sobre className.

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

#Colores

Usa valores hexadecimales, nombres de Tailwind o tokens del tema como fg, muted, surface, accent, success y danger. Los tokens siguen el tema activo.

#Temas

Se incluyen cinco temas predefinidos: geistDark, geistLight, opencodeDark, tokyoNight y 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 adaptables

Las apps ocupan por defecto toda la consola acoplada de DevTools (viewport.responsive) y cambian de tamaño al arrastrar el panel. Organiza el layout con flex y consulta el tamaño cuando lo necesites:

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

La página solo puede detectar un panel acoplado. No puede detectar DevTools desacoplado, el zoom de DevTools ni la barra lateral de «Consola», por lo que la app usa viewport.width × viewport.height (por defecto 120×36) o un tamaño que fijes:

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