From 8c61649c17896e6b2183c535d018f3a602311856 Mon Sep 17 00:00:00 2001
From: Jothsa <58094796+Jothsa@users.noreply.github.com>
Date: Thu, 25 Apr 2024 16:30:20 -0500
Subject: [PATCH] Drawn Borders (#496)

* add drawn borders

* fix tests

* fix word
---
 docsite/index.html    | 21 ++++++++++++++++++++-
 src/props.borders.css |  6 ++++++
 src/props.borders.js  |  7 +++++++
 test/basic.test.cjs   |  4 ++--
 4 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/docsite/index.html b/docsite/index.html
index c92cb783..8f855cef 100644
--- a/docsite/index.html
+++ b/docsite/index.html
@@ -3211,7 +3211,7 @@ <h5>Relative Sizes</h5>
     <section id="borders">
       <header>
         <h2>Borders</h2>
-        <p>Sizes, corner radii, a circle helper, <a href="https://ishadeed.com/article/conditional-border-radius/">conditional radii</a>, and some blobs.</p>
+        <p>Sizes, corner radii, a circle helper, <a href="https://ishadeed.com/article/conditional-border-radius/">conditional radii</a>, radii that produce a <a href="https://www.getpapercss.com/docs/utilities/borders/">hand-drawn border</a>, and some blobs.</p>
       </header>
       <div class="block-wrap">
         <div>
@@ -3222,6 +3222,7 @@ <h5>Vars Sample</h5>
               --border-size-{1-5}
               --radius-{1-6}
               --radius-round
+              --radius-drawn-{1-6}
               --radius-blob-{1-5}
               --radius-conditional-{1-6}
             </code></pre>
@@ -3241,6 +3242,12 @@ <h5>Usage Sample</h5>
               aspect-ratio: var(--ratio-square);
               border-radius: var(--radius-round);
             }
+            
+            .drawn {
+              inline-size: var(--size-14);
+              border: var(--brown-12) var(--border-size-4) solid;
+              border-radius: var(--radius-drawn-1);
+            }
           </code></pre>
         </div>
       </div>
@@ -3268,6 +3275,18 @@ <h3>Border Radius</h3>
         </article>
       </div>
 
+      <div class="just-for-gap">
+        <h3>Drawn Borders</h3>
+        <article class="border-demos">
+          <div style="border-radius: var(--radius-drawn-1)">1</div>
+          <div style="border-radius: var(--radius-drawn-2)">2</div>
+          <div style="border-radius: var(--radius-drawn-3)">3</div>
+          <div style="border-radius: var(--radius-drawn-4)">4</div>
+          <div style="border-radius: var(--radius-drawn-5)">5</div>
+          <div style="border-radius: var(--radius-drawn-6)">6</div>
+        </article>
+      </div>
+
       <div class="just-for-gap">
         <h3>Blobs</h3>
         <article class="border-demos blobbys">
diff --git a/src/props.borders.css b/src/props.borders.css
index 25b9ea9b..02caaea3 100644
--- a/src/props.borders.css
+++ b/src/props.borders.css
@@ -10,6 +10,12 @@
   --radius-4: 2rem;
   --radius-5: 4rem;
   --radius-6: 8rem;
+  --radius-drawn-1: 255px 15px 225px 15px / 15px 225px 15px 255px;
+  --radius-drawn-2: 125px 10px 20px 185px / 25px 205px 205px 25px;
+  --radius-drawn-3: 15px 255px 15px 225px / 225px 15px 255px 15px;
+  --radius-drawn-4: 15px 25px 155px 25px / 225px 150px 25px 115px;
+  --radius-drawn-5: 250px 25px 15px 20px / 15px 80px 105px 115px;
+  --radius-drawn-6: 28px 100px 20px 15px / 150px 30px 205px 225px;
   --radius-round: 1e5px;
   --radius-blob-1: 30% 70% 70% 30% / 53% 30% 70% 47%;
   --radius-blob-2: 53% 47% 34% 66% / 63% 46% 54% 37%;
diff --git a/src/props.borders.js b/src/props.borders.js
index acd07983..e3c609b9 100644
--- a/src/props.borders.js
+++ b/src/props.borders.js
@@ -12,6 +12,13 @@ export default {
   '--radius-5': '4rem',
   '--radius-6': '8rem',
 
+  '--radius-drawn-1': '255px 15px 225px 15px / 15px 225px 15px 255px',
+  '--radius-drawn-2': '125px 10px 20px 185px / 25px 205px 205px 25px',
+  '--radius-drawn-3': '15px 255px 15px 225px / 225px 15px 255px 15px',
+  '--radius-drawn-4': '15px 25px 155px 25px / 225px 150px 25px 115px',
+  '--radius-drawn-5': '250px 25px 15px 20px / 15px 80px 105px 115px',
+  '--radius-drawn-6': '28px 100px 20px 15px / 150px 30px 205px 225px',
+
   '--radius-round': '1e5px',
   '--radius-blob-1': '30% 70% 70% 30% / 53% 30% 70% 47%',
   '--radius-blob-2': '53% 47% 34% 66% / 63% 46% 54% 37%',
diff --git a/test/basic.test.cjs b/test/basic.test.cjs
index 9a80c1b8..c0ba9664 100644
--- a/test/basic.test.cjs
+++ b/test/basic.test.cjs
@@ -4,7 +4,7 @@ const OpenProps = require('../dist/open-props.cjs')
 const OPtokens = require('../open-props.tokens.json')
 
 test('Should have an all included import', t => {
-  t.is(Object.keys(OpenProps).length, 1692)
+  t.is(Object.keys(OpenProps).length, 1704)
 })
 
 test('Import should have animations', async t => {
@@ -24,7 +24,7 @@ test('Import should have colors', async t => {
 })
 
 test('JSON Import should have colors', async t => {
-  t.is(Object.keys(OPtokens).length, 456)
+  t.is(Object.keys(OPtokens).length, 462)
   t.assert(Object.keys(OPtokens).includes('--orange-0'))
 })