Author: Jothsa [58094796+Jothsa@users.noreply.github.com]
Committer: GitHub [noreply@github.com] Thu, 25 Apr 2024 21:30:20 +0000
Hash: 8c61649c17896e6b2183c535d018f3a602311856
Timestamp: Thu, 25 Apr 2024 21:30:20 +0000 (4 months ago)

+35 -3 +/-4 browse
Drawn Borders (#496) 
Drawn Borders (#496)

* add drawn borders

* fix tests

* fix word
1diff --git a/docsite/index.html b/docsite/index.html
2index c92cb78..8f855ce 100644
3--- a/docsite/index.html
4+++ b/docsite/index.html
5 @@ -3211,7 +3211,7 @@
6 <section id="borders">
7 <header>
8 <h2>Borders</h2>
9- <p>Sizes, corner radii, a circle helper, <a href="https://ishadeed.com/article/conditional-border-radius/">conditional radii</a>, and some blobs.</p>
10+ <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>
11 </header>
12 <div class="block-wrap">
13 <div>
14 @@ -3222,6 +3222,7 @@
15 --border-size-{1-5}
16 --radius-{1-6}
17 --radius-round
18+ --radius-drawn-{1-6}
19 --radius-blob-{1-5}
20 --radius-conditional-{1-6}
21 </code></pre>
22 @@ -3241,6 +3242,12 @@
23 aspect-ratio: var(--ratio-square);
24 border-radius: var(--radius-round);
25 }
26+
27+ .drawn {
28+ inline-size: var(--size-14);
29+ border: var(--brown-12) var(--border-size-4) solid;
30+ border-radius: var(--radius-drawn-1);
31+ }
32 </code></pre>
33 </div>
34 </div>
35 @@ -3269,6 +3276,18 @@
36 </div>
37
38 <div class="just-for-gap">
39+ <h3>Drawn Borders</h3>
40+ <article class="border-demos">
41+ <div style="border-radius: var(--radius-drawn-1)">1</div>
42+ <div style="border-radius: var(--radius-drawn-2)">2</div>
43+ <div style="border-radius: var(--radius-drawn-3)">3</div>
44+ <div style="border-radius: var(--radius-drawn-4)">4</div>
45+ <div style="border-radius: var(--radius-drawn-5)">5</div>
46+ <div style="border-radius: var(--radius-drawn-6)">6</div>
47+ </article>
48+ </div>
49+
50+ <div class="just-for-gap">
51 <h3>Blobs</h3>
52 <article class="border-demos blobbys">
53 <div style="border-radius: var(--radius-blob-1)">1</div>
54 diff --git a/src/props.borders.css b/src/props.borders.css
55index 25b9ea9..02caaea 100644
56--- a/src/props.borders.css
57+++ b/src/props.borders.css
58 @@ -10,6 +10,12 @@
59 --radius-4: 2rem;
60 --radius-5: 4rem;
61 --radius-6: 8rem;
62+ --radius-drawn-1: 255px 15px 225px 15px / 15px 225px 15px 255px;
63+ --radius-drawn-2: 125px 10px 20px 185px / 25px 205px 205px 25px;
64+ --radius-drawn-3: 15px 255px 15px 225px / 225px 15px 255px 15px;
65+ --radius-drawn-4: 15px 25px 155px 25px / 225px 150px 25px 115px;
66+ --radius-drawn-5: 250px 25px 15px 20px / 15px 80px 105px 115px;
67+ --radius-drawn-6: 28px 100px 20px 15px / 150px 30px 205px 225px;
68 --radius-round: 1e5px;
69 --radius-blob-1: 30% 70% 70% 30% / 53% 30% 70% 47%;
70 --radius-blob-2: 53% 47% 34% 66% / 63% 46% 54% 37%;
71 diff --git a/src/props.borders.js b/src/props.borders.js
72index acd0798..e3c609b 100644
73--- a/src/props.borders.js
74+++ b/src/props.borders.js
75 @@ -12,6 +12,13 @@ export default {
76 '--radius-5': '4rem',
77 '--radius-6': '8rem',
78
79+ '--radius-drawn-1': '255px 15px 225px 15px / 15px 225px 15px 255px',
80+ '--radius-drawn-2': '125px 10px 20px 185px / 25px 205px 205px 25px',
81+ '--radius-drawn-3': '15px 255px 15px 225px / 225px 15px 255px 15px',
82+ '--radius-drawn-4': '15px 25px 155px 25px / 225px 150px 25px 115px',
83+ '--radius-drawn-5': '250px 25px 15px 20px / 15px 80px 105px 115px',
84+ '--radius-drawn-6': '28px 100px 20px 15px / 150px 30px 205px 225px',
85+
86 '--radius-round': '1e5px',
87 '--radius-blob-1': '30% 70% 70% 30% / 53% 30% 70% 47%',
88 '--radius-blob-2': '53% 47% 34% 66% / 63% 46% 54% 37%',
89 diff --git a/test/basic.test.cjs b/test/basic.test.cjs
90index 9a80c1b..c0ba966 100644
91--- a/test/basic.test.cjs
92+++ b/test/basic.test.cjs
93 @@ -4,7 +4,7 @@ const OpenProps = require('../dist/open-props.cjs')
94 const OPtokens = require('../open-props.tokens.json')
95
96 test('Should have an all included import', t => {
97- t.is(Object.keys(OpenProps).length, 1692)
98+ t.is(Object.keys(OpenProps).length, 1704)
99 })
100
101 test('Import should have animations', async t => {
102 @@ -24,7 +24,7 @@ test('Import should have colors', async t => {
103 })
104
105 test('JSON Import should have colors', async t => {
106- t.is(Object.keys(OPtokens).length, 456)
107+ t.is(Object.keys(OPtokens).length, 462)
108 t.assert(Object.keys(OPtokens).includes('--orange-0'))
109 })
110