Drawn Borders (#496)

* add drawn borders * fix tests * fix word
argyleink · Apr 25, 2024 · 8c61649 · 8c61649
1 parent b1fe022
commit 8c61649
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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'))
 })