概要

はじめに

スタイリング

レイアウト

リリース

テーマ

（ナビゲーションリンクは省略、以下同様。日本語に翻訳したテキストのみ記載）
概要
カラー
ダークモード
タイポグラフィ
スペーシング
ブレークポイント
角丸
影
カーソル

レイアウト

ボックス
フレックス
グリッド
コンテナ
セクション

タイポグラフィ

テキスト
見出し
引用
コード
強調
キーボード入力
リンク
引用符
強い強調

コンポーネント

（コンポーネントリストは省略）

ユーティリティ

（ユーティリティリストは省略）

スペーシング

スペーススケールとスケーリングオプションの概要。

スペーススケール

スペーシング値は、マージンやパディングなどのプロパティに使用される9段階のスケールから派生しています。これらのプロパティは、以下のスケールのステップに対応する "1" から "9" までの数値文字列を受け入れます。

ステップ	基準値
1	`4px`
2	`8px`
3	`12px`
4	`16px`
5	`24px`
6	`32px`
7	`40px`
8	`48px`
9	`64px`

スペーススケールトークン

スペーススケールトークンは、CSS変数を使用してアクセスすることもできます。これらのトークンを使用してカスタムコンポーネントをスタイル設定し、テーマの他の部分と一致させることができます。

/* Space scale */
var(--space-1);
var(--space-2);
var(--space-3);
var(--space-4);
var(--space-5);
var(--space-6);
var(--space-7);
var(--space-8);
var(--space-9);

スケーリング

レイアウトに影響を与える値（間隔、フォントサイズ、行の高さ）は、テーマで定義されているscalingの値に基づいて、互いに相対的にスケールされます。この設定により、アプリケーション全体でUIの密度を均一に調整できます。

<Theme scaling="100%">
  <Card variant="surface">
    <Flex gap="3" align="center">
      <Avatar size="3" src={person.image} fallback={person.name} />
      <Box>
        <Text as="div" size="2" weight="bold">
          {person.name}
        </Text>
        <Text as="div" size="2" color="gray">
          Approved invoice <Link>#3461</Link>
        </Text>
      </Box>
    </Flex>
  </Card>
</Theme>

90%

95%

100%

105%

110%

スケーリング係数

スケーリング係数トークンは、--scaling CSS変数を使用してアクセスできます。アプリケーションで異なるスケーリング係数を使用する必要がある場合は、このトークンをカスタムスタイルで使用して、テーマの残りの部分と一致するようにすることができます。

.MyCustomComponent {
  width: calc(200px * var(--scaling));
}

前へタイポグラフィ

次へブレークポイント

GitHubでこのページを編集する