@liha-css/tokens

@liha-css/tokens は CSS Variables（Design Tokens） を配布します。 このパッケージは “スタイルを当てる” のではなく、スタイルの材料（値）だけを提供します。

• Palette tokens: --liha-color-blue-6 のような色の階調
• Semantic tokens: --liha-color-text-main のような「用途」に紐づいた値
• UI tokens: radius / shadow / z-index など、UIの土台となる値

すべての変数は --liha- プレフィックス付きです（他ライブラリとの衝突を避けるため）。

Install

pnpm add @liha-css/tokens
# or npm i @liha-css/tokens
# or yarn add @liha-css/tokens

Usage

このパッケージは @layer liha.tokens で定義されます。 reset / foundation と併用する場合は、import順で優先順位が決まるため、基本は 最初に読み込むのを推奨します。

Recommended order: tokens → reset → foundation

import '@liha-css/tokens'

Token structure

1) Palette (raw scale)

直接使ってもOKですが、基本は semantic 経由を推奨します。

例:

• --liha-color-gray-0 .. 9
• --liha-color-blue-0 .. 9
• --liha-color-red-0 .. 9
• ...etc

2) Semantic (meaning)

色の用途を固定し、アプリ側は “意味” を参照します。

例:

• --liha-color-bg-default
• --liha-color-text-main
• --liha-color-border-default
• --liha-color-primary-main
• --liha-color-danger-main
• --liha-color-focus-ring
• --liha-color-link, --liha-color-link-hover

使い方例

.card {
  background: var(--liha-color-bg-surface);
  color: var(--liha-color-text-main);
  border: 1px solid var(--liha-color-border-default);
  border-radius: var(--liha-radius-surface);
  box-shadow: var(--liha-shadow-surface);
}

3) Radius

Tailwind をリスペクトした段階値です。

• --liha-radius-none
• --liha-radius-sm
• --liha-radius-md
• --liha-radius-lg
• --liha-radius-xl
• --liha-radius-2xl
• --liha-radius-3xl
• --liha-radius-full

Semantic:

• --liha-radius-control
• --liha-radius-surface
• --liha-radius-modal
• --liha-radius-pill

4) Shadow

Tailwind をリスペクトした段階値です。

• --liha-shadow-none
• --liha-shadow-sm
• --liha-shadow-md
• --liha-shadow-lg
• --liha-shadow-xl
• --liha-shadow-2xl

Semantic:

• --liha-shadow-surface
• --liha-shadow-popover
• --liha-shadow-modal

5) Z-index

段階が分かれば勝ち、の思想で 用途に名前を付けたトークンです。

• --liha-z-base
• --liha-z-sticky
• --liha-z-dropdown
• --liha-z-popover
• --liha-z-modal
• --liha-z-toast
• --liha-z-overlay

使い方例

.modal {
  z-index: var(--liha-z-modal);
}
.toast {
  z-index: var(--liha-z-toast);
}

Theme (optional)

将来的にテーマ（darkなど）を追加する場合は、palette は固定し、semantic の上書きで切り替えるのを推奨します。

[data-theme='dark'] {
  --liha-color-bg-default: var(--liha-color-gray-9);
  --liha-color-text-main: var(--liha-color-white);
  /* ...必要な semantic を上書き */
}

Notes

• このパッケージは タイポグラフィのスタイル（h1…）は提供しません。 そういった“見た目”を揃えたい場合は、Tailwind のように クラスユーティリティとして別途用意する方針です。
• @layer を使用します（CSS Cascade Layers をサポートするブラウザが対象です）。