fix(www): code blocks styling on light theme

Blazity · Nov 4, 2024 · 5482eb3 · 5482eb3
1 parent f73a1c5
commit 5482eb3
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 17 deletions.
diff --git a/apps/www/components/component-example.tsx b/apps/www/components/component-example.tsx
@@ -32,9 +32,7 @@ export function ComponentExample({
   ) as React.ReactElement[]
 
   const codeString = React.useMemo(() => {
-    if (
-      typeof Code?.props["data-rehype-pretty-code-fragment"] !== "undefined"
-    ) {
+    if (typeof Code?.props["data-rehype-pretty-code-figure"] !== "undefined") {
       const [, Button] = React.Children.toArray(
         Code.props.children
       ) as React.ReactElement[]

diff --git a/apps/www/components/component-preview.tsx b/apps/www/components/component-preview.tsx
@@ -61,9 +61,7 @@ export function ComponentPreview({
   }, [name])
 
   const codeString = React.useMemo(() => {
-    if (
-      typeof Code?.props["data-rehype-pretty-code-fragment"] !== "undefined"
-    ) {
+    if (typeof Code?.props["data-rehype-pretty-code-figure"] !== "undefined") {
       const [Button] = React.Children.toArray(
         Code.props.children
       ) as React.ReactElement[]

diff --git a/apps/www/components/theme-customizer.tsx b/apps/www/components/theme-customizer.tsx
@@ -431,7 +431,7 @@ function CustomizerCode() {
 
   return (
     <ThemeWrapper defaultTheme="zinc" className="relative space-y-4">
-      <div data-rehype-pretty-code-fragment="">
+      <div data-rehype-pretty-code-figure="">
         <pre className="max-h-[450px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900">
           <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">
             <span className="line text-white">@layer base &#123;</span>

diff --git a/apps/www/contentlayer.config.js b/apps/www/contentlayer.config.js
@@ -124,7 +124,7 @@ export default makeSource({
       () => (tree) => {
         visit(tree, (node) => {
           if (node?.type === "element" && node?.tagName === "div") {
-            if (!("data-rehype-pretty-code-fragment" in node.properties)) {
+            if (!("data-rehype-pretty-code-figure" in node.properties)) {
               return
             }
 

diff --git a/apps/www/styles/mdx.css b/apps/www/styles/mdx.css
@@ -14,25 +14,25 @@
   display: block;
 }
 
-[data-rehype-pretty-code-fragment] {
+[data-rehype-pretty-code-figure] {
   @apply relative text-white;
 }
 
-[data-rehype-pretty-code-fragment] code {
+[data-rehype-pretty-code-figure] code {
   @apply grid min-w-full break-words rounded-none border-0 bg-transparent p-0;
   counter-reset: line;
   box-decoration-break: clone;
 }
 
-[data-rehype-pretty-code-fragment] .line {
+[data-rehype-pretty-code-figure] .line {
   @apply px-4 min-h-[1rem] py-0.5 w-full inline-block;
 }
 
-[data-rehype-pretty-code-fragment] [data-line-numbers] .line {
+[data-rehype-pretty-code-figure] [data-line-numbers] .line {
   @apply px-2;
 }
 
-[data-rehype-pretty-code-fragment] [data-line-numbers] > .line::before {
+[data-rehype-pretty-code-figure] [data-line-numbers] > .line::before {
   @apply text-zinc-50/40 text-xs;
   counter-increment: line;
   content: counter(line);
@@ -42,19 +42,19 @@
   text-align: right;
 }
 
-[data-rehype-pretty-code-fragment] .line--highlighted {
+[data-rehype-pretty-code-figure] .line--highlighted {
   @apply bg-zinc-700/50;
 }
 
-[data-rehype-pretty-code-fragment] .line-highlighted span {
+[data-rehype-pretty-code-figure] .line-highlighted span {
   @apply relative;
 }
 
-[data-rehype-pretty-code-fragment] .word--highlighted {
+[data-rehype-pretty-code-figure] .word--highlighted {
   @apply rounded-md bg-zinc-700/50 border-zinc-700/70 p-1;
 }
 
-.dark [data-rehype-pretty-code-fragment] .word--highlighted {
+.dark [data-rehype-pretty-code-figure] .word--highlighted {
   @apply bg-zinc-900;
 }