基本ルール
両方のテーマで、操作と選択に無彩色の意味色を使用します。フォーカスとフィードバックには別々の役割があります。
無彩色の操作
primary / primary-foreground選択
surface-selected / foregroundフォーカス
ringColors — Semantic
これらの役割は現在のライトまたはダークテーマに従います。下の色は共通CSS変数から読み取ります。
background
foreground
card
card-foreground
popover
popover-foreground
primary
primary-foreground
primary-hover
surface-selected
secondary
secondary-foreground
muted
muted-foreground
accent
accent-foreground
border
border-strong
input
ring
success
success-bg
warning
warning-bg
error
error-bg
info
info-bg
Colors — Primitive
基本パレットは互換性のために維持しています。青色は従来の基本色で、既定の操作色ではありません。
Gray
50
100
200
300
400
500
600
700
800
900
950
従来の青色パレット
50
100
200
300
400
500
600
700
800
900
950
Destructive
50
100
200
300
400
500
600
700
800
900
950
Colors — Project
プロジェクト色は個々の製品を識別します。共通の操作・フォーカス・選択の役割を置き換えません。
cc
sa
pkm
naeilUi
baby
Typography
韓国語と欧文UIにはPretendard、日本語にはNoto Sans JPを使用します。等幅のサンプルは設定済みの代替フォントを使います。
ページの見出し
PageTitle · 2rem · 600
セクションの見出し
SectionTitle · 1.25rem · 600
xs · 0.8125rem明日はここから始まります。sm · 0.875rem明日はここから始まります。base · 1rem明日はここから始まります。lg · 1.125rem明日はここから始まります。xl · 1.25rem明日はここから始まります。2xl · 1.5rem明日はここから始まります。3xl · 2rem明日はここから始まります。4xl · 2.25rem明日はここから始まります。等幅の代替フォント
JetBrains Mono, Geist Mono, ui-monospace, monospace
const x = 42;
400 Regular — 本文
500 Medium — ラベルとコントロール
600 Semibold — ページとセクションの見出し
Spacing
00px14px28px312px416px520px624px832px1040px1248px1664pxRadius
角丸はタグが4px、コントロールが8px、パネルが12pxです。
none · 0pxsm · 4pxmd · 8pxlg · 12pxShadow
shadow-smshadow-mdButton
操作可能
variant="default" size="default"種類
サイズ
状態
Input
操作可能
コントロールを変更して入力状態を比較してください。
Card
すべてのサービスは正常に動作しています。
v0.6.0 — Phase 6 Demo
v0.5.0 — Core Components