cssints 0.0.0-stage → 0.2.0

package/dist/surface.d.mts

@@ -0,0 +1,228 @@
+import { t as AliasesOf } from "./scope-ZVhUxQH1.mjs";
+//#region src/surface.d.ts
+/**
+ * `surface().color(t.color.canvas).lighten(0.06).ink()`: a background that follows from the surface around it, however
+ * many plain wrappers sit between. `color(<color>)` is an absolute base (default: the parent surface); `lighten(step)`,
+ * `darken(step)` and `contrast(step)` (away from the parent: a light parent is darkened, a dark one lightened) move its
+ * OKLCH lightness by `step` in [0, 1], and only one of them goes in a chain. `ink()` is black or white text by the
+ * lightness of the surface. These are tonal steps, not a contrast guarantee: for a ratio, check declared tokens with
+ * `css.check.contrast`. It stands for `background-color`, so mixing it with `bg()`, `background` or `backgroundColor` in
+ * one `cn()` is a build error.
+ */
+export declare const surfaceScope: import("cssints/plugin").Scope<"surface", {
+  readonly frame: import("cssints/plugin").Scope<"frame", {
+    readonly core: {
+      readonly css: string;
+      readonly atProperty: string;
+      readonly requires: ["css.at-rules.property", "css.types.max"];
+    };
+    readonly fallback: {
+      readonly polyfills: ["css.at-rules.container.style_queries_for_custom_properties"];
+      readonly parentVars: [{
+        readonly marker: "&";
+        readonly read: "--_i";
+        readonly write: "--_u";
+        readonly watch: "--_t";
+      }];
+      readonly css: "\n:root[data-cssints-poly] & {\n  --_u: calc(var(--_r) + var(--_m));\n  --_i: max(max(var(--_u) - var(--_m), 0px) - var(--_p) - var(--_b), 0px);\n  --_t: var(--_i);\n  border-radius: max(var(--_u) - var(--_m), 0px);\n  transition: --_t 1ms;\n}";
+    };
+    readonly noBox: {
+      readonly props: [RegExp, RegExp];
+      readonly message: "frame() sets padding, margin, border-radius and the border: use its methods";
+    };
+    readonly frame: {
+      readonly uses: readonly ["core", "fallback", "noBox"];
+      readonly chain: {
+        readonly radius: {
+          readonly args: "<length [0,∞]>";
+          readonly emit: (v: string) => [string, string][];
+        };
+        readonly padding: {
+          readonly args: "<length [0,∞]>";
+          readonly spacing: true;
+          readonly emit: (v: string) => [string, string][];
+        };
+        readonly border: {
+          readonly args: "<length [0,∞]>";
+          readonly emit: (v: string) => [string, string][];
+        };
+        readonly margin: {
+          readonly args: "<length>";
+          readonly spacing: true;
+          readonly emit: (v: string) => [string, string][];
+        };
+      };
+    };
+  }>;
+  readonly core: {
+    readonly css: string;
+    readonly atProperty: string;
+    readonly requires: ["css.at-rules.property", {
+      readonly key: "css.types.color.oklch.relative_syntax";
+      readonly exact: true;
+    }];
+  };
+  readonly fallback: {
+    readonly polyfills: ["css.at-rules.container.style_queries_for_custom_properties"];
+    readonly parentVars: [{
+      readonly marker: "&";
+      readonly read: "--_v";
+      readonly write: "--_u";
+      readonly watch: "--_t";
+    }];
+    readonly css: string;
+  };
+  readonly noBackground: {
+    readonly props: ["background", "background-color"];
+    readonly message: "surface() sets the background colour: use its methods";
+  };
+  readonly surface: {
+    readonly uses: readonly ["core", "fallback", "noBackground"];
+    readonly chain: {
+      readonly color: {
+        readonly args: "<color>";
+        readonly emit: (v: string) => [string, string][];
+      };
+      readonly lighten: {
+        readonly args: "<number [0,1]>";
+        readonly excludes: readonly ["darken", "contrast"];
+        readonly emit: (v: string) => [string, string][];
+      };
+      readonly darken: {
+        readonly args: "<number [0,1]>";
+        readonly excludes: readonly ["lighten", "contrast"];
+        readonly emit: (v: string) => [string, string][];
+      };
+      readonly contrast: {
+        readonly args: "<number [0,1]>";
+        readonly excludes: readonly ["lighten", "darken"];
+        readonly emit: (v: string) => [string, string][];
+      };
+      readonly ink: {
+        readonly args: "";
+        readonly emit: () => [string, string][];
+      };
+    };
+  };
+}>;
+export declare const surface: () => import("cssints/plugin").Chain<"surface", {
+  readonly color: {
+    readonly args: "<color>";
+    readonly emit: (v: string) => [string, string][];
+  };
+  readonly lighten: {
+    readonly args: "<number [0,1]>";
+    readonly excludes: readonly ["darken", "contrast"];
+    readonly emit: (v: string) => [string, string][];
+  };
+  readonly darken: {
+    readonly args: "<number [0,1]>";
+    readonly excludes: readonly ["lighten", "contrast"];
+    readonly emit: (v: string) => [string, string][];
+  };
+  readonly contrast: {
+    readonly args: "<number [0,1]>";
+    readonly excludes: readonly ["lighten", "darken"];
+    readonly emit: (v: string) => [string, string][];
+  };
+  readonly ink: {
+    readonly args: "";
+    readonly emit: () => [string, string][];
+  };
+}, AliasesOf<{
+  readonly frame: import("cssints/plugin").Scope<"frame", {
+    readonly core: {
+      readonly css: string;
+      readonly atProperty: string;
+      readonly requires: ["css.at-rules.property", "css.types.max"];
+    };
+    readonly fallback: {
+      readonly polyfills: ["css.at-rules.container.style_queries_for_custom_properties"];
+      readonly parentVars: [{
+        readonly marker: "&";
+        readonly read: "--_i";
+        readonly write: "--_u";
+        readonly watch: "--_t";
+      }];
+      readonly css: "\n:root[data-cssints-poly] & {\n  --_u: calc(var(--_r) + var(--_m));\n  --_i: max(max(var(--_u) - var(--_m), 0px) - var(--_p) - var(--_b), 0px);\n  --_t: var(--_i);\n  border-radius: max(var(--_u) - var(--_m), 0px);\n  transition: --_t 1ms;\n}";
+    };
+    readonly noBox: {
+      readonly props: [RegExp, RegExp];
+      readonly message: "frame() sets padding, margin, border-radius and the border: use its methods";
+    };
+    readonly frame: {
+      readonly uses: readonly ["core", "fallback", "noBox"];
+      readonly chain: {
+        readonly radius: {
+          readonly args: "<length [0,∞]>";
+          readonly emit: (v: string) => [string, string][];
+        };
+        readonly padding: {
+          readonly args: "<length [0,∞]>";
+          readonly spacing: true;
+          readonly emit: (v: string) => [string, string][];
+        };
+        readonly border: {
+          readonly args: "<length [0,∞]>";
+          readonly emit: (v: string) => [string, string][];
+        };
+        readonly margin: {
+          readonly args: "<length>";
+          readonly spacing: true;
+          readonly emit: (v: string) => [string, string][];
+        };
+      };
+    };
+  }>;
+  readonly core: {
+    readonly css: string;
+    readonly atProperty: string;
+    readonly requires: ["css.at-rules.property", {
+      readonly key: "css.types.color.oklch.relative_syntax";
+      readonly exact: true;
+    }];
+  };
+  readonly fallback: {
+    readonly polyfills: ["css.at-rules.container.style_queries_for_custom_properties"];
+    readonly parentVars: [{
+      readonly marker: "&";
+      readonly read: "--_v";
+      readonly write: "--_u";
+      readonly watch: "--_t";
+    }];
+    readonly css: string;
+  };
+  readonly noBackground: {
+    readonly props: ["background", "background-color"];
+    readonly message: "surface() sets the background colour: use its methods";
+  };
+  readonly surface: {
+    readonly uses: readonly ["core", "fallback", "noBackground"];
+    readonly chain: {
+      readonly color: {
+        readonly args: "<color>";
+        readonly emit: (v: string) => [string, string][];
+      };
+      readonly lighten: {
+        readonly args: "<number [0,1]>";
+        readonly excludes: readonly ["darken", "contrast"];
+        readonly emit: (v: string) => [string, string][];
+      };
+      readonly darken: {
+        readonly args: "<number [0,1]>";
+        readonly excludes: readonly ["lighten", "contrast"];
+        readonly emit: (v: string) => [string, string][];
+      };
+      readonly contrast: {
+        readonly args: "<number [0,1]>";
+        readonly excludes: readonly ["lighten", "darken"];
+        readonly emit: (v: string) => [string, string][];
+      };
+      readonly ink: {
+        readonly args: "";
+        readonly emit: () => [string, string][];
+      };
+    };
+  };
+}>>;
+//#endregion

package/dist/surface.mjs

@@ -0,0 +1,101 @@
+import { n as frameScope } from "./frame-BoBKjgBB.mjs";
+import { scope } from "cssints/plugin";
+//#region src/surface.ts
+const registered = (names, inherits) => names.map((n) => `@property --_${n} { syntax: "<color>"; inherits: ${inherits}; initial-value: canvas; }`).join("\n");
+const shift = (parent) => `oklch(from var(--_k, var(${parent})) calc(l + var(--_d)) c h)`;
+const css = `
+& {
+  --_k: initial;
+  --_d: 0;
+  background-color: var(--_s);
+}
+@container (style(--_p: e)) or (not style(--_p)) {
+  & { --_p: o; --_s: ${shift("--_e")}; --_o: var(--_s); }
+}
+@container style(--_p: o) {
+  & { --_p: e; --_s: ${shift("--_o")}; --_e: var(--_s); }
+}`;
+const fallback = `
+:root[data-cssints-poly] & {
+  --_s: ${shift("--_u")};
+  --_v: var(--_s);
+  --_t: var(--_v);
+  background-color: var(--_s);
+  transition: --_t 1ms;
+}
+:root[data-cssints-poly] &&(frame.core) { transition: --_t 1ms, --frame-t 1ms; }`;
+const pivot = "(0.5636 - l) * 1e6";
+const step = "<number [0,1]>";
+/**
+* `surface().color(t.color.canvas).lighten(0.06).ink()`: a background that follows from the surface around it, however
+* many plain wrappers sit between. `color(<color>)` is an absolute base (default: the parent surface); `lighten(step)`,
+* `darken(step)` and `contrast(step)` (away from the parent: a light parent is darkened, a dark one lightened) move its
+* OKLCH lightness by `step` in [0, 1], and only one of them goes in a chain. `ink()` is black or white text by the
+* lightness of the surface. These are tonal steps, not a contrast guarantee: for a ratio, check declared tokens with
+* `css.check.contrast`. It stands for `background-color`, so mixing it with `bg()`, `background` or `backgroundColor` in
+* one `cn()` is a build error.
+*/
+const surfaceScope = scope("surface", {
+	frame: frameScope,
+	core: {
+		css,
+		atProperty: [registered(["e", "o"], true), registered([
+			"u",
+			"v",
+			"t"
+		], false)].join("\n"),
+		requires: ["css.at-rules.property", {
+			key: "css.types.color.oklch.relative_syntax",
+			exact: true
+		}]
+	},
+	fallback: {
+		polyfills: ["css.at-rules.container.style_queries_for_custom_properties"],
+		parentVars: [{
+			marker: "&",
+			read: "--_v",
+			write: "--_u",
+			watch: "--_t"
+		}],
+		css: fallback
+	},
+	noBackground: {
+		props: ["background", "background-color"],
+		message: "surface() sets the background colour: use its methods"
+	},
+	surface: {
+		uses: [
+			"core",
+			"fallback",
+			"noBackground"
+		],
+		chain: {
+			color: {
+				args: "<color>",
+				emit: (v) => [["--_k", v]]
+			},
+			lighten: {
+				args: step,
+				excludes: ["darken", "contrast"],
+				emit: (v) => [["--_d", v]]
+			},
+			darken: {
+				args: step,
+				excludes: ["lighten", "contrast"],
+				emit: (v) => [["--_d", `calc(${v} * -1)`]]
+			},
+			contrast: {
+				args: step,
+				excludes: ["lighten", "darken"],
+				emit: (v) => [["--_d", `calc(${v} * clamp(-1, ${pivot}, 1))`]]
+			},
+			ink: {
+				args: "",
+				emit: () => [["color", `oklch(from var(--_s) clamp(0, ${pivot}, 1) 0 0)`]]
+			}
+		}
+	}
+});
+const { surface } = surfaceScope.export();
+//#endregion
+export { surface, surfaceScope };