add normalize, bug fixes for shadows, checkin OPv1 main and normalize…

… copies

.gitignore

@@ -2,3 +2,5 @@
 .cache/
 node_modules/
 /*.css
+!open-props.min.css
+!normalize.min.css

css/index.css

@@ -1,11 +1,15 @@
 @import 'media-queries.css';
-@import 'font/index.css';
-@import 'sizes/index.css';
+@import 'font/families.css';
+@import 'font/weight.css';
+@import 'sizes/font.css';
+@import 'sizes/fontfluid.css';
+@import 'sizes/size.css';
+@import 'sizes/fluid.css';
+@import 'sizes/header.css';
+@import 'sizes/content.css';
 @import 'aspect-ratios.css';
 @import 'z-index.css';
 @import 'borders.css';
 @import 'shadows.css';
 @import 'motion/easings.css';
-@import 'motion/animations.css';
-@import 'color/index.hex.css';
-@import 'color/gradients.css';
+@import 'color/palette.oklch.css';

css/packs/normalize/index.css

@@ -23,6 +23,6 @@
 	}
 
 	::placeholder {
-		color: var(--gray-6);
+		color: var(--color-6);
 	}
 }

css/shadows.css

@@ -1,64 +1,74 @@
 * {
 	--shadow-strength: 1%;
-	--shadow-saturation: 3%;
+	--shadow-chroma: 3%;
 	--shadow-hue: var(--shadow-tint, var(--palette-hue));
-	--shadow-color: var(--shadow-hue) var(--shadow-saturation) 15%;
+	--shadow-color: 15% var(--shadow-chroma) var(--shadow-hue);
 	--inner-shadow-highlight: inset 0 -0.5px 0 0 #fff, inset 0 0.5px 0 0 #0001;
 
 	@media (--OSdark) {
 		--shadow-strength: 25%;
-		--shadow-saturation: 40%;
+		--shadow-chroma: 10%;
 		--shadow-hue: var(--shadow-tint, var(--palette-hue));
-		--shadow-color: var(--shadow-hue) var(--shadow-saturation) 15%;
+		--shadow-color: 15% var(--shadow-chroma) var(--shadow-hue);
 		--inner-shadow-highlight: inset 0 -0.5px 0 0 #fff1, inset 0 0.5px 0 0 #0007;
 	}
 
-	--shadow-1: 0 1px 2px -1px hsl(var(--shadow-color) /
+	--shadow-1: 0 1px 2px -1px oklch(var(--shadow-color) /
 				calc(var(--shadow-strength) + 9%));
-	--shadow-2: 0 3px 5px -2px hsl(var(--shadow-color) /
+	--shadow-2: 0 3px 5px -2px oklch(var(--shadow-color) /
 					calc(var(--shadow-strength) + 3%)),
-		0 7px 14px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%));
-	--shadow-3: 0 -1px 3px 0 hsl(var(--shadow-color) /
+		0 7px 14px -5px oklch(var(--shadow-color) /
+					calc(var(--shadow-strength) + 5%));
+	--shadow-3: 0 -1px 3px 0 oklch(var(--shadow-color) /
 					calc(var(--shadow-strength) + 2%)),
-		0 1px 2px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
-		0 2px 5px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
-		0 4px 12px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
-		0 12px 15px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
-	--shadow-4: 0 -2px 5px 0 hsl(var(--shadow-color) /
+		0 1px 2px -5px oklch(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
+		0 2px 5px -5px oklch(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
+		0 4px 12px -5px oklch(var(--shadow-color) /
+					calc(var(--shadow-strength) + 5%)),
+		0 12px 15px -5px oklch(var(--shadow-color) /
+					calc(var(--shadow-strength) + 7%));
+	--shadow-4: 0 -2px 5px 0 oklch(var(--shadow-color) /
 					calc(var(--shadow-strength) + 2%)),
-		0 1px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
-		0 2px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
-		0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
-		0 9px 9px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
-		0 16px 16px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%));
-	--shadow-5: 0 -1px 2px 0 hsl(var(--shadow-color) /
+		0 1px 1px -2px oklch(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
+		0 2px 2px -2px oklch(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
+		0 5px 5px -2px oklch(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
+		0 9px 9px -2px oklch(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
+		0 16px 16px -2px oklch(var(--shadow-color) /
+					calc(var(--shadow-strength) + 6%));
+	--shadow-5: 0 -1px 2px 0 oklch(var(--shadow-color) /
 					calc(var(--shadow-strength) + 2%)),
-		0 2px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
-		0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
-		0 10px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
-		0 20px 20px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
-		0 40px 40px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
-	--shadow-6: 0 -1px 2px 0 hsl(var(--shadow-color) /
+		0 2px 1px -2px oklch(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
+		0 5px 5px -2px oklch(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
+		0 10px 10px -2px oklch(var(--shadow-color) /
+					calc(var(--shadow-strength) + 4%)),
+		0 20px 20px -2px oklch(var(--shadow-color) /
+					calc(var(--shadow-strength) + 5%)),
+		0 40px 40px -2px oklch(var(--shadow-color) /
+					calc(var(--shadow-strength) + 7%));
+	--shadow-6: 0 -1px 2px 0 oklch(var(--shadow-color) /
 					calc(var(--shadow-strength) + 2%)),
-		0 3px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
-		0 7px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
-		0 12px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
-		0 22px 18px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
-		0 41px 33px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%)),
-		0 100px 80px -2px hsl(var(--shadow-color) /
+		0 3px 2px -2px oklch(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
+		0 7px 5px -2px oklch(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
+		0 12px 10px -2px oklch(var(--shadow-color) /
+					calc(var(--shadow-strength) + 4%)),
+		0 22px 18px -2px oklch(var(--shadow-color) /
+					calc(var(--shadow-strength) + 5%)),
+		0 41px 33px -2px oklch(var(--shadow-color) /
+					calc(var(--shadow-strength) + 6%)),
+		0 100px 80px -2px oklch(var(--shadow-color) /
 					calc(var(--shadow-strength) + 7%));
 	--inner-shadow-0: inset 0 0 0 1px
-		hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
+		oklch(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
 	--inner-shadow-1: inset 0 1px 2px 0
-			hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)),
+			oklch(var(--shadow-color) / calc(var(--shadow-strength) + 9%)),
 		var(--inner-shadow-highlight);
 	--inner-shadow-2: inset 0 1px 4px 0
-			hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)),
+			oklch(var(--shadow-color) / calc(var(--shadow-strength) + 9%)),
 		var(--inner-shadow-highlight);
 	--inner-shadow-3: inset 0 2px 8px 0
-			hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)),
+			oklch(var(--shadow-color) / calc(var(--shadow-strength) + 9%)),
 		var(--inner-shadow-highlight);
 	--inner-shadow-4: inset 0 2px 14px 0
-			hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)),
+			oklch(var(--shadow-color) / calc(var(--shadow-strength) + 9%)),
 		var(--inner-shadow-highlight);
 }

docs/astro.config.mjs

@@ -14,7 +14,7 @@ export default defineConfig({
 			},
 			// site: 'https://open-props.style',
 			customCss: [
-				'../css/index.v2.css',
+				'../css/index.css',
 				'./src/styles/demo-animations.css',
 				'./src/styles/starlight.overrides.css',
 			],

package.json

@@ -3,7 +3,7 @@
 	"name": "open-props",
 	"author": "Adam Argyle",
 	"license": "MIT",
-	"version": "2.0.0-beta.0",
+	"version": "2.0.0-beta.1",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/argyleink/open-props"
@@ -42,10 +42,8 @@
 	"scripts": {
 		"test": "ava test/basic.test.cjs",
 		"build": "concurrently npm:lib:* -m 25",
-		"lib:main": "lightningcss --bundle --custom-media --minify -t 'last 2 Chrome versions, last 2 Safari versions, last 2 Firefox versions' css/index.css -o open-props.min.css",
-		"lib:main:v2": "lightningcss --bundle --custom-media --minify -t 'last 2 Chrome versions, last 2 Safari versions, last 2 Firefox versions' css/index.v2.css -o index.css",
-		"lib:normalize": "lightningcss --bundle --custom-media --minify -t 'last 2 Chrome versions, last 2 Safari versions, last 2 Firefox versions' css/packs/normalize/index.css -o normalize.min.css",
-		"lib:normalize:v2": "lightningcss --bundle --custom-media --minify -t 'last 2 Chrome versions, last 2 Safari versions, last 2 Firefox versions' css/packs/normalize/index.v2.css -o normalize.css",
+		"lib:main": "lightningcss --bundle --custom-media --minify -t 'last 2 Chrome versions, last 2 Safari versions, last 2 Firefox versions' css/index.css -o index.css",
+		"lib:normalize": "lightningcss --bundle --custom-media --minify -t 'last 2 Chrome versions, last 2 Safari versions, last 2 Firefox versions' css/packs/normalize/index.css -o normalize.css",
 		"lib:buttons": "lightningcss --bundle --custom-media --minify -t 'last 2 Chrome versions, last 2 Safari versions, last 2 Firefox versions' css/packs/buttons/index.css -o buttons.css",
 		"lib:forms": "lightningcss --bundle --custom-media --minify -t 'last 2 Chrome versions, last 2 Safari versions, last 2 Firefox versions' css/packs/forms/index.css -o forms.css",
 		"lib:animate": "lightningcss --bundle --custom-media --minify -t 'last 2 Chrome versions, last 2 Safari versions, last 2 Firefox versions' css/packs/animate/index.css -o animate.css",