部品がトークンに追従する
決めたトークンで、ボタン・入力欄・カード・表・警告など8つの部品が一斉に張り替わる。完成形の :root と用途の CSS を持ち帰る。参考にした作業面: Radix Themes Playground。
見本#
持ち帰る#
:root {
--color-bg: #fbfaf8;
--color-surface: #f3efe8;
--color-text: #1c1a17;
--color-text-muted: #6f6a62;
--color-border: #d8d2c7;
--color-accent: #b4713a;
--color-accent-text: #95591c;
--color-on-accent: #ffffff;
--color-danger: #a2382a;
--color-on-danger: #ffffff;
--color-focus: var(--color-accent-text);
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--space-10: 128px;
--text-sm: 0.8125rem;
--text-base: 1rem;
--text-lg: 1.1875rem;
--text-xl: 1.5rem;
--text-2xl: 2.25rem;
--leading-body: 1.9;
--leading-heading: 1.35;
--dur-fast: 120ms;
--dur-base: 240ms;
--dur-slow: 420ms;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in: cubic-bezier(0.7, 0, 0.84, 0);
--page: 80rem;
--gutter: var(--space-6);
--radius: 2px;
--shadow-1: 0 1px 2px hsl(40 20% 20% / 0.08), 0 2px 4px hsl(40 20% 20% / 0.05);
--shadow-2: 0 1px 2px hsl(40 20% 20% / 0.08), 0 2px 4px hsl(40 20% 20% / 0.06), 0 6px 12px hsl(40 20% 20% / 0.05);
--shadow-3: 0 2px 4px hsl(40 20% 20% / 0.08), 0 6px 12px hsl(40 20% 20% / 0.06), 0 14px 28px hsl(40 20% 20% / 0.05), 0 28px 56px hsl(40 20% 20% / 0.04);
}
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #171614;
--color-surface: #201e1b;
--color-text: #e9e6e1;
--color-text-muted: #a49d93;
--color-border: #3b3833;
--color-accent: #d99356;
--color-accent-text: #d99356;
--color-on-accent: #171614;
--color-danger: #d4705f;
--color-on-danger: #171614;
--shadow-1: 0 1px 2px hsl(40 20% 4% / 0.4);
--shadow-2: 0 2px 6px hsl(40 20% 4% / 0.45);
--shadow-3: 0 6px 18px hsl(40 20% 4% / 0.5);
}
}用途の CSS
セレクタで出るもの。勾配のブロックと動きの場面、動きを減らす設定の分岐。
/* 勾配は bench/gradient.html で決めると、ここに入ります */
/* 入る。画面に現れるもの */
.enter { opacity: 0; transform: translateY(12px); }
.enter.is-on { opacity: 1; transform: none;
transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
/* 出る。入りより短く */
.leave.is-on { opacity: 0; transform: translateY(calc(12px * -1));
transition: opacity var(--dur-fast) var(--ease-in), transform var(--dur-fast) var(--ease-in); }
/* 位置が移る */
.move { transition: transform var(--dur-slow) cubic-bezier(0.65,0,0.35,1); }
.move.is-on { transform: translateX(calc(12px * 4)); }
/* 一覧の順次表示。要素ごとに --i を振る */
.enter[style*="--i"] { transition-delay: calc(var(--i) * 40ms); }
@media (prefers-reduced-motion: reduce) {
.enter, .leave, .move { transition: none; }
.enter { opacity: 1; transform: none; }
}借りた部品#
貼るのはパターン集から。ここでは張り替わるのを見るだけです。
つまみは JavaScript で動きます。無効の場合は、上の見本は既定の値で描かれ、コピー欄には出発点のCSSと同じ既定の値が入っています。