From 872afb9ebbba3a7e8d51224c4ea0b10025a46817 Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Thu, 30 Mar 2023 15:51:46 -0700 Subject: [PATCH] init build process (#360) --- build/props.js | 26 ++++++++++++++++++++++++++ package.json | 9 +++++++++ src/props.colors-oklch-hues.css | 14 ++++++++++++++ src/props.colors-oklch-hues.js | 14 ++++++++++++++ src/props.colors-oklch.css | 19 +++++++++++++++++++ src/props.colors-oklch.js | 20 ++++++++++++++++++++ src/props.gray-oklch.css | 18 ++++++++++++++++++ src/props.gray-oklch.js | 18 ++++++++++++++++++ 8 files changed, 138 insertions(+) create mode 100644 src/props.colors-oklch-hues.css create mode 100644 src/props.colors-oklch-hues.js create mode 100644 src/props.colors-oklch.css create mode 100644 src/props.colors-oklch.js create mode 100644 src/props.gray-oklch.css create mode 100644 src/props.gray-oklch.js diff --git a/build/props.js b/build/props.js index 843174d9..1603aed2 100644 --- 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 index b1a6aefe..2a9ba2ee 100644 --- a/package.json +++ b/package.json @@ -73,6 +73,8 @@ "./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", @@ -80,6 +82,7 @@ "./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 new file mode 100644 index 00000000..7096dbec --- /dev/null +++ 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 new file mode 100644 index 00000000..06505d71 --- /dev/null +++ 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 new file mode 100644 index 00000000..a949d0d3 --- /dev/null +++ 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 new file mode 100644 index 00000000..6721cbee --- /dev/null +++ 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 new file mode 100644 index 00000000..3016bc25 --- /dev/null +++ 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 new file mode 100644 index 00000000..45d1feb4 --- /dev/null +++ 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))', +}