@cakejp/design-system 0.15.0 → 0.16.0

package/dist/types/index.d.ts

@@ -1,5 +1,6 @@
 import "./index.css";
 export { cn } from "./lib/utils";
+export { FOCUS_RING, FOCUS_RING_WITHIN, FOCUS_RING_INSET } from "./lib/focus-ring";
 export { toast } from "sonner";
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./components/foundations/accordion";
 export { Alert, AlertDescription, AlertTitle } from "./components/foundations/alert";

package/dist/types/lib/focus-ring.d.ts

@@ -0,0 +1,42 @@
+/**
+ * DS 正規のフォーカス可視化（フォーカスリング）。
+ *
+ * 入力系・操作系のコンポーネントは **必ず**このどちらかを適用する。
+ * 意匠は `--Focus-High-Emphasis`（緑）の 3px リング + 同色ボーダーで統一され、
+ * Button / Input / Select / Checkbox / RadioGroup / Switch / Slider /
+ * NumberInput / SearchBar / FileInput すべてが同じ見え方になる。
+ *
+ * ## hover と focus の優先順位
+ * Tailwind v4 の variant 出力順は `focus-within` → `hover` → `focus` →
+ * `focus-visible` の並びで固定されている。つまり
+ *
+ * - `focus-visible:*` は同一プロパティの `hover:*` を**常に上書きする**（後勝ち）
+ * - `focus-within:*` は `hover:*` に**負ける**
+ *
+ * そのため {@link FOCUS_RING_WITHIN} を使う（＝ラッパーが枠を描く）
+ * コンポーネントでは、同じプロパティを触る hover を
+ * `hover:not-focus-within:*` と書いてフォーカス中は hover を抑制すること。
+ * この順序は `__tests__/focus-visible-contract.test.ts` で固定している。
+ */
+/**
+ * 要素自身がフォーカスを受け取るコントロール用（input / button / trigger 等）。
+ *
+ * @example
+ * <input className={cn("border ...", FOCUS_RING)} />
+ */
+export declare const FOCUS_RING = "focus-visible:border-[var(--Focus-High-Emphasis)] focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50";
+/**
+ * ラッパーが枠を描き、内側の要素がフォーカスを受け取る合成コントロール用
+ * （SearchBar の枠、FileInput の label 等）。
+ *
+ * hover で同じプロパティを変える場合は `hover:not-focus-within:*` で書くこと。
+ *
+ * @example
+ * <div className={cn("border hover:not-focus-within:border-x", FOCUS_RING_WITHIN)}>
+ */
+export declare const FOCUS_RING_WITHIN = "focus-within:border-[var(--Focus-High-Emphasis)] focus-within:ring-[3px] focus-within:ring-[var(--Focus-High-Emphasis)]/50";
+/**
+ * `overflow-hidden` なコンテナの内側にある要素用（リングが外にはみ出すと
+ * 切り取られてしまうため内側に描く）。SearchBar の検索ボタン等。
+ */
+export declare const FOCUS_RING_INSET = "focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-[var(--Focus-High-Emphasis)]/50";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cakejp/design-system",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "type": "module",
   "description": "Cake.jp Design System — UI コンポーネント・カラートークン・タイポグラフィ",
   "license": "UNLICENSED",

package/src/components/COMPONENT_LOOKUP.md

@@ -136,7 +136,7 @@
 | OrderSection | `@/components/ec/order-section` | — | 入力済み, 未入力, エラー, 購入確認画面 |
 | OrderSummary | `@/components/ec/order-summary` | — | カート合計, チェックアウト合計, クーポン適用時, 合計のみ |
 | PaymentMethodDisplay, CreditCardIcon | `@/components/ec/payment-method` | — | 登録済み, 未登録, 期限切れ, 対応ブランド一覧, カードブランドアイコン |
-| ProductCard, BookmarkRibbonIcon | `@/components/ec/product-card` | — | ストロベリーショートケーキ 5号（15cm）, お気に入りボタン付き, タグ付き, ランキング, 配送日表示, 規格・仕様キャプション, 横向き, グリッドレイアウト（標準コンテナクエリ）, 割引バッジ, カートボタン付き, ショップ名リンク付き, 最小構成 |
+| ProductCard, BookmarkRibbonIcon | `@/components/ec/product-card` | — | ストロベリーショートケーキ 5号（15cm）, お気に入りボタン付き, タグ付き, ランキング, 配送日表示, 規格・仕様キャプション, 横向き, グリッドレイアウト（標準コンテナクエリ）, 割引バッジ, カートボタン付き, ショップ名リンク付き, 最小構成, 回帰: 列はみ出し / 価格の縦位置揃え (#210) |
 | ProductCarousel | `@/components/ec/product-carousel` | — | Default, WithRanking, LargeCards, WithSectionImage, WithDescription, WithCartButton |
 | ProductCTA | `@/components/ec/product-cta` | — | カートに追加, タイムセール中, 完売, 全バリエーション |
 | ProductDetailBar | `@/components/ec/product-detail-bar` | — | — |

package/src/preset-standalone.css

@@ -480,3 +480,18 @@
   height: max(100%, 2.75rem);
   transform: translate(-50%, -50%);
 }
+
+/* --- Base layer（ルート地色 / #208） ---
+ * Tailwind を使わない consumer でも、html を透明のままにしない。
+ * 透明だとダークモード設定のブラウザでキャンバス既定色（黒）が透け、
+ * ページ全体が真っ黒に見える。preset.css の @layer base と同じ宣言。
+ * 背景を body ではなく html にだけ置く理由も preset.css 側のコメント参照。
+ * @layer に入れているのは、consumer 側の非レイヤー CSS が常に勝つようにするため。 */
+@layer base {
+  html {
+    background-color: var(--background);
+  }
+  body {
+    color: var(--foreground);
+  }
+}

package/src/preset.css

@@ -374,7 +374,21 @@
   * {
     @apply border-border outline-ring/50;
   }
+  /* ルート地色（#208）
+   * html を透明のままにすると、ダークモード設定のブラウザではキャンバス既定色（黒）が
+   * 透けてページ全体が真っ黒になる。面トークンで明示的に確定させる。
+   *
+   * 背景は html にだけ置き、body には置かない。ルート要素に背景があれば
+   * キャンバスへはそこから伝播するので body で塗り直す必要が無く、
+   * ダークの面トークン（--Surface-Primary が半透明の黒）を二重に重ねて
+   * body の高さで濃さが変わる継ぎ目が出るのを避けられる。
+   *
+   * @apply ではなく素の CSS で書くのは、Tailwind を通さない経路
+   * （preset-standalone.css）と同じ宣言を両ファイルで保てるようにするため。 */
+  html {
+    background-color: var(--background);
+  }
   body {
-    @apply bg-background text-foreground;
+    color: var(--foreground);
   }
 }