init build process (argyleink#360)

saitheninja · Apr 29, 2023 · 2a3da8e · 2a3da8e
1 parent 22b7878
commit 2a3da8e
Show file tree

Hide file tree

Showing 8 changed files with 138 additions and 0 deletions.
diff --git a/build/props.js b/build/props.js
@@ -4,6 +4,9 @@ import Animations from '../src/props.animations.js'
 import Sizes from '../src/props.sizes.js'
 import * as Colors from '../src/props.colors.js'
 import * as ColorsHSL from '../src/props.colors-hsl.js'
+import ColorsOKLCH from '../src/props.colors-oklch.js'
+import ColorsOKLCHgray from '../src/props.gray-oklch.js'
+import ColorHues from '../src/props.colors-oklch-hues.js'
 import Fonts from '../src/props.fonts.js'
 import Borders from '../src/props.borders.js'
 import Aspects from '../src/props.aspects.js'
@@ -116,6 +119,29 @@ buildPropsStylesheet({
   {selector, prefix}
 )
 
+// gen color oklch files
+buildPropsStylesheet({
+  filename: pfx + 'props.colors-oklch.css', 
+  props: ColorsOKLCH}, 
+  {
+    selector: useWhere === 'true' ? `:where(*)` : '*', 
+    prefix
+  }
+)
+buildPropsStylesheet({
+  filename: pfx + 'props.gray-oklch.css', 
+  props: ColorsOKLCHgray}, 
+  {
+    selector: useWhere === 'true' ? `:where(*)` : '*', 
+    prefix
+  }
+)
+buildPropsStylesheet({
+  filename: pfx + 'props.colors-oklch-hues.css', 
+  props: ColorHues}, 
+  {selector, prefix}
+)
+
 // gen index.css
 const entry = fs.createWriteStream(`../src/${pfx}index.css`)
 entry.write(`@import 'props.media.css';

diff --git a/package.json b/package.json
@@ -73,13 +73,16 @@
     "./choco-hsl": "./choco-hsl.min.css",
     "./colors": "./colors.min.css",
     "./colors-hsl": "./colors-hsl.min.css",
+    "./colors-hd": "./colors-oklch.min.css",
+    "./oklch-hues": "./oklch-hues.min.css",
     "./cyan": "./cyan.min.css",
     "./cyan-hsl": "./cyan-hsl.min.css",
     "./easings": "./easings.min.css",
     "./fonts": "./fonts.min.css",
     "./gradients": "./gradients.min.css",
     "./gray": "./gray.min.css",
     "./gray-hsl": "./gray-hsl.min.css",
+    "./gray-hd": "./gray-oklch.min.css",
     "./green": "./green.min.css",
     "./green-hsl": "./green-hsl.min.css",
     "./indigo": "./indigo.min.css",
@@ -209,9 +212,12 @@
     "lib:masks:edges": "postcss src/props.masks.edges.css -o masks.edges.min.css",
     "lib:masks:cornercuts": "postcss src/props.masks.corner-cuts.css -o masks.corner-cuts.min.css",
     "lib:colors": "postcss src/props.colors.css -o colors.min.css",
+    "lib:colors:oklch-hues": "postcss src/props.colors-oklch-hues.css -o oklch-hues.min.css",
     "lib:colors-hsl": "postcss src/props.colors-hsl.css -o colors-hsl.min.css",
+    "lib:colors-oklch": "postcss src/props.colors-oklch.css -o colors-oklch.min.css",
     "lib:colors:gray": "postcss src/props.gray.css -o gray.min.css",
     "lib:colors:gray-hsl": "postcss src/props.gray-hsl.css -o gray-hsl.min.css",
+    "lib:colors:gray-oklch": "postcss src/props.gray-oklch.css -o gray-oklch.min.css",
     "lib:colors:stone": "postcss src/props.stone.css -o stone.min.css",
     "lib:colors:stone-hsl": "postcss src/props.stone-hsl.css -o stone-hsl.min.css",
     "lib:colors:red": "postcss src/props.red.css -o red.min.css",
@@ -259,8 +265,11 @@
     "shadow:sizes": "postcss src/shadow.props.sizes.css -o sizes.shadow.min.css",
     "shadow:zindex": "postcss src/shadow.props.zindex.css -o zindex.shadow.min.css",
     "shadow:colors": "postcss src/shadow.props.colors.css -o colors.shadow.min.css",
+    "shadow:colors:oklch-hues": "postcss src/shadow.props.colors-oklch-hues.css -o oklch-hues.shadow.min.css",
     "shadow:colors-hsl": "postcss src/shadow.props.colors-hsl.css -o colors-hsl.shadow.min.css",
+    "shadow:colors-oklch": "postcss src/shadow.props.colors-oklch.css -o colors-oklch.shadow.min.css",
     "shadow:colors:gray": "postcss src/shadow.props.gray.css -o gray.shadow.min.css",
+    "shadow:colors:hd-gray": "postcss src/shadow.props.gray-oklch.css -o gray-oklch.shadow.min.css",
     "shadow:colors:gray-hsl": "postcss src/shadow.props.gray-hsl.css -o gray-hsl.shadow.min.css",
     "shadow:colors:stone": "postcss src/shadow.props.stone.css -o stone.shadow.min.css",
     "shadow:colors:stone-hsl": "postcss src/shadow.props.stone-hsl.css -o stone-hsl.shadow.min.css",

diff --git a/src/props.colors-oklch-hues.css b/src/props.colors-oklch-hues.css
@@ -0,0 +1,14 @@
+:where(html) {
+  --hue-red: 25;
+  --hue-pink: 350;
+  --hue-purple: 310;
+  --hue-violet: 290;
+  --hue-indigo: 270;
+  --hue-blue: 240;
+  --hue-cyan: 210;
+  --hue-teal: 185;
+  --hue-green: 145;
+  --hue-lime: 125;
+  --hue-yellow: 100;
+  --hue-orange: 75;
+}
diff --git a/src/props.colors-oklch-hues.js b/src/props.colors-oklch-hues.js
@@ -0,0 +1,14 @@
+export default {
+  '--hue-red': 25,
+  '--hue-pink': 350,
+  '--hue-purple': 310,
+  '--hue-violet': 290,
+  '--hue-indigo': 270,
+  '--hue-blue': 240,
+  '--hue-cyan': 210,
+  '--hue-teal': 185,
+  '--hue-green': 145,
+  '--hue-lime': 125,
+  '--hue-yellow': 100,
+  '--hue-orange': 75,
+}
diff --git a/src/props.colors-oklch.css b/src/props.colors-oklch.css
@@ -0,0 +1,19 @@
+:where(*) {
+  --color-0: oklch(99% .03 var(--color-hue, 0));
+  --color-1: oklch(95% .06 var(--color-hue, 0));
+  --color-2: oklch(88% .12 var(--color-hue, 0));
+  --color-3: oklch(80% .14 var(--color-hue, 0));
+  --color-4: oklch(74% .16 var(--color-hue, 0));
+  --color-5: oklch(68% .19 var(--color-hue, 0));
+  --color-6: oklch(63% .20 var(--color-hue, 0));
+  --color-7: oklch(58% .21 var(--color-hue, 0));
+  --color-8: oklch(53% .20 var(--color-hue, 0));
+  --color-9: oklch(49% .19 var(--color-hue, 0));
+  --color-10: oklch(42% .17 var(--color-hue, 0));
+  --color-11: oklch(35% .15 var(--color-hue, 0));
+  --color-12: oklch(27% .12 var(--color-hue, 0));
+  --color-13: oklch(20% .09 var(--color-hue, 0));
+  --color-14: oklch(14% .07 var(--color-hue, 0));
+  --color-15: oklch(11% .05 var(--color-hue, 0));
+  --color-bright: oklch(65% .3 var(--color-hue));
+}
diff --git a/src/props.colors-oklch.js b/src/props.colors-oklch.js
@@ -0,0 +1,20 @@
+export default {
+  '--color-0':  'oklch(99% .03 var(--color-hue, 0))',
+  '--color-1':  'oklch(95% .06 var(--color-hue, 0))',
+  '--color-2':  'oklch(88% .12 var(--color-hue, 0))',
+  '--color-3':  'oklch(80% .14 var(--color-hue, 0))',
+  '--color-4':  'oklch(74% .16 var(--color-hue, 0))',
+  '--color-5':  'oklch(68% .19 var(--color-hue, 0))',
+  '--color-6':  'oklch(63% .20 var(--color-hue, 0))',
+  '--color-7':  'oklch(58% .21 var(--color-hue, 0))',
+  '--color-8':  'oklch(53% .20 var(--color-hue, 0))',
+  '--color-9':  'oklch(49% .19 var(--color-hue, 0))',
+  '--color-10': 'oklch(42% .17 var(--color-hue, 0))',
+  '--color-11': 'oklch(35% .15 var(--color-hue, 0))',
+  '--color-12': 'oklch(27% .12 var(--color-hue, 0))',
+  '--color-13': 'oklch(20% .09 var(--color-hue, 0))',
+  '--color-14': 'oklch(14% .07 var(--color-hue, 0))',
+  '--color-15': 'oklch(11% .05 var(--color-hue, 0))',
+
+  '--color-bright': 'oklch(65% .3 var(--color-hue))',
+}
diff --git a/src/props.gray-oklch.css b/src/props.gray-oklch.css
@@ -0,0 +1,18 @@
+:where(*) {
+  --gray-0: oklch(99% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-1: oklch(95% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-2: oklch(88% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-3: oklch(80% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-4: oklch(74% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-5: oklch(68% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-6: oklch(63% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-7: oklch(58% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-8: oklch(53% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-9: oklch(49% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-10: oklch(43% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-11: oklch(37% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-12: oklch(31% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-13: oklch(25% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-14: oklch(18% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-15: oklch(10% var(--gray-chroma, none) var(--gray-hue, none));
+}
diff --git a/src/props.gray-oklch.js b/src/props.gray-oklch.js
@@ -0,0 +1,18 @@
+export default {
+  '--gray-0':  'oklch(99% var(--gray-chroma, none) var(--gray-hue, none))',
+  '--gray-1':  'oklch(95% var(--gray-chroma, none) var(--gray-hue, none))',
+  '--gray-2':  'oklch(88% var(--gray-chroma, none) var(--gray-hue, none))',
+  '--gray-3':  'oklch(80% var(--gray-chroma, none) var(--gray-hue, none))',
+  '--gray-4':  'oklch(74% var(--gray-chroma, none) var(--gray-hue, none))',
+  '--gray-5':  'oklch(68% var(--gray-chroma, none) var(--gray-hue, none))',
+  '--gray-6':  'oklch(63% var(--gray-chroma, none) var(--gray-hue, none))',
+  '--gray-7':  'oklch(58% var(--gray-chroma, none) var(--gray-hue, none))',
+  '--gray-8':  'oklch(53% var(--gray-chroma, none) var(--gray-hue, none))',
+  '--gray-9':  'oklch(49% var(--gray-chroma, none) var(--gray-hue, none))',
+  '--gray-10': 'oklch(43% var(--gray-chroma, none) var(--gray-hue, none))',
+  '--gray-11': 'oklch(37% var(--gray-chroma, none) var(--gray-hue, none))',
+  '--gray-12': 'oklch(31% var(--gray-chroma, none) var(--gray-hue, none))',
+  '--gray-13': 'oklch(25% var(--gray-chroma, none) var(--gray-hue, none))',
+  '--gray-14': 'oklch(18% var(--gray-chroma, none) var(--gray-hue, none))',
+  '--gray-15': 'oklch(10% var(--gray-chroma, none) var(--gray-hue, none))',
+}