Стилизация

Задавайте стили компонентов с помощью утилит className или типизированных пропсов. В приложениях Text.js нет таблиц стилей.

#Утилиты

className принимает утилиты в стиле Tailwind. Одна единица равна одной ячейке.

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

#Типизированные пропсы

У каждой утилиты есть пропс. Пропсы имеют приоритет над className.

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

#Цвета

Используйте шестнадцатеричные коды, названия цветов Tailwind или токены темы, например fg, muted, surface, accent, success и danger. Токены соответствуют активной теме.

#Темы

Встроены пять готовых тем: geistDark, geistLight, opencodeDark, tokyoNight и 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");

#Адаптивные области просмотра

По умолчанию приложения заполняют закреплённую консоль DevTools (viewport.responsive) и меняют размер при перетаскивании панели. Стройте макет с помощью flex и считывайте размер, когда он нужен:

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

Страница видит только закреплённую панель. DevTools в отдельном окне, масштаб DevTools и боковая панель «Консоли» ей недоступны, поэтому приложение использует viewport.width × viewport.height (по умолчанию 120×36) или размер, который вы зафиксируете:

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