@ricsam/react-spreadsheets 0.0.1 → 0.0.3

package/README.md

@@ -88,11 +88,11 @@ top of `FormulaSheet`.
 
 ## Theming
 
-All colors, fonts and sizes are CSS custom properties declared on `.rsp-root`.
-Override them anywhere in your cascade:
+All colors, fonts and sizes are CSS custom properties declared on `:root`, so
+you can override them from **any** ancestor of the grid:
 
 ```css
-.rsp-root {
+.my-panel {
   --rsp-accent: #7c3aed;
   --rsp-bg: #ffffff;
   --rsp-header-bg: #f4f4f5;
@@ -100,9 +100,34 @@ Override them anywhere in your cascade:
 }
 ```
 
-Light and dark are resolved automatically with `light-dark()`. To pin a subtree
-to one mode, set `color-scheme: light` (or `dark`) on `.rsp-root`; canvas
-gridlines follow the same setting.
+### Light and dark
+
+Colors resolve through `light-dark()`, which follows the inherited
+`color-scheme`. By default the grid follows the user's OS preference.
+
+The grid deliberately does **not** declare `color-scheme` on `.rsp-root`, so a
+pin you set on an ancestor is respected. Pin a subtree with plain CSS:
+
+```css
+.workbook-stage { color-scheme: light; } /* always light */
+.workbook-stage { color-scheme: dark; }  /* always dark  */
+```
+
+or with the bundled helper classes:
+
+```tsx
+<FormulaWorkbook className="rsp-theme-dark" ... />
+```
+
+Canvas gridlines and every DOM surface follow the same resolved scheme.
+
+### Cell fills stay readable
+
+A `backgroundColor` coming from your document model is usually a single literal
+color with no dark-mode variant. To stop light fills from pairing with the dark
+theme's near-white text, the grid derives a readable ink for any cell that sets
+a background but no explicit `color`. Set `color` yourself to opt out, and use
+`getContrastingTextColor` if you want the same behaviour elsewhere.
 
 Per-cell styling is done in JS:
 

package/dist/cjs/lib.cjs

@@ -92,6 +92,7 @@ __export(exports_lib, {
   getCellReference: () => getCellReference,
   getCellSnapAnchorFromRect: () => getCellSnapAnchorFromRect,
   getColumnEdgePosition: () => getColumnEdgePosition,
+  getContrastingTextColor: () => getContrastingTextColor,
   getNearestColumnEdgeIndex: () => getNearestColumnEdgeIndex,
   getNearestRowEdgeIndex: () => getNearestRowEdgeIndex,
   getRectFromCellSnapAnchor: () => getRectFromCellSnapAnchor,
@@ -105,7 +106,9 @@ __export(exports_lib, {
   normalizeCellSnapAnchor: () => normalizeCellSnapAnchor,
   onCellEditError: () => onCellEditError,
   parseCellReference: () => parseCellReference,
+  parseCssColor: () => parseCssColor,
   queueCellEditError: () => queueCellEditError,
+  relativeLuminance: () => relativeLuminance,
   resizeCellSnapAnchorToNearestEdges: () => resizeCellSnapAnchorToNearestEdges,
   rowToLetter: () => rowToLetter,
   useClickAway: () => useClickAway,
@@ -174,6 +177,85 @@ function useColorScheme(element) {
   return scheme;
 }
 
+// src/utils/contrast-text.ts
+var DARK_INK = "#101828";
+var LIGHT_INK = "#ffffff";
+var NAMED_COLORS = {
+  white: [255, 255, 255],
+  black: [0, 0, 0],
+  red: [255, 0, 0],
+  green: [0, 128, 0],
+  blue: [0, 0, 255],
+  yellow: [255, 255, 0],
+  orange: [255, 165, 0],
+  purple: [128, 0, 128],
+  gray: [128, 128, 128],
+  grey: [128, 128, 128],
+  silver: [192, 192, 192]
+};
+var clamp255 = (value) => Math.min(255, Math.max(0, value));
+function parseCssColor(input) {
+  const value = input.trim().toLowerCase();
+  if (!value || value === "transparent" || value === "currentcolor" || value === "inherit") {
+    return;
+  }
+  if (value.includes("var(") || value.includes("color-mix(") || value.includes("gradient")) {
+    return;
+  }
+  const named = NAMED_COLORS[value];
+  if (named) {
+    return { r: named[0], g: named[1], b: named[2], a: 1 };
+  }
+  if (value.startsWith("#")) {
+    const hex = value.slice(1);
+    const expand = (part) => parseInt(part + part, 16);
+    if (hex.length === 3 || hex.length === 4) {
+      const r = expand(hex[0]);
+      const g = expand(hex[1]);
+      const b = expand(hex[2]);
+      const a = hex.length === 4 ? expand(hex[3]) / 255 : 1;
+      return Number.isNaN(r + g + b) ? undefined : { r, g, b, a };
+    }
+    if (hex.length === 6 || hex.length === 8) {
+      const r = parseInt(hex.slice(0, 2), 16);
+      const g = parseInt(hex.slice(2, 4), 16);
+      const b = parseInt(hex.slice(4, 6), 16);
+      const a = hex.length === 8 ? parseInt(hex.slice(6, 8), 16) / 255 : 1;
+      return Number.isNaN(r + g + b) ? undefined : { r, g, b, a };
+    }
+    return;
+  }
+  const rgbMatch = value.match(/^rgba?\(([^)]+)\)$/);
+  if (rgbMatch) {
+    const parts = rgbMatch[1].split(/[\s,/]+/).filter(Boolean);
+    if (parts.length < 3)
+      return;
+    const toChannel = (part) => part.endsWith("%") ? parseFloat(part) / 100 * 255 : parseFloat(part);
+    const r = toChannel(parts[0]);
+    const g = toChannel(parts[1]);
+    const b = toChannel(parts[2]);
+    const alphaPart = parts[3];
+    const a = alphaPart === undefined ? 1 : alphaPart.endsWith("%") ? parseFloat(alphaPart) / 100 : parseFloat(alphaPart);
+    if ([r, g, b, a].some((channel) => Number.isNaN(channel)))
+      return;
+    return { r: clamp255(r), g: clamp255(g), b: clamp255(b), a };
+  }
+  return;
+}
+function relativeLuminance({ r, g, b }) {
+  const channel = (value) => {
+    const srgb = value / 255;
+    return srgb <= 0.03928 ? srgb / 12.92 : Math.pow((srgb + 0.055) / 1.055, 2.4);
+  };
+  return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
+}
+function getContrastingTextColor(background) {
+  const color = parseCssColor(background);
+  if (!color || color.a < 0.5)
+    return;
+  return relativeLuminance(color) > 0.45 ? DARK_INK : LIGHT_INK;
+}
+
 // src/utils/cn.ts
 function cn(...values) {
   const out = [];
@@ -1352,16 +1434,27 @@ var resizeCellSnapAnchorToNearestEdges = (anchor, rect, handle, columnWidths, ro
 
 // src/spreadsheet/spreadsheet.tsx
 var jsx_runtime3 = require("react/jsx-runtime");
-var resolveGridLineColor = (element, colorScheme) => {
-  const fallback = colorScheme === "dark" ? "#4b5563" : "#e1e5e9";
-  if (!element || typeof getComputedStyle !== "function") {
+var resolveGridLineColor = (probe, colorScheme) => {
+  const fallback = colorScheme === "dark" ? "#232c3d" : "#e8ebf1";
+  if (!probe || typeof getComputedStyle !== "function") {
     return fallback;
   }
-  const declared = getComputedStyle(element).getPropertyValue("--rsp-gridline").trim();
-  if (!declared || declared.includes("light-dark(")) {
+  const resolved = getComputedStyle(probe).color?.trim();
+  if (!resolved || resolved.includes("light-dark(") || resolved === "rgba(0, 0, 0, 0)") {
     return fallback;
   }
-  return declared;
+  return resolved;
+};
+var withReadableTextColor = (style) => {
+  if (!style?.backgroundColor || style.color)
+    return style;
+  const background = style.backgroundColor;
+  if (typeof background !== "string")
+    return style;
+  const color = getContrastingTextColor(background);
+  if (!color)
+    return style;
+  return { ...style, color };
 };
 var hasBorderStyle = (style) => Boolean(style?.borderColor || style?.borderTopColor || style?.borderRightColor || style?.borderBottomColor || style?.borderLeftColor);
 var CellComponent = import_react4.default.memo(({
@@ -1404,7 +1497,7 @@ var CellComponent = import_react4.default.memo(({
     isSelected,
     isBeingEdited: isBeingEdited || false
   };
-  const customStyle = customCellStyle?.(cellStyleCallbackData);
+  const customStyle = withReadableTextColor(customCellStyle?.(cellStyleCallbackData));
   const canHaveFillHandle = import_selection_manager.useSelectionManager(selectionManager, () => {
     return selectionManager.canCellHaveFillHandle({
       row: rowIndex,
@@ -1436,7 +1529,8 @@ var CellComponent = import_react4.default.memo(({
       top: y,
       width: getColumnWidth(col) - 1,
       height: getRowHeight(row) - 1,
-      ...customStyle
+      ...customStyle,
+      ...isBeingEdited ? { backgroundColor: undefined, color: undefined } : null
     },
     children: [
       isBeingEdited ? /* @__PURE__ */ jsx_runtime3.jsx("textarea", {
@@ -1686,6 +1780,7 @@ var Spreadsheet = import_react4.forwardRef(({
   const [{ width, height }, containerRef] = useResizeObserver();
   const [containerDivRef, setContainerDivRef] = import_react4.useState(null);
   const colorScheme = useColorScheme(containerDivRef);
+  const gridLineProbeRef = import_react4.useRef(null);
   const selectionManager = import_selection_manager.useInitializeSelectionManager({
     getNumCols: () => ({ type: "infinity" }),
     getNumRows: () => ({ type: "infinity" }),
@@ -1879,7 +1974,7 @@ var Spreadsheet = import_react4.forwardRef(({
     if (!ctx)
       return;
     ctx.clearRect(0, 0, width, height);
-    ctx.strokeStyle = resolveGridLineColor(canvasRef.current, colorScheme);
+    ctx.strokeStyle = resolveGridLineColor(gridLineProbeRef.current, colorScheme);
     ctx.lineWidth = 1;
     let x = gridDims.headerWidth;
     let colIndex = 0;
@@ -2642,6 +2737,18 @@ var Spreadsheet = import_react4.forwardRef(({
         },
         tabIndex: 0,
         children: [
+          /* @__PURE__ */ jsx_runtime3.jsx("span", {
+            ref: gridLineProbeRef,
+            "aria-hidden": "true",
+            style: {
+              position: "absolute",
+              width: 0,
+              height: 0,
+              visibility: "hidden",
+              pointerEvents: "none",
+              color: "var(--rsp-gridline)"
+            }
+          }),
           /* @__PURE__ */ jsx_runtime3.jsx("canvas", {
             ref: canvasRef,
             className: "rsp-canvas",
@@ -3554,32 +3661,32 @@ function FormulaSheet({
             const isLastColumn = cell.colIndex === tableInfo.start.colIndex + tableInfo.headers.size - 1;
             const isLastRow = tableInfo.endRow.type === "number" ? cell.rowIndex === tableInfo.endRow.value : false;
             const style = {
-              border: "1px solid var(--table-border-light)"
+              border: "1px solid var(--rsp-table-border-light)"
             };
             if (isHeaderRow) {
-              style.backgroundColor = "var(--table-header-bg)";
-              style.color = "var(--table-header-color)";
+              style.backgroundColor = "var(--rsp-table-header-bg)";
+              style.color = "var(--rsp-table-header-color)";
               style.fontWeight = "bold";
-              style.borderBottom = "2px solid var(--table-header-border)";
+              style.borderBottom = "2px solid var(--rsp-table-header-border)";
             } else {
               const dataRowIndex = cell.rowIndex - tableInfo.start.rowIndex - 1;
               if (dataRowIndex % 2 === 0) {
-                style.backgroundColor = "var(--table-even-row-bg)";
+                style.backgroundColor = "var(--rsp-table-even-row-bg)";
               } else {
-                style.backgroundColor = "var(--table-odd-row-bg)";
+                style.backgroundColor = "var(--rsp-table-odd-row-bg)";
               }
             }
             if (isFirstColumn) {
-              style.borderLeft = "2px solid var(--table-border-color)";
+              style.borderLeft = "2px solid var(--rsp-table-border-color)";
             }
             if (isLastColumn) {
-              style.borderRight = "2px solid var(--table-border-color)";
+              style.borderRight = "2px solid var(--rsp-table-border-color)";
             }
             if (isHeaderRow) {
-              style.borderTop = "2px solid var(--table-border-color)";
+              style.borderTop = "2px solid var(--rsp-table-border-color)";
             }
             if (isLastRow) {
-              style.borderBottom = "2px solid var(--table-border-color)";
+              style.borderBottom = "2px solid var(--rsp-table-border-color)";
             }
             if (conditionalStyle?.backgroundColor) {
               style.backgroundColor = conditionalStyle.backgroundColor;
@@ -4042,4 +4149,4 @@ var useClickAway = (ref, callback) => {
   }, [ref, callback]);
 };
 
-//# debugId=2D3DCCBBF4E8DCA364756E2164756E21
+//# debugId=203CB6768D786E8764756E2164756E21