fix(callouts)!: match callout DOM to Obsidian (#2104)

* fix(callouts): match callout DOM to Obsidian

* use new transition curve for all callout transitions

* chore!: bump version to 4.5.2

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@jackyzha0/quartz",
-  "version": "4.5.1",
+  "version": "4.5.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@jackyzha0/quartz",
-      "version": "4.5.1",
+      "version": "4.5.2",
       "license": "MIT",
       "dependencies": {
         "@clack/prompts": "^0.11.0",

package.json

@@ -2,7 +2,7 @@
   "name": "@jackyzha0/quartz",
   "description": "🌱 publish your digital garden and notes as a website",
   "private": true,
-  "version": "4.5.1",
+  "version": "4.5.2",
   "type": "module",
   "author": "jackyzha0 <j.zhao2k19@gmail.com>",
   "license": "MIT",

quartz/plugins/transformers/ofm.ts

@@ -488,17 +488,8 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>>
                     {
                       data: { hProperties: { className: ["callout-content"] }, hName: "div" },
                       type: "blockquote",
-                      children: [
-                        {
-                          data: {
-                            hProperties: { className: ["callout-content-inner"] },
-                            hName: "div",
-                          },
-                          type: "blockquote",
                       children: [...calloutContent],
                     },
-                      ],
-                    },
                   ]
                 }
 

quartz/styles/callouts.scss

@@ -11,16 +11,13 @@
 
   & > .callout-content {
     display: grid;
-    transition: grid-template-rows 0.3s ease;
-
-    & > .callout-content-inner {
+    transition: grid-template-rows 0.1s cubic-bezier(0.02, 0.01, 0.47, 1);
     overflow: hidden;
 
     & > :first-child {
       margin-top: 0;
     }
   }
-  }
 
   --callout-icon-note: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="2" x2="22" y2="6"></line><path d="M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z"></path></svg>');
   --callout-icon-abstract: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><path d="M12 11h4"></path><path d="M12 16h4"></path><path d="M8 11h.01"></path><path d="M8 16h.01"></path></svg>');
@@ -121,9 +118,20 @@
     --callout-icon: var(--callout-icon-quote);
   }
 
-  &.is-collapsed > .callout-title > .fold-callout-icon {
+  &.is-collapsed {
+    & > .callout-title > .fold-callout-icon {
       transform: rotateZ(-90deg);
     }
+
+    .callout-content > :first-child {
+      transition:
+        height 0.1s cubic-bezier(0.02, 0.01, 0.47, 1),
+        margin 0.1s cubic-bezier(0.02, 0.01, 0.47, 1);
+      overflow-y: clip;
+      height: 0;
+      margin-top: -1rem;
+    }
+  }
 }
 
 .callout-title {