ksk-design-system 2.6.3 → 2.7.0

package/src/preset.css

@@ -7,6 +7,10 @@
    使い方:
    @import "ksk-design-system/preset";
 
+   中身は preset-core.css（トークン・ブリッジ・base layer 等）と
+   DS 内部ユーティリティの safelist の 2 つ。DS 部品を 1 つも使わない
+   consumer は safelist を除いた `ksk-design-system/preset-core` を使える。
+
    ─── Tailwind CSS v4 の @source 設定（重要） ───────────────────
    Tailwind v4 はデフォルトで node_modules を走査しません。
    コンポーネントの Tailwind クラスを検出するため、CSS ファイルに
@@ -14,237 +18,8 @@
    詳細は CLAUDE.md / README を参照。
    ============================================================= */
 
-@import "./styles/primitive.css";
-/* 角丸の意味別トークン（issue #553）。定義元は styles/radius.css の1箇所で、
-   product-theme.css からも読み込まれる（個別 subpath 構成の消費側対策）。 */
-@import "./styles/radius.css";
-/* ページセクション間の縦リズム（issue #560）。定義元は
-   styles/section-spacing.css の1箇所で、product-theme.css からも読み込まれる
-   （個別 subpath 構成の消費側対策）。 */
-@import "./styles/section-spacing.css";
-/* 重なり順（issue #563）。定義元は styles/z-index.css の1箇所で、
-   product-theme.css からも読み込まれる（個別 subpath 構成の消費側対策）。 */
-@import "./styles/z-index.css";
-/* 影（issue #563）。定義元は styles/shadow.css の1箇所で、
-   product-theme.css からも読み込まれる（個別 subpath 構成の消費側対策）。 */
-@import "./styles/shadow.css";
-@import "./styles/semantic.css";
-@import "./styles/categorical.css";
-@import "./styles/typography.css";
-@import "./styles/glass.css";
-@import "./styles/bottom-nav.css";
-@import "./styles/motion.css";
-@import "./styles/sheet-keyboard.css";
-/* プロダクト単位で上書きしてよい寸法・面の公開変数（issue #364）。
-   許可リストの正本は contracts/product-theme-overrides.json。 */
-@import "./styles/product-theme.css";
+@import "./preset-core.css";
 /* DS 内部ユーティリティの safelist（自動生成 / issue #258）。
-   消費側の @source が無い・パスがずれていても DS のクラス CSS が生成される保険。 */
+   消費側の @source が無い・パスがずれていても DS のクラス CSS が生成される保険。
+   単体では `ksk-design-system/safelist` として読める。 */
 @import "./styles/source-safelist.css";
-
-/* ─── Bridge Layer: shadcn/ui 互換マッピング ───
-
-   命名が 2 系統あるのは意図的な設計。統一しない。
-
-   - `--Surface-Primary` のような **PascalCase-ケバブ** は KSK の semantic 層。
-     UI を書くときに参照するのは常にこちら（CLAUDE.md のセルフチェック参照）。
-   - `--primary` / `--muted-foreground` のような **小文字ケバブ** は shadcn/ui
-     （および Radix ベースの外部コンポーネント）が決め打ちで参照する名前。
-     shadcn の CLI で追加したコンポーネントや、consumer が別途入れた
-     shadcn 資産をそのまま動かすための互換レイヤーであり、名前は
-     shadcn 側の仕様なので KSK 側では変えられない。
-
-   つまり小文字ケバブ側は「外部規約への適合」であって命名の揺れではない。
-   新しいトークンを増やすときは PascalCase 側（semantic.css）に足し、
-   shadcn 互換名が必要な場合だけここで var() でエイリアスすること。 */
-:root {
-  --radius: 0.5rem;
-
-  --background: var(--Surface-Primary);
-  --foreground: var(--Text-High-Emphasis);
-
-  --card: var(--Surface-Primary);
-  --card-foreground: var(--Text-High-Emphasis);
-
-  --popover: var(--Surface-Primary);
-  --popover-foreground: var(--Text-High-Emphasis);
-
-  --primary: var(--Brand-Primary);
-  --primary-foreground: var(--Text-on-Inverse);
-
-  --secondary: var(--Surface-Secondary);
-  --secondary-foreground: var(--Text-High-Emphasis);
-
-  --muted: var(--Surface-Tertiary);
-  --muted-foreground: var(--Text-Low-Emphasis);
-
-  --accent: var(--Surface-Secondary);
-  --accent-foreground: var(--Text-High-Emphasis);
-
-  --destructive: var(--Caution-Base);
-  --destructive-foreground: var(--Text-on-Inverse);
-
-  --border: var(--Border-Medium-Emphasis);
-  --input: var(--Border-Medium-Emphasis);
-  --ring: var(--Focus-High-Emphasis);
-
-  --sidebar-background: var(--Surface-Primary);
-  --sidebar-foreground: var(--Text-High-Emphasis);
-  --sidebar-primary: var(--Brand-Primary);
-  --sidebar-primary-foreground: var(--Text-on-Inverse);
-  --sidebar-accent: var(--Surface-Accent-Primary-Light);
-  --sidebar-accent-foreground: var(--Text-Accent-Primary);
-  --sidebar-border: var(--Border-Low-Emphasis);
-  --sidebar-ring: var(--Focus-High-Emphasis);
-}
-
-.dark {
-  --background: var(--Surface-Primary);
-  --foreground: var(--Text-High-Emphasis);
-  --card: var(--Surface-Secondary);
-  --card-foreground: var(--Text-High-Emphasis);
-  --popover: var(--Surface-Secondary);
-  --popover-foreground: var(--Text-High-Emphasis);
-  --primary: var(--Brand-Primary);
-  --primary-foreground: var(--Text-on-Inverse);
-  --secondary: var(--Surface-Tertiary);
-  --secondary-foreground: var(--Text-High-Emphasis);
-  --muted: var(--Surface-Tertiary);
-  --muted-foreground: var(--Text-Low-Emphasis);
-  --accent: var(--Surface-Tertiary);
-  --accent-foreground: var(--Text-High-Emphasis);
-  --destructive: var(--Caution-Base);
-  --destructive-foreground: var(--Text-on-Inverse);
-  --border: var(--Border-Medium-Emphasis);
-  --input: var(--Border-Medium-Emphasis);
-  --ring: var(--Focus-High-Emphasis);
-}
-
-/* ─── Radius Tokens ───
-   定義はこのファイルから styles/radius.css へ切り出した（issue #553）。
-   ファイル先頭の @import 群で読み込んでいる。 */
-
-/* ─── Section Spacing Tokens ───
-   定義はこのファイルから styles/section-spacing.css へ切り出した（issue #560）。
-   ファイル先頭の @import 群で読み込んでいる。 */
-
-/* ─── Z-Index Scale ───
-   定義はこのファイルから styles/z-index.css へ切り出した（issue #563）。
-   ファイル先頭の @import 群で読み込んでいる。 */
-
-/* ─── Shadow Tokens ───
-   定義はこのファイルから styles/shadow.css へ切り出した（issue #563）。
-   ファイル先頭の @import 群で読み込んでいる。 */
-
-/* ─── Animation ─── */
-@keyframes slide-in-right {
-  from { transform: translateX(100%); opacity: 0; }
-  to   { transform: translateX(0);    opacity: 1; }
-}
-@keyframes slide-in-left {
-  from { transform: translateX(-100%); opacity: 0; }
-  to   { transform: translateX(0);     opacity: 1; }
-}
-@keyframes fade-in {
-  from { opacity: 0; }
-  to   { opacity: 1; }
-}
-@keyframes fade-in-up {
-  from { opacity: 0; transform: translateY(8px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-@keyframes scale-in {
-  from { opacity: 0; transform: scale(0.95); }
-  to   { opacity: 1; transform: scale(1); }
-}
-@keyframes celebration-confetti-fall {
-  from {
-    opacity: 1;
-    transform: translate3d(0, -16px, 0) rotate(0deg);
-  }
-  to {
-    opacity: 0;
-    transform: translate3d(var(--celebration-drift, 0), 110vh, 0) rotate(var(--celebration-rotate, 360deg));
-  }
-}
-@keyframes celebration-confetti-burst {
-  0% {
-    opacity: 1;
-    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.7);
-  }
-  60% {
-    opacity: 1;
-    transform: translate3d(var(--celebration-burst-mid-x, 0), var(--celebration-burst-mid-y, 0), 0)
-      rotate(calc(var(--celebration-rotate, 360deg) * 0.75)) scale(1);
-  }
-  80% {
-    opacity: 0.9;
-  }
-  100% {
-    opacity: 0;
-    transform: translate3d(var(--celebration-burst-x, 0), var(--celebration-burst-y, 0), 0)
-      rotate(var(--celebration-rotate, 360deg)) scale(1);
-  }
-}
-@keyframes celebration-pop {
-  from { opacity: 0; transform: translateY(8px) scale(0.94); }
-  to   { opacity: 1; transform: translateY(0) scale(1); }
-}
-@keyframes celebration-emoji-pop {
-  0%   { transform: scale(0); }
-  50%  { transform: scale(1.4); }
-  70%  { transform: scale(0.9); }
-  100% { transform: scale(1); }
-}
-
-@theme inline {
-  /* duration / easing は src/styles/motion.css のトークンを参照する
-     （値は従来どおり slide/fade-up=200ms・fade/scale=150ms の ease-out）。 */
-  --animate-slide-in-right: slide-in-right var(--Motion-Duration-Base) var(--Motion-Easing-Standard);
-  --animate-slide-in-left:  slide-in-left var(--Motion-Duration-Base) var(--Motion-Easing-Standard);
-  --animate-fade-in:        fade-in var(--Motion-Duration-Fast) var(--Motion-Easing-Standard);
-  --animate-fade-in-up:     fade-in-up var(--Motion-Duration-Base) var(--Motion-Easing-Standard);
-  --animate-scale-in:       scale-in var(--Motion-Duration-Fast) var(--Motion-Easing-Standard);
-}
-
-/* ─── Container Query Breakpoints ───
-   @sm: / @md: などは viewport の sm: / md: と別スケール。
-   tokens.json の breakpoints.container と同じ値を publish 側にも固定し、
-   Tailwind の既定値変更や consumer 側設定に依存させない。 */
-@theme {
-  --container-sm: 24rem;   /* 384px */
-  --container-md: 28rem;   /* 448px */
-  --container-xl: 36rem;   /* 576px */
-  --container-2xl: 42rem;  /* 672px */
-  --container-3xl: 48rem;  /* 768px */
-  --container-4xl: 56rem;  /* 896px */
-}
-
-/* ─── Scrollbar Hide Utility ─── */
-@utility scrollbar-hide {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-/* ─── Base Layer: ボーダー / アウトライン色のセーフティネット ───
-   Tailwind CSS v4 の破壊的変更で、border / outline の既定色は
-   gray-200 ではなく `currentColor`（＝要素の文字色）になった。
-   そのため `border` `border-b` のように「幅だけで色を指定しない」
-   クラスは、消費側が親に濃い文字色（例: --Text-High-Emphasis = #1C1A1A）
-   を敷くと枠線が黒ずむ。これを防ぐため、shadcn / 多くの DS と同じく
-   全要素のフォールバック色をテーマ追従の --border / --ring に固定する。
-
-   ※ これは「保険」。コンポーネント側は引き続き
-     border-[var(--Border-Low-Emphasis)] のように明示色を指定すること
-     （明示色を持つ要素は utilities レイヤが base を上書きするため不変）。 */
-@layer base {
-  *,
-  ::after,
-  ::before {
-    border-color: var(--border);
-    outline-color: var(--ring);
-  }
-}

package/src/styles/product-theme.css

@@ -61,6 +61,14 @@
 @import "./shadow.css";
 
 :root {
+  /* Settings rows: independent of button dimensions; 44px floor in the component. */
+  --Settings-Row-Min-Height: 3.5rem;
+  --Settings-Row-Gap: 0.75rem;
+  --Settings-Row-Padding-X: 1rem;
+  --Settings-Row-Padding-Y: 0.75rem;
+  /* Pointer-only chip removal. Coarse pointers retain a 44px target. */
+  --Chip-Remove-Width: 2rem;
+
   /* ─── Control: Button 系の内寸 ───
      5段スケール。Button の size バリアント xs / sm / default(=Md) / lg / xl と
      1対1で対応する。既定値は h-6/h-8/h-10/h-12/h-14・px-2/px-3/px-4/px-6/px-8。 */

package/src/styles/source-safelist.css

@@ -75,7 +75,7 @@
 @source inline("[-webkit-tap-highlight-color:transparent]");
 @source inline("[@media(any-pointer:coarse)]:min-w-11");
 @source inline("[@media(hover:hover)]:transition-colors");
-@source inline("[@media(hover:hover)_and_(pointer:fine)]:w-8");
+@source inline("[@media(hover:hover)_and_(pointer:fine)]:w-[max(2rem,var(--Chip-Remove-Width))]");
 @source inline("[scrollbar-width:none]");
 @source inline("absolute");
 @source inline("active:bg-[var(--Active-Destructive-Button)]");
@@ -431,6 +431,7 @@
 @source inline("gap-[var(--Nav-Item-Gap)]");
 @source inline("gap-[var(--Nav-Pill-Gap)]");
 @source inline("gap-[var(--Product-Card-Gap)]");
+@source inline("gap-[var(--Settings-Row-Gap)]");
 @source inline("gap-x-2");
 @source inline("gap-x-4");
 @source inline("gap-y-1");
@@ -670,6 +671,7 @@
 @source inline("min-h-[80px]");
 @source inline("min-h-[inherit]");
 @source inline("min-h-[max(2.75rem,var(--Nav-Item-Min-Height))]");
+@source inline("min-h-[max(2.75rem,var(--Settings-Row-Min-Height))]");
 @source inline("min-h-[var(--Control-Height-Xl)]");
 @source inline("min-h-[var(--Field-Min-Height)]");
 @source inline("min-h-[var(--Nav-Pill-Min-Height)]");
@@ -828,6 +830,7 @@
 @source inline("px-[var(--Field-Padding-X-Md)]");
 @source inline("px-[var(--Field-Padding-X-Sm)]");
 @source inline("px-[var(--Nav-Pill-Padding-X)]");
+@source inline("px-[var(--Settings-Row-Padding-X)]");
 @source inline("py-0.5");
 @source inline("py-1");
 @source inline("py-1.5");
@@ -846,6 +849,7 @@
 @source inline("py-[var(--Field-Padding-Y)]");
 @source inline("py-[var(--Nav-Pill-Padding-Y)]");
 @source inline("py-[var(--Product-Page-Padding-Y)]");
+@source inline("py-[var(--Settings-Row-Padding-Y)]");
 @source inline("py-[var(--Space-Section-2xl)]");
 @source inline("py-[var(--Space-Section-md)]");
 @source inline("py-[var(--Space-Section-xl)]");