עיצוב

לעיצוב רכיבים יש להשתמש במחלקות עזר של className או ב-props עם טיפוסים. לאפליקציות 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>

#⁦Props⁩ עם טיפוסים

לכל מחלקת עזר יש prop. ל-props יש עדיפות על פני className.

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

#צבעים

יש להשתמש בערכי hex, בשמות של 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), ומשנות את גודלן בעת גרירת החלונית. לסידור ה-layout יש להשתמש ב-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