style(playground): redesign UI with modern minimal grid aesthetic

playground/src/App.tsx

@@ -2,15 +2,51 @@ import Demo from './Demo.mdx';
 
 function App() {
   return (
-    <main className="flex flex-col min-w-screen dark">
-      <div className="flex flex-col prose dark:prose-invert self-center mt-10 md:max-w-3xl">
-        <Demo />
-        <footer className="text-sm dark:text-slate-300 mt-10 mb-8 self-end">
-          Made with ❤ by Bassim -{' '}
-          <a href="https://github.com/avgvstvs96">@avgvstvs96</a>
-        </footer>
-      </div>
-    </main>
+    <div className="min-h-screen">
+      {/* Header with bottom border */}
+      <header className="border-b border-white/10">
+        <div className="max-w-4xl mx-auto px-6 py-4 flex items-center justify-between">
+          <span className="text-sm font-medium text-white/90">react-shiki</span>
+          <nav className="flex items-center gap-6">
+            <a
+              href="https://www.npmjs.com/package/react-shiki"
+              className="text-sm text-white/50 hover:text-white/90 transition-colors"
+            >
+              npm
+            </a>
+            <a
+              href="https://github.com/avgvstvs96/react-shiki"
+              className="text-sm text-white/50 hover:text-white/90 transition-colors"
+            >
+              GitHub
+            </a>
+          </nav>
+        </div>
+      </header>
+
+      {/* Main content */}
+      <main className="max-w-4xl mx-auto px-6 py-12">
+        <article className="prose prose-invert max-w-none">
+          <Demo />
+        </article>
+      </main>
+
+      {/* Footer with top border */}
+      <footer className="border-t border-white/10">
+        <div className="max-w-4xl mx-auto px-6 py-6 flex items-center justify-between text-sm text-white/40">
+          <span>
+            Built by{' '}
+            <a
+              href="https://github.com/avgvstvs96"
+              className="text-white/60 hover:text-white/90 transition-colors"
+            >
+              @avgvstvs96
+            </a>
+          </span>
+          <span>Playground</span>
+        </div>
+      </footer>
+    </div>
   );
 }
 

playground/src/index.css

@@ -1,75 +1,134 @@
 @import "tailwindcss";
-@plugin '@tailwindcss/typography';
+@plugin "@tailwindcss/typography";
 
 @custom-variant dark (&:where(.dark, .dark *));
 
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+  --bg: #0a0a0a;
+  --bg-secondary: #111111;
+  --border: rgba(255, 255, 255, 0.1);
+  --text: rgba(255, 255, 255, 0.9);
+  --text-secondary: rgba(255, 255, 255, 0.6);
+  --text-muted: rgba(255, 255, 255, 0.4);
+  --accent: #a78bfa;
 
-  color-scheme: light dark;
-  color: hsla(238, 100%, 95%, 1);
-  background-color: hsl(233, 18%, 8%);
+  font-family: Inter, system-ui, -apple-system, sans-serif;
+  line-height: 1.6;
+  font-weight: 400;
+  color-scheme: dark;
+  color: var(--text);
+  background-color: var(--bg);
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+}
 
-  overflow-x: hidden;
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--bg);
 }
 
 a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
+  color: var(--accent);
+  text-decoration: none;
+  transition: opacity 0.15s;
 }
+
 a:hover {
-  color: #535bf2;
+  opacity: 0.8;
 }
 
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+h1 {
+  font-size: 2rem;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+  color: var(--text);
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
+h2 {
+  font-size: 1.125rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--text);
+  margin-top: 3rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--border);
 }
 
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
+h3 {
+  font-size: 0.875rem;
   font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-/* @media (prefers-color-scheme: light) { */
-/*   :root { */
-/*     color: #213547; */
-/*     background-color: #ffffff; */
-/*   } */
-/*   a:hover { */
-/*     color: #747bff; */
-/*   } */
-/*   button { */
-/*     background-color: #f9f9f9; */
-/*   } */
-/* } */
+  color: var(--text-secondary);
+  margin-top: 2rem;
+}
+
+/* Prose */
+.prose {
+  --tw-prose-body: var(--text-secondary);
+  --tw-prose-headings: var(--text);
+  --tw-prose-links: var(--accent);
+  --tw-prose-bold: var(--text);
+  --tw-prose-code: var(--text);
+  --tw-prose-pre-bg: var(--bg-secondary);
+  --tw-prose-hr: var(--border);
+}
+
+.prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  color: var(--text-secondary);
+  font-size: 0.9375rem;
+}
+
+.prose :where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  color: var(--text);
+}
+
+.prose :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  color: var(--text-secondary);
+  font-size: 0.9375rem;
+}
+
+.prose :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  color: var(--text-secondary);
+}
+
+/* Code blocks with border */
+.prose :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 0;
+  margin: 1.5rem 0;
+}
+
+.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  font-size: 0.8125rem;
+  font-weight: 400;
+}
+
+/* Inline code */
+.prose :where(code):not(:where(pre code, [class~="not-prose"], [class~="not-prose"] *)) {
+  background: rgba(255, 255, 255, 0.06);
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+  font-weight: 400;
+}
+
+.prose :where(code):not(:where(pre code, [class~="not-prose"], [class~="not-prose"] *))::before,
+.prose :where(code):not(:where(pre code, [class~="not-prose"], [class~="not-prose"] *))::after {
+  content: none;
+}
+
+/* Horizontal rules */
+.prose :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  border-color: var(--border);
+  margin: 3rem 0;
+}
+
+/* Selection */
+::selection {
+  background: rgba(167, 139, 250, 0.3);
+}