@lt-three/love3 0.1.0 → 0.1.1

package/dist/native/once/snackbar.d.ts

@@ -1,17 +1,17 @@
 //#region src/native/once/snackbar.d.ts
 export type SnackbarProps = {
-  /** 上端から出す（既定）か下端から出すか。 */
+  /** Whether toasts appear from the top edge (default) or the bottom edge. */
   position?: "top" | "bottom";
-  /** 各トーストの閉じるボタンの読み上げ名（既定は「閉じる」）。 */
+  /** Spoken name of each toast's close button (default "閉じる", i.e. "Close"). */
   closeLabel?: string;
 };
 /**
- * トーストの置き場。アプリのルートに 1 つだけ置く（親は画面いっぱいの View にする。位置はその親の上端・下端）。
- * `@lt-three/web` の once/snackbar（sonner の Toaster）に対応する。
- * ルートには `react-native-safe-area-context` の `SafeAreaProvider` が要る（Expo Router は標準で入れる）。
+ * The home for toasts. Place exactly one at the app root (make the parent a full-screen View; the position is the top or bottom edge of that parent).
+ * Corresponds to the web `once/snackbar` (sonner's Toaster).
+ * The root needs `react-native-safe-area-context`'s `SafeAreaProvider` (Expo Router includes it by default).
  *
- * 表示は `lib/snackbar.ts` の `snackbar()` から行う。**置いていないと出ない**（開発時は `snackbar()` が警告を出す）。
- * エラーは `role="alert"`、ほかは `role="status"`（支援技術が読み上げる）。iOS は live region が無いので、出たとき `announceForAccessibility` で読ませる。
+ * Show toasts with `snackbar()` from `lib/snackbar.ts`. **Nothing appears unless this is mounted** (in development `snackbar()` warns).
+ * Errors use `role="alert"` and everything else `role="status"` (read out by assistive technology). iOS has no live region, so `announceForAccessibility` reads it out when a toast appears.
  */
 export declare function Snackbar({ position, closeLabel }: SnackbarProps): import("react").JSX.Element | null;
 //#endregion

package/dist/native/once/snackbar.js

@@ -16,12 +16,12 @@ const ICON = {
 	warning: "alert-triangle"
 };
 /**
-* トーストの置き場。アプリのルートに 1 つだけ置く（親は画面いっぱいの View にする。位置はその親の上端・下端）。
-* `@lt-three/web` の once/snackbar（sonner の Toaster）に対応する。
-* ルートには `react-native-safe-area-context` の `SafeAreaProvider` が要る（Expo Router は標準で入れる）。
+* The home for toasts. Place exactly one at the app root (make the parent a full-screen View; the position is the top or bottom edge of that parent).
+* Corresponds to the web `once/snackbar` (sonner's Toaster).
+* The root needs `react-native-safe-area-context`'s `SafeAreaProvider` (Expo Router includes it by default).
 *
-* 表示は `lib/snackbar.ts` の `snackbar()` から行う。**置いていないと出ない**（開発時は `snackbar()` が警告を出す）。
-* エラーは `role="alert"`、ほかは `role="status"`（支援技術が読み上げる）。iOS は live region が無いので、出たとき `announceForAccessibility` で読ませる。
+* Show toasts with `snackbar()` from `lib/snackbar.ts`. **Nothing appears unless this is mounted** (in development `snackbar()` warns).
+* Errors use `role="alert"` and everything else `role="status"` (read out by assistive technology). iOS has no live region, so `announceForAccessibility` reads it out when a toast appears.
 */
 function Snackbar({ position = "top", closeLabel = CLOSE_LABEL }) {
 	const items = snackbarStore.use();

package/dist/native/styles.css

@@ -1,14 +1,14 @@
 /*
- * love3 の native 用スタイル（`@lt-three/love3/native/styles.css`）。**Metro（実機）の CSS の入口**。
- * アプリの `global.css` で 1 度だけ import する（NativeWind v5 / react-native-css が Tailwind v4 としてコンパイルする）。
+ * love3's native styles (`@lt-three/love3/native/styles.css`). **The CSS entry point for Metro (real devices)**.
+ * Import it exactly once in the app's `global.css` (NativeWind v5 / react-native-css compiles it as Tailwind v4).
  *
  *   @import "@lt-three/love3/native/styles.css";
  *
- * **`native/web/styles.css` とは別物。** あちらは preview・vitest が react-native-web で描くときの入口
- * （web の Tailwind に乗るので `nativewind/theme` も要らず、ダークは `<html class="dark">`）。実機では使わない。
+ * **Not the same as `native/web/styles.css`.** That one is the entry point used when preview and vitest draw with react-native-web
+ * (it rides on web Tailwind, so `nativewind/theme` is not needed, and dark is `<html class="dark">`). It is not used on real devices.
  *
- * 中身は、Tailwind v4 の本体・NativeWind のテーマ・トークン（`@lt-three/love3/styles.css`）・部品のクラスの検出。
- * トークンの値は `src/tokens/definition.ts`（SSOT）が持つ。ここにはトークンを書かない。
+ * Contents: the Tailwind v4 core, the NativeWind theme, the tokens (`@lt-three/love3/styles.css`), and detection of component classes.
+ * Token values live in `src/tokens/definition.ts` (the single source of truth). No tokens are written here.
  */
 @import "tailwindcss/theme.css" layer(theme);
 @import "tailwindcss/preflight.css" layer(base);
@@ -16,31 +16,31 @@
 
 @import "nativewind/theme";
 
-/* トークン本体（@theme・ライト・ダーク）。生成物なので、値を変えるときは definition.ts を直す */
+/* The token body (@theme, light, dark). It is generated, so to change values, edit definition.ts */
 @import "@lt-three/love3/styles.css";
 
 /*
- * love3 の native の部品が使う Tailwind のクラスを拾う。node_modules（workspace の symlink 越し）は
- * 自動検出の対象外なので、ここで明示する。`@source` のパスは、この CSS ファイルの位置が基準。
- * 公開物（`dist/`）では部品が `*.js` になるので、`tsx` と `js` の両方を拾う（同じファイルを src と dist の両方に置く）。
- * `web/` は react-native-web 用の補助（クラスを持たない）なので除く。
+ * Pick up the Tailwind classes used by love3's native components. node_modules (through the workspace symlink) is
+ * outside automatic detection, so it is listed explicitly here. The `@source` paths are relative to this CSS file's location.
+ * In the published package (`dist/`) components are `*.js`, so both `tsx` and `js` are picked up (the same files exist in both src and dist).
+ * `web/` is a helper for react-native-web (it has no classes), so it is excluded.
  */
 @source "./**/*.{tsx,js}";
 @source not "./**/*.test.tsx";
 @source not "./web/**";
 
 /*
- * native の `dark:` は **クラスではなく OS の配色設定**で解決する。
+ * On native, `dark:` is resolved **by the OS color scheme setting, not by a class**.
  *
- * `@lt-three/love3/styles.css` の既定は `&:is(.dark *)`（web の `<html class="dark">` 前提）。
- * これを native でも使うと、`dark:` を持つ規則の祖先セレクタとして `.dark` が現れるため
- * react-native-css が `.dark` の付いたビューを **container** として扱い、
- * hover/active/focus の追跡ハンドラを載せる。すると**そのビューの子孫にある
- * ScrollView が pan を受け取れなくなり、アプリ全体がスクロール不能になる**
- * （タップは通るので気づきにくい。実機で確認）。
+ * The default of `@lt-three/love3/styles.css` is `&:is(.dark *)` (it assumes web's `<html class="dark">`).
+ * Using that on native too would make `.dark` appear as an ancestor selector of rules that have `dark:`,
+ * so react-native-css would treat a view with `.dark` as a **container**
+ * and attach hover/active/focus tracking handlers. Then **a ScrollView among that view's descendants
+ * can no longer receive pan, and the whole app becomes unscrollable**
+ * (taps still go through, so it is easy to miss; confirmed on a real device).
  *
- * OS の配色は `Appearance.setColorScheme()` で切り替えられる（`ThemeRoot` がやっている）ので、
- * アプリ内のテーマ設定はこれまで通り効く。`.dark` は**変数を配るだけ**のクラスに戻る。
- * `lib/tokens-check.ts`（`tokens.test.ts`）が、container を作るクラスが無いことを守る。
+ * The OS color scheme can be switched with `Appearance.setColorScheme()` (`ThemeRoot` does this), so
+ * the app's in-app theme setting keeps working as before. `.dark` goes back to being a class that **only distributes variables**.
+ * `lib/tokens-check.ts` (`tokens.test.ts`) guards that no class creates a container.
  */
 @custom-variant dark (@media (prefers-color-scheme: dark));

package/dist/shared/analytics.d.ts

@@ -1,70 +1,70 @@
 //#region src/shared/analytics.d.ts
 export type LinePoint = {
-  /** 読み出しに出す見出し（日付など）。 */
+  /** The heading shown in the readout (a date, for example). */
   x: string | number;
   y: number;
   /**
-   * 横位置に使う値（Unix 秒などの連続量）。
+   * The value used for the horizontal position (a continuous quantity such as Unix seconds).
    *
-   * **複数系列を重ねるときは必ず入れる。** 省略すると並び順で等間隔に置くので、
-   * 刻みの違う系列（日次の残高と不定間隔のエクイティ）を重ねたときに
-   * 同じ横位置が別の時刻を指してしまう。
+   * **Always set it when overlaying multiple series.** When omitted, points are spaced evenly by order,
+   * so when series with different intervals (a daily balance and irregularly spaced equity) are overlaid,
+   * the same horizontal position would point to different times.
    */
   t?: number;
 };
-/** 複数系列の折れ線 1 本ぶん。 */
+/** One line of a multi-series line chart. */
 export type LineSeries = {
-  /** React の key と系列の識別子。 */
+  /** The React key and the identifier of the series. */
   key: string;
-  /** 凡例に出す名前。 */
+  /** The name shown in the legend. */
   label: string;
   points: LinePoint[];
-  /** 線の色。CSS の色（`var(--chart-1)` などトークンの参照を推奨）。 */
+  /** The line color. A CSS color (a token reference such as `var(--chart-1)` is recommended). */
   color: string;
-  /** 破線にする（副系列を主系列と見分けるため）。 */
+  /** Draw the line dashed (to tell a secondary series from the primary one). */
   dashed?: boolean;
 };
-/** 折れ線の props のうち、見た目の寸法と読み上げの要約（web と native で共通）。 */
+/** The line chart props for visual dimensions and the spoken summary (shared by web and native). */
 export type ChartCommonProps = {
   height?: number;
   /**
-   * チャートの要約（読み上げ用。例: 「残高は 1 月 1 日の $1,000 から 7 日の $1,210 へ上がった」）。渡すと `role="img"` の
-   * 名前になる。**図形（svg）そのものは名前を持たない**ので、値が読めないユーザー（スクリーンリーダー・キーボード）へは
-   * これで伝える。共有パッケージなので文言は使用側が持つ。
+   * A summary of the chart for screen readers (for example: "The balance rose from $1,000 on January 1 to $1,210 on the 7th"). When passed, it becomes the
+   * name of `role="img"`. **The graphic (svg) itself has no name**, so this is how the values reach users who cannot read them
+   * (screen reader and keyboard users). This is a shared package, so the wording is left to the consumer.
    */
   accessibilityLabel?: string;
 };
-/** 単一系列の折れ線（`LineChart`）。 */
+/** A single-series line chart (`LineChart`). */
 export type LineChartSharedProps = {
   data: LinePoint[];
   color?: string;
 };
-/** 複数系列の折れ線（`MultiLineChart`）。 */
+/** A multi-series line chart (`MultiLineChart`). */
 export type MultiLineChartSharedProps = {
   series: LineSeries[];
-  /** 縦軸の目盛りの整形。通貨記号などは使用側が決める。 */
+  /** Formats the vertical axis ticks. Currency symbols and the like are decided by the consumer. */
   formatValue?: (value: number) => string;
-  /** 全系列が空のときに出す文言。 */
+  /** The text shown when every series is empty. */
   emptyText?: string;
 };
-/** 面付きの単一指標（`MetricCard`）。 */
+/** A single metric on a surface (`MetricCard`). */
 export type MetricCardSharedProps = {
   label: string;
   value: string;
   subValue?: string;
-  /** 増減の符号。正なら state-success・負なら state-error で値を塗る（トークンの色。ダークにも追従する）。 */
+  /** The sign of the change. The value is colored state-success when positive and state-error when negative (token colors; they follow dark mode too). */
   trend?: number;
   className?: string;
 };
-/** 符号で色が変わる数値（`ColoredValue`）。 */
+/** A number whose color changes with its sign (`ColoredValue`). */
 export interface ColoredValueSharedProps<TValue> {
   value: TValue;
   format?: (value: TValue) => string;
   isPositive?: (value: TValue) => boolean;
   isNegative?: (value: TValue) => boolean;
-  /** 増を表すクラス。既定は `text-state-success`（トークン。ダークに追従する）。 */
+  /** The class for an increase. Defaults to `text-state-success` (a token; follows dark mode). */
   positiveColor?: string;
-  /** 減を表すクラス。既定は `text-state-error`。 */
+  /** The class for a decrease. Defaults to `text-state-error`. */
   negativeColor?: string;
   className?: string;
 }

package/dist/shared/button.d.ts

@@ -1,6 +1,6 @@
 //#region src/shared/button.d.ts
 export declare const BUTTON_VARIANTS: readonly ["default", "destructive", "outline", "secondary", "ghost", "link", "plate", "<3"];
-/** `"<3"` は Less Than Three のブランド色（ピンク塗り）。画面に 1 つだけ置く想定の確定操作用 */
+/** `"<3"` is the Less Than Three brand color (pink fill). Meant for a confirming action, placed only once per screen */
 export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
 export declare const BUTTON_SIZES: readonly ["default", "xs", "sm", "lg", "xl", "icon", "icon-xs"];
 export type ButtonSize = (typeof BUTTON_SIZES)[number];

package/dist/shared/form.d.ts

@@ -3,13 +3,13 @@ import React from "react";
 //#region src/shared/form.d.ts
 export declare const fieldContext: React.Context<AnyFieldApi>, formContext: React.Context<import("@tanstack/react-form").AnyFormApi>, useFormContext: () => import("@tanstack/react-form").ReactFormExtendedApi<Record<string, never>, any, any, any, any, any, any, any, any, any, any, any>, useFieldContext: <TData>() => import("@tanstack/react-form").FieldApi<any, string, TData, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>;
 /**
- * フィールドの中なら field を、外なら null を返す（`useFieldContext` は外だと投げる）。
- * 戻り値は null を含む型にしてある。呼び出し側が `?.` を忘れると tsc が落ちる。
+ * Returns the field inside a field and null outside (`useFieldContext` throws outside).
+ * The return type includes null, so tsc fails if a caller forgets `?.`.
  */
 export declare function useOptionalFieldContext(): AnyFieldApi | null;
 /**
- * フィールド型の入力（`form/*`）が共通で受ける props。値は field context（TanStack Form）が持つので、
- * `value` / `onValueChange` は受けない（受けて黙って無視する形にしない）。
+ * The props that every field-type input (`form/*`) accepts. The value is held by the field context (TanStack Form),
+ * so `value` / `onValueChange` are not accepted (rather than accepting them and silently ignoring them).
  */
 export type FieldInputProps = {
   label?: React.ReactNode;
@@ -21,12 +21,12 @@ export type FieldInputProps = {
   disabled?: boolean;
   helpText?: React.ReactNode;
   debounce?: number;
-  /** テスト用の data-testid。実際の input 要素にそのまま付与される。 */
+  /** A data-testid for tests. It is applied as is to the actual input element. */
   "data-testid"?: string;
 };
 /**
- * `FieldInputProps` に、制御モード（`value` / `onValueChange` を渡すと field context を使わない）を足したもの。
- * 制御モードを実装している入力（`form/checkbox` `form/switch`）だけが使う。
+ * `FieldInputProps` plus a controlled mode (passing `value` / `onValueChange` skips the field context).
+ * Used only by inputs that implement the controlled mode (`form/checkbox`, `form/switch`).
  */
 export type BaseInputProps<T> = FieldInputProps & ({
   value: T;

package/dist/shared/form.js

@@ -6,8 +6,8 @@ import { useContext, useState } from "react";
 //#region src/shared/form.ts
 const { fieldContext, formContext, useFormContext, useFieldContext } = createFormHookContexts();
 /**
-* フィールドの中なら field を、外なら null を返す（`useFieldContext` は外だと投げる）。
-* 戻り値は null を含む型にしてある。呼び出し側が `?.` を忘れると tsc が落ちる。
+* Returns the field inside a field and null outside (`useFieldContext` throws outside).
+* The return type includes null, so tsc fails if a caller forgets `?.`.
 */
 function useOptionalFieldContext() {
 	return useContext(fieldContext);

package/dist/tokens/contrast-pairs.d.ts

@@ -1,23 +1,23 @@
 //#region src/tokens/contrast-pairs.d.ts
 export type ContrastKind = "text" | "ui";
-/** 検査する前景 / 背景の組。`text` は本文の 4.5:1、`ui` は大きい文字と UI 部品・図形の 3:1。 */
+/** The foreground / background pairs to check. `text` is 4.5:1 for body text; `ui` is 3:1 for large text and UI components and graphics. */
 export declare const CONTRAST_PAIRS: ReadonlyArray<{
   kind: ContrastKind;
   fg: string;
   bg: string;
 }>;
 /**
- * 基準を満たさないと分かっていて、理由があって許している組。キーは `<モード>:<前景>/<背景>`。
+ * Pairs that are known not to meet the criterion and are allowed for a stated reason. The key is `<mode>:<foreground>/<background>`.
  *
- * **ここに足すときは理由を書く。** 例外の組は「まだ基準を下回っている」ことも検査する
- * （満たすようになったら、例外から外すよう落ちる。一覧が実態から離れないようにする）。
- * 無効（disabled）の `ink-300` は WCAG が対象外にしているので、そもそも組に入れていない。
+ * **Write a reason when adding here.** Exception pairs are also checked to still be below the criterion
+ * (once they meet it, the test fails and asks for them to be removed from the exceptions, so the list does not drift from reality).
+ * A disabled `ink-300` is out of scope in WCAG, so it is not in the pairs at all.
  */
 export declare const KNOWN_CONTRAST_EXCEPTIONS: Readonly<Record<string, string>>;
 /**
- * 淡い塗り（`bg-state-error/5` など、state の色を `alpha` だけ面に混ぜた塗り）の上の、同じ state の文字（12px の本文の 4.5:1）。
- * 半透明の合成値は `CONTRAST_PAIRS`（トークン同士の組）に入らないので、面の色に塗りを合成してから比を計算する（contrast.test.ts）。
- * `usedIn` のファイルが `tintClass` を使っていることもテストが見る（alpha を変えるときは、ここと部品を一緒に直す）。
+ * Text of the same state on a light fill (such as `bg-state-error/5`, a fill that mixes the state color into the surface by `alpha` only), at 4.5:1 for 12px body text.
+ * A translucent composite does not fit in `CONTRAST_PAIRS` (pairs of tokens), so the fill is composited onto the surface color before the ratio is computed (contrast.test.ts).
+ * The test also checks that the files in `usedIn` use `tintClass` (when you change alpha, fix this and the components together).
  */
 export declare const TINTED_STATE_PAIRS: ReadonlyArray<{
   token: string;
@@ -25,6 +25,6 @@ export declare const TINTED_STATE_PAIRS: ReadonlyArray<{
   tintClass: string;
   usedIn: readonly string[];
 }>;
-/** 淡い塗りを置く面（背景の 4 階層と wash）。 */
+/** The surfaces a light fill is placed on (the 4 background levels and wash). */
 export declare const TINT_SURFACES: readonly ["frame", "paper", "raised", "overlay", "wash"];
 //#endregion

package/dist/tokens/contrast-pairs.js

@@ -1,5 +1,5 @@
 //#region src/tokens/contrast-pairs.ts
-/** 検査する前景 / 背景の組。`text` は本文の 4.5:1、`ui` は大きい文字と UI 部品・図形の 3:1。 */
+/** The foreground / background pairs to check. `text` is 4.5:1 for body text; `ui` is 3:1 for large text and UI components and graphics. */
 const CONTRAST_PAIRS = [
 	{
 		kind: "text",
@@ -363,23 +363,23 @@ const CONTRAST_PAIRS = [
 	}
 ];
 /**
-* 基準を満たさないと分かっていて、理由があって許している組。キーは `<モード>:<前景>/<背景>`。
+* Pairs that are known not to meet the criterion and are allowed for a stated reason. The key is `<mode>:<foreground>/<background>`.
 *
-* **ここに足すときは理由を書く。** 例外の組は「まだ基準を下回っている」ことも検査する
-* （満たすようになったら、例外から外すよう落ちる。一覧が実態から離れないようにする）。
-* 無効（disabled）の `ink-300` は WCAG が対象外にしているので、そもそも組に入れていない。
+* **Write a reason when adding here.** Exception pairs are also checked to still be below the criterion
+* (once they meet it, the test fails and asks for them to be removed from the exceptions, so the list does not drift from reality).
+* A disabled `ink-300` is out of scope in WCAG, so it is not in the pairs at all.
 */
 const KNOWN_CONTRAST_EXCEPTIONS = {
-	"light:border/background": "1px の極薄の枠（#e6e7eb）は面の区切りで、情報は文字と余白・面の明るさの差が持つ。カードや区切り線の輪郭は 3:1 に届かない（1.23:1）。Linear 流の「枠は極めて薄く」を意図した値",
+	"light:border/background": "1px の極薄の枠（#e6e7eb）は面の区切りで、情報は文字と余白・面の明るさの差が持つ。カードや区切り線の輪郭は 3:1 に届かない（1.23:1）。「枠は極めて薄く」を意図した値",
 	"dark:border/background": "同上（ダークは 1.24:1）",
 	"light:input/background": "**テキスト入力（Input・Textarea・Select のトリガー）の枠だけ**の例外。枠（line-strong #d5d7dd）は 3:1 に届かない（1.4:1）が、入力欄はラベル・プレースホルダ・フォーカス時のインディゴの枠（4.7:1）でも識別できる。Checkbox・Radio・Switch の枠は、文字を持たず形だけで識別されるので例外にせず line-control（3:1 以上）にした",
 	"dark:input/background": "同上（ダークは 1.54:1）",
 	"light:lt-three/paper": "ブランドのピンク（#ff5c76）は塗りとして使い、必ず黒文字を載せる（7.04:1）。紙の上の単独の図形としては 2.98:1 で 3:1 にわずかに届かない"
 };
 /**
-* 淡い塗り（`bg-state-error/5` など、state の色を `alpha` だけ面に混ぜた塗り）の上の、同じ state の文字（12px の本文の 4.5:1）。
-* 半透明の合成値は `CONTRAST_PAIRS`（トークン同士の組）に入らないので、面の色に塗りを合成してから比を計算する（contrast.test.ts）。
-* `usedIn` のファイルが `tintClass` を使っていることもテストが見る（alpha を変えるときは、ここと部品を一緒に直す）。
+* Text of the same state on a light fill (such as `bg-state-error/5`, a fill that mixes the state color into the surface by `alpha` only), at 4.5:1 for 12px body text.
+* A translucent composite does not fit in `CONTRAST_PAIRS` (pairs of tokens), so the fill is composited onto the surface color before the ratio is computed (contrast.test.ts).
+* The test also checks that the files in `usedIn` use `tintClass` (when you change alpha, fix this and the components together).
 */
 const TINTED_STATE_PAIRS = [{
 	token: "state-error",
@@ -391,7 +391,7 @@ const TINTED_STATE_PAIRS = [{
 		"../native/atom/badge.tsx"
 	]
 }];
-/** 淡い塗りを置く面（背景の 4 階層と wash）。 */
+/** The surfaces a light fill is placed on (the 4 background levels and wash). */
 const TINT_SURFACES = [
 	"frame",
 	"paper",

package/dist/tokens/index.d.ts

@@ -1,6 +1,6 @@
 import { TokenName, TokenValues, tokenNames, tokens } from "./tokens.gen.js";
 //#region src/tokens/index.d.ts
-/** CSS 変数の参照（`var(--ink-500)`）。実値が要るときは `tokens.light[name]` / `tokens.dark[name]`。 */
+/** A CSS variable reference (`var(--ink-500)`). When you need the actual value, use `tokens.light[name]` / `tokens.dark[name]`. */
 export declare function cssVar(name: TokenName): string;
 //#endregion
 export { type TokenName, type TokenValues, tokenNames, tokens };

package/dist/tokens/index.js

@@ -1,7 +1,7 @@
 import { tokenNames, tokens } from "./tokens.gen.js";
 
 //#region src/tokens/index.ts
-/** CSS 変数の参照（`var(--ink-500)`）。実値が要るときは `tokens.light[name]` / `tokens.dark[name]`。 */
+/** A CSS variable reference (`var(--ink-500)`). When you need the actual value, use `tokens.light[name]` / `tokens.dark[name]`. */
 function cssVar(name) {
 	return `var(--${name})`;
 }