ksk-design-system 2.2.0 → 2.4.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.
- package/DESIGN.md +19 -19
- package/README.md +20 -3
- package/contracts/components.json +1 -1
- package/contracts/token-hex-cache.json +28 -28
- package/dist/native/ui.js +1 -1
- package/dist/{native-DlR32_Lk.js → native-BsJ3ntN3.js} +235 -235
- package/dist/native.js +1 -1
- package/dist/types/tokens/native/primitives.d.ts +21 -21
- package/dist/types/tokens/native/scales.d.ts +16 -16
- package/dist/types/tokens/native/themes.d.ts +198 -198
- package/package.json +1 -1
- package/src/components/COMPONENT_LOOKUP.md +1 -1
- package/src/preset.css +1 -1
- package/src/styles/primitive.css +21 -21
- package/src/styles/typography.css +6 -6
- package/tokens.json +39 -29
package/package.json
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.
|
|
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: #
|
|
27
|
-
--Primitive-Gray-100: #
|
|
28
|
-
--Primitive-Gray-200: #
|
|
29
|
-
--Primitive-Gray-300: #
|
|
30
|
-
--Primitive-Gray-400: #
|
|
31
|
-
--Primitive-Gray-500: #
|
|
32
|
-
--Primitive-Gray-600: #
|
|
33
|
-
--Primitive-Gray-700: #
|
|
34
|
-
--Primitive-Gray-800: #
|
|
35
|
-
--Primitive-Gray-900: #
|
|
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(
|
|
135
|
-
--Primitive-Gray-Alpha-100: rgba(
|
|
136
|
-
--Primitive-Gray-Alpha-200: rgba(
|
|
137
|
-
--Primitive-Gray-Alpha-300: rgba(
|
|
138
|
-
--Primitive-Gray-Alpha-400: rgba(
|
|
139
|
-
--Primitive-Gray-Alpha-500: rgba(
|
|
140
|
-
--Primitive-Gray-Alpha-600: rgba(
|
|
141
|
-
--Primitive-Gray-Alpha-700: rgba(
|
|
142
|
-
--Primitive-Gray-Alpha-800: rgba(
|
|
143
|
-
--Primitive-Gray-Alpha-900: rgba(
|
|
144
|
-
--Primitive-Gray-Alpha-1000: rgba(
|
|
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);
|
|
@@ -66,28 +66,28 @@
|
|
|
66
66
|
/* ─── Body（本文） ─── */
|
|
67
67
|
|
|
68
68
|
@utility typo-body-lg {
|
|
69
|
-
font-size: calc(
|
|
69
|
+
font-size: calc(18px * var(--Product-Type-Scale, 1));
|
|
70
70
|
line-height: 1.75;
|
|
71
71
|
font-weight: 400;
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
@utility typo-body-md {
|
|
75
|
-
font-size: calc(
|
|
75
|
+
font-size: calc(16px * var(--Product-Type-Scale, 1));
|
|
76
76
|
line-height: 1.75;
|
|
77
77
|
font-weight: 400;
|
|
78
78
|
}
|
|
79
79
|
|
|
80
80
|
@utility typo-body-sm {
|
|
81
|
-
font-size: calc(
|
|
81
|
+
font-size: calc(14px * var(--Product-Type-Scale, 1));
|
|
82
82
|
line-height: 1.5;
|
|
83
83
|
font-weight: 400;
|
|
84
84
|
}
|
|
85
85
|
|
|
86
|
-
/* body-xs(
|
|
87
|
-
本文の最小は typo-body-sm(
|
|
86
|
+
/* body-xs(12px) は本文禁止 — 補助ラベル/メタ情報専用。
|
|
87
|
+
本文の最小は typo-body-sm(14px)。12px を本文に使うとモバイル可読性の
|
|
88
88
|
下限（iOS HIG ~11pt / WCAG 観点）を割る。 */
|
|
89
89
|
@utility typo-body-xs {
|
|
90
|
-
font-size: calc(
|
|
90
|
+
font-size: calc(12px * var(--Product-Type-Scale, 1));
|
|
91
91
|
line-height: 1.5;
|
|
92
92
|
font-weight: 400;
|
|
93
93
|
}
|
package/tokens.json
CHANGED
|
@@ -9,16 +9,16 @@
|
|
|
9
9
|
"colors": {
|
|
10
10
|
"primitive": {
|
|
11
11
|
"gray": {
|
|
12
|
-
"50": "#
|
|
13
|
-
"100": "#
|
|
14
|
-
"200": "#
|
|
15
|
-
"300": "#
|
|
16
|
-
"400": "#
|
|
17
|
-
"500": "#
|
|
18
|
-
"600": "#
|
|
19
|
-
"700": "#
|
|
20
|
-
"800": "#
|
|
21
|
-
"900": "#
|
|
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(
|
|
121
|
-
"100": "rgba(
|
|
122
|
-
"200": "rgba(
|
|
123
|
-
"300": "rgba(
|
|
124
|
-
"400": "rgba(
|
|
125
|
-
"500": "rgba(
|
|
126
|
-
"600": "rgba(
|
|
127
|
-
"700": "rgba(
|
|
128
|
-
"800": "rgba(
|
|
129
|
-
"900": "rgba(
|
|
130
|
-
"1000": "rgba(
|
|
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)",
|
|
@@ -520,25 +520,25 @@
|
|
|
520
520
|
},
|
|
521
521
|
"body": {
|
|
522
522
|
"lg": {
|
|
523
|
-
"size": "
|
|
523
|
+
"size": "18px",
|
|
524
524
|
"weight": 400,
|
|
525
525
|
"lineHeight": 1.75
|
|
526
526
|
},
|
|
527
527
|
"md": {
|
|
528
|
-
"size": "
|
|
528
|
+
"size": "16px",
|
|
529
529
|
"weight": 400,
|
|
530
530
|
"lineHeight": 1.75
|
|
531
531
|
},
|
|
532
532
|
"sm": {
|
|
533
|
-
"size": "
|
|
533
|
+
"size": "14px",
|
|
534
534
|
"weight": 400,
|
|
535
535
|
"lineHeight": 1.5
|
|
536
536
|
},
|
|
537
537
|
"xs": {
|
|
538
|
-
"size": "
|
|
538
|
+
"size": "12px",
|
|
539
539
|
"weight": 400,
|
|
540
540
|
"lineHeight": 1.5,
|
|
541
|
-
"restriction": "本文禁止。補助ラベル/メタ情報専用。本文の下限は body.sm(
|
|
541
|
+
"restriction": "本文禁止。補助ラベル/メタ情報専用。本文の下限は body.sm(14px)。"
|
|
542
542
|
}
|
|
543
543
|
},
|
|
544
544
|
"label": {
|
|
@@ -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(
|
|
712
|
-
"dialog": "0px 12px 32px -4px rgba(
|
|
713
|
-
"tooltip": "0px 8px 8px -4px rgba(
|
|
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
|
},
|