@galaxy-io/dls 2.8.1 → 2.10.0

package/dist/shapes/Circle.js

@@ -1,3 +1,4 @@
+import { ROLE_COLOR_TO_CSS_MAP } from "../styles/internal/roleColor.js";
 /* empty css                 */
 import { styled } from "@linaria/react";
 import { forwardRef } from "react";
@@ -34,7 +35,7 @@ var CircleSize = /* @__PURE__ */ function(CircleSize) {
 	CircleSize["X_LARGE"] = "X_LARGE";
 	return CircleSize;
 }({});
-/** Fill color role (Constitution V-A color set). Neutral steps resolve to `color.text.*`, statuses to `color.mark.*`. */
+/** Fill color role (AGENTS.md "Variant": color set). Neutral steps resolve to `color.text.*`, statuses to `color.mark.*`. */
 var CircleVariant = /* @__PURE__ */ function(CircleVariant) {
 	/** `text.primary`. */
 	CircleVariant["PRIMARY"] = "PRIMARY";
@@ -82,31 +83,14 @@ var CIRCLE_VARIANT_TO_CSS_MAP = {
 	["WARNING"]: "gx-Circle-WARNING-w1wd9i5w",
 	["ERROR"]: "gx-Circle-ERROR-e4bqin2"
 };
-/** Categorical `color`: `mark.<family>`, the way a status variant renders. */
-var CIRCLE_COLOR_TO_CSS_MAP = {
-	success: "gx-Circle-success-sisghat",
-	warning: "gx-Circle-warning-wrnyxi5",
-	error: "gx-Circle-error-emlehi9",
-	red: "gx-Circle-red-rx4zu59",
-	orange: "gx-Circle-orange-omm7dfa",
-	amber: "gx-Circle-amber-a15qmdzt",
-	yellow: "gx-Circle-yellow-y1p4fg4l",
-	lime: "gx-Circle-lime-l6eszpj",
-	green: "gx-Circle-green-g1kmyxwu",
-	emerald: "gx-Circle-emerald-er4sdq5",
-	teal: "gx-Circle-teal-tw9vccf",
-	cyan: "gx-Circle-cyan-c1rmact7",
-	sky: "gx-Circle-sky-syv0gwd",
-	blue: "gx-Circle-blue-bdx6kbq",
-	indigo: "gx-Circle-indigo-i1j11685",
-	violet: "gx-Circle-violet-vgz62lk",
-	purple: "gx-Circle-purple-pe429ux",
-	fuchsia: "gx-Circle-fuchsia-f1h7hg24",
-	pink: "gx-Circle-pink-po1cc6l",
-	rose: "gx-Circle-rose-r1ljyczc"
-};
+/**
+* Categorical `color`: `mark.<family>`, the way a status variant renders. Reads the shared
+* `--gx-role-*` variables `ROLE_COLOR_TO_CSS_MAP` sets per family, so the twenty families are
+* written once (`styles/internal/roleColor`).
+*/
+var CIRCLE_COLOR_CSS = "gx-Circle-CIRCLE_COLOR_CSS-cisghat";
 /** Declared after the variant and color maps so `hex` wins over them. */
-var HEX_CSS = "gx-Circle-HEX_CSS-h18iedp";
+var HEX_CSS = "gx-Circle-HEX_CSS-hrnyxi5";
 /** A filled dot beside a label; its color is a role (`variant`), a category (`color`) or data (`hex`). */
 var Circle = forwardRef(function Circle({ size = "MEDIUM", variant = "TERTIARY", color, hex, ariaLabel, id, className, style, ...rest }, ref) {
 	const variables = {};
@@ -119,7 +103,7 @@ var Circle = forwardRef(function Circle({ size = "MEDIUM", variant = "TERTIARY",
 		...rest,
 		ref,
 		id,
-		className: cx(CIRCLE_SIZE_TO_CSS_MAP[size], color !== void 0 ? CIRCLE_COLOR_TO_CSS_MAP[color] : CIRCLE_VARIANT_TO_CSS_MAP[variant], hex !== void 0 && HEX_CSS, className),
+		className: cx(CIRCLE_SIZE_TO_CSS_MAP[size], color !== void 0 ? cx(ROLE_COLOR_TO_CSS_MAP[color], CIRCLE_COLOR_CSS) : CIRCLE_VARIANT_TO_CSS_MAP[variant], hex !== void 0 && HEX_CSS, className),
 		style: {
 			...variables,
 			...style

package/dist/shapes/Square.d.ts

@@ -13,7 +13,7 @@ export declare enum SquareSize {
     /** 12px, beside `body_lg` (20px line). */
     X_LARGE = "X_LARGE"
 }
-/** Fill color role (Constitution V-A color set). Neutral steps resolve to `color.text.*`, statuses to `color.mark.*`. */
+/** Fill color role (AGENTS.md "Variant": color set). Neutral steps resolve to `color.text.*`, statuses to `color.mark.*`. */
 export declare enum SquareVariant {
     /** `text.primary`. */
     PRIMARY = "PRIMARY",

package/dist/shapes/Square.js

@@ -1,3 +1,4 @@
+import { ROLE_COLOR_TO_CSS_MAP } from "../styles/internal/roleColor.js";
 /* empty css                 */
 import { styled } from "@linaria/react";
 import { forwardRef } from "react";
@@ -34,7 +35,7 @@ var SquareSize = /* @__PURE__ */ function(SquareSize) {
 	SquareSize["X_LARGE"] = "X_LARGE";
 	return SquareSize;
 }({});
-/** Fill color role (Constitution V-A color set). Neutral steps resolve to `color.text.*`, statuses to `color.mark.*`. */
+/** Fill color role (AGENTS.md "Variant": color set). Neutral steps resolve to `color.text.*`, statuses to `color.mark.*`. */
 var SquareVariant = /* @__PURE__ */ function(SquareVariant) {
 	/** `text.primary`. */
 	SquareVariant["PRIMARY"] = "PRIMARY";
@@ -83,31 +84,14 @@ var SQUARE_VARIANT_TO_CSS_MAP = {
 	["WARNING"]: "gx-Square-WARNING-w1jcu9g9",
 	["ERROR"]: "gx-Square-ERROR-e1a9qgv5"
 };
-/** Categorical `color`: `mark.<family>`, the way a status variant renders. */
-var SQUARE_COLOR_TO_CSS_MAP = {
-	success: "gx-Square-success-s44keg",
-	warning: "gx-Square-warning-w1czb11g",
-	error: "gx-Square-error-e11m2avz",
-	red: "gx-Square-red-r1dycb8",
-	orange: "gx-Square-orange-o13w32o7",
-	amber: "gx-Square-amber-aflvbdc",
-	yellow: "gx-Square-yellow-y1wrg0mj",
-	lime: "gx-Square-lime-lbmrs5y",
-	green: "gx-Square-green-g1229390",
-	emerald: "gx-Square-emerald-eylmgp4",
-	teal: "gx-Square-teal-tgnvnom",
-	cyan: "gx-Square-cyan-cqzrj1i",
-	sky: "gx-Square-sky-sx1evfg",
-	blue: "gx-Square-blue-b1bh3ofr",
-	indigo: "gx-Square-indigo-i15n3xo4",
-	violet: "gx-Square-violet-v1qvour9",
-	purple: "gx-Square-purple-p1g6v6vx",
-	fuchsia: "gx-Square-fuchsia-f1u3b7de",
-	pink: "gx-Square-pink-pdedn2c",
-	rose: "gx-Square-rose-rod6x1x"
-};
+/**
+* Categorical `color`: `mark.<family>`, the way a status variant renders. Reads the shared
+* `--gx-role-*` variables `ROLE_COLOR_TO_CSS_MAP` sets per family, so the twenty families are
+* written once (`styles/internal/roleColor`).
+*/
+var SQUARE_COLOR_CSS = "gx-Square-SQUARE_COLOR_CSS-s44keg";
 /** Declared after the variant and color maps so `hex` wins over them. */
-var HEX_CSS = "gx-Square-HEX_CSS-h1ah0bbe";
+var HEX_CSS = "gx-Square-HEX_CSS-h1czb11g";
 /** A filled square mark beside a label; its color is a role (`variant`), a category (`color`) or data (`hex`). */
 var Square = forwardRef(function Square({ size = "MEDIUM", variant = "TERTIARY", color, hex, ariaLabel, id, className, style, ...rest }, ref) {
 	const variables = {};
@@ -120,7 +104,7 @@ var Square = forwardRef(function Square({ size = "MEDIUM", variant = "TERTIARY",
 		...rest,
 		ref,
 		id,
-		className: cx(SQUARE_SIZE_TO_CSS_MAP[size], color !== void 0 ? SQUARE_COLOR_TO_CSS_MAP[color] : SQUARE_VARIANT_TO_CSS_MAP[variant], hex !== void 0 && HEX_CSS, className),
+		className: cx(SQUARE_SIZE_TO_CSS_MAP[size], color !== void 0 ? cx(ROLE_COLOR_TO_CSS_MAP[color], SQUARE_COLOR_CSS) : SQUARE_VARIANT_TO_CSS_MAP[variant], hex !== void 0 && HEX_CSS, className),
 		style: {
 			...variables,
 			...style

package/dist/styles/internal/roleColor.d.ts

@@ -0,0 +1,3 @@
+import type { RoleColor } from "../../theme/tokens/types.js";
+/** Sets the four `--gx-role-*` variables per status and palette family. */
+export declare const ROLE_COLOR_TO_CSS_MAP: Record<RoleColor, string>;

package/dist/styles/internal/roleColor.js

@@ -0,0 +1,42 @@
+/* empty css                    */
+//#region src/styles/internal/roleColor.ts
+/**
+* @internal One role-color source for every `color?: RoleColor` prop. Each block sets four custom
+* properties for one status or palette family, and a component reads the ones it needs:
+*
+* - `--gx-role-text`: `text.<c>` (labels and icons; icons keep `text`, never `mark`);
+* - `--gx-role-fill`: `background.<c>` (a quiet tinted surface);
+* - `--gx-role-border`: `border.<c>` (its hairline);
+* - `--gx-role-mark`: `mark.<c>` (a filled shape with no text on it).
+*
+* Why variables rather than one `Record<RoleColor>` of declarations per component: the twenty
+* families are written once, a component keys `ROLE_COLOR_TO_CSS_MAP[color]` and adds one block
+* that maps the variables onto its own properties, and `hex` and disabled states keep overriding
+* by declaration order exactly as before. Private on purpose (an `internal/` module: built, never a
+* package export).
+*/
+/** Sets the four `--gx-role-*` variables per status and palette family. */
+var ROLE_COLOR_TO_CSS_MAP = {
+	success: "gx-roleColor-success-s1c8ieft",
+	warning: "gx-roleColor-warning-w100nkh0",
+	error: "gx-roleColor-error-e1nhco0",
+	red: "gx-roleColor-red-r16os4ey",
+	orange: "gx-roleColor-orange-oyt3k76",
+	amber: "gx-roleColor-amber-ail1y4f",
+	yellow: "gx-roleColor-yellow-y1bp9ddu",
+	lime: "gx-roleColor-lime-lb02nu3",
+	green: "gx-roleColor-green-gyvr8v1",
+	emerald: "gx-roleColor-emerald-e16fojs1",
+	teal: "gx-roleColor-teal-t1ik3gps",
+	cyan: "gx-roleColor-cyan-c1tqfkft",
+	sky: "gx-roleColor-sky-s1q7825m",
+	blue: "gx-roleColor-blue-bxyqpwq",
+	indigo: "gx-roleColor-indigo-i1rsw8me",
+	violet: "gx-roleColor-violet-v1l5oydn",
+	purple: "gx-roleColor-purple-p1k8sszd",
+	fuchsia: "gx-roleColor-fuchsia-f149phwe",
+	pink: "gx-roleColor-pink-p1fg2myf",
+	rose: "gx-roleColor-rose-r1ur3f9e"
+};
+//#endregion
+export { ROLE_COLOR_TO_CSS_MAP };

package/dist/styles/mixins.js

@@ -2,7 +2,7 @@ import { t } from "../theme/tokens/t.js";
 /* empty css                 */
 //#region src/styles/mixins.ts
 /**
-* Shared style mixins (Constitution IV.6). Each export is a CSS-text fragment (a plain string,
+* Shared style mixins (AGENTS.md "Mixins"). Each export is a CSS-text fragment (a plain string,
 * evaluated at build time by wyw): interpolate it inside a `styled` or `css` template instead of
 * re-declaring the rules. Never compose a mixin with `cx(...)`; it is not a class name.
 *