@ricsam/react-spreadsheets 0.0.5 → 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 -185
  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,33 +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
76
  /* Default: follow the OS preference. `.rsp-root` is included so the grid still
54
- themes correctly when the stylesheet is loaded into a shadow root or another
55
- tree where `:root` is not an ancestor. Only the two switches are repeated —
56
- never the tokens themselves (see below). */
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. */
57
79
  :root,
58
80
  .rsp-root {
59
81
  --rsp-light: initial;
@@ -69,7 +91,8 @@
69
91
  }
70
92
 
71
93
  /* Resolved by the component from the inherited `color-scheme`, so a pin set in
72
- 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. */
73
96
  [data-rsp-scheme="light"] {
74
97
  --rsp-light: initial;
75
98
  --rsp-dark: ;
@@ -80,8 +103,8 @@
80
103
  --rsp-dark: initial;
81
104
  }
82
105
 
83
- /* Explicit opt-in pins. `color-scheme` is set too so native scrollbars and
84
- 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. */
85
108
  .rsp-theme-light {
86
109
  color-scheme: light;
87
110
  --rsp-light: initial;
@@ -94,28 +117,28 @@
94
117
  --rsp-dark: initial;
95
118
  }
96
119
 
97
- /* Tokens are declared ONLY on `:root`, so a consumer can override any of them
98
- from any ancestor of the grid. Repeating this block on `.rsp-root` would let
99
- the built-in defaults beat an ancestor's override, because `.rsp-root` is the
100
- closer element. */
101
- :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. */
124
+ .rsp-root {
102
125
  /* Surfaces */
103
- --rsp-bg: var(--rsp-light, #ffffff) var(--rsp-dark, #0f1523);
104
- --rsp-surface: var(--rsp-light, #ffffff) var(--rsp-dark, #151c2c);
105
- --rsp-header-bg: var(--rsp-light, #f7f8fa) var(--rsp-dark, #1a2233);
106
- --rsp-header-active-bg: var(--rsp-light, #e9edf5) var(--rsp-dark, #24304a);
107
- --rsp-corner-bg: var(--rsp-light, #eef1f6) var(--rsp-dark, #1a2233);
108
- --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));
109
132
 
110
133
  /* Lines */
111
- --rsp-border: var(--rsp-light, #e3e7ee) var(--rsp-dark, #2a3346);
112
- --rsp-corner-border: var(--rsp-light, #d7dce6) var(--rsp-dark, #2a3346);
113
- --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));
114
137
 
115
138
  /* Text */
116
- --rsp-text: var(--rsp-light, #101828) var(--rsp-dark, #e8ecf4);
117
- --rsp-header-text: var(--rsp-light, #5a6478) var(--rsp-dark, #99a4bb);
118
- --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));
119
142
 
120
143
  /* Accent / selection.
121
144
  NOTE: `@ricsam/selection-manager` paints the selection *perimeter* as an
@@ -123,60 +146,49 @@
123
146
  The default accent stays in that blue family so the perimeter agrees with
124
147
  the rest of the chrome out of the box. Overriding `--rsp-accent` with a
125
148
  distant hue will make the perimeter read slightly differently. */
126
- --rsp-accent: var(--rsp-light, #2196f3) var(--rsp-dark, #58a6ff);
127
- --rsp-accent-contrast: #ffffff;
128
- --rsp-selection-bg: var(--rsp-light, #e8f2fe) var(--rsp-dark, #17304f);
129
- --rsp-selection-range-bg: var(--rsp-light, #f1f7fe) var(--rsp-dark, #14263d);
130
- --rsp-hover-bg: var(--rsp-light, #f5f7fa) var(--rsp-dark, #1c2436);
131
- --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)));
132
155
 
133
156
  /* Danger (delete buttons, invalid input) */
134
- --rsp-danger: var(--rsp-light, #d92d20) var(--rsp-dark, #ff8a80);
135
- --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));
136
159
 
137
160
  /* Tables (consumed by the workbook's inline cell styles) */
138
- --rsp-table-header-bg: var(--rsp-light, #2196f3) var(--rsp-dark, #1c3a5e);
139
- --rsp-table-header-color: var(--rsp-light, #ffffff) var(--rsp-dark, #e8ecf4);
140
- --rsp-table-header-border: var(--rsp-light, #1877c9) var(--rsp-dark, #2a5384);
141
- --rsp-table-even-row-bg: var(--rsp-light, #f7f9fc) var(--rsp-dark, #161e2e);
142
- --rsp-table-odd-row-bg: var(--rsp-light, #ffffff) var(--rsp-dark, #131a28);
143
- --rsp-table-border-color: var(--rsp-light, #2196f3) var(--rsp-dark, #34405c);
144
- --rsp-table-border-light: var(--rsp-light, #dfe4ec) var(--rsp-dark, #2a3346);
145
-
146
- /* Typography */
147
- --rsp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
148
- "Helvetica Neue", Arial, sans-serif;
149
- --rsp-mono-font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
150
- Consolas, "Liberation Mono", monospace;
151
- --rsp-cell-font-size: 12px;
152
- --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);
153
176
 
154
177
  /* Shape + motion */
155
- --rsp-radius: 8px;
156
- --rsp-radius-sm: 5px;
157
- --rsp-cell-padding: 0 7px;
158
- --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));
159
182
 
160
183
  /* Fill handle */
161
- --rsp-fill-handle-size: 8px;
162
- }
163
-
164
- /* Opt-in scheme pins. Applied to `.rsp-root` (or any ancestor) these force one
165
- mode regardless of the OS preference, and every `light-dark()` token below
166
- follows because `color-scheme` inherits. */
167
- .rsp-theme-light {
168
- color-scheme: light;
169
- }
170
-
171
- .rsp-theme-dark {
172
- color-scheme: dark;
184
+ --_rsp-fill-handle-size: var(--rsp-fill-handle-size, 8px);
173
185
  }
174
186
 
175
187
  .rsp-root {
176
188
  /* No `color-scheme` here on purpose: declaring it would override a pin set by
177
- an ancestor. See the file header. */
178
- color: var(--rsp-text);
179
- 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);
180
192
  }
181
193
 
182
194
  .rsp-root *,
@@ -193,9 +205,9 @@
193
205
  position: relative;
194
206
  overflow: hidden;
195
207
  user-select: none;
196
- background: var(--rsp-bg);
197
- color: var(--rsp-text);
198
- font-family: var(--rsp-font-family);
208
+ background: var(--_rsp-bg);
209
+ color: var(--_rsp-text);
210
+ font-family: var(--_rsp-font-family);
199
211
  }
200
212
 
201
213
  .rsp-container:focus {
@@ -203,7 +215,7 @@
203
215
  }
204
216
 
205
217
  .rsp-container.rsp-focused {
206
- box-shadow: inset 0 0 0 1px var(--rsp-accent);
218
+ box-shadow: inset 0 0 0 1px var(--_rsp-accent);
207
219
  }
208
220
 
209
221
  .rsp-canvas,
@@ -218,9 +230,9 @@
218
230
  position: absolute;
219
231
  border: 1px solid transparent;
220
232
  background: transparent;
221
- padding: var(--rsp-cell-padding);
222
- font-size: var(--rsp-cell-font-size);
223
- 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);
224
236
  font-variant-numeric: tabular-nums;
225
237
  overflow: hidden;
226
238
  white-space: pre;
@@ -229,7 +241,7 @@
229
241
  cursor: cell;
230
242
  display: flex;
231
243
  align-items: center;
232
- color: var(--rsp-text);
244
+ color: var(--_rsp-text);
233
245
  box-sizing: border-box;
234
246
  }
235
247
 
@@ -241,17 +253,17 @@
241
253
  /* Hover tint must never repaint a cell the consumer has colored, so it is
242
254
  restricted to "plain" cells (no custom background). */
243
255
  .rsp-cell.rsp-cell-plain:hover {
244
- background: var(--rsp-hover-bg);
256
+ background: var(--_rsp-hover-bg);
245
257
  }
246
258
 
247
259
  /* `rsp-cell-plain` marks cells whose background is not overridden by a
248
260
  consumer-supplied custom style, so selection tinting is safe to apply. */
249
261
  .rsp-cell.rsp-cell-in-selection.rsp-cell-plain {
250
- background: var(--rsp-selection-range-bg);
262
+ background: var(--_rsp-selection-range-bg);
251
263
  }
252
264
 
253
265
  .rsp-cell.rsp-cell-selected.rsp-cell-plain {
254
- background: var(--rsp-selection-bg);
266
+ background: var(--_rsp-selection-bg);
255
267
  }
256
268
 
257
269
  /* The selection perimeter is painted by the selection manager as an inline
@@ -271,11 +283,11 @@
271
283
  .rsp-cell.rsp-cell-editing.rsp-cell-plain,
272
284
  .rsp-cell.rsp-cell-selected.rsp-cell-editing,
273
285
  .rsp-cell.rsp-cell-selected.rsp-cell-editing.rsp-cell-plain {
274
- background: var(--rsp-editor-bg);
275
- color: var(--rsp-text);
286
+ background: var(--_rsp-editor-bg);
287
+ color: var(--_rsp-text);
276
288
  box-shadow:
277
- inset 0 0 0 2px var(--rsp-accent),
278
- 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);
279
291
  z-index: 999;
280
292
  pointer-events: none;
281
293
  }
@@ -288,11 +300,11 @@
288
300
  outline: none;
289
301
  padding: 0;
290
302
  margin: 0;
291
- font-size: var(--rsp-cell-font-size);
292
- font-family: var(--rsp-font-family);
303
+ font-size: var(--_rsp-cell-font-size);
304
+ font-family: var(--_rsp-font-family);
293
305
  background: transparent;
294
- color: var(--rsp-text);
295
- caret-color: var(--rsp-accent);
306
+ color: var(--_rsp-text);
307
+ caret-color: var(--_rsp-accent);
296
308
  resize: none;
297
309
  overflow: hidden;
298
310
  z-index: 1000;
@@ -304,10 +316,10 @@
304
316
  position: absolute;
305
317
  bottom: -1px;
306
318
  right: -1px;
307
- width: var(--rsp-fill-handle-size);
308
- height: var(--rsp-fill-handle-size);
309
- background-color: var(--rsp-accent);
310
- 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);
311
323
  border-radius: 1px;
312
324
  cursor: crosshair;
313
325
  z-index: 3;
@@ -317,65 +329,65 @@
317
329
 
318
330
  .rsp-header {
319
331
  position: absolute;
320
- border: 1px solid var(--rsp-border);
321
- background-color: var(--rsp-header-bg);
332
+ border: 1px solid var(--_rsp-border);
333
+ background-color: var(--_rsp-header-bg);
322
334
  display: flex;
323
335
  align-items: center;
324
336
  justify-content: center;
325
- font-size: var(--rsp-header-font-size);
337
+ font-size: var(--_rsp-header-font-size);
326
338
  font-weight: 500;
327
339
  letter-spacing: 0.02em;
328
340
  cursor: pointer;
329
341
  user-select: none;
330
- color: var(--rsp-header-text);
342
+ color: var(--_rsp-header-text);
331
343
  box-sizing: border-box;
332
- transition: background-color var(--rsp-transition), color var(--rsp-transition);
344
+ transition: background-color var(--_rsp-transition), color var(--_rsp-transition);
333
345
  }
334
346
 
335
347
  .rsp-header:hover {
336
- background-color: var(--rsp-header-active-bg);
337
- color: var(--rsp-text);
348
+ background-color: var(--_rsp-header-active-bg);
349
+ color: var(--_rsp-text);
338
350
  }
339
351
 
340
352
  .rsp-header.rsp-header-selected {
341
- background-color: var(--rsp-header-active-bg);
342
- color: var(--rsp-accent);
353
+ background-color: var(--_rsp-header-active-bg);
354
+ color: var(--_rsp-accent);
343
355
  font-weight: 600;
344
356
  }
345
357
 
346
358
  /* A crisp accent edge on the side that faces the grid marks the active
347
359
  row/column without changing the header's box metrics. */
348
360
  .rsp-header.rsp-header-col.rsp-header-selected {
349
- box-shadow: inset 0 -2px 0 var(--rsp-accent);
361
+ box-shadow: inset 0 -2px 0 var(--_rsp-accent);
350
362
  }
351
363
 
352
364
  .rsp-header.rsp-header-row.rsp-header-selected {
353
- box-shadow: inset -2px 0 0 var(--rsp-accent);
365
+ box-shadow: inset -2px 0 0 var(--_rsp-accent);
354
366
  }
355
367
 
356
368
  .rsp-column-headers,
357
369
  .rsp-row-headers {
358
370
  position: absolute;
359
371
  overflow: hidden;
360
- background-color: var(--rsp-header-bg);
372
+ background-color: var(--_rsp-header-bg);
361
373
  z-index: 1;
362
374
  }
363
375
 
364
376
  .rsp-column-headers {
365
377
  top: 0;
366
- border-bottom: 1px solid var(--rsp-border);
378
+ border-bottom: 1px solid var(--_rsp-border);
367
379
  }
368
380
 
369
381
  .rsp-row-headers {
370
- border-right: 1px solid var(--rsp-border);
382
+ border-right: 1px solid var(--_rsp-border);
371
383
  }
372
384
 
373
385
  .rsp-corner-header {
374
386
  position: absolute;
375
387
  top: 0;
376
388
  left: 0;
377
- background-color: var(--rsp-corner-bg);
378
- border: 1px solid var(--rsp-corner-border);
389
+ background-color: var(--_rsp-corner-bg);
390
+ border: 1px solid var(--_rsp-corner-border);
379
391
  z-index: 20;
380
392
  }
381
393
 
@@ -401,7 +413,7 @@
401
413
 
402
414
  .rsp-col-resize-handle:hover,
403
415
  .rsp-row-resize-handle:hover {
404
- background: var(--rsp-accent);
416
+ background: var(--_rsp-accent);
405
417
  }
406
418
 
407
419
  /* Overlays --------------------------------------------------------- */
@@ -421,9 +433,9 @@
421
433
  position: absolute;
422
434
  opacity: 0.5;
423
435
  pointer-events: none;
424
- border: 2px dashed var(--rsp-accent);
425
- border-radius: var(--rsp-radius-sm);
426
- 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);
427
439
  }
428
440
 
429
441
  .rsp-overlay-placeholder-label {
@@ -431,7 +443,7 @@
431
443
  top: 50%;
432
444
  left: 50%;
433
445
  transform: translate(-50%, -50%);
434
- color: var(--rsp-accent);
446
+ color: var(--_rsp-accent);
435
447
  font-weight: 600;
436
448
  font-size: 14px;
437
449
  white-space: nowrap;
@@ -447,9 +459,9 @@
447
459
  flex-direction: column;
448
460
  height: 100%;
449
461
  width: 100%;
450
- background: var(--rsp-bg);
451
- color: var(--rsp-text);
452
- font-family: var(--rsp-font-family);
462
+ background: var(--_rsp-bg);
463
+ color: var(--_rsp-text);
464
+ font-family: var(--_rsp-font-family);
453
465
  }
454
466
 
455
467
  .rsp-workbook-header {
@@ -457,8 +469,8 @@
457
469
  align-items: center;
458
470
  gap: 8px;
459
471
  padding: 7px 10px;
460
- border-bottom: 1px solid var(--rsp-border);
461
- background: var(--rsp-header-bg);
472
+ border-bottom: 1px solid var(--_rsp-border);
473
+ background: var(--_rsp-header-bg);
462
474
  flex: none;
463
475
  }
464
476
 
@@ -466,7 +478,7 @@
466
478
  font-weight: 600;
467
479
  font-size: 12px;
468
480
  letter-spacing: -0.01em;
469
- color: var(--rsp-text);
481
+ color: var(--_rsp-text);
470
482
  white-space: nowrap;
471
483
  }
472
484
 
@@ -481,8 +493,8 @@
481
493
  align-items: center;
482
494
  gap: 6px;
483
495
  padding: 6px 10px;
484
- border-top: 1px solid var(--rsp-border);
485
- background: var(--rsp-header-bg);
496
+ border-top: 1px solid var(--_rsp-border);
497
+ background: var(--_rsp-header-bg);
486
498
  flex: none;
487
499
  }
488
500
 
@@ -500,36 +512,36 @@
500
512
  gap: 6px;
501
513
  padding: 5px 11px;
502
514
  border: 1px solid transparent;
503
- border-radius: var(--rsp-radius-sm);
515
+ border-radius: var(--_rsp-radius-sm);
504
516
  font-size: 12px;
505
517
  line-height: 1.4;
506
518
  cursor: pointer;
507
519
  white-space: nowrap;
508
- color: var(--rsp-header-text);
520
+ color: var(--_rsp-header-text);
509
521
  background: transparent;
510
- transition: background-color var(--rsp-transition), color var(--rsp-transition);
522
+ transition: background-color var(--_rsp-transition), color var(--_rsp-transition);
511
523
  }
512
524
 
513
525
  .rsp-sheet-tab:hover {
514
- background: var(--rsp-hover-bg);
515
- color: var(--rsp-text);
526
+ background: var(--_rsp-hover-bg);
527
+ color: var(--_rsp-text);
516
528
  }
517
529
 
518
530
  .rsp-sheet-tab.rsp-sheet-tab-active {
519
- background: var(--rsp-accent);
531
+ background: var(--_rsp-accent);
520
532
  border-color: transparent;
521
- color: var(--rsp-accent-contrast);
533
+ color: var(--_rsp-accent-contrast);
522
534
  font-weight: 600;
523
535
  }
524
536
 
525
537
  /* Icon buttons inside the active tab must read against the accent fill. */
526
538
  .rsp-sheet-tab.rsp-sheet-tab-active .rsp-icon-button {
527
- color: var(--rsp-accent-contrast);
539
+ color: var(--_rsp-accent-contrast);
528
540
  }
529
541
 
530
542
  .rsp-sheet-tab.rsp-sheet-tab-active .rsp-icon-button:hover {
531
543
  background: rgba(255, 255, 255, 0.22);
532
- color: var(--rsp-accent-contrast);
544
+ color: var(--_rsp-accent-contrast);
533
545
  }
534
546
 
535
547
  /* Per-tab action buttons reveal on hover / when the tab is active. */
@@ -538,7 +550,7 @@
538
550
  align-items: center;
539
551
  gap: 2px;
540
552
  opacity: 0;
541
- transition: opacity var(--rsp-transition);
553
+ transition: opacity var(--_rsp-transition);
542
554
  }
543
555
 
544
556
  .rsp-sheet-tab:hover .sheet-tab-actions,
@@ -549,14 +561,14 @@
549
561
 
550
562
  .rsp-sheet-tab-input {
551
563
  font: inherit;
552
- color: var(--rsp-text);
553
- background: var(--rsp-editor-bg);
554
- border: 1px solid var(--rsp-accent);
555
- 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);
556
568
  padding: 2px 6px;
557
569
  min-width: 80px;
558
570
  outline: none;
559
- box-shadow: 0 0 0 3px var(--rsp-focus-ring);
571
+ box-shadow: 0 0 0 3px var(--_rsp-focus-ring);
560
572
  }
561
573
 
562
574
  .rsp-icon-button {
@@ -567,18 +579,18 @@
567
579
  height: 22px;
568
580
  padding: 0;
569
581
  border: none;
570
- border-radius: var(--rsp-radius-sm);
582
+ border-radius: var(--_rsp-radius-sm);
571
583
  background: transparent;
572
- color: var(--rsp-muted-text);
584
+ color: var(--_rsp-muted-text);
573
585
  cursor: pointer;
574
586
  font-size: 14px;
575
587
  line-height: 1;
576
- transition: background-color var(--rsp-transition), color var(--rsp-transition);
588
+ transition: background-color var(--_rsp-transition), color var(--_rsp-transition);
577
589
  }
578
590
 
579
591
  .rsp-icon-button:hover {
580
- background: var(--rsp-hover-bg);
581
- color: var(--rsp-text);
592
+ background: var(--_rsp-hover-bg);
593
+ color: var(--_rsp-text);
582
594
  }
583
595
 
584
596
  .rsp-icon-button:disabled {
@@ -587,8 +599,8 @@
587
599
  }
588
600
 
589
601
  .rsp-icon-button.rsp-icon-button-delete:hover {
590
- background: var(--rsp-danger-bg);
591
- color: var(--rsp-danger);
602
+ background: var(--_rsp-danger-bg);
603
+ color: var(--_rsp-danger);
592
604
  }
593
605
 
594
606
  .rsp-add-sheet-button {
@@ -598,20 +610,20 @@
598
610
  gap: 4px;
599
611
  height: 26px;
600
612
  padding: 0 11px;
601
- border: 1px dashed var(--rsp-border);
602
- border-radius: var(--rsp-radius-sm);
613
+ border: 1px dashed var(--_rsp-border);
614
+ border-radius: var(--_rsp-radius-sm);
603
615
  background: transparent;
604
- color: var(--rsp-header-text);
616
+ color: var(--_rsp-header-text);
605
617
  font-size: 12px;
606
618
  cursor: pointer;
607
619
  white-space: nowrap;
608
- transition: border-color var(--rsp-transition), color var(--rsp-transition);
620
+ transition: border-color var(--_rsp-transition), color var(--_rsp-transition);
609
621
  }
610
622
 
611
623
  .rsp-add-sheet-button:hover {
612
- border-color: var(--rsp-accent);
624
+ border-color: var(--_rsp-accent);
613
625
  border-style: solid;
614
- color: var(--rsp-accent);
626
+ color: var(--_rsp-accent);
615
627
  }
616
628
 
617
629
  .rsp-zoom-controls {
@@ -626,7 +638,7 @@
626
638
  min-width: 44px;
627
639
  text-align: center;
628
640
  font-size: 11px;
629
- color: var(--rsp-muted-text);
641
+ color: var(--_rsp-muted-text);
630
642
  font-variant-numeric: tabular-nums;
631
643
  }
632
644
 
@@ -637,44 +649,44 @@
637
649
  align-items: center;
638
650
  gap: 8px;
639
651
  padding: 6px 10px;
640
- border-bottom: 1px solid var(--rsp-border);
641
- background: var(--rsp-bg);
652
+ border-bottom: 1px solid var(--_rsp-border);
653
+ background: var(--_rsp-bg);
642
654
  flex: none;
643
655
  }
644
656
 
645
657
  .rsp-name-box {
646
658
  min-width: 84px;
647
659
  padding: 4px 8px;
648
- border: 1px solid var(--rsp-border);
649
- border-radius: var(--rsp-radius-sm);
650
- background: var(--rsp-header-bg);
651
- 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);
652
664
  font-size: 11px;
653
665
  text-align: center;
654
- color: var(--rsp-text);
666
+ color: var(--_rsp-text);
655
667
  }
656
668
 
657
669
  .rsp-formula-input {
658
670
  flex: 1;
659
671
  min-width: 0;
660
672
  padding: 4px 9px;
661
- border: 1px solid var(--rsp-border);
662
- border-radius: var(--rsp-radius-sm);
663
- background: var(--rsp-editor-bg);
664
- color: var(--rsp-text);
665
- 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);
666
678
  font-size: 12px;
667
- transition: border-color var(--rsp-transition), box-shadow var(--rsp-transition);
679
+ transition: border-color var(--_rsp-transition), box-shadow var(--_rsp-transition);
668
680
  }
669
681
 
670
682
  .rsp-formula-input::placeholder {
671
- color: var(--rsp-muted-text);
683
+ color: var(--_rsp-muted-text);
672
684
  }
673
685
 
674
686
  .rsp-formula-input:focus {
675
687
  outline: none;
676
- border-color: var(--rsp-accent);
677
- 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);
678
690
  }
679
691
 
680
692
  .rsp-formula-input:disabled {
@@ -685,7 +697,7 @@
685
697
  /* Scrollbars ------------------------------------------------------- */
686
698
 
687
699
  .rsp-root {
688
- scrollbar-color: var(--rsp-border) transparent;
700
+ scrollbar-color: var(--_rsp-border) transparent;
689
701
  }
690
702
 
691
703
  .rsp-root ::-webkit-scrollbar {
@@ -698,11 +710,11 @@
698
710
  }
699
711
 
700
712
  .rsp-root ::-webkit-scrollbar-thumb {
701
- background: var(--rsp-border);
702
- border: 2px solid var(--rsp-bg);
713
+ background: var(--_rsp-border);
714
+ border: 2px solid var(--_rsp-bg);
703
715
  border-radius: 99px;
704
716
  }
705
717
 
706
718
  .rsp-root ::-webkit-scrollbar-thumb:hover {
707
- background: var(--rsp-muted-text);
719
+ background: var(--_rsp-muted-text);
708
720
  }