mikeneko-ui 1.0.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.
@@ -0,0 +1,118 @@
1
+ /* ============================================
2
+ mikeneko UI Theme — Primary: #2b70ef (Blue)
3
+ Font: Inter + Hiragino Sans + Noto Sans JP
4
+ ============================================ */
5
+
6
+ :root {
7
+ /* Surface & Background */
8
+ --background: oklch(0.9846 0.0017 247.84); /* #f9fafb */
9
+ --foreground: oklch(0.2077 0.0398 265.75); /* #0f172a */
10
+
11
+ /* Card */
12
+ --card: oklch(1.0000 0 0);
13
+ --card-foreground: oklch(0.2077 0.0398 265.75);
14
+
15
+ /* Popover */
16
+ --popover: oklch(1.0000 0 0);
17
+ --popover-foreground: oklch(0.2077 0.0398 265.75);
18
+
19
+ /* Primary — #2b70ef */
20
+ --primary: oklch(0.5765 0.2038 261.31);
21
+ --primary-foreground: oklch(1.0000 0 0);
22
+
23
+ /* Secondary */
24
+ --secondary: oklch(0.9693 0.0144 264.50);
25
+ --secondary-foreground: oklch(0.2077 0.0398 265.75);
26
+
27
+ /* Muted */
28
+ --muted: oklch(0.9288 0.0126 255.51);
29
+ --muted-foreground: oklch(0.5544 0.0407 257.42); /* #64748b */
30
+
31
+ /* Accent */
32
+ --accent: oklch(0.9693 0.0144 264.50);
33
+ --accent-foreground: oklch(0.2077 0.0398 265.75);
34
+
35
+ /* Destructive — #ef4444 */
36
+ --destructive: oklch(0.6368 0.2078 25.33);
37
+
38
+ /* Border & Input */
39
+ --border: oklch(0.9288 0.0126 255.51); /* #e2e8f0 */
40
+ --input: oklch(0.8690 0.0198 252.89); /* #cbd5e1 */
41
+ --ring: oklch(0.5765 0.2038 261.31); /* primary */
42
+
43
+ /* Chart */
44
+ --chart-1: oklch(0.5765 0.2038 261.31);
45
+ --chart-2: oklch(0.5960 0.1274 163.23);
46
+ --chart-3: oklch(0.6658 0.1574 58.32);
47
+ --chart-4: oklch(0.6788 0.1687 265.02);
48
+ --chart-5: oklch(0.4996 0.2226 265.02);
49
+
50
+ /* Radius — 12px */
51
+ --radius: 0.75rem;
52
+
53
+ /* Sidebar */
54
+ --sidebar: oklch(1.0000 0 0);
55
+ --sidebar-foreground: oklch(0.4090 0.0382 257.28);
56
+ --sidebar-primary: oklch(0.5765 0.2038 261.31);
57
+ --sidebar-primary-foreground: oklch(1.0000 0 0);
58
+ --sidebar-accent: oklch(0.9693 0.0144 264.50);
59
+ --sidebar-accent-foreground: oklch(0.2077 0.0398 265.75);
60
+ --sidebar-border: oklch(0.9288 0.0126 255.51);
61
+ --sidebar-ring: oklch(0.5765 0.2038 261.31);
62
+ }
63
+
64
+ .dark {
65
+ --background: oklch(0.2077 0.0398 265.75);
66
+ --foreground: oklch(0.9683 0.0069 247.90);
67
+
68
+ --card: oklch(0.2795 0.0368 260.03);
69
+ --card-foreground: oklch(0.9683 0.0069 247.90);
70
+
71
+ --popover: oklch(0.2795 0.0368 260.03);
72
+ --popover-foreground: oklch(0.9683 0.0069 247.90);
73
+
74
+ --primary: oklch(0.5765 0.2038 261.31);
75
+ --primary-foreground: oklch(1.0000 0 0);
76
+
77
+ --secondary: oklch(0.2795 0.0368 260.03);
78
+ --secondary-foreground: oklch(0.9683 0.0069 247.90);
79
+
80
+ --muted: oklch(0.2795 0.0368 260.03);
81
+ --muted-foreground: oklch(0.7107 0.0351 256.79);
82
+
83
+ --accent: oklch(0.2795 0.0368 260.03);
84
+ --accent-foreground: oklch(0.9683 0.0069 247.90);
85
+
86
+ --destructive: oklch(0.6368 0.2078 25.33);
87
+
88
+ --border: oklch(0.3717 0.0392 257.29);
89
+ --input: oklch(0.3717 0.0392 257.29);
90
+ --ring: oklch(0.5765 0.2038 261.31);
91
+
92
+ --chart-1: oklch(0.6788 0.1687 265.02);
93
+ --chart-2: oklch(0.5960 0.1274 163.23);
94
+ --chart-3: oklch(0.6658 0.1574 58.32);
95
+ --chart-4: oklch(0.7801 0.1110 265.26);
96
+ --chart-5: oklch(0.5765 0.2038 261.31);
97
+
98
+ --sidebar: oklch(0.2077 0.0398 265.75);
99
+ --sidebar-foreground: oklch(0.8690 0.0198 252.89);
100
+ --sidebar-primary: oklch(0.6788 0.1687 265.02);
101
+ --sidebar-primary-foreground: oklch(1.0000 0 0);
102
+ --sidebar-accent: oklch(0.2795 0.0368 260.03);
103
+ --sidebar-accent-foreground: oklch(0.9683 0.0069 247.90);
104
+ --sidebar-border: oklch(1 0 0 / 10%);
105
+ --sidebar-ring: oklch(0.5765 0.2038 261.31);
106
+ }
107
+
108
+ @layer base {
109
+ body {
110
+ font-family: "Inter", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
111
+ letter-spacing: 0.02em;
112
+ line-height: 2.0;
113
+ }
114
+ h1, h2, h3, h4, h5, h6 {
115
+ letter-spacing: 0.01em;
116
+ line-height: 1.4;
117
+ }
118
+ }
@@ -0,0 +1,159 @@
1
+ {
2
+ "version": "1.0.0",
3
+ "color": {
4
+ "primary": {
5
+ "50": { "value": "#f0f5ff", "tailwind": "primary-50" },
6
+ "100": { "value": "#dde8ff", "tailwind": "primary-100" },
7
+ "200": { "value": "#c0d4ff", "tailwind": "primary-200" },
8
+ "300": { "value": "#95b6ff", "tailwind": "primary-300" },
9
+ "400": { "value": "#6492ff", "tailwind": "primary-400" },
10
+ "500": { "value": "#2b70ef", "tailwind": "primary-500" },
11
+ "600": { "value": "#2250df", "tailwind": "primary-600" },
12
+ "700": { "value": "#1a40b5", "tailwind": "primary-700" },
13
+ "800": { "value": "#13318d", "tailwind": "primary-800" },
14
+ "900": { "value": "#0e266a", "tailwind": "primary-900" },
15
+ "950": { "value": "#07194e", "tailwind": "primary-950" }
16
+ },
17
+ "body": { "value": "#3d4b5f", "tailwind": "body" },
18
+ "semantic": {
19
+ "light": {
20
+ "bg-page": { "value": "#f9fafb", "tailwind": "bg-gray-50", "cssVar": "--bg-page" },
21
+ "bg-page-alt": { "value": "#f3f4f6", "tailwind": "bg-gray-100", "cssVar": "--bg-page-alt" },
22
+ "bg-surface": { "value": "#ffffff", "tailwind": "bg-white", "cssVar": "--bg-surface" },
23
+ "bg-surface-alt": { "value": "#f9fafb", "tailwind": "bg-gray-50", "cssVar": "--bg-surface-alt" },
24
+ "text-heading": { "value": "#0f172a", "tailwind": "text-slate-900", "cssVar": "--text-heading" },
25
+ "text-default": { "value": "#3d4b5f", "tailwind": "text-body", "cssVar": "--text-default" },
26
+ "text-muted": { "value": "#64748b", "tailwind": "text-slate-500", "cssVar": "--text-muted" },
27
+ "border-default": { "value": "#e2e8f0", "tailwind": "border-slate-200","cssVar": "--border-default" },
28
+ "border-strong": { "value": "#cbd5e1", "tailwind": "border-slate-300","cssVar": "--border-strong" },
29
+ "input-bg": { "value": "#ffffff", "tailwind": "bg-white", "cssVar": "--input-bg" },
30
+ "input-border": { "value": "#cbd5e1", "tailwind": "border-slate-300","cssVar": "--input-border" }
31
+ },
32
+ "dark": {
33
+ "bg-page": { "value": "#0f172a", "tailwind": "bg-slate-900", "cssVar": "--bg-page" },
34
+ "bg-page-alt": { "value": "#1e293b", "tailwind": "bg-slate-800", "cssVar": "--bg-page-alt" },
35
+ "bg-surface": { "value": "#1e293b", "tailwind": "bg-slate-800", "cssVar": "--bg-surface" },
36
+ "bg-surface-alt": { "value": "#0f172a", "tailwind": "bg-slate-900", "cssVar": "--bg-surface-alt" },
37
+ "text-heading": { "value": "#f1f5f9", "tailwind": "text-slate-100", "cssVar": "--text-heading" },
38
+ "text-default": { "value": "#cbd5e1", "tailwind": "text-slate-300", "cssVar": "--text-default" },
39
+ "text-muted": { "value": "#94a3b8", "tailwind": "text-slate-400", "cssVar": "--text-muted" },
40
+ "border-default": { "value": "#334155", "tailwind": "border-slate-700","cssVar": "--border-default" },
41
+ "border-strong": { "value": "#475569", "tailwind": "border-slate-600","cssVar": "--border-strong" },
42
+ "input-bg": { "value": "#0f172a", "tailwind": "bg-slate-900", "cssVar": "--input-bg" },
43
+ "input-border": { "value": "#475569", "tailwind": "border-slate-600","cssVar": "--input-border" }
44
+ }
45
+ },
46
+ "status": {
47
+ "success": {
48
+ "base": { "value": "#059669", "tailwind": "emerald-600" },
49
+ "subtle-light":{ "value": "#ecfdf5", "tailwind": "bg-emerald-50" },
50
+ "text-light": { "value": "#047857", "tailwind": "text-emerald-700" },
51
+ "subtle-dark": { "value": "rgba(5,150,105,0.12)", "tailwind": "bg-emerald-500/[.12]" },
52
+ "text-dark": { "value": "#6ee7b7", "tailwind": "text-emerald-300" }
53
+ },
54
+ "warning": {
55
+ "base": { "value": "#d97706", "tailwind": "amber-600" },
56
+ "subtle-light":{ "value": "#fffbeb", "tailwind": "bg-amber-50" },
57
+ "text-light": { "value": "#b45309", "tailwind": "text-amber-700" },
58
+ "subtle-dark": { "value": "rgba(217,119,6,0.12)", "tailwind": "bg-amber-500/[.12]" },
59
+ "text-dark": { "value": "#fcd34d", "tailwind": "text-amber-300" }
60
+ },
61
+ "danger": {
62
+ "base": { "value": "#ef4444", "tailwind": "red-500" },
63
+ "subtle-light":{ "value": "#fef2f2", "tailwind": "bg-red-50" },
64
+ "text-light": { "value": "#dc2626", "tailwind": "text-red-700" },
65
+ "subtle-dark": { "value": "rgba(239,68,68,0.12)", "tailwind": "bg-red-500/[.12]" },
66
+ "text-dark": { "value": "#fca5a5", "tailwind": "text-red-300" }
67
+ }
68
+ }
69
+ },
70
+ "typography": {
71
+ "fontFamily": {
72
+ "sans": {
73
+ "value": ["Inter", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "sans-serif"],
74
+ "tailwind": "font-sans"
75
+ },
76
+ "mono": {
77
+ "value": ["JetBrains Mono", "SF Mono", "monospace"],
78
+ "tailwind": "font-mono"
79
+ }
80
+ },
81
+ "fontSize": {
82
+ "xs": { "size": "0.8125rem", "px": 13, "lineHeight": "1.4", "tailwind": "text-xs" },
83
+ "sm": { "size": "0.9375rem", "px": 15, "lineHeight": "1.7", "tailwind": "text-sm" },
84
+ "base": { "size": "1.125rem", "px": 18, "lineHeight": "2.0", "tailwind": "text-base" },
85
+ "lg": { "size": "1.25rem", "px": 20, "lineHeight": "1.5", "tailwind": "text-lg" },
86
+ "xl": { "size": "1.375rem", "px": 22, "lineHeight": "1.4", "tailwind": "text-xl" },
87
+ "2xl": { "size": "1.625rem", "px": 26, "lineHeight": "1.4", "tailwind": "text-2xl" },
88
+ "3xl": { "size": "2rem", "px": 32, "lineHeight": "1.4", "tailwind": "text-3xl" }
89
+ },
90
+ "fontWeight": {
91
+ "normal": { "value": 400, "tailwind": "font-normal" },
92
+ "medium": { "value": 500, "tailwind": "font-medium" },
93
+ "semibold": { "value": 600, "tailwind": "font-semibold" },
94
+ "bold": { "value": 700, "tailwind": "font-bold" }
95
+ },
96
+ "letterSpacing": {
97
+ "heading": { "value": "0.01em" },
98
+ "body": { "value": "0.02em" }
99
+ },
100
+ "lineHeight": {
101
+ "heading": { "value": "1.4" },
102
+ "subheading": { "value": "1.5" },
103
+ "small": { "value": "1.7" },
104
+ "body": { "value": "2.0" }
105
+ }
106
+ },
107
+ "spacing": {
108
+ "1": { "value": "4px", "rem": "0.25rem", "tailwind": "1" },
109
+ "2": { "value": "8px", "rem": "0.5rem", "tailwind": "2" },
110
+ "3": { "value": "12px", "rem": "0.75rem", "tailwind": "3" },
111
+ "4": { "value": "16px", "rem": "1rem", "tailwind": "4" },
112
+ "5": { "value": "20px", "rem": "1.25rem", "tailwind": "5" },
113
+ "6": { "value": "24px", "rem": "1.5rem", "tailwind": "6" },
114
+ "8": { "value": "32px", "rem": "2rem", "tailwind": "8" },
115
+ "10": { "value": "40px", "rem": "2.5rem", "tailwind": "10" },
116
+ "12": { "value": "48px", "rem": "3rem", "tailwind": "12" },
117
+ "14": { "value": "56px", "rem": "3.5rem", "tailwind": "14" },
118
+ "16": { "value": "64px", "rem": "4rem", "tailwind": "16" }
119
+ },
120
+ "elevation": {
121
+ "none": { "value": "none", "tailwind": "shadow-none" },
122
+ "sm": { "value": "0 1px 2px rgba(0,0,0,0.05)", "tailwind": "shadow-sm" },
123
+ "md": { "value": "0 4px 6px rgba(0,0,0,0.1)", "tailwind": "shadow-md" },
124
+ "overlay": { "value": "0 20px 25px rgba(0,0,0,0.1)", "tailwind": "shadow-xl" }
125
+ },
126
+ "radius": {
127
+ "sm": { "value": "0.25rem", "px": 4, "tailwind": "rounded" },
128
+ "md": { "value": "0.5rem", "px": 8, "tailwind": "rounded-lg" },
129
+ "lg": { "value": "0.75rem", "px": 12, "tailwind": "rounded-xl" },
130
+ "full": { "value": "9999px", "px": 9999, "tailwind": "rounded-full" }
131
+ },
132
+ "motion": {
133
+ "duration": {
134
+ "fast": { "value": "150ms", "tailwind": "duration-150" },
135
+ "normal": { "value": "200ms", "tailwind": "duration-200" },
136
+ "slow": { "value": "300ms", "tailwind": "duration-300" }
137
+ },
138
+ "easing": {
139
+ "default": { "value": "cubic-bezier(0.4, 0, 0.2, 1)", "tailwind": "ease-in-out" },
140
+ "in": { "value": "cubic-bezier(0.4, 0, 1, 1)", "tailwind": "ease-in" },
141
+ "out": { "value": "cubic-bezier(0, 0, 0.2, 1)", "tailwind": "ease-out" }
142
+ }
143
+ },
144
+ "zIndex": {
145
+ "base": { "value": 0, "tailwind": "z-0" },
146
+ "dropdown": { "value": 20, "tailwind": "z-20" },
147
+ "sticky": { "value": 30, "tailwind": "z-30" },
148
+ "overlay": { "value": 40, "tailwind": "z-40" },
149
+ "modal": { "value": 50, "tailwind": "z-50" }
150
+ },
151
+ "wireframe": {
152
+ "bg": { "value": "#FFFFFF", "cssVar": "--wf-bg", "tailwind": "wf-bg" },
153
+ "surface": { "value": "#F5F5F5", "cssVar": "--wf-surface", "tailwind": "wf-surface" },
154
+ "border": { "value": "#E0E0E0", "cssVar": "--wf-border", "tailwind": "wf-border" },
155
+ "text": { "value": "#333333", "cssVar": "--wf-text", "tailwind": "wf-text" },
156
+ "text-sub": { "value": "#888888", "cssVar": "--wf-text-sub", "tailwind": "wf-text-sub" },
157
+ "accent": { "value": "#666666", "cssVar": "--wf-accent", "tailwind": "wf-accent" }
158
+ }
159
+ }