@scribdown/ui-handdrawn 0.1.0

package/src/assets/tag-left-line.svg

@@ -0,0 +1,50 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="4.009" height="48" viewBox="10.511 0 4.009 48" role="img" aria-label="handdrawn tag">
+  <style>
+    .tag-fill-rect,
+    .tag-fill-triangle {
+      fill: none;
+      stroke: #d7a339;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 0.85;
+      opacity: 0.42;
+    }
+
+    .tag-outline-rect,
+    .tag-outline-triangle {
+      fill: none;
+      stroke: #2f6a5f;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 1.7;
+      opacity: 0.78;
+    }
+
+    .tag-inner {
+      fill: none;
+      stroke: #8b6b2e;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 1.2;
+      opacity: 0.38;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .tag-fill-rect,
+      .tag-fill-triangle {
+        stroke: #c49a4a;
+        opacity: 0.48;
+      }
+
+      .tag-outline-rect,
+      .tag-outline-triangle {
+        stroke: #5fbfad;
+      }
+
+      .tag-inner {
+        stroke: #c49a4a;
+      }
+    }
+  </style>
+  <path class="tag-outline-rect" d="M13.619546783529222 10.14278773907572 C13.498353240997531 20.878773319907488, 12.709453801424242 28.46810000333935, 11.757517654262482 40.13468890432269 M11.69994563581422 9.175786388199777 C11.431620132322424 17.959600609075277, 11.784395381207577 24.717414139490575, 11.41096608461812 37.3438706013374" />
+</svg>

package/src/assets/tag-right-hatch.svg

@@ -0,0 +1,51 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="27.005" height="48" viewBox="66.898 0 27.005 48" role="img" aria-label="handdrawn tag">
+  <style>
+    .tag-fill-rect,
+    .tag-fill-triangle {
+      fill: none;
+      stroke: #d7a339;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 0.85;
+      opacity: 0.42;
+    }
+
+    .tag-outline-rect,
+    .tag-outline-triangle {
+      fill: none;
+      stroke: #2f6a5f;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 1.7;
+      opacity: 0.78;
+    }
+
+    .tag-inner {
+      fill: none;
+      stroke: #8b6b2e;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 1.2;
+      opacity: 0.38;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .tag-fill-rect,
+      .tag-fill-triangle {
+        stroke: #c49a4a;
+        opacity: 0.48;
+      }
+
+      .tag-outline-rect,
+      .tag-outline-triangle {
+        stroke: #5fbfad;
+      }
+
+      .tag-inner {
+        stroke: #c49a4a;
+      }
+    }
+  </style>
+  <path class="tag-fill-triangle" d="M70.4237706752122 38.26480130717802 C70.4237706752122 38.26480130717802, 70.4237706752122 38.26480130717802, 70.4237706752122 38.26480130717802 M70.4237706752122 38.26480130717802 C70.4237706752122 38.26480130717802, 70.4237706752122 38.26480130717802, 70.4237706752122 38.26480130717802 M73.4469873344831 34.961023081565735 C71.98366817648477 34.92708062922884, 70.7358433989635 34.0037472716233, 69.65509930142562 33.548700574279295 M73.23832219498306 35.43807427456835 C72.42446913007835 34.919960507517374, 71.30799972853754 34.08322924600833, 70.07104369940784 33.19273557353439 M76.5357928189563 33.42369589327702 C74.45869046134862 32.16536178402244, 73.65220244846036 31.623668278793918, 71.33012385428177 28.142944509685588 M77.0673001471015 32.83793279051462 C75.78428859805638 31.925655383893602, 73.7963050097036 30.692979392591912, 70.73638699292616 28.654910013385663 M81.40515983046376 31.11584017612848 C76.77450155702314 27.40595785081873, 75.45937306562682 26.063533288112236, 68.98331095065755 22.689056984875517 M81.17489882759814 30.016970849787512 C77.56428261934575 28.943711123239098, 74.3713812424317 27.418133071113882, 70.55178897645438 24.121840223328377 M83.02022981597217 30.024242458629196 C79.73132477057155 27.218537660092817, 79.66303306730408 23.704551460609764, 72.31423250233638 18.24733109030525 M84.80078985781608 28.356022306177536 C82.42944170955137 26.229222188616355, 78.6040136950766 25.548900884630427, 69.7489131964685 20.105117541481988 M90.45063426493722 26.022530256870056 C83.23151616946713 22.896816911298135, 80.423212605641 19.511513666320518, 67.79809519127251 12.42297204475464 M89.33360597220305 27.2298116854642 C83.34628217243005 22.688003253096234, 78.43521476428062 19.85982467862676, 69.27251050574944 13.404617160983252" />
+
+</svg>

package/src/assets/tag-right-outline.svg

@@ -0,0 +1,52 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="27.005" height="48" viewBox="66.898 0 27.005 48" role="img" aria-label="handdrawn tag">
+  <style>
+    .tag-fill-rect,
+    .tag-fill-triangle {
+      fill: none;
+      stroke: #d7a339;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 0.85;
+      opacity: 0.42;
+    }
+
+    .tag-outline-rect,
+    .tag-outline-triangle {
+      fill: none;
+      stroke: #2f6a5f;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 1.7;
+      opacity: 0.78;
+    }
+
+    .tag-inner {
+      fill: none;
+      stroke: #8b6b2e;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 1.2;
+      opacity: 0.38;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .tag-fill-rect,
+      .tag-fill-triangle {
+        stroke: #c49a4a;
+        opacity: 0.48;
+      }
+
+      .tag-outline-rect,
+      .tag-outline-triangle {
+        stroke: #5fbfad;
+      }
+
+      .tag-inner {
+        stroke: #c49a4a;
+      }
+    }
+  </style>
+  <path class="tag-outline-triangle" d="M67.81899030609057 8.78106529759243 C77.54079624171952 12.693676162540212, 84.65957415774115 21.805816044128733, 91.1067660103552 22.50208585606888 M67.59937126510776 10.550338016962632 C78.38768789225605 15.400502316764324, 85.76194378321408 19.722923510445984, 90.8853535654489 25.101957783615216" />
+  <path class="tag-outline-triangle" d="M91.00484327096493 24.589532747678458 C86.15963499819627 30.161803733457344, 77.65431767267874 31.346669881318228, 70.49413215536624 39.2532716838643 M93.00340586742387 23.704626417253166 C83.19385184191401 29.44669538330985, 75.75757446244593 35.71291955639376, 69.36792313596234 38.81769603798166" />
+
+</svg>

package/src/assets/toc-branch-toggle.svg

@@ -0,0 +1,54 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22">
+  <style>
+    .ring {
+      fill: none;
+      opacity: 0.72;
+      stroke: #2F6A5F;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 1.3;
+    }
+
+    .ring-dry {
+      fill: none;
+      opacity: 0.36;
+      stroke: #8B6B2E;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 0.8;
+    }
+
+    .chevron {
+      fill: none;
+      stroke: #8B6B2E;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 2;
+    }
+
+    .chevron-dry {
+      fill: none;
+      opacity: 0.46;
+      stroke: #2F6A5F;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 0.9;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .ring,
+      .chevron-dry {
+        stroke: #5FBFAD;
+      }
+
+      .ring-dry,
+      .chevron {
+        stroke: #C49A4A;
+      }
+    }
+  </style>
+  <path class="ring" d="M3.5 11.3 C3.1 6.9 6.7 3.0 11.2 3.3 C15.7 3.5 19.2 6.8 18.8 11.1 C18.5 15.8 15.1 18.9 10.7 18.6 C6.3 18.4 3.7 15.2 3.5 11.3" />
+  <path class="ring-dry" d="M4.8 9.1 C5.8 5.2 9.6 3.8 13.1 4.7 C16.9 5.7 18.1 8.9 17.5 12.4" />
+  <path class="chevron" d="M8.2 6.7 C9.9 8.0 11.9 9.4 13.8 10.9 C11.7 12.5 10.0 13.9 8.1 15.3" />
+  <path class="chevron-dry" d="M8.7 7.9 C10.0 9.0 11.2 9.8 12.5 10.9" />
+</svg>

package/src/assets/underline-stroke.svg

@@ -0,0 +1,44 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="8" viewBox="0 0 96 8" preserveAspectRatio="none">
+  <style>
+    .main {
+      fill: none;
+      stroke: #2F6A5F;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 1.45;
+    }
+
+    .dry {
+      fill: none;
+      opacity: 0.48;
+      stroke: #8B6B2E;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 0.75;
+    }
+
+    .skip {
+      fill: none;
+      opacity: 0.32;
+      stroke: #2F6A5F;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 0.55;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .main,
+      .skip {
+        stroke: #5FBFAD;
+      }
+
+      .dry {
+        stroke: #C49A4A;
+      }
+    }
+  </style>
+  <path class="main" d="M0 4.4 C7.2 3.2 14.0 5.8 20.8 4.2 C29.0 2.2 36.6 6.0 45.0 4.1 C54.4 2.0 63.0 5.8 72.4 4.2 C81.2 2.7 88.6 5.4 96 4.4" />
+  <path class="dry" d="M4.8 6.2 C13.0 4.8 20.8 5.7 29.0 4.5" />
+  <path class="skip" d="M34.0 5.6 C42.8 4.0 51.0 4.9 59.4 3.8" />
+  <path class="dry" d="M64.0 5.8 C73.2 4.3 82.0 4.9 91.2 4.1" />
+</svg>

package/src/styles/blockquote.css

@@ -0,0 +1,40 @@
+/* Blockquote：边框与强调条拆层，强调条高度跟随容器撑满。 */
+.scribdown-markdown blockquote {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  color: var(--scribdown-color-blockquote-text);
+  margin: 0 0 var(--scribdown-space-3);
+  padding: var(--scribdown-space-2) 16px var(--scribdown-space-2) 36px;
+  background: var(--scribdown-color-blockquote-bg);
+}
+
+.scribdown-markdown blockquote::before {
+  content: "";
+  position: absolute;
+  top: -2px;
+  bottom: -2px;
+  left: 0;
+  width: 20px;
+  pointer-events: none;
+  background-image: var(--scribdown-blockquote-bar);
+  background-repeat: repeat-y;
+  background-position: center top;
+  background-size: 100% 72px;
+}
+
+.scribdown-markdown blockquote p {
+  margin-bottom: var(--scribdown-space-1);
+}
+
+.scribdown-markdown blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+.scribdown-markdown blockquote a {
+  color: var(--scribdown-color-blockquote-link);
+}
+
+.scribdown-markdown blockquote a:visited {
+  color: var(--scribdown-color-blockquote-link-visited);
+}