Colors

色は uchu の OKLCH パレットのサブセットだけを使う。 アプリのコードが参照するのは用途名を持つセマンティックトークンで、 各トークンは light-dark() で両テーマの値を持つ。

Semantic colors 14 tokens

スワッチは左がライト、右がダークの解決値。L / D は light-dark() の各引数。

--c-bgLvar(--uchu-yang)Dvar(--uchu-yin)
--c-textLvar(--uchu-yin)Dvar(--uchu-gray-1)
--c-subLvar(--uchu-yin-6)Dvar(--uchu-yin-4)
--c-borderLvar(--uchu-gray-2)Doklch(var(--uchu-yang-raw) / 10%)
--c-surfaceLvar(--uchu-gray-1)Dvar(--uchu-yin-9)
--c-surface-textLvar(--uchu-yin-9)Dvar(--uchu-yang)
--c-primaryLvar(--uchu-yin-8)Dvar(--uchu-gray-3)
--c-primary-textLvar(--uchu-yang)Dvar(--uchu-yin-9)
--c-linkLvar(--uchu-blue-5)Dvar(--uchu-blue-3)
--c-link-visitedLvar(--uchu-purple-5)Dvar(--uchu-purple-3)
--c-dangerLvar(--uchu-red-6)Dvar(--uchu-red-4)
--c-selectionLvar(--uchu-yellow-2)Doklch(from var(--uchu-yellow-9) l c h / 45%)
--c-scrollbarLvar(--uchu-gray-3)Dvar(--uchu-yin-8)
--c-ringLvar(--uchu-yin-7)Dvar(--uchu-yin-4)

uchu palette 36 colors

生のパレット値。原則としてアプリからは直接使わず、セマンティックトークンの材料にする。 列は uchu の階調で、空きは未使用の色。チップにポインタを載せると oklch 値が出る。

gray
red
purple
blue
green
yellow
orange
yin
yang

-raw variants

透明度を後付けするために、oklch() の引数だけを持つ変種。oklch(var(--uchu-yang-raw) / 10%) のように使う。