Design Tokens

Stablev0.3.0

Qwik UIのデザインシステムを構成するカラー、スペーシング、シャドウなどの基本要素。CSS変数として定義されており、テーマ切り替えに対応しています。

Preview theme:

使い方

CSS変数はTailwindクラスまたは直接CSS内で使用できます

tsx

class="token keyword">class=class="token keyword">class="token string">"token comment">// Tailwindクラスでの使用
<class="token tag">div class="token keyword">class=class="token keyword">class="token string">"bg-surface text-content border-border">
  Content
</class="token tag">div>

class="token keyword">class=class="token keyword">class="token string">"token comment">// CSS変数として直接使用
.custom-element {
  background-color: class="token keyword">var(--surface);
  color: class="token keyword">var(--content);
  border-color: class="token keyword">var(--border);
}

class="token keyword">class=class="token keyword">class="token string">"token comment">// JavaScript内で取得
class="token keyword">const accentColor = class="token function">getComputedStyle(document.documentElement)
  .class="token function">getPropertyValue(class="token keyword">class="token string">'--accent');

Surface Colors

背景やコンテナに使用される表面カラー

Content Colors

テキストやアイコンに使用されるコンテンツカラー

Accent Colors

ブランドカラーやインタラクティブ要素に使用

Semantic Colors

成功、警告、エラー、情報を示す意味的なカラー

Border Colors

境界線やフォーカスリング用

Shadow Tokens

奥行きや階層を表現するシャドウ

--shadow-sm

小さな影

--shadow-md

中程度の影

--shadow-lg

大きな影

Spacing Scale

Tailwind CSSのデフォルトスペーシングスケールを使用

0.5

2px

1

4px

2

8px

3

12px

4

16px

6

24px

8

32px

12

48px

16

64px

Typography

テキストスタイルの階層

text-xsExtra small text (12px / 0.75rem)

text-smSmall text (14px / 0.875rem)

text-baseBase text (16px / 1rem)

text-lgLarge text (18px / 1.125rem)

text-xlExtra large (20px / 1.25rem)

text-2xlHeading 2 (24px / 1.5rem)

text-3xlHeading 1 (30px / 1.875rem)

Border Radius

角丸のスケール

rounded-sm

rounded

rounded-md

rounded-lg

rounded-xl

rounded-2xl

rounded-full

Animation

トランジションとアニメーション

tsx

class="token keyword">class=class="token keyword">class="token string">"token comment">// Tailwind CSS設定内のカスタムアニメーション
animation: {
  class="token keyword">class="token string">'fade-in': class="token keyword">class="token string">'fadeIn class="token number">0.2s ease-out',
  class="token keyword">class="token string">'slide-up': class="token keyword">class="token string">'slideUp class="token number">0.3s ease-out',
  class="token keyword">class="token string">'slide-down': class="token keyword">class="token string">'slideDown class="token number">0.3s ease-out',
  class="token keyword">class="token string">'scale-in': class="token keyword">class="token string">'scaleIn class="token number">0.2s ease-out',
}

class="token keyword">class=class="token keyword">class="token string">"token comment">// 使用例
<class="token tag">div class="token keyword">class=class="token keyword">class="token string">"animate-fade-in">Fade in content</class="token tag">div>
<class="token tag">div class="token keyword">class=class="token keyword">class="token string">"animate-slide-up">Slide up content</class="token tag">div>