Skip to content

Should the UI be red? #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
btholt wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Should the UI be red? #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6266765
:red_square: MAKE IT ALL RED :red_square:
btholt Oct 26, 2025
f1fbb31
:red_circle: OKAY BUT ALSO FIX THE LINTING ERRORS :red_circle:
btholt Oct 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
138 changes: 76 additions & 62 deletions 09-with-tests/src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,71 +45,73 @@

:root {
--radius: 0.625rem;
--background: oklch(1 0 0);
--foreground: oklch(0.147 0.004 49.25);
--card: oklch(1 0 0);
--card-foreground: oklch(0.147 0.004 49.25);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.147 0.004 49.25);
--primary: oklch(0.216 0.006 56.043);
--primary-foreground: oklch(0.985 0.001 106.423);
--secondary: oklch(0.97 0.001 106.424);
--secondary-foreground: oklch(0.216 0.006 56.043);
--muted: oklch(0.97 0.001 106.424);
--muted-foreground: oklch(0.553 0.013 58.071);
--accent: oklch(0.97 0.001 106.424);
--accent-foreground: oklch(0.216 0.006 56.043);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.923 0.003 48.717);
--input: oklch(0.923 0.003 48.717);
--ring: oklch(0.709 0.01 56.259);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.985 0.001 106.423);
--sidebar-foreground: oklch(0.147 0.004 49.25);
--sidebar-primary: oklch(0.216 0.006 56.043);
--sidebar-primary-foreground: oklch(0.985 0.001 106.423);
--sidebar-accent: oklch(0.97 0.001 106.424);
--sidebar-accent-foreground: oklch(0.216 0.006 56.043);
--sidebar-border: oklch(0.923 0.003 48.717);
--sidebar-ring: oklch(0.709 0.01 56.259);
/* Make the site use a maroon primary (#85144b) with white accents and a white background */
--background: #ffffff;
--foreground: #0f172a; /* slate-900 */
--card: #ffffff;
--card-foreground: #0f172a;
--popover: #ffffff;
--popover-foreground: #0f172a;
--primary: #85144b;
--primary-foreground: #ffffff;
--secondary: #f3f4f6; /* gray-100 */
--secondary-foreground: #0f172a;
--muted: #f8fafc; /* gray-50 */
--muted-foreground: #6b7280; /* gray-500 */
--accent: #85144b;
--accent-foreground: #ffffff;
--destructive: #ef4444;
--border: #e6e7ea;
--input: #f8fafc;
--ring: rgba(133, 20, 75, 0.15);
--chart-1: #7c2b4a;
--chart-2: #a14b6b;
--chart-3: #d5a3b8;
--chart-4: #f0cfe1;
--chart-5: #fdeef5;
--sidebar: #ffffff;
--sidebar-foreground: #0f172a;
--sidebar-primary: #85144b;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #85144b;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #e6e7ea;
--sidebar-ring: rgba(133, 20, 75, 0.15);
}

.dark {
--background: oklch(0.147 0.004 49.25);
--foreground: oklch(0.985 0.001 106.423);
--card: oklch(0.216 0.006 56.043);
--card-foreground: oklch(0.985 0.001 106.423);
--popover: oklch(0.216 0.006 56.043);
--popover-foreground: oklch(0.985 0.001 106.423);
--primary: oklch(0.923 0.003 48.717);
--primary-foreground: oklch(0.216 0.006 56.043);
--secondary: oklch(0.268 0.007 34.298);
--secondary-foreground: oklch(0.985 0.001 106.423);
--muted: oklch(0.268 0.007 34.298);
--muted-foreground: oklch(0.709 0.01 56.259);
--accent: oklch(0.268 0.007 34.298);
--accent-foreground: oklch(0.985 0.001 106.423);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.553 0.013 58.071);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.216 0.006 56.043);
--sidebar-foreground: oklch(0.985 0.001 106.423);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0.001 106.423);
--sidebar-accent: oklch(0.268 0.007 34.298);
--sidebar-accent-foreground: oklch(0.985 0.001 106.423);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.553 0.013 58.071);
/* Dark theme: keep the maroon primary but swap background/foreground */
--background: #0f172a; /* slate-900 */
--foreground: #ffffff;
--card: #0f172a;
--card-foreground: #ffffff;
--popover: #0f172a;
--popover-foreground: #ffffff;
--primary: #85144b;
--primary-foreground: #ffffff;
--secondary: #1f2937;
--secondary-foreground: #ffffff;
--muted: #1f2937;
--muted-foreground: #9ca3af;
--accent: #85144b;
--accent-foreground: #ffffff;
--destructive: #ef4444;
--border: rgba(255, 255, 255, 0.08);
--input: rgba(255, 255, 255, 0.04);
--ring: rgba(133, 20, 75, 0.2);
--chart-1: #7c2b4a;
--chart-2: #a14b6b;
--chart-3: #d5a3b8;
--chart-4: #f0cfe1;
--chart-5: #fdeef5;
--sidebar: #0f172a;
--sidebar-foreground: #ffffff;
--sidebar-primary: #85144b;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #85144b;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: rgba(255, 255, 255, 0.08);
--sidebar-ring: rgba(133, 20, 75, 0.2);
}

@layer base {
Expand All @@ -121,6 +123,18 @@
}
}

/* Make headings use the primary maroon color */
@layer base {
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--primary);
}
}

/* React MD Editor styles */
.w-md-editor {
background-color: hsl(var(--background));
Expand Down
2 changes: 1 addition & 1 deletion 09-with-tests/src/components/nav/nav-bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default async function NavBar() {
<div className="flex items-center gap-2">
<Link
href="/"
className="font-bold text-xl tracking-tight text-gray-900"
className="font-bold text-xl tracking-tight text-primary"
>
Wikimasters
</Link>
Expand Down
4 changes: 2 additions & 2 deletions 09-with-tests/src/components/ui/wiki-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,15 +31,15 @@ export function WikiCard({
<span>•</span>
<span>{date}</span>
</div>
<CardTitle className="text-lg">{title}</CardTitle>
<CardTitle className="text-lg text-primary">{title}</CardTitle>
</CardHeader>
<CardContent className="py-0">
<CardDescription>{summary}</CardDescription>
</CardContent>
<CardFooter className="pt-2">
<Link
href={href}
className="text-blue-600 hover:underline text-sm font-medium w-fit"
className="text-primary hover:underline text-sm font-medium w-fit"
>
Read article &rarr;
</Link>
Expand Down
10 changes: 5 additions & 5 deletions 09-with-tests/src/components/wiki-article-viewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,13 +74,13 @@ export default function WikiArticleViewer({
Home
</Link>
<ChevronRight className="h-4 w-4" />
<span className="text-foreground font-medium">{article.title}</span>
<span className="text-primary font-medium">{article.title}</span>
</nav>

{/* Article Header */}
<div className="flex justify-between items-start mb-6">
<div className="flex-1">
<h1 className="text-4xl font-bold text-foreground mb-4">
<h1 className="text-4xl font-bold text-primary mb-4">
{article.title}
</h1>

Expand Down Expand Up @@ -155,17 +155,17 @@ export default function WikiArticleViewer({
components={{
// Customize heading styles
h1: ({ children }) => (
<h1 className="text-3xl font-bold mt-8 mb-4 text-foreground">
<h1 className="text-3xl font-bold mt-8 mb-4 text-primary">
{children}
</h1>
),
h2: ({ children }) => (
<h2 className="text-2xl font-semibold mt-6 mb-3 text-foreground">
<h2 className="text-2xl font-semibold mt-6 mb-3 text-primary">
{children}
</h2>
),
h3: ({ children }) => (
<h3 className="text-xl font-semibold mt-4 mb-2 text-foreground">
<h3 className="text-xl font-semibold mt-4 mb-2 text-primary">
{children}
</h3>
),
Expand Down