ksk-design-system 2.2.0 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/DESIGN.md +16 -16
  2. package/README.md +20 -3
  3. package/contracts/components.json +1 -1
  4. package/contracts/token-hex-cache.json +28 -28
  5. package/dist/native/ui.js +1 -1
  6. package/dist/{native-DlR32_Lk.js → native-E7YOVABy.js} +227 -227
  7. package/dist/native.js +1 -1
  8. package/dist/types/tokens/native/primitives.d.ts +21 -21
  9. package/dist/types/tokens/native/scales.d.ts +8 -8
  10. package/dist/types/tokens/native/themes.d.ts +198 -198
  11. package/package.json +1 -1
  12. package/src/components/COMPONENT_LOOKUP.md +1 -1
  13. package/src/preset.css +1 -1
  14. package/src/styles/primitive.css +21 -21
  15. package/tokens.json +34 -24
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ksk-design-system",
3
- "version": "2.2.0",
3
+ "version": "2.3.0",
4
4
  "type": "module",
5
5
  "description": "KSK Design System — フリーランス向けマルチテーマ対応デザインシステム",
6
6
  "license": "MIT",
package/src/components/COMPONENT_LOOKUP.md CHANGED
@@ -36,7 +36,7 @@
36
36
  | DateField | `@/components/ui/date-field` | — | Default, WithInitialValue, CustomPlaceholder, Disabled, CustomFormat, WithTriggerLabel |
37
37
  | DatePicker, DateRangePicker | `@/components/ui/date-picker` | — | Default, WithInitialValue, FutureValueOpensSelectedMonth, WithDefaultMonth, Disabled, RangePicker, CalendarOnly, CalendarRange |
38
38
  | DateTimePicker | `@/components/ui/date-time-picker` | — | Default, Empty, Bounded |
39
- | Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger | `@/components/ui/dialog` | — | WithTrigger, WithForm, FocusOptions, TopPositionLongList, Fullscreen, FullscreenSafeAreaOptOut, ReportShop, StackedFooter, OpensAndIsImmediatelyInteractive, ClosesOnEscape, TrapsFocus, StacksAboveNestedSheets, ConfirmDialogStacksAboveSheet, TitleLevelFullscreenDefault, TitleLevelExplicit, TitleLevelCenterDefault, ChildDescriptionIsLinked, NoDescriptionLeavesNoDescribedBy, DescriptionPropIsLinked, ExplicitDescribedByWins, DynamicChildDescriptionIsLinked |
39
+ | Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger | `@/components/ui/dialog` | — | WithTrigger, WithForm, FocusOptions, TopPositionLongList, Fullscreen, FullscreenSafeAreaOptOut, ReportShop, StackedFooter, OpensAndIsImmediatelyInteractive, ClosesOnEscape, TrapsFocus, StacksAboveNestedSheets, ConfirmDialogStacksAboveSheet, TitleLevelFullscreenDefault, TitleLevelExplicit, TitleLevelCenterDefault, ChildDescriptionIsLinked, NoDescriptionLeavesNoDescribedBy, DescriptionPropIsLinked, ExplicitDescribedByWins, DynamicChildDescriptionIsLinked, NestedSelectKeyboard |
40
40
  | DropdownFilter | `@/components/ui/dropdown-filter` | — | Default, ActiveFilter, WithIcons（ビュー切替・アイコン付き）, MultipleFilters |
41
41
  | DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent | `@/components/ui/dropdown-menu` | — | Default, WithCheckbox, WithRadio, WithSubmenu, OpensAndSelectsItem, NavigatesWithKeyboard |
42
42
  | ErrorBoundary | `@/components/ui/error-boundary` | — | — |
package/src/preset.css CHANGED
@@ -113,7 +113,7 @@
113
113
  テーマ非依存（Brand / Light-Dark で変わらない固定値）。
114
114
  面 < モーダル < シート の順に丸くなる階層。 */
115
115
  :root {
116
- --Radius-Surface: 0.5rem; /* 8px — Card / Popover パネル / 面の既定。丸くしたいならここを上げる */
116
+ --Radius-Surface: 0.875rem; /* 14px — Card / Popover パネル / 面の既定。丸くしたいならここを上げる */
117
117
  --Radius-Modal: 1.5rem; /* 24px — 中央モーダル（Dialog / AlertDialog）。ピル/シートの丸い言語に合わせる */
118
118
  --Radius-Sheet: 2rem; /* 32px — 端寄せ Sheet（bottom / float） */
119
119
  }
package/src/styles/primitive.css CHANGED
@@ -23,16 +23,16 @@
23
23
  --Primitive-Brand-900: #1E3A8A;
24
24
 
25
25
  /* ─── Gray ─── */
26
- --Primitive-Gray-50: #F9FAFB;
27
- --Primitive-Gray-100: #F3F4F6;
28
- --Primitive-Gray-200: #E5E7EB;
29
- --Primitive-Gray-300: #D1D5DB;
30
- --Primitive-Gray-400: #9CA3AF;
31
- --Primitive-Gray-500: #6B7280;
32
- --Primitive-Gray-600: #4B5563;
33
- --Primitive-Gray-700: #374151;
34
- --Primitive-Gray-800: #1F2937;
35
- --Primitive-Gray-900: #111827;
26
+ --Primitive-Gray-50: #FAFAFA;
27
+ --Primitive-Gray-100: #F4F4F5;
28
+ --Primitive-Gray-200: #E4E4E7;
29
+ --Primitive-Gray-300: #D4D4D8;
30
+ --Primitive-Gray-400: #A1A1AA;
31
+ --Primitive-Gray-500: #71717A;
32
+ --Primitive-Gray-600: #52525B;
33
+ --Primitive-Gray-700: #3F3F46;
34
+ --Primitive-Gray-800: #27272A;
35
+ --Primitive-Gray-900: #18181B;
36
36
 
37
37
  /* ─── Red（Caution / Destructive） ─── */
38
38
  --Primitive-Red-50: #FEF2F2;
@@ -131,17 +131,17 @@
131
131
  --Primitive-Pink-900: #831843;
132
132
 
133
133
  /* ─── Alpha（透過） ─── */
134
- --Primitive-Gray-Alpha-50: rgba(17, 24, 39, 0.02);
135
- --Primitive-Gray-Alpha-100: rgba(17, 24, 39, 0.04);
136
- --Primitive-Gray-Alpha-200: rgba(17, 24, 39, 0.08);
137
- --Primitive-Gray-Alpha-300: rgba(17, 24, 39, 0.12);
138
- --Primitive-Gray-Alpha-400: rgba(17, 24, 39, 0.16);
139
- --Primitive-Gray-Alpha-500: rgba(17, 24, 39, 0.24);
140
- --Primitive-Gray-Alpha-600: rgba(17, 24, 39, 0.36);
141
- --Primitive-Gray-Alpha-700: rgba(17, 24, 39, 0.48);
142
- --Primitive-Gray-Alpha-800: rgba(17, 24, 39, 0.64);
143
- --Primitive-Gray-Alpha-900: rgba(17, 24, 39, 0.80);
144
- --Primitive-Gray-Alpha-1000: rgba(17, 24, 39, 0.92);
134
+ --Primitive-Gray-Alpha-50: rgba(24, 24, 27, 0.02);
135
+ --Primitive-Gray-Alpha-100: rgba(24, 24, 27, 0.04);
136
+ --Primitive-Gray-Alpha-200: rgba(24, 24, 27, 0.08);
137
+ --Primitive-Gray-Alpha-300: rgba(24, 24, 27, 0.12);
138
+ --Primitive-Gray-Alpha-400: rgba(24, 24, 27, 0.16);
139
+ --Primitive-Gray-Alpha-500: rgba(24, 24, 27, 0.24);
140
+ --Primitive-Gray-Alpha-600: rgba(24, 24, 27, 0.36);
141
+ --Primitive-Gray-Alpha-700: rgba(24, 24, 27, 0.48);
142
+ --Primitive-Gray-Alpha-800: rgba(24, 24, 27, 0.64);
143
+ --Primitive-Gray-Alpha-900: rgba(24, 24, 27, 0.80);
144
+ --Primitive-Gray-Alpha-1000: rgba(24, 24, 27, 0.92);
145
145
 
146
146
  --Primitive-White-Alpha-50: rgba(255, 255, 255, 0.02);
147
147
  --Primitive-White-Alpha-100: rgba(255, 255, 255, 0.04);
package/tokens.json CHANGED
@@ -9,16 +9,16 @@
9
9
  "colors": {
10
10
  "primitive": {
11
11
  "gray": {
12
- "50": "#F9FAFB",
13
- "100": "#F3F4F6",
14
- "200": "#E5E7EB",
15
- "300": "#D1D5DB",
16
- "400": "#9CA3AF",
17
- "500": "#6B7280",
18
- "600": "#4B5563",
19
- "700": "#374151",
20
- "800": "#1F2937",
21
- "900": "#111827"
12
+ "50": "#FAFAFA",
13
+ "100": "#F4F4F5",
14
+ "200": "#E4E4E7",
15
+ "300": "#D4D4D8",
16
+ "400": "#A1A1AA",
17
+ "500": "#71717A",
18
+ "600": "#52525B",
19
+ "700": "#3F3F46",
20
+ "800": "#27272A",
21
+ "900": "#18181B"
22
22
  },
23
23
  "red": {
24
24
  "50": "#FEF2F2",
@@ -117,17 +117,17 @@
117
117
  "900": "#831843"
118
118
  },
119
119
  "gray-alpha": {
120
- "50": "rgba(17, 24, 39, 0.02)",
121
- "100": "rgba(17, 24, 39, 0.04)",
122
- "200": "rgba(17, 24, 39, 0.08)",
123
- "300": "rgba(17, 24, 39, 0.12)",
124
- "400": "rgba(17, 24, 39, 0.16)",
125
- "500": "rgba(17, 24, 39, 0.24)",
126
- "600": "rgba(17, 24, 39, 0.36)",
127
- "700": "rgba(17, 24, 39, 0.48)",
128
- "800": "rgba(17, 24, 39, 0.64)",
129
- "900": "rgba(17, 24, 39, 0.80)",
130
- "1000": "rgba(17, 24, 39, 0.92)"
120
+ "50": "rgba(24, 24, 27, 0.02)",
121
+ "100": "rgba(24, 24, 27, 0.04)",
122
+ "200": "rgba(24, 24, 27, 0.08)",
123
+ "300": "rgba(24, 24, 27, 0.12)",
124
+ "400": "rgba(24, 24, 27, 0.16)",
125
+ "500": "rgba(24, 24, 27, 0.24)",
126
+ "600": "rgba(24, 24, 27, 0.36)",
127
+ "700": "rgba(24, 24, 27, 0.48)",
128
+ "800": "rgba(24, 24, 27, 0.64)",
129
+ "900": "rgba(24, 24, 27, 0.80)",
130
+ "1000": "rgba(24, 24, 27, 0.92)"
131
131
  },
132
132
  "white-alpha": {
133
133
  "50": "rgba(255, 255, 255, 0.02)",
@@ -704,13 +704,23 @@
704
704
  "2xl": "16px",
705
705
  "full": "9999px"
706
706
  },
707
+ "borderRadiusNative": {
708
+ "_doc": "ネイティブ（RN）コンポーネント用の角丸スケール。web の borderRadius は Tailwind クラスの実描画 px を正本化するため値を変えられない。ネイティブは Tailwind に縛られないため、面の丸みを一段強めた値をここで上書きする（#549 関連のダークUI刷新で導入）。キーは borderRadius と同一で、generate-platform-tokens が native scales.borderRadius の生成に優先して使う。",
709
+ "none": "0px",
710
+ "sm": "6px",
711
+ "md": "10px",
712
+ "lg": "14px",
713
+ "xl": "18px",
714
+ "2xl": "22px",
715
+ "full": "9999px"
716
+ },
707
717
  "shadows": {
708
718
  "_doc": "影色はテーマ非依存の neutral（Gray-900 ベース rgba(17,24,39,…)）。Brand を差し替えても影が色被りしないよう青固定を廃止。ダークモードでは黒影が機能しないため別途 .dark 向けの調整（glow 方向）が必要。",
709
719
  "sm": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
710
720
  "md": "0 0 8px rgba(20, 20, 20, 0.08)",
711
- "lg": "0px 12px 32px -4px rgba(17, 24, 39, 0.12), 0px 8px 16px -6px rgba(17, 24, 39, 0.12)",
712
- "dialog": "0px 12px 32px -4px rgba(17, 24, 39, 0.12), 0px 8px 16px -6px rgba(17, 24, 39, 0.12), 0px 1px 4px 1px rgba(0, 0, 0, 0.2)",
713
- "tooltip": "0px 8px 8px -4px rgba(17, 24, 39, 0.08), 0px 4px 6px -4px rgba(17, 24, 39, 0.12)",
721
+ "lg": "0px 12px 32px -4px rgba(24, 24, 27, 0.12), 0px 8px 16px -6px rgba(24, 24, 27, 0.12)",
722
+ "dialog": "0px 12px 32px -4px rgba(24, 24, 27, 0.12), 0px 8px 16px -6px rgba(24, 24, 27, 0.12), 0px 1px 4px 1px rgba(0, 0, 0, 0.2)",
723
+ "tooltip": "0px 8px 8px -4px rgba(24, 24, 27, 0.08), 0px 4px 6px -4px rgba(24, 24, 27, 0.12)",
714
724
  "sticky-inline-start": "8px 0 12px -3px rgba(0, 0, 0, 0.3)",
715
725
  "sticky-inline-end": "-8px 0 12px -3px rgba(0, 0, 0, 0.3)"
716
726
  },