design-system

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Layout and Text Primitives at Sentry

Sentry的布局与文本原语

Core Principle

核心原则

ALWAYS use core components from
@sentry/scraps
instead of creating styled components with Emotion.

Core components provide consistent styling, responsive design, and better maintainability across the codebase.

务必使用
@sentry/scraps
中的核心组件，而非通过Emotion创建自定义styled组件。

核心组件可在整个代码库中提供一致的样式、响应式设计以及更好的可维护性。

Component Implementation Reference

组件实现参考

For the complete list of supported props and their types, refer to the implementation files:

Layout Components:
```
/static/app/components/core/layout/
```
- ```
container.tsx
```
  - Base container with all layout props
- ```
flex.tsx
```
  - Flex layout primitive
- ```
grid.tsx
```
  - Grid layout primitive
- ```
stack.tsx
```
  - Stack layout primitive (Flex with column direction by default)
Typography Components:
```
/static/app/components/core/text/
```
- ```
text.tsx
```
  - Text primitive
- ```
heading.tsx
```
  - Heading primitive

如需查看支持的完整属性列表及其类型，请参考实现文件：

布局组件：
```
/static/app/components/core/layout/
```
- ```
container.tsx
```
  - 包含所有布局属性的基础容器
- ```
flex.tsx
```
  - Flex布局原语
- ```
grid.tsx
```
  - Grid布局原语
- ```
stack.tsx
```
  - Stack布局原语（默认纵向排列的Flex）

排版组件：

/static/app/components/core/text/

```
text.tsx
```
- 文本原语
```
heading.tsx
```
- 标题原语

Layout Primitives

布局原语

Important:
Flex
,
Grid
, and
Stack
all extend
Container
. This means every prop available on Container is also available on Flex, Grid, and Stack. When you use
<Flex>
, you get all Container props (position, padding, border, overflow, etc.) PLUS the flex-specific props. The same applies to Grid and Stack.

重要提示：
Flex
、
Grid
和
Stack
均继承自
Container
。这意味着Container支持的所有属性，Flex、Grid和Stack也同样支持。使用
<Flex>
时，你将获得Container的所有属性（位置、内边距、边框、溢出等），再加上Flex专属属性。Grid和Stack同理。

Container

Base layout component that supports all common layout properties. Flex, Grid, and Stack extend Container, inheriting all of its props.

Key Props (see

container.tsx

for complete list):

```
position
```
: "static" | "relative" | "absolute" | "fixed" | "sticky"

padding

paddingTop

paddingBottom

paddingLeft

paddingRight

: SpaceSize tokens

```
margin
```
,
```
marginTop
```
, etc.: SpaceSize tokens (deprecated, prefer gap)

width

height

minWidth

maxWidth

minHeight

maxHeight

border

borderTop

borderBottom

borderLeft

borderRight

: BorderVariant tokens

```
radius
```
: RadiusSize tokens
```
overflow
```
,
```
overflowX
```
,
```
overflowY
```
: "visible" | "hidden" | "scroll" | "auto"
```
background
```
: SurfaceVariant ("primary" | "secondary" | "tertiary")
```
display
```
: Various display types

Flex item props:

flex

flexGrow

flexShrink

flexBasis

alignSelf

order

Grid item props:
```
area
```
,
```
row
```
,
```
column
```

tsx

import {Container} from '@sentry/scraps/layout';

// ❌ Don't create styled components
const Component = styled('div')`
  padding: ${space(2)};
  border: 1px solid ${p => p.theme.tokens.border.primary};
`;

// ✅ Use Container primitive
<Container padding="md" border="primary">
  Content
</Container>;

支持所有通用布局属性的基础布局组件。Flex、Grid和Stack均继承自它，拥有其全部属性。

关键属性（完整列表请查看

container.tsx

）：

```
position
```
: "static" | "relative" | "absolute" | "fixed" | "sticky"

padding

、

paddingTop

、

paddingBottom

、

paddingLeft

、

paddingRight

: SpaceSize令牌

```
margin
```
、
```
marginTop
```
等: SpaceSize令牌（已废弃，优先使用gap）

width

、

height

、

minWidth

、

maxWidth

、

minHeight

、

maxHeight

border

、

borderTop

、

borderBottom

、

borderLeft

、

borderRight

: BorderVariant令牌

```
radius
```
: RadiusSize令牌
```
overflow
```
、
```
overflowX
```
、
```
overflowY
```
: "visible" | "hidden" | "scroll" | "auto"
```
background
```
: SurfaceVariant（"primary" | "secondary" | "tertiary"）
```
display
```
: 多种显示类型

Flex子项属性:

flex

、

flexGrow

、

flexShrink

、

flexBasis

、

alignSelf

、

order

Grid子项属性:
```
area
```
、
```
row
```
、
```
column
```

tsx

import {Container} from '@sentry/scraps/layout';

// ❌ 请勿创建styled组件
const Component = styled('div')`
  padding: ${space(2)};
  border: 1px solid ${p => p.theme.tokens.border.primary};
`;

// ✅ 使用Container原语
<Container padding="md" border="primary">
  内容
</Container>;

Flex

Use

<Flex>

for flex layouts. Extends

Container

, inheriting all Container props plus flex-specific props.

Flex-Specific Props (see

flex.tsx

for complete list):

```
direction
```
: "row" | "row-reverse" | "column" | "column-reverse"
```
align
```
: "start" | "end" | "center" | "baseline" | "stretch"
```
justify
```
: "start" | "end" | "center" | "between" | "around" | "evenly" | "left" | "right"
```
gap
```
: SpaceSize or
```
"${SpaceSize} ${SpaceSize}"
```
for row/column gap
```
wrap
```
: "nowrap" | "wrap" | "wrap-reverse"
```
display
```
: "flex" | "inline-flex" | "none"

Plus ALL Container props:

position

padding

margin

width

height

border

radius

overflow

background

, flex/grid item props, and more (see Container section above).

tsx

import {Flex} from '@sentry/scraps/layout';

// ❌ Don't create styled components
const Component = styled('div')`
  display: flex;
  flex-direction: column;
  position: relative;
`;

// ✅ Use Flex primitive with props
<Flex direction="column" position="relative" gap="md">
  <Child1 />
  <Child2 />
</Flex>;

使用

<Flex>

实现弹性布局。继承自Container，拥有Container的所有属性及Flex专属属性。

Flex专属属性（完整列表请查看

flex.tsx

）：

```
direction
```
: "row" | "row-reverse" | "column" | "column-reverse"
```
align
```
: "start" | "end" | "center" | "baseline" | "stretch"
```
justify
```
: "start" | "end" | "center" | "between" | "around" | "evenly" | "left" | "right"
```
gap
```
: SpaceSize或
```
"${SpaceSize} ${SpaceSize}"
```
（用于设置行列间距）
```
wrap
```
: "nowrap" | "wrap" | "wrap-reverse"
```
display
```
: "flex" | "inline-flex" | "none"

加上Container的所有属性：

position

、

padding

、

margin

、

width

、

height

、

border

、

radius

、

overflow

、

background

、Flex/Grid子项属性等（详见上方Container部分）。

tsx

import {Flex} from '@sentry/scraps/layout';

// ❌ 请勿创建styled组件
const Component = styled('div')`
  display: flex;
  flex-direction: column;
  position: relative;
`;

// ✅ 使用带属性的Flex原语
<Flex direction="column" position="relative" gap="md">
  <Child1 />
  <Child2 />
</Flex>;

Grid

Use

<Grid>

for grid layouts. Extends

Container

, inheriting all Container props plus grid-specific props.

Grid-Specific Props (see

grid.tsx

for complete list):

```
columns
```
: Grid template columns (number or CSS value)
```
rows
```
: Grid template rows
```
areas
```
: Named grid areas
```
gap
```
: SpaceSize or
```
"${SpaceSize} ${SpaceSize}"
```
for row/column gap
```
align
```
: "start" | "end" | "center" | "baseline" | "stretch" (align-items)
```
alignContent
```
: "start" | "end" | "center" | "between" | "around" | "evenly" | "stretch"
```
justify
```
: "start" | "end" | "center" | "between" | "around" | "evenly" | "stretch" (justify-content)
```
justifyItems
```
: "start" | "end" | "center" | "stretch"
```
flow
```
: "row" | "column" | "row dense" | "column dense"
```
autoColumns
```
,
```
autoRows
```
: Size of auto-generated tracks

Plus ALL Container props:

position

padding

margin

width

height

border

radius

overflow

background

, flex/grid item props, and more (see Container section above).

tsx

import {Grid} from '@sentry/scraps/layout';

// ❌ Don't create styled components
const Component = styled('div')`
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: ${space(2)};
`;

// ✅ Use Grid primitive
<Grid columns="repeat(3, 1fr)" gap="md">
  <Item1 />
  <Item2 />
  <Item3 />
</Grid>;

使用

<Grid>

实现网格布局。继承自Container，拥有Container的所有属性及Grid专属属性。

Grid专属属性（完整列表请查看

grid.tsx

）：

```
columns
```
: 网格模板列（数字或CSS值）
```
rows
```
: 网格模板行
```
areas
```
: 命名网格区域
```
gap
```
: SpaceSize或
```
"${SpaceSize} ${SpaceSize}"
```
（用于设置行列间距）
```
align
```
: "start" | "end" | "center" | "baseline" | "stretch"（align-items）
```
alignContent
```
: "start" | "end" | "center" | "between" | "around" | "evenly" | "stretch"
```
justify
```
: "start" | "end" | "center" | "between" | "around" | "evenly" | "stretch"（justify-content）
```
justifyItems
```
: "start" | "end" | "center" | "stretch"
```
flow
```
: "row" | "column" | "row dense" | "column dense"
```
autoColumns
```
、
```
autoRows
```
: 自动生成轨道的尺寸

加上Container的所有属性：

position

、

padding

、

margin

、

width

、

height

、

border

、

radius

、

overflow

、

background

、Flex/Grid子项属性等（详见上方Container部分）。

tsx

import {Grid} from '@sentry/scraps/layout';

// ❌ 请勿创建styled组件
const Component = styled('div')`
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: ${space(2)};
`;

// ✅ 使用Grid原语
<Grid columns="repeat(3, 1fr)" gap="md">
  <Item1 />
  <Item2 />
  <Item3 />
</Grid>;

Stack

Use

<Stack>

for vertical layouts. Stack is essentially

Flex

with

direction="column"

by default. It also provides

Stack.Separator

for adding separators between items.

Props (see

stack.tsx

for complete list):

Same as Flex props (inherits all Flex and Container props)
```
direction
```
defaults to "column" (but can be overridden)
```
Stack.Separator
```
component for adding dividers between stack items

tsx

import {Stack} from '@sentry/scraps/layout';

// ❌ Don't create styled components for vertical layouts
const Component = styled('div')`
  display: flex;
  flex-direction: column;
  gap: ${space(2)};
`;

// ✅ Use Stack primitive (automatically column direction)
<Stack gap="md">
  <Item1 />
  <Item2 />
  <Item3 />
</Stack>;

// ✅ With separators between items
<Stack gap="md">
  <Item1 />
  <Stack.Separator />
  <Item2 />
  <Stack.Separator />
  <Item3 />
</Stack>;

// ✅ Stack supports all Flex and Container props
<Stack gap="md" padding="lg" position="relative" border="primary">
  <Item1 />
  <Item2 />
</Stack>;

使用

<Stack>

实现纵向布局。Stack本质上是默认

direction="column"

的Flex，还提供

Stack.Separator

用于在项之间添加分隔符。

属性（完整列表请查看

stack.tsx

）：

与Flex属性相同（继承所有Flex和Container属性）
```
direction
```
默认值为"column"（可手动覆盖）
```
Stack.Separator
```
组件用于在Stack项之间添加分隔线

tsx

import {Stack} from '@sentry/scraps/layout';

// ❌ 请勿为纵向布局创建styled组件
const Component = styled('div')`
  display: flex;
  flex-direction: column;
  gap: ${space(2)};
`;

// ✅ 使用Stack原语（自动为纵向排列）
<Stack gap="md">
  <Item1 />
  <Item2 />
  <Item3 />
</Stack>;

// ✅ 在项之间添加分隔符
<Stack gap="md">
  <Item1 />
  <Stack.Separator />
  <Item2 />
  <Stack.Separator />
  <Item3 />
</Stack>;

// ✅ Stack支持所有Flex和Container属性
<Stack gap="md" padding="lg" position="relative" border="primary">
  <Item1 />
  <Item2 />
</Stack>;

Typography Primitives

排版原语

Text

Use

<Text>

for all text content. Never use raw

<p>

<span>

, or

<div>

elements with text styling.

Key Props (see

text.tsx

for complete list):

```
as
```
: "span" | "p" | "label" | "div" (semantic HTML element)
```
size
```
: TextSize ("xs" | "sm" | "md" | "lg" | "xl" | "2xl")
```
variant
```
: ContentVariant | "muted" (see Content Variant Tokens below)
```
align
```
: "left" | "center" | "right" | "justify"
```
bold
```
: boolean
```
italic
```
: boolean
```
uppercase
```
: boolean
```
monospace
```
: boolean
```
tabular
```
: boolean (fixed-width numbers)
```
ellipsis
```
: boolean (truncate with ellipsis)
```
wrap
```
: "nowrap" | "normal" | "pre" | "pre-line" | "pre-wrap"
```
textWrap
```
: "wrap" | "nowrap" | "balance" | "pretty" | "stable"
```
wordBreak
```
: "normal" | "break-all" | "keep-all" | "break-word"
```
density
```
: "compressed" | "comfortable" (line-height)
```
underline
```
: boolean | "dotted"
```
strikethrough
```
: boolean

tsx

import {Text} from '@sentry/scraps/text';

// ❌ Don't create styled text components
const Label = styled('span')`
  color: ${p => p.theme.tokens.content.secondary};
  font-size: ${p => p.theme.fontSizes.small};
`;

// ❌ Don't use raw elements
<p>This is a paragraph</p>
<span>Status: Active</span>

// ✅ Use Text primitive with semantic 'as' prop
<Text as="p" variant="muted" density="comfortable">
  This is a paragraph
</Text>
<Text as="span" bold uppercase>
  Status: Active
</Text>

所有文本内容均需使用

<Text>

，切勿使用原生

<p>

、

<span>

或

<div>

元素并自定义文本样式。

关键属性（完整列表请查看

text.tsx

）：

```
as
```
: "span" | "p" | "label" | "div"（语义化HTML元素）
```
size
```
: TextSize（"xs" | "sm" | "md" | "lg" | "xl" | "2xl"）
```
variant
```
: ContentVariant | "muted"（详见下方内容变体令牌）
```
align
```
: "left" | "center" | "right" | "justify"
```
bold
```
: boolean
```
italic
```
: boolean
```
uppercase
```
: boolean
```
monospace
```
: boolean
```
tabular
```
: boolean（等宽数字）
```
ellipsis
```
: boolean（省略号截断）
```
wrap
```
: "nowrap" | "normal" | "pre" | "pre-line" | "pre-wrap"
```
textWrap
```
: "wrap" | "nowrap" | "balance" | "pretty" | "stable"
```
wordBreak
```
: "normal" | "break-all" | "keep-all" | "break-word"
```
density
```
: "compressed" | "comfortable"（行高）
```
underline
```
: boolean | "dotted"
```
strikethrough
```
: boolean

tsx

import {Text} from '@sentry/scraps/text';

// ❌ 请勿创建自定义文本styled组件
const Label = styled('span')`
  color: ${p => p.theme.tokens.content.secondary};
  font-size: ${p => p.theme.fontSizes.small};
`;

// ❌ 请勿使用原生元素
<p>这是一段段落</p>
<span>状态：活跃</span>

// ✅ 使用带语义化'as'属性的Text原语
<Text as="p" variant="muted" density="comfortable">
  这是一段段落
</Text>
<Text as="span" bold uppercase>
  状态：活跃
</Text>

Heading

Use

<Heading>

for all headings. Never use raw

<h1>

<h2>

, etc. elements.

Key Props (see

heading.tsx

for complete list):

```
as
```
: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" (REQUIRED)
```
size
```
: HeadingSize ("xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl")
```
variant
```
: Same as Text
```
align
```
: Same as Text
```
italic
```
,
```
monospace
```
,
```
tabular
```
: Same as Text
```
ellipsis
```
,
```
wrap
```
,
```
textWrap
```
,
```
wordBreak
```
: Same as Text
```
density
```
: Same as Text
```
underline
```
,
```
strikethrough
```
: Same as Text

Note:

bold

and

uppercase

are NOT available on Heading (headings are always bold).

tsx

import {Heading} from '@sentry/scraps/text';

// ❌ Don't style heading elements
const Title = styled('h2')`
  font-size: ${p => p.theme.fontSize.md};
  font-weight: bold;
`;

// ❌ Don't use raw heading elements
<h2>My Title</h2>

// ✅ Use Heading primitive with semantic 'as' prop
<Heading as="h2">My Title</Heading>

// ✅ With custom size
<Heading as="h3" size="xl">Large H3</Heading>

所有标题均需使用

<Heading>

，切勿使用原生

<h1>

、

<h2>

等元素。

关键属性（完整列表请查看

heading.tsx

）：

```
as
```
: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"（必填）
```
size
```
: HeadingSize（"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl"）
```
variant
```
: 与Text相同
```
align
```
: 与Text相同
```
italic
```
、
```
monospace
```
、
```
tabular
```
: 与Text相同
```
ellipsis
```
、
```
wrap
```
、
```
textWrap
```
、
```
wordBreak
```
: 与Text相同
```
density
```
: 与Text相同
```
underline
```
、
```
strikethrough
```
: 与Text相同

注意：Heading不支持

bold

和

uppercase

属性（标题默认加粗）。

tsx

import {Heading} from '@sentry/scraps/text';

// ❌ 请勿为标题元素添加样式
const Title = styled('h2')`
  font-size: ${p => p.theme.fontSize.md};
  font-weight: bold;
`;

// ❌ 请勿使用原生标题元素
<h2>我的标题</h2>

// ✅ 使用带语义化'as'属性的Heading原语
<Heading as="h2">我的标题</Heading>

// ✅ 自定义尺寸
<Heading as="h3" size="xl">大尺寸H3</Heading>

Creating Thin Abstractions

创建轻量抽象

⚠️ CRITICAL: ALWAYS prompt the user for confirmation before creating abstractions over layout primitives (
Container
,
Flex
,
Grid
,
Stack
,
Text
,
Heading
) when the intent is to DRY (Don't Repeat Yourself) repeated props.

You can create thin abstractions over primitives with the purpose of improving the semantic structure by using meaningful names (e.g.,

TableCell

vs generic

Flex

) and with the purpose of providing some default props. It is very important that you do this sparingly, and only when it is a net gain for readability. For example, if there are only two instances of the duplicated props, and they are placed next to each other, the price of the abstraction outweights the terseness.

Before creating an abstraction, you MUST:

Ask the user for confirmation
Explain what abstraction you plan to create
Justify why the abstraction is worth the added complexity
Wait for explicit approval before proceeding

tsx

import {Flex, type FlexProps} from '@sentry/scraps/layout';

// ❌ Don't repeat the same props everywhere
<Flex align="center" gap="xs" flex="1" padding="sm">Content 1</Flex>
<Flex align="center" gap="xs" flex="1" padding="sm">Content 2</Flex>
<Flex align="center" gap="xs" flex="1" padding="sm">Content 3</Flex>
<Flex align="center" gap="xs" flex="1" padding="sm">Content 4</Flex>

// ✅ Create a thin wrapper with default props (AFTER USER CONFIRMATION)
function TableCell(props: FlexProps) {
  return <Flex align="center" gap="md" {...props} />;
}

<TableCell>Content 1</TableCell>
<TableCell>Content 2</TableCell>
<TableCell align="start">Content 3</TableCell>{/* Can override defaults */}

Key points:

ALWAYS prompt for user confirmation BEFORE creating the abstraction
Extend the primitive's props type (
```
extends FlexProps
```
)
Set defaults on JSX component and spread
```
{...props}
```
to allow overrides
Don't use styled components - compose primitives instead

⚠️ 重要提示：当你想要通过抽象布局原语（
Container
、
Flex
、
Grid
、
Stack
、
Text
、
Heading
）来实现DRY（避免重复代码）时，务必先征得用户确认。

你可以基于原语创建轻量抽象，目的是通过有意义的名称（例如

TableCell

而非通用的

Flex

）提升语义化结构，或提供一些默认属性。请注意务必谨慎使用，仅当能切实提升可读性时才这么做。例如，如果重复属性仅出现两次且位置相邻，那么抽象带来的复杂度将超过代码简洁性的收益。

创建抽象前，你必须：

向用户请求确认
说明你计划创建的抽象内容
证明该抽象的复杂度是值得的
获得明确批准后再执行

tsx

import {Flex, type FlexProps} from '@sentry/scraps/layout';

// ❌ 请勿在各处重复相同属性
<Flex align="center" gap="xs" flex="1" padding="sm">内容1</Flex>
<Flex align="center" gap="xs" flex="1" padding="sm">内容2</Flex>
<Flex align="center" gap="xs" flex="1" padding="sm">内容3</Flex>
<Flex align="center" gap="xs" flex="1" padding="sm">内容4</Flex>

// ✅ 创建带默认属性的轻量包装器（需用户确认后）
function TableCell(props: FlexProps) {
  return <Flex align="center" gap="md" {...props} />;
}

<TableCell>内容1</TableCell>
<TableCell>内容2</TableCell>
<TableCell align="start">内容3</TableCell>{/* 可覆盖默认值 */}

关键点：

创建抽象前务必征得用户确认
继承原语的属性类型（
```
extends FlexProps
```
）
在JSX组件上设置默认值并通过
```
{...props}
```
允许覆盖
请勿使用styled组件，而是组合原语

General Guidelines

通用指南

1. Use Responsive Props

1. 使用响应式属性

Most props support responsive syntax using breakpoint keys.

tsx

// ❌ Don't use styled media queries
const Component = styled('div')`
  display: flex;
  flex-direction: column;

  @media screen and (min-width: ${p => p.theme.breakpoints.md}) {
    flex-direction: row;
  }
`;

// ✅ Use responsive prop signature
<Flex direction={{xs: 'column', md: 'row'}}>

大多数属性支持使用断点键的响应式语法。

tsx

// ❌ 请勿使用styled媒体查询
const Component = styled('div')`
  display: flex;
  flex-direction: column;

  @media screen and (min-width: ${p => p.theme.breakpoints.md}) {
    flex-direction: row;
  }
`;

// ✅ 使用响应式属性签名
<Flex direction={{xs: 'column', md: 'row'}}>

2. Prefer Gap/Padding Over Margin

2. 优先使用Gap/内边距而非外边距

Container supports

margin

props but they are deprecated. Use

gap

on parent containers instead.

tsx

// ❌ Don't use margin between children
const Child = styled('div')`
  margin-right: ${p => p.theme.spacing.lg};
`;

// ✅ Use gap on parent container
<Flex gap="lg">
  <Child1 />
  <Child2 />
</Flex>;

Container支持

margin

属性但已废弃，建议在父容器上使用

gap

替代。

tsx

// ❌ 请勿在子元素间使用外边距
const Child = styled('div')`
  margin-right: ${p => p.theme.spacing.lg};
`;

// ✅ 在父容器上使用gap
<Flex gap="lg">
  <Child1 />
  <Child2 />
</Flex>;

3. Split Layout from Typography

3. 分离布局与排版

Don't couple layout and typography in a single styled component. Use separate primitives.

tsx

// ❌ Don't couple layout and typography
const Component = styled('div')`
  display: flex;
  flex-direction: column;
  color: ${p => p.theme.tokens.content.secondary};
  font-size: ${p => p.theme.fontSize.lg};
`;

// ✅ Split into layout and typography primitives
<Flex direction="column">
  <Text variant="muted" size="lg">
    Content
  </Text>
</Flex>;

请勿在单个styled组件中同时耦合布局与排版，应使用独立的原语。

tsx

// ❌ 请勿耦合布局与排版
const Component = styled('div')`
  display: flex;
  flex-direction: column;
  color: ${p => p.theme.tokens.content.secondary};
  font-size: ${p => p.theme.fontSize.lg};
`;

// ✅ 拆分为布局与排版原语
<Flex direction="column">
  <Text variant="muted" size="lg">
    内容
  </Text>
</Flex>;

4. Check Implementation Files for All Props

4. 查看实现文件获取完整属性列表

The implementation files contain the complete, up-to-date list of supported props with TypeScript types. When in doubt:

Read

/static/app/components/core/layout/container.tsx

for base layout props

Read

/static/app/components/core/layout/flex.tsx

for Flex-specific props

Read

/static/app/components/core/layout/grid.tsx

for Grid-specific props

Read

/static/app/components/core/layout/stack.tsx

for Stack-specific props

Read

/static/app/components/core/text/text.tsx

for Text props

Read

/static/app/components/core/text/heading.tsx

for Heading props

实现文件包含了支持的完整属性列表及TypeScript类型。如有疑问：

查看

/static/app/components/core/layout/container.tsx

获取基础布局属性

查看

/static/app/components/core/layout/flex.tsx

获取Flex专属属性

查看

/static/app/components/core/layout/grid.tsx

获取Grid专属属性

查看

/static/app/components/core/layout/stack.tsx

获取Stack专属属性

查看

/static/app/components/core/text/text.tsx

获取Text属性

查看

/static/app/components/core/text/heading.tsx

获取Heading属性

Token Reference

令牌参考

Spacing Tokens (SpaceSize)

间距令牌（SpaceSize）

Use these for

gap

padding

```
"0"
```
,
```
"2xs"
```
,
```
"xs"
```
,
```
"sm"
```
,
```
"md"
```
,
```
"lg"
```
,
```
"xl"
```
,
```
"2xl"
```
,
```
"3xl"
```
Multiple values:
```
"md lg"
```
(vertical horizontal)
Responsive:
```
{{xs: "sm", md: "lg"}}
```

用于

gap

、

padding

：

```
"0"
```
,
```
"2xs"
```
,
```
"xs"
```
,
```
"sm"
```
,
```
"md"
```
,
```
"lg"
```
,
```
"xl"
```
,
```
"2xl"
```
,
```
"3xl"
```
多值：
```
"md lg"
```
（纵向横向）
响应式：
```
{{xs: "sm", md: "lg"}}
```

Border Tokens (BorderVariant)

边框令牌（BorderVariant）

Use these for

border

prop:

"primary"

"muted"

"accent"

"danger"

"promotion"

"success"

"warning"

用于

border

属性：

"primary"

"muted"

"accent"

"danger"

"promotion"

"success"

"warning"

Radius Tokens (RadiusSize)

圆角令牌（RadiusSize）

Use these for

radius

prop:

```
"0"
```
,
```
"2xs"
```
,
```
"xs"
```
,
```
"sm"
```
,
```
"md"
```
,
```
"lg"
```
,
```
"xl"
```
,
```
"2xl"
```
,
```
"full"
```

用于

radius

属性：

```
"0"
```
,
```
"2xs"
```
,
```
"xs"
```
,
```
"sm"
```
,
```
"md"
```
,
```
"lg"
```
,
```
"xl"
```
,
```
"2xl"
```
,
```
"full"
```

Text Size Tokens

文本尺寸令牌

TextSize: "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
HeadingSize: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl"

TextSize: "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
HeadingSize: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl"

Surface Variant Tokens (SurfaceVariant)

表面变体令牌（SurfaceVariant）

Use these for

background

prop on layout components:

```
"primary"
```
,
```
"secondary"
```
,
```
"tertiary"
```

用于布局组件的

background

属性：

```
"primary"
```
,
```
"secondary"
```
,
```
"tertiary"
```

Content Variant Tokens (ContentVariant)

内容变体令牌（ContentVariant）

Use these for

variant

prop on Text and Heading:

ContentVariant: "primary" | "secondary" | "accent" | "danger" | "promotion" | "success" | "warning"
Plus "muted": Text and Heading also accept "muted" in addition to ContentVariant values

用于Text和Heading的

variant

属性：

ContentVariant: "primary" | "secondary" | "accent" | "danger" | "promotion" | "success" | "warning"
额外支持"muted"：Text和Heading除ContentVariant值外，还支持"muted"

Quick Reference Checklist

快速参考检查清单

Before creating a styled component, ask:

✅ Can I use
```
<Flex>
```
,
```
<Grid>
```
, or
```
<Stack>
```
for layout?
✅ Can I use
```
<Stack>
```
for vertical layouts with default column direction?
✅ Can I use
```
<Container>
```
for borders/padding/positioning?
✅ Can I use
```
<Text>
```
or
```
<Heading>
```
for typography?
✅ Can I use responsive props instead of media queries?
✅ Can I use
```
gap
```
instead of margins?
✅ Does the primitive support the prop I need? (Check implementation files)

If you answered yes to any of these, use the primitive instead.

创建styled组件前，请自问：

✅ 我是否可以使用
```
<Flex>
```
、
```
<Grid>
```
或
```
<Stack>
```
实现布局？
✅ 我是否可以使用
```
<Stack>
```
实现默认纵向排列的布局？
✅ 我是否可以使用
```
<Container>
```
实现边框/内边距/定位？
✅ 我是否可以使用
```
<Text>
```
或
```
<Heading>
```
实现排版？
✅ 我是否可以使用响应式属性而非媒体查询？
✅ 我是否可以使用
```
gap
```
替代外边距？
✅ 原语是否支持我需要的属性？（请查看实现文件）

如果以上任意问题的答案是肯定的，请使用对应的原语。