@galaxy-io/dls 2.3.0 → 2.3.2

package/biome/plugins/no-inline-style.grit

@@ -1,12 +1,15 @@
 // DLS: no inline `style={{ … }}` except to set CSS custom properties (Constitution IV.1).
-// `style={{ "--gx-x": value, ["--gx-y"]: value, ...style }}` is fine; `style={{ color: … }}`,
-// `style={{ color }}` (shorthand) and `style={{ [key]: … }}` (non-`--` computed key) are not.
+// `style={{ "--gx-x": value, ["--gx-y"]: value, [GRID_BACKGROUND_COLOR_VAR]: value, ...style }}` is
+// fine (a computed key named `*_VAR` is an exported custom-property constant); `style={{ color: … }}`,
+// `style={{ color }}` (shorthand) and `style={{ [key]: … }}` (any other computed key) are not.
 language js
 
 JsxAttribute(name=$name, initializer=$value) where {
   $name <: "style",
   $value <: contains or {
-    JsPropertyObjectMember(name=$key) as $member where { $key <: not r"(?s)(?:\[\s*)?[\"'`]--.*" },
+    JsPropertyObjectMember(name=$key) as $member where {
+      $key <: not r"(?s)(?:(?:\[\s*)?[\"'`]--.*|\[\s*[A-Z][A-Z0-9_]*_VAR\s*\])"
+    },
     JsShorthandPropertyObjectMember() as $member
   },
   register_diagnostic(span=$member, message="DLS: inline style may only set CSS custom properties (`--gx-*`). Style with Linaria.", severity="error")

package/biome/plugins/warn/no-inline-style.grit

@@ -6,7 +6,9 @@ language js
 JsxAttribute(name=$name, initializer=$value) where {
   $name <: "style",
   $value <: contains or {
-    JsPropertyObjectMember(name=$key) as $member where { $key <: not r"(?s)(?:\[\s*)?[\"'`]--.*" },
+    JsPropertyObjectMember(name=$key) as $member where {
+      $key <: not r"(?s)(?:(?:\[\s*)?[\"'`]--.*|\[\s*[A-Z][A-Z0-9_]*_VAR\s*\])"
+    },
     JsShorthandPropertyObjectMember() as $member
   },
   register_diagnostic(span=$member, message="DLS: inline style may only set CSS custom properties (`--gx-*`). Style with Linaria.", severity="warn")

package/dist/backgrounds/GridBackground.d.ts

@@ -21,6 +21,15 @@ export declare enum GridBackgroundSize {
     /** 48px pitch. */
     X_LARGE = "X_LARGE"
 }
+/** Custom property for the mark color: a `t.color.*` token. Unset, each pattern uses its own `opacity.fg*` token. */
+export declare const GRID_BACKGROUND_COLOR_VAR = "--gx-grid-background-color";
+/** Custom property for the pattern's opacity, 0 to 1. Unset, `1`. */
+export declare const GRID_BACKGROUND_OPACITY_VAR = "--gx-grid-background-opacity";
+/** `style` for GridBackground: CSS custom properties only, typed for the two it reads. */
+export type GridBackgroundStyle = CSSProperties & {
+    [GRID_BACKGROUND_COLOR_VAR]?: string;
+    [GRID_BACKGROUND_OPACITY_VAR]?: number;
+};
 export interface GridBackgroundProps extends AriaAttributes {
     /**
      * The mark repeated across the grid: dots, small crosses at the intersections, or ruled cells.
@@ -40,8 +49,8 @@ export interface GridBackgroundProps extends AriaAttributes {
     [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
     /** Extra class on the root `<div>`. */
     className?: string;
-    /** Inline style on the root `<div>`; only for setting CSS custom properties. */
-    style?: CSSProperties;
+    /** Inline style on the root `<div>`; only for setting CSS custom properties (`GRID_BACKGROUND_COLOR_VAR`, `GRID_BACKGROUND_OPACITY_VAR`). */
+    style?: GridBackgroundStyle;
 }
 /** A dot, cross or cell grid painted behind centered content. */
 declare const GridBackground: import("react").ForwardRefExoticComponent<GridBackgroundProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/backgrounds/GridBackground.js

@@ -12,6 +12,10 @@ import { match } from "ts-pattern";
 * token, so the pattern follows the theme through CSS alone, with the same
 * markup on the server and the client. Decoration only: not interactive, no semantics.
 *
+* Two custom properties tune the marks through `style`: `GRID_BACKGROUND_COLOR_VAR` takes a
+* `t.color.*` token for the mark color, `GRID_BACKGROUND_OPACITY_VAR` a 0 to 1 opacity for the
+* whole pattern. Unset, the pattern keeps its quiet default.
+*
 * Replaces 1.x `DotGridBackground`, `CrossGridBackground` and `CellGridBackground` (`pattern`;
 * `spacing` / `cellSize` → `size`; the color, opacity, stroke, radius and fill props are gone).
 */
@@ -39,6 +43,10 @@ var GridBackgroundSize = /* @__PURE__ */ function(GridBackgroundSize) {
 	GridBackgroundSize["X_LARGE"] = "X_LARGE";
 	return GridBackgroundSize;
 }({});
+/** Custom property for the mark color: a `t.color.*` token. Unset, each pattern uses its own `opacity.fg*` token. */
+var GRID_BACKGROUND_COLOR_VAR = "--gx-grid-background-color";
+/** Custom property for the pattern's opacity, 0 to 1. Unset, `1`. */
+var GRID_BACKGROUND_OPACITY_VAR = "--gx-grid-background-opacity";
 /** Fills the parent and centers the children; a stacking context so the layer sits under them. */
 var Root = /*#__PURE__*/ styled("div")({
 	name: "Root",
@@ -51,7 +59,7 @@ var Layer = /*#__PURE__*/ styled("svg")({
 	class: "gx-GridBackground-Layer-lvvo1cl",
 	propsAsIs: false
 });
-/** The mark color per pattern, on the layer only (never inherited by the children). */
+/** The default mark color per pattern, on the layer only (never inherited by the children); `GRID_BACKGROUND_COLOR_VAR` overrides it. */
 var GRID_BACKGROUND_PATTERN_TO_CSS_MAP = {
 	["DOT"]: "gx-GridBackground-DOT-d1ezsakb",
 	["CROSS"]: "gx-GridBackground-CROSS-cl21ufg",
@@ -143,4 +151,4 @@ var GridBackground = forwardRef(function GridBackground({ pattern = "DOT", size
 });
 GridBackground.displayName = "GridBackground";
 //#endregion
-export { GridBackgroundPattern, GridBackgroundSize, GridBackground as default };
+export { GRID_BACKGROUND_COLOR_VAR, GRID_BACKGROUND_OPACITY_VAR, GridBackgroundPattern, GridBackgroundSize, GridBackground as default };