Skip to content

Commit 8f473e3

Browse files
irsyadadlirsyadadl
committed
wip
1 parent ffba286 commit 8f473e3

27 files changed

+1552
-1488
lines changed

‎composer.lock‎

Lines changed: 182 additions & 134 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package-lock.json‎

Lines changed: 962 additions & 957 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/css/app.css‎

Lines changed: 139 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -10,95 +10,115 @@
1010
--font-sans: "Figtree", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
1111
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
1212

13-
--color-border: var(--border);
14-
--color-input: var(--input);
13+
--font-sans--font-feature-settings: "cv02", "cv03", "cv04", "cv11";
14+
--font-mono--font-feature-settings: "ss02", "zero";
1515

16-
--color-ring: var(--ring);
16+
--color-shiki-bg: var(--shiki-bg);
17+
--color-shiki-border: var(--input);
1718

18-
--color-bg: var(--bg);
19-
--color-fg: var(--fg);
19+
--color-border: var(--border);
20+
--color-input: var(--input);
2021

21-
--color-primary: var(--primary);
22-
--color-primary-fg: var(--primary-fg);
22+
--color-ring: var(--ring);
2323

24-
--color-secondary: var(--secondary);
25-
--color-secondary-fg: var(--secondary-fg);
24+
--color-bg: var(--bg);
25+
--color-fg: var(--fg);
2626

27-
--color-accent: var(--accent);
28-
--color-accent-fg: var(--accent-fg);
27+
--color-primary: var(--primary);
28+
--color-primary-fg: var(--primary-fg);
2929

30-
--color-success: var(--success);
31-
--color-success-fg: var(--success-fg);
30+
--color-secondary: var(--secondary);
31+
--color-secondary-fg: var(--secondary-fg);
3232

33-
--color-danger: var(--danger);
34-
--color-danger-fg: var(--danger-fg);
33+
--color-accent: var(--accent);
34+
--color-accent-fg: var(--accent-fg);
3535

36-
--color-warning: var(--warning);
37-
--color-warning-fg: var(--warning-fg);
36+
--color-success: var(--success);
37+
--color-success-fg: var(--success-fg);
3838

39-
--color-muted: var(--muted);
40-
--color-muted-fg: var(--muted-fg);
39+
--color-danger: var(--danger);
40+
--color-danger-fg: var(--danger-fg);
4141

42-
--color-overlay: var(--overlay);
43-
--color-overlay-fg: var(--overlay-fg);
42+
--color-warning: var(--warning);
43+
--color-warning-fg: var(--warning-fg);
4444

45-
--color-navbar: var(--navbar);
46-
--color-navbar-fg: var(--navbar-fg);
45+
--color-muted: var(--muted);
46+
--color-muted-fg: var(--muted-fg);
4747

48-
--color-sidebar: var(--sidebar);
49-
--color-sidebar-fg: var(--sidebar-fg);
48+
--color-overlay: var(--overlay);
49+
--color-overlay-fg: var(--overlay-fg);
5050

51-
--color-chart-1: var(--chart-1);
52-
--color-chart-2: var(--chart-2);
53-
--color-chart-3: var(--chart-3);
54-
--color-chart-4: var(--chart-4);
55-
--color-chart-5: var(--chart-5);
51+
--color-navbar: var(--navbar);
52+
--color-navbar-fg: var(--navbar-fg);
53+
54+
--color-sidebar: var(--sidebar);
55+
--color-sidebar-fg: var(--sidebar-fg);
56+
--color-sidebar-primary: var(--sidebar-primary);
57+
--color-sidebar-primary-fg: var(--sidebar-primary-fg);
58+
--color-sidebar-accent: var(--sidebar-accent);
59+
--color-sidebar-accent-fg: var(--sidebar-accent-fg);
60+
--color-sidebar-border: var(--sidebar-border);
61+
--color-sidebar-ring: var(--sidebar-ring);
62+
63+
--color-chart-1: var(--chart-1);
64+
--color-chart-2: var(--chart-2);
65+
--color-chart-3: var(--chart-3);
66+
--color-chart-4: var(--chart-4);
67+
--color-chart-5: var(--chart-5);
5668
}
5769

58-
@layer base {
59-
:root {
60-
--bg: var(--color-white);
61-
--fg: var(--color-zinc-950);
70+
:root {
71+
--shiki-bg: var(--bg);
72+
--shiki-light: var(--shiki-bg);
6273

63-
--primary: var(--color-blue-600);
64-
--primary-fg: var(--color-white);
74+
--bg: oklch(1 0 0);
75+
--fg: oklch(0.141 0.005 285.823);
6576

66-
--secondary: var(--color-zinc-100);
67-
--secondary-fg: var(--color-zinc-950);
77+
--primary: oklch(0.546 0.245 262.881);
78+
--primary-fg: oklch(1 0 0);
6879

69-
--overlay: var(--color-white);
70-
--overlay-fg: var(--color-zinc-950);
80+
--secondary: oklch(0.92 0.004 286.32);
81+
--secondary-fg: oklch(0.141 0.005 285.823);
7182

72-
--accent: var(--color-blue-600);
73-
--accent-fg: var(--color-white);
83+
--overlay: oklch(1 0 0);
84+
--overlay-fg: oklch(0.141 0.005 285.823);
7485

75-
--muted: var(--color-zinc-100);
76-
--muted-fg: var(--color-zinc-600);
86+
--accent: oklch(0.92 0.004 286.32);
87+
--accent-fg: oklch(0.141 0.005 285.823);
7788

78-
--success: var(--color-emerald-600);
79-
--success-fg: var(--color-white);
89+
--muted: oklch(0.967 0.001 286.375);
90+
--muted-fg: oklch(0.552 0.016 285.938);
8091

81-
--warning: var(--color-amber-400);
82-
--warning-fg: var(--color-amber-950);
92+
--success: oklch(0.596 0.145 163.225);
93+
--success-fg: oklch(1 0 0);
8394

84-
--danger: var(--color-red-600);
85-
--danger-fg: var(--color-red-50);
95+
--warning: oklch(0.828 0.189 84.429);
96+
--warning-fg: oklch(0.279 0.077 45.635);
8697

87-
--border: var(--color-zinc-200);
88-
--input: var(--color-zinc-300);
89-
--ring: var(--color-blue-600);
98+
--danger: oklch(0.577 0.245 27.325);
99+
--danger-fg: oklch(0.971 0.013 17.38);
90100

91-
--navbar: var(--color-zinc-50);
92-
--navbar-fg: var(--color-zinc-950);
101+
--border: oklch(0.911 0.006 286.286);
102+
--input: oklch(0.871 0.006 286.286);
103+
--ring: oklch(0.546 0.245 262.881);
93104

94-
--sidebar: var(--color-zinc-50);
95-
--sidebar-fg: var(--color-zinc-950);
105+
--navbar: oklch(0.995 0 0);
106+
--navbar-fg: oklch(0.141 0.005 285.823);
96107

97-
--chart-1: var(--color-blue-600);
98-
--chart-2: var(--color-blue-400);
99-
--chart-3: var(--color-blue-300);
100-
--chart-4: var(--color-blue-200);
101-
--chart-5: var(--color-blue-100);
108+
--sidebar: oklch(0.985 0 0);
109+
--sidebar-fg: oklch(0.141 0.005 285.823);
110+
--sidebar-primary: oklch(0.546 0.245 262.881);
111+
--sidebar-primary-fg: oklch(1 0 0);
112+
--sidebar-accent: oklch(0.92 0.004 286.32);
113+
--sidebar-accent-fg: oklch(0.141 0.005 285.823);
114+
--sidebar-border: oklch(0.901 0.006 286.286);
115+
--sidebar-ring: oklch(0.546 0.245 262.881);
116+
117+
--chart-1: oklch(0.546 0.245 262.881);
118+
--chart-2: oklch(0.707 0.165 254.624);
119+
--chart-3: oklch(0.809 0.105 251.813);
120+
--chart-4: oklch(0.882 0.059 254.128);
121+
--chart-5: oklch(0.932 0.032 255.585);
102122

103123
--radius-lg: 0.5rem;
104124
--radius-xs: calc(var(--radius-lg) * 0.5);
@@ -108,52 +128,77 @@
108128
--radius-2xl: calc(var(--radius-lg) * 1.5);
109129
--radius-3xl: calc(var(--radius-lg) * 2);
110130
--radius-4xl: calc(var(--radius-lg) * 3);
111-
}
131+
}
132+
133+
.dark {
134+
--shiki-bg: #09090b;
135+
--shiki-da--bg: oklch(0.091 0.005 285.823);
112136

113-
.dark {
114-
--bg: var(--color-zinc-950);
115-
--fg: var(--color-zinc-50);
137+
--bg: oklch(0.181 0.005 285.823);
138+
--fg: oklch(0.985 0 0);
116139

117-
--primary: var(--color-blue-600);
118-
--primary-fg: var(--color-white);
140+
--primary: oklch(0.546 0.245 262.881);
141+
--primary-fg: oklch(1 0 0);
119142

120143
--secondary: oklch(0.244 0.006 286.033);
121-
--secondary-fg: var(--color-zinc-50);
144+
--secondary-fg: oklch(0.985 0 0);
122145

123-
--accent: var(--color-blue-600);
124-
--accent-fg: var(--color-white);
146+
--accent: oklch(0.274 0.006 286.033);
147+
--accent-fg: oklch(0.985 0 0);
125148

126-
--muted: var(--color-zinc-900);
127-
--muted-fg: var(--color-zinc-400);
149+
--muted: oklch(0.21 0.006 285.885);
150+
--muted-fg: oklch(0.705 0.015 286.067);
128151

129-
--overlay: oklch(0.17 0.006 285.885);
130-
--overlay-fg: var(--color-zinc-50);
152+
--overlay: oklch(0.180 0.006 285.885);
153+
--overlay-fg: oklch(0.985 0 0);
131154

132-
--success: var(--color-emerald-600);
133-
--success-fg: var(--color-white);
155+
--success: oklch(0.596 0.145 163.225);
156+
--success-fg: oklch(1 0 0);
134157

135-
--warning: var(--color-amber-400);
136-
--warning-fg: var(--color-amber-950);
158+
--warning: oklch(0.828 0.189 84.429);
159+
--warning-fg: oklch(0.279 0.077 45.635);
137160

138-
--danger: var(--color-red-600);
139-
--danger-fg: var(--color-red-50);
161+
--danger: oklch(0.577 0.245 27.325);
162+
--danger-fg: oklch(0.971 0.013 17.38);
140163

141-
--border: oklch(0.27 0.013 285.805);
142-
--input: oklch(0.29 0.013 285.805);
143-
--ring: var(--color-blue-600);
164+
--border: oklch(0.270 0.013 285.805);
165+
--input: oklch(0.320 0.013 285.805);
166+
--ring: oklch(0.546 0.245 262.881);
144167

145-
--navbar: oklch(0.17 0.006 285.885);
146-
--navbar-fg: var(--color-zinc-50);
168+
--navbar: oklch(0.190 0.006 285.885);
169+
--navbar-fg: oklch(0.985 0 0);
147170

148-
--sidebar: oklch(0.16 0.006 285.885);
149-
--sidebar-fg: var(--color-zinc-50);
171+
--sidebar: oklch(0.180 0.006 285.885);
172+
--sidebar-fg: oklch(0.985 0 0);
173+
--sidebar-primary: oklch(0.546 0.245 262.881);
174+
--sidebar-primary-fg: oklch(1 0 0);
175+
--sidebar-accent: oklch(0.274 0.006 286.033);
176+
--sidebar-accent-fg: oklch(0.985 0 0);
177+
--sidebar-border: oklch(0.274 0.006 286.033);
178+
--sidebar-ring: oklch(0.546 0.245 262.881);
150179

151-
--chart-1: var(--color-blue-700);
152-
--chart-2: var(--color-blue-500);
153-
--chart-3: var(--color-blue-400);
154-
--chart-4: var(--color-blue-300);
155-
--chart-5: var(--color-blue-200);
156-
}
180+
--chart-1: oklch(0.488 0.243 264.376);
181+
--chart-2: oklch(0.623 0.214 259.815);
182+
--chart-3: oklch(0.707 0.165 254.624);
183+
--chart-4: oklch(0.809 0.105 251.813);
184+
--chart-5: oklch(0.882 0.059 254.128);
185+
}
186+
187+
@utility touch-hitbox {
188+
position: relative;
189+
&::before {
190+
content: "";
191+
position: absolute;
192+
display: block;
193+
top: 50%;
194+
left: 50%;
195+
transform: translate(-50%, -50%);
196+
width: 100%;
197+
height: 100%;
198+
min-height: 44px;
199+
min-width: 44px;
200+
z-index: 9999;
201+
}
157202
}
158203

159204
@layer base {

‎resources/js/components/ui/avatar.tsx‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@ interface AvatarProps {
55
initials?: string
66
alt?: string
77
className?: string
8-
shape?: "square" | "circle"
9-
size?: "extra-small" | "small" | "medium" | "large" | "extra-large"
8+
isSquare?: boolean
9+
size?: "xs" | "sm" | "md" | "lg" | "xl"
1010
}
1111

1212
const Avatar = ({
1313
src = null,
14-
shape = "circle",
15-
size = "medium",
14+
isSquare = false,
15+
size = "md",
1616
initials,
1717
alt = "",
1818
className,
@@ -24,19 +24,20 @@ const Avatar = ({
2424
{...props}
2525
className={twMerge(
2626
"-outline-offset-1 inline-grid shrink-0 align-middle outline-1 outline-fg/(--ring-opacity) [--avatar-radius:20%] [--ring-opacity:20%] *:col-start-1 *:row-start-1",
27-
size === "extra-small" && "size-5 *:size-5",
28-
size === "small" && "size-6 *:size-6",
29-
size === "medium" && "size-8 *:size-8",
30-
size === "large" && "size-10 *:size-10",
31-
size === "extra-large" && "size-12 *:size-12",
32-
shape === "square" && "rounded-(--avatar-radius) *:rounded-(--avatar-radius)",
33-
shape === "circle" && "rounded-full *:rounded-full",
27+
size === "xs" && "size-5 *:size-5",
28+
size === "sm" && "size-6 *:size-6",
29+
size === "md" && "size-8 *:size-8",
30+
size === "lg" && "size-10 *:size-10",
31+
size === "xl" && "size-12 *:size-12",
32+
isSquare
33+
? "rounded-(--avatar-radius) *:rounded-(--avatar-radius)"
34+
: "rounded-full *:rounded-full",
3435
className,
3536
)}
3637
>
3738
{initials && (
3839
<svg
39-
className="size-full select-none fill-current p-[5%] font-medium text-[48px] uppercase"
40+
className="size-full select-none fill-current p-[5%] font-md text-[48px] uppercase"
4041
viewBox="0 0 100 100"
4142
aria-hidden={alt ? undefined : "true"}
4243
>
@@ -53,7 +54,7 @@ const Avatar = ({
5354
</text>
5455
</svg>
5556
)}
56-
{src && <img className="size-full" src={src} alt={alt} />}
57+
{src && <img className="size-full object-cover object-center" src={src} alt={alt} />}
5758
</span>
5859
)
5960
}

0 commit comments

Comments
 (0)