Skip to content

Commit 677b02d

Browse files
productdevbookproductdevbook
committed
feat: update abckit to version 0.0.28 and refactor imports in various components
1 parent 6ca57d8 commit 677b02d

File tree

10 files changed

+174
-55
lines changed

10 files changed

+174
-55
lines changed

‎app/assets/css/tailwind.css‎

Lines changed: 159 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,177 @@
1-
@import "tailwindcss";
2-
@import "tw-animate-css";
1+
@import 'tailwindcss';
2+
@import 'tw-animate-css';
3+
@plugin "@tailwindcss/typography";
4+
@source "../../../node_modules/abckit/dist/runtime/components";
5+
@source "../../../node_modules/abckit/dist/runtime/layouts";
6+
@source "../../../node_modules/abckit/dist/runtime/pages";
37

48
@custom-variant dark (&:where(.dark, .dark *));
59

6-
:root {
7-
--background: oklch(1 0 0);
10+
html {
11+
/* Mobile padding */
12+
--page-padding: 1rem;
13+
--page-padding-top: 1rem;
14+
--safe-area-top: env(safe-area-inset-top, 0px);
15+
--safe-area-bottom: env(safe-area-inset-bottom, 0px);
16+
--safe-area-left: env(safe-area-inset-left, 0px);
17+
--safe-area-right: env(safe-area-inset-right, 0px);
18+
19+
/* Ionic default colors */
20+
--ion-color-primary: #3880ff;
21+
--ion-color-primary-rgb: 56, 128, 255;
22+
--ion-color-primary-contrast: #ffffff;
23+
--ion-color-primary-shade: #3171e0;
24+
--ion-color-primary-tint: #4c8dff;
25+
26+
--ion-color-secondary: #3dc2ff;
27+
--ion-color-secondary-rgb: 61, 194, 255;
28+
--ion-color-secondary-contrast: #ffffff;
29+
--ion-color-secondary-shade: #36abe0;
30+
--ion-color-secondary-tint: #50c8ff;
31+
32+
--ion-color-tertiary: #5260ff;
33+
--ion-color-tertiary-rgb: 82, 96, 255;
34+
--ion-color-tertiary-contrast: #ffffff;
35+
--ion-color-tertiary-shade: #4854e0;
36+
--ion-color-tertiary-tint: #6370ff;
37+
38+
--ion-color-success: #2dd36f;
39+
--ion-color-success-rgb: 45, 211, 111;
40+
--ion-color-success-contrast: #ffffff;
41+
--ion-color-success-shade: #28ba62;
42+
--ion-color-success-tint: #42d77d;
43+
44+
--ion-color-warning: #ffc409;
45+
--ion-color-warning-rgb: 255, 196, 9;
46+
--ion-color-warning-contrast: #000000;
47+
--ion-color-warning-shade: #e0ac08;
48+
--ion-color-warning-tint: #ffca22;
49+
50+
--ion-color-danger: #eb445a;
51+
--ion-color-danger-rgb: 235, 68, 90;
52+
--ion-color-danger-contrast: #ffffff;
53+
--ion-color-danger-shade: #cf3c4f;
54+
--ion-color-danger-tint: #ed576b;
55+
56+
--ion-color-light: #f4f5f8;
57+
--ion-color-light-rgb: 244, 245, 248;
58+
--ion-color-light-contrast: #000000;
59+
--ion-color-light-shade: #d7d8da;
60+
--ion-color-light-tint: #f5f6f9;
61+
62+
--ion-color-medium: #92949c;
63+
--ion-color-medium-rgb: 146, 148, 156;
64+
--ion-color-medium-contrast: #ffffff;
65+
--ion-color-medium-shade: #808289;
66+
--ion-color-medium-tint: #9d9fa6;
67+
68+
--ion-color-dark: #222428;
69+
--ion-color-dark-rgb: 34, 36, 40;
70+
--ion-color-dark-contrast: #ffffff;
71+
--ion-color-dark-shade: #1e2023;
72+
--ion-color-dark-tint: #383a3e;
73+
74+
--radius: 0.5rem;
75+
/* Light theme - Clean e-commerce palette */
76+
/* Background: pure white */
77+
--background: oklch(0.995 0 0);
878
--foreground: oklch(0.145 0 0);
79+
/* Card: white */
980
--card: oklch(1 0 0);
1081
--card-foreground: oklch(0.145 0 0);
1182
--popover: oklch(1 0 0);
1283
--popover-foreground: oklch(0.145 0 0);
13-
--primary: oklch(0.205 0 0);
14-
--primary-foreground: oklch(0.985 0 0);
15-
--secondary: oklch(0.97 0 0);
84+
/* Primary: emerald for CTAs and accents */
85+
--primary: oklch(0.596 0.145 163.225);
86+
--primary-foreground: oklch(0.99 0 0);
87+
/* Secondary: light gray */
88+
--secondary: oklch(0.965 0 0);
1689
--secondary-foreground: oklch(0.205 0 0);
17-
--muted: oklch(0.97 0 0);
90+
/* Muted: soft gray */
91+
--muted: oklch(0.965 0 0);
1892
--muted-foreground: oklch(0.556 0 0);
19-
--accent: oklch(0.97 0 0);
93+
/* Accent: light gray */
94+
--accent: oklch(0.965 0 0);
2095
--accent-foreground: oklch(0.205 0 0);
96+
/* Destructive: red */
2197
--destructive: oklch(0.577 0.245 27.325);
22-
--destructive-foreground: oklch(0.577 0.245 27.325);
98+
--destructive-foreground: oklch(0.99 0 0);
99+
/* Border: light gray */
23100
--border: oklch(0.922 0 0);
24101
--input: oklch(0.922 0 0);
25-
--ring: oklch(0.708 0 0);
26-
--chart-1: oklch(0.646 0.222 41.116);
102+
--ring: oklch(0.596 0.145 163.225);
103+
/* Chart colors */
104+
--chart-1: oklch(0.596 0.145 163.225);
27105
--chart-2: oklch(0.6 0.118 184.704);
28106
--chart-3: oklch(0.398 0.07 227.392);
29107
--chart-4: oklch(0.828 0.189 84.429);
30108
--chart-5: oklch(0.769 0.188 70.08);
31-
--radius: 0.625rem;
109+
/* Sidebar */
32110
--sidebar: oklch(0.985 0 0);
33111
--sidebar-foreground: oklch(0.145 0 0);
34-
--sidebar-primary: oklch(0.205 0 0);
35-
--sidebar-primary-foreground: oklch(0.985 0 0);
36-
--sidebar-accent: oklch(0.97 0 0);
112+
--sidebar-primary: oklch(0.596 0.145 163.225);
113+
--sidebar-primary-foreground: oklch(0.99 0 0);
114+
--sidebar-accent: oklch(0.965 0 0);
37115
--sidebar-accent-foreground: oklch(0.205 0 0);
38116
--sidebar-border: oklch(0.922 0 0);
39-
--sidebar-ring: oklch(0.708 0 0);
117+
--sidebar-ring: oklch(0.596 0.145 163.225);
40118
}
41119

120+
html.dark,
42121
.dark {
122+
/* Dark theme - Clean dark e-commerce */
123+
/* Background: near black */
43124
--background: oklch(0.145 0 0);
44125
--foreground: oklch(0.985 0 0);
45-
--card: oklch(0.145 0 0);
126+
/* Card: slightly lighter than bg */
127+
--card: oklch(0.175 0 0);
46128
--card-foreground: oklch(0.985 0 0);
47-
--popover: oklch(0.145 0 0);
129+
--popover: oklch(0.175 0 0);
48130
--popover-foreground: oklch(0.985 0 0);
49-
--primary: oklch(0.985 0 0);
50-
--primary-foreground: oklch(0.205 0 0);
131+
/* Primary: emerald */
132+
--primary: oklch(0.696 0.17 162.48);
133+
--primary-foreground: oklch(0.145 0 0);
134+
/* Secondary: dark gray */
51135
--secondary: oklch(0.269 0 0);
52136
--secondary-foreground: oklch(0.985 0 0);
137+
/* Muted: dark gray */
53138
--muted: oklch(0.269 0 0);
54139
--muted-foreground: oklch(0.708 0 0);
140+
/* Accent: dark gray */
55141
--accent: oklch(0.269 0 0);
56142
--accent-foreground: oklch(0.985 0 0);
57-
--destructive: oklch(0.396 0.141 25.723);
58-
--destructive-foreground: oklch(0.637 0.237 25.331);
143+
/* Destructive: red */
144+
--destructive: oklch(0.704 0.191 22.216);
145+
--destructive-foreground: oklch(0.985 0 0);
146+
/* Border: dark gray */
59147
--border: oklch(0.269 0 0);
60148
--input: oklch(0.269 0 0);
61-
--ring: oklch(0.439 0 0);
62-
--chart-1: oklch(0.488 0.243 264.376);
63-
--chart-2: oklch(0.696 0.17 162.48);
64-
--chart-3: oklch(0.769 0.188 70.08);
65-
--chart-4: oklch(0.627 0.265 303.9);
66-
--chart-5: oklch(0.645 0.246 16.439);
67-
--sidebar: oklch(0.205 0 0);
149+
--ring: oklch(0.696 0.17 162.48);
150+
/* Chart colors */
151+
--chart-1: oklch(0.696 0.17 162.48);
152+
--chart-2: oklch(0.7 0.14 182.503);
153+
--chart-3: oklch(0.488 0.243 264.376);
154+
--chart-4: oklch(0.828 0.189 84.429);
155+
--chart-5: oklch(0.769 0.188 70.08);
156+
/* Sidebar */
157+
--sidebar: oklch(0.125 0 0);
68158
--sidebar-foreground: oklch(0.985 0 0);
69-
--sidebar-primary: oklch(0.488 0.243 264.376);
70-
--sidebar-primary-foreground: oklch(0.985 0 0);
159+
--sidebar-primary: oklch(0.696 0.17 162.48);
160+
--sidebar-primary-foreground: oklch(0.145 0 0);
71161
--sidebar-accent: oklch(0.269 0 0);
72162
--sidebar-accent-foreground: oklch(0.985 0 0);
73163
--sidebar-border: oklch(0.269 0 0);
74-
--sidebar-ring: oklch(0.439 0 0);
164+
--sidebar-ring: oklch(0.696 0.17 162.48);
75165
}
76166

77167
@theme inline {
168+
--spacing-page: var(--page-padding);
169+
--spacing-page-top: var(--page-padding-top);
170+
--spacing-safe-top: var(--safe-area-top);
171+
--spacing-safe-bottom: var(--safe-area-bottom);
172+
--spacing-safe-left: var(--safe-area-left);
173+
--spacing-safe-right: var(--safe-area-right);
174+
78175
--color-background: var(--background);
79176
--color-foreground: var(--foreground);
80177
--color-card: var(--card);
@@ -113,6 +210,7 @@
113210
--color-sidebar-ring: var(--sidebar-ring);
114211
--animate-accordion-down: accordion-down 0.2s ease-out;
115212
--animate-accordion-up: accordion-up 0.2s ease-out;
213+
--animate-shimmer: shimmer 2s infinite;
116214

117215
@keyframes accordion-down {
118216
from {
@@ -131,34 +229,52 @@
131229
height: 0;
132230
}
133231
}
232+
233+
@keyframes shimmer {
234+
0% {
235+
transform: translateX(-100%);
236+
}
237+
100% {
238+
transform: translateX(100%);
239+
}
240+
}
134241
}
135242

136243
@layer base {
137244
* {
138245
@apply border-border outline-ring/50;
139246
}
247+
html {
248+
background-color: var(--background);
249+
color: var(--foreground);
250+
}
140251
body {
141252
@apply bg-background text-foreground;
142253
}
143254

144255
button:not(:disabled),
145-
[role="button"]:not(:disabled) {
256+
[role='button']:not(:disabled) {
146257
cursor: pointer;
147258
}
148259
a:not([disabled]),
149-
[role="link"]:not([disabled]) {
260+
[role='link']:not([disabled]) {
150261
cursor: pointer;
151262
}
152263
}
153264

265+
@utility required {
266+
&::after {
267+
content: ' *';
268+
@apply text-destructive;
269+
}
270+
}
154271

155-
@utility bg-grid-light {
156-
157-
background-image: url("data:image/svg+xml;utf8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='12' height='12' fill='%23f3f4f6'/><rect x='12' y='12' width='12' height='12' fill='%23f3f4f6'/></svg>");
158-
background-size: 24px 24px;
272+
@utility bg-grid-light {
273+
background-image: url("data:image/svg+xml;utf8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='12' height='12' fill='%23f5f5f5'/><rect x='12' y='12' width='12' height='12' fill='%23f5f5f5'/></svg>");
274+
background-size: 24px 24px;
159275
}
160276

161-
@utility bg-grid-dark {
162-
background-image: url("data:image/svg+xml;utf8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='12' height='12' fill='%23252525'/><rect x='12' y='12' width='12' height='12' fill='%23252525'/></svg>");
163-
background-size: 24px 24px;
164-
}
277+
@utility bg-grid-dark {
278+
background-image: url("data:image/svg+xml;utf8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='12' height='12' fill='%231a1a1a'/><rect x='12' y='12' width='12' height='12' fill='%231a1a1a'/></svg>");
279+
background-size: 24px 24px;
280+
}

‎app/components/forms/CreateAppForm.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { Input } from 'abckit/shadcn/input'
77
import { Textarea } from 'abckit/shadcn/textarea'
88
import { Loader2, Plus } from 'lucide-vue-next'
99
import { useForm } from 'vee-validate'
10-
import * as z from 'zod'
10+
import { z } from 'zod'
1111
1212
// Props
1313
interface Props {

‎app/graphql/notifications/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useMutation, useQuery } from '@pinia/colada'
22

33
// Notification queries
4-
export function useNotifications(appId: Ref<string> | string) {
4+
export function useNotificationApi(appId: Ref<string> | string) {
55
return useQuery({
66
key: () => ['notifications', unref(appId)],
77
query: async () => {

‎app/pages/apps/[id]/notifications.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { Input } from 'abckit/shadcn/input'
66
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from 'abckit/shadcn/select'
77
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'abckit/shadcn/table'
88
import { Calendar, CheckCircle, Loader2, Search, Send, XCircle } from 'lucide-vue-next'
9+
import { useNotificationApi } from '~/graphql/notifications'
910
1011
definePageMeta({
1112
layout: 'default',
@@ -18,7 +19,7 @@ const appId = computed(() => route.params.id as string)
1819
const { data: appData } = useApp(appId)
1920
const app = computed(() => appData.value)
2021
21-
const { data: notificationsData, isLoading: notificationsLoading } = useNotifications(appId)
22+
const { data: notificationsData, isLoading: notificationsLoading } = useNotificationApi(appId)
2223
const notifications = computed(() => notificationsData.value || [])
2324
2425
// Reactive data

‎app/pages/apps/[id]/providers/apns.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { Switch } from 'abckit/shadcn/switch'
99
import { Textarea } from 'abckit/shadcn/textarea'
1010
import { AlertTriangle, ArrowLeft, Check, FileText, Loader2, Save } from 'lucide-vue-next'
1111
import { useForm } from 'vee-validate'
12-
import * as z from 'zod'
12+
import { z } from 'zod'
1313
1414
definePageMeta({
1515
layout: 'default',

‎app/pages/apps/[id]/providers/fcm.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { Input } from 'abckit/shadcn/input'
88
import { Textarea } from 'abckit/shadcn/textarea'
99
import { AlertTriangle, ArrowLeft, Check, FileText, Loader2, Save, Upload } from 'lucide-vue-next'
1010
import { useForm } from 'vee-validate'
11-
import * as z from 'zod'
11+
import { z } from 'zod'
1212
1313
definePageMeta({
1414
layout: 'default',

‎app/pages/apps/[id]/providers/webpush.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { Input } from 'abckit/shadcn/input'
88
import { Textarea } from 'abckit/shadcn/textarea'
99
import { AlertTriangle, ArrowLeft, Check, FileText, Key, Loader2, RefreshCw, Save } from 'lucide-vue-next'
1010
import { useForm } from 'vee-validate'
11-
import * as z from 'zod'
11+
import { z } from 'zod'
1212
1313
definePageMeta({
1414
layout: 'default',

0 commit comments

Comments
 (0)