CSS variables

A really nice feature of some libraries I've used in the past is the ability to link JavaScript properties to CSS variables.

For example, data-flux="flux-pointer" will expose --flux-pointer-x and --flux-pointer-y relative to the container, for use within CSS. They will be scalar values from 0 to 1 so calc() can be used to transform them to any other type, such as %.

CSS variables to implement:

• flux-pointer will give the --flux-pointer-x and --flux-pointer-y variables of the inner-most container they're found on.
• flux-pointer-global will give the --flux-pointer-global-x and --flux-pointer-global-y variables of the screen, wherever they're used.
• flux-size will give the --flux-size-x and --flux-size-y variables of the inner-most container they're found on.
• flux-visible will give the --flux-visible variable a value of 1 if the element is visible in its viewport, and 0 when not. You can use this to control the opacity, for example, with selector { opacity: calc(0.25 + var(--flux-visible) * 0.75); } so it fades as the page scrolls.
• flux-first-visible will give the --flux-first-visible variable a value of 1 when the element becomes visible for the first time, and it will never reset to 0. You can use it in the same kind of calc as flux-visible but this time it will never fade out when reversing the scroll direction, for example.
• flux-range will give the --flux-range variable a value between 0 and 1 depending on the value of the first <input type="range" /> found as a child.
• flux-select will find the first <select> element, and if the <option> values are numeric, the selected option will be given to the --flux-select variable.
• flux-color will find the first <input type="color" /> child and the selected hex value will be given to the --flux-color variable. This can be manipulated with CSS's color functions to automate colour schemes by rotating hues, saturations, etc.
• flux-field will find the first <input /> or <textarea> and give the following variables: --flux-field-length for the number of characters entered, --flux-field-empty as 0 for content, 1 for no content, --flux-field-valid and --flux-field-invalid both 0 and 1 but inverse of each other, --flux-field-remaining for the number of remaining characters if maxlength is supplied, and --flux-field-filled-scalar as the scalar value between 0 and 1 for how many characters are available before maxlength is hit, and --flux-field-too-short as 1 if the minlength field is supplied, and --flux-field-pattern-error if the pattern does not validate. There are also stateful variables: --flux-field-dirty as 1 if the value has changed, even if they changed it back to the original, or the opposite --flux-field-clean; --flux-field-touched for 1 if there has ever been focus, or the opposite --flux-field-untouched; or --flux-field-changed for 1 if the value is different, or the opposite --flux-field-unchanged.
• flux-form will find the first <form> child and give the following variables: --flux-form-field-count the total number of validatable fields are within the form; --flux-form-valid-count the number of fields with willvalidate as true; --flux-form-invalid-count the number of fields with willvalidate as false; --flux-form--all-valid 1 if all fields are considered valid; --flux-form-valid-scalar as a value between 0 and 1 expressing the amount of valid fields divided by the total.
• flux-palette will find the first <img> or <video> child, and give the following variables: --flux-palette a hex of the dominant colour, the mode average colour; --flux-palette-accent the most vibrant hex code in the image/video; --flux-palette-dark the darkest colour in the image that isn't black; --flux-palette-light the lightest colour in the image that isn't black; --flux-palette-average the mean colour; --flux-palette-temp from -1 (cool) to 1 (warm) how blue or red the image is
• flux-truncated is applied to the actual element, and will give the following variables: --flux-truncated 1 if there is any content truncated text, --flux-truncated-x 1 if there is any content truncated in the X axis, --flux-truncated-y 1 if there is any content truncated in the Y axis.

When I say "will find the first X child", the flux-* attribute can be added to a container, or the element itself.

To keep things performant, any "live" property updates do not need to be performed while the element is not visible - for example, while the element has been scrolled out of view, it doesn't need to continue receiving pointer updates.

Because CSS cascades, only children of the elements the attributes are added to will be affected. If you want a --flux-* variable to be available to another element's tree, add the data-flux attribute value of (flux-pointer,flux-size@footer>.some-selector). Inside the brackets, list the flux attributes that are required to be connected, followed by an at character, followed by the selector(s) that will receive these variables.

No source file, test, or entry point is named. Start by locating the existing handling for data-flux attributes and scope one variable family before addressing the broader list. Done should include the specified CSS variables, visibility-aware live updates, and coverage for the relevant element and child-selection behavior.