@kazamitte/design-token 0.0.0-stage → 0.4.0

package/docs/color-pairings.md

@@ -0,0 +1,220 @@
+# 配色の組み合わせ
+
+primaryを決めたあとに、secondary・base・linkをどこから選ぶかの一覧である。出発点として使い、最終判断はデザインに委ねる。
+
+## 推奨の組み合わせ表
+
+SecondaryとBase (harmonized)は推奨順に並べている。Base (achromatic)とLinkはどの候補を選んでもよく、既定値は列の1番目である。
+
+| Primary | Secondary | Base (harmonized) | Base (achromatic) | Link |
+| --------- | ------------------------------- | ------------------- | ------------------- | ---------------------------- |
+| `red` | indigo, fuchsia, purple, violet | taupe, stone | neutral, zinc, gray | indigo, violet, purple, blue |
+| `orange` | indigo, purple, violet, fuchsia | taupe, stone | neutral, zinc, gray | indigo, violet, purple, blue |
+| `amber` | indigo, violet, purple, blue | stone, taupe, olive | neutral, zinc, gray | indigo, violet, purple, blue |
+| `yellow` | indigo, violet, purple, blue | olive, stone | neutral, zinc, gray | indigo, violet, purple, blue |
+| `lime` | indigo, violet, purple, blue | olive, stone | neutral, gray, zinc | indigo, violet, purple, blue |
+| `green` | indigo, blue, violet, purple | olive, mist | neutral, gray, zinc | indigo, violet, purple, blue |
+| `emerald` | indigo, blue, violet, purple | mist, olive | neutral, gray, zinc | indigo, violet, purple, blue |
+| `teal` | lime, orange, amber, yellow | mist, slate | neutral, gray, zinc | indigo, violet, purple, blue |
+| `cyan` | lime, yellow, amber, orange | mist, slate | neutral, gray, zinc | indigo, violet, purple, blue |
+| `sky` | lime, yellow, amber, orange | slate, mist | neutral, gray, zinc | indigo, violet, purple, blue |
+| `blue` | lime, yellow, amber, orange | slate, mist | neutral, gray, zinc | indigo, violet, purple, blue |
+| `indigo` | lime, yellow, amber, orange | slate, mauve | neutral, zinc, gray | indigo, violet, purple, blue |
+| `violet` | yellow, lime, amber, orange | mauve, slate | neutral, zinc, gray | indigo, violet, purple, blue |
+| `purple` | yellow, amber, lime, orange | mauve, slate | neutral, zinc, gray | indigo, violet, purple, blue |
+| `fuchsia` | amber, yellow, orange, lime | mauve, slate | neutral, zinc, gray | indigo, violet, purple, blue |
+| `pink` | orange, amber, yellow, red | mauve, taupe | neutral, zinc, gray | indigo, violet, purple, blue |
+| `rose` | indigo, fuchsia, purple, violet | taupe, stone | neutral, zinc, gray | indigo, violet, purple, blue |
+
+## Secondary の選び方
+
+Secondaryは、P型・D型の色覚シミュレーション後でもprimaryとできるだけ離れて見える色を選ぶ。
+
+- P型（1型色覚/protan）: 赤系の光に対する感度が低い、または欠けるタイプ
+- D型（2型色覚/deutan）: 緑系の光に対する感度が低い、または欠けるタイプ
+
+primary以外の16色すべてについて、P型・D型に変換した後の色差を、ΔE2000（CIEDE2000）指標を用いて、2色の知覚的な違いを数値化する。0に近いほど似ており、値が大きいほど違って見える。
+
+なお、T型（3型色覚/tritan）は、青系の色に対応するが、まれな色覚特性であるため今回の評価からは除外している。
+
+評価には次の4つの表示条件を使う。
+
+- ライトモードの`bg-solid`（step 700）
+- ダークモードの`bg-solid`（step 350）
+- ライトモードの`fg-subtle`
+- ダークモードの`fg-subtle`
+
+P型・D型それぞれで測るため、合計8条件になる。そのうち最も小さいΔE2000値を、そのprimaryとsecondaryの組み合わせのスコアとする。
+
+つまり、ある条件だけで大きく離れて見える色ではなく、P型・D型やライト・ダークをまたいでも安定して見分けやすい色を優先している。
+
+そのスコアが大きい順に上位4色をSecondary候補とした。
+
+### P型・D型での見え方
+
+赤と緑を見分けにくい色覚（P型・D型）では、このパレットの多くの色が「黄っぽく見える色」と「青っぽく見える色」に大きく分かれる。
+
+- 黄グループ: `rose`, `red`, `orange`, `amber`, `yellow`, `lime`, `green`, `emerald`
+- 青グループ: `cyan`, `sky`, `blue`, `indigo`, `violet`, `purple`, `fuchsia`
+- 境界にある色: `teal`, `pink`
+
+`teal`と`pink`はP型とD型で見え方の方向が異なるため、どちらか一方のグループには固定していない。
+
+同じ側にある色どうしはP型・D型への変換後に色相差が小さくなり、主に明るさや鮮やかさの違いとして知覚されやすい。たとえば`red`と`green`は、通常色覚では大きく異なるが、P型・D型ではどちらも黄寄りに見える。
+
+### 数値での評価
+
+P型・D型の見え方の変換にはMachado et al. (2009) の行列を使う。severityは1.0で、Chromium DevToolsの色覚エミュレーションで使われている行列と同じものである。
+
+変換手順は次のとおり。
+
+```text
+OKLCH
+→ sRGB 8bit
+→ 線形RGB
+→ Machado 2009 行列
+→ CIELAB
+→ ΔE2000
+```
+
+2色の違いはΔE2000で測る。0に近いほど似ており、値が大きいほど離れている。
+
+この評価では、十分な余裕を持たせるため20以上をひとつの目安としている。これはP型・D型における一般的な知覚閾値を意味するものではなく、この配色評価のための基準である。
+
+評価には、実際にsemantic tokenが参照する次の条件を使う。
+
+- ライトモードの`bg-solid`: step 700
+- ダークモードの`bg-solid`: step 350
+- ライトモードの`fg-subtle`: 色ごとにstep 500または600
+- ダークモードの`fg-subtle`: 色ごとにstep 500または600
+
+P型・D型それぞれについて4つの表示条件を測り、8条件のうち最も小さいΔE2000をその組み合わせの値とする。
+
+代表的な結果は次のとおり。
+
+- `teal`と`pink`を除く15色では、表の上位4候補はすべて26以上（`rose`が26〜27、`red`と`emerald`が35前後、ほかは40以上）
+- `teal`では23〜24程度
+- `pink`では最大でも16程度
+- `red` × `green`: 6
+- `orange` × `green`: 7
+- `rose` × `green`: 3
+
+`pink`は、この評価で採用した20の目安を満たすSecondary候補がない。PrimaryとSecondaryを色だけで明確に区別する必要がある用途では注意が必要である。
+
+## Base の選び方
+
+Baseは、primaryに色みを寄せるharmonizedと、色みを抑えるachromaticの2系統から選ぶ。
+
+### harmonized — primaryに寄せた灰色
+
+primaryと色相の近い灰色を選ぶ。画面全体に統一感を持たせながら、地の色としては灰色に近い見た目を保つ。
+
+候補は次の6色である。
+
+- `taupe`
+- `stone`
+- `olive`
+- `mist`
+- `slate`
+- `mauve`
+
+順位にはstep 500のOKLCH hueを使い、primaryとの色相角の差が小さい順に並べる。
+
+候補には常に上位2色を載せる。3番目の色もprimaryとの色相差が40°以内であれば候補に加える。
+
+### achromatic — 色みを抑えた灰色
+
+primaryを灰色の上で目立たせたい場合や、画面内ですでに多くの色を使っている場合に使う。
+
+候補は次の3色で固定する。
+
+- `neutral`
+- `zinc`
+- `gray`
+
+既定値は色みを持たない`neutral`である。
+
+残りの`zinc`と`gray`は、step 500のOKLCH hueがprimaryから近い順に並べる。順位は選択時の参考であり、どちらを使ってもよい。
+
+## Link の選び方
+
+Linkはprimaryとは独立して選ぶ。
+
+`link-fg`と`link-fg-strong`の2トークンを使い、それぞれ選んだ色の`fg-muted`と`fg`を参照する。
+
+表に載せた4色で、参照するstepは次のとおり。
+
+| Mode | `link-fg` | `link-fg-strong` |
+| ----- | --------- | ---------------- |
+| Light | 600 | 700 |
+| Dark | 400 (indigoのみ350) | 300 |
+
+### Link の順位
+
+各色について、P型・D型変換後のリンク色と本文色との差を測る。
+
+評価対象は次の4条件である。
+
+- Lightの`link-fg`
+- Lightの`link-fg-strong`
+- Darkの`link-fg`
+- Darkの`link-fg-strong`
+
+さらにP型・D型の両方を評価し、その中で最も小さいΔE2000をその色の値とする。
+
+青グループの結果は次のとおり。
+
+- `indigo`: 23
+- `violet`: 22
+- `purple`: 20
+- `blue`: 20
+- `sky`: 17
+- `cyan`: 12
+- `teal`: 5
+
+このうち上位4色を候補として表に載せる。
+
+- `indigo`, `violet`, `purple`, `blue`
+
+既定値は`indigo`である。
+
+どの候補でも、最小値はダークモードのhover時に使うstep 300で発生する。
+
+黄グループでは`lime`、`yellow`、`amber`もダークモードで本文との色差を取りやすい。ただし、一般的なリンク色としての慣習を優先し、標準候補には含めていない。ダークモード主体のUIでは選択肢になり得る。
+
+一方、`red`、`rose`、`teal`、`pink`はP型・D型変換後に本文との差が小さくなりやすいため、リンク色としては避ける。特に`teal`はダークモードで無彩色に近づき、本文との差が小さくなる。
+
+### 色以外でもリンクを示す
+
+リンクは下線など、色以外の視覚的な目印を付ける前提とする。
+
+WCAG 2.2 Success Criterion 1.4.1 Use of Colorに従い、色だけでリンクであることを伝えない。
+
+## ステータスカラーとの競合
+
+ステータスカラーは慣例に沿って次の色を使う。
+
+- Error: `red`
+- Warning: `amber`
+- Success: `green`
+- Info: `blue`
+
+PrimaryやSecondaryがこれらと同色または近い色になる場合、ブランド表現と状態表現を色だけでは区別しにくくなる。
+
+特に`red`、`amber`、`green`、`blue`はステータスカラーと直接競合する。`rose`や`orange`などの近似色も、用途によっては同じ意味の色に見えることがある。
+
+### 回避策
+
+1. ステータス色とブランド色を近接して配置しない。
+2. アイコン、形状、ラベルなど色以外の視覚要素を併用する。
+3. 必要に応じてステータスカラーの変数を個別に上書きする。
+4. Warningでは、黄と黒の高コントラストな意匠を使う方法もある。
+
+色だけで状態を伝えず、意味の違いを他の視覚表現でも示すことを基本とする。
+
+## 参考文献
+
+- カラーユニバーサルデザイン機構（CUDO）『カラーユニバーサルデザイン推奨配色セット ガイドブック』ver.4、2018年。[配布ページ](https://jfly.uni-koeln.de/colorset/)
+- Machado, G. M., Oliveira, M. M., Fernandes, L. A. F. (2009). A Physiologically-based Model for Simulation of Color Vision Deficiency. _IEEE TVCG_ 15(6)
+- Chromium, [Simulating color vision deficiencies in the Blink Renderer](https://developer.chrome.com/docs/chromium/cvd)
+- W3C, [WCAG 2.2 Success Criterion 1.4.1 Use of Color](https://www.w3.org/TR/WCAG22/#use-of-color)

package/docs/colorRecommendations.json

@@ -0,0 +1,138 @@
+{
+  "red": {
+    "secondary": ["indigo", "fuchsia", "purple", "violet"],
+    "base": {
+      "harmonized": ["taupe", "stone"],
+      "achromatic": ["neutral", "zinc", "gray"]
+    },
+    "link": ["indigo", "violet", "purple", "blue"]
+  },
+  "orange": {
+    "secondary": ["indigo", "purple", "violet", "fuchsia"],
+    "base": {
+      "harmonized": ["taupe", "stone"],
+      "achromatic": ["neutral", "zinc", "gray"]
+    },
+    "link": ["indigo", "violet", "purple", "blue"]
+  },
+  "amber": {
+    "secondary": ["indigo", "violet", "purple", "blue"],
+    "base": {
+      "harmonized": ["stone", "taupe", "olive"],
+      "achromatic": ["neutral", "zinc", "gray"]
+    },
+    "link": ["indigo", "violet", "purple", "blue"]
+  },
+  "yellow": {
+    "secondary": ["indigo", "violet", "purple", "blue"],
+    "base": {
+      "harmonized": ["olive", "stone"],
+      "achromatic": ["neutral", "zinc", "gray"]
+    },
+    "link": ["indigo", "violet", "purple", "blue"]
+  },
+  "lime": {
+    "secondary": ["indigo", "violet", "purple", "blue"],
+    "base": {
+      "harmonized": ["olive", "stone"],
+      "achromatic": ["neutral", "gray", "zinc"]
+    },
+    "link": ["indigo", "violet", "purple", "blue"]
+  },
+  "green": {
+    "secondary": ["indigo", "blue", "violet", "purple"],
+    "base": {
+      "harmonized": ["olive", "mist"],
+      "achromatic": ["neutral", "gray", "zinc"]
+    },
+    "link": ["indigo", "violet", "purple", "blue"]
+  },
+  "emerald": {
+    "secondary": ["indigo", "blue", "violet", "purple"],
+    "base": {
+      "harmonized": ["mist", "olive"],
+      "achromatic": ["neutral", "gray", "zinc"]
+    },
+    "link": ["indigo", "violet", "purple", "blue"]
+  },
+  "teal": {
+    "secondary": ["lime", "orange", "amber", "yellow"],
+    "base": {
+      "harmonized": ["mist", "slate"],
+      "achromatic": ["neutral", "gray", "zinc"]
+    },
+    "link": ["indigo", "violet", "purple", "blue"]
+  },
+  "cyan": {
+    "secondary": ["lime", "yellow", "amber", "orange"],
+    "base": {
+      "harmonized": ["mist", "slate"],
+      "achromatic": ["neutral", "gray", "zinc"]
+    },
+    "link": ["indigo", "violet", "purple", "blue"]
+  },
+  "sky": {
+    "secondary": ["lime", "yellow", "amber", "orange"],
+    "base": {
+      "harmonized": ["slate", "mist"],
+      "achromatic": ["neutral", "gray", "zinc"]
+    },
+    "link": ["indigo", "violet", "purple", "blue"]
+  },
+  "blue": {
+    "secondary": ["lime", "yellow", "amber", "orange"],
+    "base": {
+      "harmonized": ["slate", "mist"],
+      "achromatic": ["neutral", "gray", "zinc"]
+    },
+    "link": ["indigo", "violet", "purple", "blue"]
+  },
+  "indigo": {
+    "secondary": ["lime", "yellow", "amber", "orange"],
+    "base": {
+      "harmonized": ["slate", "mauve"],
+      "achromatic": ["neutral", "zinc", "gray"]
+    },
+    "link": ["indigo", "violet", "purple", "blue"]
+  },
+  "violet": {
+    "secondary": ["yellow", "lime", "amber", "orange"],
+    "base": {
+      "harmonized": ["mauve", "slate"],
+      "achromatic": ["neutral", "zinc", "gray"]
+    },
+    "link": ["indigo", "violet", "purple", "blue"]
+  },
+  "purple": {
+    "secondary": ["yellow", "amber", "lime", "orange"],
+    "base": {
+      "harmonized": ["mauve", "slate"],
+      "achromatic": ["neutral", "zinc", "gray"]
+    },
+    "link": ["indigo", "violet", "purple", "blue"]
+  },
+  "fuchsia": {
+    "secondary": ["amber", "yellow", "orange", "lime"],
+    "base": {
+      "harmonized": ["mauve", "slate"],
+      "achromatic": ["neutral", "zinc", "gray"]
+    },
+    "link": ["indigo", "violet", "purple", "blue"]
+  },
+  "pink": {
+    "secondary": ["orange", "amber", "yellow", "red"],
+    "base": {
+      "harmonized": ["mauve", "taupe"],
+      "achromatic": ["neutral", "zinc", "gray"]
+    },
+    "link": ["indigo", "violet", "purple", "blue"]
+  },
+  "rose": {
+    "secondary": ["indigo", "fuchsia", "purple", "violet"],
+    "base": {
+      "harmonized": ["taupe", "stone"],
+      "achromatic": ["neutral", "zinc", "gray"]
+    },
+    "link": ["indigo", "violet", "purple", "blue"]
+  }
+}

package/docs/generate-color-theme.md

@@ -0,0 +1,19 @@
+# Color theme generation
+
+`generateColorTheme` is a function that returns CSS as a string, allowing the application to generate its own custom themes. A sample showing how to write the output to a file is provided below.
+
+```js
+import { writeFile } from 'node:fs/promises';
+import { generateColorTheme } from '@kazamitte/design-token';
+
+const css = generateColorTheme({
+  primary: 'teal',
+  secondary: 'violet',
+  base: 'mist',
+  link: 'blue',
+});
+
+await writeFile('src/styles/generated/theme.css', css);
+```
+
+For information on color pairings, please refer to [color-pairings.md](./color-pairings.md). It lists recommended secondary, base, and link colors for each of the 17 primary colors.

package/docs/tailwind-merge.md

@@ -0,0 +1,180 @@
+# Fixing class conflicts with tailwind-merge
+
+- Classes made with the `@utility` directive are invisible to tailwind-merge. By default `text-body-16` and `text-dense-14` do not cancel each other.
+- Semantic names generated from a `@theme` namespace have the same problem. `rounded-surface`, `shadow-raised`, `ease-standard`, `animate-fade-in` and `z-modal` are not on a scale tailwind-merge knows.
+- `conflictingClassGroups` copies what Tailwind's own `text-lg` does: a later `text-*` cancels an earlier `leading-*`.
+
+## Use tailwind-merge's own group names
+
+Every key in `extend.classGroups` **must match an existing group name exactly**. A key that does not match adds a new group instead of extending the old one.
+
+Say you write `'transition-duration'`. Then `duration-instant` and `duration-enter` do cancel each other, but they sit in a different group from Tailwind's `duration-200`, so `duration-200 duration-transition` keeps both classes. The correct key is `'duration'`.
+
+Read the keys of `getDefaultConfig().classGroups` to check a name. These are the ones this package needs.
+
+| Token                        | Group name      |
+| ---------------------------- | --------------- |
+| `text-body-16` and the rest  | `font-size`     |
+| `rounded-surface` and so on  | `rounded`       |
+| `shadow-raised` and so on    | `shadow`        |
+| `duration-enter` and so on   | `duration`      |
+| `ease-standard` and so on    | `ease`          |
+| `animate-fade-in` and so on  | `animate`       |
+| `z-modal` and so on          | `z`             |
+| `primary-bg-solid` and so on | `bg-color`      |
+| `primary-fg` and so on       | `text-color`    |
+| `primary-border-solid` …     | `border-color`  |
+| `primary-focus-ring` …       | `outline-color` |
+
+Two of these are easy to get wrong: the z-index group is `z`, not `z-index`, and the font size group is `font-size`, not `text`.
+
+`animate-*` can also be registered through `extend.theme.animate`, which tailwind-merge reads as a scale. The config below uses `classGroups` for it so that every token is registered the same way. There is no theme key for z-index, so `z` has to go through `classGroups` in any case.
+
+## Color roles need their full class names
+
+A color role utility is named `{role}-{token}`, so its prefix is not Tailwind's `bg-*` or `text-*`. The short form (`{ bg: [...] }`) cannot say that, so the full class names are listed instead.
+
+Without them an override like `tv({ base: 'primary-bg-solid', variants: { disabled: { true: 'base-bg-muted' } } })` does nothing. Both classes stay, and the CSS order decides which one wins.
+
+## Config
+
+```ts
+import { createTV, type VariantProps } from 'tailwind-variants';
+
+const ROLES = [
+  'base',
+  'primary',
+  'secondary',
+  'error',
+  'warning',
+  'success',
+  'info',
+];
+
+const roleClasses = (suffixes: string[]) =>
+  ROLES.flatMap((role) => suffixes.map((suffix) => `${role}-${suffix}`));
+
+export const tv = createTV({
+  twMerge: true,
+  twMergeConfig: {
+    extend: {
+      classGroups: {
+        'font-size': [
+          {
+            text: [
+              'display-64',
+              'display-56',
+              'display-48',
+              'display-44',
+              'highlight-36',
+              'highlight-32',
+              'highlight-28',
+              'highlight-26',
+              'highlight-24',
+              'highlight-22',
+              'body-20',
+              'body-18',
+              'body-16',
+              'dense-18',
+              'dense-16',
+              'dense-14',
+              'dense-18-compact',
+              'dense-16-compact',
+              'dense-14-compact',
+              'oneline-18',
+              'oneline-16',
+              'oneline-14',
+              'mono-18',
+              'mono-16',
+              'mono-14',
+            ],
+          },
+        ],
+        duration: [{ duration: ['instant', 'transition', 'enter'] }],
+        rounded: [
+          { rounded: ['tight', 'control', 'surface', 'overlay', 'pill'] },
+        ],
+        shadow: [
+          {
+            shadow: [
+              'flat',
+              'flat-hover',
+              'raised',
+              'raised-hover',
+              'floating',
+              'floating-hover',
+              'overlay',
+            ],
+          },
+        ],
+        ease: [{ ease: ['standard', 'emphasized'] }],
+        animate: [
+          {
+            animate: [
+              'fade-in',
+              'fade-out',
+              'scale-in',
+              'scale-out',
+              'slide-in-from-top',
+              'slide-in-from-right',
+              'slide-in-from-bottom',
+              'slide-in-from-left',
+              'slide-out-to-top',
+              'slide-out-to-right',
+              'slide-out-to-bottom',
+              'slide-out-to-left',
+            ],
+          },
+        ],
+        z: [
+          {
+            z: [
+              'hide',
+              'base',
+              'docked',
+              'dropdown',
+              'sticky',
+              'banner',
+              'overlay',
+              'modal',
+              'popover',
+              'skip-nav',
+              'toast',
+              'tooltip',
+              'max',
+            ],
+          },
+        ],
+
+        'bg-color': roleClasses([
+          'bg',
+          'bg-subtle',
+          'bg-muted',
+          'bg-selected',
+          'bg-solid',
+        ]),
+        'text-color': [
+          ...roleClasses(['fg-strong', 'fg', 'fg-muted', 'fg-subtle', 'fg-contrast']),
+          'link-fg',
+          'link-fg-strong',
+        ],
+        'border-color': roleClasses([
+          'border-subtle',
+          'border-muted',
+          'border-selected',
+          'border',
+          'border-solid',
+        ]),
+        'outline-color': roleClasses(['focus-ring']),
+      },
+      conflictingClassGroups: {
+        'font-size': ['leading'],
+      },
+    },
+  },
+});
+
+export type { VariantProps };
+```
+
+`example/src/lib/tv.test.ts` checks two things for every group: that the classes in it cancel each other, and that pairs which must **not** cancel both survive — `text-red-500` with `text-body-16`, `shadow-red-500` with `shadow-raised`, `animate-slide-in-from-bottom` with `[--slide-distance:1rem]`.

package/package.json

@@ -1,6 +1,46 @@
 {
   "name": "@kazamitte/design-token",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.4.0",
+  "description": "Tailwind CSS v4 design token — color, typography, and style themes.",
+  "license": "MIT",
+  "author": "kazaminn",
+  "homepage": "https://github.com/kazamitte/design-token#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kazamitte/design-token.git"
+  },
+  "bugs": {
+    "url": "https://github.com/kazamitte/design-token/issues"
+  },
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist",
+    "docs",
+    "tailwind",
+    "THIRD-PARTY-NOTICES.md"
+  ],
+  "types": "./dist/generate-theme.d.mts",
+  "exports": {
+    ".": {
+      "types": "./dist/generate-theme.d.mts",
+      "import": "./dist/generate-theme.mjs"
+    },
+    "./index.css": "./tailwind/index.css",
+    "./base/initialize.css": "./tailwind/base/initialize.css",
+    "./base/color/*.css": "./tailwind/base/color/*.css",
+    "./base/typography/*.css": "./tailwind/base/typography/*.css",
+    "./base/style/*.css": "./tailwind/base/style/*.css",
+    "./theme/color/*.css": "./tailwind/theme/color/*.css",
+    "./theme/style/*.css": "./tailwind/theme/style/*.css",
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "tailwindcss": "^4.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
 }