Drawn Borders (#496)

* add drawn borders

* fix tests

* fix word

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">

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%;

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%',

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'))
 })