zfb
GitHub リポジトリ

検索したい単語を入力

いつでも検索バーを開ける

文字色

設定された色の値または検証済みの任意の色から文字色を設定します。

文字の前景色を指定します。背景色や周囲のレイアウトには作用しません。

クラスと CSS の早見表

クラスの例期待される宣言
text-inkcolor: var(--zw-color-ink);
text-[#8b1e3f]/90color: color-mix(in oklab, #8b1e3f 90%, transparent);
例の設定

共通プレビュー設定では spec 1、reset: "none"、strict モード、tokens.spacingUnit: "0.25rem"、ブレークポイントなしを明示しています。名前付きの値は各例で設定し、既定のパレットやテーマは継承しません。wind-demo クラスはデモ用の自作スタイルです。各例では、その CSS とユーティリティの宣言を分けて確認できます。

使い方の例

設定した文字色を使う

text-ink と text-accent は例に明示した色トークンを参照し、/85 はアクセント色だけを調整します。

設定した文字色を使う
HTML
<div class="wind-demo-copy"><p><span class="text-ink">Primary text</span> uses a configured dark ink color.</p><p><span class="text-accent/85">Accent text at 85 percent</span> stays legible on the light page.</p></div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-color-accent: #075985;
    --zw-color-alert: #8b1e3f;
    --zw-color-focus: #0f766e;
    --zw-color-ink: #16324f;
    --zw-color-panel: #edf4f8;
    --zw-color-white: #fff;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-copy {
  max-width: 34rem;
  color: #243447;
  font: 16px / 1.7 system-ui, sans-serif;
}

.wind-demo-copy p {
  margin: 0 0 .6rem;
}
.text-accent\/85 {
  color: color-mix(in oklab, var(--zw-color-accent) 85%, transparent);
}
.text-ink {
  color: var(--zw-color-ink);
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "colors": {
        "ink": "#16324f",
        "accent": "#075985",
        "focus": "#0f766e",
        "alert": "#8b1e3f",
        "panel": "#edf4f8",
        "white": "#ffffff"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-copy": true
    },
    "safelist": {
      "docs-preview": [
        "text-accent/85",
        "text-ink"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-copy { max-width: 34rem; color: #243447; font: 16px/1.7 system-ui, sans-serif; }
.wind-demo-copy p { margin: 0 0 0.6rem; }

個別の色を指定する

角括弧の値は CSS 色として検証され、/90 は対応する色の不透明度修飾子を適用します。

個別の色を指定する
HTML
<p class="wind-demo-copy">A validated custom color: <span class="text-[#8b1e3f]/90">deep berry at 90 percent</span>.</p>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-color-accent: #075985;
    --zw-color-alert: #8b1e3f;
    --zw-color-focus: #0f766e;
    --zw-color-ink: #16324f;
    --zw-color-panel: #edf4f8;
    --zw-color-white: #fff;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-copy {
  max-width: 34rem;
  color: #243447;
  font: 16px / 1.7 system-ui, sans-serif;
}
.text-\[\#8b1e3f\]\/90 {
  color: color-mix(in oklab, #8b1e3f 90%, transparent);
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "colors": {
        "ink": "#16324f",
        "accent": "#075985",
        "focus": "#0f766e",
        "alert": "#8b1e3f",
        "panel": "#edf4f8",
        "white": "#ffffff"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-copy": true
    },
    "safelist": {
      "docs-preview": [
        "text-[#8b1e3f]/90"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-copy { max-width: 34rem; color: #243447; font: 16px/1.7 system-ui, sans-serif; }

任意値と名前付きの値

text-ink のような名前は tokens.colors に設定した値だけを参照します。text-current と text-transparent もキーワードとして使えます。text-[#8b1e3f] のような角括弧の値は CSS 色として検証されます。スラッシュ修飾子には 0〜100 の整数を指定でき、色を Oklab で transparent と混ぜます。text-accent/85 は文字色自体を薄くします。このファミリーに組み込みパレットはありません。

関連ガイド: ユーティリティの文法 · バリアント

カタログの詳細

text

フィールド値
カタログ識別子v1.text.color
クラスパターンtext-<suffix>
文法{"acceptedKinds":["keyword","token","arbitrary"],"arbitraryProperty":"color","allowsFractionSlash":false,"allowsColorOpacity":true}
受け入れる値2
トークンカテゴリcolors
負の値の規則forbidden
競合グループと順位color (22)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティcolor

受け入れる値

種類接尾辞出力される値
keyword"transparent""transparent"
keyword"current""currentColor"

宣言テンプレート

プロパティ値の種類固定値
colorresolvednull

カタログの例

クラスの例期待される宣言
text-[red]/40color: color-mix(in oklab, red 40%, transparent)

Revision History

作成更新