トークン

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "spacing": {
        "card": "1.5rem"
      },
      "colors": {
        "panel": "#f4f1ec",
        "ink": "#203046"
      },
      "radii": {
        "card": "0.5rem"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-grid": true,
      "wind-demo-card": true
    },
    "safelist": {
      "docs-preview": [
        "grid",
        "grid-cols-2",
        "gap-4",
        "bg-panel",
        "text-ink",
        "p-4",
        "p-card",
        "rounded-card"
      ]
    }
  }
}

.wind-demo-grid { font: 14px/1.5 system-ui, sans-serif; }
.wind-demo-card { border: 1px solid #8797aa; min-height: 4rem; }

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {},
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {},
    "safelist": {
      "docs-preview": [
        "p-4"
      ]
    }
  }
}

暗黙のテーマはありません

v1 には、色パレット、余白単位、名前付きスケール、ブレークポイント、フォントファミリー、フォントウェイト、角丸、シャドウ、名前付きイージングトークンが組み込まれていません。トランジション系ユーティリティのデフォルトタイミング関数は ease です。別のプロジェクト共通値を使う場合は wind.defaultTransitionTimingFunction を設定してください。0、px、有限のカタログにある固定キーワードは言語定数であり、テーマの項目ではありません。プロジェクト固有のトークン値は wind.tokens に追加してください。

トークンマップには実行可能なコードではなくデータを格納します。使えるカテゴリと、出力されるカスタムプロパティの接頭辞は次のとおりです。

別フィールドの spacingUnit は --zw-spacing-unit を出力します。ブレークポイントとダークモードの設定はバリアントに作用し、トークン変数は作りません。現在どの候補にも使われていない設定済みトークンも出力されます。名前と変数はカテゴリとトークン名の順に並びます。

tokens.easings は明示的な ease-* ユーティリティで使う名前付きの値を指定します。トランジション系ユーティリティのプロジェクト共通のタイミングは、別の wind.defaultTransitionTimingFunction で設定します。デフォルトは ease で、トークン名ではなく CSS のタイミング関数を指定します。同じバリアント区画では、明示的な ease-* ユーティリティがこのデフォルトを上書きします。

文字サイズ

各文字サイズトークンは、必須の size と任意の lineHeight を持つオブジェクトで設定します。

fontSizes: {
  sm: { size: "0.875rem", lineHeight: "1.25rem" },
  caption: { size: "0.75rem" }
}

これにより --zw-font-size-sm、--zw-font-size-sm-leading、--zw-font-size-caption が出力されます。text-sm ユーティリティは font-size と line-height を出力します。caption トークンには lineHeight がないため、text-caption は font-size だけを出力します。

名前と参照のルール

名前には小文字の ASCII 英字と数字を使い、英数字のまとまりの間を単一のハイフンで区切ります。先頭と末尾は英数字でなければなりません。数字を含む構成要素も使えるため、neutral-50 と 2xl は有効です。大文字の DEFAULT は拒否されます。許可されるカテゴリでは小文字の default を使ってください。

default は radii と shadows 用に予約され、それぞれ接尾辞のない rounded と shadow に値を与えます。rounded-default と shadow-default でも明示的に参照できます。色や余白のマップで一般的なフォールバックには使えません。数値接尾辞、固定キーワード、予約済みのユーティリティ群名と衝突するキーは、言語の意味を上書きせずに拒否されます。

一部のユーティリティの基部は参照先の名前空間を共有します。

• サイズのユーティリティでは、spacing と sizes の名前を重複させないでください。

• text-* では、colors と fontSizes の名前を重複させないでください。

• font-* では、fontFamilies と fontWeights の名前を重複させないでください。

たとえば、colors と fontSizes に同じキーを追加すると、結び付け先が曖昧になります。別々の名前を選んで衝突を解消してください。

余白と数値

spacingUnit は単一の非負の CSS ディメンションまたはゼロです。割合、calc()、var() は使えません。単位が未設定ならゼロ以外の数値余白は使えません。ゼロの単位を設定することは有効で、数値の倍数もゼロになります。単位が 0.25rem なら、p-4 は正確にその 4 倍、p-1.5 は 0.375rem になります。小数の乗算には浮動小数点数ではなく十進数字を使い、入力と結果に有効数字 18 桁の制限があります。ゼロと単位定数 px はスケール未設定でも使えます。

spacing の名前付き項目はカスタムプロパティを通じて直接使われます。数値と名前付きの値は別の形式です。サイズの基部は sizes、次に spacing も参照しますが、両マップのトークン名は重複できません。w-1/2 のような CSS の分数は独立したサイズ形式です。そのスラッシュは色の不透明度を意味しません。

ブレークポイントは正の整数のピクセル幅として別途設定します。たとえば sm: ... を使うには、minWidthPx を持つ sm 項目が必要です。幅は名前ではなく数値で比較され、重複する幅は検証エラーになります。

値の検証

各トークン値は、それを使う CSS プロパティのパーサーで検査されます。たとえば colors には色、spacing には padding の長さ、sizes には width、fontSizes には font-size、radii には border-radius の規則を使います。角丸の項目は単一の非負の長さまたは割合でなければなりません。z-index の項目は整数文字列または var() 参照です。たとえば zIndices: { content: "10" } と指定します。zIndices: { content: 10 } のような JSON/TypeScript の数値は、invalid type: integer ..., expected a string という設定エラーで拒否されます。裸の文字列を fontSizes に指定すると、wind.tokens.fontSizes entries are objects; write { size: "<value>" } (optionally with lineHeight) instead of the bare string "<value>" というエラーで拒否されます。ほかの誤った形式は expected an object { size: string, lineHeight?: string } で拒否されます。イージングの項目は単一のタイミング関数またはキーワードでなければなりません。

spacingUnit 以外のカテゴリの値には外部のカスタムプロパティを含められます。var() を参照しているためパーサーがプロパティの型を証明できない場合、結び付けはカテゴリ未検証と記録され、zfb wind explain で確認できます。zfb は変数の型を実行時に検証しません。それでも値全体が構文解析でき、var() 以外の部分がプロパティに合っている必要があります。そのため、同じ綴りのトークンと任意値は同じように受け付けられるか拒否されます。セミコロン、波括弧、!important、URL 関数、inherit や revert などのキーワードは拒否されます。トークン値から予約済みの --zw- 名前空間は参照できません。代わりにプロジェクトのプロパティを参照し、手書きの CSS でそのプロパティを上書きしてください。

出力される変数

設定された値はすべて @layer zw-tokens 内の --zw- 名前空間に公開されます。上の表が正確な対応を示します。fontSizes の値は --zw-font-size- に入り、設定されていれば対になる -leading 変数も出力されます。この対の名前を予約するため、フォントサイズのトークンキー自体を -leading で終わらせることはできません。手書き CSS のテーマ名前空間は消去されません。一方、Tailwind のデフォルト名前空間は提供されません（デフォルトテーマ変数を参照）。トークン値はインライン展開されません。プロジェクトは生成されたカスタムプロパティを手書きの CSS で上書きできます。

関連項目

• 設定

• ユーティリティリファレンス

• ユーティリティの文法

• カスケードとリセット