@ricsam/react-spreadsheets 0.0.4 → 0.0.6

package/README.md

@@ -88,8 +88,9 @@ top of `FormulaSheet`.
 
 ## Theming
 
-All colors, fonts and sizes are CSS custom properties declared on `:root`, so
-you can override them from **any** ancestor of the grid:
+All colors, fonts and sizes are CSS custom properties. The package only ever
+*reads* the public `--rsp-*` names, so an override on **any** ancestor of the
+grid always wins:
 
 ```css
 .my-panel {
@@ -100,6 +101,16 @@ you can override them from **any** ancestor of the grid:
 }
 ```
 
+An override replaces both schemes, so pick a value that works in the mode(s) you
+support, or scope it per scheme:
+
+```css
+.my-panel { --rsp-bg: #ffffff; }
+@media (prefers-color-scheme: dark) {
+  .my-panel { --rsp-bg: #10131a; }
+}
+```
+
 ### Light and dark
 
 By default the grid follows the user's OS preference.
@@ -129,6 +140,13 @@ switches.
 > declaration, which makes shared-root tokens compute to an invalid value — in
 > production builds only. An equivalent space-toggle is used instead.
 
+> **Note** — internally each public token is aliased to a private `--_rsp-*`
+> property declared on `.rsp-root`, and the rules consume the private name. A
+> custom property containing `var()` is substituted at the element where it is
+> *declared*, so themed values declared on `:root` would be resolved against the
+> document root and a subtree pin could never change them. Treat `--_rsp-*` as
+> private and always override the public `--rsp-*` name.
+
 ### Cell fills stay readable
 
 A `backgroundColor` coming from your document model is usually a single literal

package/dist/cjs/lib.cjs

@@ -2747,7 +2747,7 @@ var Spreadsheet = import_react4.forwardRef(({
               height: 0,
               visibility: "hidden",
               pointerEvents: "none",
-              color: "var(--rsp-gridline)"
+              color: "var(--_rsp-gridline)"
             }
           }),
           /* @__PURE__ */ jsx_runtime3.jsx("canvas", {
@@ -3673,32 +3673,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(--rsp-table-border-light)"
+              border: "1px solid var(--_rsp-table-border-light)"
             };
             if (isHeaderRow) {
-              style.backgroundColor = "var(--rsp-table-header-bg)";
-              style.color = "var(--rsp-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(--rsp-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(--rsp-table-even-row-bg)";
+                style.backgroundColor = "var(--_rsp-table-even-row-bg)";
               } else {
-                style.backgroundColor = "var(--rsp-table-odd-row-bg)";
+                style.backgroundColor = "var(--_rsp-table-odd-row-bg)";
               }
             }
             if (isFirstColumn) {
-              style.borderLeft = "2px solid var(--rsp-table-border-color)";
+              style.borderLeft = "2px solid var(--_rsp-table-border-color)";
             }
             if (isLastColumn) {
-              style.borderRight = "2px solid var(--rsp-table-border-color)";
+              style.borderRight = "2px solid var(--_rsp-table-border-color)";
             }
             if (isHeaderRow) {
-              style.borderTop = "2px solid var(--rsp-table-border-color)";
+              style.borderTop = "2px solid var(--_rsp-table-border-color)";
             }
             if (isLastRow) {
-              style.borderBottom = "2px solid var(--rsp-table-border-color)";
+              style.borderBottom = "2px solid var(--_rsp-table-border-color)";
             }
             if (conditionalStyle?.backgroundColor) {
               style.backgroundColor = conditionalStyle.backgroundColor;
@@ -4163,4 +4163,4 @@ var useClickAway = (ref, callback) => {
   }, [ref, callback]);
 };
 
-//# debugId=A383A8C557A8A55164756E2164756E21
+//# debugId=1230B1E8DDE11E4864756E2164756E21