テーマエディター

テーマ変数

あなたのスタイルがここにあります。

以下のすべてはアクティブなテーマにリアルタイムで応答します。エディターを開き、任意のプリセットから開始して変数を調整し、結果を独自のテーマとして保存します。

完全な基本色ライブラリを参照する

適用された意味とシステム状態

セマンティックとフィードバックの色

color.*

セマンティックサーフェス

Aaプライマリーcolor.primary · color.primary.fg

Aa二次color.secondary · color.secondary.fg

Aaミュートcolor.muted · color.muted.fg

Aaアクセントcolor.accent · color.accent.fg

Aa表面color.surface.raised · color.surface.raised.fg

Aa選択color.selection · color.selection.fg

Aaリングcolor.ring · color.surface.raised.fg

フィードバック状態

Aa破壊的color.danger · color.danger.fg

Aa成功color.success · color.success.fg

Aa警告color.warning · color.warning.fg

Aa情報color.info · color.info.fg

インタラクション状態

プライマリーcolor.primary · color.primary.hover · color.primary.active

ベースホバーアクティブ

二次color.secondary · color.secondary.hover · color.secondary.active

ベースホバーアクティブ

データの視覚化

チャートの色

color.chart.1–8

棒グラフ

チャート 1color.chart.1

チャート 2color.chart.2

チャート 3color.chart.3

チャート 4color.chart.4

チャート 5color.chart.5

チャート 6color.chart.6

チャート 7color.chart.7

チャート 8color.chart.8

ドーナツチャート

8トークン

タイポグラフィーシステム

フォントファミリー、ウェイトおよびタイプスケール

font.* / text.*

フォントファミリー

Agサンズfont.sans

Agセリフfont.serif

Ag等幅font.mono

Agディスプレイfont.display

フォントのウェイト

Aa極細font.weight.thin

Aaエクストラライトfont.weight.extralight

Aaライトfont.weight.light

Aaノーマルfont.weight.normal

Aa中font.weight.medium

Aa中太font.weight.semibold

Aa太字font.weight.bold

Aa極太font.weight.extrabold

Aaブラックfont.weight.black

タイプサイズ

XSXStext.xs

SMSMtext.sm

MDMDtext.md

LGLGtext.lg

XLXLtext.xl

2XL2XLtext.2xl

3XL3XLtext.3xl

4XL4XLtext.4xl

5XL5XLtext.5xl

6XL6XLtext.6xl

7XL7XLtext.7xl

8XL8XLtext.8xl

9XL9XLtext.9xl

読書のリズム

行の高さと文字間隔

leading.* / tracking.*

行の高さ

テーマのリズムが保たれている
ステップ内の 2 行。

きつい

テーマのリズムが保たれている
ステップ内の 2 行。

ぴったり

テーマのリズムが保たれている
ステップ内の 2 行。

ノーマル

テーマのリズムが保たれている
ステップ内の 2 行。

リラックスした

テーマのリズムが保たれている
ステップ内の 2 行。

緩い

文字間隔

ORIA THEMEよりタイトに

ORIA THEMEきつい

ORIA THEMEノーマル

ORIA THEMEワイド

ORIA THEMEより広い

ORIA THEME最も広い

物理的なスケール

コントロールと半径

control.* / radius.*

NONE0

XS--oria-radius-xs

SM--oria-radius-sm

MD--oria-radius-md

LG--oria-radius-lg

XL--oria-radius-xl

2XL--oria-radius-2xl

3XL--oria-radius-3xl

4XL--oria-radius-4xl

FULL9999px

レイヤー階層

立面影

shadow.*

noneshadow.none

2xsshadow.2xs

xsshadow.xs

smshadow.sm

mdshadow.md

lgshadow.lg

xlshadow.xl

2xlshadow.2xl

innershadow.inner

highlightshadow.highlight

素材の深さ

ぼかしと背景のぼかし

blur.* / backdrop.blur.*

前景のぼかし

XS

SM

MD

LG

XL

2XL

3XL

背景のぼかし

XS

SM

MD

LG

XL

2XL

3XL

構造化された材料

グラデーションと表面パターン

gradient.* / pattern.surface

グラデーション

背景gradient.bg

表面gradient.surface

アクセントgradient.accent

表面パターン

オプションの順序付けされたパターンレイヤー: ジオメトリと木目

時間と感触

持続時間とイージング

duration.* / ease.*

アニメーション速度

インスタントduration.instant

速いduration.fast

ノーマルduration.normal

遅いduration.slow

アニメーションカーブ

標準ease.standard

入口ease.enter

終了ease.exit

強調したease.emphasized

OriaTheme エディター

セマンティックとフィードバックの色

セマンティックサーフェス

フィードバック状態

インタラクション状態

チャートの色

棒グラフ

ドーナツチャート

フォントファミリー、ウェイトおよびタイプスケール

フォントファミリー

フォントのウェイト

タイプサイズ

行の高さと文字間隔

行の高さ

文字間隔

コントロールと半径

立面影

ぼかしと背景のぼかし

前景のぼかし

背景のぼかし

グラデーションと表面パターン

グラデーション

表面パターン

持続時間とイージング

アニメーション速度

アニメーションカーブ