Author: Adam Argyle [argyle@google.com]
Committer: GitHub [noreply@github.com] Thu, 30 Mar 2023 22:51:46 +0000
Hash: 872afb9ebbba3a7e8d51224c4ea0b10025a46817
Timestamp: Thu, 30 Mar 2023 22:51:46 +0000 (1 year ago)

+138 -0 +/-8 browse
init build process (#360) 
init build process (#360)
1diff --git a/build/props.js b/build/props.js
2index 843174d..1603aed 100644
3--- a/build/props.js
4+++ b/build/props.js
5 @@ -4,6 +4,9 @@ import Animations from '../src/props.animations.js'
6 import Sizes from '../src/props.sizes.js'
7 import * as Colors from '../src/props.colors.js'
8 import * as ColorsHSL from '../src/props.colors-hsl.js'
9+ import ColorsOKLCH from '../src/props.colors-oklch.js'
10+ import ColorsOKLCHgray from '../src/props.gray-oklch.js'
11+ import ColorHues from '../src/props.colors-oklch-hues.js'
12 import Fonts from '../src/props.fonts.js'
13 import Borders from '../src/props.borders.js'
14 import Aspects from '../src/props.aspects.js'
15 @@ -116,6 +119,29 @@ buildPropsStylesheet({
16 {selector, prefix}
17 )
18
19+ // gen color oklch files
20+ buildPropsStylesheet({
21+ filename: pfx + 'props.colors-oklch.css',
22+ props: ColorsOKLCH},
23+ {
24+ selector: useWhere === 'true' ? `:where(*)` : '*',
25+ prefix
26+ }
27+ )
28+ buildPropsStylesheet({
29+ filename: pfx + 'props.gray-oklch.css',
30+ props: ColorsOKLCHgray},
31+ {
32+ selector: useWhere === 'true' ? `:where(*)` : '*',
33+ prefix
34+ }
35+ )
36+ buildPropsStylesheet({
37+ filename: pfx + 'props.colors-oklch-hues.css',
38+ props: ColorHues},
39+ {selector, prefix}
40+ )
41+
42 // gen index.css
43 const entry = fs.createWriteStream(`../src/${pfx}index.css`)
44 entry.write(`@import 'props.media.css';
45 diff --git a/package.json b/package.json
46index b1a6aef..2a9ba2e 100644
47--- a/package.json
48+++ b/package.json
49 @@ -73,6 +73,8 @@
50 "./choco-hsl": "./choco-hsl.min.css",
51 "./colors": "./colors.min.css",
52 "./colors-hsl": "./colors-hsl.min.css",
53+ "./colors-hd": "./colors-oklch.min.css",
54+ "./oklch-hues": "./oklch-hues.min.css",
55 "./cyan": "./cyan.min.css",
56 "./cyan-hsl": "./cyan-hsl.min.css",
57 "./easings": "./easings.min.css",
58 @@ -80,6 +82,7 @@
59 "./gradients": "./gradients.min.css",
60 "./gray": "./gray.min.css",
61 "./gray-hsl": "./gray-hsl.min.css",
62+ "./gray-hd": "./gray-oklch.min.css",
63 "./green": "./green.min.css",
64 "./green-hsl": "./green-hsl.min.css",
65 "./indigo": "./indigo.min.css",
66 @@ -209,9 +212,12 @@
67 "lib:masks:edges": "postcss src/props.masks.edges.css -o masks.edges.min.css",
68 "lib:masks:cornercuts": "postcss src/props.masks.corner-cuts.css -o masks.corner-cuts.min.css",
69 "lib:colors": "postcss src/props.colors.css -o colors.min.css",
70+ "lib:colors:oklch-hues": "postcss src/props.colors-oklch-hues.css -o oklch-hues.min.css",
71 "lib:colors-hsl": "postcss src/props.colors-hsl.css -o colors-hsl.min.css",
72+ "lib:colors-oklch": "postcss src/props.colors-oklch.css -o colors-oklch.min.css",
73 "lib:colors:gray": "postcss src/props.gray.css -o gray.min.css",
74 "lib:colors:gray-hsl": "postcss src/props.gray-hsl.css -o gray-hsl.min.css",
75+ "lib:colors:gray-oklch": "postcss src/props.gray-oklch.css -o gray-oklch.min.css",
76 "lib:colors:stone": "postcss src/props.stone.css -o stone.min.css",
77 "lib:colors:stone-hsl": "postcss src/props.stone-hsl.css -o stone-hsl.min.css",
78 "lib:colors:red": "postcss src/props.red.css -o red.min.css",
79 @@ -259,8 +265,11 @@
80 "shadow:sizes": "postcss src/shadow.props.sizes.css -o sizes.shadow.min.css",
81 "shadow:zindex": "postcss src/shadow.props.zindex.css -o zindex.shadow.min.css",
82 "shadow:colors": "postcss src/shadow.props.colors.css -o colors.shadow.min.css",
83+ "shadow:colors:oklch-hues": "postcss src/shadow.props.colors-oklch-hues.css -o oklch-hues.shadow.min.css",
84 "shadow:colors-hsl": "postcss src/shadow.props.colors-hsl.css -o colors-hsl.shadow.min.css",
85+ "shadow:colors-oklch": "postcss src/shadow.props.colors-oklch.css -o colors-oklch.shadow.min.css",
86 "shadow:colors:gray": "postcss src/shadow.props.gray.css -o gray.shadow.min.css",
87+ "shadow:colors:hd-gray": "postcss src/shadow.props.gray-oklch.css -o gray-oklch.shadow.min.css",
88 "shadow:colors:gray-hsl": "postcss src/shadow.props.gray-hsl.css -o gray-hsl.shadow.min.css",
89 "shadow:colors:stone": "postcss src/shadow.props.stone.css -o stone.shadow.min.css",
90 "shadow:colors:stone-hsl": "postcss src/shadow.props.stone-hsl.css -o stone-hsl.shadow.min.css",
91 diff --git a/src/props.colors-oklch-hues.css b/src/props.colors-oklch-hues.css
92new file mode 100644
93index 0000000..7096dbe
94--- /dev/null
95+++ b/src/props.colors-oklch-hues.css
96 @@ -0,0 +1,14 @@
97+ :where(html) {
98+ --hue-red: 25;
99+ --hue-pink: 350;
100+ --hue-purple: 310;
101+ --hue-violet: 290;
102+ --hue-indigo: 270;
103+ --hue-blue: 240;
104+ --hue-cyan: 210;
105+ --hue-teal: 185;
106+ --hue-green: 145;
107+ --hue-lime: 125;
108+ --hue-yellow: 100;
109+ --hue-orange: 75;
110+ }
111 diff --git a/src/props.colors-oklch-hues.js b/src/props.colors-oklch-hues.js
112new file mode 100644
113index 0000000..06505d7
114--- /dev/null
115+++ b/src/props.colors-oklch-hues.js
116 @@ -0,0 +1,14 @@
117+ export default {
118+ '--hue-red': 25,
119+ '--hue-pink': 350,
120+ '--hue-purple': 310,
121+ '--hue-violet': 290,
122+ '--hue-indigo': 270,
123+ '--hue-blue': 240,
124+ '--hue-cyan': 210,
125+ '--hue-teal': 185,
126+ '--hue-green': 145,
127+ '--hue-lime': 125,
128+ '--hue-yellow': 100,
129+ '--hue-orange': 75,
130+ }
131 diff --git a/src/props.colors-oklch.css b/src/props.colors-oklch.css
132new file mode 100644
133index 0000000..a949d0d
134--- /dev/null
135+++ b/src/props.colors-oklch.css
136 @@ -0,0 +1,19 @@
137+ :where(*) {
138+ --color-0: oklch(99% .03 var(--color-hue, 0));
139+ --color-1: oklch(95% .06 var(--color-hue, 0));
140+ --color-2: oklch(88% .12 var(--color-hue, 0));
141+ --color-3: oklch(80% .14 var(--color-hue, 0));
142+ --color-4: oklch(74% .16 var(--color-hue, 0));
143+ --color-5: oklch(68% .19 var(--color-hue, 0));
144+ --color-6: oklch(63% .20 var(--color-hue, 0));
145+ --color-7: oklch(58% .21 var(--color-hue, 0));
146+ --color-8: oklch(53% .20 var(--color-hue, 0));
147+ --color-9: oklch(49% .19 var(--color-hue, 0));
148+ --color-10: oklch(42% .17 var(--color-hue, 0));
149+ --color-11: oklch(35% .15 var(--color-hue, 0));
150+ --color-12: oklch(27% .12 var(--color-hue, 0));
151+ --color-13: oklch(20% .09 var(--color-hue, 0));
152+ --color-14: oklch(14% .07 var(--color-hue, 0));
153+ --color-15: oklch(11% .05 var(--color-hue, 0));
154+ --color-bright: oklch(65% .3 var(--color-hue));
155+ }
156 diff --git a/src/props.colors-oklch.js b/src/props.colors-oklch.js
157new file mode 100644
158index 0000000..6721cbe
159--- /dev/null
160+++ b/src/props.colors-oklch.js
161 @@ -0,0 +1,20 @@
162+ export default {
163+ '--color-0': 'oklch(99% .03 var(--color-hue, 0))',
164+ '--color-1': 'oklch(95% .06 var(--color-hue, 0))',
165+ '--color-2': 'oklch(88% .12 var(--color-hue, 0))',
166+ '--color-3': 'oklch(80% .14 var(--color-hue, 0))',
167+ '--color-4': 'oklch(74% .16 var(--color-hue, 0))',
168+ '--color-5': 'oklch(68% .19 var(--color-hue, 0))',
169+ '--color-6': 'oklch(63% .20 var(--color-hue, 0))',
170+ '--color-7': 'oklch(58% .21 var(--color-hue, 0))',
171+ '--color-8': 'oklch(53% .20 var(--color-hue, 0))',
172+ '--color-9': 'oklch(49% .19 var(--color-hue, 0))',
173+ '--color-10': 'oklch(42% .17 var(--color-hue, 0))',
174+ '--color-11': 'oklch(35% .15 var(--color-hue, 0))',
175+ '--color-12': 'oklch(27% .12 var(--color-hue, 0))',
176+ '--color-13': 'oklch(20% .09 var(--color-hue, 0))',
177+ '--color-14': 'oklch(14% .07 var(--color-hue, 0))',
178+ '--color-15': 'oklch(11% .05 var(--color-hue, 0))',
179+
180+ '--color-bright': 'oklch(65% .3 var(--color-hue))',
181+ }
182 diff --git a/src/props.gray-oklch.css b/src/props.gray-oklch.css
183new file mode 100644
184index 0000000..3016bc2
185--- /dev/null
186+++ b/src/props.gray-oklch.css
187 @@ -0,0 +1,18 @@
188+ :where(*) {
189+ --gray-0: oklch(99% var(--gray-chroma, none) var(--gray-hue, none));
190+ --gray-1: oklch(95% var(--gray-chroma, none) var(--gray-hue, none));
191+ --gray-2: oklch(88% var(--gray-chroma, none) var(--gray-hue, none));
192+ --gray-3: oklch(80% var(--gray-chroma, none) var(--gray-hue, none));
193+ --gray-4: oklch(74% var(--gray-chroma, none) var(--gray-hue, none));
194+ --gray-5: oklch(68% var(--gray-chroma, none) var(--gray-hue, none));
195+ --gray-6: oklch(63% var(--gray-chroma, none) var(--gray-hue, none));
196+ --gray-7: oklch(58% var(--gray-chroma, none) var(--gray-hue, none));
197+ --gray-8: oklch(53% var(--gray-chroma, none) var(--gray-hue, none));
198+ --gray-9: oklch(49% var(--gray-chroma, none) var(--gray-hue, none));
199+ --gray-10: oklch(43% var(--gray-chroma, none) var(--gray-hue, none));
200+ --gray-11: oklch(37% var(--gray-chroma, none) var(--gray-hue, none));
201+ --gray-12: oklch(31% var(--gray-chroma, none) var(--gray-hue, none));
202+ --gray-13: oklch(25% var(--gray-chroma, none) var(--gray-hue, none));
203+ --gray-14: oklch(18% var(--gray-chroma, none) var(--gray-hue, none));
204+ --gray-15: oklch(10% var(--gray-chroma, none) var(--gray-hue, none));
205+ }
206 diff --git a/src/props.gray-oklch.js b/src/props.gray-oklch.js
207new file mode 100644
208index 0000000..45d1feb
209--- /dev/null
210+++ b/src/props.gray-oklch.js
211 @@ -0,0 +1,18 @@
212+ export default {
213+ '--gray-0': 'oklch(99% var(--gray-chroma, none) var(--gray-hue, none))',
214+ '--gray-1': 'oklch(95% var(--gray-chroma, none) var(--gray-hue, none))',
215+ '--gray-2': 'oklch(88% var(--gray-chroma, none) var(--gray-hue, none))',
216+ '--gray-3': 'oklch(80% var(--gray-chroma, none) var(--gray-hue, none))',
217+ '--gray-4': 'oklch(74% var(--gray-chroma, none) var(--gray-hue, none))',
218+ '--gray-5': 'oklch(68% var(--gray-chroma, none) var(--gray-hue, none))',
219+ '--gray-6': 'oklch(63% var(--gray-chroma, none) var(--gray-hue, none))',
220+ '--gray-7': 'oklch(58% var(--gray-chroma, none) var(--gray-hue, none))',
221+ '--gray-8': 'oklch(53% var(--gray-chroma, none) var(--gray-hue, none))',
222+ '--gray-9': 'oklch(49% var(--gray-chroma, none) var(--gray-hue, none))',
223+ '--gray-10': 'oklch(43% var(--gray-chroma, none) var(--gray-hue, none))',
224+ '--gray-11': 'oklch(37% var(--gray-chroma, none) var(--gray-hue, none))',
225+ '--gray-12': 'oklch(31% var(--gray-chroma, none) var(--gray-hue, none))',
226+ '--gray-13': 'oklch(25% var(--gray-chroma, none) var(--gray-hue, none))',
227+ '--gray-14': 'oklch(18% var(--gray-chroma, none) var(--gray-hue, none))',
228+ '--gray-15': 'oklch(10% var(--gray-chroma, none) var(--gray-hue, none))',
229+ }