From ceeb5653d5403865f95b4dafa01afc55d7f2204d Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 5 Dec 2025 23:08:20 +0000 Subject: [PATCH 1/2] style(playground): redesign UI with modern minimal grid aesthetic Add a clean, dark theme inspired by modern developer tool sites: - Subtle grid background pattern with layered line densities - Deep dark color palette with indigo accent color - Gradient text effects on headings - Improved prose styling for code blocks and content - Cleaned up footer layout with GitHub link - Removed unused App.css legacy styles --- playground/src/App.css | 42 -------- playground/src/App.tsx | 29 ++++-- playground/src/index.css | 213 ++++++++++++++++++++++++++++++++------- 3 files changed, 198 insertions(+), 86 deletions(-) delete mode 100644 playground/src/App.css diff --git a/playground/src/App.css b/playground/src/App.css deleted file mode 100644 index b9d355df..00000000 --- a/playground/src/App.css +++ /dev/null @@ -1,42 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/playground/src/App.tsx b/playground/src/App.tsx index d94cfa6c..2b83b628 100644 --- a/playground/src/App.tsx +++ b/playground/src/App.tsx @@ -2,12 +2,29 @@ import Demo from './Demo.mdx'; function App() { return ( -
-
- -
- Made with ❤ by Bassim -{' '} - @avgvstvs96 +
+
+
+ +
+
diff --git a/playground/src/index.css b/playground/src/index.css index d0919f25..467d8704 100644 --- a/playground/src/index.css +++ b/playground/src/index.css @@ -4,72 +4,209 @@ @custom-variant dark (&:where(.dark, .dark *)); :root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; + --bg-primary: #09090b; + --bg-secondary: #0c0c0f; + --grid-color: rgba(255, 255, 255, 0.03); + --grid-color-strong: rgba(255, 255, 255, 0.06); + --text-primary: rgba(255, 255, 255, 0.95); + --text-secondary: rgba(255, 255, 255, 0.6); + --text-muted: rgba(255, 255, 255, 0.4); + --accent: #6366f1; + --accent-glow: rgba(99, 102, 241, 0.4); + --border-subtle: rgba(255, 255, 255, 0.08); + + font-family: Inter, system-ui, -apple-system, sans-serif; + line-height: 1.6; font-weight: 400; - color-scheme: light dark; - color: hsla(238, 100%, 95%, 1); - background-color: hsl(233, 18%, 8%); + color-scheme: dark; + color: var(--text-primary); + background-color: var(--bg-primary); font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; +} + +/* Grid background pattern */ +body { + margin: 0; + min-height: 100vh; + background-color: var(--bg-primary); + background-image: + linear-gradient(var(--grid-color) 1px, transparent 1px), + linear-gradient(90deg, var(--grid-color) 1px, transparent 1px), + linear-gradient(var(--grid-color-strong) 1px, transparent 1px), + linear-gradient(90deg, var(--grid-color-strong) 1px, transparent 1px); + background-size: + 100px 100px, + 100px 100px, + 20px 20px, + 20px 20px; + background-position: -1px -1px; +} - overflow-x: hidden; +/* Subtle radial gradient overlay for depth */ +body::before { + content: ''; + position: fixed; + inset: 0; + background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99, 102, 241, 0.08), transparent); + pointer-events: none; + z-index: 0; } +#root { + position: relative; + z-index: 1; +} + +/* Links */ a { font-weight: 500; - color: #646cff; - text-decoration: inherit; + color: var(--accent); + text-decoration: none; + transition: all 0.2s ease; } + a:hover { - color: #535bf2; + color: #818cf8; + text-shadow: 0 0 20px var(--accent-glow); } -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; +/* Headings */ +h1 { + font-size: 2.5rem; + font-weight: 700; + letter-spacing: -0.02em; + line-height: 1.2; + background: linear-gradient(to bottom right, #fff 30%, rgba(255, 255, 255, 0.6)); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; } -h1 { - font-size: 3.2em; - line-height: 1.1; +h2 { + font-size: 1.25rem; + font-weight: 600; + letter-spacing: -0.01em; + color: var(--text-primary); +} + +h3 { + font-size: 1rem; + font-weight: 600; + color: var(--text-secondary); +} + +/* Prose customizations */ +.prose { + --tw-prose-body: var(--text-secondary); + --tw-prose-headings: var(--text-primary); + --tw-prose-links: var(--accent); + --tw-prose-bold: var(--text-primary); + --tw-prose-code: var(--text-primary); + --tw-prose-pre-bg: var(--bg-secondary); + --tw-prose-hr: var(--border-subtle); +} + +.prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) { + color: var(--text-secondary); +} + +.prose :where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) { + color: var(--text-primary); +} + +/* Code blocks */ +.prose :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) { + background: var(--bg-secondary); + border: 1px solid var(--border-subtle); + border-radius: 12px; + padding: 0; + overflow: hidden; +} + +.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { + font-size: 0.875em; + font-weight: 500; +} + +/* Inline code */ +.prose :where(code):not(:where(pre code, [class~="not-prose"], [class~="not-prose"] *)) { + background: rgba(255, 255, 255, 0.06); + padding: 0.2em 0.4em; + border-radius: 6px; + font-weight: 500; +} + +/* Horizontal rules */ +.prose :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) { + border-color: var(--border-subtle); + margin: 3rem 0; +} + +/* Lists */ +.prose :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) { + color: var(--text-secondary); +} + +.prose :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) { + color: var(--text-secondary); +} + +/* Feature emoji styling */ +.prose :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker { + color: var(--text-muted); } +/* Buttons (if needed) */ button { border-radius: 8px; - border: 1px solid transparent; + border: 1px solid var(--border-subtle); padding: 0.6em 1.2em; - font-size: 1em; + font-size: 0.875rem; font-weight: 500; font-family: inherit; - background-color: #1a1a1a; + background-color: var(--bg-secondary); + color: var(--text-primary); cursor: pointer; - transition: border-color 0.25s; + transition: all 0.2s ease; } + button:hover { - border-color: #646cff; + border-color: var(--accent); + box-shadow: 0 0 20px var(--accent-glow); } + 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; */ -/* } */ -/* } */ + outline: 2px solid var(--accent); + outline-offset: 2px; +} + +/* Scrollbar styling */ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: transparent; +} + +::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.1); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: rgba(255, 255, 255, 0.2); +} + +/* Selection styling */ +::selection { + background: rgba(99, 102, 241, 0.3); + color: #fff; +} From ab4c2aee74d6de61880d6cdef3f43cdb1025a777 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 5 Dec 2025 23:13:14 +0000 Subject: [PATCH 2/2] style(playground): clean minimal design with structural borders Replace dense grid background with clean minimal aesthetic: - Simple dark background (#0a0a0a) - Header and footer with subtle border dividers - Navigation links in header - Structural borders on code blocks and sections - h2 headings with top border for section separation - Clean typography with proper hierarchy - Purple accent color for links --- playground/src/App.tsx | 61 ++++++++----- playground/src/index.css | 190 ++++++++++++--------------------------- 2 files changed, 96 insertions(+), 155 deletions(-) diff --git a/playground/src/App.tsx b/playground/src/App.tsx index 2b83b628..7ae2dafe 100644 --- a/playground/src/App.tsx +++ b/playground/src/App.tsx @@ -2,32 +2,51 @@ import Demo from './Demo.mdx'; function App() { return ( -
-
-
- -
- -
-
+ +
+ + + {/* Main content */} +
+
+ +
+
+ + {/* Footer with top border */} + + ); } diff --git a/playground/src/index.css b/playground/src/index.css index 467d8704..ce59a51a 100644 --- a/playground/src/index.css +++ b/playground/src/index.css @@ -1,27 +1,23 @@ @import "tailwindcss"; -@plugin '@tailwindcss/typography'; +@plugin "@tailwindcss/typography"; @custom-variant dark (&:where(.dark, .dark *)); :root { - --bg-primary: #09090b; - --bg-secondary: #0c0c0f; - --grid-color: rgba(255, 255, 255, 0.03); - --grid-color-strong: rgba(255, 255, 255, 0.06); - --text-primary: rgba(255, 255, 255, 0.95); + --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: #6366f1; - --accent-glow: rgba(99, 102, 241, 0.4); - --border-subtle: rgba(255, 255, 255, 0.08); + --accent: #a78bfa; font-family: Inter, system-ui, -apple-system, sans-serif; line-height: 1.6; font-weight: 400; - color-scheme: dark; - color: var(--text-primary); - background-color: var(--bg-primary); + color: var(--text); + background-color: var(--bg); font-synthesis: none; text-rendering: optimizeLegibility; @@ -29,184 +25,110 @@ -moz-osx-font-smoothing: grayscale; } -/* Grid background pattern */ body { margin: 0; min-height: 100vh; - background-color: var(--bg-primary); - background-image: - linear-gradient(var(--grid-color) 1px, transparent 1px), - linear-gradient(90deg, var(--grid-color) 1px, transparent 1px), - linear-gradient(var(--grid-color-strong) 1px, transparent 1px), - linear-gradient(90deg, var(--grid-color-strong) 1px, transparent 1px); - background-size: - 100px 100px, - 100px 100px, - 20px 20px, - 20px 20px; - background-position: -1px -1px; -} - -/* Subtle radial gradient overlay for depth */ -body::before { - content: ''; - position: fixed; - inset: 0; - background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99, 102, 241, 0.08), transparent); - pointer-events: none; - z-index: 0; -} - -#root { - position: relative; - z-index: 1; -} - -/* Links */ + background: var(--bg); +} + a { - font-weight: 500; color: var(--accent); text-decoration: none; - transition: all 0.2s ease; + transition: opacity 0.15s; } a:hover { - color: #818cf8; - text-shadow: 0 0 20px var(--accent-glow); + opacity: 0.8; } -/* Headings */ h1 { - font-size: 2.5rem; - font-weight: 700; + font-size: 2rem; + font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; - background: linear-gradient(to bottom right, #fff 30%, rgba(255, 255, 255, 0.6)); - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; + color: var(--text); } h2 { - font-size: 1.25rem; + font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; - color: var(--text-primary); + color: var(--text); + margin-top: 3rem; + padding-top: 1.5rem; + border-top: 1px solid var(--border); } h3 { - font-size: 1rem; - font-weight: 600; + font-size: 0.875rem; + font-weight: 500; color: var(--text-secondary); + margin-top: 2rem; } -/* Prose customizations */ +/* Prose */ .prose { --tw-prose-body: var(--text-secondary); - --tw-prose-headings: var(--text-primary); + --tw-prose-headings: var(--text); --tw-prose-links: var(--accent); - --tw-prose-bold: var(--text-primary); - --tw-prose-code: var(--text-primary); + --tw-prose-bold: var(--text); + --tw-prose-code: var(--text); --tw-prose-pre-bg: var(--bg-secondary); - --tw-prose-hr: var(--border-subtle); + --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-primary); -} - -/* Code blocks */ -.prose :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) { - background: var(--bg-secondary); - border: 1px solid var(--border-subtle); - border-radius: 12px; - padding: 0; - overflow: hidden; -} - -.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { - font-size: 0.875em; - font-weight: 500; -} - -/* Inline code */ -.prose :where(code):not(:where(pre code, [class~="not-prose"], [class~="not-prose"] *)) { - background: rgba(255, 255, 255, 0.06); - padding: 0.2em 0.4em; - border-radius: 6px; - font-weight: 500; -} - -/* Horizontal rules */ -.prose :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) { - border-color: var(--border-subtle); - margin: 3rem 0; + color: var(--text); } -/* Lists */ .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); } -/* Feature emoji styling */ -.prose :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker { - color: var(--text-muted); -} - -/* Buttons (if needed) */ -button { +/* 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; - border: 1px solid var(--border-subtle); - padding: 0.6em 1.2em; - font-size: 0.875rem; - font-weight: 500; - font-family: inherit; - background-color: var(--bg-secondary); - color: var(--text-primary); - cursor: pointer; - transition: all 0.2s ease; -} - -button:hover { - border-color: var(--accent); - box-shadow: 0 0 20px var(--accent-glow); -} - -button:focus, -button:focus-visible { - outline: 2px solid var(--accent); - outline-offset: 2px; + padding: 0; + margin: 1.5rem 0; } -/* Scrollbar styling */ -::-webkit-scrollbar { - width: 8px; - height: 8px; +.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { + font-size: 0.8125rem; + font-weight: 400; } -::-webkit-scrollbar-track { - background: transparent; +/* 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; } -::-webkit-scrollbar-thumb { - background: rgba(255, 255, 255, 0.1); - border-radius: 4px; +.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; } -::-webkit-scrollbar-thumb:hover { - background: rgba(255, 255, 255, 0.2); +/* Horizontal rules */ +.prose :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) { + border-color: var(--border); + margin: 3rem 0; } -/* Selection styling */ +/* Selection */ ::selection { - background: rgba(99, 102, 241, 0.3); - color: #fff; + background: rgba(167, 139, 250, 0.3); }