fix: improve code block styling in filter presets showcase

- Add light theme variant for CodeBlock component
- Use light theme for code blocks in FilterPresetsShowcase
- Fix background color conflicts between dark theme and white containers
- Add proper styling for documentation sections
- Update playground editor to use dark background

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: ryanrozich

src/demo/FilterPresetsShowcase.module.css

@@ -50,6 +50,15 @@
   border-radius: 0 0 4px 4px;
 }
 
+/* Ensure proper spacing for code blocks within tabs */
+.tab-content > div > div {
+  margin-bottom: 1.5rem;
+}
+
+.tab-content > div > div:last-child {
+  margin-bottom: 0;
+}
+
 .api-playground {
   margin-top: 2rem;
 }
@@ -128,3 +137,33 @@
   color: #666;
   font-size: 0.9rem;
 }
+
+.documentation-section {
+  margin-top: 2rem;
+}
+
+.documentation-section h3 {
+  margin-bottom: 1rem;
+  font-size: 1.5rem;
+  color: #333;
+}
+
+.documentation-section p {
+  margin-bottom: 1rem;
+  color: #666;
+}
+
+.playground-editor {
+  margin-top: 1rem;
+}
+
+/* Ensure code blocks have proper contrast within documentation section */
+.documentation-section > div {
+  margin: 1rem 0;
+}
+
+/* Style the code editor textarea to match the theme */
+.code-editor {
+  background: #1e1e1e !important;
+  color: #d4d4d4 !important;
+}

src/demo/FilterPresetsShowcase.tsx

@@ -132,6 +132,7 @@ const FilterPresetsShowcase: React.FC = () => {
                 </AnchorHeading>
                 <CodeBlock
                   language="typescript"
+                  variant="light"
                   code={`
 // Enable presets with basic configuration
 <QuickFilterDropdown
@@ -165,6 +166,7 @@ const FilterPresetsShowcase: React.FC = () => {
                 </AnchorHeading>
                 <CodeBlock
                   language="typescript"
+                  variant="light"
                   code={`
 // Use the useFilterPresets hook for programmatic control
 const {
@@ -202,6 +204,7 @@ const handleLoad = (presetId: string) => {
                 </AnchorHeading>
                 <CodeBlock
                   language="typescript"
+                  variant="light"
                   code={`
 // Configure storage options
 const storageConfig = {
@@ -220,6 +223,7 @@ const storageConfig = {
                 </AnchorHeading>
                 <CodeBlock
                   language="typescript"
+                  variant="light"
                   code={`
 // Provide custom UI components
 <QuickFilterDropdown
@@ -257,6 +261,7 @@ const storageConfig = {
                 </AnchorHeading>
                 <CodeBlock
                   language="typescript"
+                  variant="light"
                   code={`
 // Listen to preset events
 <QuickFilterDropdown

src/demo/components/CodeBlock.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
 import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { vs } from "react-syntax-highlighter/dist/esm/styles/prism";
 
 // Import only the languages we need
 import typescript from "react-syntax-highlighter/dist/esm/languages/prism/typescript";
@@ -32,7 +33,7 @@ interface CodeBlockProps {
     | "css";
   showLineNumbers?: boolean;
   showCopyButton?: boolean;
-  variant?: "default" | "hero";
+  variant?: "default" | "hero" | "light";
 }
 
 export const CodeBlock: React.FC<CodeBlockProps> = ({
@@ -63,12 +64,20 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({
   // Always disable line numbers for now
   const shouldShowLineNumbers = false;
 
+  // Use light theme for light variant
+  const isLightTheme = variant === "light";
+  const theme = isLightTheme ? vs : vscDarkPlus;
+
   return (
     <div className="relative group">
       {showCopyButton && variant !== "hero" && (
         <button
           onClick={handleCopy}
-          className={`absolute top-3 right-3 px-3 py-1 bg-gray-700/50 hover:bg-gray-600/70 backdrop-blur-sm rounded text-xs text-gray-300 border border-gray-600/50 transition-all duration-200 z-10 ${
+          className={`absolute top-3 right-3 px-3 py-1 ${
+            isLightTheme
+              ? "bg-gray-100/80 hover:bg-gray-200/90 text-gray-700 border-gray-300/50"
+              : "bg-gray-700/50 hover:bg-gray-600/70 text-gray-300 border-gray-600/50"
+          } backdrop-blur-sm rounded text-xs border transition-all duration-200 z-10 ${
             copied ? "opacity-100" : "opacity-50 group-hover:opacity-100"
           }`}
           title="Copy code"
@@ -114,7 +123,9 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({
         className={`overflow-x-auto rounded-lg shadow-lg ${
           variant === "hero"
             ? "bg-gray-900/80 border border-gray-700/30"
-            : "bg-gray-900/90 border border-gray-700/50"
+            : isLightTheme
+              ? "bg-gray-50 border border-gray-200"
+              : "bg-gray-900/90 border border-gray-700/50"
         }`}
       >
         <div style={{ position: "relative" }}>
@@ -142,7 +153,7 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({
           )}
           <SyntaxHighlighter
             language={language}
-            style={vscDarkPlus}
+            style={theme}
             showLineNumbers={false}
             customStyle={{
               margin: 0,
@@ -153,7 +164,7 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({
                 : variant === "hero"
                   ? "1.25rem"
                   : "1rem",
-              background: "transparent",
+              background: isLightTheme ? "#fafafa" : "transparent",
               fontSize: variant === "hero" ? "0.9375rem" : "0.875rem",
               lineHeight: 1.7,
               fontFamily:

src/demo/version-info.json

@@ -1,21 +1,21 @@
 {
   "version": "0.1.0",
   "git": {
-    "commitHash": "60841aabfe2d38be7c6b54f848f28ffb66463ca9",
-    "shortHash": "60841aa",
+    "commitHash": "58b8300b8c41fccee809f106e3849b026c6dffad",
+    "shortHash": "58b8300",
     "branch": "release/v0.1.1-rc2",
-    "commitDate": "2025-07-07 13:42:13 -0500",
+    "commitDate": "2025-07-07 22:30:18 -0500",
     "latestTag": "v0.1.0",
-    "commitsSinceTag": 73,
-    "isDirty": true
+    "commitsSinceTag": 78,
+    "isDirty": false
   },
   "deployment": {
     "isPR": false,
     "prNumber": null,
     "isMainBranch": false,
     "deployPath": "ag-grid-react-components"
   },
-  "buildTime": "2025-07-08T00:46:11.232Z",
-  "displayVersion": "v0.1.0+73",
+  "buildTime": "2025-07-08T03:31:04.557Z",
+  "displayVersion": "v0.1.0+78",
   "displayLabel": "release/v0.1.1-rc2"
 }