Bug fix to timescale component

Author: davenquinn

packages/timescale/CHANGELOG.md

@@ -6,6 +6,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.3.1] - 2025-12-11
+
+Fix coloring using `intervalStyle` prop, which was mistakenly overridden in the
+last update.
+
 ## [2.3.0] - 2025-11-28
 
 - Allow label positioning to be more discretely controlled (e.g., turn off label

packages/timescale/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/timescale",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "description": "A configurable geologic timescale written with React and Typescript",
   "type": "module",
   "source": "src/index.ts",

packages/timescale/src/components/index.ts

@@ -40,7 +40,8 @@ function IntervalBox(props: {
   } else if (intervalStyle != null) {
     style = intervalStyle;
   }
-  style.backgroundColor = interval.col;
+  // Set interval color if not already set by the logic above
+  style.backgroundColor ??= interval.col;
 
   const className = classNames("interval-box", {
     clickable: onClick != null,

packages/timescale/stories/main.stories.ts

@@ -1,4 +1,5 @@
 import { Timescale, TimescaleProps, TimescaleOrientation } from "../src";
+import chroma from "chroma-js";
 
 export default {
   title: "Timescale/Timescale",
@@ -41,3 +42,19 @@ export const Condensed = {
     ageRange: [1000, 0],
   },
 };
+
+export const WithRecoloredIntervals = {
+  args: {
+    orientation: TimescaleOrientation.VERTICAL,
+    levels: [1, 3],
+    intervalStyle(interval) {
+      return {
+        backgroundColor: chroma(interval.col)
+          .set("hsl.l", 0.9)
+          .set("hsl.s", 0.3)
+          .hex(),
+        color: chroma(interval.col).set("hsl.l", 0.1).css(),
+      };
+    },
+  },
+};