@nudeui/color 0.0.1

package/README.md

@@ -0,0 +1,2 @@
+# Nude Color
+

package/dist/colors.css

@@ -0,0 +1,10 @@
+:where(&) {
+	--color-yellow: oklch(84% 0.17 85);
+	--color-green: oklch(65% 0.19 130);
+	--color-cyan: oklch(70% 0.155 205);
+	--color-blue: oklch(57% 0.256 257);
+	--color-indigo: oklch(48% 0.3 277);
+	--color-pink: oklch(60% 0.28 353);
+	--color-red: oklch(55% 0.24 20);
+	--color-gray: oklch(50% 0.03 270);
+}

package/dist/index.css

@@ -0,0 +1,3 @@
+@import url("colors.css");
+@import url("tints.css");
+@import url("text.css");

package/dist/text.css

@@ -0,0 +1,15 @@
+:where(&) {
+	--l-threshold: 0.7;
+	--tint-text: calc(
+			max(0, sign(max(0, sign(sign(l - var(--l-threshold)))))) * var(--l-40, l) +
+				max(0, sign((1 - max(0, sign(sign(l - var(--l-threshold))))))) * var(--l-100, l)
+		)
+		calc(
+			max(0, sign(max(0, sign(sign(l - var(--l-threshold)))))) * var(--c-40, c) +
+				max(0, sign((1 - max(0, sign(sign(l - var(--l-threshold))))))) * var(--c-100, c)
+		)
+		calc(
+			max(0, sign(max(0, sign(sign(l - var(--l-threshold)))))) * var(--h-40, h) +
+				max(0, sign((1 - max(0, sign(sign(l - var(--l-threshold))))))) * var(--h-100, h)
+		);
+}

package/dist/tints.css

@@ -0,0 +1,361 @@
+:where(&) {
+	/* Lightnesses for each tint */
+
+	--l-0: 0;
+	--l-5: 0.09;
+	--l-10: 0.14;
+	--l-15: 0.18;
+	--l-20: 0.23;
+	--l-25: 0.28;
+	--l-30: 0.33;
+	--l-35: 0.38;
+	--l-40: 0.42;
+	--l-45: 0.47;
+	--l-50: 0.52;
+	--l-55: 0.58;
+	--l-60: 0.63;
+	--l-65: 0.69;
+	--l-70: 0.74;
+	--l-75: 0.79;
+	--l-80: 0.84;
+	--l-85: 0.87;
+	--l-90: 0.93;
+	--l-95: 0.97;
+	--l-100: 1;
+
+	/* Chromas for each tint */
+	--c-100: 0;
+	--c-5: calc(
+		c *
+			(
+				1 -
+					max(
+						0,
+						pow(clamp(0, (var(--l-5) - l) / (1 - l), 1), 2),
+						pow(clamp(0, (var(--l-5) - l) / (0 - l), 1), 1.2)
+					)
+			)
+	);
+	--c-10: calc(
+		c *
+			(
+				1 -
+					max(
+						0,
+						pow(clamp(0, (var(--l-10) - l) / (1 - l), 1), 2),
+						pow(clamp(0, (var(--l-10) - l) / (0 - l), 1), 1.2)
+					)
+			)
+	);
+	--c-15: calc(
+		c *
+			(
+				1 -
+					max(
+						0,
+						pow(clamp(0, (var(--l-15) - l) / (1 - l), 1), 2),
+						pow(clamp(0, (var(--l-15) - l) / (0 - l), 1), 1.2)
+					)
+			)
+	);
+	--c-20: calc(
+		c *
+			(
+				1 -
+					max(
+						0,
+						pow(clamp(0, (var(--l-20) - l) / (1 - l), 1), 2),
+						pow(clamp(0, (var(--l-20) - l) / (0 - l), 1), 1.2)
+					)
+			)
+	);
+	--c-25: calc(
+		c *
+			(
+				1 -
+					max(
+						0,
+						pow(clamp(0, (var(--l-25) - l) / (1 - l), 1), 2),
+						pow(clamp(0, (var(--l-25) - l) / (0 - l), 1), 1.2)
+					)
+			)
+	);
+	--c-30: calc(
+		c *
+			(
+				1 -
+					max(
+						0,
+						pow(clamp(0, (var(--l-30) - l) / (1 - l), 1), 2),
+						pow(clamp(0, (var(--l-30) - l) / (0 - l), 1), 1.2)
+					)
+			)
+	);
+	--c-35: calc(
+		c *
+			(
+				1 -
+					max(
+						0,
+						pow(clamp(0, (var(--l-35) - l) / (1 - l), 1), 2),
+						pow(clamp(0, (var(--l-35) - l) / (0 - l), 1), 1.2)
+					)
+			)
+	);
+	--c-40: calc(
+		c *
+			(
+				1 -
+					max(
+						0,
+						pow(clamp(0, (var(--l-40) - l) / (1 - l), 1), 2),
+						pow(clamp(0, (var(--l-40) - l) / (0 - l), 1), 1.2)
+					)
+			)
+	);
+	--c-45: calc(
+		c *
+			(
+				1 -
+					max(
+						0,
+						pow(clamp(0, (var(--l-45) - l) / (1 - l), 1), 2),
+						pow(clamp(0, (var(--l-45) - l) / (0 - l), 1), 1.2)
+					)
+			)
+	);
+	--c-50: calc(
+		c *
+			(
+				1 -
+					max(
+						0,
+						pow(clamp(0, (var(--l-50) - l) / (1 - l), 1), 2),
+						pow(clamp(0, (var(--l-50) - l) / (0 - l), 1), 1.2)
+					)
+			)
+	);
+	--c-55: calc(
+		c *
+			(
+				1 -
+					max(
+						0,
+						pow(clamp(0, (var(--l-55) - l) / (1 - l), 1), 2),
+						pow(clamp(0, (var(--l-55) - l) / (0 - l), 1), 1.2)
+					)
+			)
+	);
+	--c-60: calc(
+		c *
+			(
+				1 -
+					max(
+						0,
+						pow(clamp(0, (var(--l-60) - l) / (1 - l), 1), 2),
+						pow(clamp(0, (var(--l-60) - l) / (0 - l), 1), 1.2)
+					)
+			)
+	);
+	--c-65: calc(
+		c *
+			(
+				1 -
+					max(
+						0,
+						pow(clamp(0, (var(--l-65) - l) / (1 - l), 1), 2),
+						pow(clamp(0, (var(--l-65) - l) / (0 - l), 1), 1.2)
+					)
+			)
+	);
+	--c-70: calc(
+		c *
+			(
+				1 -
+					max(
+						0,
+						pow(clamp(0, (var(--l-70) - l) / (1 - l), 1), 2),
+						pow(clamp(0, (var(--l-70) - l) / (0 - l), 1), 1.2)
+					)
+			)
+	);
+	--c-75: calc(
+		c *
+			(
+				1 -
+					max(
+						0,
+						pow(clamp(0, (var(--l-75) - l) / (1 - l), 1), 2),
+						pow(clamp(0, (var(--l-75) - l) / (0 - l), 1), 1.2)
+					)
+			)
+	);
+	--c-80: calc(
+		c *
+			(
+				1 -
+					max(
+						0,
+						pow(clamp(0, (var(--l-80) - l) / (1 - l), 1), 2),
+						pow(clamp(0, (var(--l-80) - l) / (0 - l), 1), 1.2)
+					)
+			)
+	);
+	--c-85: calc(
+		c *
+			(
+				1 -
+					max(
+						0,
+						pow(clamp(0, (var(--l-85) - l) / (1 - l), 1), 2),
+						pow(clamp(0, (var(--l-85) - l) / (0 - l), 1), 1.2)
+					)
+			)
+	);
+	--c-90: calc(
+		c *
+			(
+				1 -
+					max(
+						0,
+						pow(clamp(0, (var(--l-90) - l) / (1 - l), 1), 2),
+						pow(clamp(0, (var(--l-90) - l) / (0 - l), 1), 1.2)
+					)
+			)
+	);
+	--c-95: calc(
+		c *
+			(
+				1 -
+					max(
+						0,
+						pow(clamp(0, (var(--l-95) - l) / (1 - l), 1), 2),
+						pow(clamp(0, (var(--l-95) - l) / (0 - l), 1), 1.2)
+					)
+			)
+	);
+	--c-0: 0;
+
+	/* Hues for each tint: near each key hue, shift toward its dark/light directions, scaled by how far the tint moves from the source toward black/white */
+	--h-5: calc(
+		h + clamp(0, 1 - pow(abs(h - 84) / 27, 1.5), 1) * -43 *
+			pow(clamp(0, (var(--l-5) - l) / (0 - l), 1), 0.4) + 11 *
+			pow(clamp(0, (var(--l-5) - l) / (1 - l), 1), 0.4)
+	);
+	--h-10: calc(
+		h + clamp(0, 1 - pow(abs(h - 84) / 27, 1.5), 1) * -43 *
+			pow(clamp(0, (var(--l-10) - l) / (0 - l), 1), 0.4) + 11 *
+			pow(clamp(0, (var(--l-10) - l) / (1 - l), 1), 0.4)
+	);
+	--h-15: calc(
+		h + clamp(0, 1 - pow(abs(h - 84) / 27, 1.5), 1) * -43 *
+			pow(clamp(0, (var(--l-15) - l) / (0 - l), 1), 0.4) + 11 *
+			pow(clamp(0, (var(--l-15) - l) / (1 - l), 1), 0.4)
+	);
+	--h-20: calc(
+		h + clamp(0, 1 - pow(abs(h - 84) / 27, 1.5), 1) * -43 *
+			pow(clamp(0, (var(--l-20) - l) / (0 - l), 1), 0.4) + 11 *
+			pow(clamp(0, (var(--l-20) - l) / (1 - l), 1), 0.4)
+	);
+	--h-25: calc(
+		h + clamp(0, 1 - pow(abs(h - 84) / 27, 1.5), 1) * -43 *
+			pow(clamp(0, (var(--l-25) - l) / (0 - l), 1), 0.4) + 11 *
+			pow(clamp(0, (var(--l-25) - l) / (1 - l), 1), 0.4)
+	);
+	--h-30: calc(
+		h + clamp(0, 1 - pow(abs(h - 84) / 27, 1.5), 1) * -43 *
+			pow(clamp(0, (var(--l-30) - l) / (0 - l), 1), 0.4) + 11 *
+			pow(clamp(0, (var(--l-30) - l) / (1 - l), 1), 0.4)
+	);
+	--h-35: calc(
+		h + clamp(0, 1 - pow(abs(h - 84) / 27, 1.5), 1) * -43 *
+			pow(clamp(0, (var(--l-35) - l) / (0 - l), 1), 0.4) + 11 *
+			pow(clamp(0, (var(--l-35) - l) / (1 - l), 1), 0.4)
+	);
+	--h-40: calc(
+		h + clamp(0, 1 - pow(abs(h - 84) / 27, 1.5), 1) * -43 *
+			pow(clamp(0, (var(--l-40) - l) / (0 - l), 1), 0.4) + 11 *
+			pow(clamp(0, (var(--l-40) - l) / (1 - l), 1), 0.4)
+	);
+	--h-45: calc(
+		h + clamp(0, 1 - pow(abs(h - 84) / 27, 1.5), 1) * -43 *
+			pow(clamp(0, (var(--l-45) - l) / (0 - l), 1), 0.4) + 11 *
+			pow(clamp(0, (var(--l-45) - l) / (1 - l), 1), 0.4)
+	);
+	--h-50: calc(
+		h + clamp(0, 1 - pow(abs(h - 84) / 27, 1.5), 1) * -43 *
+			pow(clamp(0, (var(--l-50) - l) / (0 - l), 1), 0.4) + 11 *
+			pow(clamp(0, (var(--l-50) - l) / (1 - l), 1), 0.4)
+	);
+	--h-55: calc(
+		h + clamp(0, 1 - pow(abs(h - 84) / 27, 1.5), 1) * -43 *
+			pow(clamp(0, (var(--l-55) - l) / (0 - l), 1), 0.4) + 11 *
+			pow(clamp(0, (var(--l-55) - l) / (1 - l), 1), 0.4)
+	);
+	--h-60: calc(
+		h + clamp(0, 1 - pow(abs(h - 84) / 27, 1.5), 1) * -43 *
+			pow(clamp(0, (var(--l-60) - l) / (0 - l), 1), 0.4) + 11 *
+			pow(clamp(0, (var(--l-60) - l) / (1 - l), 1), 0.4)
+	);
+	--h-65: calc(
+		h + clamp(0, 1 - pow(abs(h - 84) / 27, 1.5), 1) * -43 *
+			pow(clamp(0, (var(--l-65) - l) / (0 - l), 1), 0.4) + 11 *
+			pow(clamp(0, (var(--l-65) - l) / (1 - l), 1), 0.4)
+	);
+	--h-70: calc(
+		h + clamp(0, 1 - pow(abs(h - 84) / 27, 1.5), 1) * -43 *
+			pow(clamp(0, (var(--l-70) - l) / (0 - l), 1), 0.4) + 11 *
+			pow(clamp(0, (var(--l-70) - l) / (1 - l), 1), 0.4)
+	);
+	--h-75: calc(
+		h + clamp(0, 1 - pow(abs(h - 84) / 27, 1.5), 1) * -43 *
+			pow(clamp(0, (var(--l-75) - l) / (0 - l), 1), 0.4) + 11 *
+			pow(clamp(0, (var(--l-75) - l) / (1 - l), 1), 0.4)
+	);
+	--h-80: calc(
+		h + clamp(0, 1 - pow(abs(h - 84) / 27, 1.5), 1) * -43 *
+			pow(clamp(0, (var(--l-80) - l) / (0 - l), 1), 0.4) + 11 *
+			pow(clamp(0, (var(--l-80) - l) / (1 - l), 1), 0.4)
+	);
+	--h-85: calc(
+		h + clamp(0, 1 - pow(abs(h - 84) / 27, 1.5), 1) * -43 *
+			pow(clamp(0, (var(--l-85) - l) / (0 - l), 1), 0.4) + 11 *
+			pow(clamp(0, (var(--l-85) - l) / (1 - l), 1), 0.4)
+	);
+	--h-90: calc(
+		h + clamp(0, 1 - pow(abs(h - 84) / 27, 1.5), 1) * -43 *
+			pow(clamp(0, (var(--l-90) - l) / (0 - l), 1), 0.4) + 11 *
+			pow(clamp(0, (var(--l-90) - l) / (1 - l), 1), 0.4)
+	);
+	--h-95: calc(
+		h + clamp(0, 1 - pow(abs(h - 84) / 27, 1.5), 1) * -43 *
+			pow(clamp(0, (var(--l-95) - l) / (0 - l), 1), 0.4) + 11 *
+			pow(clamp(0, (var(--l-95) - l) / (1 - l), 1), 0.4)
+	);
+
+	/* Tints */
+	--tint-core: l c h;
+	--tint-100: 1 0 h;
+	--tint-0: var(--l-0, l) var(--c-0, c) var(--h-0, h);
+	--tint-5: var(--l-5, l) var(--c-5, c) var(--h-5, h);
+	--tint-10: var(--l-10, l) var(--c-10, c) var(--h-10, h);
+	--tint-15: var(--l-15, l) var(--c-15, c) var(--h-15, h);
+	--tint-20: var(--l-20, l) var(--c-20, c) var(--h-20, h);
+	--tint-25: var(--l-25, l) var(--c-25, c) var(--h-25, h);
+	--tint-30: var(--l-30, l) var(--c-30, c) var(--h-30, h);
+	--tint-35: var(--l-35, l) var(--c-35, c) var(--h-35, h);
+	--tint-40: var(--l-40, l) var(--c-40, c) var(--h-40, h);
+	--tint-45: var(--l-45, l) var(--c-45, c) var(--h-45, h);
+	--tint-50: var(--l-50, l) var(--c-50, c) var(--h-50, h);
+	--tint-55: var(--l-55, l) var(--c-55, c) var(--h-55, h);
+	--tint-60: var(--l-60, l) var(--c-60, c) var(--h-60, h);
+	--tint-65: var(--l-65, l) var(--c-65, c) var(--h-65, h);
+	--tint-70: var(--l-70, l) var(--c-70, c) var(--h-70, h);
+	--tint-75: var(--l-75, l) var(--c-75, c) var(--h-75, h);
+	--tint-80: var(--l-80, l) var(--c-80, c) var(--h-80, h);
+	--tint-85: var(--l-85, l) var(--c-85, c) var(--h-85, h);
+	--tint-90: var(--l-90, l) var(--c-90, c) var(--h-90, h);
+	--tint-95: var(--l-95, l) var(--c-95, c) var(--h-95, h);
+	--tint-100: var(--l-100, l) var(--c-100, c) var(--h-100, h);
+	--tint-0: 0 0 h;
+}

package/package.json

@@ -0,0 +1,55 @@
+{
+	"name": "@nudeui/color",
+	"version": "0.0.1",
+	"description": "Description",
+	"keywords": [
+		"color",
+		"design-systems",
+		"css",
+		"ui",
+		"design-tokens",
+		"tints"
+	],
+	"homepage": "https://github.com/nudeui/color/#readme",
+	"bugs": {
+		"url": "https://github.com/nudeui/color/issues"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/nudeui/color.git"
+	},
+	"files": [
+		"src",
+		"dist"
+	],
+	"license": "MIT",
+	"author": "Lea Verou",
+	"type": "module",
+	"exports": {
+		".": {
+			"import": "./src/index.js",
+			"style": "./dist/index.css"
+		},
+		"./*": {
+			"style": "./dist/*.css"
+		},
+		"./src/*": "./src/*.css.js",
+		"./dist/*": "./dist/*"
+	},
+	"scripts": {
+		"build": "airdry",
+		"dev": "airdry --watch",
+		"prepack": "npm run build",
+		"release": "npm whoami >/dev/null 2>&1 || npm login && release-it",
+		"test": "npx htest test"
+	},
+	"devDependencies": {
+		"airdry": "file:../airdry",
+		"htest.dev": "latest",
+		"prettier": "~3.5.3",
+		"prettier-plugin-brace-style": "latest",
+		"prettier-plugin-merge": "latest",
+		"prettier-plugin-space-before-function-paren": "latest",
+		"release-it": "latest"
+	}
+}

package/src/airdry.config.js

@@ -0,0 +1,9 @@
+import css from "airdry/css";
+
+export default {
+	template: content => css`
+		:where(&) {
+			${content}
+		}
+	`,
+};

package/src/colors.css.js

@@ -0,0 +1,8 @@
+import { css, mapKeys } from "airdry/css";
+import { L, levels, colors } from "./index.js";
+
+export default css`
+	:where(&) {
+		${mapKeys(colors, name => "--color-" + name)}
+	}
+`;

package/src/index.css

@@ -0,0 +1,3 @@
+@import url("colors.css");
+@import url("tints.css");
+@import url("text.css");

package/src/index.js

@@ -0,0 +1,39 @@
+export const L = {
+	100: 1,
+	95: 0.97,
+	90: 0.93,
+	85: 0.87,
+	80: 0.84,
+	75: 0.79,
+	70: 0.74,
+	65: 0.69,
+	60: 0.63,
+	55: 0.58,
+	50: 0.52,
+	45: 0.47,
+	40: 0.42,
+	35: 0.38,
+	30: 0.33,
+	25: 0.28,
+	20: 0.23,
+	15: 0.18,
+	10: 0.14,
+	5: 0.09,
+	0: 0,
+};
+
+export const levels = Object.keys(L).map(Number);
+export const levelsChromatic = levels.filter(level => level !== 0 && level !== 100);
+
+export const colors = {
+	yellow: "oklch(84% 0.17 85)",
+	green: "oklch(65% 0.19 130)",
+	cyan: "oklch(70% 0.155 205)",
+	blue: "oklch(57% 0.256 257)",
+	indigo: "oklch(48% 0.3 277)",
+	pink: "oklch(60% 0.28 353)",
+	red: "oklch(55% 0.24 20)",
+	gray: "oklch(50% 0.03 270)",
+};
+
+export const hues = Object.keys(colors);

package/src/text.css.js

@@ -0,0 +1,9 @@
+import { css, gt, ife } from "airdry/css";
+import { tint_if } from "./util.js";
+
+export default css`
+	:where(&) {
+		--l-threshold: 0.7;
+		--tint-text: ${tint_if(gt("l", "var(--l-threshold)"), 40, 100)};
+	}
+`;

package/src/tints.css.js

@@ -0,0 +1,69 @@
+import { css, progress, pow, vars, ref, max, or, ife, ifs, sop, map } from "airdry/css";
+import { L, levels, levelsChromatic } from "./index.js";
+
+// Curvature factors for chroma
+export const chroma = {
+	exp: { lighter: 2, darker: 1.2 },
+};
+
+export const hue = {
+	shifts: {
+		yellows: {
+			band: { center: 84, extent: 27, exp: 1.5 },
+			darker: { max: -43, exp: 0.4 },
+			lighter: { max: 11, exp: 0.4 },
+		},
+	},
+};
+
+// For nicer references
+const [l, c, h] = "lch".split("");
+const varll = LL => `var(--l-${LL})`;
+
+const progress_dark = LL => progress(varll(LL), l, 0);
+const progress_light = LL => progress(varll(LL), l, 1);
+const pow_light_dark = (LL, expL, expD) =>
+	or(pow(progress_light(LL), expL), pow(progress_dark(LL), expD));
+
+export default css`
+	:where(&) {
+		/* Lightnesses for each tint */
+		${levels.map(
+			LL => `
+		--l-${LL}: ${L[LL]};
+	`,
+		)}
+
+		/* Chromas for each tint */
+		--c-100: 0;
+		${levelsChromatic.map(
+			LL =>
+				`--c-${LL}: calc(c * (1 - ${or(pow(progress_light(LL), chroma.exp.lighter), pow(progress_dark(LL), chroma.exp.darker))}));`,
+		)}
+		--c-0: 0;
+
+		/* Hues for each tint: near each key hue, shift toward its dark/light directions, scaled by how far the tint moves from the source toward black/white */
+		${levelsChromatic.map(
+			LL => `--h-${LL}: calc(h + ${Object.values(hue.shifts).map(({
+				band,
+				darker,
+				lighter,
+			}) => {
+				return `clamp(0, 1 - pow(abs(h - ${band.center}) / ${band.extent}, ${band.exp}), 1)
+						* ${sop(
+							darker.max,
+							pow(progress_dark(LL), darker.exp),
+							lighter.max,
+							pow(progress_light(LL), lighter.exp),
+						)}`;
+			})});
+	`,
+		)}
+
+		/* Tints */
+		--tint-core: l c h;
+		--tint-100: 1 0 h;
+		${levels.map(LL => `--tint-${LL}: var(--l-${LL}, l) var(--c-${LL}, c) var(--h-${LL}, h);`)}
+		--tint-0: 0 0 h;
+	}
+`;

package/src/util.js

@@ -0,0 +1,21 @@
+import { round, clamp, progress, calc, ife, sop } from "airdry/css";
+
+export function snapToScale (x, points, { strat = "" } = {}) {
+	const terms = points.flatMap((b, i) => {
+		if (i === 0) {
+			return b;
+		}
+		const a = points[i - 1];
+		return [`${b} - ${a}`, round(strat, progress(x, a, b))];
+	});
+
+	return sop(terms);
+}
+
+export function tint_if (condition, tint_true, tint_false) {
+	return [..."lch"]
+		.map(c =>
+			ife(condition, `var(--${c}-${tint_true}, ${c})`, `var(--${c}-${tint_false}, ${c})`))
+		.map(c => calc(c))
+		.join(" ");
+}