@galaxy-io/dls 2.4.1 → 2.5.0

package/dist/table/TableCore.js

@@ -8,7 +8,7 @@ import { t } from "../theme/tokens/t.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
 import Rotate from "../transform/Rotate.js";
 import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
-import EmptyState, { EmptyStateSize } from "../feedback/EmptyState.js";
+import EmptyState, { EmptyStateSize, EmptyStateVariant } from "../feedback/EmptyState.js";
 import { useElementClientSize } from "../hooks/useElementClientSize.js";
 import { formatNumber } from "../utils/format.js";
 import ResizeHandle from "../layout/ResizeHandle.js";
@@ -945,7 +945,8 @@ function TableFrame({ metrics, columnLayout, leadingHeaders, trailingHeader, has
 					icon: WarningCircleIcon,
 					header: "Couldn't load data",
 					description: error,
-					size: metrics.emptyStateSize
+					size: metrics.emptyStateSize,
+					variant: EmptyStateVariant.ERROR
 				})
 			}) : emptyState ?? /* @__PURE__ */ jsx(EmptyState, {
 				header: "No results",

package/dist/theme/enums.d.ts

@@ -106,7 +106,7 @@ export type SpaceShorthand = Space | [Space, Space] | [Space, Space, Space] | [S
 export declare const CANONICAL_SIZE_MEMBERS: readonly ["X_SMALL", "SMALL", "MEDIUM", "LARGE", "X_LARGE"];
 /**
  * Color set: members a color-role `<Component>Variant` may use (Constitution V, V-A). Meaning
- * only: categorical hues are the `color?: PaletteColor` prop. There is no accent: Galaxy is
+ * only: categorical hues are the `color?: RoleColor` prop. There is no accent: Galaxy is
  * monochrome.
  */
 export declare const CANONICAL_COLOR_MEMBERS: readonly ["PRIMARY", "SECONDARY", "TERTIARY", "SUCCESS", "WARNING", "ERROR", "DISABLED", "INHERIT"];

package/dist/theme/enums.js

@@ -116,7 +116,7 @@ var CANONICAL_SIZE_MEMBERS = [
 ];
 /**
 * Color set: members a color-role `<Component>Variant` may use (Constitution V, V-A). Meaning
-* only: categorical hues are the `color?: PaletteColor` prop. There is no accent: Galaxy is
+* only: categorical hues are the `color?: RoleColor` prop. There is no accent: Galaxy is
 * monochrome.
 */
 var CANONICAL_COLOR_MEMBERS = [

package/dist/theme/tokens/palette.d.ts

@@ -5,9 +5,13 @@
  * style with `t.palette.<family>[<step>]`, and import `PALETTE` only for JS logic (canvas, WebGL).
  * The theme roles (`t.color.<property>.<family>`) are derived from these steps (dark.ts, light.ts).
  */
-import type { PaletteColor, PaletteStep } from "./types.js";
+import type { PaletteColor, PaletteStep, RoleColor, StatusColor } from "./types.js";
+/** The three status roles, in severity order. */
+export declare const STATUS_COLORS: readonly StatusColor[];
 /** Every palette family in hue order, red → rose. */
 export declare const PALETTE_COLORS: readonly PaletteColor[];
+/** Every name a mark's `color` takes: the status roles first, then the palette families. */
+export declare const ROLE_COLORS: readonly RoleColor[];
 /** Every step of a family, lightest first. */
 export declare const PALETTE_STEPS: readonly PaletteStep[];
 /** Family → step → hex. */

package/dist/theme/tokens/palette.js

@@ -1,4 +1,10 @@
 //#region src/theme/tokens/palette.ts
+/** The three status roles, in severity order. */
+var STATUS_COLORS = [
+	"success",
+	"warning",
+	"error"
+];
 /** Every palette family in hue order, red → rose. */
 var PALETTE_COLORS = [
 	"red",
@@ -19,6 +25,8 @@ var PALETTE_COLORS = [
 	"pink",
 	"rose"
 ];
+/** Every name a mark's `color` takes: the status roles first, then the palette families. */
+var ROLE_COLORS = [...STATUS_COLORS, ...PALETTE_COLORS];
 /** Every step of a family, lightest first. */
 var PALETTE_STEPS = [
 	100,
@@ -150,4 +158,4 @@ var PALETTE = {
 	}
 };
 //#endregion
-export { PALETTE, PALETTE_COLORS, PALETTE_STEPS };
+export { PALETTE, PALETTE_COLORS, PALETTE_STEPS, ROLE_COLORS, STATUS_COLORS };

package/dist/theme/tokens/types.d.ts

@@ -21,8 +21,16 @@ export type PaletteStep = 100 | 300 | 500 | 700 | 900;
  * palette family): a green, a warm amber and a red that never read alike.
  */
 export type StatusColor = "success" | "warning" | "error";
+/**
+ * A color name a mark can be keyed by: a palette family (a category) or a status role used as a
+ * category (a run status map where "completed" is `success` and "running" is `blue`). What the
+ * `color` prop of `Square`, `Circle`, `Chip`, `Beacon`, `Sparkline`, `Timeline`, `ProgressBar`,
+ * `ProgressCircle` and a chart series takes. Every color property (`text`, `background`,
+ * `border`, `solid`) has one value per name.
+ */
+export type RoleColor = StatusColor | PaletteColor;
 /** One value per meaning role and per palette family. */
-type RoleColors = Record<StatusColor | PaletteColor, string>;
+type RoleColors = Record<RoleColor, string>;
 /** A strong fill: its background, the text and icons drawn on it, and its two states. */
 export type SolidColor = {
     /** The fill. */

package/dist/timeline/Timeline.d.ts

@@ -1,6 +1,6 @@
 import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
 import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
-import type { PaletteColor } from "../theme/tokens/types.js";
+import type { RoleColor } from "../theme/tokens/types.js";
 /** Canonical rungs (subset); the member names the type step of the event text. */
 export declare enum TimelineSize {
     /** body_sm text, 16px box, 4px dot, 10px icon, 12px between events. */
@@ -78,11 +78,12 @@ interface TimelineItemColorProps {
      */
     variant?: undefined;
     /**
-     * Categorical palette family (`"blue"`, `"violet"`, …): the dot or icon takes `text.<family>`
-     * and the box `border.<family>`, the way a status variant renders. For an event's category (a source, a team); meanings take
-     * `variant`. Not with `variant`.
+     * Categorical palette family (`"blue"`, `"violet"`, …) or a status role as a string
+     * (`"success"`, `"error"`): the dot or icon takes `text.<name>` and the box `border.<name>`, the
+     * way a status variant renders. For an event's category or data-driven color (a source, a team,
+     * a run status map); a status that is meaning takes `variant`. Not with `variant`.
      */
-    color: PaletteColor;
+    color: RoleColor;
 }
 /** One event on the timeline. Passing both `variant` and `color` is a type error. */
 export type TimelineItem = TimelineItemBase & (TimelineItemVariantProps | TimelineItemColorProps);

package/dist/timeline/Timeline.js

@@ -213,23 +213,26 @@ var TIMELINE_VARIANT_TO_CSS_MAP = {
 * takes, and `border.<family>` and the `background.<family>` fill on the box.
 */
 var TIMELINE_COLOR_TO_CSS_MAP = {
-	red: "gx-Timeline-red-r1khc5e9",
-	orange: "gx-Timeline-orange-oob0jun",
-	amber: "gx-Timeline-amber-acpz10x",
-	yellow: "gx-Timeline-yellow-y1arc1uv",
-	lime: "gx-Timeline-lime-l1x7dvj6",
-	green: "gx-Timeline-green-g1fx1m3c",
-	emerald: "gx-Timeline-emerald-e1gy5gqm",
-	teal: "gx-Timeline-teal-ttyv4re",
-	cyan: "gx-Timeline-cyan-c1506u15",
-	sky: "gx-Timeline-sky-s2f8n55",
-	blue: "gx-Timeline-blue-b1bza0tc",
-	indigo: "gx-Timeline-indigo-i1vbt6lr",
-	violet: "gx-Timeline-violet-vjtm0e",
-	purple: "gx-Timeline-purple-pek3kdh",
-	fuchsia: "gx-Timeline-fuchsia-f13hn3pe",
-	pink: "gx-Timeline-pink-pdf3rdi",
-	rose: "gx-Timeline-rose-rjv99mk"
+	success: "gx-Timeline-success-s1khc5e9",
+	warning: "gx-Timeline-warning-wob0jun",
+	error: "gx-Timeline-error-ecpz10x",
+	red: "gx-Timeline-red-r1arc1uv",
+	orange: "gx-Timeline-orange-o1x7dvj6",
+	amber: "gx-Timeline-amber-a1fx1m3c",
+	yellow: "gx-Timeline-yellow-y1gy5gqm",
+	lime: "gx-Timeline-lime-ltyv4re",
+	green: "gx-Timeline-green-g1506u15",
+	emerald: "gx-Timeline-emerald-e2f8n55",
+	teal: "gx-Timeline-teal-t1bza0tc",
+	cyan: "gx-Timeline-cyan-c1vbt6lr",
+	sky: "gx-Timeline-sky-sjtm0e",
+	blue: "gx-Timeline-blue-bek3kdh",
+	indigo: "gx-Timeline-indigo-i13hn3pe",
+	violet: "gx-Timeline-violet-vdf3rdi",
+	purple: "gx-Timeline-purple-pjv99mk",
+	fuchsia: "gx-Timeline-fuchsia-f4wvpbo",
+	pink: "gx-Timeline-pink-p1qqjpue",
+	rose: "gx-Timeline-rose-r183jhdd"
 };
 /** A vertical list of events with dot or icon markers (boxed or bare) on a hairline rail. */
 var Timeline = forwardRef(function Timeline({ items, size = "MEDIUM", markerShape = "SQUARE", isFilled = false, className, style, ...rest }, ref) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galaxy-io/dls",
-  "version": "2.4.1",
+  "version": "2.5.0",
   "description": "Galaxy Design Language System",
   "license": "UNLICENSED",
   "type": "module",