Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
11,867 changes: 11,867 additions & 0 deletions package-lock.json

Large diffs are not rendered by default.

Binary file removed src/assets/logo-dark.png
Binary file not shown.
File renamed without changes
10 changes: 2 additions & 8 deletions src/components/Navbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,7 @@ import { clsx } from "clsx";
import { Menu, X } from "lucide-react";
import { useState } from "react";
import { Link, useLocation } from "react-router-dom";
import logoDark from "../assets/logo-dark.png";
import logoLight from "../assets/logo-light.png";
import { useTheme } from "../hooks/useTheme";
import { ThemeToggle } from "./ThemeToggle";
import logo from "../assets/logo.png";

interface NavbarProps {
sticky?: boolean;
Expand All @@ -14,7 +11,6 @@ interface NavbarProps {

export function Navbar({ sticky = false, maxWidth = false }: NavbarProps) {
const location = useLocation();
const { resolvedTheme } = useTheme();
const isDocsActive = location.pathname.startsWith("/docs");
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

Expand All @@ -28,7 +24,7 @@ export function Navbar({ sticky = false, maxWidth = false }: NavbarProps) {
<div className={clsx("flex items-center justify-between", maxWidth && "mx-auto max-w-6xl")}>
<Link to="/" className="flex shrink-0 items-center">
<img
src={resolvedTheme === "dark" ? logoDark : logoLight}
src={logo}
alt="ooxml.dev"
className="h-6"
/>
Expand All @@ -47,12 +43,10 @@ export function Navbar({ sticky = false, maxWidth = false }: NavbarProps) {
</span>
</span>
</NavLink>
<ThemeToggle />
</nav>

{/* Mobile menu button */}
<div className="flex items-center gap-2 sm:hidden">
<ThemeToggle />
<button
type="button"
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
Expand Down
24 changes: 0 additions & 24 deletions src/components/ThemeToggle.tsx

This file was deleted.

66 changes: 0 additions & 66 deletions src/hooks/useTheme.tsx

This file was deleted.

68 changes: 5 additions & 63 deletions src/index.css
Original file line number Diff line number Diff line change
@@ -1,82 +1,40 @@
@import "tailwindcss";

/* ooxml.dev theme - Coral Light (with dark mode) */
/* ooxml.dev theme - Coral Light */
:root {
/* Coral accent */
--color-accent: #ea580c;
--color-accent-hover: #c2410c;
--color-accent-light: #fff7ed;

/* Light mode backgrounds */
/* Backgrounds */
--color-bg-primary: #ffffff;
--color-bg-secondary: #fafaf9;
--color-bg-tertiary: #f5f5f4;
--color-bg-code: #1c1917;

/* Light mode borders */
/* Borders */
--color-border: #e7e5e4;
--color-border-strong: #d6d3d1;

/* Light mode text */
/* Text */
--color-text-primary: #1c1917;
--color-text-secondary: #57534e;
--color-text-muted: #a8a29e;

/* Syntax highlighting (for light mode code blocks on dark bg) */
/* Syntax highlighting (for code blocks on dark bg) */
--color-syntax-tag: #22d3ee;
--color-syntax-attr: #c4b5fd;
--color-syntax-value: #86efac;
--color-syntax-comment: #71717a;
}

.dark {
/* Coral accent (slightly lighter for dark mode) */
--color-accent: #fb923c;
--color-accent-hover: #f97316;
--color-accent-light: #431407;

/* Dark mode backgrounds */
--color-bg-primary: #0c0a09;
--color-bg-secondary: #1c1917;
--color-bg-tertiary: #292524;
--color-bg-code: #1c1917;

/* Dark mode borders */
--color-border: #292524;
--color-border-strong: #44403c;

/* Dark mode text */
--color-text-primary: #fafaf9;
--color-text-secondary: #a8a29e;
--color-text-muted: #78716c;
}

html {
color-scheme: light;
}

html.dark {
color-scheme: dark;
}

body {
font-family: "Inter", system-ui, -apple-system, sans-serif;
background-color: var(--color-bg-primary);
color: var(--color-text-primary);
margin: 0;
min-height: 100vh;
transition:
background-color 0.2s ease,
color 0.2s ease;
}

/* Smooth transitions for theme changes */
*,
*::before,
*::after {
transition:
background-color 0.2s ease,
border-color 0.2s ease;
}

/* Code syntax highlighting */
Expand All @@ -98,34 +56,18 @@ body {
background-color: #fef2f2;
border-color: #fecaca;
}
.dark .note-critical {
background-color: rgba(127, 29, 29, 0.3);
border-color: #7f1d1d;
}

.note-warning {
background-color: #fffbeb;
border-color: #fde68a;
}
.dark .note-warning {
background-color: rgba(120, 53, 15, 0.3);
border-color: #78350f;
}

.note-info {
background-color: #fff7ed;
border-color: #fed7aa;
}
.dark .note-info {
background-color: rgba(124, 45, 18, 0.3);
border-color: #7c2d12;
}

.note-tip {
background-color: #f0fdf4;
border-color: #bbf7d0;
}
.dark .note-tip {
background-color: rgba(20, 83, 45, 0.3);
border-color: #14532d;
}
9 changes: 3 additions & 6 deletions src/main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,12 @@ import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import { ThemeProvider } from "./hooks/useTheme";
import "./index.css";

createRoot(document.getElementById("root")!).render(
<StrictMode>
<ThemeProvider>
<BrowserRouter>
<App />
</BrowserRouter>
</ThemeProvider>
<BrowserRouter>
<App />
</BrowserRouter>
</StrictMode>,
);
Loading