Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Drawn Borders #496

Merged
merged 4 commits into from
Apr 25, 2024
Merged

Drawn Borders #496

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6f9d180
add drawn borders
Jothsa Apr 18, 2024
44c0836
Merge branch 'main' into main
Jothsa Apr 18, 2024
4bf1ce9
fix tests
Jothsa Apr 18, 2024
bb45e89
fix word
Jothsa Apr 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 20 additions & 1 deletion docsite/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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">
Expand Down
6 changes: 6 additions & 0 deletions src/props.borders.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down
7 changes: 7 additions & 0 deletions src/props.borders.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%',
Expand Down
4 changes: 2 additions & 2 deletions test/basic.test.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand All @@ -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'))
})

Expand Down
Loading