Transition and fix overflow

mskelton · Oct 1, 2023 · 1846eae · 1846eae
1 parent 39ab561
commit 1846eae
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 22 deletions.
diff --git a/app/lib/themeEffect.ts b/app/lib/themeEffect.ts
@@ -7,6 +7,7 @@ export const themeEffect = function () {
     pref === "dark" ||
     (!pref && window.matchMedia("(prefers-color-scheme: dark)").matches)
   ) {
+    // TODO: Add [color-scheme:dark]
     d.classList.add("dark")
     result = "dark"
   } else {

diff --git a/config/rehype-callout.mjs b/config/rehype-callout.mjs
@@ -26,37 +26,42 @@ export default function rehypeCallout() {
     const icon = iconMap[type] ?? info
 
     parent.children.splice(index, 1, {
+      type: "element",
+      tagName: "aside",
       children: [
         {
           ...icon,
           properties: {
             ...icon.properties,
             class: [
-              "w-9 h-9 absolute top-1 right-1 p-1.5",
+              "w-9 h-9 absolute top-1 right-1 p-1.5 transition-colors",
               type === "INFO" && "text-indigo-600 dark:text-indigo-400",
               type === "WARN" && "text-yellow-700 dark:text-yellow-500",
               type === "ERROR" && "text-red-600 dark:text-red-500",
             ].filter(Boolean),
           },
         },
         {
-          children: [{ type: "text", value: title }],
+          type: "element",
+          tagName: "strong",
           properties: {
-            className: "text-zinc-900 dark:text-white font-bold mb-2 block",
+            className:
+              "text-zinc-900 dark:text-white font-bold mb-2 block transition-colors",
           },
-          tagName: "strong",
-          type: "element",
+          children: [{ type: "text", value: title }],
         },
         {
-          children: children.slice(2),
-          properties: { className: "text-zinc-700 dark:text-zinc-200" },
-          tagName: "div",
           type: "element",
+          tagName: "div",
+          properties: {
+            className: "text-zinc-700 dark:text-zinc-200 transition-colors",
+          },
+          children: children.slice(2),
         },
       ],
       properties: {
         class: [
-          "px-4 -mx-4 relative dark:text-white",
+          "px-4 -mx-4 relative dark:text-white transition-colors",
           "sm:rounded sm:-mr-6 sm:-ml-7 py-4 sm:px-6 sm:border-l-4",
           type === "INFO" &&
             "bg-indigo-300/50 border-indigo-500 dark:bg-indigo-900/50 dark:border-indigo-500",
@@ -66,8 +71,6 @@ export default function rehypeCallout() {
             "bg-red-300/50 border-red-500 dark:bg-red-900/50 dark:border-red-500",
         ].filter(Boolean),
       },
-      tagName: "aside",
-      type: "element",
     })
 
     return SKIP

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -147,6 +147,7 @@ module.exports = {
               marginBottom: theme("spacing.10"),
             },
             p: {
+              ...transition,
               marginTop: theme("spacing.7"),
               marginBottom: theme("spacing.7"),
             },
@@ -319,26 +320,29 @@ module.exports = {
             ".code-block:not(:is(.has-title, .demo)) :is(pre, code)": {
               borderRadius: theme("borderRadius.xl"),
             },
-            "pre:not(.collapsed) code .line:is(.highlight, .focus)": {
-              backgroundColor: "var(--tw-prose-hl-bg)",
-              borderColor: "var(--tw-prose-hl-border)",
+            "pre code .line": {
+              ...transition,
+              transitionDuration: theme("transitionDuration.300"),
+              transitionProperty:
+                "height, border-color, background-color, clip-path",
+              borderColor: "transparent",
               borderLeftWidth: theme("borderWidth.4"),
+              clipPath: "inset(0 0 0 0)",
               display: "inline-block",
+              height: theme("spacing.7"),
               marginInline: `calc(${theme("spacing.8")} * -1)`,
-              paddingRight: theme("spacing.8"),
               paddingLeft: `calc(${theme("spacing.8")} - ${theme(
                 "borderWidth.4",
               )})`,
-              width: `calc(100% + ${theme("spacing.16")})`,
+              paddingRight: theme("spacing.8"),
             },
-            "pre code .line": {
-              ...transition,
-              transitionProperty: "height",
-              transitionDuration: theme("transitionDuration.300"),
-              height: theme("spacing.7"),
-              overflowY: "hidden",
+            "pre:not(.collapsed) code .line:is(.highlight, .focus)": {
+              width: `calc(100% + ${theme("spacing.16")})`,
+              backgroundColor: "var(--tw-prose-hl-bg)",
+              borderColor: "var(--tw-prose-hl-border)",
             },
             "pre.collapsed code .line:not(.focus)": {
+              clipPath: "inset(100% 0 0 0)",
               height: 0,
             },