スタイリング

className ユーティリティーまたは型付きpropsでコンポーネントのスタイルを設定します。Text.jsのアプリにはスタイルシートがありません。

#ユーティリティー

className はTailwind形式のユーティリティーを受け取ります。1単位は1セルです。

<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

すべてのユーティリティーに対応するpropがあります。propsは className より優先されます。

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

#色

16進数、Tailwindの色名、または fg、muted、surface、accent、success、danger などのテーマトークンを使います。トークンは現在のテーマに従います。

#テーマ

geistDark、geistLight、opencodeDark、tokyoNight、amberCrt の5つのプリセットが組み込まれています。

<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