Author: Adam Argyle [argyle@google.com]
Committer: GitHub [noreply@github.com] Mon, 08 Aug 2022 04:36:18 +0000
Hash: b843674f84eb7eede01db4a11b88ac6e42d9dabb
Timestamp: Mon, 08 Aug 2022 04:36:18 +0000 (2 years ago)

+556 -9 +/-12 browse
Masks (#126) 
Masks (#126)

* zigzags, scoops, scallops and corner cuts

* builds files that can be loaded into the page

* update build to latest

* updates masks with latest from temani

* adds npm build script commands

* adds exports for new masks

* adds some docs and demos

* updates naming for consistency

* adds a test

* updates tests to verify bundled output

* fix vertical scalloped mask position

* removes fallbacks from double position gradients

* Temani callouts

* adds compressed filesizes

* adds some grab n go import examples

* adds masks to js module and updates relevant test

* adds some more helper text to the new masks

* easier grab n go docs for masks

* fixes mobile having small demos

* upgrades per https://github.com/argyleink/open-props/pull/126#issuecomment-1207411697

* adds codepen link
1diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
2index 547f53c..c8ea73c 100644
3--- a/.github/workflows/tests.yml
4+++ b/.github/workflows/tests.yml
5 @@ -10,5 +10,5 @@ jobs:
6 - uses: actions/setup-node@v2
7 - run: npm ci
8 - run: npm run build
9- - run: npm run module:js
10+ - run: npm run bundle
11 - run: npm test
12 diff --git a/build/props.js b/build/props.js
13index 7d4c648..fdb5ed8 100644
14--- a/build/props.js
15+++ b/build/props.js
16 @@ -12,6 +12,8 @@ import Gradients from '../src/props.gradients.js'
17 import Shadows from '../src/props.shadows.js'
18 import SVG from '../src/props.svg.js'
19 import Zindex from '../src/props.zindex.js'
20+ import MaskEdges from '../src/props.masks.edges.js'
21+ import MaskCornerCuts from '../src/props.masks.corner-cuts.js'
22
23 import {buildPropsStylesheet} from './to-stylesheet.js'
24 import {toTokens} from './to-tokens.js'
25 @@ -69,6 +71,11 @@ const individual_colors_hsl = {
26 [`${pfx}props.orange-hsl.css`]: ColorsHSL.Orange,
27 }
28
29+ const individuals = {
30+ 'props.masks.edges.css': MaskEdges,
31+ 'props.masks.corner-cuts.css': MaskCornerCuts,
32+ }
33+
34 // gen design tokens
35 const jsonbundle = Object.entries({
36 ...Object.assign({}, ...Object.values(individual_colors)),
37 @@ -94,7 +101,12 @@ const FigmaTokensSync = fs.createWriteStream('../open-props.figma-tokens.sync.js
38 FigmaTokensSync.end(JSON.stringify(figmatokensSYNC, null, 2))
39
40 // gen prop variants
41- Object.entries({...mainbundle, ...individual_colors, ...individual_colors_hsl}).forEach(([filename, props]) => {
42+ Object.entries({
43+ ...mainbundle,
44+ ...individual_colors,
45+ ...individual_colors_hsl,
46+ ...individuals,
47+ }).forEach(([filename, props]) => {
48 buildPropsStylesheet({filename, props}, {selector, prefix})
49 })
50
51 diff --git a/docsite/index.css b/docsite/index.css
52index fb5078e..de53eaa 100644
53--- a/docsite/index.css
54+++ b/docsite/index.css
55 @@ -1,6 +1,8 @@
56 @import "../src/index.css";
57 @import "../src/extra/normalize.css";
58 @import "../src/props.gray-hsl.css";
59+ @import "../src/props.masks.edges.css";
60+ @import "../src/props.masks.corner-cuts.css";
61
62 @import "./syntax-highlight.css";
63
64 @@ -290,6 +292,10 @@ blockquote {
65 --_ink: var(--indigo-9);
66 }
67 }
68+
69+ &.jagged {
70+ -webkit-mask: var(--mask-edge-zig-zag-right);
71+ }
72 }
73 }
74
75 @@ -1099,6 +1105,15 @@ pre[class*="language-"] {
76 }
77 }
78
79+ .mask-demos {
80+ & > div {
81+ min-inline-size: var(--size-fluid-8);
82+ border-width: 0px;
83+ background: var(--brand-bg-gradient) fixed;
84+ text-shadow: 0 1px 0 #000a;
85+ }
86+ }
87+
88 .animation-control-header {
89 display: flex;
90 align-items: center;
91 diff --git a/docsite/index.html b/docsite/index.html
92index 492229d..0316459 100644
93--- a/docsite/index.html
94+++ b/docsite/index.html
95 @@ -473,6 +473,16 @@
96 <a href="https://github.com/argyleink/open-props/blob/main/src/props.gradients.css">gradients.css</a>
97 </div>
98
99+ <div class="size"><strong>0.62</strong>kB</div>
100+ <div class="file">
101+ <a href="https://github.com/argyleink/open-props/blob/main/src/props.masks.edges.css">masks.edges.css</a>
102+ </div>
103+
104+ <div class="size"><strong>0.23</strong>kB</div>
105+ <div class="file">
106+ <a href="https://github.com/argyleink/open-props/blob/main/src/props.masks.corner-cut.css">masks.corner-cut.css</a>
107+ </div>
108+
109 <div class="size"><strong>0.38</strong>kB</div>
110 <div class="file">
111 <a href="https://github.com/argyleink/open-props/blob/main/src/props.media.css">media.css</a>
112 @@ -519,8 +529,6 @@
113 <div class="size"><strong>??</strong></div>
114 <div class="file">clips.css <small class="yellow-badge">WIP</small></div>
115 <div class="size"><strong>??</strong></div>
116- <div class="file">masks.css <small class="yellow-badge">WIP</small></div>
117- <div class="size"><strong>??</strong></div>
118 <div class="file">variable-fonts.css <small class="yellow-badge">WIP</small></div>
119 <div class="size"><strong>??</strong></div>
120 <div class="file">lists.css <small class="yellow-badge">WIP</small></div>
121 @@ -3036,6 +3044,194 @@
122 </div>
123 </section>
124
125+ <section id="masks">
126+ <header>
127+ <h2>Masks</h2>
128+ <div class="block-wrap">
129+ <p>Rad edges and corner-cuts ready to go. A huge shout out to <a href="https://twitter.com/ChallengesCss">Temani Afif</a> and <a href="https://github.com/argyleink/open-props/discussions/71">their amazing mask work</a>. Be sure to check out their <a href="https://css-generators.com/">CSS Generators</a> too; customize the size and distribution of these masks. Try on <a href="https://codepen.io/argyleink/pen/mdxKrxR">Codepen</a>.</p>
130+ <blockquote class="icon-quote jagged">
131+ <svg viewBox="0 0 24 24">
132+ <path
133+ d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
134+ </svg>
135+ <span>Not part of the main bundle. Must be individually imported.</span>
136+ </blockquote>
137+ </div>
138+ </header>
139+ <div class="block-wrap">
140+ <div>
141+ <h5>NPM Imported Usage Sample</h5>
142+ <pre class="language-css"><code>
143+ @import "open-props/masks/edges";
144+ @import "open-props/masks/corner-cuts";
145+
146+ .box-with-corner-cuts {
147+ -webkit-mask: var(--mask-corner-cut-angles-2);
148+ }
149+
150+ .box-with-zig-zag-on-bottom {
151+ -webkit-mask: var(--mask-edge-zig-zag-bottom;
152+ }
153+ </code></pre>
154+ </div>
155+ </div>
156+
157+ <div class="just-for-gap">
158+ <header>
159+ <h3>Mask Edges</h3>
160+ <pre class="language-css"><code>
161+ /* NPM */
162+ @import "open-props/masks/edges";
163+ @import "open-props/src/props.masks.edges.css";
164+ @import "open-props/masks.edges.min.css";
165+
166+ /* CDN */
167+ @import "https://unpkg.com/open-props/masks.edges.min.css";
168+ </code></pre>
169+ </header>
170+
171+ <h5>Scoops</h5>
172+ <article class="border-demos mask-demos">
173+ <div style="-webkit-mask: var(--mask-edge-scoop-top)">Top</div>
174+ <div style="-webkit-mask: var(--mask-edge-scoop-right)">Right</div>
175+ <div style="-webkit-mask: var(--mask-edge-scoop-bottom)">Bottom</div>
176+ <div style="-webkit-mask: var(--mask-edge-scoop-left)">Left</div>
177+ <div style="-webkit-mask: var(--mask-edge-scoop-vertical)">Vertical</div>
178+ <div style="-webkit-mask: var(--mask-edge-scoop-horizontal)">Horizontal</div>
179+ </article>
180+ <pre class="language-css"><code>
181+ --mask-edge-scoop-{top,right,bottom,left,vertical,horizontal}
182+
183+ .mask-usage {
184+ -webkit-mask: var(--mask-edge-scoop-top);
185+ }
186+ </code></pre>
187+
188+ <br>
189+
190+ <h5>Scalloped</h5>
191+ <article class="border-demos mask-demos">
192+ <div style="-webkit-mask: var(--mask-edge-scalloped-top)">Top</div>
193+ <div style="-webkit-mask: var(--mask-edge-scalloped-right)">Right</div>
194+ <div style="-webkit-mask: var(--mask-edge-scalloped-bottom)">Bottom</div>
195+ <div style="-webkit-mask: var(--mask-edge-scalloped-left)">Left</div>
196+ <div style="-webkit-mask: var(--mask-edge-scalloped-vertical)">Vertical</div>
197+ <div style="-webkit-mask: var(--mask-edge-scalloped-horizontal)">Horizontal</div>
198+ <div style="-webkit-mask: var(--mask-edge-scalloped)">All</div>
199+ </article>
200+ <pre class="language-css"><code>
201+ --mask-edge-scalloped-{edges,top,right,bottom,left,vertical,horizontal}
202+
203+ .mask-usage {
204+ -webkit-mask: var(--mask-edge-scalloped-edges);
205+ }
206+ </code></pre>
207+
208+ <br>
209+
210+ <h5>Drips</h5>
211+ <article class="border-demos mask-demos">
212+ <div style="-webkit-mask: var(--mask-edge-drip-top)">Top</div>
213+ <div style="-webkit-mask: var(--mask-edge-drip-right)">Right</div>
214+ <div style="-webkit-mask: var(--mask-edge-drip-bottom)">Bottom</div>
215+ <div style="-webkit-mask: var(--mask-edge-drip-left)">Left</div>
216+ <div style="-webkit-mask: var(--mask-edge-drip-vertical)">Vertical</div>
217+ <div style="-webkit-mask: var(--mask-edge-drip-horizontal)">Horizontal</div>
218+ </article>
219+ <pre class="language-css"><code>
220+ --mask-edge-drip-{top,right,bottom,left,vertical,horizontal}
221+
222+ .mask-usage {
223+ -webkit-mask: var(--mask-edge-drip-bottom);
224+ }
225+ </code></pre>
226+
227+ <br>
228+
229+ <h5>Zig-Zag</h5>
230+ <article class="border-demos mask-demos">
231+ <div style="-webkit-mask: var(--mask-edge-zig-zag-top)">Top</div>
232+ <div style="-webkit-mask: var(--mask-edge-zig-zag-right)">Right</div>
233+ <div style="-webkit-mask: var(--mask-edge-zig-zag-bottom)">Bottom</div>
234+ <div style="-webkit-mask: var(--mask-edge-zig-zag-left)">Left</div>
235+ <div style="-webkit-mask: var(--mask-edge-zig-zag-vertical)">Vertical</div>
236+ <div style="-webkit-mask: var(--mask-edge-zig-zag-horizontal)">Horizontal</div>
237+ </article>
238+ <pre class="language-css"><code>
239+ --mask-edge-zig-zag-{top,right,bottom,left,vertical,horizontal}
240+
241+ .mask-usage {
242+ -webkit-mask: var(--mask-edge-zig-zag-bottom);
243+ }
244+ </code></pre>
245+ </div>
246+
247+ <div class="just-for-gap">
248+ <header>
249+ <h3>Mask Corner Cuts</h3>
250+ <pre class="language-css"><code>
251+ /* NPM */
252+ @import "open-props/masks/corner-cuts";
253+ @import "open-props/src/props.masks.corner-cuts.css";
254+ @import "open-props/masks.corner-cuts.min.css";
255+
256+ /* CDN */
257+ @import "https://unpkg.com/open-props/masks.corner-cuts.min.css";
258+ </code></pre>
259+ </header>
260+
261+ <h5>Circles</h5>
262+ <div class="block-wrap">
263+ <article class="border-demos mask-demos">
264+ <div style="-webkit-mask: var(--mask-corner-cut-circles-1)">1</div>
265+ <div style="-webkit-mask: var(--mask-corner-cut-circles-2)">2</div>
266+ <div style="-webkit-mask: var(--mask-corner-cut-circles-3)">3</div>
267+ </article>
268+ <pre class="language-css"><code>
269+ --mask-corner-cut-circles-{1,2,3}
270+
271+ .mask-usage {
272+ -webkit-mask: var(--mask-corner-cut-circles-2);
273+ }
274+ </code></pre>
275+ </div>
276+
277+ <br>
278+
279+ <h5>Squares</h5>
280+ <div class="block-wrap">
281+ <article class="border-demos mask-demos">
282+ <div style="-webkit-mask: var(--mask-corner-cut-squares-1)">1</div>
283+ <div style="-webkit-mask: var(--mask-corner-cut-squares-2)">2</div>
284+ <div style="-webkit-mask: var(--mask-corner-cut-squares-3)">3</div>
285+ </article>
286+ <pre class="language-css"><code>
287+ --mask-corner-cut-squares-{1,2,3}
288+
289+ .mask-usage {
290+ -webkit-mask: var(--mask-corner-cut-squares-2);
291+ }
292+ </code></pre>
293+ </div>
294+
295+ <h5>Angles</h5>
296+ <div class="block-wrap">
297+ <article class="border-demos mask-demos">
298+ <div style="-webkit-mask: var(--mask-corner-cut-angles-1)">1</div>
299+ <div style="-webkit-mask: var(--mask-corner-cut-angles-2)">2</div>
300+ <div style="-webkit-mask: var(--mask-corner-cut-angles-3)">3</div>
301+ </article>
302+ <pre class="language-css"><code>
303+ --mask-corner-cut-angles-{1,2,3}
304+
305+ .mask-usage {
306+ -webkit-mask: var(--mask-corner-cut-angles-2);
307+ }
308+ </code></pre>
309+ </div>
310+ </div>
311+ </section>
312+
313 <ul id="scroll-nav" class="module-list place-full">
314 <li><a href="#colors">Colors</a></li>
315 <li><a href="#gradients">Gradients</a></li>
316 @@ -3048,6 +3244,7 @@
317 <li><a href="#borders">Borders</a></li>
318 <li><a href="#z-index">Z-Index</a></li>
319 <li><a href="#media-queries">Media Queries</a></li>
320+ <li><a href="#masks">Masks</a></li>
321 </ul>
322
323 <footer class="place-full">
324 diff --git a/package.json b/package.json
325index 2182ffe..0b68e91 100644
326--- a/package.json
327+++ b/package.json
328 @@ -66,6 +66,8 @@
329 "./indigo-hsl": "./indigo-hsl.min.css",
330 "./lime": "./lime.min.css",
331 "./lime-hsl": "./lime-hsl.min.css",
332+ "./masks/edges": "./masks.edges.min.css",
333+ "./masks/corner-cuts": "./masks.corner-cuts.min.css",
334 "./media": "./media.min.css",
335 "./orange": "./orange.min.css",
336 "./orange-hsl": "./orange-hsl.min.css",
337 @@ -154,6 +156,8 @@
338 "lib:sizes": "postcss src/props.sizes.css -o sizes.min.css",
339 "lib:supports": "postcss src/props.supports.css -o supports.min.css",
340 "lib:zindex": "postcss src/props.zindex.css -o zindex.min.css",
341+ "lib:masks:edges": "postcss src/props.masks.edges.css -o masks.edges.min.css",
342+ "lib:masks:cornercuts": "postcss src/props.masks.corner-cuts.css -o masks.corner-cuts.min.css",
343 "lib:colors": "postcss src/props.colors.css -o colors.min.css",
344 "lib:colors-hsl": "postcss src/props.colors-hsl.css -o colors-hsl.min.css",
345 "lib:colors:gray": "postcss src/props.gray.css -o gray.min.css",
346 diff --git a/postcss.config.cjs b/postcss.config.cjs
347index f219c00..7ac657c 100644
348--- a/postcss.config.cjs
349+++ b/postcss.config.cjs
350 @@ -24,7 +24,8 @@ module.exports = {
351 'focus-visible-pseudo-class': false,
352 'focus-within-pseudo-class': false,
353 'color-functional-notation': false,
354- 'custom-media-queries': {preserve:inlineMediaQueries}
355+ 'custom-media-queries': {preserve:inlineMediaQueries},
356+ 'double-position-gradients': false,
357 }
358 }),
359 combineSelectors(),
360 diff --git a/src/index.js b/src/index.js
361index 9ee0662..05ee4c7 100644
362--- a/src/index.js
363+++ b/src/index.js
364 @@ -10,6 +10,8 @@ import Gradients from './props.gradients.js'
365 import Shadows from './props.shadows.js'
366 import SVG from './props.svg.js'
367 import Zindex from './props.zindex.js'
368+ import MaskEdges from './props.masks.edges.js'
369+ import MaskCornerCuts from './props.masks.corner-cuts.js'
370
371 const camelize = text => {
372 text = text.replace(/[-]+(.)?/g, (_, c) => c
373 @@ -37,6 +39,8 @@ const OpenProps = mapToObjectNotation({
374 ...Gradients,
375 ...Shadows,
376 ...Zindex,
377+ ...MaskEdges,
378+ ...MaskCornerCuts,
379 })
380
381 export default OpenProps
382\ No newline at end of file
383 diff --git a/src/props.masks.corner-cuts.css b/src/props.masks.corner-cuts.css
384new file mode 100644
385index 0000000..fd8b040
386--- /dev/null
387+++ b/src/props.masks.corner-cuts.css
388 @@ -0,0 +1,35 @@
389+ :where(html) {
390+ --mask-corner-cut-circles-1: radial-gradient(1rem at 1rem 1rem,#0000 99%,#000) -1rem -1rem;
391+ --mask-corner-cut-circles-2: radial-gradient(2rem at 2rem 2rem,#0000 99%,#000) -2rem -2rem;
392+ --mask-corner-cut-circles-3: radial-gradient(4rem at 4rem 4rem,#0000 99%,#000) -4rem -4rem;
393+ --mask-corner-cut-squares-1:
394+ conic-gradient(from -90deg at 1rem 1rem,#0000 90deg,#000 0)
395+ 0 0/calc(100% - 1rem) calc(100% - 1rem)
396+ ;
397+ --mask-corner-cut-squares-2:
398+ conic-gradient(from -90deg at 2rem 2rem,#0000 90deg,#000 0)
399+ 0 0/calc(100% - 2rem) calc(100% - 2rem)
400+ ;
401+ --mask-corner-cut-squares-3:
402+ conic-gradient(from -90deg at 4rem 4rem,#0000 90deg,#000 0)
403+ 0 0/calc(100% - 4rem) calc(100% - 4rem)
404+ ;
405+ --mask-corner-cut-angles-1:
406+ conic-gradient(from -45deg at 1rem 1rem,#0000 90deg,#000 0)
407+ calc(-1*1rem) 0/100% 51% repeat-x,
408+ conic-gradient(from 135deg at 1rem calc(100% - 1rem),#0000 90deg,#000 0)
409+ calc(-1*1rem) 100%/100% 51% repeat-x
410+ ;
411+ --mask-corner-cut-angles-2:
412+ conic-gradient(from -45deg at 2rem 2rem,#0000 90deg,#000 0)
413+ calc(-1*2rem) 0/100% 51% repeat-x,
414+ conic-gradient(from 135deg at 2rem calc(100% - 2rem),#0000 90deg,#000 0)
415+ calc(-1*2rem) 100%/100% 51% repeat-x
416+ ;
417+ --mask-corner-cut-angles-3:
418+ conic-gradient(from -45deg at 4rem 4rem,#0000 90deg,#000 0)
419+ calc(-1*4rem) 0/100% 51% repeat-x,
420+ conic-gradient(from 135deg at 4rem calc(100% - 4rem),#0000 90deg,#000 0)
421+ calc(-1*4rem) 100%/100% 51% repeat-x
422+ ;
423+ }
424 diff --git a/src/props.masks.corner-cuts.js b/src/props.masks.corner-cuts.js
425new file mode 100644
426index 0000000..b2ecde3
427--- /dev/null
428+++ b/src/props.masks.corner-cuts.js
429 @@ -0,0 +1,36 @@
430+ // big thanks to Temani Afif: https://twitter.com/ChallengesCss
431+ export default {
432+ '--mask-corner-cut-circles-1': 'radial-gradient(1rem at 1rem 1rem,#0000 99%,#000) -1rem -1rem',
433+ '--mask-corner-cut-circles-2': 'radial-gradient(2rem at 2rem 2rem,#0000 99%,#000) -2rem -2rem',
434+ '--mask-corner-cut-circles-3': 'radial-gradient(4rem at 4rem 4rem,#0000 99%,#000) -4rem -4rem',
435+ '--mask-corner-cut-squares-1': `
436+ conic-gradient(from -90deg at 1rem 1rem,#0000 90deg,#000 0)
437+ 0 0/calc(100% - 1rem) calc(100% - 1rem)
438+ `,
439+ '--mask-corner-cut-squares-2': `
440+ conic-gradient(from -90deg at 2rem 2rem,#0000 90deg,#000 0)
441+ 0 0/calc(100% - 2rem) calc(100% - 2rem)
442+ `,
443+ '--mask-corner-cut-squares-3': `
444+ conic-gradient(from -90deg at 4rem 4rem,#0000 90deg,#000 0)
445+ 0 0/calc(100% - 4rem) calc(100% - 4rem)
446+ `,
447+ '--mask-corner-cut-angles-1': `
448+ conic-gradient(from -45deg at 1rem 1rem,#0000 90deg,#000 0)
449+ calc(-1*1rem) 0/100% 51% repeat-x,
450+ conic-gradient(from 135deg at 1rem calc(100% - 1rem),#0000 90deg,#000 0)
451+ calc(-1*1rem) 100%/100% 51% repeat-x
452+ `,
453+ '--mask-corner-cut-angles-2': `
454+ conic-gradient(from -45deg at 2rem 2rem,#0000 90deg,#000 0)
455+ calc(-1*2rem) 0/100% 51% repeat-x,
456+ conic-gradient(from 135deg at 2rem calc(100% - 2rem),#0000 90deg,#000 0)
457+ calc(-1*2rem) 100%/100% 51% repeat-x
458+ `,
459+ '--mask-corner-cut-angles-3': `
460+ conic-gradient(from -45deg at 4rem 4rem,#0000 90deg,#000 0)
461+ calc(-1*4rem) 0/100% 51% repeat-x,
462+ conic-gradient(from 135deg at 4rem calc(100% - 4rem),#0000 90deg,#000 0)
463+ calc(-1*4rem) 100%/100% 51% repeat-x
464+ `,
465+ }
466 diff --git a/src/props.masks.edges.css b/src/props.masks.edges.css
467new file mode 100644
468index 0000000..6a599ef
469--- /dev/null
470+++ b/src/props.masks.edges.css
471 @@ -0,0 +1,116 @@
472+ :where(html) {
473+ --mask-edge-scoop-bottom:
474+ linear-gradient(#000 0 0) top / 100% calc(100% - 20px) no-repeat,
475+ radial-gradient(circle farthest-side,#0000 97%,#000) 50% calc(100% - 20px)/calc(1.9 * 20px) calc(2 * 20px)
476+ ;
477+ --mask-edge-scoop-top:
478+ linear-gradient(#000 0 0) bottom/100% calc(100% - 20px) no-repeat,
479+ radial-gradient(circle farthest-side,#0000 97%,#000) 50% 20px / calc(1.9 * 20px) calc(2 * 20px)
480+ ;
481+ --mask-edge-scoop-vertical:
482+ linear-gradient(#000 0 0) center / 100% calc(100% - 2 * 20px) no-repeat,
483+ radial-gradient(circle farthest-side at top,#0000 97%,#000) top / calc(1.9 * 20px) 20px repeat-x,
484+ radial-gradient(circle farthest-side at bottom,#0000 97%,#000) bottom/calc(1.9 * 20px) 20px repeat-x
485+ ;
486+ --mask-edge-scoop-left:
487+ linear-gradient(#000 0 0) right / calc(100% - 20px) 100% no-repeat,
488+ radial-gradient(circle farthest-side,#0000 97%,#000) 20px 50%/calc(2 * 20px) calc(1.9 * 20px)
489+ ;
490+ --mask-edge-scoop-right:
491+ linear-gradient(#000 0 0) left / calc(100% - 20px) 100% no-repeat,
492+ radial-gradient(circle farthest-side,#0000 97%,#000) calc(100% - 20px) 50%/calc(2 * 20px) calc(1.9 * 20px)
493+ ;
494+ --mask-edge-scoop-horizontal:
495+ linear-gradient(#000 0 0) center / calc(100% - 2 * 20px) 100% no-repeat,
496+ radial-gradient(circle farthest-side at left,#0000 97%,#000) left / 20px calc(1.9 * 20px) repeat-y,
497+ radial-gradient(circle farthest-side at right,#0000 97%,#000) right / 20px calc(1.9 * 20px) repeat-y
498+ ;
499+ --mask-edge-scalloped:
500+ radial-gradient(farthest-side,#000 97%,#0000) 0 0 / 20px 20px round,
501+ linear-gradient(#000 0 0) 50%/calc(100% - 20px) calc(100% - 20px) no-repeat
502+ ;
503+ --mask-edge-scalloped-bottom:
504+ linear-gradient(#000 0 0) top / 100% calc(100% - 20px) no-repeat,
505+ radial-gradient(circle farthest-side at top,#000 97%,#0000) bottom/calc(1.9 * 20px) 20px repeat-x
506+ ;
507+ --mask-edge-scalloped-top:
508+ linear-gradient(#000 0 0) bottom/100% calc(100% - 20px) no-repeat,
509+ radial-gradient(circle farthest-side at bottom,#000 97%,#0000) top / calc(1.9 * 20px) 20px repeat-x
510+ ;
511+ --mask-edge-scalloped-vertical:
512+ linear-gradient(#000 0 0) center / 100% calc(100% - 2 * 20px) no-repeat,
513+ radial-gradient(circle farthest-side,#000 97%,#0000) center / calc(1.9 * 20px) calc(2 * 20px) repeat space
514+ ;
515+ --mask-edge-scalloped-left:
516+ linear-gradient(#000 0 0) right / calc(100% - 20px) 100% no-repeat,
517+ radial-gradient(circle farthest-side at right,#000 97%,#0000) left / 20px calc(1.9 * 20px) repeat-y
518+ ;
519+ --mask-edge-scalloped-right:
520+ linear-gradient(#000 0 0) left / calc(100% - 20px) 100% no-repeat,
521+ radial-gradient(circle farthest-side at left,#000 97%,#0000) right / 20px calc(1.9 * 20px) repeat-y
522+ ;
523+ --mask-edge-scalloped-horizontal:
524+ linear-gradient(#000 0 0) center / calc(100% - 2 * 20px) 100% no-repeat,
525+ radial-gradient(circle farthest-side,#000 97%,#0000) 0 / calc(2 * 20px) calc(1.9 * 20px) space repeat
526+ ;
527+ --mask-edge-drip-bottom:
528+ linear-gradient(#000 0 0) top / 100% calc(100% - 2 * 20px) no-repeat,
529+ radial-gradient(circle farthest-side at bottom,#0000 97%,#000) 50% calc(100% - 20px)/calc(2 * 20px) 20px repeat-x,
530+ radial-gradient(circle closest-side at 25% 50%,#000 97%,#0000) calc(50% - 20px) 99%/calc(2 * 2 * 20px) calc(2 * 20px) repeat-x
531+ ;
532+ --mask-edge-drip-top:
533+ linear-gradient(#000 0 0) bottom/100% calc(100% - 2 * 20px) no-repeat,
534+ radial-gradient(circle farthest-side at top,#0000 97%,#000) 50% 20px / calc(2 * 20px) 20px repeat-x,
535+ radial-gradient(circle closest-side at 25% 50%,#000 97%,#0000) calc(50% - 20px) 1%/calc(4 * 20px) calc(2 * 20px) repeat-x
536+ ;
537+ --mask-edge-drip-vertical:
538+ linear-gradient(#000 0 0) center / 100% calc(100% - 4 * 20px) no-repeat,
539+ radial-gradient(circle farthest-side at top,#0000 97%,#000) 50% 20px / calc(2 * 20px) 20px repeat-x,
540+ radial-gradient(circle farthest-side at bottom,#0000 97%,#000) 50% calc(100% - 20px)/calc(2 * 20px) 20px repeat-x,
541+ radial-gradient(circle closest-side at 25% 50%,#000 97%,#0000) calc(50% - 20px) 1%/calc(4 * 20px) calc(2 * 20px) repeat-x,
542+ radial-gradient(circle closest-side at 25% 50%,#000 97%,#0000) calc(50% - 3*20px) 99%/calc(4 * 20px) calc(2 * 20px) repeat-x
543+ ;
544+ --mask-edge-drip-left:
545+ linear-gradient(#000 0 0) right / calc(100% - 2 * 20px) 100% no-repeat,
546+ radial-gradient(circle farthest-side at left,#0000 97%,#000) 20px 50%/20px calc(2 * 20px) repeat-y,
547+ radial-gradient(circle closest-side at 50% 25%,#000 97%,#0000) 1% calc(50% - 20px)/calc(2 * 20px) calc(4 * 20px) repeat-y
548+ ;
549+ --mask-edge-drip-right:
550+ linear-gradient(#000 0 0) left / calc(100% - 2 * 20px) 100% no-repeat,
551+ radial-gradient(circle farthest-side at right,#0000 97%,#000) calc(100% - 20px) 50%/20px calc(2 * 20px) repeat-y,
552+ radial-gradient(circle closest-side at 50% 25%,#000 97%,#0000) 99% calc(50% - 20px)/calc(2 * 20px) calc(4 * 20px) repeat-y
553+ ;
554+ --mask-edge-drip-horizontal:
555+ linear-gradient(#000 0 0) center / calc(100% - 4 * 20px) 100% no-repeat,
556+ radial-gradient(circle farthest-side at left,#0000 97%,#000) 20px 50%/20px calc(2 * 20px) repeat-y,
557+ radial-gradient(circle farthest-side at right,#0000 97%,#000) calc(100% - 20px) 50%/20px calc(2 * 20px) repeat-y,
558+ radial-gradient(circle closest-side at 50% 25%,#000 97%,#0000) 1% calc(50% - 20px)/calc(2 * 20px) calc(4 * 20px) repeat-y,
559+ radial-gradient(circle closest-side at 50% 25%,#000 97%,#0000) 99% calc(50% - 3*20px)/calc(2 * 20px) calc(4 * 20px) repeat-y
560+ ;
561+ --mask-edge-zig-zag-top:
562+ linear-gradient(#000 0 0) bottom/100% calc(100% - 20px) no-repeat,
563+ conic-gradient(from 135deg at top,#0000,#000 1deg 90deg,#0000 91deg) top / calc(2 * 20px) 20px repeat-x
564+ ;
565+ --mask-edge-zig-zag-bottom:
566+ linear-gradient(#000 0 0) top / 100% calc(100% - 20px) no-repeat,
567+ conic-gradient(from -45deg at bottom,#0000,#000 1deg 90deg,#0000 91deg) bottom/calc(2 * 20px) 20px repeat-x
568+ ;
569+ --mask-edge-zig-zag-left:
570+ linear-gradient(#000 0 0) right / calc(100% - 20px) 100% no-repeat,
571+ conic-gradient(from 45deg at left,#0000,#000 1deg 90deg,#0000 91deg) left / 20px calc(2 * 20px) repeat-y
572+ ;
573+ --mask-edge-zig-zag-right:
574+ linear-gradient(#000 0 0) left / calc(100% - 20px) 100% no-repeat,
575+ conic-gradient(from -135deg at right,#0000,#000 1deg 90deg,#0000 91deg) right / 20px calc(2 * 20px) repeat-y
576+ ;
577+ --mask-edge-zig-zag-horizontal:
578+ linear-gradient(#000 0 0) center / calc(100% - 2 * 20px) 100% no-repeat,
579+ conic-gradient(from 45deg at left,#0000,#000 1deg 90deg,#0000 91deg) left / 20px calc(2 * 20px) repeat-y,
580+ conic-gradient(from -135deg at right,#0000,#000 1deg 90deg,#0000 91deg) right / 20px calc(2 * 20px) repeat-y
581+ ;
582+ --mask-edge-zig-zag-vertical:
583+ linear-gradient(#000 0 0) center / 100% calc(100% - 2 * 20px) no-repeat,
584+ conic-gradient(from 135deg at top,#0000,#000 1deg 90deg,#0000 91deg) top / calc(2 * 20px) 20px repeat-x,
585+ conic-gradient(from -45deg at bottom,#0000,#000 1deg 90deg,#0000 91deg) bottom/calc(2 * 20px) 20px repeat-x
586+ ;
587+ }
588 diff --git a/src/props.masks.edges.js b/src/props.masks.edges.js
589new file mode 100644
590index 0000000..926f503
591--- /dev/null
592+++ b/src/props.masks.edges.js
593 @@ -0,0 +1,118 @@
594+ // big thanks to Temani Afif: https://twitter.com/ChallengesCss
595+ // https://github.com/argyleink/open-props/discussions/71
596+ export default {
597+ '--mask-edge-scoop-bottom': `
598+ linear-gradient(#000 0 0) top / 100% calc(100% - 20px) no-repeat,
599+ radial-gradient(circle farthest-side,#0000 97%,#000) 50% calc(100% - 20px)/calc(1.9 * 20px) calc(2 * 20px)
600+ `,
601+ '--mask-edge-scoop-top': `
602+ linear-gradient(#000 0 0) bottom/100% calc(100% - 20px) no-repeat,
603+ radial-gradient(circle farthest-side,#0000 97%,#000) 50% 20px / calc(1.9 * 20px) calc(2 * 20px)
604+ `,
605+ '--mask-edge-scoop-vertical': `
606+ linear-gradient(#000 0 0) center / 100% calc(100% - 2 * 20px) no-repeat,
607+ radial-gradient(circle farthest-side at top,#0000 97%,#000) top / calc(1.9 * 20px) 20px repeat-x,
608+ radial-gradient(circle farthest-side at bottom,#0000 97%,#000) bottom/calc(1.9 * 20px) 20px repeat-x
609+ `,
610+ '--mask-edge-scoop-left': `
611+ linear-gradient(#000 0 0) right / calc(100% - 20px) 100% no-repeat,
612+ radial-gradient(circle farthest-side,#0000 97%,#000) 20px 50%/calc(2 * 20px) calc(1.9 * 20px)
613+ `,
614+ '--mask-edge-scoop-right': `
615+ linear-gradient(#000 0 0) left / calc(100% - 20px) 100% no-repeat,
616+ radial-gradient(circle farthest-side,#0000 97%,#000) calc(100% - 20px) 50%/calc(2 * 20px) calc(1.9 * 20px)
617+ `,
618+ '--mask-edge-scoop-horizontal': `
619+ linear-gradient(#000 0 0) center / calc(100% - 2 * 20px) 100% no-repeat,
620+ radial-gradient(circle farthest-side at left,#0000 97%,#000) left / 20px calc(1.9 * 20px) repeat-y,
621+ radial-gradient(circle farthest-side at right,#0000 97%,#000) right / 20px calc(1.9 * 20px) repeat-y
622+ `,
623+ '--mask-edge-scalloped': `
624+ radial-gradient(farthest-side,#000 97%,#0000) 0 0 / 20px 20px round,
625+ linear-gradient(#000 0 0) 50%/calc(100% - 20px) calc(100% - 20px) no-repeat
626+ `,
627+ '--mask-edge-scalloped-bottom': `
628+ linear-gradient(#000 0 0) top / 100% calc(100% - 20px) no-repeat,
629+ radial-gradient(circle farthest-side at top,#000 97%,#0000) bottom/calc(1.9 * 20px) 20px repeat-x
630+ `,
631+ '--mask-edge-scalloped-top': `
632+ linear-gradient(#000 0 0) bottom/100% calc(100% - 20px) no-repeat,
633+ radial-gradient(circle farthest-side at bottom,#000 97%,#0000) top / calc(1.9 * 20px) 20px repeat-x
634+ `,
635+ '--mask-edge-scalloped-vertical': `
636+ linear-gradient(#000 0 0) center / 100% calc(100% - 2 * 20px) no-repeat,
637+ radial-gradient(circle farthest-side,#000 97%,#0000) center / calc(1.9 * 20px) calc(2 * 20px) repeat space
638+ `,
639+ '--mask-edge-scalloped-left': `
640+ linear-gradient(#000 0 0) right / calc(100% - 20px) 100% no-repeat,
641+ radial-gradient(circle farthest-side at right,#000 97%,#0000) left / 20px calc(1.9 * 20px) repeat-y
642+ `,
643+ '--mask-edge-scalloped-right': `
644+ linear-gradient(#000 0 0) left / calc(100% - 20px) 100% no-repeat,
645+ radial-gradient(circle farthest-side at left,#000 97%,#0000) right / 20px calc(1.9 * 20px) repeat-y
646+ `,
647+ '--mask-edge-scalloped-horizontal': `
648+ linear-gradient(#000 0 0) center / calc(100% - 2 * 20px) 100% no-repeat,
649+ radial-gradient(circle farthest-side,#000 97%,#0000) 0 / calc(2 * 20px) calc(1.9 * 20px) space repeat
650+ `,
651+ '--mask-edge-drip-bottom': `
652+ linear-gradient(#000 0 0) top / 100% calc(100% - 2 * 20px) no-repeat,
653+ radial-gradient(circle farthest-side at bottom,#0000 97%,#000) 50% calc(100% - 20px)/calc(2 * 20px) 20px repeat-x,
654+ radial-gradient(circle closest-side at 25% 50%,#000 97%,#0000) calc(50% - 20px) 99%/calc(2 * 2 * 20px) calc(2 * 20px) repeat-x
655+ `,
656+ '--mask-edge-drip-top': `
657+ linear-gradient(#000 0 0) bottom/100% calc(100% - 2 * 20px) no-repeat,
658+ radial-gradient(circle farthest-side at top,#0000 97%,#000) 50% 20px / calc(2 * 20px) 20px repeat-x,
659+ radial-gradient(circle closest-side at 25% 50%,#000 97%,#0000) calc(50% - 20px) 1%/calc(4 * 20px) calc(2 * 20px) repeat-x
660+ `,
661+ '--mask-edge-drip-vertical': `
662+ linear-gradient(#000 0 0) center / 100% calc(100% - 4 * 20px) no-repeat,
663+ radial-gradient(circle farthest-side at top,#0000 97%,#000) 50% 20px / calc(2 * 20px) 20px repeat-x,
664+ radial-gradient(circle farthest-side at bottom,#0000 97%,#000) 50% calc(100% - 20px)/calc(2 * 20px) 20px repeat-x,
665+ radial-gradient(circle closest-side at 25% 50%,#000 97%,#0000) calc(50% - 20px) 1%/calc(4 * 20px) calc(2 * 20px) repeat-x,
666+ radial-gradient(circle closest-side at 25% 50%,#000 97%,#0000) calc(50% - 3*20px) 99%/calc(4 * 20px) calc(2 * 20px) repeat-x
667+ `,
668+ '--mask-edge-drip-left': `
669+ linear-gradient(#000 0 0) right / calc(100% - 2 * 20px) 100% no-repeat,
670+ radial-gradient(circle farthest-side at left,#0000 97%,#000) 20px 50%/20px calc(2 * 20px) repeat-y,
671+ radial-gradient(circle closest-side at 50% 25%,#000 97%,#0000) 1% calc(50% - 20px)/calc(2 * 20px) calc(4 * 20px) repeat-y
672+ `,
673+ '--mask-edge-drip-right': `
674+ linear-gradient(#000 0 0) left / calc(100% - 2 * 20px) 100% no-repeat,
675+ radial-gradient(circle farthest-side at right,#0000 97%,#000) calc(100% - 20px) 50%/20px calc(2 * 20px) repeat-y,
676+ radial-gradient(circle closest-side at 50% 25%,#000 97%,#0000) 99% calc(50% - 20px)/calc(2 * 20px) calc(4 * 20px) repeat-y
677+ `,
678+ '--mask-edge-drip-horizontal': `
679+ linear-gradient(#000 0 0) center / calc(100% - 4 * 20px) 100% no-repeat,
680+ radial-gradient(circle farthest-side at left,#0000 97%,#000) 20px 50%/20px calc(2 * 20px) repeat-y,
681+ radial-gradient(circle farthest-side at right,#0000 97%,#000) calc(100% - 20px) 50%/20px calc(2 * 20px) repeat-y,
682+ radial-gradient(circle closest-side at 50% 25%,#000 97%,#0000) 1% calc(50% - 20px)/calc(2 * 20px) calc(4 * 20px) repeat-y,
683+ radial-gradient(circle closest-side at 50% 25%,#000 97%,#0000) 99% calc(50% - 3*20px)/calc(2 * 20px) calc(4 * 20px) repeat-y
684+ `,
685+ '--mask-edge-zig-zag-top': `
686+ linear-gradient(#000 0 0) bottom/100% calc(100% - 20px) no-repeat,
687+ conic-gradient(from 135deg at top,#0000,#000 1deg 90deg,#0000 91deg) top / calc(2 * 20px) 20px repeat-x
688+ `,
689+ '--mask-edge-zig-zag-bottom': `
690+ linear-gradient(#000 0 0) top / 100% calc(100% - 20px) no-repeat,
691+ conic-gradient(from -45deg at bottom,#0000,#000 1deg 90deg,#0000 91deg) bottom/calc(2 * 20px) 20px repeat-x
692+ `,
693+ '--mask-edge-zig-zag-left': `
694+ linear-gradient(#000 0 0) right / calc(100% - 20px) 100% no-repeat,
695+ conic-gradient(from 45deg at left,#0000,#000 1deg 90deg,#0000 91deg) left / 20px calc(2 * 20px) repeat-y
696+ `,
697+ '--mask-edge-zig-zag-right': `
698+ linear-gradient(#000 0 0) left / calc(100% - 20px) 100% no-repeat,
699+ conic-gradient(from -135deg at right,#0000,#000 1deg 90deg,#0000 91deg) right / 20px calc(2 * 20px) repeat-y
700+ `,
701+ '--mask-edge-zig-zag-horizontal': `
702+ linear-gradient(#000 0 0) center / calc(100% - 2 * 20px) 100% no-repeat,
703+ conic-gradient(from 45deg at left,#0000,#000 1deg 90deg,#0000 91deg) left / 20px calc(2 * 20px) repeat-y,
704+ conic-gradient(from -135deg at right,#0000,#000 1deg 90deg,#0000 91deg) right / 20px calc(2 * 20px) repeat-y
705+ `,
706+ '--mask-edge-zig-zag-vertical': `
707+ linear-gradient(#000 0 0) center / 100% calc(100% - 2 * 20px) no-repeat,
708+ conic-gradient(from 135deg at top,#0000,#000 1deg 90deg,#0000 91deg) top / calc(2 * 20px) 20px repeat-x,
709+ conic-gradient(from -45deg at bottom,#0000,#000 1deg 90deg,#0000 91deg) bottom/calc(2 * 20px) 20px repeat-x
710+ `,
711+ }
712 diff --git a/test/basic.test.cjs b/test/basic.test.cjs
713index 0e93c92..ee52bf6 100644
714--- a/test/basic.test.cjs
715+++ b/test/basic.test.cjs
716 @@ -4,7 +4,7 @@ const OpenProps = require('../dist/open-props.cjs')
717 const OPtokens = require('../open-props.tokens.json')
718
719 test('Should have an all included import', t => {
720- t.is(Object.keys(OpenProps).length, 1018)
721+ t.is(Object.keys(OpenProps).length, 1086)
722 })
723
724 test('Import should have animations', async t => {
725 @@ -32,8 +32,17 @@ test('JSON Import should have types', async t => {
726 t.assert(OPtokens['--gray-0'].type, 'color')
727 })
728
729+ test('Should produce a props bundle', async t => {
730+ t.assert(fs.existsSync('./open-props.min.css'))
731+ })
732+
733 test('Should produce shadow :host props', async t => {
734- t.assert(fs.existsSync('./src/shadow.index.css'))
735- t.assert(fs.existsSync('./src/shadow.props.easing.css'))
736- t.assert(fs.existsSync('./src/shadow.props.shadows.css'))
737+ t.assert(fs.existsSync('./open-props.shadow.min.css'))
738+ t.assert(fs.existsSync('./easings.shadow.min.css'))
739+ t.assert(fs.existsSync('./shadows.shadow.min.css'))
740+ })
741+
742+ test('Should produce optional mask props', async t => {
743+ t.assert(fs.existsSync('./masks.edges.min.css'))
744+ t.assert(fs.existsSync('./masks.corner-cuts.min.css'))
745 })
746\ No newline at end of file