Preset functions for dynamic

[msaktype]

What

Add the following functions to define dynamic more easily

• dynamic.px()
• dynamic.num()
• dynamic.opacity()
• dynamic.var()

Example

dynamic.px()

dynamic: {
  w: d.px("width"),
}

dynamic.var()

import { dynamic as d } from "windctrl";

const card = windctrl({
  base: "relative",
  dynamic: {
    x: d.var("--x"),
    y: d.var("--y"),
  },
});

// Usage
<div
  className={card().className}
  style={{
    "--x": `${mouseX}px`,
    "--y": `${mouseY}px`,
  }}
/>

Why

dynamic: {
  w: (val) =>
    typeof val === "number" ? { style: { width: `${val}px` } } : val,
},

to define a function like this is kind of hard, and there is a tendency for CSS properties to require dynamic value changes