Commit
Author: Adam Argyle [atom@argyleink.com]
Hash: ca548bceed97d4be59e2f923de13add8a9b8349c
Timestamp: Sun, 10 Oct 2021 05:46:33 +0000 (3 years ago)

+256 -11 +/-17 browse
fixes #8
1diff --git a/package.json b/package.json
2index 62dbcb0..a5faa25 100644
3--- a/package.json
4+++ b/package.json
5 @@ -33,7 +33,6 @@
6 "lib:animations": "postcss src/props.animations.css -o animations.css",
7 "lib:aspects": "postcss src/props.aspects.css -o aspects.css",
8 "lib:borders": "postcss src/props.borders.css -o borders.css",
9- "lib:colors": "postcss src/props.colors.css -o colors.css",
10 "lib:easing": "postcss src/props.easing.css -o easings.css",
11 "lib:fonts": "postcss src/props.fonts.css -o fonts.css",
12 "lib:gradients": "postcss src/props.gradients.css -o gradients.css",
13 @@ -42,7 +41,21 @@
14 "lib:sizes": "postcss src/props.sizes.css -o sizes.css",
15 "lib:supports": "postcss src/props.supports.css -o supports.css",
16 "lib:zindex": "postcss src/props.zindex.css -o zindex.css",
17- "lib:reset": "postcss src/extra/reset.css -o reset.css"
18+ "lib:reset": "postcss src/extra/reset.css -o reset.css",
19+ "lib:colors": "postcss src/props.colors.css -o colors.css",
20+ "lib:colors:gray": "postcss src/props.gray.css -o gray.css",
21+ "lib:colors:red": "postcss src/props.red.css -o red.css",
22+ "lib:colors:pink": "postcss src/props.pink.css -o pink.css",
23+ "lib:colors:grape": "postcss src/props.grape.css -o grape.css",
24+ "lib:colors:violet": "postcss src/props.violet.css -o violet.css",
25+ "lib:colors:indigo": "postcss src/props.indigo.css -o indigo.css",
26+ "lib:colors:blue": "postcss src/props.blue.css -o blue.css",
27+ "lib:colors:cyan": "postcss src/props.cyan.css -o cyan.css",
28+ "lib:colors:teal": "postcss src/props.teal.css -o teal.css",
29+ "lib:colors:green": "postcss src/props.green.css -o green.css",
30+ "lib:colors:lime": "postcss src/props.lime.css -o lime.css",
31+ "lib:colors:yellow": "postcss src/props.yellow.css -o yellow.css",
32+ "lib:colors:orange": "postcss src/props.orange.css -o orange.css"
33 },
34 "devDependencies": {
35 "concurrently": "^6.2.1",
36 diff --git a/src/_create-props.js b/src/_create-props.js
37index 223d310..b450969 100644
38--- a/src/_create-props.js
39+++ b/src/_create-props.js
40 @@ -2,7 +2,7 @@ import fs from 'fs'
41
42 import Animations from './props.animations.js'
43 import Sizes from './props.sizes.js'
44- import Colors from './props.colors.js'
45+ import * as OpenColors from './props.colors.js'
46 import Fonts from './props.fonts.js'
47 import Borders from './props.borders.js'
48 import Aspects from './props.aspects.js'
49 @@ -15,32 +15,50 @@ import Zindex from './props.zindex.js'
50 const [,,prefix,useWhere] = process.argv
51 const selector = useWhere === 'true' ? ':where(html)' : 'html'
52
53- const workload = {
54+ const mainbundle = {
55 'props.fonts.css': Fonts,
56 'props.sizes.css': Sizes,
57 'props.easing.css': Easings,
58 'props.zindex.css': Zindex,
59 'props.shadows.css': Shadows,
60 'props.aspects.css': Aspects,
61- 'props.colors.css': Colors,
62+ 'props.colors.css': OpenColors.default,
63 // 'props.svg.css': SVG,
64 'props.gradients.css': Gradients,
65 'props.animations.css': Animations,
66 'props.borders.css': Borders,
67 }
68
69+ const individual_colors = {
70+ 'props.gray.css': OpenColors.Gray,
71+ 'props.red.css': OpenColors.Red,
72+ 'props.pink.css': OpenColors.Pink,
73+ 'props.grape.css': OpenColors.Grape,
74+ 'props.violet.css': OpenColors.Violet,
75+ 'props.indigo.css': OpenColors.Indigo,
76+ 'props.blue.css': OpenColors.Blue,
77+ 'props.cyan.css': OpenColors.Cyan,
78+ 'props.teal.css': OpenColors.Teal,
79+ 'props.green.css': OpenColors.Green,
80+ 'props.lime.css': OpenColors.Lime,
81+ 'props.yellow.css': OpenColors.Yellow,
82+ 'props.orange.css': OpenColors.Orange,
83+ }
84+
85 const buildPropsStylesheet = ({filename, props}) => {
86 const file = fs.createWriteStream(filename)
87- file.write(`${selector} {\n`)
88
89 let appendedMeta = ''
90- if (filename.includes('shadows'))
91+ if (filename.includes('shadows')) {
92+ file.write(`@import 'props.media.css';\n\n`)
93 appendedMeta = `@media (--OSdark) {
94 ${selector} {
95 --shadow-strength: 25%;
96 --shadow-color: 220 40% 2%;
97 }
98 }`
99+ }
100+ file.write(`${selector} {\n`)
101
102 Object.entries(props).forEach(([prop, val]) => {
103 if (prefix)
104 @@ -60,7 +78,7 @@ const buildPropsStylesheet = ({filename, props}) => {
105 }
106
107 // gen prop stylesheets
108- Object.entries(workload).forEach(([filename, props]) => {
109+ Object.entries({...mainbundle, ...individual_colors}).forEach(([filename, props]) => {
110 buildPropsStylesheet({filename, props})
111 })
112
113 @@ -69,7 +87,7 @@ const entry = fs.createWriteStream('index.css')
114 entry.write(`@import 'props.media.css';
115 @import 'props.supports.css';
116 `)
117- Object.keys(workload).forEach(filename => {
118+ Object.keys(mainbundle).forEach(filename => {
119 entry.write(`@import '${filename}';\n`)
120 })
121 entry.end()
122\ No newline at end of file
123 diff --git a/src/props.blue.css b/src/props.blue.css
124new file mode 100644
125index 0000000..0572c4f
126--- /dev/null
127+++ b/src/props.blue.css
128 @@ -0,0 +1,12 @@
129+ :where(html) {
130+ --blue-0: #e7f5ff;
131+ --blue-1: #d0ebff;
132+ --blue-2: #a5d8ff;
133+ --blue-3: #74c0fc;
134+ --blue-4: #4dabf7;
135+ --blue-5: #339af0;
136+ --blue-6: #228be6;
137+ --blue-7: #1c7ed6;
138+ --blue-8: #1971c2;
139+ --blue-9: #1864ab;
140+ }
141 diff --git a/src/props.colors.js b/src/props.colors.js
142index c8cec7c..d6261e0 100644
143--- a/src/props.colors.js
144+++ b/src/props.colors.js
145 @@ -1,5 +1,5 @@
146 /* generated with props.colors.src.js */
147- const Colors = {
148+ export const Gray = {
149 '--gray-0': '#f8f9fa',
150 '--gray-1': '#f1f3f5',
151 '--gray-2': '#e9ecef',
152 @@ -10,6 +10,9 @@ const Colors = {
153 '--gray-7': '#495057',
154 '--gray-8': '#343a40',
155 '--gray-9': '#212529',
156+ }
157+
158+ export const Red = {
159 '--red-0': '#fff5f5',
160 '--red-1': '#ffe3e3',
161 '--red-2': '#ffc9c9',
162 @@ -20,6 +23,9 @@ const Colors = {
163 '--red-7': '#f03e3e',
164 '--red-8': '#e03131',
165 '--red-9': '#c92a2a',
166+ }
167+
168+ export const Pink = {
169 '--pink-0': '#fff0f6',
170 '--pink-1': '#ffdeeb',
171 '--pink-2': '#fcc2d7',
172 @@ -30,6 +36,9 @@ const Colors = {
173 '--pink-7': '#d6336c',
174 '--pink-8': '#c2255c',
175 '--pink-9': '#a61e4d',
176+ }
177+
178+ export const Grape = {
179 '--grape-0': '#f8f0fc',
180 '--grape-1': '#f3d9fa',
181 '--grape-2': '#eebefa',
182 @@ -40,6 +49,9 @@ const Colors = {
183 '--grape-7': '#ae3ec9',
184 '--grape-8': '#9c36b5',
185 '--grape-9': '#862e9c',
186+ }
187+
188+ export const Violet = {
189 '--violet-0': '#f3f0ff',
190 '--violet-1': '#e5dbff',
191 '--violet-2': '#d0bfff',
192 @@ -50,6 +62,9 @@ const Colors = {
193 '--violet-7': '#7048e8',
194 '--violet-8': '#6741d9',
195 '--violet-9': '#5f3dc4',
196+ }
197+
198+ export const Indigo = {
199 '--indigo-0': '#edf2ff',
200 '--indigo-1': '#dbe4ff',
201 '--indigo-2': '#bac8ff',
202 @@ -60,6 +75,9 @@ const Colors = {
203 '--indigo-7': '#4263eb',
204 '--indigo-8': '#3b5bdb',
205 '--indigo-9': '#364fc7',
206+ }
207+
208+ export const Blue = {
209 '--blue-0': '#e7f5ff',
210 '--blue-1': '#d0ebff',
211 '--blue-2': '#a5d8ff',
212 @@ -70,6 +88,9 @@ const Colors = {
213 '--blue-7': '#1c7ed6',
214 '--blue-8': '#1971c2',
215 '--blue-9': '#1864ab',
216+ }
217+
218+ export const Cyan = {
219 '--cyan-0': '#e3fafc',
220 '--cyan-1': '#c5f6fa',
221 '--cyan-2': '#99e9f2',
222 @@ -80,6 +101,9 @@ const Colors = {
223 '--cyan-7': '#1098ad',
224 '--cyan-8': '#0c8599',
225 '--cyan-9': '#0b7285',
226+ }
227+
228+ export const Teal = {
229 '--teal-0': '#e6fcf5',
230 '--teal-1': '#c3fae8',
231 '--teal-2': '#96f2d7',
232 @@ -90,6 +114,9 @@ const Colors = {
233 '--teal-7': '#0ca678',
234 '--teal-8': '#099268',
235 '--teal-9': '#087f5b',
236+ }
237+
238+ export const Green = {
239 '--green-0': '#ebfbee',
240 '--green-1': '#d3f9d8',
241 '--green-2': '#b2f2bb',
242 @@ -100,6 +127,9 @@ const Colors = {
243 '--green-7': '#37b24d',
244 '--green-8': '#2f9e44',
245 '--green-9': '#2b8a3e',
246+ }
247+
248+ export const Lime = {
249 '--lime-0': '#f4fce3',
250 '--lime-1': '#e9fac8',
251 '--lime-2': '#d8f5a2',
252 @@ -110,6 +140,9 @@ const Colors = {
253 '--lime-7': '#74b816',
254 '--lime-8': '#66a80f',
255 '--lime-9': '#5c940d',
256+ }
257+
258+ export const Yellow = {
259 '--yellow-0': '#fff9db',
260 '--yellow-1': '#fff3bf',
261 '--yellow-2': '#ffec99',
262 @@ -120,6 +153,9 @@ const Colors = {
263 '--yellow-7': '#f59f00',
264 '--yellow-8': '#f08c00',
265 '--yellow-9': '#e67700',
266+ }
267+
268+ export const Orange = {
269 '--orange-0': '#fff4e6',
270 '--orange-1': '#ffe8cc',
271 '--orange-2': '#ffd8a8',
272 @@ -149,4 +185,20 @@ const Colors = {
273 --red-mid: lch(50% var(--red-base));
274 } */
275
276+ const Colors = {
277+ ...Gray,
278+ ...Red,
279+ ...Pink,
280+ ...Grape,
281+ ...Violet,
282+ ...Indigo,
283+ ...Blue,
284+ ...Cyan,
285+ ...Teal,
286+ ...Green,
287+ ...Lime,
288+ ...Yellow,
289+ ...Orange,
290+ }
291+
292 export default Colors
293\ No newline at end of file
294 diff --git a/src/props.colors.src.js b/src/props.colors.src.js
295index c00ff36..4949422 100644
296--- a/src/props.colors.src.js
297+++ b/src/props.colors.src.js
298 @@ -9,14 +9,20 @@ const customizeIncrements = num =>
299 ? num.replaceAll('50', '0')
300 : num.replaceAll('0', '')
301
302+ const capitalizeFirstLetter = string =>
303+ string.charAt(0).toUpperCase() + string.slice(1);
304+
305 const vars = colors.reduce((root, [color, shades]) => {
306 let base = `--${color}-`
307+ root += `\n\nconst ${capitalizeFirstLetter(color)} = {`
308
309 Object.entries(shades).forEach(([num, hex]) =>
310 root += `
311- ${base}${customizeIncrements(num)}: ${hex};`
312+ '${base}${customizeIncrements(num)}': '${hex}',`
313 )
314
315+ root += '\n}'
316+
317 return root
318 }, ``)
319
320 diff --git a/src/props.cyan.css b/src/props.cyan.css
321new file mode 100644
322index 0000000..b1ecf64
323--- /dev/null
324+++ b/src/props.cyan.css
325 @@ -0,0 +1,12 @@
326+ :where(html) {
327+ --cyan-0: #e3fafc;
328+ --cyan-1: #c5f6fa;
329+ --cyan-2: #99e9f2;
330+ --cyan-3: #66d9e8;
331+ --cyan-4: #3bc9db;
332+ --cyan-5: #22b8cf;
333+ --cyan-6: #15aabf;
334+ --cyan-7: #1098ad;
335+ --cyan-8: #0c8599;
336+ --cyan-9: #0b7285;
337+ }
338 diff --git a/src/props.grape.css b/src/props.grape.css
339new file mode 100644
340index 0000000..84ae6d2
341--- /dev/null
342+++ b/src/props.grape.css
343 @@ -0,0 +1,12 @@
344+ :where(html) {
345+ --grape-0: #f8f0fc;
346+ --grape-1: #f3d9fa;
347+ --grape-2: #eebefa;
348+ --grape-3: #e599f7;
349+ --grape-4: #da77f2;
350+ --grape-5: #cc5de8;
351+ --grape-6: #be4bdb;
352+ --grape-7: #ae3ec9;
353+ --grape-8: #9c36b5;
354+ --grape-9: #862e9c;
355+ }
356 diff --git a/src/props.gray.css b/src/props.gray.css
357new file mode 100644
358index 0000000..3d17654
359--- /dev/null
360+++ b/src/props.gray.css
361 @@ -0,0 +1,12 @@
362+ :where(html) {
363+ --gray-0: #f8f9fa;
364+ --gray-1: #f1f3f5;
365+ --gray-2: #e9ecef;
366+ --gray-3: #dee2e6;
367+ --gray-4: #ced4da;
368+ --gray-5: #adb5bd;
369+ --gray-6: #868e96;
370+ --gray-7: #495057;
371+ --gray-8: #343a40;
372+ --gray-9: #212529;
373+ }
374 diff --git a/src/props.green.css b/src/props.green.css
375new file mode 100644
376index 0000000..8dfd6db
377--- /dev/null
378+++ b/src/props.green.css
379 @@ -0,0 +1,12 @@
380+ :where(html) {
381+ --green-0: #ebfbee;
382+ --green-1: #d3f9d8;
383+ --green-2: #b2f2bb;
384+ --green-3: #8ce99a;
385+ --green-4: #69db7c;
386+ --green-5: #51cf66;
387+ --green-6: #40c057;
388+ --green-7: #37b24d;
389+ --green-8: #2f9e44;
390+ --green-9: #2b8a3e;
391+ }
392 diff --git a/src/props.indigo.css b/src/props.indigo.css
393new file mode 100644
394index 0000000..ef5fc91
395--- /dev/null
396+++ b/src/props.indigo.css
397 @@ -0,0 +1,12 @@
398+ :where(html) {
399+ --indigo-0: #edf2ff;
400+ --indigo-1: #dbe4ff;
401+ --indigo-2: #bac8ff;
402+ --indigo-3: #91a7ff;
403+ --indigo-4: #748ffc;
404+ --indigo-5: #5c7cfa;
405+ --indigo-6: #4c6ef5;
406+ --indigo-7: #4263eb;
407+ --indigo-8: #3b5bdb;
408+ --indigo-9: #364fc7;
409+ }
410 diff --git a/src/props.lime.css b/src/props.lime.css
411new file mode 100644
412index 0000000..74321f7
413--- /dev/null
414+++ b/src/props.lime.css
415 @@ -0,0 +1,12 @@
416+ :where(html) {
417+ --lime-0: #f4fce3;
418+ --lime-1: #e9fac8;
419+ --lime-2: #d8f5a2;
420+ --lime-3: #c0eb75;
421+ --lime-4: #a9e34b;
422+ --lime-5: #94d82d;
423+ --lime-6: #82c91e;
424+ --lime-7: #74b816;
425+ --lime-8: #66a80f;
426+ --lime-9: #5c940d;
427+ }
428 diff --git a/src/props.orange.css b/src/props.orange.css
429new file mode 100644
430index 0000000..9568a3b
431--- /dev/null
432+++ b/src/props.orange.css
433 @@ -0,0 +1,12 @@
434+ :where(html) {
435+ --orange-0: #fff4e6;
436+ --orange-1: #ffe8cc;
437+ --orange-2: #ffd8a8;
438+ --orange-3: #ffc078;
439+ --orange-4: #ffa94d;
440+ --orange-5: #ff922b;
441+ --orange-6: #fd7e14;
442+ --orange-7: #f76707;
443+ --orange-8: #e8590c;
444+ --orange-9: #d9480f;
445+ }
446 diff --git a/src/props.pink.css b/src/props.pink.css
447new file mode 100644
448index 0000000..747a758
449--- /dev/null
450+++ b/src/props.pink.css
451 @@ -0,0 +1,12 @@
452+ :where(html) {
453+ --pink-0: #fff0f6;
454+ --pink-1: #ffdeeb;
455+ --pink-2: #fcc2d7;
456+ --pink-3: #faa2c1;
457+ --pink-4: #f783ac;
458+ --pink-5: #f06595;
459+ --pink-6: #e64980;
460+ --pink-7: #d6336c;
461+ --pink-8: #c2255c;
462+ --pink-9: #a61e4d;
463+ }
464 diff --git a/src/props.red.css b/src/props.red.css
465new file mode 100644
466index 0000000..9f3a8fe
467--- /dev/null
468+++ b/src/props.red.css
469 @@ -0,0 +1,12 @@
470+ :where(html) {
471+ --red-0: #fff5f5;
472+ --red-1: #ffe3e3;
473+ --red-2: #ffc9c9;
474+ --red-3: #ffa8a8;
475+ --red-4: #ff8787;
476+ --red-5: #ff6b6b;
477+ --red-6: #fa5252;
478+ --red-7: #f03e3e;
479+ --red-8: #e03131;
480+ --red-9: #c92a2a;
481+ }
482 diff --git a/src/props.teal.css b/src/props.teal.css
483new file mode 100644
484index 0000000..96e775c
485--- /dev/null
486+++ b/src/props.teal.css
487 @@ -0,0 +1,12 @@
488+ :where(html) {
489+ --teal-0: #e6fcf5;
490+ --teal-1: #c3fae8;
491+ --teal-2: #96f2d7;
492+ --teal-3: #63e6be;
493+ --teal-4: #38d9a9;
494+ --teal-5: #20c997;
495+ --teal-6: #12b886;
496+ --teal-7: #0ca678;
497+ --teal-8: #099268;
498+ --teal-9: #087f5b;
499+ }
500 diff --git a/src/props.violet.css b/src/props.violet.css
501new file mode 100644
502index 0000000..dddf442
503--- /dev/null
504+++ b/src/props.violet.css
505 @@ -0,0 +1,12 @@
506+ :where(html) {
507+ --violet-0: #f3f0ff;
508+ --violet-1: #e5dbff;
509+ --violet-2: #d0bfff;
510+ --violet-3: #b197fc;
511+ --violet-4: #9775fa;
512+ --violet-5: #845ef7;
513+ --violet-6: #7950f2;
514+ --violet-7: #7048e8;
515+ --violet-8: #6741d9;
516+ --violet-9: #5f3dc4;
517+ }
518 diff --git a/src/props.yellow.css b/src/props.yellow.css
519new file mode 100644
520index 0000000..c7b4a4a
521--- /dev/null
522+++ b/src/props.yellow.css
523 @@ -0,0 +1,12 @@
524+ :where(html) {
525+ --yellow-0: #fff9db;
526+ --yellow-1: #fff3bf;
527+ --yellow-2: #ffec99;
528+ --yellow-3: #ffe066;
529+ --yellow-4: #ffd43b;
530+ --yellow-5: #fcc419;
531+ --yellow-6: #fab005;
532+ --yellow-7: #f59f00;
533+ --yellow-8: #f08c00;
534+ --yellow-9: #e67700;
535+ }