revert: roll back code block styling changes

Reverting commits 6e3b1cd and bb2ab11 as the code block styling
improvements didn't work as expected and were causing visual issues.

Author: ryanrozich

src/demo/FilterPresetsShowcase.module.css

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

src/demo/components/CodeBlock.tsx

@@ -1,7 +1,6 @@
 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";
@@ -33,7 +32,7 @@ interface CodeBlockProps {
     | "css";
   showLineNumbers?: boolean;
   showCopyButton?: boolean;
-  variant?: "default" | "hero" | "light";
+  variant?: "default" | "hero";
 }
 
 export const CodeBlock: React.FC<CodeBlockProps> = ({
@@ -44,52 +43,6 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({
   variant = "default",
 }) => {
   const [copied, setCopied] = useState(false);
-  const [detectedTheme, setDetectedTheme] = useState<"light" | "dark">("dark");
-
-  // Detect the actual theme based on background
-  React.useEffect(() => {
-    if (variant !== "default") return;
-
-    const checkTheme = () => {
-      const body = document.body;
-      const computedStyle = window.getComputedStyle(body);
-      const bgColor = computedStyle.backgroundColor;
-
-      // Check if background is light
-      if (bgColor === "rgb(255, 255, 255)" || bgColor === "white") {
-        setDetectedTheme("light");
-      } else {
-        // Check the nearest parent with a background
-        let foundDarkBg = false;
-
-        // Look for elements with dark backgrounds
-        const darkElements = document.querySelectorAll(
-          ".bg-gray-950, .bg-gray-900, .min-h-screen",
-        );
-        darkElements.forEach((el) => {
-          const elBg = window.getComputedStyle(el).backgroundColor;
-          if (elBg && elBg !== "rgba(0, 0, 0, 0)" && elBg !== "transparent") {
-            // Parse RGB values
-            const match = elBg.match(/\d+/g);
-            if (match) {
-              const [r, g, b] = match.map(Number);
-              // If all values are low, it's a dark background
-              if (r < 50 && g < 50 && b < 50) {
-                foundDarkBg = true;
-              }
-            }
-          }
-        });
-
-        setDetectedTheme(foundDarkBg ? "dark" : "light");
-      }
-    };
-
-    checkTheme();
-    // Re-check on window resize or other changes
-    window.addEventListener("resize", checkTheme);
-    return () => window.removeEventListener("resize", checkTheme);
-  }, [variant]);
 
   const handleCopy = async () => {
     try {
@@ -110,21 +63,12 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({
   // Always disable line numbers for now
   const shouldShowLineNumbers = false;
 
-  // Use light theme for light variant or detected light theme
-  const isLightTheme =
-    variant === "light" || (variant === "default" && detectedTheme === "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 ${
-            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 ${
+          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 ${
             copied ? "opacity-100" : "opacity-50 group-hover:opacity-100"
           }`}
           title="Copy code"
@@ -170,9 +114,7 @@ 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"
-            : isLightTheme
-              ? "bg-gray-50 border border-gray-200"
-              : "bg-gray-900/90 border border-gray-700/50"
+            : "bg-gray-900/90 border border-gray-700/50"
         }`}
       >
         <div style={{ position: "relative" }}>
@@ -200,7 +142,7 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({
           )}
           <SyntaxHighlighter
             language={language}
-            style={theme}
+            style={vscDarkPlus}
             showLineNumbers={false}
             customStyle={{
               margin: 0,
@@ -211,7 +153,7 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({
                 : variant === "hero"
                   ? "1.25rem"
                   : "1rem",
-              background: isLightTheme ? "#fafafa" : "transparent",
+              background: "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": "bb2ab115052487299a10ab2826049fc73df5f2e0",
-    "shortHash": "bb2ab11",
+    "commitHash": "60841aabfe2d38be7c6b54f848f28ffb66463ca9",
+    "shortHash": "60841aa",
     "branch": "release/v0.1.1-rc2",
-    "commitDate": "2025-07-07 22:38:13 -0500",
+    "commitDate": "2025-07-07 13:42:13 -0500",
     "latestTag": "v0.1.0",
-    "commitsSinceTag": 79,
-    "isDirty": false
+    "commitsSinceTag": 73,
+    "isDirty": true
   },
   "deployment": {
     "isPR": false,
     "prNumber": null,
     "isMainBranch": false,
     "deployPath": "ag-grid-react-components"
   },
-  "buildTime": "2025-07-08T03:39:35.295Z",
-  "displayVersion": "v0.1.0+79",
+  "buildTime": "2025-07-08T00:46:11.232Z",
+  "displayVersion": "v0.1.0+73",
   "displayLabel": "release/v0.1.1-rc2"
 }