Skip to content

Commit 872afb9

Browse files
argyleinkargyleink
authored
init build process (#360)
1 parent ba81755 commit 872afb9

8 files changed

+138
-0
lines changed

‎build/props.js

+26
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ import Animations from '../src/props.animations.js'
44
import Sizes from '../src/props.sizes.js'
55
import * as Colors from '../src/props.colors.js'
66
import * as ColorsHSL from '../src/props.colors-hsl.js'
7+
import ColorsOKLCH from '../src/props.colors-oklch.js'
8+
import ColorsOKLCHgray from '../src/props.gray-oklch.js'
9+
import ColorHues from '../src/props.colors-oklch-hues.js'
710
import Fonts from '../src/props.fonts.js'
811
import Borders from '../src/props.borders.js'
912
import Aspects from '../src/props.aspects.js'
@@ -116,6 +119,29 @@ buildPropsStylesheet({
116119
{selector, prefix}
117120
)
118121

122+
// gen color oklch files
123+
buildPropsStylesheet({
124+
filename: pfx + 'props.colors-oklch.css',
125+
props: ColorsOKLCH},
126+
{
127+
selector: useWhere === 'true' ? `:where(*)` : '*',
128+
prefix
129+
}
130+
)
131+
buildPropsStylesheet({
132+
filename: pfx + 'props.gray-oklch.css',
133+
props: ColorsOKLCHgray},
134+
{
135+
selector: useWhere === 'true' ? `:where(*)` : '*',
136+
prefix
137+
}
138+
)
139+
buildPropsStylesheet({
140+
filename: pfx + 'props.colors-oklch-hues.css',
141+
props: ColorHues},
142+
{selector, prefix}
143+
)
144+
119145
// gen index.css
120146
const entry = fs.createWriteStream(`../src/${pfx}index.css`)
121147
entry.write(`@import 'props.media.css';

‎package.json

+9
Original file line numberDiff line numberDiff line change
@@ -73,13 +73,16 @@
7373
"./choco-hsl": "./choco-hsl.min.css",
7474
"./colors": "./colors.min.css",
7575
"./colors-hsl": "./colors-hsl.min.css",
76+
"./colors-hd": "./colors-oklch.min.css",
77+
"./oklch-hues": "./oklch-hues.min.css",
7678
"./cyan": "./cyan.min.css",
7779
"./cyan-hsl": "./cyan-hsl.min.css",
7880
"./easings": "./easings.min.css",
7981
"./fonts": "./fonts.min.css",
8082
"./gradients": "./gradients.min.css",
8183
"./gray": "./gray.min.css",
8284
"./gray-hsl": "./gray-hsl.min.css",
85+
"./gray-hd": "./gray-oklch.min.css",
8386
"./green": "./green.min.css",
8487
"./green-hsl": "./green-hsl.min.css",
8588
"./indigo": "./indigo.min.css",
@@ -209,9 +212,12 @@
209212
"lib:masks:edges": "postcss src/props.masks.edges.css -o masks.edges.min.css",
210213
"lib:masks:cornercuts": "postcss src/props.masks.corner-cuts.css -o masks.corner-cuts.min.css",
211214
"lib:colors": "postcss src/props.colors.css -o colors.min.css",
215+
"lib:colors:oklch-hues": "postcss src/props.colors-oklch-hues.css -o oklch-hues.min.css",
212216
"lib:colors-hsl": "postcss src/props.colors-hsl.css -o colors-hsl.min.css",
217+
"lib:colors-oklch": "postcss src/props.colors-oklch.css -o colors-oklch.min.css",
213218
"lib:colors:gray": "postcss src/props.gray.css -o gray.min.css",
214219
"lib:colors:gray-hsl": "postcss src/props.gray-hsl.css -o gray-hsl.min.css",
220+
"lib:colors:gray-oklch": "postcss src/props.gray-oklch.css -o gray-oklch.min.css",
215221
"lib:colors:stone": "postcss src/props.stone.css -o stone.min.css",
216222
"lib:colors:stone-hsl": "postcss src/props.stone-hsl.css -o stone-hsl.min.css",
217223
"lib:colors:red": "postcss src/props.red.css -o red.min.css",
@@ -259,8 +265,11 @@
259265
"shadow:sizes": "postcss src/shadow.props.sizes.css -o sizes.shadow.min.css",
260266
"shadow:zindex": "postcss src/shadow.props.zindex.css -o zindex.shadow.min.css",
261267
"shadow:colors": "postcss src/shadow.props.colors.css -o colors.shadow.min.css",
268+
"shadow:colors:oklch-hues": "postcss src/shadow.props.colors-oklch-hues.css -o oklch-hues.shadow.min.css",
262269
"shadow:colors-hsl": "postcss src/shadow.props.colors-hsl.css -o colors-hsl.shadow.min.css",
270+
"shadow:colors-oklch": "postcss src/shadow.props.colors-oklch.css -o colors-oklch.shadow.min.css",
263271
"shadow:colors:gray": "postcss src/shadow.props.gray.css -o gray.shadow.min.css",
272+
"shadow:colors:hd-gray": "postcss src/shadow.props.gray-oklch.css -o gray-oklch.shadow.min.css",
264273
"shadow:colors:gray-hsl": "postcss src/shadow.props.gray-hsl.css -o gray-hsl.shadow.min.css",
265274
"shadow:colors:stone": "postcss src/shadow.props.stone.css -o stone.shadow.min.css",
266275
"shadow:colors:stone-hsl": "postcss src/shadow.props.stone-hsl.css -o stone-hsl.shadow.min.css",

‎src/props.colors-oklch-hues.css

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
:where(html) {
2+
--hue-red: 25;
3+
--hue-pink: 350;
4+
--hue-purple: 310;
5+
--hue-violet: 290;
6+
--hue-indigo: 270;
7+
--hue-blue: 240;
8+
--hue-cyan: 210;
9+
--hue-teal: 185;
10+
--hue-green: 145;
11+
--hue-lime: 125;
12+
--hue-yellow: 100;
13+
--hue-orange: 75;
14+
}

‎src/props.colors-oklch-hues.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
export default {
2+
'--hue-red': 25,
3+
'--hue-pink': 350,
4+
'--hue-purple': 310,
5+
'--hue-violet': 290,
6+
'--hue-indigo': 270,
7+
'--hue-blue': 240,
8+
'--hue-cyan': 210,
9+
'--hue-teal': 185,
10+
'--hue-green': 145,
11+
'--hue-lime': 125,
12+
'--hue-yellow': 100,
13+
'--hue-orange': 75,
14+
}

‎src/props.colors-oklch.css

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
:where(*) {
2+
--color-0: oklch(99% .03 var(--color-hue, 0));
3+
--color-1: oklch(95% .06 var(--color-hue, 0));
4+
--color-2: oklch(88% .12 var(--color-hue, 0));
5+
--color-3: oklch(80% .14 var(--color-hue, 0));
6+
--color-4: oklch(74% .16 var(--color-hue, 0));
7+
--color-5: oklch(68% .19 var(--color-hue, 0));
8+
--color-6: oklch(63% .20 var(--color-hue, 0));
9+
--color-7: oklch(58% .21 var(--color-hue, 0));
10+
--color-8: oklch(53% .20 var(--color-hue, 0));
11+
--color-9: oklch(49% .19 var(--color-hue, 0));
12+
--color-10: oklch(42% .17 var(--color-hue, 0));
13+
--color-11: oklch(35% .15 var(--color-hue, 0));
14+
--color-12: oklch(27% .12 var(--color-hue, 0));
15+
--color-13: oklch(20% .09 var(--color-hue, 0));
16+
--color-14: oklch(14% .07 var(--color-hue, 0));
17+
--color-15: oklch(11% .05 var(--color-hue, 0));
18+
--color-bright: oklch(65% .3 var(--color-hue));
19+
}

‎src/props.colors-oklch.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
export default {
2+
'--color-0': 'oklch(99% .03 var(--color-hue, 0))',
3+
'--color-1': 'oklch(95% .06 var(--color-hue, 0))',
4+
'--color-2': 'oklch(88% .12 var(--color-hue, 0))',
5+
'--color-3': 'oklch(80% .14 var(--color-hue, 0))',
6+
'--color-4': 'oklch(74% .16 var(--color-hue, 0))',
7+
'--color-5': 'oklch(68% .19 var(--color-hue, 0))',
8+
'--color-6': 'oklch(63% .20 var(--color-hue, 0))',
9+
'--color-7': 'oklch(58% .21 var(--color-hue, 0))',
10+
'--color-8': 'oklch(53% .20 var(--color-hue, 0))',
11+
'--color-9': 'oklch(49% .19 var(--color-hue, 0))',
12+
'--color-10': 'oklch(42% .17 var(--color-hue, 0))',
13+
'--color-11': 'oklch(35% .15 var(--color-hue, 0))',
14+
'--color-12': 'oklch(27% .12 var(--color-hue, 0))',
15+
'--color-13': 'oklch(20% .09 var(--color-hue, 0))',
16+
'--color-14': 'oklch(14% .07 var(--color-hue, 0))',
17+
'--color-15': 'oklch(11% .05 var(--color-hue, 0))',
18+
19+
'--color-bright': 'oklch(65% .3 var(--color-hue))',
20+
}

‎src/props.gray-oklch.css

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
:where(*) {
2+
--gray-0: oklch(99% var(--gray-chroma, none) var(--gray-hue, none));
3+
--gray-1: oklch(95% var(--gray-chroma, none) var(--gray-hue, none));
4+
--gray-2: oklch(88% var(--gray-chroma, none) var(--gray-hue, none));
5+
--gray-3: oklch(80% var(--gray-chroma, none) var(--gray-hue, none));
6+
--gray-4: oklch(74% var(--gray-chroma, none) var(--gray-hue, none));
7+
--gray-5: oklch(68% var(--gray-chroma, none) var(--gray-hue, none));
8+
--gray-6: oklch(63% var(--gray-chroma, none) var(--gray-hue, none));
9+
--gray-7: oklch(58% var(--gray-chroma, none) var(--gray-hue, none));
10+
--gray-8: oklch(53% var(--gray-chroma, none) var(--gray-hue, none));
11+
--gray-9: oklch(49% var(--gray-chroma, none) var(--gray-hue, none));
12+
--gray-10: oklch(43% var(--gray-chroma, none) var(--gray-hue, none));
13+
--gray-11: oklch(37% var(--gray-chroma, none) var(--gray-hue, none));
14+
--gray-12: oklch(31% var(--gray-chroma, none) var(--gray-hue, none));
15+
--gray-13: oklch(25% var(--gray-chroma, none) var(--gray-hue, none));
16+
--gray-14: oklch(18% var(--gray-chroma, none) var(--gray-hue, none));
17+
--gray-15: oklch(10% var(--gray-chroma, none) var(--gray-hue, none));
18+
}

‎src/props.gray-oklch.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
export default {
2+
'--gray-0': 'oklch(99% var(--gray-chroma, none) var(--gray-hue, none))',
3+
'--gray-1': 'oklch(95% var(--gray-chroma, none) var(--gray-hue, none))',
4+
'--gray-2': 'oklch(88% var(--gray-chroma, none) var(--gray-hue, none))',
5+
'--gray-3': 'oklch(80% var(--gray-chroma, none) var(--gray-hue, none))',
6+
'--gray-4': 'oklch(74% var(--gray-chroma, none) var(--gray-hue, none))',
7+
'--gray-5': 'oklch(68% var(--gray-chroma, none) var(--gray-hue, none))',
8+
'--gray-6': 'oklch(63% var(--gray-chroma, none) var(--gray-hue, none))',
9+
'--gray-7': 'oklch(58% var(--gray-chroma, none) var(--gray-hue, none))',
10+
'--gray-8': 'oklch(53% var(--gray-chroma, none) var(--gray-hue, none))',
11+
'--gray-9': 'oklch(49% var(--gray-chroma, none) var(--gray-hue, none))',
12+
'--gray-10': 'oklch(43% var(--gray-chroma, none) var(--gray-hue, none))',
13+
'--gray-11': 'oklch(37% var(--gray-chroma, none) var(--gray-hue, none))',
14+
'--gray-12': 'oklch(31% var(--gray-chroma, none) var(--gray-hue, none))',
15+
'--gray-13': 'oklch(25% var(--gray-chroma, none) var(--gray-hue, none))',
16+
'--gray-14': 'oklch(18% var(--gray-chroma, none) var(--gray-hue, none))',
17+
'--gray-15': 'oklch(10% var(--gray-chroma, none) var(--gray-hue, none))',
18+
}

0 commit comments

Comments
 (0)