@thi.ng/meta-css 0.3.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thi.ng/meta-css",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Data-driven CSS framework codegen, transpiler & bundler",
   "type": "module",
   "module": "./index.js",
@@ -38,26 +38,26 @@
     "test": "bun test"
   },
   "dependencies": {
-    "@thi.ng/api": "^8.9.14",
-    "@thi.ng/args": "^2.3.1",
-    "@thi.ng/arrays": "^2.7.11",
-    "@thi.ng/checks": "^3.4.14",
-    "@thi.ng/compose": "^2.1.53",
-    "@thi.ng/errors": "^2.4.8",
-    "@thi.ng/file-io": "^1.1.2",
-    "@thi.ng/hiccup-css": "^2.3.4",
-    "@thi.ng/logger": "^2.1.1",
-    "@thi.ng/rstream": "^8.2.17",
-    "@thi.ng/strings": "^3.7.5",
-    "@thi.ng/text-format": "^2.0.1",
-    "@thi.ng/transducers": "^8.8.18"
+    "@thi.ng/api": "^8.9.15",
+    "@thi.ng/args": "^2.3.3",
+    "@thi.ng/arrays": "^2.7.12",
+    "@thi.ng/checks": "^3.4.15",
+    "@thi.ng/compose": "^2.1.54",
+    "@thi.ng/errors": "^2.4.9",
+    "@thi.ng/file-io": "^1.1.3",
+    "@thi.ng/hiccup-css": "^2.3.5",
+    "@thi.ng/logger": "^2.1.2",
+    "@thi.ng/rstream": "^8.2.18",
+    "@thi.ng/strings": "^3.7.6",
+    "@thi.ng/text-format": "^2.0.2",
+    "@thi.ng/transducers": "^8.8.19"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "^7.38.3",
-    "esbuild": "^0.19.8",
+    "@microsoft/api-extractor": "^7.39.0",
+    "esbuild": "^0.19.10",
     "rimraf": "^5.0.5",
     "typedoc": "^0.25.4",
-    "typescript": "^5.3.2"
+    "typescript": "^5.3.3"
   },
   "keywords": [
     "browser",
@@ -105,5 +105,5 @@
     "status": "alpha",
     "year": 2023
   },
-  "gitHead": "a30bdb0136223fe2e413a1d27a71d3bcff1dfd53\n"
+  "gitHead": "775c664723cd87d6ac5909cedf91195317add287\n"
 }

package/specs/a11y.json

@@ -0,0 +1,32 @@
+{
+	"specs": [
+		{
+			"user": "accessibility",
+			"name": "screen-reader",
+			"props": {
+				"position": "absolute",
+				"padding": 0,
+				"width": "1px",
+				"height": "1px",
+				"margin": "-1px",
+				"border": 0,
+				"overflow": "hidden",
+				"clip": "rect(0 0 0 0)"
+			},
+			"values": [""]
+		},
+		{
+			"user": "accessibility",
+			"name": "screen-reader-focus",
+			"props": {
+				"position": "static",
+				"width": "auto",
+				"height": "auto",
+				"margin": 0,
+				"overflow": "visible",
+				"clip": "auto"
+			},
+			"values": [""]
+		}
+	]
+}

package/specs/anim.json

@@ -1,12 +1,21 @@
 {
+	"decls": [["@keyframes", "fadein", { "opacity": 0 }, { "opacity": 1 }]],
 	"specs": [
+		{
+			"user": "animations / transitions",
+			"name": "fadein<k>",
+			"key": "i1",
+			"props": { "animation": "fadein <v> ease-in-out forwards" },
+			"values": [0.25, 0.5, 1],
+			"unit": "second"
+		},
 		{
 			"user": "animations / transitions",
 			"name": "bg-anim<k>",
 			"key": "i1",
-			"props": { "transition": "<v>s background-color ease-in-out" },
+			"props": { "transition": "<v> background-color ease-in-out" },
 			"values": [0.15, 0.25, 0.5],
-			"unit": null
+			"unit": "second"
 		}
 	]
 }

package/specs/aspect.json

@@ -0,0 +1,38 @@
+{
+	"specs": [
+		{
+			"user": "aspect ratios",
+			"name": "aspect-ratio-<k>",
+			"props": {
+				"height": 0,
+				"position": "relative",
+				"padding-bottom": "<v>"
+			},
+			"values": {
+				"16x9": 56.25,
+				"9x16": 177.7777,
+				"4x3": 75,
+				"3x4": 133.3333,
+				"6x4": 66.6666,
+				"4x6": 150,
+				"1x1": 100
+			},
+			"unit": "%"
+		},
+		{
+			"user": "aspect ratios",
+			"name": "aspect-ratio-object",
+			"props": {
+				"position": "absolute",
+				"top": 0,
+				"bottom": 0,
+				"left": 0,
+				"right": 0,
+				"width": "100%",
+				"height": "100%",
+				"z-index": 100
+			},
+			"values": [""]
+		}
+	]
+}

package/specs/background.json

@@ -0,0 +1,26 @@
+{
+	"specs": [
+		{
+			"user": "background",
+			"name": "bg-<v>",
+			"props": "background-size",
+			"values": ["cover", "contain"]
+		},
+		{
+			"user": "background",
+			"name": "bg-pos-<k>",
+			"props": "background-position",
+			"values": {
+				"n": "top",
+				"ne": "top right",
+				"e": "right",
+				"se": "bottom right",
+				"s": "bottom",
+				"sw": "bottom left",
+				"w": "left",
+				"nw": "top left",
+				"center": "center"
+			}
+		}
+	]
+}

package/specs/borders.json

@@ -33,6 +33,12 @@
 			"unit": "rem",
 			"var": ["t", "b"]
 		},
+		{
+			"user": "border radius",
+			"name": "br-<k>",
+			"props": "border-radius",
+			"values": { "100": "100%", "pill": "9999px" }
+		},
 		{
 			"user": "border width",
 			"name": "bw<vid><k>",
@@ -43,6 +49,17 @@
 			"values": "borders-w",
 			"unit": "rem",
 			"var": ["", "t", "r", "b", "l"]
+		},
+		{
+			"user": "border width",
+			"name": "bw<vid>-<v>px",
+			"props": {
+				"border<var>-style": "solid",
+				"border<var>-width": "<v>"
+			},
+			"values": [1],
+			"unit": "px",
+			"var": ["", "t", "r", "b", "l"]
 		}
 	]
 }

package/specs/dimensions.json

@@ -2,54 +2,72 @@
 	"tables": {
 		"sizes-abs": [1, 2, 4, 8, 16],
 		"sizes-rel": [
-			10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100
+			10, 16, 17, 20, 25, 30, 33, 34, 40, 50, 60, 66, 67, 70, 75, 80, 83,
+			84, 90, 100
 		]
 	},
+	"vars": {
+		"w": ["width"],
+		"h": ["height"]
+	},
 	"specs": [
 		{
-			"user": "width",
-			"name": "w<k>",
+			"user": "<var>",
+			"name": "<vid><k>",
 			"key": "i1",
-			"props": "width",
+			"props": "<var>",
 			"values": "sizes-abs",
-			"unit": "rem"
+			"unit": "rem",
+			"var": ["w", "h"]
 		},
 		{
-			"user": "width",
-			"name": "w-<v>",
-			"props": "width",
+			"user": "<var>",
+			"name": "<vid>-<v>",
+			"props": "<var>",
 			"values": "sizes-rel",
-			"unit": "%"
+			"unit": "%",
+			"var": ["w", "h"]
 		},
 		{
-			"user": "max. width",
-			"name": "mw<k>",
+			"user": "min. <var>",
+			"name": "min<vid><k>",
 			"key": "i1",
-			"props": "max-width",
+			"props": "min-<var>",
 			"values": "sizes-abs",
-			"unit": "rem"
+			"unit": "rem",
+			"var": ["w", "h"]
 		},
 		{
-			"user": "max. width",
-			"name": "mw-<v>",
-			"props": "max-width",
+			"user": "min. <var>",
+			"name": "min<vid>-<v>",
+			"props": "min-<var>",
 			"values": "sizes-rel",
-			"unit": "%"
+			"unit": "%",
+			"var": ["w", "h"]
 		},
 		{
-			"user": "height",
-			"name": "h<k>",
+			"user": "max. <var>",
+			"name": "max<vid><k>",
 			"key": "i1",
-			"props": "height",
+			"props": "max-<var>",
 			"values": "sizes-abs",
-			"unit": "rem"
+			"unit": "rem",
+			"var": ["w", "h"]
 		},
 		{
-			"user": "height",
-			"name": "h-<v>",
-			"props": "height",
+			"user": "max. <var>",
+			"name": "max<vid>-<v>",
+			"props": "max-<var>",
 			"values": "sizes-rel",
-			"unit": "%"
+			"unit": "%",
+			"var": ["w", "h"]
+		},
+		{
+			"name": "v<vid>-<v>",
+			"props": "<var>",
+			"values": [25, 50, 75, 100],
+			"unit": "v<vid>",
+			"var": ["w", "h"]
 		}
 	]
 }

package/specs/display.json

@@ -17,6 +17,12 @@
 				"tc": "table-cell",
 				"tr": "table-row"
 			}
+		},
+		{
+			"user": "visibility",
+			"name": "<v>",
+			"props": { "visibility": "<v> !important" },
+			"values": ["hidden", "visible"]
 		}
 	]
 }

package/specs/grids.json

@@ -0,0 +1,60 @@
+{
+	"tables": {
+		"align": ["start", "end", "center", "stretch"]
+	},
+	"vars": {
+		"align": ["align"],
+		"justify": ["justify"],
+		"cols": ["columns"],
+		"rows": ["rows"]
+	},
+	"specs": [
+		{
+			"user": "grid layout",
+			"name": "grid-<vid>-<k>",
+			"key": "i1",
+			"props": "grid-template-<var>",
+			"values": [
+				"1fr",
+				"1fr 1fr",
+				"1fr 1fr 1fr",
+				"repeat(4,1fr)",
+				"repeat(5,1fr)",
+				"repeat(6,1fr)",
+				"repeat(7,1fr)",
+				"repeat(8,1fr)",
+				"repeat(9,1fr)",
+				"repeat(10,1fr)"
+			],
+			"var": ["cols", "rows"]
+		},
+		{
+			"user": "grid layout",
+			"name": "gap<k>",
+			"props": "gap",
+			"values": [0, 0.125, 0.25, 0.5, 1, 2],
+			"unit": "rem"
+		},
+		{
+			"user": "grid layout",
+			"name": "gap-<v>px",
+			"props": "gap",
+			"values": [1, 2, 4, 8],
+			"unit": "px"
+		},
+		{
+			"user": "grid layout",
+			"name": "<var>-self-<v>",
+			"props": "<var>-self",
+			"values": "align",
+			"var": ["align", "justify"]
+		},
+		{
+			"user": "grid layout",
+			"name": "<var>-items-<v>",
+			"props": "<var>-items",
+			"values": "align",
+			"var": ["align", "justify"]
+		}
+	]
+}

package/specs/icons.json

@@ -0,0 +1,30 @@
+{
+	"specs": [
+		{
+			"user": "icons",
+			"name": "icon-<k>",
+			"key": "i1",
+			"props": {
+				"display": "inline-block",
+				"width": "<v>",
+				"height": "<v>"
+			},
+			"values": [3, 2.25, 1.5, 1.25, 1, 0.875, 0.75],
+			"unit": "rem"
+		},
+		{
+			"user": "icons",
+			"name": "icon-<k>",
+			"props": {
+				"display": "inline-block",
+				"width": "<v>",
+				"height": "<v>"
+			},
+			"values": {
+				"title": 6,
+				"subtitle": 5
+			},
+			"unit": "rem"
+		}
+	]
+}

package/specs/normalize.json

@@ -0,0 +1,158 @@
+{
+	"decls": [
+		["@comment", "----- start: CSS normalization -----"],
+		[":root", { "font-size": "16px" }],
+		["html", { "line-height": 1.15, "-webkit-text-size-adjust": "100%" }],
+		["body", { "margin": 0 }],
+		["h1", { "font-size": "2em", "margin": "0.67em 0" }],
+		[
+			"hr",
+			{
+				"-webkit-box-sizing": "content-box",
+				"box-sizing": "content-box",
+				"height": 0,
+				"overflow": "visible"
+			}
+		],
+		["a", { "background-color": "transparent" }],
+		[
+			"abbr[title]",
+			{
+				"border-bottom": "none",
+				"text-decoration": "underline dotted"
+			}
+		],
+		["b", "strong", { "font-weight": "bolder" }],
+		[
+			"code",
+			"kbd",
+			"samp",
+			{ "font-family": "monospace", "font-size": "1em" }
+		],
+		["small", { "font-size": "80%" }],
+		[
+			"sub",
+			"sup",
+			{
+				"font-size": "75%",
+				"line-height": 0,
+				"position": "relative",
+				"vertical-align": "baseline"
+			}
+		],
+		["sub", { "bottom": "-0.25em" }],
+		["sup", { "top": "-0.5em" }],
+		["img", { "border-style": "none" }],
+		[
+			"button",
+			"input",
+			"optgroup",
+			"select",
+			"textarea",
+			{
+				"font-family": "inherit",
+				"font-size": "100%",
+				"line-height": 1.15,
+				"margin": 0
+			}
+		],
+		["button", "input", { "overflow": "visible" }],
+		["button", "select", { "text-transform": "none" }],
+		[
+			"button",
+			"[type=\"button\"]",
+			"[type=\"reset\"]",
+			"[type=\"submit\"]",
+			{ "-webkit-appearance": "button" },
+			["::-moz-focus-inner", { "border-style": "none", "padding": 0 }],
+			[":-moz-focusring", { "outline": "1px dotted ButtonText" }]
+		],
+		["fieldset", { "padding": "0.35em 0.75em 0.625em" }],
+		[
+			"legend",
+			{
+				"display": "table",
+				"max-width": "100%",
+				"padding": 0,
+				"white-space": "normal"
+			}
+		],
+		["progress", { "vertical-align": "baseline" }],
+		["textarea", { "overflow": "auto" }],
+		["[type=\"checkbox\"]", "[type=\"radio\"]", { "padding": 0 }],
+		[
+			"[type=\"number\"]",
+			[
+				"::-webkit-inner-spin-button",
+				"::-webkit-outer-spin-button",
+				{ "height": "auto" }
+			]
+		],
+		[
+			"[type=\"search\"]",
+			{
+				"-webkit-appearance": "textfield",
+				"outline-offset": "-2px"
+			},
+			["::-webkit-search-decoration", { "-webkit-appearance": "none" }]
+		],
+		[
+			"::-webkit-file-upload-button",
+			{
+				"-webkit-appearance": "button",
+				"font": "inherit"
+			}
+		],
+		["details", { "display": "block" }],
+		["summary", { "display": "list-item" }],
+		["[hidden]", "template", { "display": "none" }],
+		[
+			"html",
+			"legend",
+			"input",
+			"textarea",
+			"[type=\"checkbox\"]",
+			"[type=\"date\"]",
+			"[type=\"datetime-local\"]",
+			"[type=\"file\"]",
+			"[type=\"radio\"]",
+			"[type=\"search\"]",
+			{ "box-sizing": "border-box", "-webkit-box-sizing": "border-box" }
+		],
+		["*", ":before", ":after", { "box-sizing": "inherit" }],
+		["html", "body", { "min-height": "100%" }],
+		["img", { "max-width": "100%", "height": "auto" }],
+		[
+			"blockquote",
+			"caption",
+			"cite",
+			"dd",
+			"dl",
+			"dt",
+			"fieldset",
+			"figcaption",
+			"h1",
+			"h2",
+			"h3",
+			"h4",
+			"h5",
+			"h6",
+			"hr",
+			"input",
+			"label",
+			"legend",
+			"ol",
+			"ol li",
+			"p",
+			"progress",
+			"table",
+			"textarea",
+			"ul",
+			"ul li",
+			[":first-child", { "margin-top": 0 }],
+			[":last-child", { "margin-bottom": 0 }]
+		],
+		["@comment", "----- end: CSS normalization -----"]
+	],
+	"specs": []
+}

package/specs/positions.json

@@ -7,7 +7,7 @@
 			"user": "positions",
 			"name": "<v>",
 			"props": "position",
-			"values": ["absolute", "relative", "fixed", "sticky"]
+			"values": ["absolute", "relative", "fixed", "static", "sticky"]
 		},
 		{
 			"user": "positions",

package/specs/selection.json

@@ -0,0 +1,15 @@
+{
+	"specs": [
+		{
+			"user": "selection",
+			"name": "noselect",
+			"props": {
+				"-webkit-user-select": "<v>",
+				"-moz-user-selec": "<v>",
+				"-ms-user-select": "<v>",
+				"user-select": "<v>"
+			},
+			"values": ["none"]
+		}
+	]
+}

package/specs/shadows.json

@@ -0,0 +1,43 @@
+{
+	"tables": {
+		"shadows": [
+			"0 0 2px 0px #0003",
+			"0 0 4px #0003",
+			"0 0 4px 1px #0003",
+			"0 0 8px 2px #0003"
+		]
+	},
+	"specs": [
+		{
+			"user": "shadow",
+			"name": "box-shadow-<k>",
+			"key": "i1",
+			"props": "box-shadow",
+			"values": "shadows"
+		},
+		{
+			"user": "shadow",
+			"name": "box-shadow-i-<k>",
+			"key": "i1",
+			"props": { "box-shadow": "<v> inset" },
+			"values": "shadows"
+		},
+		{
+			"user": "shadow",
+			"name": "text-shadow-<k>",
+			"key": "i1",
+			"props": "text-shadow",
+			"values": [
+				"1px 1px 2px #0003",
+				"1px 1px 4px #0003",
+				"1px 1px 8px #0003",
+				"2px 2px 2px #0003",
+				"2px 2px 4px #0003",
+				"2px 2px 8px #0003",
+				"3px 3px 2px #0003",
+				"3px 3px 4px #0003",
+				"3px 3px 8px #0003"
+			]
+		}
+	]
+}