Skip to content

Commit 4ddbda6

Browse files
kentcdoddskentcdodds
committed
checkpoint;
1 parent f48ec68 commit 4ddbda6

18 files changed

+818
-821
lines changed

‎app/components/floating-toolbar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
export const floatingToolbarClassName =
2-
'absolute bottom-3 left-3 right-3 flex items-center gap-2 rounded-lg bg-muted/80 p-4 pl-5 shadow-xl shadow-accent backdrop-blur-sm md:gap-4 md:pl-7 justify-end'
2+
'absolute bottom-3 left-3 right-3 flex items-center gap-2 rounded-lg bg-muted/80 p-4 pl-5 shadow-xl shadow-accent backdrop-blur-xs md:gap-4 md:pl-7 justify-end'

‎app/components/ui/button.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import * as React from 'react'
55
import { cn } from '#app/utils/misc.tsx'
66

77
const buttonVariants = cva(
8-
'inline-flex items-center justify-center rounded-md text-sm font-medium outline-none ring-ring ring-offset-2 ring-offset-background transition-colors focus-within:ring-2 focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50',
8+
'inline-flex items-center justify-center rounded-md text-sm font-medium outline-hidden ring-ring ring-offset-2 ring-offset-background transition-colors focus-within:ring-2 focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50',
99
{
1010
variants: {
1111
variant: {

‎app/components/ui/checkbox.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const Checkbox = React.forwardRef<
1717
<CheckboxPrimitive.Root
1818
ref={ref}
1919
className={cn(
20-
'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
20+
'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
2121
className,
2222
)}
2323
{...props}

‎app/components/ui/dropdown-menu.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
2424
<DropdownMenuPrimitive.SubTrigger
2525
ref={ref}
2626
className={cn(
27-
'flex select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
27+
'flex select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent data-[state=open]:bg-accent',
2828
inset && 'pl-8',
2929
className,
3030
)}
@@ -80,7 +80,7 @@ const DropdownMenuItem = React.forwardRef<
8080
<DropdownMenuPrimitive.Item
8181
ref={ref}
8282
className={cn(
83-
'relative flex select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
83+
'relative flex select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
8484
inset && 'pl-8',
8585
className,
8686
)}
@@ -96,7 +96,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
9696
<DropdownMenuPrimitive.CheckboxItem
9797
ref={ref}
9898
className={cn(
99-
'relative flex select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
99+
'relative flex select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
100100
className,
101101
)}
102102
checked={checked}
@@ -129,7 +129,7 @@ const DropdownMenuRadioItem = React.forwardRef<
129129
<DropdownMenuPrimitive.RadioItem
130130
ref={ref}
131131
className={cn(
132-
'relative flex select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
132+
'relative flex select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
133133
className,
134134
)}
135135
{...props}

‎app/components/ui/input-otp.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const InputOTP = React.forwardRef<
1010
<OTPInput
1111
ref={ref}
1212
containerClassName={cn(
13-
'flex items-center gap-2 has-[:disabled]:opacity-50',
13+
'flex items-center gap-2 has-disabled:opacity-50',
1414
containerClassName,
1515
)}
1616
className={cn('disabled:cursor-not-allowed', className)}

‎app/components/ui/input.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
1111
<input
1212
type={type}
1313
className={cn(
14-
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-base file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid md:text-sm md:file:text-sm',
14+
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-base file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid md:text-sm md:file:text-sm',
1515
className,
1616
)}
1717
ref={ref}

‎app/components/ui/textarea.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
1010
return (
1111
<textarea
1212
className={cn(
13-
'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid md:text-sm',
13+
'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid md:text-sm',
1414
className,
1515
)}
1616
ref={ref}

‎app/routes/_marketing+/tailwind-preset.ts‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎app/styles/tailwind.css‎

Lines changed: 166 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,177 @@
1-
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
4-
5-
@layer base {
6-
:root {
7-
/* --font-sans: here if you have one */
8-
/* --font-mono: here if you got it... */
9-
10-
/* prefixed with foreground because it should look good on the background */
11-
--foreground-destructive: 345 82.7% 40.8%;
12-
13-
--background: 0 0% 100%;
14-
--foreground: 222.2 84% 4.9%;
15-
16-
--muted: 210 40% 93%;
17-
--muted-foreground: 215.4 16.3% 30%;
18-
19-
--popover: 0 0% 100%;
20-
--popover-foreground: 222.2 84% 4.9%;
21-
22-
--card: 0 0% 100%;
23-
--card-foreground: 222.2 84% 4.9%;
24-
25-
--border: 214.3 31.8% 91.4%;
26-
--input: 214.3 31.8% 91.4%;
27-
--input-invalid: 0 84.2% 60.2%;
28-
29-
--primary: 222.2 47.4% 11.2%;
30-
--primary-foreground: 210 40% 98%;
31-
32-
--secondary: 210 20% 83%;
33-
--secondary-foreground: 222.2 47.4% 11.2%;
34-
35-
--accent: 210 40% 90%;
36-
--accent-foreground: 222.2 47.4% 11.2%;
37-
38-
--destructive: 0 70% 50%;
39-
--destructive-foreground: 210 40% 98%;
40-
41-
--ring: 215 20.2% 65.1%;
42-
43-
--radius: 0.5rem;
1+
@import 'tailwindcss';
2+
3+
@plugin "tailwindcss-animate";
4+
@plugin "tailwindcss-radix";
5+
6+
@custom-variant dark (&:is(.dark *));
7+
8+
@theme {
9+
--font-sans:
10+
'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
11+
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
12+
13+
--animate-roll-reveal: roll-reveal 0.4s cubic-bezier(0.22, 1.28, 0.54, 0.99);
14+
--animate-slide-left: slide-left 0.3s ease-out;
15+
--animate-slide-top: slide-top 0.3s ease-out;
16+
17+
@keyframes roll-reveal {
18+
from {
19+
opacity: 0;
20+
transform: rotate(12deg) scale(0);
21+
}
22+
to {
23+
opacity: 1;
24+
transform: rotate(0deg) scale(1);
25+
}
4426
}
4527

46-
.dark {
47-
--background: 222.2 84% 4.9%;
48-
--foreground: 210 40% 98%;
49-
50-
/* prefixed with foreground because it should look good on the background */
51-
--foreground-destructive: -4 84% 60%;
52-
53-
--muted: 217.2 32.6% 12%;
54-
--muted-foreground: 215 20.2% 65.1%;
55-
56-
--popover: 222.2 84% 4.9%;
57-
--popover-foreground: 210 40% 98%;
28+
@keyframes slide-left {
29+
from {
30+
opacity: 0;
31+
transform: translateX(20px);
32+
}
33+
to {
34+
opacity: 1;
35+
transform: translateX(0px);
36+
}
37+
}
5838

59-
--card: 222.2 84% 4.9%;
60-
--card-foreground: 210 40% 98%;
39+
@keyframes slide-top {
40+
from {
41+
opacity: 0;
42+
transform: translateY(20px);
43+
}
44+
to {
45+
opacity: 1;
46+
transform: translateY(0px);
47+
}
48+
}
49+
}
6150

62-
--border: 217.2 32.6% 17.5%;
63-
--input: 217.2 32.6% 17.5%;
64-
--input-invalid: 0 62.8% 30.6%;
51+
html,
52+
body {
53+
@apply bg-white dark:bg-gray-950;
6554

66-
--primary: 210 40% 98%;
67-
--primary-foreground: 222.2 47.4% 11.2%;
55+
@media (prefers-color-scheme: dark) {
56+
color-scheme: dark;
57+
}
58+
}
6859

69-
--secondary: 217.2 20% 24%;
70-
--secondary-foreground: 210 40% 98%;
60+
:root {
61+
--background: oklch(1 0 0);
62+
--foreground: oklch(0.145 0 0);
63+
--card: oklch(1 0 0);
64+
--card-foreground: oklch(0.145 0 0);
65+
--popover: oklch(1 0 0);
66+
--popover-foreground: oklch(0.145 0 0);
67+
--primary: oklch(0.205 0 0);
68+
--primary-foreground: oklch(0.985 0 0);
69+
--secondary: oklch(0.97 0 0);
70+
--secondary-foreground: oklch(0.205 0 0);
71+
--muted: oklch(0.97 0 0);
72+
--muted-foreground: oklch(0.556 0 0);
73+
--accent: oklch(0.97 0 0);
74+
--accent-foreground: oklch(0.205 0 0);
75+
--destructive: oklch(0.577 0.245 27.325);
76+
--destructive-foreground: oklch(0.577 0.245 27.325);
77+
--border: oklch(0.922 0 0);
78+
--input: oklch(0.922 0 0);
79+
--ring: oklch(0.87 0 0);
80+
--chart-1: oklch(0.646 0.222 41.116);
81+
--chart-2: oklch(0.6 0.118 184.704);
82+
--chart-3: oklch(0.398 0.07 227.392);
83+
--chart-4: oklch(0.828 0.189 84.429);
84+
--chart-5: oklch(0.769 0.188 70.08);
85+
--radius: 0.625rem;
86+
--sidebar: oklch(0.985 0 0);
87+
--sidebar-foreground: oklch(0.145 0 0);
88+
--sidebar-primary: oklch(0.205 0 0);
89+
--sidebar-primary-foreground: oklch(0.985 0 0);
90+
--sidebar-accent: oklch(0.97 0 0);
91+
--sidebar-accent-foreground: oklch(0.205 0 0);
92+
--sidebar-border: oklch(0.922 0 0);
93+
--sidebar-ring: oklch(0.87 0 0);
94+
}
7195

72-
--accent: 217.2 32.6% 10%;
73-
--accent-foreground: 210 40% 98%;
96+
.dark {
97+
--background: oklch(0.145 0 0);
98+
--foreground: oklch(0.985 0 0);
99+
--card: oklch(0.145 0 0);
100+
--card-foreground: oklch(0.985 0 0);
101+
--popover: oklch(0.145 0 0);
102+
--popover-foreground: oklch(0.985 0 0);
103+
--primary: oklch(0.985 0 0);
104+
--primary-foreground: oklch(0.205 0 0);
105+
--secondary: oklch(0.269 0 0);
106+
--secondary-foreground: oklch(0.985 0 0);
107+
--muted: oklch(0.269 0 0);
108+
--muted-foreground: oklch(0.708 0 0);
109+
--accent: oklch(0.269 0 0);
110+
--accent-foreground: oklch(0.985 0 0);
111+
--destructive: oklch(0.396 0.141 25.723);
112+
--destructive-foreground: oklch(0.637 0.237 25.331);
113+
--border: oklch(0.269 0 0);
114+
--input: oklch(0.269 0 0);
115+
--ring: oklch(0.439 0 0);
116+
--chart-1: oklch(0.488 0.243 264.376);
117+
--chart-2: oklch(0.696 0.17 162.48);
118+
--chart-3: oklch(0.769 0.188 70.08);
119+
--chart-4: oklch(0.627 0.265 303.9);
120+
--chart-5: oklch(0.645 0.246 16.439);
121+
--sidebar: oklch(0.205 0 0);
122+
--sidebar-foreground: oklch(0.985 0 0);
123+
--sidebar-primary: oklch(0.488 0.243 264.376);
124+
--sidebar-primary-foreground: oklch(0.985 0 0);
125+
--sidebar-accent: oklch(0.269 0 0);
126+
--sidebar-accent-foreground: oklch(0.985 0 0);
127+
--sidebar-border: oklch(0.269 0 0);
128+
--sidebar-ring: oklch(0.439 0 0);
129+
}
74130

75-
--destructive: 0 60% 40%;
76-
--destructive-foreground: 0 85.7% 97.3%;
131+
@theme inline {
132+
--color-background: var(--background);
133+
--color-foreground: var(--foreground);
134+
--color-card: var(--card);
135+
--color-card-foreground: var(--card-foreground);
136+
--color-popover: var(--popover);
137+
--color-popover-foreground: var(--popover-foreground);
138+
--color-primary: var(--primary);
139+
--color-primary-foreground: var(--primary-foreground);
140+
--color-secondary: var(--secondary);
141+
--color-secondary-foreground: var(--secondary-foreground);
142+
--color-muted: var(--muted);
143+
--color-muted-foreground: var(--muted-foreground);
144+
--color-accent: var(--accent);
145+
--color-accent-foreground: var(--accent-foreground);
146+
--color-destructive: var(--destructive);
147+
--color-destructive-foreground: var(--destructive-foreground);
148+
--color-border: var(--border);
149+
--color-input: var(--input);
150+
--color-ring: var(--ring);
151+
--color-chart-1: var(--chart-1);
152+
--color-chart-2: var(--chart-2);
153+
--color-chart-3: var(--chart-3);
154+
--color-chart-4: var(--chart-4);
155+
--color-chart-5: var(--chart-5);
156+
--radius-sm: calc(var(--radius) - 4px);
157+
--radius-md: calc(var(--radius) - 2px);
158+
--radius-lg: var(--radius);
159+
--radius-xl: calc(var(--radius) + 4px);
160+
--color-sidebar: var(--sidebar);
161+
--color-sidebar-foreground: var(--sidebar-foreground);
162+
--color-sidebar-primary: var(--sidebar-primary);
163+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
164+
--color-sidebar-accent: var(--sidebar-accent);
165+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
166+
--color-sidebar-border: var(--sidebar-border);
167+
--color-sidebar-ring: var(--sidebar-ring);
168+
}
77169

78-
--ring: 217.2 32.6% 60%;
170+
@layer base {
171+
* {
172+
@apply border-border outline-ring/50;
173+
}
174+
body {
175+
@apply bg-background text-foreground;
79176
}
80177
}

0 commit comments

Comments
 (0)