@galaxy-io/dls 2.5.0 → 2.6.0

package/dist/text/MarkdownText.js

@@ -5,8 +5,8 @@ import Divider from "../layout/Divider.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
 import Span from "./Span.js";
 import Link, { LinkVariant } from "../links/Link.js";
-import Bold from "./Bold.js";
 import Code from "./Code.js";
+import Bold from "./Bold.js";
 import CodeBlock, { CodeBlockLanguage } from "./CodeBlock.js";
 /* empty css                       */
 import { styled } from "@linaria/react";

package/dist/theme/tokens/dark.js

@@ -11,6 +11,7 @@ import { TYPE_SCALE } from "./scales.js";
 *   yellow are pulled apart in hue (80° / 98°) so they never read alike.
 * - `background`: palette 500 at 16% over `background.base`, a subtle tint.
 * - `border`: palette 500 at 55% over `background.base`.
+* - `mark`: the `text` value. Text this vivid already reads as a filled mark.
 * - `solid`: shared with Light (see `solid` below).
 *
 * Statuses have their own hues, not a family's: success OKLCH 155° (between green and emerald),
@@ -112,6 +113,28 @@ var DARK_THEME = {
 			pink: "#8b315e",
 			rose: "#8f2c3d"
 		},
+		mark: {
+			success: "#19e184",
+			warning: "#febc6c",
+			error: "#fd6b6d",
+			red: "#fe7f7e",
+			orange: "#fe9b4e",
+			amber: "#fec14f",
+			yellow: "#fadb31",
+			lime: "#acf043",
+			green: "#56e889",
+			emerald: "#43dda2",
+			teal: "#3ddec9",
+			cyan: "#36ddf8",
+			sky: "#52c6fe",
+			blue: "#6dadfd",
+			indigo: "#8b97fd",
+			violet: "#ae95fd",
+			purple: "#c58dfd",
+			fuchsia: "#ee88fe",
+			pink: "#fe7dbf",
+			rose: "#fe7c8d"
+		},
 		solid: {
 			primary: {
 				background: "#ffffff",

package/dist/theme/tokens/light.js

@@ -11,6 +11,9 @@ import { TYPE_SCALE } from "./scales.js";
 *   and yellow are pulled apart in hue (42° / 62° / 95°) so they never read alike.
 * - `background`: palette 100.
 * - `border`: OKLCH mix of palette 300 → 500 at 65%.
+* - `mark`: the `solid` fill, deepened at its OKLCH hue (largest in-gamut chroma) only as far as
+*   2.2:1 on every surface, so a 1.5px chart line still reads; amber sits at 62° like its text.
+*   Vivid where `text` is deepened for copy.
 * - `solid`: shared with Dark (see `solid` below).
 *
 * Statuses have their own hues, not a family's: success OKLCH 155° (between green and emerald),
@@ -111,6 +114,28 @@ var LIGHT_THEME = {
 			pink: "#f47db8",
 			rose: "#fb7989"
 		},
+		mark: {
+			success: "#0cba6c",
+			warning: "#e29100",
+			error: "#e50f36",
+			red: "#d83939",
+			orange: "#f97316",
+			amber: "#ef8a00",
+			yellow: "#cb9b00",
+			lime: "#72b400",
+			green: "#04bb55",
+			emerald: "#10b981",
+			teal: "#0db6a4",
+			cyan: "#00b2d0",
+			sky: "#0ea5e9",
+			blue: "#3270e3",
+			indigo: "#6163ed",
+			violet: "#8555ee",
+			purple: "#9b4be7",
+			fuchsia: "#bb36cc",
+			pink: "#d0377d",
+			rose: "#da3253"
+		},
 		solid: {
 			primary: {
 				background: "#101010",

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

@@ -113,6 +113,12 @@ export type Theme = {
             /** Disabled controls. */
             disabled: string;
         };
+        /**
+         * Small filled marks that carry a color, not words: chart series and legend swatches, `Square`
+         * and `Circle` keys, the `Beacon` dot, `Sparkline`, `ProgressBar` and `ProgressCircle` fills. The
+         * same value as `text` in Dark; vivid in Light, where `text` is deepened for copy.
+         */
+        mark: RoleColors;
         /**
          * Fills with the text drawn on them. `primary` is the monochrome fill (`text.primary` with
          * `background.base` on it): the primary button, checked controls, the brand mark. `neutral` is
@@ -187,7 +193,7 @@ export type Scales = {
             xLarge: string;
         };
     };
-    /** The mode-stable primitive palette: the same hex in every theme. For app-side chart and canvas code that needs a fixed hex; DLS charts draw series with `t.color.text.<family>`. */
+    /** The mode-stable primitive palette: the same hex in every theme. For app-side chart and canvas code that needs a fixed hex; DLS charts draw series with `t.color.mark.<family>`. */
     palette: Record<PaletteColor, Record<PaletteStep, string>>;
 };
 /** Mirrors a token tree with every leaf replaced by its `var(--gx-…)` string. */

package/dist/timeline/Timeline.d.ts

@@ -67,7 +67,12 @@ interface TimelineItemVariantProps {
      * @default TimelineVariant.SECONDARY
      */
     variant?: TimelineVariant;
-    /** Categorical palette family. 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?: undefined;
 }
 /** An event whose marker is colored by category (`color`). */

package/dist/toast/ToastProvider.js

@@ -37,7 +37,7 @@ var TOAST_VARIANT_TO_POLITENESS_MAP = {
 	ERROR: "assertive"
 };
 /** How long a toast stays, by default. */
-var TOAST_DEFAULT_DURATION_MS = 5e3;
+var TOAST_DEFAULT_DURATION_MS = 3e3;
 /** Open toasts per region; a sixth dismisses the oldest. */
 var TOAST_MAX_PER_PLACEMENT = 5;
 /** How long a dismissed toast stays in the queue so its ScaleFade exit can run: `duration.base`. */

package/dist/toast/useToast.d.ts

@@ -27,7 +27,7 @@ export interface ToastOptions {
     action?: ToastAction;
     /** Spinner in place of the icon; the toast does not time out while loading. @default false */
     isLoading?: boolean;
-    /** Milliseconds the toast stays, counted while it is not paused. @default 5000 */
+    /** Milliseconds the toast stays, counted while it is not paused. @default 3000 */
     duration?: number;
     /** Stay until dismissed; `duration` is ignored. @default false */
     isPersistent?: boolean;

package/dist/tokens.css

@@ -192,6 +192,26 @@
   --gx-color-border-fuchsia: #80308d;
   --gx-color-border-pink: #8b315e;
   --gx-color-border-rose: #8f2c3d;
+  --gx-color-mark-success: #19e184;
+  --gx-color-mark-warning: #febc6c;
+  --gx-color-mark-error: #fd6b6d;
+  --gx-color-mark-red: #fe7f7e;
+  --gx-color-mark-orange: #fe9b4e;
+  --gx-color-mark-amber: #fec14f;
+  --gx-color-mark-yellow: #fadb31;
+  --gx-color-mark-lime: #acf043;
+  --gx-color-mark-green: #56e889;
+  --gx-color-mark-emerald: #43dda2;
+  --gx-color-mark-teal: #3ddec9;
+  --gx-color-mark-cyan: #36ddf8;
+  --gx-color-mark-sky: #52c6fe;
+  --gx-color-mark-blue: #6dadfd;
+  --gx-color-mark-indigo: #8b97fd;
+  --gx-color-mark-violet: #ae95fd;
+  --gx-color-mark-purple: #c58dfd;
+  --gx-color-mark-fuchsia: #ee88fe;
+  --gx-color-mark-pink: #fe7dbf;
+  --gx-color-mark-rose: #fe7c8d;
   --gx-color-solid-primary-background: #ffffff;
   --gx-color-solid-primary-text: #141415;
   --gx-color-solid-primary-hovered: #e3e3e3;
@@ -462,6 +482,26 @@
   --gx-color-border-fuchsia: #e47ff7;
   --gx-color-border-pink: #f47db8;
   --gx-color-border-rose: #fb7989;
+  --gx-color-mark-success: #0cba6c;
+  --gx-color-mark-warning: #e29100;
+  --gx-color-mark-error: #e50f36;
+  --gx-color-mark-red: #d83939;
+  --gx-color-mark-orange: #f97316;
+  --gx-color-mark-amber: #ef8a00;
+  --gx-color-mark-yellow: #cb9b00;
+  --gx-color-mark-lime: #72b400;
+  --gx-color-mark-green: #04bb55;
+  --gx-color-mark-emerald: #10b981;
+  --gx-color-mark-teal: #0db6a4;
+  --gx-color-mark-cyan: #00b2d0;
+  --gx-color-mark-sky: #0ea5e9;
+  --gx-color-mark-blue: #3270e3;
+  --gx-color-mark-indigo: #6163ed;
+  --gx-color-mark-violet: #8555ee;
+  --gx-color-mark-purple: #9b4be7;
+  --gx-color-mark-fuchsia: #bb36cc;
+  --gx-color-mark-pink: #d0377d;
+  --gx-color-mark-rose: #da3253;
   --gx-color-solid-primary-background: #101010;
   --gx-color-solid-primary-text: #ffffff;
   --gx-color-solid-primary-hovered: #2d2d2d;

package/package.json

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