Commit
+556 -9 +/-12 browse
1 | diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml |
2 | index 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 |
13 | index 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 |
52 | index 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 |
92 | index 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 |
325 | index 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 |
347 | index 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 |
361 | index 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 |
384 | new file mode 100644 |
385 | index 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 |
425 | new file mode 100644 |
426 | index 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 |
467 | new file mode 100644 |
468 | index 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 |
589 | new file mode 100644 |
590 | index 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 |
713 | index 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 |