@ricsam/react-spreadsheets 0.0.4 → 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +20 -2
  2. package/dist/cjs/lib.cjs +12 -12
  3. package/dist/cjs/lib.cjs.map +3 -3
  4. package/dist/cjs/package.json +1 -1
  5. package/dist/mjs/lib.mjs +12 -12
  6. package/dist/mjs/lib.mjs.map +3 -3
  7. package/dist/mjs/package.json +1 -1
  8. package/dist/styles.css +197 -179
  9. package/package.json +1 -1
package/dist/styles.css CHANGED
@@ -7,9 +7,8 @@
7
7
  * ---------------------------------------------------------------------------
8
8
  * Theming
9
9
  * ---------------------------------------------------------------------------
10
- * Every visual is driven by `--rsp-*` custom properties. Because the tokens are
11
- * declared on `:root` (not on `.rsp-root`), you can override them from *any*
12
- * ancestor and the grid will pick them up:
10
+ * Every visual is driven by a public `--rsp-*` custom property. Override any of
11
+ * them from *any* ancestor of the grid and the grid picks it up:
13
12
  *
14
13
  * .my-panel { --rsp-accent: #7c3aed; --rsp-cell-font-size: 13px; }
15
14
  *
@@ -27,30 +26,56 @@
27
26
  * <FormulaWorkbook className="rsp-theme-light" />
28
27
  * <FormulaWorkbook className="rsp-theme-dark" />
29
28
  *
29
+ * ---------------------------------------------------------------------------
30
30
  * Implementation note — why not `light-dark()`?
31
31
  * ---------------------------------------------------------------------------
32
- * `light-dark()` would be the natural choice, but bundlers that target
33
- * browsers without native support (Vite's Lightning CSS, for example) lower it
34
- * to a pair of switch custom properties that are only emitted in rules which
35
- * *also* declare `color-scheme`. Tokens declared once on a shared root then
36
- * compute to an invalid value like `#ffffff #0f1523`, and every themed surface
37
- * silently falls back to `transparent` / inherited text — a failure that only
38
- * appears in a production build.
32
+ * `light-dark()` would be the natural choice, but bundlers that target browsers
33
+ * without native support (Vite's Lightning CSS, for example) lower it to a pair
34
+ * of switch custom properties that are only emitted in rules which *also*
35
+ * declare `color-scheme`. Tokens declared once on a shared root then compute to
36
+ * an invalid value like `#ffffff #0f1523`, and every themed surface silently
37
+ * falls back to `transparent` / inherited text — a failure that only appears in
38
+ * a production build.
39
39
  *
40
- * Instead the same space-toggle trick is applied directly, using our own
40
+ * Instead the same space-toggle trick is applied directly with our own
41
41
  * `--rsp-light` / `--rsp-dark` switches. Exactly one of the two is set to
42
- * `initial` (making its `var()` fall back to the color) while the other is set
43
- * to a single space (contributing nothing), so each token resolves to one
44
- * color. This is plain custom-property substitution that no bundler rewrites,
45
- * and it inherits, so an ancestor's pin still wins.
42
+ * `initial` (making its `var()` fall back to that branch's color) while the
43
+ * other is set to a single space (contributing nothing), so each token resolves
44
+ * to exactly one color. That is plain custom-property substitution, which no
45
+ * bundler rewrites.
46
+ *
47
+ * ---------------------------------------------------------------------------
48
+ * Implementation note — why the private `--_rsp-*` layer?
49
+ * ---------------------------------------------------------------------------
50
+ * A custom property whose value contains `var()` is substituted **at the
51
+ * element where it is declared**, and only the *result* inherits. So a themed
52
+ * token declared on `:root` is resolved using `:root`'s switches; re-declaring
53
+ * `--rsp-light` / `--rsp-dark` further down the tree cannot re-resolve it.
54
+ *
55
+ * That matters because a plain stylesheet cannot read an *ancestor's*
56
+ * `color-scheme`. The component resolves it from the mounted element and
57
+ * reflects it as `data-rsp-scheme` on `.rsp-root` — but if the themed tokens
58
+ * lived on `:root`, that attribute would be inert: on a dark-mode device a grid
59
+ * pinned to `color-scheme: light` still painted its dark palette, giving the
60
+ * light-page/dark-grid "mix".
46
61
  *
47
- * A plain stylesheet cannot read an ancestor's `color-scheme`, so the component
48
- * resolves it from the mounted element and reflects the result onto the grid
49
- * root as `data-rsp-scheme`. That covers a pin declared in CSS, inline, or via
50
- * the helper classes. The media query below is the pre-resolution default.
62
+ * So the switch is applied where the scheme is known. Each public `--rsp-*`
63
+ * token gets a private `--_rsp-*` alias declared on `.rsp-root` itself:
64
+ *
65
+ * --_rsp-bg: var(--rsp-bg, <light> or <dark>);
66
+ *
67
+ * Rules consume `--_rsp-*`. The public `--rsp-*` name is only ever *read* (as
68
+ * the `var()` fallback), never declared by the package, so:
69
+ *
70
+ * - a consumer override on any ancestor still wins, because it is what the
71
+ * fallback resolves to, and
72
+ * - the light/dark branch is chosen using the switches in effect on
73
+ * `.rsp-root`, so `data-rsp-scheme` and the helper classes actually work.
51
74
  */
52
75
 
53
- /* Default: follow the OS preference. */
76
+ /* Default: follow the OS preference. `.rsp-root` is included so the grid still
77
+ themes correctly inside a shadow root or any tree where `:root` is not an
78
+ ancestor. Only the two switches are declared here — never the tokens. */
54
79
  :root,
55
80
  .rsp-root {
56
81
  --rsp-light: initial;
@@ -66,7 +91,8 @@
66
91
  }
67
92
 
68
93
  /* Resolved by the component from the inherited `color-scheme`, so a pin set in
69
- CSS, inline, or via the helper classes below is all honoured. */
94
+ CSS, inline, or via the helper classes below is honoured. This has to come
95
+ after the media query so an explicit pin beats the OS preference. */
70
96
  [data-rsp-scheme="light"] {
71
97
  --rsp-light: initial;
72
98
  --rsp-dark: ;
@@ -77,8 +103,8 @@
77
103
  --rsp-dark: initial;
78
104
  }
79
105
 
80
- /* Explicit opt-in pins. `color-scheme` is set too so native scrollbars and
81
- form controls agree with the token switch. */
106
+ /* Explicit opt-in pins. `color-scheme` is set too so native scrollbars and form
107
+ controls agree with the token switch. */
82
108
  .rsp-theme-light {
83
109
  color-scheme: light;
84
110
  --rsp-light: initial;
@@ -91,25 +117,28 @@
91
117
  --rsp-dark: initial;
92
118
  }
93
119
 
94
- :root,
120
+ /* The private token layer. Declared on `.rsp-root` so the light/dark switch is
121
+ evaluated with the *resolved* scheme for this subtree, while each value falls
122
+ back to the public `--rsp-*` name so a consumer override on any ancestor
123
+ still wins. Never declare a public `--rsp-*` token here. */
95
124
  .rsp-root {
96
125
  /* Surfaces */
97
- --rsp-bg: var(--rsp-light, #ffffff) var(--rsp-dark, #0f1523);
98
- --rsp-surface: var(--rsp-light, #ffffff) var(--rsp-dark, #151c2c);
99
- --rsp-header-bg: var(--rsp-light, #f7f8fa) var(--rsp-dark, #1a2233);
100
- --rsp-header-active-bg: var(--rsp-light, #e9edf5) var(--rsp-dark, #24304a);
101
- --rsp-corner-bg: var(--rsp-light, #eef1f6) var(--rsp-dark, #1a2233);
102
- --rsp-editor-bg: var(--rsp-light, #ffffff) var(--rsp-dark, #1a2233);
126
+ --_rsp-bg: var(--rsp-bg, var(--rsp-light, #ffffff) var(--rsp-dark, #0f1523));
127
+ --_rsp-surface: var(--rsp-surface, var(--rsp-light, #ffffff) var(--rsp-dark, #151c2c));
128
+ --_rsp-header-bg: var(--rsp-header-bg, var(--rsp-light, #f7f8fa) var(--rsp-dark, #1a2233));
129
+ --_rsp-header-active-bg: var(--rsp-header-active-bg, var(--rsp-light, #e9edf5) var(--rsp-dark, #24304a));
130
+ --_rsp-corner-bg: var(--rsp-corner-bg, var(--rsp-light, #eef1f6) var(--rsp-dark, #1a2233));
131
+ --_rsp-editor-bg: var(--rsp-editor-bg, var(--rsp-light, #ffffff) var(--rsp-dark, #1a2233));
103
132
 
104
133
  /* Lines */
105
- --rsp-border: var(--rsp-light, #e3e7ee) var(--rsp-dark, #2a3346);
106
- --rsp-corner-border: var(--rsp-light, #d7dce6) var(--rsp-dark, #2a3346);
107
- --rsp-gridline: var(--rsp-light, #e8ebf1) var(--rsp-dark, #232c3d);
134
+ --_rsp-border: var(--rsp-border, var(--rsp-light, #e3e7ee) var(--rsp-dark, #2a3346));
135
+ --_rsp-corner-border: var(--rsp-corner-border, var(--rsp-light, #d7dce6) var(--rsp-dark, #2a3346));
136
+ --_rsp-gridline: var(--rsp-gridline, var(--rsp-light, #e8ebf1) var(--rsp-dark, #232c3d));
108
137
 
109
138
  /* Text */
110
- --rsp-text: var(--rsp-light, #101828) var(--rsp-dark, #e8ecf4);
111
- --rsp-header-text: var(--rsp-light, #5a6478) var(--rsp-dark, #99a4bb);
112
- --rsp-muted-text: var(--rsp-light, #6b7280) var(--rsp-dark, #8c97ad);
139
+ --_rsp-text: var(--rsp-text, var(--rsp-light, #101828) var(--rsp-dark, #e8ecf4));
140
+ --_rsp-header-text: var(--rsp-header-text, var(--rsp-light, #5a6478) var(--rsp-dark, #99a4bb));
141
+ --_rsp-muted-text: var(--rsp-muted-text, var(--rsp-light, #6b7280) var(--rsp-dark, #8c97ad));
113
142
 
114
143
  /* Accent / selection.
115
144
  NOTE: `@ricsam/selection-manager` paints the selection *perimeter* as an
@@ -117,60 +146,49 @@
117
146
  The default accent stays in that blue family so the perimeter agrees with
118
147
  the rest of the chrome out of the box. Overriding `--rsp-accent` with a
119
148
  distant hue will make the perimeter read slightly differently. */
120
- --rsp-accent: var(--rsp-light, #2196f3) var(--rsp-dark, #58a6ff);
121
- --rsp-accent-contrast: #ffffff;
122
- --rsp-selection-bg: var(--rsp-light, #e8f2fe) var(--rsp-dark, #17304f);
123
- --rsp-selection-range-bg: var(--rsp-light, #f1f7fe) var(--rsp-dark, #14263d);
124
- --rsp-hover-bg: var(--rsp-light, #f5f7fa) var(--rsp-dark, #1c2436);
125
- --rsp-focus-ring: var(--rsp-light, rgba(33, 150, 243, 0.22)) var(--rsp-dark, rgba(88, 166, 255, 0.28));
149
+ --_rsp-accent: var(--rsp-accent, var(--rsp-light, #2196f3) var(--rsp-dark, #58a6ff));
150
+ --_rsp-accent-contrast: var(--rsp-accent-contrast, #ffffff);
151
+ --_rsp-selection-bg: var(--rsp-selection-bg, var(--rsp-light, #e8f2fe) var(--rsp-dark, #17304f));
152
+ --_rsp-selection-range-bg: var(--rsp-selection-range-bg, var(--rsp-light, #f1f7fe) var(--rsp-dark, #14263d));
153
+ --_rsp-hover-bg: var(--rsp-hover-bg, var(--rsp-light, #f5f7fa) var(--rsp-dark, #1c2436));
154
+ --_rsp-focus-ring: var(--rsp-focus-ring, var(--rsp-light, rgba(33, 150, 243, 0.22)) var(--rsp-dark, rgba(88, 166, 255, 0.28)));
126
155
 
127
156
  /* Danger (delete buttons, invalid input) */
128
- --rsp-danger: var(--rsp-light, #d92d20) var(--rsp-dark, #ff8a80);
129
- --rsp-danger-bg: var(--rsp-light, #fef3f2) var(--rsp-dark, #3a1512);
157
+ --_rsp-danger: var(--rsp-danger, var(--rsp-light, #d92d20) var(--rsp-dark, #ff8a80));
158
+ --_rsp-danger-bg: var(--rsp-danger-bg, var(--rsp-light, #fef3f2) var(--rsp-dark, #3a1512));
130
159
 
131
160
  /* Tables (consumed by the workbook's inline cell styles) */
132
- --rsp-table-header-bg: var(--rsp-light, #2196f3) var(--rsp-dark, #1c3a5e);
133
- --rsp-table-header-color: var(--rsp-light, #ffffff) var(--rsp-dark, #e8ecf4);
134
- --rsp-table-header-border: var(--rsp-light, #1877c9) var(--rsp-dark, #2a5384);
135
- --rsp-table-even-row-bg: var(--rsp-light, #f7f9fc) var(--rsp-dark, #161e2e);
136
- --rsp-table-odd-row-bg: var(--rsp-light, #ffffff) var(--rsp-dark, #131a28);
137
- --rsp-table-border-color: var(--rsp-light, #2196f3) var(--rsp-dark, #34405c);
138
- --rsp-table-border-light: var(--rsp-light, #dfe4ec) var(--rsp-dark, #2a3346);
139
-
140
- /* Typography */
141
- --rsp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
142
- "Helvetica Neue", Arial, sans-serif;
143
- --rsp-mono-font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
144
- Consolas, "Liberation Mono", monospace;
145
- --rsp-cell-font-size: 12px;
146
- --rsp-header-font-size: 11px;
161
+ --_rsp-table-header-bg: var(--rsp-table-header-bg, var(--rsp-light, #2196f3) var(--rsp-dark, #1c3a5e));
162
+ --_rsp-table-header-color: var(--rsp-table-header-color, var(--rsp-light, #ffffff) var(--rsp-dark, #e8ecf4));
163
+ --_rsp-table-header-border: var(--rsp-table-header-border, var(--rsp-light, #1877c9) var(--rsp-dark, #2a5384));
164
+ --_rsp-table-even-row-bg: var(--rsp-table-even-row-bg, var(--rsp-light, #f7f9fc) var(--rsp-dark, #161e2e));
165
+ --_rsp-table-odd-row-bg: var(--rsp-table-odd-row-bg, var(--rsp-light, #ffffff) var(--rsp-dark, #131a28));
166
+ --_rsp-table-border-color: var(--rsp-table-border-color, var(--rsp-light, #2196f3) var(--rsp-dark, #34405c));
167
+ --_rsp-table-border-light: var(--rsp-table-border-light, var(--rsp-light, #dfe4ec) var(--rsp-dark, #2a3346));
168
+
169
+ /* Typography (scheme-independent, but aliased for one consistent lookup) */
170
+ --_rsp-font-family: var(--rsp-font-family, -apple-system, BlinkMacSystemFont,
171
+ "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
172
+ --_rsp-mono-font-family: var(--rsp-mono-font-family, ui-monospace, SFMono-Regular,
173
+ "SF Mono", Menlo, Consolas, "Liberation Mono", monospace);
174
+ --_rsp-cell-font-size: var(--rsp-cell-font-size, 12px);
175
+ --_rsp-header-font-size: var(--rsp-header-font-size, 11px);
147
176
 
148
177
  /* Shape + motion */
149
- --rsp-radius: 8px;
150
- --rsp-radius-sm: 5px;
151
- --rsp-cell-padding: 0 7px;
152
- --rsp-transition: 120ms cubic-bezier(0.4, 0, 0.2, 1);
178
+ --_rsp-radius: var(--rsp-radius, 8px);
179
+ --_rsp-radius-sm: var(--rsp-radius-sm, 5px);
180
+ --_rsp-cell-padding: var(--rsp-cell-padding, 0 7px);
181
+ --_rsp-transition: var(--rsp-transition, 120ms cubic-bezier(0.4, 0, 0.2, 1));
153
182
 
154
183
  /* Fill handle */
155
- --rsp-fill-handle-size: 8px;
156
- }
157
-
158
- /* Opt-in scheme pins. Applied to `.rsp-root` (or any ancestor) these force one
159
- mode regardless of the OS preference, and every `light-dark()` token below
160
- follows because `color-scheme` inherits. */
161
- .rsp-theme-light {
162
- color-scheme: light;
163
- }
164
-
165
- .rsp-theme-dark {
166
- color-scheme: dark;
184
+ --_rsp-fill-handle-size: var(--rsp-fill-handle-size, 8px);
167
185
  }
168
186
 
169
187
  .rsp-root {
170
188
  /* No `color-scheme` here on purpose: declaring it would override a pin set by
171
- an ancestor. See the file header. */
172
- color: var(--rsp-text);
173
- font-family: var(--rsp-font-family);
189
+ an ancestor. The resolved value arrives as `data-rsp-scheme` instead. */
190
+ color: var(--_rsp-text);
191
+ font-family: var(--_rsp-font-family);
174
192
  }
175
193
 
176
194
  .rsp-root *,
@@ -187,9 +205,9 @@
187
205
  position: relative;
188
206
  overflow: hidden;
189
207
  user-select: none;
190
- background: var(--rsp-bg);
191
- color: var(--rsp-text);
192
- font-family: var(--rsp-font-family);
208
+ background: var(--_rsp-bg);
209
+ color: var(--_rsp-text);
210
+ font-family: var(--_rsp-font-family);
193
211
  }
194
212
 
195
213
  .rsp-container:focus {
@@ -197,7 +215,7 @@
197
215
  }
198
216
 
199
217
  .rsp-container.rsp-focused {
200
- box-shadow: inset 0 0 0 1px var(--rsp-accent);
218
+ box-shadow: inset 0 0 0 1px var(--_rsp-accent);
201
219
  }
202
220
 
203
221
  .rsp-canvas,
@@ -212,9 +230,9 @@
212
230
  position: absolute;
213
231
  border: 1px solid transparent;
214
232
  background: transparent;
215
- padding: var(--rsp-cell-padding);
216
- font-size: var(--rsp-cell-font-size);
217
- font-family: var(--rsp-font-family);
233
+ padding: var(--_rsp-cell-padding);
234
+ font-size: var(--_rsp-cell-font-size);
235
+ font-family: var(--_rsp-font-family);
218
236
  font-variant-numeric: tabular-nums;
219
237
  overflow: hidden;
220
238
  white-space: pre;
@@ -223,7 +241,7 @@
223
241
  cursor: cell;
224
242
  display: flex;
225
243
  align-items: center;
226
- color: var(--rsp-text);
244
+ color: var(--_rsp-text);
227
245
  box-sizing: border-box;
228
246
  }
229
247
 
@@ -235,17 +253,17 @@
235
253
  /* Hover tint must never repaint a cell the consumer has colored, so it is
236
254
  restricted to "plain" cells (no custom background). */
237
255
  .rsp-cell.rsp-cell-plain:hover {
238
- background: var(--rsp-hover-bg);
256
+ background: var(--_rsp-hover-bg);
239
257
  }
240
258
 
241
259
  /* `rsp-cell-plain` marks cells whose background is not overridden by a
242
260
  consumer-supplied custom style, so selection tinting is safe to apply. */
243
261
  .rsp-cell.rsp-cell-in-selection.rsp-cell-plain {
244
- background: var(--rsp-selection-range-bg);
262
+ background: var(--_rsp-selection-range-bg);
245
263
  }
246
264
 
247
265
  .rsp-cell.rsp-cell-selected.rsp-cell-plain {
248
- background: var(--rsp-selection-bg);
266
+ background: var(--_rsp-selection-bg);
249
267
  }
250
268
 
251
269
  /* The selection perimeter is painted by the selection manager as an inline
@@ -265,11 +283,11 @@
265
283
  .rsp-cell.rsp-cell-editing.rsp-cell-plain,
266
284
  .rsp-cell.rsp-cell-selected.rsp-cell-editing,
267
285
  .rsp-cell.rsp-cell-selected.rsp-cell-editing.rsp-cell-plain {
268
- background: var(--rsp-editor-bg);
269
- color: var(--rsp-text);
286
+ background: var(--_rsp-editor-bg);
287
+ color: var(--_rsp-text);
270
288
  box-shadow:
271
- inset 0 0 0 2px var(--rsp-accent),
272
- 0 6px 16px -4px var(--rsp-focus-ring);
289
+ inset 0 0 0 2px var(--_rsp-accent),
290
+ 0 6px 16px -4px var(--_rsp-focus-ring);
273
291
  z-index: 999;
274
292
  pointer-events: none;
275
293
  }
@@ -282,11 +300,11 @@
282
300
  outline: none;
283
301
  padding: 0;
284
302
  margin: 0;
285
- font-size: var(--rsp-cell-font-size);
286
- font-family: var(--rsp-font-family);
303
+ font-size: var(--_rsp-cell-font-size);
304
+ font-family: var(--_rsp-font-family);
287
305
  background: transparent;
288
- color: var(--rsp-text);
289
- caret-color: var(--rsp-accent);
306
+ color: var(--_rsp-text);
307
+ caret-color: var(--_rsp-accent);
290
308
  resize: none;
291
309
  overflow: hidden;
292
310
  z-index: 1000;
@@ -298,10 +316,10 @@
298
316
  position: absolute;
299
317
  bottom: -1px;
300
318
  right: -1px;
301
- width: var(--rsp-fill-handle-size);
302
- height: var(--rsp-fill-handle-size);
303
- background-color: var(--rsp-accent);
304
- border: 1px solid var(--rsp-bg);
319
+ width: var(--_rsp-fill-handle-size);
320
+ height: var(--_rsp-fill-handle-size);
321
+ background-color: var(--_rsp-accent);
322
+ border: 1px solid var(--_rsp-bg);
305
323
  border-radius: 1px;
306
324
  cursor: crosshair;
307
325
  z-index: 3;
@@ -311,65 +329,65 @@
311
329
 
312
330
  .rsp-header {
313
331
  position: absolute;
314
- border: 1px solid var(--rsp-border);
315
- background-color: var(--rsp-header-bg);
332
+ border: 1px solid var(--_rsp-border);
333
+ background-color: var(--_rsp-header-bg);
316
334
  display: flex;
317
335
  align-items: center;
318
336
  justify-content: center;
319
- font-size: var(--rsp-header-font-size);
337
+ font-size: var(--_rsp-header-font-size);
320
338
  font-weight: 500;
321
339
  letter-spacing: 0.02em;
322
340
  cursor: pointer;
323
341
  user-select: none;
324
- color: var(--rsp-header-text);
342
+ color: var(--_rsp-header-text);
325
343
  box-sizing: border-box;
326
- transition: background-color var(--rsp-transition), color var(--rsp-transition);
344
+ transition: background-color var(--_rsp-transition), color var(--_rsp-transition);
327
345
  }
328
346
 
329
347
  .rsp-header:hover {
330
- background-color: var(--rsp-header-active-bg);
331
- color: var(--rsp-text);
348
+ background-color: var(--_rsp-header-active-bg);
349
+ color: var(--_rsp-text);
332
350
  }
333
351
 
334
352
  .rsp-header.rsp-header-selected {
335
- background-color: var(--rsp-header-active-bg);
336
- color: var(--rsp-accent);
353
+ background-color: var(--_rsp-header-active-bg);
354
+ color: var(--_rsp-accent);
337
355
  font-weight: 600;
338
356
  }
339
357
 
340
358
  /* A crisp accent edge on the side that faces the grid marks the active
341
359
  row/column without changing the header's box metrics. */
342
360
  .rsp-header.rsp-header-col.rsp-header-selected {
343
- box-shadow: inset 0 -2px 0 var(--rsp-accent);
361
+ box-shadow: inset 0 -2px 0 var(--_rsp-accent);
344
362
  }
345
363
 
346
364
  .rsp-header.rsp-header-row.rsp-header-selected {
347
- box-shadow: inset -2px 0 0 var(--rsp-accent);
365
+ box-shadow: inset -2px 0 0 var(--_rsp-accent);
348
366
  }
349
367
 
350
368
  .rsp-column-headers,
351
369
  .rsp-row-headers {
352
370
  position: absolute;
353
371
  overflow: hidden;
354
- background-color: var(--rsp-header-bg);
372
+ background-color: var(--_rsp-header-bg);
355
373
  z-index: 1;
356
374
  }
357
375
 
358
376
  .rsp-column-headers {
359
377
  top: 0;
360
- border-bottom: 1px solid var(--rsp-border);
378
+ border-bottom: 1px solid var(--_rsp-border);
361
379
  }
362
380
 
363
381
  .rsp-row-headers {
364
- border-right: 1px solid var(--rsp-border);
382
+ border-right: 1px solid var(--_rsp-border);
365
383
  }
366
384
 
367
385
  .rsp-corner-header {
368
386
  position: absolute;
369
387
  top: 0;
370
388
  left: 0;
371
- background-color: var(--rsp-corner-bg);
372
- border: 1px solid var(--rsp-corner-border);
389
+ background-color: var(--_rsp-corner-bg);
390
+ border: 1px solid var(--_rsp-corner-border);
373
391
  z-index: 20;
374
392
  }
375
393
 
@@ -395,7 +413,7 @@
395
413
 
396
414
  .rsp-col-resize-handle:hover,
397
415
  .rsp-row-resize-handle:hover {
398
- background: var(--rsp-accent);
416
+ background: var(--_rsp-accent);
399
417
  }
400
418
 
401
419
  /* Overlays --------------------------------------------------------- */
@@ -415,9 +433,9 @@
415
433
  position: absolute;
416
434
  opacity: 0.5;
417
435
  pointer-events: none;
418
- border: 2px dashed var(--rsp-accent);
419
- border-radius: var(--rsp-radius-sm);
420
- background-color: var(--rsp-focus-ring);
436
+ border: 2px dashed var(--_rsp-accent);
437
+ border-radius: var(--_rsp-radius-sm);
438
+ background-color: var(--_rsp-focus-ring);
421
439
  }
422
440
 
423
441
  .rsp-overlay-placeholder-label {
@@ -425,7 +443,7 @@
425
443
  top: 50%;
426
444
  left: 50%;
427
445
  transform: translate(-50%, -50%);
428
- color: var(--rsp-accent);
446
+ color: var(--_rsp-accent);
429
447
  font-weight: 600;
430
448
  font-size: 14px;
431
449
  white-space: nowrap;
@@ -441,9 +459,9 @@
441
459
  flex-direction: column;
442
460
  height: 100%;
443
461
  width: 100%;
444
- background: var(--rsp-bg);
445
- color: var(--rsp-text);
446
- font-family: var(--rsp-font-family);
462
+ background: var(--_rsp-bg);
463
+ color: var(--_rsp-text);
464
+ font-family: var(--_rsp-font-family);
447
465
  }
448
466
 
449
467
  .rsp-workbook-header {
@@ -451,8 +469,8 @@
451
469
  align-items: center;
452
470
  gap: 8px;
453
471
  padding: 7px 10px;
454
- border-bottom: 1px solid var(--rsp-border);
455
- background: var(--rsp-header-bg);
472
+ border-bottom: 1px solid var(--_rsp-border);
473
+ background: var(--_rsp-header-bg);
456
474
  flex: none;
457
475
  }
458
476
 
@@ -460,7 +478,7 @@
460
478
  font-weight: 600;
461
479
  font-size: 12px;
462
480
  letter-spacing: -0.01em;
463
- color: var(--rsp-text);
481
+ color: var(--_rsp-text);
464
482
  white-space: nowrap;
465
483
  }
466
484
 
@@ -475,8 +493,8 @@
475
493
  align-items: center;
476
494
  gap: 6px;
477
495
  padding: 6px 10px;
478
- border-top: 1px solid var(--rsp-border);
479
- background: var(--rsp-header-bg);
496
+ border-top: 1px solid var(--_rsp-border);
497
+ background: var(--_rsp-header-bg);
480
498
  flex: none;
481
499
  }
482
500
 
@@ -494,36 +512,36 @@
494
512
  gap: 6px;
495
513
  padding: 5px 11px;
496
514
  border: 1px solid transparent;
497
- border-radius: var(--rsp-radius-sm);
515
+ border-radius: var(--_rsp-radius-sm);
498
516
  font-size: 12px;
499
517
  line-height: 1.4;
500
518
  cursor: pointer;
501
519
  white-space: nowrap;
502
- color: var(--rsp-header-text);
520
+ color: var(--_rsp-header-text);
503
521
  background: transparent;
504
- transition: background-color var(--rsp-transition), color var(--rsp-transition);
522
+ transition: background-color var(--_rsp-transition), color var(--_rsp-transition);
505
523
  }
506
524
 
507
525
  .rsp-sheet-tab:hover {
508
- background: var(--rsp-hover-bg);
509
- color: var(--rsp-text);
526
+ background: var(--_rsp-hover-bg);
527
+ color: var(--_rsp-text);
510
528
  }
511
529
 
512
530
  .rsp-sheet-tab.rsp-sheet-tab-active {
513
- background: var(--rsp-accent);
531
+ background: var(--_rsp-accent);
514
532
  border-color: transparent;
515
- color: var(--rsp-accent-contrast);
533
+ color: var(--_rsp-accent-contrast);
516
534
  font-weight: 600;
517
535
  }
518
536
 
519
537
  /* Icon buttons inside the active tab must read against the accent fill. */
520
538
  .rsp-sheet-tab.rsp-sheet-tab-active .rsp-icon-button {
521
- color: var(--rsp-accent-contrast);
539
+ color: var(--_rsp-accent-contrast);
522
540
  }
523
541
 
524
542
  .rsp-sheet-tab.rsp-sheet-tab-active .rsp-icon-button:hover {
525
543
  background: rgba(255, 255, 255, 0.22);
526
- color: var(--rsp-accent-contrast);
544
+ color: var(--_rsp-accent-contrast);
527
545
  }
528
546
 
529
547
  /* Per-tab action buttons reveal on hover / when the tab is active. */
@@ -532,7 +550,7 @@
532
550
  align-items: center;
533
551
  gap: 2px;
534
552
  opacity: 0;
535
- transition: opacity var(--rsp-transition);
553
+ transition: opacity var(--_rsp-transition);
536
554
  }
537
555
 
538
556
  .rsp-sheet-tab:hover .sheet-tab-actions,
@@ -543,14 +561,14 @@
543
561
 
544
562
  .rsp-sheet-tab-input {
545
563
  font: inherit;
546
- color: var(--rsp-text);
547
- background: var(--rsp-editor-bg);
548
- border: 1px solid var(--rsp-accent);
549
- border-radius: var(--rsp-radius-sm);
564
+ color: var(--_rsp-text);
565
+ background: var(--_rsp-editor-bg);
566
+ border: 1px solid var(--_rsp-accent);
567
+ border-radius: var(--_rsp-radius-sm);
550
568
  padding: 2px 6px;
551
569
  min-width: 80px;
552
570
  outline: none;
553
- box-shadow: 0 0 0 3px var(--rsp-focus-ring);
571
+ box-shadow: 0 0 0 3px var(--_rsp-focus-ring);
554
572
  }
555
573
 
556
574
  .rsp-icon-button {
@@ -561,18 +579,18 @@
561
579
  height: 22px;
562
580
  padding: 0;
563
581
  border: none;
564
- border-radius: var(--rsp-radius-sm);
582
+ border-radius: var(--_rsp-radius-sm);
565
583
  background: transparent;
566
- color: var(--rsp-muted-text);
584
+ color: var(--_rsp-muted-text);
567
585
  cursor: pointer;
568
586
  font-size: 14px;
569
587
  line-height: 1;
570
- transition: background-color var(--rsp-transition), color var(--rsp-transition);
588
+ transition: background-color var(--_rsp-transition), color var(--_rsp-transition);
571
589
  }
572
590
 
573
591
  .rsp-icon-button:hover {
574
- background: var(--rsp-hover-bg);
575
- color: var(--rsp-text);
592
+ background: var(--_rsp-hover-bg);
593
+ color: var(--_rsp-text);
576
594
  }
577
595
 
578
596
  .rsp-icon-button:disabled {
@@ -581,8 +599,8 @@
581
599
  }
582
600
 
583
601
  .rsp-icon-button.rsp-icon-button-delete:hover {
584
- background: var(--rsp-danger-bg);
585
- color: var(--rsp-danger);
602
+ background: var(--_rsp-danger-bg);
603
+ color: var(--_rsp-danger);
586
604
  }
587
605
 
588
606
  .rsp-add-sheet-button {
@@ -592,20 +610,20 @@
592
610
  gap: 4px;
593
611
  height: 26px;
594
612
  padding: 0 11px;
595
- border: 1px dashed var(--rsp-border);
596
- border-radius: var(--rsp-radius-sm);
613
+ border: 1px dashed var(--_rsp-border);
614
+ border-radius: var(--_rsp-radius-sm);
597
615
  background: transparent;
598
- color: var(--rsp-header-text);
616
+ color: var(--_rsp-header-text);
599
617
  font-size: 12px;
600
618
  cursor: pointer;
601
619
  white-space: nowrap;
602
- transition: border-color var(--rsp-transition), color var(--rsp-transition);
620
+ transition: border-color var(--_rsp-transition), color var(--_rsp-transition);
603
621
  }
604
622
 
605
623
  .rsp-add-sheet-button:hover {
606
- border-color: var(--rsp-accent);
624
+ border-color: var(--_rsp-accent);
607
625
  border-style: solid;
608
- color: var(--rsp-accent);
626
+ color: var(--_rsp-accent);
609
627
  }
610
628
 
611
629
  .rsp-zoom-controls {
@@ -620,7 +638,7 @@
620
638
  min-width: 44px;
621
639
  text-align: center;
622
640
  font-size: 11px;
623
- color: var(--rsp-muted-text);
641
+ color: var(--_rsp-muted-text);
624
642
  font-variant-numeric: tabular-nums;
625
643
  }
626
644
 
@@ -631,44 +649,44 @@
631
649
  align-items: center;
632
650
  gap: 8px;
633
651
  padding: 6px 10px;
634
- border-bottom: 1px solid var(--rsp-border);
635
- background: var(--rsp-bg);
652
+ border-bottom: 1px solid var(--_rsp-border);
653
+ background: var(--_rsp-bg);
636
654
  flex: none;
637
655
  }
638
656
 
639
657
  .rsp-name-box {
640
658
  min-width: 84px;
641
659
  padding: 4px 8px;
642
- border: 1px solid var(--rsp-border);
643
- border-radius: var(--rsp-radius-sm);
644
- background: var(--rsp-header-bg);
645
- font-family: var(--rsp-mono-font-family);
660
+ border: 1px solid var(--_rsp-border);
661
+ border-radius: var(--_rsp-radius-sm);
662
+ background: var(--_rsp-header-bg);
663
+ font-family: var(--_rsp-mono-font-family);
646
664
  font-size: 11px;
647
665
  text-align: center;
648
- color: var(--rsp-text);
666
+ color: var(--_rsp-text);
649
667
  }
650
668
 
651
669
  .rsp-formula-input {
652
670
  flex: 1;
653
671
  min-width: 0;
654
672
  padding: 4px 9px;
655
- border: 1px solid var(--rsp-border);
656
- border-radius: var(--rsp-radius-sm);
657
- background: var(--rsp-editor-bg);
658
- color: var(--rsp-text);
659
- font-family: var(--rsp-mono-font-family);
673
+ border: 1px solid var(--_rsp-border);
674
+ border-radius: var(--_rsp-radius-sm);
675
+ background: var(--_rsp-editor-bg);
676
+ color: var(--_rsp-text);
677
+ font-family: var(--_rsp-mono-font-family);
660
678
  font-size: 12px;
661
- transition: border-color var(--rsp-transition), box-shadow var(--rsp-transition);
679
+ transition: border-color var(--_rsp-transition), box-shadow var(--_rsp-transition);
662
680
  }
663
681
 
664
682
  .rsp-formula-input::placeholder {
665
- color: var(--rsp-muted-text);
683
+ color: var(--_rsp-muted-text);
666
684
  }
667
685
 
668
686
  .rsp-formula-input:focus {
669
687
  outline: none;
670
- border-color: var(--rsp-accent);
671
- box-shadow: 0 0 0 3px var(--rsp-focus-ring);
688
+ border-color: var(--_rsp-accent);
689
+ box-shadow: 0 0 0 3px var(--_rsp-focus-ring);
672
690
  }
673
691
 
674
692
  .rsp-formula-input:disabled {
@@ -679,7 +697,7 @@
679
697
  /* Scrollbars ------------------------------------------------------- */
680
698
 
681
699
  .rsp-root {
682
- scrollbar-color: var(--rsp-border) transparent;
700
+ scrollbar-color: var(--_rsp-border) transparent;
683
701
  }
684
702
 
685
703
  .rsp-root ::-webkit-scrollbar {
@@ -692,11 +710,11 @@
692
710
  }
693
711
 
694
712
  .rsp-root ::-webkit-scrollbar-thumb {
695
- background: var(--rsp-border);
696
- border: 2px solid var(--rsp-bg);
713
+ background: var(--_rsp-border);
714
+ border: 2px solid var(--_rsp-bg);
697
715
  border-radius: 99px;
698
716
  }
699
717
 
700
718
  .rsp-root ::-webkit-scrollbar-thumb:hover {
701
- background: var(--rsp-muted-text);
719
+ background: var(--_rsp-muted-text);
702
720
  }