canvasxpress-cli 70.5.0 → 70.7.0

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/canvasXpress.css +1735 -541
  3. package/src/canvasXpress.js +3 -3
package/src/canvasXpress.css CHANGED
@@ -1,6 +1,118 @@
1
1
  @charset "UTF-8";
2
2
  /* @category: shared */
3
3
 
4
+ /*
5
+ * GENERATED by tools/ui-consistency/gen-token-css.mjs from tools/ui-consistency/tokens.json.
6
+ * Do not edit by hand: change tokens.json and regenerate.
7
+ * Spec: docs/architecture/widgets/ui-design-tokens.md
8
+ */
9
+
10
+ :root {
11
+ /* color */
12
+ --cx-color-white: #ffffff;
13
+ --cx-color-black: #000000;
14
+ --cx-color-gray-25: #f7f8fa;
15
+ --cx-color-gray-50: #f2f4f7;
16
+ --cx-color-gray-100: #e6e8ec;
17
+ --cx-color-gray-200: #d0d4da;
18
+ --cx-color-gray-300: #b9c0cb;
19
+ --cx-color-gray-400: #8a9099;
20
+ --cx-color-gray-500: #6b7280;
21
+ --cx-color-gray-600: #57606a;
22
+ --cx-color-gray-700: #3a414c;
23
+ --cx-color-gray-800: #2a2f36;
24
+ --cx-color-gray-850: #23262d;
25
+ --cx-color-gray-900: #1b1e24;
26
+ --cx-color-gray-950: #0e1013;
27
+ --cx-color-indigo-100: #dce2ff;
28
+ --cx-color-indigo-300: #8a99ff;
29
+ --cx-color-indigo-400: #7b8cff;
30
+ --cx-color-indigo-500: #5369ff;
31
+ --cx-color-indigo-600: #3d58ff;
32
+ --cx-color-indigo-700: #2f44d6;
33
+ --cx-color-indigo-a10: rgba(83, 105, 255, 0.1);
34
+ --cx-color-indigo-a20: rgba(83, 105, 255, 0.2);
35
+ --cx-color-indigo-dark-a20: rgba(123, 140, 255, 0.2);
36
+ --cx-color-blue-300: #8cc4f2;
37
+ --cx-color-blue-400: #4c9fe0;
38
+ --cx-color-blue-500: #087ad1;
39
+ --cx-color-blue-700: #065fa3;
40
+ --cx-color-blue-a15: rgba(8, 122, 209, 0.15);
41
+ --cx-color-red-50: #fce8e6;
42
+ --cx-color-red-400: #f07167;
43
+ --cx-color-red-600: #c0392b;
44
+ --cx-color-green-50: #e6f4ea;
45
+ --cx-color-green-400: #4caf50;
46
+ --cx-color-green-700: #2e7d32;
47
+ --cx-color-amber-50: #fff7e0;
48
+ --cx-color-amber-300: #fcd34d;
49
+ --cx-color-amber-500: #b26a00;
50
+ --cx-color-amber-800: #92400e;
51
+ --cx-color-black-a35: rgba(0, 0, 0, 0.35);
52
+ --cx-color-black-a55: rgba(0, 0, 0, 0.55);
53
+ /* radius */
54
+ --cx-radius-none: 0;
55
+ --cx-radius-sm: 4px;
56
+ --cx-radius-md: 6px;
57
+ --cx-radius-lg: 10px;
58
+ --cx-radius-pill: 999px;
59
+ --cx-radius-round: 50%;
60
+ /* space */
61
+ --cx-space-0: 0;
62
+ --cx-space-1: 2px;
63
+ --cx-space-2: 4px;
64
+ --cx-space-3: 6px;
65
+ --cx-space-4: 8px;
66
+ --cx-space-5: 10px;
67
+ --cx-space-6: 12px;
68
+ --cx-space-7: 16px;
69
+ --cx-space-8: 20px;
70
+ --cx-space-9: 24px;
71
+ --cx-space-10: 32px;
72
+ /* font */
73
+ --cx-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
74
+ --cx-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
75
+ /* fontSize */
76
+ --cx-font-size-xs: 11px;
77
+ --cx-font-size-sm: 12px;
78
+ --cx-font-size-md: 13px;
79
+ --cx-font-size-lg: 14px;
80
+ --cx-font-size-xl: 16px;
81
+ --cx-font-size-2xl: 20px;
82
+ /* fontWeight */
83
+ --cx-font-weight-regular: 400;
84
+ --cx-font-weight-medium: 500;
85
+ --cx-font-weight-bold: 700;
86
+ /* lineHeight */
87
+ --cx-line-height-tight: 1.2;
88
+ --cx-line-height-base: 1.45;
89
+ --cx-line-height-loose: 1.6;
90
+ /* shadow */
91
+ --cx-shadow-1: 0 2px 8px rgba(0, 0, 0, 0.12);
92
+ --cx-shadow-2: 0 4px 16px rgba(0, 0, 0, 0.18);
93
+ --cx-shadow-3: 0 4px 20px rgba(0, 0, 0, 0.3);
94
+ /* duration */
95
+ --cx-duration-fast: 0.15s;
96
+ --cx-duration-base: 0.3s;
97
+ --cx-duration-slow: 0.5s;
98
+ /* z */
99
+ --cx-z-behind: -1;
100
+ --cx-z-base: 1;
101
+ --cx-z-raised: 10;
102
+ --cx-z-toolbar: 1000;
103
+ --cx-z-toolbar-edge: 1001;
104
+ --cx-z-resizer: 2000;
105
+ --cx-z-fullscreen: 9999;
106
+ --cx-z-panel: 10000;
107
+ --cx-z-panel-active: 10001;
108
+ --cx-z-popover: 10002;
109
+ --cx-z-popover-high: 10006;
110
+ --cx-z-modal: 100000;
111
+ --cx-z-modal-popover: 100001;
112
+ --cx-z-tooltip: 1000000;
113
+ }
114
+ /* @category: shared */
115
+
4
116
  /*
5
117
  * Favorite Colors
6
118
  * rgb(51, 122, 183) - #337ab7
@@ -8,6 +120,62 @@
8
120
  * rgb(83, 105, 255) - #5369ff
9
121
  */
10
122
 
123
+ /*
124
+ * Semantic UI roles (--cx-ui-*), the base theme. Components move onto these in P3; a
125
+ * dataUIStyle preset overrides the roles it owns on each chart wrapper (setUIColors). The
126
+ * primitives they reference are in 00-tokens-primitive.css. Spec:
127
+ * docs/architecture/widgets/ui-design-tokens.md
128
+ */
129
+ /* GEN:semantic-light -- generated from tools/ui-consistency/tokens.json by gen-token-css.mjs; do not edit */
130
+ :root {
131
+ --cx-ui-surface: var(--cx-color-white);
132
+ --cx-ui-surface-alt: var(--cx-color-gray-25);
133
+ --cx-ui-surface-sunken: var(--cx-color-gray-50);
134
+ --cx-ui-surface-raised: var(--cx-color-white);
135
+ --cx-ui-chrome: var(--cx-color-white);
136
+ --cx-ui-chrome-border: var(--cx-color-gray-100);
137
+ --cx-ui-on-chrome: var(--cx-color-gray-900);
138
+ --cx-ui-chrome-strong: var(--cx-color-white);
139
+ --cx-ui-on-chrome-strong: var(--cx-color-gray-900);
140
+ --cx-ui-text: var(--cx-color-gray-900);
141
+ --cx-ui-text-muted: var(--cx-color-gray-600);
142
+ --cx-ui-text-subtle: var(--cx-color-gray-400);
143
+ --cx-ui-border: var(--cx-color-gray-200);
144
+ --cx-ui-border-subtle: var(--cx-color-gray-100);
145
+ --cx-ui-divider: var(--cx-color-gray-100);
146
+ --cx-ui-border-accent: var(--cx-color-indigo-500);
147
+ --cx-ui-accent: var(--cx-color-indigo-500);
148
+ --cx-ui-accent-strong: var(--cx-color-indigo-600);
149
+ --cx-ui-accent-hover: var(--cx-color-indigo-700);
150
+ --cx-ui-accent-tint: var(--cx-color-indigo-a20);
151
+ --cx-ui-accent-tint-subtle: var(--cx-color-indigo-a10);
152
+ --cx-ui-on-accent: var(--cx-color-white);
153
+ --cx-ui-focus: var(--cx-color-indigo-600);
154
+ --cx-ui-info: var(--cx-color-blue-500);
155
+ --cx-ui-info-strong: var(--cx-color-blue-700);
156
+ --cx-ui-info-tint: var(--cx-color-blue-a15);
157
+ --cx-ui-danger: var(--cx-color-red-600);
158
+ --cx-ui-danger-tint: var(--cx-color-red-50);
159
+ --cx-ui-success: var(--cx-color-green-700);
160
+ --cx-ui-success-tint: var(--cx-color-green-50);
161
+ --cx-ui-warning: var(--cx-color-amber-500);
162
+ --cx-ui-warning-strong: var(--cx-color-amber-800);
163
+ --cx-ui-warning-tint: var(--cx-color-amber-50);
164
+ --cx-ui-backdrop: var(--cx-color-black-a35);
165
+ --cx-ui-scrollbar-track: var(--cx-color-white);
166
+ --cx-ui-scrollbar-track-alt: var(--cx-color-gray-50);
167
+ --cx-ui-scrollbar-thumb: var(--cx-color-gray-200);
168
+ --cx-ui-scrollbar-thumb-hover: var(--cx-color-gray-400);
169
+ --cx-ui-control-on: var(--cx-color-indigo-500);
170
+ --cx-ui-active-cell: var(--cx-color-indigo-100);
171
+ --cx-ui-code-key: rgb(215, 48, 39);
172
+ --cx-ui-code-value: rgb(69, 117, 180);
173
+ --cx-ui-code-string: rgb(168, 82, 2);
174
+ --cx-ui-code-boolean: rgb(102, 102, 0);
175
+ --cx-ui-code-comment: rgb(58, 115, 0);
176
+ }
177
+ /* /GEN:semantic-light */
178
+
11
179
  :root {
12
180
  /* Colors */
13
181
  --cx-color-red: rgb(255, 0, 0);
@@ -20,175 +188,86 @@
20
188
  --cx-color-gray: rgb(128, 128, 128);
21
189
  --cx-color-black: rgb(0, 0, 0);
22
190
  --cx-color-transparent: rgba(0, 0, 0, 0);
23
- /* Greys */
24
- --cx-color-extra-dark-gray: rgb(34, 34, 34);
25
- --cx-color-dark-gray: rgb(64, 64, 64);
26
- --cx-color-medium-gray: rgb(180, 180, 180);
191
+ /* Greys (extra-dark, dark and medium gray were removed in 70.7: use the --cx-color-gray-*
192
+ scale in 00-tokens-primitive.css) */
27
193
  --cx-color-light-gray: rgb(204, 204, 204);
28
194
  --cx-color-extra-light-gray: rgb(238, 238, 238);
29
- /* Icons - Not used but just to remember */
30
- --cx-icon-class-a: #5369ff;
31
- --cx-icon-class-b: #292929;
32
- --cx-icon-class-c: #999999;
33
- --cx-icon-class-r: #ff0000;
34
- /* Coding colors */
35
- --cx-code-key: rgb(215, 48, 39);
36
- --cx-code-value: rgb(69, 117, 180);
37
- --cx-code-string: rgb(168, 82, 2);
38
- --cx-code-number: rgb(69, 117, 180);
39
- --cx-code-boolean: rgb(102, 102, 0);
40
- --cx-code-null: rgb(69, 117, 180);
41
- --cx-code-comment: rgb(58, 115, 0);
195
+ /* Coding colors: the --cx-ui-code-* roles (light and dark). --cx-code-key / -value / -string /
196
+ -boolean / -comment are read as override hooks in 03-code.css; -number and -null were never used. */
42
197
  /* Favorite UI colors */
43
198
  --cx-color-ui-background: rgb(255, 255, 255);
44
199
  --cx-color-ui-font: rgb(34, 34, 34);
45
- --cx-color-widgets: rgb(83, 105, 255);
46
- --cx-color-widgets-hover: rgba(83, 105, 255, 0.1);
47
- /* Favorite UI Styles - Not used but just to remember */
48
- --cx-color-modern: rgb(83, 105, 255);
49
- --cx-color-modern-hover: rgba(83, 105, 255, 0.1) ;
50
- --cx-color-stripped: rgb(230, 230, 230) ;
51
- --cx-color-stripped-hover: rgba(180, 180, 180, 0.3);
52
- --cx-color-old: linear-gradient(rgb(240, 240, 240), rgb(230, 230, 230));
53
- --cx-color-old-hover: rgba(230,230,230,0.1);
54
- --cx-color-bms: rgb(190, 43, 187);
55
- --cx-color-bms-hover: rgba(190, 43, 187, 0.1);
56
- --cx-color-bms2: rgb(89, 84, 84);
57
- --cx-color-bms2-hover: rgba(89, 84, 84, 0.1);
58
- --cx-color-colorful: rgb(106, 27, 154);
59
- --cx-color-colorful-hover: rgba(106, 27, 154, 0.1);
60
200
  /* Font */
61
201
  --cx-x-small-font-size: 11px;
62
202
  --cx-small-font-size: 12px;
63
203
  --cx-medium-font-size: 13px;
64
- --cx-font-size: 15px;
65
204
  --cx-large-font-size: 16px;
66
205
  --cx-x-large-font-size: 17px;
67
- --cx-font-color: var(--cx-color-ui-font);
68
- --cx-font: var(--cx-font-size) var(--cx-font-family);
69
206
  --cx-large-font: var(--cx-large-font-size) var(--cx-font-family);
70
207
  --cx-x-large-font: var(--cx-x-large-font-size) var(--cx-font-family);
71
- --cx-font-bold: bold var(--cx-font-size) var(--cx-font-family);
72
208
  --cx-large-font-bold: bold var(--cx-large-font-size) var(--cx-font-family);
73
209
  --cx-x-large-font-bold: bold var(--cx-x-large-font-size) var(--cx-font-family);
74
- --cx-font-italic: italic var(--cx-font-size) var(--cx-font-family);
75
210
  --cx-large-font-italic: italic var(--cx-large-font-size) var(--cx-font-family);
76
211
  --cx-x-large-font-italic: italic var(--cx-x-large-font-size) var(--cx-font-family);
77
212
  --cx-small-font-italic: italic var(--cx-small-font-size) var(--cx-font-family);
78
213
  /* Background */
79
- --cx-background-widgets-color: var(--cx-color-ui-background);
80
- --cx-background-color: var(--cx-color-widgets);
81
- --cx-background-hover-color: var(--cx-color-widgets-hover);
82
- --cx-background-border-hover-color: var(--cx-color-white);
83
- --cx-background-accent-color: var(--cx-color-widgets-hover);
84
- --cx-background-contrast-color: var(--cx-background-color);
85
214
  /* Border */
86
- --cx-border: var(--cx-border-width) var(--cx-border-style) var(--cx-color-widgets);
87
215
  /* Callouts */
88
216
  --cx-callout-size: 8px;
89
217
  --cx-callout-radius: 10px;
90
218
  --cx-callout-border-width: 1px;
91
219
  --cx-callout-background-color: var(--cx-color-ui-background);
92
- --cx-callout-border-color: var(--cx-color-widgets);
93
220
  /* Transitions */
94
221
  --cx-transition-speed: 0.5s;
95
222
  /* UI: These are the exposed variables */
96
223
  --cx-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif !important;
97
- --cx-border-radius: 5px;
98
224
  --cx-border-width: 1px;
99
225
  --cx-border-style: solid;
100
226
  --cx-border-transparent: var(--cx-border-width) var(--cx-border-style) var(--cx-color-transparent);
101
227
  /* Scrollbar */
102
- --cx-scrollbar-background-color: rgb(255, 255, 255);
103
- --cx-scrollbar-alt-background-color: rgb(245, 245, 245);
104
- --cx-scrollbar-thumb-color: #aaaaaa;
105
- --cx-scrollbar-thumb-hover-color: #888888;
106
228
  /* Customizer */
107
- --cx-customizer-close-background-color: rgb(8, 122, 209);
108
- --cx-customizer-close-text-color: rgb(255, 255, 255);
109
- --cx-customizer-background-color: rgb(255, 255, 255);
110
- --cx-customizer-border-color: rgb(8, 122, 209);
111
- --cx-customizer-text-color: #555b62;
112
- --cx-customizer-font-size: 12px;
113
- --cx-customizer-hover-color: rgba(124, 182, 226, 0.2);
114
229
  /* Data Filter */
115
- --cx-toggle-switch-background-color: rgb(8, 122, 209);
116
- --cx-datafilter-background-color: #ffffff;
117
- --cx-datafilter-border-color: #087ad1;
118
- --cx-datafilter-toolbar-background-color: #cccccc;
119
- --cx-datafilter-text-color: #555b62;
120
- --cx-datafilter-font-size: 12px;
121
- --cx-datafilter-hover-color: rgba(124, 182, 226, 0.2);
122
230
  /* Context Menu */
123
- --cx-context-menu-background-color: #ffffff;
124
- --cx-context-menu-border-color: #087ad1;
125
- --cx-context-menu-text-color: #555b62;
126
- --cx-context-menu-font-size: 11px;
127
- --cx-context-menu-hover-color: rgba(124, 182, 226, 0.2);
128
231
  /* Data Table */
129
- --cx-datatable-accent-color: rgb(8, 122, 209);
130
- --cx-datatable-background-color: rgb(255, 255, 255);
131
- --cx-datatable-border-color: rgb(8, 122, 209);
132
- --cx-datatable-banner-background-color: rgb(255, 255, 255);
133
- --cx-datatable-banner-border-color: rgb(215, 226, 230);
134
- --cx-datatable-banner-text-color: rgb(85, 91, 98);
135
- --cx-datatable-toolbar-border-color: rgb(215, 226, 230);
136
- --cx-datatable-header-background-color: rgb(255, 255, 255);
137
- --cx-datatable-header-text-color: rgb(85, 91, 98);
138
- --cx-datatable-cell-background-color: rgb(255, 255, 255);
139
- --cx-datatable-oddcell-background-color: rgb(247, 248, 249);
140
- --cx-datatable-cell-border-color: rgb(215, 226, 230);
141
- --cx-datatable-cell-text-color: rgb(85, 91, 98);
142
- --cx-datatable-activecell-border-color: rgb(124, 182, 226);
143
- --cx-datatable-status-background-color: rgb(255, 255, 255);
144
- --cx-datatable-status-border-color: rgb(215, 226, 230);
145
- --cx-datatable-status-text-color: rgb(85, 91, 98);
146
- --cx-datatable-pagination-background-color: rgb(255, 255, 255);
147
- --cx-datatable-pagination-border-color: rgb(215, 226, 230);
148
- --cx-datatable-pagination-text-color: rgb(85, 91, 98);
149
- --cx-datatable-cell-hover-background-color: rgba(124, 182, 226, 0.2);
150
- --cx-datatable-row-hover-background-color: rgba(124, 182, 226, 0.2);
151
232
  --cx-datatable-toolbar-font-size: 14px;
152
233
  --cx-datatable-header-font-size: 15px;
153
234
  --cx-datatable-body-font-size: 15px;
154
235
  --cx-datatable-cell-font-size: 15px;
155
236
  --cx-datatable-cell-font-family: var(--cx-font-family);
156
237
  /* Workflow */
157
- --cx-workflow-background-color: #ffffff;
158
- --cx-workflow-border-color: rgb(215, 226, 230);
159
- --cx-workflow-text-color: #555b62;
160
- --cx-workflow-hover-color: rgba(124, 182, 226, 0.2);
161
- --cx-workflow-active-color: rgba(124, 182, 226, 0.2);
162
- --cx-workflow-slider-track-color: rgb(215, 226, 230);
163
- --cx-workflow-slider-fill-color: rgb(8, 122, 209);
164
- --cx-workflow-slider-thumb-color: rgb(8, 122, 209);
165
- --cx-workflow-slider-thumb-border-color: #ffffff;
166
- --cx-workflow-list-label-font-size: 10px;
167
- --cx-workflow-list-tick-font-size: 6px;
168
- --cx-workflow-list-text-color: #555b62;
169
- --cx-workflow-list-tick-color: rgb(215, 226, 230);
170
- --cx-workflow-button-background-color: #ffffff;
171
- --cx-workflow-button-border-color: rgb(215, 226, 230);
172
- --cx-workflow-timeline-border-color: rgb(215, 226, 230);
173
238
  }
174
239
 
175
- *,
176
- :after,
177
- :before {
240
+ /*
241
+ * Scoped to CanvasXpress DOM (plan D4). These used to be page-wide rules that restyled the host
242
+ * page; :where() keeps their specificity exactly as it was (zero for the scope part).
243
+ */
244
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *),
245
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *)::after,
246
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *)::before {
178
247
  box-sizing: border-box;
179
248
  }
180
249
 
181
- input[type="color"]::-webkit-color-swatch-wrapper {
250
+ :where([data-cx-ui-scope]) input[type="color"]::-webkit-color-swatch-wrapper {
182
251
  padding: 0;
183
252
  }
184
253
 
185
- input[type="color"]::-webkit-color-swatch {
254
+ :where([data-cx-ui-scope]) input[type="color"]::-webkit-color-swatch {
186
255
  border: none;
187
256
  }
188
257
 
189
- .unselectable,
190
- img,
191
- svg,
258
+ /*
259
+ * Native controls (select, textarea, color input) follow the CHART's UI theme, not the host page:
260
+ * a dark page (e.g. Bootstrap data-bs-theme="dark") sets color-scheme: dark on <html>, which painted
261
+ * the light Customizer's selects dark. Zero specificity and ahead of 01b-theme-dark.css, so a dark
262
+ * or auto chart (or a dark container) still switches them to dark.
263
+ */
264
+ :where([data-cx-ui-scope]) {
265
+ color-scheme: light;
266
+ }
267
+
268
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).unselectable,
269
+ :where([data-cx-ui-scope]) img,
270
+ :where([data-cx-ui-scope]) svg,
192
271
  .cX-Toolbar-Font,
193
272
  .cX-Toolbar-Round,
194
273
  .cX-Toolbar-Stripe,
@@ -244,6 +323,271 @@ div.cX-Toolbar-Help {
244
323
  /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
245
324
  }
246
325
 
326
+ /*
327
+ * Derived properties: declared on every UI-token scope, not only :root. A custom property that
328
+ * references another resolves where it is DECLARED, so on :root alone these would read the page
329
+ * defaults instead of the chart's dataUIStyle (setUIColors writes a chart's tokens on its
330
+ * cX-DOM root and on its <body>-level dialogs/menus, each marked data-cx-ui-scope), nor under a
331
+ * dark-theme container (01b-theme-dark.css).
332
+ */
333
+ :root,
334
+ [data-cx-ui-scope],
335
+ [data-cx-ui-theme] {
336
+ --cx-font: var(--cx-font-size) var(--cx-font-family);
337
+ --cx-font-bold: bold var(--cx-font-size) var(--cx-font-family);
338
+ --cx-font-italic: italic var(--cx-font-size) var(--cx-font-family);
339
+ --cx-callout-border-color: var(--cx-color-widgets, var(--cx-ui-accent));
340
+ }
341
+
342
+ /*
343
+ * "colorful" per-item accents in the dark theme (per-style dark accents plan, P3): setItemAccent
344
+ * writes each item's palette pair and its dark counterpart inline and marks the item; a dark
345
+ * subtree swaps the pair, so every rule reading --cx-item-accent follows. !important is the only
346
+ * thing that beats the inline pair.
347
+ */
348
+ [data-cx-ui-theme="dark"] [data-cx-item-accent] {
349
+ --cx-item-accent: var(--cx-item-dark-accent) !important;
350
+ --cx-item-accent-bg: var(--cx-item-dark-accent-bg) !important;
351
+ }
352
+
353
+ /* GEN:legacy-defaults -- generated from tools/ui-consistency/presets-runtime.json (the default
354
+ dataUIStyle, modern) by gen-token-css.mjs; do not edit. Outside any chart only: each chart
355
+ writes its own preset on its cX-DOM root. */
356
+ :root {
357
+ --cx-border-radius: 5px;
358
+ --cx-color: normal 15px system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
359
+ --cx-color-bold: bold 15px system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
360
+ --cx-color-italic: italic 15px system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
361
+ --cx-context-menu-font-size: 13px;
362
+ --cx-customizer-font-size: 12px;
363
+ --cx-datafilter-font-size: 12px;
364
+ --cx-font-size: 15px;
365
+ --cx-workflow-list-label-font-size: 10px;
366
+ --cx-workflow-list-tick-font-size: 6px;
367
+ }
368
+ /* /GEN:legacy-defaults */
369
+ @charset "UTF-8";
370
+ /* @category: shared */
371
+
372
+ /*
373
+ * GENERATED by tools/ui-consistency/gen-token-css.mjs from tools/ui-consistency/tokens.json.
374
+ * Do not edit by hand: change tokens.json and regenerate.
375
+ * Spec: docs/architecture/widgets/ui-design-tokens.md
376
+ */
377
+
378
+ /* The default dark accents, read by setUIColors as the contrast targets for each chart's own
379
+ dark accent (--cx-ui-dark-accent*, tokens.json darkAccent). */
380
+ :root {
381
+ --cx-ui-dark-ref-surface: var(--cx-color-gray-900);
382
+ --cx-ui-dark-ref-accent: var(--cx-color-indigo-400);
383
+ --cx-ui-dark-ref-accent-strong: var(--cx-color-indigo-300);
384
+ --cx-ui-dark-ref-accent-tint: var(--cx-color-indigo-dark-a20);
385
+ }
386
+
387
+ /* A light container re-establishes the light roles for its own chrome, e.g. a light dashboard
388
+ on a page that is dark. (A chart root keeps its preset: its inline roles win here.) */
389
+ :where([data-cx-ui-theme="light"]) {
390
+ color-scheme: light;
391
+ --cx-ui-surface: var(--cx-color-white);
392
+ --cx-ui-surface-alt: var(--cx-color-gray-25);
393
+ --cx-ui-surface-sunken: var(--cx-color-gray-50);
394
+ --cx-ui-surface-raised: var(--cx-color-white);
395
+ --cx-ui-chrome: var(--cx-color-white);
396
+ --cx-ui-chrome-border: var(--cx-color-gray-100);
397
+ --cx-ui-on-chrome: var(--cx-color-gray-900);
398
+ --cx-ui-chrome-strong: var(--cx-color-white);
399
+ --cx-ui-on-chrome-strong: var(--cx-color-gray-900);
400
+ --cx-ui-text: var(--cx-color-gray-900);
401
+ --cx-ui-text-muted: var(--cx-color-gray-600);
402
+ --cx-ui-text-subtle: var(--cx-color-gray-400);
403
+ --cx-ui-border: var(--cx-color-gray-200);
404
+ --cx-ui-border-subtle: var(--cx-color-gray-100);
405
+ --cx-ui-divider: var(--cx-color-gray-100);
406
+ --cx-ui-border-accent: var(--cx-color-indigo-500);
407
+ --cx-ui-accent: var(--cx-color-indigo-500);
408
+ --cx-ui-accent-strong: var(--cx-color-indigo-600);
409
+ --cx-ui-accent-hover: var(--cx-color-indigo-700);
410
+ --cx-ui-accent-tint: var(--cx-color-indigo-a20);
411
+ --cx-ui-accent-tint-subtle: var(--cx-color-indigo-a10);
412
+ --cx-ui-on-accent: var(--cx-color-white);
413
+ --cx-ui-focus: var(--cx-color-indigo-600);
414
+ --cx-ui-info: var(--cx-color-blue-500);
415
+ --cx-ui-info-strong: var(--cx-color-blue-700);
416
+ --cx-ui-info-tint: var(--cx-color-blue-a15);
417
+ --cx-ui-danger: var(--cx-color-red-600);
418
+ --cx-ui-danger-tint: var(--cx-color-red-50);
419
+ --cx-ui-success: var(--cx-color-green-700);
420
+ --cx-ui-success-tint: var(--cx-color-green-50);
421
+ --cx-ui-warning: var(--cx-color-amber-500);
422
+ --cx-ui-warning-strong: var(--cx-color-amber-800);
423
+ --cx-ui-warning-tint: var(--cx-color-amber-50);
424
+ --cx-ui-backdrop: var(--cx-color-black-a35);
425
+ --cx-ui-scrollbar-track: var(--cx-color-white);
426
+ --cx-ui-scrollbar-track-alt: var(--cx-color-gray-50);
427
+ --cx-ui-scrollbar-thumb: var(--cx-color-gray-200);
428
+ --cx-ui-scrollbar-thumb-hover: var(--cx-color-gray-400);
429
+ --cx-ui-control-on: var(--cx-color-indigo-500);
430
+ --cx-ui-active-cell: var(--cx-color-indigo-100);
431
+ --cx-ui-code-key: rgb(215, 48, 39);
432
+ --cx-ui-code-value: rgb(69, 117, 180);
433
+ --cx-ui-code-string: rgb(168, 82, 2);
434
+ --cx-ui-code-boolean: rgb(102, 102, 0);
435
+ --cx-ui-code-comment: rgb(58, 115, 0);
436
+ }
437
+
438
+ @media (prefers-color-scheme: light) {
439
+ :where([data-cx-ui-theme="auto"]) {
440
+ color-scheme: light;
441
+ --cx-ui-surface: var(--cx-color-white);
442
+ --cx-ui-surface-alt: var(--cx-color-gray-25);
443
+ --cx-ui-surface-sunken: var(--cx-color-gray-50);
444
+ --cx-ui-surface-raised: var(--cx-color-white);
445
+ --cx-ui-chrome: var(--cx-color-white);
446
+ --cx-ui-chrome-border: var(--cx-color-gray-100);
447
+ --cx-ui-on-chrome: var(--cx-color-gray-900);
448
+ --cx-ui-chrome-strong: var(--cx-color-white);
449
+ --cx-ui-on-chrome-strong: var(--cx-color-gray-900);
450
+ --cx-ui-text: var(--cx-color-gray-900);
451
+ --cx-ui-text-muted: var(--cx-color-gray-600);
452
+ --cx-ui-text-subtle: var(--cx-color-gray-400);
453
+ --cx-ui-border: var(--cx-color-gray-200);
454
+ --cx-ui-border-subtle: var(--cx-color-gray-100);
455
+ --cx-ui-divider: var(--cx-color-gray-100);
456
+ --cx-ui-border-accent: var(--cx-color-indigo-500);
457
+ --cx-ui-accent: var(--cx-color-indigo-500);
458
+ --cx-ui-accent-strong: var(--cx-color-indigo-600);
459
+ --cx-ui-accent-hover: var(--cx-color-indigo-700);
460
+ --cx-ui-accent-tint: var(--cx-color-indigo-a20);
461
+ --cx-ui-accent-tint-subtle: var(--cx-color-indigo-a10);
462
+ --cx-ui-on-accent: var(--cx-color-white);
463
+ --cx-ui-focus: var(--cx-color-indigo-600);
464
+ --cx-ui-info: var(--cx-color-blue-500);
465
+ --cx-ui-info-strong: var(--cx-color-blue-700);
466
+ --cx-ui-info-tint: var(--cx-color-blue-a15);
467
+ --cx-ui-danger: var(--cx-color-red-600);
468
+ --cx-ui-danger-tint: var(--cx-color-red-50);
469
+ --cx-ui-success: var(--cx-color-green-700);
470
+ --cx-ui-success-tint: var(--cx-color-green-50);
471
+ --cx-ui-warning: var(--cx-color-amber-500);
472
+ --cx-ui-warning-strong: var(--cx-color-amber-800);
473
+ --cx-ui-warning-tint: var(--cx-color-amber-50);
474
+ --cx-ui-backdrop: var(--cx-color-black-a35);
475
+ --cx-ui-scrollbar-track: var(--cx-color-white);
476
+ --cx-ui-scrollbar-track-alt: var(--cx-color-gray-50);
477
+ --cx-ui-scrollbar-thumb: var(--cx-color-gray-200);
478
+ --cx-ui-scrollbar-thumb-hover: var(--cx-color-gray-400);
479
+ --cx-ui-control-on: var(--cx-color-indigo-500);
480
+ --cx-ui-active-cell: var(--cx-color-indigo-100);
481
+ --cx-ui-code-key: rgb(215, 48, 39);
482
+ --cx-ui-code-value: rgb(69, 117, 180);
483
+ --cx-ui-code-string: rgb(168, 82, 2);
484
+ --cx-ui-code-boolean: rgb(102, 102, 0);
485
+ --cx-ui-code-comment: rgb(58, 115, 0);
486
+ }
487
+ }
488
+
489
+ /* The dark theme: the semantic roles for data-cx-ui-theme="dark" (and "auto" on a dark OS). */
490
+ :where([data-cx-ui-theme="dark"],
491
+ [data-cx-ui-theme="dark"] [data-cx-ui-scope]:not([data-cx-ui-theme="light"]):not([data-cx-ui-theme="auto"])) {
492
+ color-scheme: dark;
493
+ --cx-ui-surface: var(--cx-color-gray-900) !important;
494
+ --cx-ui-surface-alt: var(--cx-color-gray-850) !important;
495
+ --cx-ui-surface-sunken: var(--cx-color-gray-950) !important;
496
+ --cx-ui-surface-raised: var(--cx-color-gray-850) !important;
497
+ --cx-ui-chrome: var(--cx-color-gray-850) !important;
498
+ --cx-ui-chrome-border: var(--cx-color-gray-800) !important;
499
+ --cx-ui-on-chrome: var(--cx-color-gray-100) !important;
500
+ --cx-ui-chrome-strong: var(--cx-color-gray-850) !important;
501
+ --cx-ui-on-chrome-strong: var(--cx-color-gray-100) !important;
502
+ --cx-ui-text: var(--cx-color-gray-100) !important;
503
+ --cx-ui-text-muted: var(--cx-color-gray-400) !important;
504
+ --cx-ui-text-subtle: var(--cx-color-gray-500) !important;
505
+ --cx-ui-border: var(--cx-color-gray-700) !important;
506
+ --cx-ui-border-subtle: var(--cx-color-gray-800) !important;
507
+ --cx-ui-divider: var(--cx-color-gray-800) !important;
508
+ --cx-ui-border-accent: var(--cx-ui-dark-accent, var(--cx-color-indigo-400)) !important;
509
+ --cx-ui-accent: var(--cx-ui-dark-accent, var(--cx-color-indigo-400)) !important;
510
+ --cx-ui-accent-strong: var(--cx-ui-dark-accent-strong, var(--cx-color-indigo-300)) !important;
511
+ --cx-ui-accent-hover: var(--cx-ui-dark-accent, var(--cx-color-indigo-400)) !important;
512
+ --cx-ui-accent-tint: var(--cx-ui-dark-accent-tint, var(--cx-color-indigo-dark-a20)) !important;
513
+ --cx-ui-accent-tint-subtle: var(--cx-ui-dark-accent-tint, var(--cx-color-indigo-dark-a20)) !important;
514
+ --cx-ui-on-accent: var(--cx-color-gray-950) !important;
515
+ --cx-ui-focus: var(--cx-ui-dark-accent-strong, var(--cx-color-indigo-300)) !important;
516
+ --cx-ui-info: var(--cx-color-blue-400) !important;
517
+ --cx-ui-info-strong: var(--cx-color-blue-300) !important;
518
+ --cx-ui-info-tint: var(--cx-color-blue-a15) !important;
519
+ --cx-ui-danger: var(--cx-color-red-400) !important;
520
+ --cx-ui-danger-tint: rgba(240, 113, 103, 0.15) !important;
521
+ --cx-ui-success: var(--cx-color-green-400) !important;
522
+ --cx-ui-success-tint: rgba(76, 175, 80, 0.15) !important;
523
+ --cx-ui-warning: var(--cx-color-amber-300) !important;
524
+ --cx-ui-warning-strong: var(--cx-color-amber-300) !important;
525
+ --cx-ui-warning-tint: rgba(252, 211, 77, 0.12) !important;
526
+ --cx-ui-backdrop: var(--cx-color-black-a55) !important;
527
+ --cx-ui-scrollbar-track: var(--cx-color-gray-900) !important;
528
+ --cx-ui-scrollbar-track-alt: var(--cx-color-gray-850) !important;
529
+ --cx-ui-scrollbar-thumb: var(--cx-color-gray-700) !important;
530
+ --cx-ui-scrollbar-thumb-hover: var(--cx-color-gray-500) !important;
531
+ --cx-ui-control-on: var(--cx-ui-dark-accent, var(--cx-color-indigo-400)) !important;
532
+ --cx-ui-active-cell: var(--cx-ui-dark-accent, var(--cx-color-indigo-400)) !important;
533
+ --cx-ui-code-key: #ff7b72 !important;
534
+ --cx-ui-code-value: #79c0ff !important;
535
+ --cx-ui-code-string: #ffa657 !important;
536
+ --cx-ui-code-boolean: #e3d26f !important;
537
+ --cx-ui-code-comment: #7ee787 !important;
538
+ }
539
+
540
+ @media (prefers-color-scheme: dark) {
541
+ :where([data-cx-ui-theme="auto"],
542
+ [data-cx-ui-theme="auto"] [data-cx-ui-scope]:not([data-cx-ui-theme="light"]):not([data-cx-ui-theme="dark"])) {
543
+ color-scheme: dark;
544
+ --cx-ui-surface: var(--cx-color-gray-900) !important;
545
+ --cx-ui-surface-alt: var(--cx-color-gray-850) !important;
546
+ --cx-ui-surface-sunken: var(--cx-color-gray-950) !important;
547
+ --cx-ui-surface-raised: var(--cx-color-gray-850) !important;
548
+ --cx-ui-chrome: var(--cx-color-gray-850) !important;
549
+ --cx-ui-chrome-border: var(--cx-color-gray-800) !important;
550
+ --cx-ui-on-chrome: var(--cx-color-gray-100) !important;
551
+ --cx-ui-chrome-strong: var(--cx-color-gray-850) !important;
552
+ --cx-ui-on-chrome-strong: var(--cx-color-gray-100) !important;
553
+ --cx-ui-text: var(--cx-color-gray-100) !important;
554
+ --cx-ui-text-muted: var(--cx-color-gray-400) !important;
555
+ --cx-ui-text-subtle: var(--cx-color-gray-500) !important;
556
+ --cx-ui-border: var(--cx-color-gray-700) !important;
557
+ --cx-ui-border-subtle: var(--cx-color-gray-800) !important;
558
+ --cx-ui-divider: var(--cx-color-gray-800) !important;
559
+ --cx-ui-border-accent: var(--cx-ui-dark-accent, var(--cx-color-indigo-400)) !important;
560
+ --cx-ui-accent: var(--cx-ui-dark-accent, var(--cx-color-indigo-400)) !important;
561
+ --cx-ui-accent-strong: var(--cx-ui-dark-accent-strong, var(--cx-color-indigo-300)) !important;
562
+ --cx-ui-accent-hover: var(--cx-ui-dark-accent, var(--cx-color-indigo-400)) !important;
563
+ --cx-ui-accent-tint: var(--cx-ui-dark-accent-tint, var(--cx-color-indigo-dark-a20)) !important;
564
+ --cx-ui-accent-tint-subtle: var(--cx-ui-dark-accent-tint, var(--cx-color-indigo-dark-a20)) !important;
565
+ --cx-ui-on-accent: var(--cx-color-gray-950) !important;
566
+ --cx-ui-focus: var(--cx-ui-dark-accent-strong, var(--cx-color-indigo-300)) !important;
567
+ --cx-ui-info: var(--cx-color-blue-400) !important;
568
+ --cx-ui-info-strong: var(--cx-color-blue-300) !important;
569
+ --cx-ui-info-tint: var(--cx-color-blue-a15) !important;
570
+ --cx-ui-danger: var(--cx-color-red-400) !important;
571
+ --cx-ui-danger-tint: rgba(240, 113, 103, 0.15) !important;
572
+ --cx-ui-success: var(--cx-color-green-400) !important;
573
+ --cx-ui-success-tint: rgba(76, 175, 80, 0.15) !important;
574
+ --cx-ui-warning: var(--cx-color-amber-300) !important;
575
+ --cx-ui-warning-strong: var(--cx-color-amber-300) !important;
576
+ --cx-ui-warning-tint: rgba(252, 211, 77, 0.12) !important;
577
+ --cx-ui-backdrop: var(--cx-color-black-a55) !important;
578
+ --cx-ui-scrollbar-track: var(--cx-color-gray-900) !important;
579
+ --cx-ui-scrollbar-track-alt: var(--cx-color-gray-850) !important;
580
+ --cx-ui-scrollbar-thumb: var(--cx-color-gray-700) !important;
581
+ --cx-ui-scrollbar-thumb-hover: var(--cx-color-gray-500) !important;
582
+ --cx-ui-control-on: var(--cx-ui-dark-accent, var(--cx-color-indigo-400)) !important;
583
+ --cx-ui-active-cell: var(--cx-ui-dark-accent, var(--cx-color-indigo-400)) !important;
584
+ --cx-ui-code-key: #ff7b72 !important;
585
+ --cx-ui-code-value: #79c0ff !important;
586
+ --cx-ui-code-string: #ffa657 !important;
587
+ --cx-ui-code-boolean: #e3d26f !important;
588
+ --cx-ui-code-comment: #7ee787 !important;
589
+ }
590
+ }
247
591
  /* @category: shared */
248
592
  /*****************
249
593
  * SVG No border *
@@ -262,7 +606,7 @@ svg.cX-DataFilter-Toolbar-ImageNB {
262
606
  margin: 5px 8px 0px 0px !important;
263
607
  }
264
608
 
265
- svg > * {
609
+ :where([data-cx-ui-scope]) svg > * {
266
610
  pointer-events: none;
267
611
  }
268
612
 
@@ -282,7 +626,7 @@ svg.cX-DataTable-Toolbar-Image-Logo {
282
626
 
283
627
  svg.cX-code {
284
628
  border-radius: var(--cx-border-radius);
285
- border: var(--cx-border) !important;
629
+ border: var(--cx-border, 1px solid var(--cx-ui-border-accent)) !important;
286
630
  padding: 5px;
287
631
  }
288
632
 
@@ -290,14 +634,14 @@ svg.cX-code {
290
634
  * draggable *
291
635
  ***************/
292
636
 
293
- .draggable {
637
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).draggable {
294
638
  cursor: move;
295
639
  cursor: grab;
296
640
  cursor: -moz-grab;
297
641
  cursor: -webkit-grab;
298
642
  }
299
643
 
300
- .draggable:active {
644
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).draggable:active {
301
645
  cursor: grabbing;
302
646
  cursor: -moz-grabbing;
303
647
  cursor: -webkit-grabbing;
@@ -307,9 +651,9 @@ svg.cX-code {
307
651
  * Hover / Active *
308
652
  *****************/
309
653
 
310
- .simulate-hover {
311
- border-color: var(--cx-background-border-hover-color) !important;
312
- background: var(--cx-background-hover-color) !important;
654
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).simulate-hover {
655
+ border-color: var(--cx-background-border-hover-color, var(--cx-ui-surface)) !important;
656
+ background: var(--cx-background-hover-color, var(--cx-ui-accent-tint)) !important;
313
657
  }
314
658
 
315
659
  /*****************
@@ -321,7 +665,7 @@ svg.cX-code {
321
665
  top: 50%;
322
666
  left: 50%;
323
667
  transform: translate(-50%, -50%);
324
- z-index: 100000;
668
+ z-index: var(--cx-z-modal);
325
669
  display: none;
326
670
  text-align: center;
327
671
  color: rgb(83, 105, 255);
@@ -350,58 +694,260 @@ svg.cX-code {
350
694
  }
351
695
  }
352
696
 
697
+ /* Dark theme: the loader and its spinner take the chart's dark accent (the light theme keeps the
698
+ literals above; per-style dark accents plan, P3) */
699
+ [data-cx-ui-theme="dark"] .cX-Loader {
700
+ color: var(--cx-ui-accent);
701
+ }
702
+
703
+ [data-cx-ui-theme="dark"] .cX-Loader-Spinner {
704
+ border-top-color: var(--cx-ui-accent);
705
+ }
706
+
707
+ /*
708
+ * Dark theme (P7): the icon colour classes carry light literals (icons.js, and the dataUIStyle's
709
+ * via changeSVGIconColors, written into each icon's <style>), so a dark subtree re-points the UI
710
+ * ones onto the dark roles: accent to the accent, near-black to the text, the icons' white inner
711
+ * fills to the surface. Attribute + class outranks the icon's own class rule. Classes that depict
712
+ * something (palette swatches cl*, theme tiles) keep their colours.
713
+ */
714
+ [data-cx-ui-theme="dark"] .cxa,
715
+ [data-cx-ui-theme="dark"] .cxa1,
716
+ [data-cx-ui-theme="dark"] .cxa3,
717
+ [data-cx-ui-theme="dark"] .cxtxa,
718
+ [data-cx-ui-theme="dark"] .cxblue,
719
+ [data-cx-ui-theme="dark"] .cxac {
720
+ stroke: var(--cx-ui-accent);
721
+ }
722
+
723
+ [data-cx-ui-theme="dark"] .cxa0 {
724
+ fill: var(--cx-ui-accent);
725
+ }
726
+
727
+ [data-cx-ui-theme="dark"] .cxa2,
728
+ [data-cx-ui-theme="dark"] .cxaa {
729
+ stroke: var(--cx-ui-accent);
730
+ fill: var(--cx-ui-accent);
731
+ }
732
+
733
+ [data-cx-ui-theme="dark"] .cxb,
734
+ [data-cx-ui-theme="dark"] .cxb3,
735
+ [data-cx-ui-theme="dark"] .cxbc,
736
+ [data-cx-ui-theme="dark"] .cxtxb,
737
+ [data-cx-ui-theme="dark"] .cursor2 {
738
+ stroke: var(--cx-ui-text);
739
+ }
740
+
741
+ [data-cx-ui-theme="dark"] .cxb0,
742
+ [data-cx-ui-theme="dark"] .cursor3 {
743
+ fill: var(--cx-ui-text);
744
+ }
745
+
746
+ [data-cx-ui-theme="dark"] .cxb2,
747
+ [data-cx-ui-theme="dark"] .cxbb {
748
+ stroke: var(--cx-ui-text);
749
+ fill: var(--cx-ui-text);
750
+ }
751
+
752
+ [data-cx-ui-theme="dark"] .cxab {
753
+ stroke: var(--cx-ui-accent);
754
+ fill: var(--cx-ui-text);
755
+ }
756
+
757
+ [data-cx-ui-theme="dark"] .cxaw {
758
+ stroke: var(--cx-ui-accent);
759
+ fill: var(--cx-ui-surface);
760
+ }
761
+
762
+ [data-cx-ui-theme="dark"] .cxbw {
763
+ stroke: var(--cx-ui-text);
764
+ fill: var(--cx-ui-surface);
765
+ }
766
+
767
+ /*
768
+ * Glyph icons (letters, #, +/-: font size/style buttons, Columns, spinners) use text classes that
769
+ * set only a font, so <text> falls back to its default black fill and vanishes on a dark surface.
770
+ * Give them the text role. cxtbw100 is deliberately white and is left alone.
771
+ */
772
+ [data-cx-ui-theme="dark"] .cxtb100,
773
+ [data-cx-ui-theme="dark"] .cxtn10,
774
+ [data-cx-ui-theme="dark"] .cxtn20,
775
+ [data-cx-ui-theme="dark"] .cxtn30,
776
+ [data-cx-ui-theme="dark"] .cxtn40,
777
+ [data-cx-ui-theme="dark"] .cxtn50,
778
+ [data-cx-ui-theme="dark"] .cxtn60,
779
+ [data-cx-ui-theme="dark"] .cxtn70,
780
+ [data-cx-ui-theme="dark"] .cxtn80,
781
+ [data-cx-ui-theme="dark"] .cxtn90,
782
+ [data-cx-ui-theme="dark"] .cxtn100,
783
+ [data-cx-ui-theme="dark"] .cxtn120,
784
+ [data-cx-ui-theme="dark"] .cxtn140,
785
+ [data-cx-ui-theme="dark"] .cxtn160,
786
+ [data-cx-ui-theme="dark"] .cxtn180,
787
+ [data-cx-ui-theme="dark"] .cxti85,
788
+ [data-cx-ui-theme="dark"] .cxti100,
789
+ [data-cx-ui-theme="dark"] .cxts60,
790
+ [data-cx-ui-theme="dark"] .cxts70,
791
+ [data-cx-ui-theme="dark"] .cxts80,
792
+ [data-cx-ui-theme="dark"] .cxts90,
793
+ [data-cx-ui-theme="dark"] .cxts100,
794
+ [data-cx-ui-theme="dark"] .cxts150,
795
+ [data-cx-ui-theme="dark"] .cxts200 {
796
+ fill: var(--cx-ui-text);
797
+ }
798
+
799
+ /* The muted #999 grey (e.g. the margin grid) is too dim on a dark surface: use the muted text role. */
800
+ [data-cx-ui-theme="dark"] .cxc {
801
+ stroke: var(--cx-ui-text-muted);
802
+ }
803
+
804
+ [data-cx-ui-theme="dark"] .cxcc {
805
+ stroke: var(--cx-ui-text-muted);
806
+ fill: var(--cx-ui-text-muted);
807
+ }
808
+
809
+ @media (prefers-color-scheme: dark) {
810
+ [data-cx-ui-theme="auto"] .cxa,
811
+ [data-cx-ui-theme="auto"] .cxa1,
812
+ [data-cx-ui-theme="auto"] .cxa3,
813
+ [data-cx-ui-theme="auto"] .cxtxa,
814
+ [data-cx-ui-theme="auto"] .cxblue,
815
+ [data-cx-ui-theme="auto"] .cxac {
816
+ stroke: var(--cx-ui-accent);
817
+ }
818
+
819
+ [data-cx-ui-theme="auto"] .cxa0 {
820
+ fill: var(--cx-ui-accent);
821
+ }
822
+
823
+ [data-cx-ui-theme="auto"] .cxa2,
824
+ [data-cx-ui-theme="auto"] .cxaa {
825
+ stroke: var(--cx-ui-accent);
826
+ fill: var(--cx-ui-accent);
827
+ }
828
+
829
+ [data-cx-ui-theme="auto"] .cxb,
830
+ [data-cx-ui-theme="auto"] .cxb3,
831
+ [data-cx-ui-theme="auto"] .cxbc,
832
+ [data-cx-ui-theme="auto"] .cxtxb,
833
+ [data-cx-ui-theme="auto"] .cursor2 {
834
+ stroke: var(--cx-ui-text);
835
+ }
836
+
837
+ [data-cx-ui-theme="auto"] .cxb0,
838
+ [data-cx-ui-theme="auto"] .cursor3 {
839
+ fill: var(--cx-ui-text);
840
+ }
841
+
842
+ [data-cx-ui-theme="auto"] .cxb2,
843
+ [data-cx-ui-theme="auto"] .cxbb {
844
+ stroke: var(--cx-ui-text);
845
+ fill: var(--cx-ui-text);
846
+ }
847
+
848
+ [data-cx-ui-theme="auto"] .cxab {
849
+ stroke: var(--cx-ui-accent);
850
+ fill: var(--cx-ui-text);
851
+ }
852
+
853
+ [data-cx-ui-theme="auto"] .cxaw {
854
+ stroke: var(--cx-ui-accent);
855
+ fill: var(--cx-ui-surface);
856
+ }
857
+
858
+ [data-cx-ui-theme="auto"] .cxbw {
859
+ stroke: var(--cx-ui-text);
860
+ fill: var(--cx-ui-surface);
861
+ }
862
+
863
+ [data-cx-ui-theme="auto"] .cxtb100,
864
+ [data-cx-ui-theme="auto"] .cxtn10,
865
+ [data-cx-ui-theme="auto"] .cxtn20,
866
+ [data-cx-ui-theme="auto"] .cxtn30,
867
+ [data-cx-ui-theme="auto"] .cxtn40,
868
+ [data-cx-ui-theme="auto"] .cxtn50,
869
+ [data-cx-ui-theme="auto"] .cxtn60,
870
+ [data-cx-ui-theme="auto"] .cxtn70,
871
+ [data-cx-ui-theme="auto"] .cxtn80,
872
+ [data-cx-ui-theme="auto"] .cxtn90,
873
+ [data-cx-ui-theme="auto"] .cxtn100,
874
+ [data-cx-ui-theme="auto"] .cxtn120,
875
+ [data-cx-ui-theme="auto"] .cxtn140,
876
+ [data-cx-ui-theme="auto"] .cxtn160,
877
+ [data-cx-ui-theme="auto"] .cxtn180,
878
+ [data-cx-ui-theme="auto"] .cxti85,
879
+ [data-cx-ui-theme="auto"] .cxti100,
880
+ [data-cx-ui-theme="auto"] .cxts60,
881
+ [data-cx-ui-theme="auto"] .cxts70,
882
+ [data-cx-ui-theme="auto"] .cxts80,
883
+ [data-cx-ui-theme="auto"] .cxts90,
884
+ [data-cx-ui-theme="auto"] .cxts100,
885
+ [data-cx-ui-theme="auto"] .cxts150,
886
+ [data-cx-ui-theme="auto"] .cxts200 {
887
+ fill: var(--cx-ui-text);
888
+ }
889
+
890
+ [data-cx-ui-theme="auto"] .cxc {
891
+ stroke: var(--cx-ui-text-muted);
892
+ }
893
+
894
+ [data-cx-ui-theme="auto"] .cxcc {
895
+ stroke: var(--cx-ui-text-muted);
896
+ fill: var(--cx-ui-text-muted);
897
+ }
898
+ }
353
899
  /* @category: widget */
354
900
  /*****************
355
901
  * Code *
356
902
  *****************/
357
903
 
358
904
  .cX-Code-Key {
359
- color: var(--cx-code-key);
905
+ color: var(--cx-code-key, var(--cx-ui-code-key));
360
906
  font-weight: bold;
361
907
  }
362
908
 
363
909
  .cX-Code-Value,
364
910
  .cX-Code-Number,
365
911
  .cX-Code-Null {
366
- color: var(--cx-code-value);
912
+ color: var(--cx-code-value, var(--cx-ui-code-value));
367
913
  }
368
914
 
369
915
  .cX-Code-String {
370
- color: var(--cx-code-string);
916
+ color: var(--cx-code-string, var(--cx-ui-code-string));
371
917
  }
372
918
 
373
919
  .cX-Code-Boolean {
374
- color: var(--cx-code-boolean);
920
+ color: var(--cx-code-boolean, var(--cx-ui-code-boolean));
375
921
  }
376
922
 
377
923
  .cX-Code-Comment {
378
- color: var(--cx-code-comment);
924
+ color: var(--cx-code-comment, var(--cx-ui-code-comment));
379
925
  }
380
926
 
381
927
  .cX-Container-Code {
382
- z-index: 100000;
928
+ z-index: var(--cx-z-modal);
383
929
  background: transparent;
384
930
  }
385
931
 
386
932
  div.cX-Code {
387
- border: var(--cx-border);
933
+ border: var(--cx-border, 1px solid var(--cx-ui-border-accent));
388
934
  border-radius: var(--cx-border-radius);
389
- background-color: var(--cx-color-extra-light-gray);
390
- color: var(--cx-font-color);
935
+ background-color: var(--cx-ui-surface-sunken);
936
+ color: var(--cx-font-color, var(--cx-ui-text));
391
937
  font: var(--cx-font);
392
938
  margin: 2px 3px;
393
939
  padding: 10px 20px 20px 10px;
394
940
  position: absolute;
395
941
  white-space: nowrap;
396
942
  overflow: hidden;
397
- z-index: 10000;
943
+ z-index: var(--cx-z-panel);
398
944
  }
399
945
 
400
946
  .cX-Code-Container {
401
947
  clear: both;
402
948
  width: 600px;
403
949
  overflow: auto;
404
- background-color: var(--cx-color-white);
950
+ background-color: var(--cx-ui-surface);
405
951
  position: relative;
406
952
  top: 10px;
407
953
  }
@@ -435,10 +981,10 @@ div.cX-Code {
435
981
  resize: none;
436
982
  top: 5px;
437
983
  left: 20px;
438
- background-color: var(--cx-color-extra-light-gray);
984
+ background-color: var(--cx-ui-surface-sunken);
439
985
  overflow: hidden;
440
986
  white-space: nowrap;
441
- color: var(--cx-color-red);
987
+ color: var(--cx-ui-danger);
442
988
  position: relative;
443
989
  cursor: pointer;
444
990
  }
@@ -475,9 +1021,9 @@ div.cX-Code {
475
1021
  content: counter(listing) " ";
476
1022
  display: inline-block;
477
1023
  width: 3em;
478
- border-right: 1px solid rgb(221, 221, 221);
1024
+ border-right: 1px solid var(--cx-ui-border);
479
1025
  text-align: right;
480
- background-color: var(--cx-color-extra-light-gray);
1026
+ background-color: var(--cx-ui-surface-sunken);
481
1027
  }
482
1028
 
483
1029
  /* @category: widget */
@@ -486,10 +1032,13 @@ div.cX-Code {
486
1032
  ******************/
487
1033
 
488
1034
  .cX-Container-Chat {
1035
+ /* was inheriting the host page's font (serif in a bare page) */
1036
+ color: var(--cx-ui-text);
1037
+ font-family: var(--cx-font-sans);
489
1038
  height: fit-content;
490
1039
  opacity: 0;
491
1040
  visibility: hidden;
492
- background: #ffffff;
1041
+ background: var(--cx-ui-surface);
493
1042
  transition: all var(--cx-transition-speed) ease;
494
1043
  width: 100%;
495
1044
  display: none;
@@ -511,9 +1060,9 @@ div.cX-Chat {
511
1060
  width: 100%;
512
1061
  max-width: 900px;
513
1062
  background: white;
514
- border: 1px solid #cbd5e1;
1063
+ border: 1px solid var(--cx-ui-border);
515
1064
  border-radius: var(--cx-border-radius);
516
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
1065
+ box-shadow: var(--cx-shadow-1);
517
1066
  overflow: hidden;
518
1067
  margin-top: 2px;
519
1068
  }
@@ -521,14 +1070,14 @@ div.cX-Chat {
521
1070
  .cX-Chat-Toolbar-Container {
522
1071
  width: 100%;
523
1072
  height: 35px;
524
- background: #f8fafc;
525
- border-bottom: 1px solid #e2e8f0;
1073
+ background: var(--cx-ui-surface-sunken);
1074
+ border-bottom: 1px solid var(--cx-ui-border);
526
1075
  display: flex;
527
1076
  align-items: center;
528
1077
  justify-content: space-between;
529
1078
  padding: 0 10px;
530
1079
  box-sizing: border-box;
531
- color: #475569;
1080
+ color: var(--cx-ui-text-muted);
532
1081
  }
533
1082
 
534
1083
  .cX-Chat-Toolbar-Container .cX-Chat-Left-Toolbar-Container,
@@ -541,12 +1090,12 @@ div.cX-Chat {
541
1090
  .cX-Chat-Configurator-Container {
542
1091
  display: none;
543
1092
  width: 100%;
544
- background: #f1f5f9;
545
- border-bottom: 1px solid #e2e8f0;
1093
+ background: var(--cx-ui-surface-sunken);
1094
+ border-bottom: 1px solid var(--cx-ui-border);
546
1095
  padding: 4px 20px;
547
1096
  box-sizing: border-box;
548
1097
  font-size: medium;
549
- color: #475569;
1098
+ color: var(--cx-ui-text-muted);
550
1099
  align-items: center;
551
1100
  gap: 8px;
552
1101
  }
@@ -562,7 +1111,7 @@ div.cX-Chat {
562
1111
  display: flex;
563
1112
  width: 100%;
564
1113
  min-height: 100px;
565
- background: #ffffff;
1114
+ background: var(--cx-ui-surface);
566
1115
  pointer-events: none;
567
1116
  }
568
1117
 
@@ -584,7 +1133,7 @@ div.cX-Chat {
584
1133
  }
585
1134
 
586
1135
  .cX-Chat-Messages-Container:has(.cX-Chat-Messages:not(:empty)) {
587
- border-top: var(--cx-border);
1136
+ border-top: var(--cx-border, 1px solid var(--cx-ui-border-accent));
588
1137
  }
589
1138
 
590
1139
  .cX-Chat-Messages {
@@ -598,8 +1147,8 @@ div.cX-Chat {
598
1147
  position: fixed;
599
1148
  width: 500px;
600
1149
  height: 400px;
601
- background-color: var(--cx-background-widgets-color);
602
- border: var(--cx-border);
1150
+ background-color: var(--cx-background-widgets-color, var(--cx-ui-surface));
1151
+ border: var(--cx-border, 1px solid var(--cx-ui-border-accent));
603
1152
  border-radius: var(--cx-border-radius);
604
1153
  z-index: 10005;
605
1154
  box-sizing: border-box;
@@ -608,7 +1157,7 @@ div.cX-Chat {
608
1157
  overflow: hidden;
609
1158
  cursor: move;
610
1159
  resize: both;
611
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
1160
+ box-shadow: var(--cx-shadow-2);
612
1161
  }
613
1162
 
614
1163
  .cX-Chat-Html-Panel-Header {
@@ -616,8 +1165,8 @@ div.cX-Chat {
616
1165
  align-items: center;
617
1166
  justify-content: space-between;
618
1167
  padding: 6px 10px;
619
- background: var(--cx-background-color);
620
- border-bottom: var(--cx-border);
1168
+ background: var(--cx-background-color, var(--cx-ui-scrollbar-thumb));
1169
+ border-bottom: var(--cx-border, 1px solid var(--cx-ui-border-accent));
621
1170
  flex-shrink: 0;
622
1171
  user-select: none;
623
1172
  }
@@ -654,8 +1203,8 @@ svg.cX-Chat-Html-Panel-Close {
654
1203
  font-size: var(--cx-large-font-size);
655
1204
  line-height: 1.6;
656
1205
  color: var(--cx-color-ui-font);
657
- background: var(--cx-background-widgets-color);
658
- border: var(--cx-border);
1206
+ background: var(--cx-background-widgets-color, var(--cx-ui-surface));
1207
+ border: var(--cx-border, 1px solid var(--cx-ui-border-accent));
659
1208
  border-radius: var(--cx-border-radius);
660
1209
  padding: 16px 20px;
661
1210
  margin: 10px;
@@ -667,8 +1216,8 @@ svg.cX-Chat-Html-Panel-Close {
667
1216
  font-size: var(--cx-large-font-size);
668
1217
  font-weight: 600;
669
1218
  margin: 0 0 10px;
670
- color: var(--cx-color-widgets);
671
- border-bottom: var(--cx-border);
1219
+ color: var(--cx-color-widgets, var(--cx-ui-accent));
1220
+ border-bottom: var(--cx-border, 1px solid var(--cx-ui-border-accent));
672
1221
  padding-bottom: 6px;
673
1222
  }
674
1223
 
@@ -679,16 +1228,16 @@ svg.cX-Chat-Html-Panel-Close {
679
1228
  .cX-Chat-LLM-Response code {
680
1229
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
681
1230
  font-size: var(--cx-small-font-size);
682
- background: var(--cx-background-widgets-color);
683
- border: var(--cx-border);
1231
+ background: var(--cx-background-widgets-color, var(--cx-ui-surface));
1232
+ border: var(--cx-border, 1px solid var(--cx-ui-border-accent));
684
1233
  border-radius: var(--cx-border-radius);
685
1234
  padding: 1px 5px;
686
1235
  color: var(--cx-color-ui-font);
687
1236
  }
688
1237
 
689
1238
  .cX-Chat-LLM-Response pre {
690
- background: var(--cx-background-widgets-color);
691
- border: var(--cx-border);
1239
+ background: var(--cx-background-widgets-color, var(--cx-ui-surface));
1240
+ border: var(--cx-border, 1px solid var(--cx-ui-border-accent));
692
1241
  border-radius: var(--cx-border-radius);
693
1242
  padding: 12px 14px;
694
1243
  overflow-x: auto;
@@ -733,12 +1282,12 @@ svg.cX-Chat-Html-Panel-Close {
733
1282
  .cX-Chat-LLM-Links {
734
1283
  margin-top: 12px;
735
1284
  padding-top: 8px;
736
- border-top: var(--cx-border);
1285
+ border-top: var(--cx-border, 1px solid var(--cx-ui-border-accent));
737
1286
  font-size: var(--cx-medium-font-size);
738
1287
  }
739
1288
 
740
1289
  .cX-Chat-LLM-Links a {
741
- color: var(--cx-color-widgets);
1290
+ color: var(--cx-color-widgets, var(--cx-ui-accent));
742
1291
  text-decoration: none;
743
1292
  }
744
1293
 
@@ -750,16 +1299,16 @@ svg.cX-Chat-Html-Panel-Close {
750
1299
  * Chat HTML Panel — select_canvasxpress_chart cards
751
1300
  */
752
1301
  .cX-Chat-Select-Top {
753
- background: var(--cx-background-widgets-color);
754
- border: 2px solid var(--cx-color-widgets);
1302
+ background: var(--cx-background-widgets-color, var(--cx-ui-surface));
1303
+ border: 2px solid var(--cx-color-widgets, var(--cx-ui-accent));
755
1304
  border-radius: var(--cx-border-radius);
756
1305
  padding: 12px 14px;
757
1306
  margin-bottom: 10px;
758
1307
  }
759
1308
 
760
1309
  .cX-Chat-Select-Alt {
761
- background: var(--cx-background-widgets-color);
762
- border: var(--cx-border);
1310
+ background: var(--cx-background-widgets-color, var(--cx-ui-surface));
1311
+ border: var(--cx-border, 1px solid var(--cx-ui-border-accent));
763
1312
  border-radius: var(--cx-border-radius);
764
1313
  padding: 10px 12px;
765
1314
  }
@@ -781,14 +1330,14 @@ svg.cX-Chat-Html-Panel-Close {
781
1330
  .cX-Chat-Select-GT {
782
1331
  font-weight: 700;
783
1332
  font-size: var(--cx-font-size);
784
- color: var(--cx-color-widgets);
1333
+ color: var(--cx-color-widgets, var(--cx-ui-accent));
785
1334
  }
786
1335
 
787
1336
  .cX-Chat-Select-Score {
788
1337
  font-size: var(--cx-x-small-font-size);
789
- color: #ffffff;
790
- background: var(--cx-background-color);
791
- border: var(--cx-border);
1338
+ color: var(--cx-ui-on-accent);
1339
+ background: var(--cx-background-color, var(--cx-ui-scrollbar-thumb));
1340
+ border: var(--cx-border, 1px solid var(--cx-ui-border-accent));
792
1341
  border-radius: var(--cx-border-radius);
793
1342
  padding: 1px 7px;
794
1343
  }
@@ -822,8 +1371,8 @@ svg.cX-Chat-Html-Panel-Close {
822
1371
  padding: 4px 12px;
823
1372
  font-size: var(--cx-small-font-size);
824
1373
  font-family: var(--cx-font-family);
825
- background: var(--cx-color-widgets);
826
- color: var(--cx-background-widgets-color);
1374
+ background: var(--cx-color-widgets, var(--cx-ui-accent));
1375
+ color: var(--cx-background-widgets-color, var(--cx-ui-surface));
827
1376
  border: none;
828
1377
  border-radius: var(--cx-border-radius);
829
1378
  cursor: pointer;
@@ -838,7 +1387,7 @@ svg.cX-Chat-Html-Panel-Close {
838
1387
  outline: none;
839
1388
  font-size: medium;
840
1389
  line-height: 1.5;
841
- color: #0f172a;
1390
+ color: var(--cx-ui-text);
842
1391
  min-height: 50px;
843
1392
  height: 100%;
844
1393
  white-space: pre-wrap;
@@ -848,7 +1397,7 @@ svg.cX-Chat-Html-Panel-Close {
848
1397
 
849
1398
  .cX-Chat-Question[empty]:empty::before {
850
1399
  content: attr(data-placeholder);
851
- color: #94a3b8;
1400
+ color: var(--cx-ui-text-subtle);
852
1401
  }
853
1402
 
854
1403
  .cX-Chat-Icon-Container {
@@ -863,8 +1412,8 @@ svg.cX-Chat-Html-Panel-Close {
863
1412
  .cX-Chat-Suggestions-Container {
864
1413
  display: none;
865
1414
  padding: 12px 18px 18px 18px;
866
- border-top: 1px solid #e2e8f0;
867
- background: #fafafa;
1415
+ border-top: 1px solid var(--cx-ui-border);
1416
+ background: var(--cx-ui-surface-sunken);
868
1417
  }
869
1418
 
870
1419
  .cX-Chat-Suggestions {
@@ -880,8 +1429,8 @@ svg.cX-Chat-Html-Panel-Close {
880
1429
  .cX-Chat-Thumbs-Container {
881
1430
  width: 100%;
882
1431
  height: 36px;
883
- background: #f8fafc;
884
- border-top: 1px solid #e2e8f0;
1432
+ background: var(--cx-ui-surface-sunken);
1433
+ border-top: 1px solid var(--cx-ui-border);
885
1434
  display: none;
886
1435
  align-items: center;
887
1436
  padding: 0 10px;
@@ -904,21 +1453,6 @@ svg.cX-Chat-Html-Panel-Close {
904
1453
  display: none;
905
1454
  }
906
1455
 
907
- .cX-Chat-Output {
908
- width: 100%;
909
- max-width: 900px;
910
- margin-top: 5px;
911
- min-height: 100px;
912
- padding: 5px;
913
- outline: none;
914
- border: none;
915
- font-family: monospace;
916
- font-size: var(--cx-medium-font-size);
917
- box-sizing: border-box;
918
- resize: vertical;
919
- display: none;
920
- }
921
-
922
1456
  /*
923
1457
  * Chat Output Container (Tabs & Content)
924
1458
  */
@@ -926,8 +1460,8 @@ div.cX-Chat-Output-Container {
926
1460
  position: absolute;
927
1461
  width: calc(var(--base-w) + 18px);
928
1462
  height: calc(var(--base-h) + 82px);
929
- background-color: var(--cx-background-widgets-color);
930
- border: var(--cx-border);
1463
+ background-color: var(--cx-background-widgets-color, var(--cx-ui-surface));
1464
+ border: var(--cx-border, 1px solid var(--cx-ui-border-accent));
931
1465
  border-radius: var(--cx-border-radius);
932
1466
  z-index: 10005;
933
1467
  display: none; /* Toggled by JS */
@@ -943,7 +1477,7 @@ svg.cX-Chat-Output-Close {
943
1477
  top: 8px;
944
1478
  right: 8px;
945
1479
  cursor: pointer;
946
- z-index: 10;
1480
+ z-index: var(--cx-z-raised);
947
1481
  background: var(--cx-color-transparent) !important;
948
1482
  border: none !important;
949
1483
  box-shadow: 0 0 0px var(--cx-color-transparent) !important;
@@ -953,19 +1487,19 @@ svg.cX-Chat-Output-Close {
953
1487
  button.cX-Chat-Output-Tab {
954
1488
  display: inline-block;
955
1489
  vertical-align: bottom;
956
- background-color: var(--cx-background-hover-color);
957
- border: var(--cx-border);
1490
+ background-color: var(--cx-background-hover-color, var(--cx-ui-accent-tint));
1491
+ border: var(--cx-border, 1px solid var(--cx-ui-border-accent));
958
1492
  border-bottom: none;
959
1493
  padding: 5px 10px;
960
1494
  margin: 10px 0 0 10px;
961
1495
  cursor: pointer;
962
1496
  font: var(--cx-large-font);
963
- color: var(--cx-font-color);
1497
+ color: var(--cx-font-color, var(--cx-ui-text));
964
1498
  border-radius: var(--cx-border-radius) var(--cx-border-radius) 0 0;
965
1499
  outline: none;
966
1500
  position: relative;
967
1501
  top: 1px; /* Overlaps the content border to look like a real tab */
968
- z-index: 1;
1502
+ z-index: var(--cx-z-base);
969
1503
  box-sizing: border-box;
970
1504
  line-height: 24px;
971
1505
  }
@@ -976,13 +1510,13 @@ button.cX-Chat-Output-Tab + button.cX-Chat-Output-Tab {
976
1510
  }
977
1511
 
978
1512
  button.cX-Chat-Output-Tab:hover {
979
- background-color: var(--cx-background-widgets-color);
1513
+ background-color: var(--cx-background-widgets-color, var(--cx-ui-surface));
980
1514
  }
981
1515
 
982
1516
  button.cX-Chat-Output-Tab.Active {
983
- background-color: var(--cx-background-widgets-color);
1517
+ background-color: var(--cx-background-widgets-color, var(--cx-ui-surface));
984
1518
  font: var(--cx-large-font-bold);
985
- border-bottom: 1px solid var(--cx-background-widgets-color);
1519
+ border-bottom: 1px solid var(--cx-background-widgets-color, var(--cx-ui-surface));
986
1520
  z-index: 3;
987
1521
  }
988
1522
 
@@ -1007,9 +1541,9 @@ textarea.cX-Chat-Code-Output {
1007
1541
  height: calc(100% - 46px);
1008
1542
  /* 500px total - 46px for the tabs area */
1009
1543
  border: none;
1010
- border-top: var(--cx-border);
1011
- background-color: var(--cx-background-widgets-color);
1012
- color: var(--cx-font-color);
1544
+ border-top: var(--cx-border, 1px solid var(--cx-ui-border-accent));
1545
+ background-color: var(--cx-background-widgets-color, var(--cx-ui-surface));
1546
+ color: var(--cx-font-color, var(--cx-ui-text));
1013
1547
  overflow: auto;
1014
1548
  /* Enables scrolling for the tab content */
1015
1549
  padding: 10px;
@@ -1046,7 +1580,7 @@ textarea.cX-Chat-Code-Output {
1046
1580
  }
1047
1581
 
1048
1582
  /* Color Coding Classes */
1049
- .hint {
1583
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).hint {
1050
1584
  padding: 4px 10px;
1051
1585
  border-radius: var(--cx-border-radius);
1052
1586
  font-size: var(--cx-small-font-size);
@@ -1060,128 +1594,661 @@ textarea.cX-Chat-Code-Output {
1060
1594
  border-color: #e2e8f0;
1061
1595
  }
1062
1596
 
1063
- .hint.graph {
1597
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.graph {
1064
1598
  background: #f3e8ff;
1065
1599
  color: #9333ea;
1066
1600
  border-color: #e9d5ff;
1067
1601
  }
1068
1602
 
1069
- .hint.graph:hover {
1603
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.graph:hover {
1070
1604
  background: #9333ea;
1071
1605
  color: white;
1072
1606
  }
1073
1607
 
1074
- .hint.column {
1608
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.column {
1075
1609
  background: #eff6ff;
1076
1610
  color: #2563eb;
1077
1611
  border-color: #dbeafe;
1078
1612
  }
1079
1613
 
1080
- .hint.column:hover {
1614
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.column:hover {
1081
1615
  background: #2563eb;
1082
1616
  color: white;
1083
1617
  }
1084
1618
 
1085
- .hint.map_name {
1619
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.map_name {
1086
1620
  background: #e0e7ff;
1087
1621
  color: #3730a3;
1088
1622
  border-color: #c7d2fe;
1089
1623
  }
1090
1624
 
1091
- .hint.data,
1092
- .hint.data_multi {
1625
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.data,
1626
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.data_multi {
1093
1627
  background: #ccfbf1;
1094
1628
  color: #0d9488;
1095
1629
  border-color: #99f6e4;
1096
1630
  }
1097
1631
 
1098
- .hint.data:hover,
1099
- .hint.data_multi:hover {
1632
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.data:hover,
1633
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.data_multi:hover {
1100
1634
  background: #0d9488;
1101
1635
  color: white;
1102
1636
  }
1103
1637
 
1104
- .hint.text {
1638
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.text {
1105
1639
  background: #fce7f3;
1106
1640
  color: #db2777;
1107
1641
  border-color: #fbcfe8;
1108
1642
  }
1109
1643
 
1110
- .hint.text:hover {
1644
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.text:hover {
1111
1645
  background: #db2777;
1112
1646
  color: white;
1113
1647
  }
1114
1648
 
1115
- .hint.number {
1649
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.number {
1116
1650
  background: #fef08a;
1117
1651
  color: #b45309;
1118
1652
  border-color: #fde047;
1119
1653
  }
1120
1654
 
1121
- .hint.enum {
1655
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.enum {
1122
1656
  background: #ffedd5;
1123
1657
  color: #ea580c;
1124
1658
  border-color: #fed7aa;
1125
1659
  }
1126
1660
 
1127
- .hint.enum:hover {
1661
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.enum:hover {
1128
1662
  background: #ea580c;
1129
1663
  color: white;
1130
1664
  }
1131
1665
 
1132
- .hint.toggle {
1666
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.toggle {
1133
1667
  background: #dcfce7;
1134
1668
  color: #16a34a;
1135
1669
  border-color: #bbf7d0;
1136
1670
  }
1137
1671
 
1138
- .hint.toggle:hover {
1672
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.toggle:hover {
1139
1673
  background: #16a34a;
1140
1674
  color: white;
1141
1675
  }
1142
1676
 
1143
- .hint.filter,
1144
- .hint.sort {
1677
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.filter,
1678
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.sort {
1145
1679
  background: #fee2e2;
1146
1680
  color: #dc2626;
1147
1681
  border-color: #fecaca;
1148
1682
  }
1149
1683
 
1150
- .hint.filter:hover,
1151
- .hint.sort:hover {
1684
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.filter:hover,
1685
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.sort:hover {
1152
1686
  background: #dc2626;
1153
1687
  color: white;
1154
1688
  }
1155
1689
 
1156
- .hint.connector {
1690
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.connector {
1157
1691
  background: #f1f5f9;
1158
1692
  color: #64748b;
1159
1693
  border-color: #cbd5e1;
1160
1694
  }
1161
1695
 
1162
- .hint.connector:hover {
1696
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.connector:hover {
1163
1697
  background: #64748b;
1164
1698
  color: white;
1165
1699
  }
1166
1700
 
1167
- .hint.finish {
1701
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.finish {
1168
1702
  background: #fef3c7;
1169
1703
  color: #92400e;
1170
1704
  border-color: #fde68a;
1171
1705
  }
1172
1706
 
1173
- .hint.finish:hover {
1707
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.finish:hover {
1174
1708
  background: #d97706;
1175
1709
  color: white;
1176
1710
  }
1177
1711
 
1178
- .hint.disabled {
1712
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.disabled {
1179
1713
  background: #f8fafc;
1180
1714
  color: #94a3b8;
1181
1715
  border-color: #e2e8f0;
1182
1716
  cursor: default;
1183
1717
  }
1184
1718
 
1719
+ /* Dark theme: the left toolbar links take the chart's dark accent text (the light theme keeps the browser link colour; per-style dark accents plan, P3) */
1720
+ [data-cx-ui-theme="dark"] [id$="-cX-ChatInterfaceLeftToolbar"] > a {
1721
+ color: var(--cx-ui-accent-strong);
1722
+ }
1723
+ /* @category: shared */
1724
+
1725
+ /*
1726
+ * UI primitives (UI design-system plan P3; spec docs/architecture/widgets/ui-design-tokens.md §9).
1727
+ *
1728
+ * The one set of component rules both CanvasXpress and CanvasXpress-Dashboards build on:
1729
+ * buttons, fields, modals, tabs, chips, badges, notices and cards. Every value is a semantic
1730
+ * role (--cx-ui-*) or a primitive step (--cx-space-*, --cx-radius-*, --cx-font-size-*,
1731
+ * --cx-shadow-*, --cx-z-*) -- never a literal -- so a dataUIStyle preset, dark mode (P7) or a
1732
+ * host override re-themes them in one place.
1733
+ *
1734
+ * Borders: the dialog frame uses border-subtle (the preset's grid colour, as the old dialogs did);
1735
+ * separators inside a component use the neutral divider role.
1736
+ *
1737
+ * Class names are new (nothing in the engine used them before), so adding this file changes no
1738
+ * existing widget; widgets adopt them one at a time (P3b/P4/P5), each change gated and reviewed.
1739
+ */
1740
+
1741
+ /* ---- Button ------------------------------------------------------------------------------ */
1742
+
1743
+ .cX-Button {
1744
+ display: inline-flex;
1745
+ align-items: center;
1746
+ justify-content: center;
1747
+ gap: var(--cx-space-2);
1748
+ padding: var(--cx-space-3) var(--cx-space-6);
1749
+ border: 1px solid var(--cx-ui-border);
1750
+ border-radius: var(--cx-radius-md);
1751
+ background: var(--cx-ui-surface);
1752
+ color: var(--cx-ui-text);
1753
+ font-family: var(--cx-font-sans);
1754
+ font-size: var(--cx-font-size-md);
1755
+ font-weight: var(--cx-font-weight-medium);
1756
+ line-height: var(--cx-line-height-tight);
1757
+ white-space: nowrap;
1758
+ cursor: pointer;
1759
+ user-select: none;
1760
+ transition: background-color var(--cx-duration-fast), border-color var(--cx-duration-fast),
1761
+ color var(--cx-duration-fast);
1762
+ }
1763
+
1764
+ .cX-Button:hover {
1765
+ background: var(--cx-ui-accent-tint);
1766
+ }
1767
+
1768
+ .cX-Button:focus-visible {
1769
+ outline: 2px solid var(--cx-ui-focus);
1770
+ outline-offset: 2px;
1771
+ }
1772
+
1773
+ .cX-Button:disabled,
1774
+ .cX-Button[aria-disabled="true"] {
1775
+ opacity: 0.5;
1776
+ cursor: not-allowed;
1777
+ pointer-events: none;
1778
+ }
1779
+
1780
+ .cX-Button--primary {
1781
+ background: var(--cx-ui-accent-strong);
1782
+ border-color: var(--cx-ui-accent-strong);
1783
+ color: var(--cx-ui-on-accent);
1784
+ }
1785
+
1786
+ .cX-Button--primary:hover {
1787
+ background: var(--cx-ui-accent-hover);
1788
+ border-color: var(--cx-ui-accent-hover);
1789
+ }
1790
+
1791
+ .cX-Button--ghost {
1792
+ background: transparent;
1793
+ border-color: transparent;
1794
+ }
1795
+
1796
+ .cX-Button--danger {
1797
+ color: var(--cx-ui-danger);
1798
+ border-color: var(--cx-ui-danger);
1799
+ }
1800
+
1801
+ .cX-Button--danger:hover {
1802
+ background: var(--cx-ui-danger-tint);
1803
+ }
1804
+
1805
+ .cX-Button--icon {
1806
+ padding: var(--cx-space-2);
1807
+ background: transparent;
1808
+ border-color: transparent;
1809
+ }
1810
+
1811
+ .cX-Button--sm {
1812
+ padding: var(--cx-space-1) var(--cx-space-4);
1813
+ font-size: var(--cx-font-size-sm);
1814
+ }
1815
+
1816
+ /* ---- Fields: input, select, textarea, label, hint, error ---------------------------------- */
1817
+
1818
+ .cX-Field {
1819
+ display: flex;
1820
+ font-family: var(--cx-font-sans);
1821
+ flex-direction: column;
1822
+ gap: var(--cx-space-1);
1823
+ }
1824
+
1825
+ .cX-Field-Label {
1826
+ color: var(--cx-ui-text-muted);
1827
+ font-size: var(--cx-font-size-sm);
1828
+ font-weight: var(--cx-font-weight-medium);
1829
+ }
1830
+
1831
+ .cX-Field-Hint {
1832
+ color: var(--cx-ui-text-muted);
1833
+ font-size: var(--cx-font-size-xs);
1834
+ }
1835
+
1836
+ .cX-Field-Error {
1837
+ color: var(--cx-ui-danger);
1838
+ font-size: var(--cx-font-size-xs);
1839
+ }
1840
+
1841
+ .cX-Input,
1842
+ .cX-Select,
1843
+ .cX-Textarea {
1844
+ width: 100%;
1845
+ padding: var(--cx-space-2) var(--cx-space-4);
1846
+ border: 1px solid var(--cx-ui-border);
1847
+ border-radius: var(--cx-radius-md);
1848
+ background: var(--cx-ui-surface);
1849
+ color: var(--cx-ui-text);
1850
+ font-family: var(--cx-font-sans);
1851
+ font-size: var(--cx-font-size-md);
1852
+ line-height: var(--cx-line-height-base);
1853
+ }
1854
+
1855
+ .cX-Textarea {
1856
+ font-family: var(--cx-font-mono);
1857
+ resize: vertical;
1858
+ }
1859
+
1860
+ .cX-Input::placeholder,
1861
+ .cX-Textarea::placeholder {
1862
+ color: var(--cx-ui-text-subtle);
1863
+ }
1864
+
1865
+ .cX-Input:focus,
1866
+ .cX-Select:focus,
1867
+ .cX-Textarea:focus {
1868
+ border-color: var(--cx-ui-focus);
1869
+ outline: 2px solid var(--cx-ui-accent-tint);
1870
+ outline-offset: 0;
1871
+ }
1872
+
1873
+ .cX-Input:disabled,
1874
+ .cX-Select:disabled,
1875
+ .cX-Textarea:disabled {
1876
+ background: var(--cx-ui-surface-sunken);
1877
+ color: var(--cx-ui-text-subtle);
1878
+ cursor: not-allowed;
1879
+ }
1880
+
1881
+ .cX-Input--invalid {
1882
+ border-color: var(--cx-ui-danger);
1883
+ }
1884
+
1885
+ /* The native clear (x) of every engine search box -- was repeated in 06, 12 and 13 */
1886
+ input[type="search"].cX-Customizer-SearchInput::-webkit-search-cancel-button,
1887
+ input[type="search"].cX-DataTable-Search::-webkit-search-cancel-button,
1888
+ input[type="search"].cX-DataFilter-Search::-webkit-search-cancel-button {
1889
+ -webkit-appearance: auto;
1890
+ height: 16px;
1891
+ width: 16px;
1892
+ cursor: pointer;
1893
+ }
1894
+
1895
+ /* Status / validation line under a form (setUIStatus in dom.js) */
1896
+ .cX-Status {
1897
+ min-height: 1.4em;
1898
+ color: var(--cx-ui-text-muted);
1899
+ font-size: var(--cx-font-size-sm);
1900
+ line-height: var(--cx-line-height-base);
1901
+ }
1902
+
1903
+ .cX-Status--error {
1904
+ color: var(--cx-ui-danger);
1905
+ }
1906
+
1907
+ .cX-Status--ok {
1908
+ color: var(--cx-ui-success);
1909
+ }
1910
+
1911
+ /* A checkbox or radio with its label */
1912
+ .cX-Check {
1913
+ display: inline-flex;
1914
+ align-items: center;
1915
+ gap: var(--cx-space-3);
1916
+ color: var(--cx-ui-text);
1917
+ font-size: var(--cx-font-size-md);
1918
+ cursor: pointer;
1919
+ }
1920
+
1921
+ .cX-Check input {
1922
+ margin: 0;
1923
+ cursor: pointer;
1924
+ }
1925
+
1926
+ /*
1927
+ * Checkbox and radio: one control for every native checkbox / radio inside CanvasXpress DOM
1928
+ * ([data-cx-ui-scope]) and inside a host container that opts in (.cX-UI-Controls, e.g. the
1929
+ * dashboards). Drawn with appearance: none so it looks the same in every browser and follows the
1930
+ * theme: a grey-bordered box (or ring); checked, the accent fill with a check in the on-accent
1931
+ * colour (or an accent ring and dot). --cx-check-color overrides the accent per item (e.g. the
1932
+ * colorful preset's DataFilter cards). Zero specificity, so a component's own size still applies.
1933
+ */
1934
+ :where([data-cx-ui-scope], .cX-UI-Controls) :where(input[type="checkbox"], input[type="radio"]) {
1935
+ -webkit-appearance: none;
1936
+ appearance: none;
1937
+ display: inline-grid;
1938
+ place-content: center;
1939
+ box-sizing: border-box;
1940
+ width: 16px;
1941
+ height: 16px;
1942
+ margin: 0;
1943
+ border: 1.5px solid var(--cx-ui-text-subtle);
1944
+ border-radius: var(--cx-radius-sm);
1945
+ background-color: var(--cx-ui-surface);
1946
+ vertical-align: middle;
1947
+ flex-shrink: 0;
1948
+ cursor: pointer;
1949
+ transition: background-color var(--cx-duration-fast), border-color var(--cx-duration-fast);
1950
+ }
1951
+
1952
+ :where([data-cx-ui-scope], .cX-UI-Controls) :where(input[type="radio"]) {
1953
+ border-radius: var(--cx-radius-round);
1954
+ }
1955
+
1956
+ :where([data-cx-ui-scope], .cX-UI-Controls) :where(input[type="checkbox"], input[type="radio"])::before {
1957
+ content: "";
1958
+ /* fixed sizes: a percentage resolves to 0 inside the centred, content-sized grid */
1959
+ width: 9px;
1960
+ height: 9px;
1961
+ transform: scale(0);
1962
+ transition: transform var(--cx-duration-fast);
1963
+ }
1964
+
1965
+ /* the check mark: a clipped square in the on-accent colour */
1966
+ :where([data-cx-ui-scope], .cX-UI-Controls) :where(input[type="checkbox"])::before {
1967
+ background-color: var(--cx-ui-on-accent);
1968
+ clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
1969
+ }
1970
+
1971
+ /* the radio dot */
1972
+ :where([data-cx-ui-scope], .cX-UI-Controls) :where(input[type="radio"])::before {
1973
+ width: 8px;
1974
+ height: 8px;
1975
+ border-radius: var(--cx-radius-round);
1976
+ background-color: var(--cx-check-color, var(--cx-ui-accent));
1977
+ }
1978
+
1979
+ :where([data-cx-ui-scope], .cX-UI-Controls) :where(input[type="checkbox"], input[type="radio"]):hover {
1980
+ border-color: var(--cx-check-color, var(--cx-ui-accent));
1981
+ }
1982
+
1983
+ :where([data-cx-ui-scope], .cX-UI-Controls) :where(input[type="checkbox"]):checked,
1984
+ :where([data-cx-ui-scope], .cX-UI-Controls) :where(input[type="checkbox"]):indeterminate {
1985
+ border-color: var(--cx-check-color, var(--cx-ui-accent));
1986
+ background-color: var(--cx-check-color, var(--cx-ui-accent));
1987
+ }
1988
+
1989
+ :where([data-cx-ui-scope], .cX-UI-Controls) :where(input[type="radio"]):checked {
1990
+ border-color: var(--cx-check-color, var(--cx-ui-accent));
1991
+ }
1992
+
1993
+ :where([data-cx-ui-scope], .cX-UI-Controls) :where(input[type="checkbox"], input[type="radio"]):checked::before {
1994
+ transform: scale(1);
1995
+ }
1996
+
1997
+ /* indeterminate: a bar instead of the check */
1998
+ :where([data-cx-ui-scope], .cX-UI-Controls) :where(input[type="checkbox"]):indeterminate::before {
1999
+ height: 2px;
2000
+ clip-path: none;
2001
+ transform: scale(1);
2002
+ }
2003
+
2004
+ :where([data-cx-ui-scope], .cX-UI-Controls) :where(input[type="checkbox"], input[type="radio"]):focus-visible {
2005
+ outline: 2px solid var(--cx-ui-focus);
2006
+ outline-offset: 2px;
2007
+ }
2008
+
2009
+ :where([data-cx-ui-scope], .cX-UI-Controls) :where(input[type="checkbox"], input[type="radio"]):disabled {
2010
+ opacity: 0.45;
2011
+ cursor: not-allowed;
2012
+ }
2013
+
2014
+ /* A scrolling list inside a form (e.g. checkbox choices, per-row settings) */
2015
+ .cX-List {
2016
+ display: flex;
2017
+ flex-direction: column;
2018
+ gap: var(--cx-space-2);
2019
+ max-height: 160px;
2020
+ padding: var(--cx-space-3) var(--cx-space-4);
2021
+ border: 1px solid var(--cx-ui-border);
2022
+ border-radius: var(--cx-radius-md);
2023
+ overflow-y: auto;
2024
+ }
2025
+
2026
+ /* ---- Modal ----------------------------------------------------------------------------- */
2027
+
2028
+ .cX-Modal-Overlay {
2029
+ position: fixed;
2030
+ inset: 0;
2031
+ display: flex;
2032
+ align-items: center;
2033
+ justify-content: center;
2034
+ background: var(--cx-ui-backdrop);
2035
+ z-index: var(--cx-z-modal);
2036
+ }
2037
+
2038
+ .cX-Modal {
2039
+ display: flex;
2040
+ flex-direction: column;
2041
+ min-width: 320px;
2042
+ max-width: min(640px, 92vw);
2043
+ max-height: 86vh;
2044
+ border: 1px solid var(--cx-ui-border-subtle);
2045
+ border-radius: var(--cx-radius-lg);
2046
+ background: var(--cx-ui-surface-raised);
2047
+ box-shadow: var(--cx-shadow-3);
2048
+ color: var(--cx-ui-text);
2049
+ font-family: var(--cx-font-sans);
2050
+ font-size: var(--cx-font-size-md);
2051
+ }
2052
+
2053
+ .cX-Modal-Head {
2054
+ display: flex;
2055
+ align-items: center;
2056
+ justify-content: space-between;
2057
+ gap: var(--cx-space-4);
2058
+ padding: var(--cx-space-6) var(--cx-space-7);
2059
+ border-bottom: 1px solid var(--cx-ui-divider);
2060
+ }
2061
+
2062
+ .cX-Modal-Title {
2063
+ margin: 0;
2064
+ font-size: var(--cx-font-size-xl);
2065
+ font-weight: var(--cx-font-weight-bold);
2066
+ }
2067
+
2068
+ .cX-Modal-Body {
2069
+ display: flex;
2070
+ flex: 1 1 auto;
2071
+ flex-direction: column;
2072
+ gap: var(--cx-space-6);
2073
+ padding: var(--cx-space-7);
2074
+ overflow: auto;
2075
+ }
2076
+
2077
+ .cX-Modal-Foot {
2078
+ display: flex;
2079
+ justify-content: flex-end;
2080
+ gap: var(--cx-space-4);
2081
+ padding: var(--cx-space-6) var(--cx-space-7);
2082
+ border-top: 1px solid var(--cx-ui-divider);
2083
+ }
2084
+
2085
+ /* ---- Popover menu (a floating list of actions) ------------------------------------------ */
2086
+
2087
+ .cX-Popover {
2088
+ position: fixed;
2089
+ min-width: 170px;
2090
+ padding: var(--cx-space-2) 0;
2091
+ border: 1px solid var(--cx-ui-border-subtle);
2092
+ border-radius: var(--cx-radius-md);
2093
+ background: var(--cx-ui-surface-raised);
2094
+ box-shadow: var(--cx-shadow-2);
2095
+ color: var(--cx-ui-text);
2096
+ font-family: var(--cx-font-sans);
2097
+ font-size: var(--cx-font-size-md);
2098
+ z-index: var(--cx-z-modal-popover);
2099
+ }
2100
+
2101
+ .cX-Popover-Item {
2102
+ padding: var(--cx-space-3) var(--cx-space-7);
2103
+ cursor: pointer;
2104
+ }
2105
+
2106
+ .cX-Popover-Item:hover,
2107
+ .cX-Popover-Item:focus-visible {
2108
+ background: var(--cx-ui-accent-tint);
2109
+ outline: none;
2110
+ }
2111
+
2112
+ /* ---- Tabs ------------------------------------------------------------------------------ */
2113
+
2114
+ .cX-Tabs {
2115
+ display: flex;
2116
+ font-family: var(--cx-font-sans);
2117
+ gap: var(--cx-space-1);
2118
+ border-bottom: 1px solid var(--cx-ui-divider);
2119
+ }
2120
+
2121
+ .cX-Tab {
2122
+ padding: var(--cx-space-3) var(--cx-space-6);
2123
+ border: none;
2124
+ border-bottom: 2px solid transparent;
2125
+ background: none;
2126
+ color: var(--cx-ui-text-muted);
2127
+ font-family: var(--cx-font-sans);
2128
+ font-size: var(--cx-font-size-md);
2129
+ cursor: pointer;
2130
+ }
2131
+
2132
+ .cX-Tab:hover {
2133
+ color: var(--cx-ui-text);
2134
+ }
2135
+
2136
+ .cX-Tab--active {
2137
+ border-bottom-color: var(--cx-ui-accent);
2138
+ color: var(--cx-ui-accent-strong);
2139
+ }
2140
+
2141
+ .cX-Tab:focus-visible {
2142
+ outline: 2px solid var(--cx-ui-focus);
2143
+ outline-offset: -2px;
2144
+ }
2145
+
2146
+ /* ---- Chip & Badge ---------------------------------------------------------------------- */
2147
+
2148
+ .cX-Chip {
2149
+ display: inline-flex;
2150
+ font-family: var(--cx-font-sans);
2151
+ align-items: center;
2152
+ gap: var(--cx-space-1);
2153
+ padding: var(--cx-space-1) var(--cx-space-4);
2154
+ border: 1px solid transparent;
2155
+ border-radius: var(--cx-radius-pill);
2156
+ background: var(--cx-ui-accent-tint-subtle);
2157
+ color: var(--cx-ui-text);
2158
+ font-size: var(--cx-font-size-sm);
2159
+ }
2160
+
2161
+ .cX-Chip--interactive {
2162
+ cursor: pointer;
2163
+ }
2164
+
2165
+ .cX-Chip--interactive:hover {
2166
+ background: var(--cx-ui-accent-tint);
2167
+ }
2168
+
2169
+ .cX-Badge {
2170
+ display: inline-flex;
2171
+ font-family: var(--cx-font-sans);
2172
+ align-items: center;
2173
+ padding: 0 var(--cx-space-3);
2174
+ border-radius: var(--cx-radius-pill);
2175
+ background: var(--cx-ui-surface-sunken);
2176
+ color: var(--cx-ui-text-muted);
2177
+ font-size: var(--cx-font-size-xs);
2178
+ font-weight: var(--cx-font-weight-bold);
2179
+ line-height: var(--cx-line-height-loose);
2180
+ }
2181
+
2182
+ .cX-Badge--accent {
2183
+ background: var(--cx-ui-accent-tint);
2184
+ color: var(--cx-ui-accent-strong);
2185
+ }
2186
+
2187
+ .cX-Badge--info {
2188
+ background: var(--cx-ui-info-tint);
2189
+ color: var(--cx-ui-info-strong);
2190
+ }
2191
+
2192
+ .cX-Badge--success {
2193
+ background: var(--cx-ui-success-tint);
2194
+ color: var(--cx-ui-success);
2195
+ }
2196
+
2197
+ .cX-Badge--warning {
2198
+ background: var(--cx-ui-warning-tint);
2199
+ color: var(--cx-ui-warning-strong);
2200
+ }
2201
+
2202
+ .cX-Badge--danger {
2203
+ background: var(--cx-ui-danger-tint);
2204
+ color: var(--cx-ui-danger);
2205
+ }
2206
+
2207
+ /* ---- Notice ---------------------------------------------------------------------------- */
2208
+
2209
+ .cX-Notice {
2210
+ font-family: var(--cx-font-sans);
2211
+ padding: var(--cx-space-4) var(--cx-space-6);
2212
+ border: 1px solid var(--cx-ui-divider);
2213
+ border-radius: var(--cx-radius-md);
2214
+ background: var(--cx-ui-surface-sunken);
2215
+ color: var(--cx-ui-text);
2216
+ font-size: var(--cx-font-size-md);
2217
+ }
2218
+
2219
+ .cX-Notice--info {
2220
+ border-color: var(--cx-ui-info);
2221
+ background: var(--cx-ui-info-tint);
2222
+ }
2223
+
2224
+ .cX-Notice--success {
2225
+ border-color: var(--cx-ui-success);
2226
+ background: var(--cx-ui-success-tint);
2227
+ }
2228
+
2229
+ .cX-Notice--warning {
2230
+ border-color: var(--cx-ui-warning);
2231
+ background: var(--cx-ui-warning-tint);
2232
+ color: var(--cx-ui-warning-strong);
2233
+ }
2234
+
2235
+ .cX-Notice--danger {
2236
+ border-color: var(--cx-ui-danger);
2237
+ background: var(--cx-ui-danger-tint);
2238
+ color: var(--cx-ui-danger);
2239
+ }
2240
+
2241
+ /* ---- Card ------------------------------------------------------------------------------ */
2242
+
2243
+ .cX-Card {
2244
+ font-family: var(--cx-font-sans);
2245
+ padding: var(--cx-space-7);
2246
+ border: 1px solid var(--cx-ui-divider);
2247
+ border-radius: var(--cx-radius-lg);
2248
+ background: var(--cx-ui-surface);
2249
+ box-shadow: var(--cx-shadow-1);
2250
+ color: var(--cx-ui-text);
2251
+ }
1185
2252
  /* @category: widget */
1186
2253
  /* BEGIN OF CUSTOMIZER CSS */
1187
2254
  /* https://cssgrid-generator.netlify.app/ */
@@ -1197,13 +2264,13 @@ textarea.cX-Chat-Code-Output {
1197
2264
  grid-column-gap: 0px;
1198
2265
  grid-row-gap: 0px;
1199
2266
  position: fixed;
1200
- z-index: 10001;
2267
+ z-index: var(--cx-z-panel-active);
1201
2268
  line-height: 100%;
1202
- background-color: var(--cx-customizer-background-color, var(--cx-background-hover-color));
2269
+ background-color: var(--cx-customizer-background-color, var(--cx-ui-surface));
1203
2270
  font-family: var(--cx-font-family);
1204
2271
  font-size: var(--cx-customizer-font-size, var(--cx-font-size)) !important;
1205
2272
  font-weight: normal;
1206
- color: var(--cx-customizer-text-color, var(--cx-font-color));
2273
+ color: var(--cx-customizer-text-color, var(--cx-ui-text));
1207
2274
  margin-left: 0px;
1208
2275
  margin-top: 0px;
1209
2276
  /* --cx-view-h: set when the page is not the viewport (a VS Code notebook webview) */
@@ -1213,29 +2280,29 @@ textarea.cX-Chat-Code-Output {
1213
2280
 
1214
2281
  .cX-Customizer-LeftPanelItems {
1215
2282
  grid-area: 1 / 1 / 2 / 2;
1216
- background: var(--cx-customizer-background-color, var(--cx-background-widgets-color));
1217
- /* border-left: 1px solid var(--cx-customizer-border-color, var(--cx-datatable-border-color)) !important; */
2283
+ background: var(--cx-customizer-background-color, var(--cx-ui-surface));
2284
+ /* border-left: 1px solid var(--cx-customizer-border-color, var(--cx-ui-border-accent)) !important; */
1218
2285
  }
1219
2286
 
1220
2287
  .cX-Customizer-LeftPanelItems > div:first-child {
1221
- background: var(--cx-color-widgets);
1222
- color: var(--cx-customizer-close-text-color, #fff);
2288
+ background: var(--cx-color-widgets, var(--cx-ui-accent));
2289
+ color: var(--cx-customizer-close-text-color, var(--cx-ui-on-accent));
1223
2290
  }
1224
2291
 
1225
2292
  .cX-Customizer-RightPanel {
1226
- background: var(--cx-customizer-background-color, var(--cx-background-widgets-color));
1227
- border: 1px var(--cx-border-style) var(--cx-customizer-border-color, var(--cx-datatable-border-color)) !important;
2293
+ background: var(--cx-customizer-background-color, var(--cx-ui-surface));
2294
+ border: 1px var(--cx-border-style) var(--cx-customizer-border-color, var(--cx-ui-border-accent)) !important;
1228
2295
  border-top: none !important;
1229
2296
  border-bottom: none !important;
1230
2297
  border-radius: 0 6px 6px 0;
1231
2298
  position: absolute;
1232
- z-index: 10000;
2299
+ z-index: var(--cx-z-panel);
1233
2300
  line-height: 100%;
1234
2301
  top: 0px;
1235
2302
  font-family: var(--cx-font-family);
1236
2303
  font-size: var(--cx-customizer-font-size, var(--cx-font-size)) !important;
1237
2304
  font-weight: normal;
1238
- color: var(--cx-customizer-text-color, var(--cx-font-color));
2305
+ color: var(--cx-customizer-text-color, var(--cx-ui-text));
1239
2306
  /* --cx-view-h: set when the page is not the viewport (a VS Code notebook webview) */
1240
2307
  max-height: var(--cx-view-h, 100vh);
1241
2308
  min-height: var(--cx-view-h, 100vh);
@@ -1261,33 +2328,33 @@ textarea.cX-Chat-Code-Output {
1261
2328
 
1262
2329
  .cX-Customizer-LeftItem,
1263
2330
  .cX-Customizer-LeftItemActive {
1264
- border: 1px var(--cx-border-style) var(--cx-customizer-border-color, var(--cx-datatable-border-color)) !important;
1265
- border-bottom: 1px solid var(--cx-customizer-border-color, var(--cx-datatable-banner-border-color)) !important;
1266
- background: var(--cx-customizer-background-color, var(--cx-background-widgets-color));
2331
+ border: 1px var(--cx-border-style) var(--cx-customizer-border-color, var(--cx-ui-border-accent)) !important;
2332
+ border-bottom: 1px solid var(--cx-customizer-border-color, var(--cx-ui-border-accent)) !important;
2333
+ background: var(--cx-customizer-background-color, var(--cx-ui-surface));
1267
2334
  }
1268
2335
 
1269
2336
  .cX-Customizer-LeftItem:hover,
1270
2337
  .cX-Customizer-LeftItemActive {
1271
- background: var(--cx-customizer-hover-color, var(--cx-background-hover-color));
2338
+ background: var(--cx-customizer-hover-color, var(--cx-ui-accent-tint));
1272
2339
  }
1273
2340
 
1274
2341
  .cX-Customizer-LeftItem:hover svg,
1275
2342
  .cX-Customizer-LeftItemActive svg {
1276
- background: var(--cx-customizer-background-color, var(--cx-background-widgets-color));
2343
+ background: var(--cx-customizer-background-color, var(--cx-ui-surface));
1277
2344
  }
1278
2345
 
1279
2346
  /* First div in the left Panel */
1280
2347
  .cX-Customizer-LeftItem:first-child:hover svg,
1281
2348
  .cX-Customizer-LeftItemActive:first-child svg {
1282
2349
  background: transparent !important;
1283
- border: 1px solid var(--cx-customizer-close-text-color, #fff) !important;
2350
+ border: 1px solid var(--cx-customizer-close-text-color, var(--cx-ui-on-accent)) !important;
1284
2351
  border-radius: var(--cx-border-radius);
1285
2352
  }
1286
2353
 
1287
2354
  .cX-Customizer-LeftItemActive {
1288
- background: var(--cx-customizer-hover-color, var(--cx-background-hover-color));
1289
- color: var(--cx-customizer-text-color, var(--cx-font-color));
1290
- border-bottom: 4px var(--cx-border-style) var(--cx-customizer-border-color, var(--cx-datatable-border-color)) !important;
2355
+ background: var(--cx-customizer-hover-color, var(--cx-ui-accent-tint));
2356
+ color: var(--cx-customizer-text-color, var(--cx-ui-text));
2357
+ border-bottom: 4px var(--cx-border-style) var(--cx-customizer-border-color, var(--cx-ui-border-accent)) !important;
1291
2358
  }
1292
2359
 
1293
2360
  .cX-Customizer-LeftItem:hover > *,
@@ -1297,8 +2364,8 @@ textarea.cX-Chat-Code-Output {
1297
2364
  }
1298
2365
 
1299
2366
  .cX-Customizer-LeftItemNB:hover svg {
1300
- border-color: var(--cx-customizer-border-color, var(--cx-background-border-hover-color)) !important;
1301
- background: var(--cx-customizer-hover-color, var(--cx-background-hover-color)) !important;
2367
+ border-color: var(--cx-customizer-border-color, var(--cx-ui-border-accent)) !important;
2368
+ background: var(--cx-customizer-hover-color, var(--cx-ui-accent-tint)) !important;
1302
2369
  }
1303
2370
 
1304
2371
  .cX-Customizer-LeftItemTop {
@@ -1326,7 +2393,7 @@ textarea.cX-Chat-Code-Output {
1326
2393
  }
1327
2394
 
1328
2395
  .cX-Customizer-LeftIcon {
1329
- border: 1px var(--cx-border-style) var(--cx-customizer-border-color, var(--cx-datatable-border-color)) !important;
2396
+ border: 1px var(--cx-border-style) var(--cx-customizer-border-color, var(--cx-ui-border-accent)) !important;
1330
2397
  }
1331
2398
 
1332
2399
  /*
@@ -1348,7 +2415,7 @@ textarea.cX-Chat-Code-Output {
1348
2415
  margin: 6px 10px;
1349
2416
  padding: 4px 6px;
1350
2417
  gap: 6px;
1351
- border: 1px var(--cx-border-style) var(--cx-customizer-border-color, var(--cx-datatable-border-color)) !important;
2418
+ border: 1px var(--cx-border-style) var(--cx-customizer-border-color, var(--cx-ui-border-accent)) !important;
1352
2419
  border-radius: var(--cx-border-radius);
1353
2420
  }
1354
2421
 
@@ -1376,12 +2443,12 @@ textarea.cX-Chat-Code-Output {
1376
2443
 
1377
2444
  .cX-Customizer-Compact .cX-Customizer-LeftItem:hover,
1378
2445
  .cX-Customizer-Compact .cX-Customizer-LeftItemNB:hover {
1379
- background: var(--cx-customizer-hover-color, var(--cx-background-hover-color));
2446
+ background: var(--cx-customizer-hover-color, var(--cx-ui-accent-tint));
1380
2447
  }
1381
2448
 
1382
2449
  .cX-Customizer-Compact .cX-Customizer-LeftItemActive {
1383
- background: var(--cx-customizer-hover-color, var(--cx-background-hover-color));
1384
- border-left: 3px var(--cx-border-style) var(--cx-color-widgets, var(--cx-customizer-border-color)) !important;
2450
+ background: var(--cx-customizer-hover-color, var(--cx-ui-accent-tint));
2451
+ border-left: 3px var(--cx-border-style) var(--cx-color-widgets, var(--cx-ui-accent)) !important;
1385
2452
  }
1386
2453
 
1387
2454
  .cX-Customizer-Compact .cX-Customizer-LeftItem:hover svg,
@@ -1442,19 +2509,19 @@ textarea.cX-Chat-Code-Output {
1442
2509
  grid-column-gap: 0px;
1443
2510
  grid-row-gap: 0px;
1444
2511
  border-radius: var(--cx-border-radius);
1445
- border: 1px var(--cx-border-style) var(--cx-customizer-border-color, var(--cx-datatable-border-color)) !important;
2512
+ border: 1px var(--cx-border-style) var(--cx-customizer-border-color, var(--cx-ui-border-accent)) !important;
1446
2513
  width: 100%;
1447
- background: var(--cx-customizer-background-color, var(--cx-background-widgets-color));
2514
+ background: var(--cx-customizer-background-color, var(--cx-ui-surface));
1448
2515
  margin: 4px;
1449
2516
  }
1450
2517
 
1451
2518
  .cX-Customizer-RightItem:hover {
1452
- background: var(--cx-customizer-hover-color, var(--cx-background-hover-color));
2519
+ background: var(--cx-customizer-hover-color, var(--cx-ui-accent-tint));
1453
2520
  }
1454
2521
 
1455
2522
  /* Add top border to non-header items that follow another item (for separation) */
1456
2523
  .cX-Customizer-RightItem + .cX-Customizer-RightItem {
1457
- border-top: 1px solid var(--cx-customizer-border-color, var(--cx-datatable-border-color)) !important;
2524
+ border-top: 1px solid var(--cx-customizer-border-color, var(--cx-ui-border-accent)) !important;
1458
2525
  }
1459
2526
 
1460
2527
  .cX-Customizer-RightItem * {
@@ -1477,7 +2544,7 @@ textarea.cX-Chat-Code-Output {
1477
2544
  margin: auto;
1478
2545
  padding: 0 6px 3px;
1479
2546
  font-size: var(--cx-small-font-size);
1480
- color: var(--cx-customizer-text-color, var(--cx-font-color));
2547
+ color: var(--cx-customizer-text-color, var(--cx-ui-text));
1481
2548
  }
1482
2549
 
1483
2550
  /*
@@ -1490,9 +2557,9 @@ textarea.cX-Chat-Code-Output {
1490
2557
  grid-template-rows: 2fr 1fr;
1491
2558
  grid-column-gap: 2px;
1492
2559
  grid-row-gap: 0px;
1493
- border-top: 1px solid var(--cx-customizer-border-color, var(--cx-datatable-border-color));
2560
+ border-top: 1px solid var(--cx-customizer-border-color, var(--cx-ui-border-accent));
1494
2561
  min-height: 28px;
1495
- background: var(--cx-customizer-background-color, var(--cx-background-widgets-color));
2562
+ background: var(--cx-customizer-background-color, var(--cx-ui-surface));
1496
2563
  width: 100%;
1497
2564
  box-sizing: border-box;
1498
2565
  }
@@ -1544,14 +2611,14 @@ textarea.cX-Chat-Code-Output {
1544
2611
  grid-template-rows: auto;
1545
2612
  grid-column-gap: 0px;
1546
2613
  grid-row-gap: 0px;
1547
- background: var(--cx-background-hover-color);
1548
- color: var(--cx-font-color);
2614
+ background: var(--cx-background-hover-color, var(--cx-ui-accent-tint));
2615
+ color: var(--cx-font-color, var(--cx-ui-text));
1549
2616
  padding: 2px 3px;
1550
2617
  font-size: var(--cx-medium-font-size);
1551
2618
  }
1552
2619
 
1553
2620
  .cX-Customizer-RightItemHeader {
1554
- border-bottom: 1px solid var(--cx-datatable-border-color) !important;
2621
+ border-bottom: 1px solid var(--cx-datatable-border-color, var(--cx-ui-border-accent)) !important;
1555
2622
  }
1556
2623
 
1557
2624
  .cX-Customizer-RightItemHeaderNB {
@@ -1570,7 +2637,7 @@ textarea.cX-Chat-Code-Output {
1570
2637
  padding-left: 5px;
1571
2638
  overflow: auto;
1572
2639
  font-size: var(--cx-x-small-font-size);
1573
- color: var(--cx-font-color);
2640
+ color: var(--cx-font-color, var(--cx-ui-text));
1574
2641
  }
1575
2642
 
1576
2643
  /*
@@ -1600,7 +2667,6 @@ textarea.cX-Chat-Code-Output {
1600
2667
  .cX-Customizer-CardAccent .cX-Customizer-RightItem:hover,
1601
2668
  .cX-Customizer-CardAccent .cX-Customizer-RightItemLauncher:hover,
1602
2669
  .cX-Customizer-CardAccent .cX-Customizer-RightItemLauncherNB:hover,
1603
- .cX-Customizer-CardAccent .cX-Customizer-RightItemSelect > select:hover,
1604
2670
  .cX-Customizer-CardAccent .cX-Customizer-RightItemTextArea > svg:hover,
1605
2671
  .cX-Customizer-CardAccent .cX-Customizer-RightItemTextArea > textarea:hover,
1606
2672
  .cX-Customizer-CardAccent .cX-Customizer-ContainerRaw > svg:hover,
@@ -1616,6 +2682,10 @@ textarea.cX-Chat-Code-Output {
1616
2682
  background: var(--cx-item-accent-bg) !important;
1617
2683
  background-color: var(--cx-item-accent-bg) !important;
1618
2684
  }
2685
+ /* Selects take only the colour: the background shorthand above would also wipe their chevron. */
2686
+ .cX-Customizer-CardAccent .cX-Customizer-RightItemSelect > select:hover {
2687
+ background-color: var(--cx-item-accent-bg);
2688
+ }
1619
2689
  /* Range sliders inside an accented card follow the card's colour (thumb + fill),
1620
2690
  * not the global purple. -webkit- and -moz- pseudo-elements must stay in separate
1621
2691
  * rules or the whole rule is dropped. */
@@ -1674,8 +2744,8 @@ textarea.cX-Chat-Code-Output {
1674
2744
  display: flex;
1675
2745
  align-items: center;
1676
2746
  border-radius: var(--cx-border-radius);
1677
- border: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
1678
- background-color: var(--cx-background-hover-color);
2747
+ border: 1px var(--cx-border-style) var(--cx-datatable-border-color, var(--cx-ui-border-accent)) !important;
2748
+ background-color: var(--cx-background-hover-color, var(--cx-ui-accent-tint));
1679
2749
  }
1680
2750
 
1681
2751
  /*
@@ -1693,7 +2763,7 @@ textarea.cX-Chat-Code-Output {
1693
2763
  border: none !important;
1694
2764
  box-shadow: none !important;
1695
2765
  min-height: 34px;
1696
- background: var(--cx-background-widgets-color);
2766
+ background: var(--cx-background-widgets-color, var(--cx-ui-surface));
1697
2767
  overflow: hidden;
1698
2768
  }
1699
2769
 
@@ -1724,7 +2794,7 @@ textarea.cX-Chat-Code-Output {
1724
2794
  .cX-Customizer-Container > .cX-Customizer-RightItemLauncherNB + .cX-Customizer-RightItemLauncher,
1725
2795
  .cX-Customizer-Container > .cX-Customizer-RightItemLauncher + .cX-Customizer-RightItemLauncherNB,
1726
2796
  .cX-Customizer-Container > .cX-Customizer-RightItemLauncherNB + .cX-Customizer-RightItemLauncherNB {
1727
- border-top: 1px solid var(--cx-datatable-banner-border-color) !important;
2797
+ border-top: 1px solid var(--cx-datatable-banner-border-color, var(--cx-ui-chrome-border)) !important;
1728
2798
  }
1729
2799
 
1730
2800
  /* Override inline launcher width so rows do not cover the wrapper right border */
@@ -1744,7 +2814,7 @@ textarea.cX-Chat-Code-Output {
1744
2814
 
1745
2815
  .cX-Customizer-RightItemLauncher:hover,
1746
2816
  .cX-Customizer-RightItemLauncherNB:hover {
1747
- background-color: var(--cx-customizer-hover-color);
2817
+ background-color: var(--cx-customizer-hover-color, var(--cx-ui-accent-tint));
1748
2818
  }
1749
2819
 
1750
2820
  .cX-Customizer-RightItemLauncherLeft {
@@ -1752,7 +2822,7 @@ textarea.cX-Chat-Code-Output {
1752
2822
  display: flex;
1753
2823
  align-items: center;
1754
2824
  justify-content: center;
1755
- background-color: var(--cx-customizer-hover-color);
2825
+ background-color: var(--cx-customizer-hover-color, var(--cx-ui-accent-tint));
1756
2826
  }
1757
2827
 
1758
2828
  .cX-Customizer-RightItemLauncherRight {
@@ -1888,13 +2958,26 @@ textarea.cX-Chat-Code-Output {
1888
2958
  height: 26px !important;
1889
2959
  }
1890
2960
 
2961
+ /*
2962
+ * Integer spinner (-, value, +): push the buttons outward into the empty outer columns for more
2963
+ * separation from the value box. A transform leaves the box (and its fixed-width input) untouched,
2964
+ * and moves the click target with the icon.
2965
+ */
2966
+ .cX-Customizer-RightItemInt .cX-Customizer-RightItemCol2 {
2967
+ transform: translateX(-6px);
2968
+ }
2969
+
2970
+ .cX-Customizer-RightItemInt .cX-Customizer-RightItemCol5 {
2971
+ transform: translateX(6px);
2972
+ }
2973
+
1891
2974
  .cX-Customizer-RightItemColMid {
1892
2975
  grid-area: 1 / 3 / 2 / 5;
1893
2976
  display: flex;
1894
2977
  align-items: center;
1895
2978
  justify-content: center;
1896
2979
  border-radius: var(--cx-border-radius);
1897
- border: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
2980
+ border: 1px var(--cx-border-style) var(--cx-datatable-border-color, var(--cx-ui-border-accent)) !important;
1898
2981
  }
1899
2982
 
1900
2983
  .cX-Customizer-RightItemSelect>select,
@@ -1910,6 +2993,38 @@ textarea.cX-Chat-Code-Output {
1910
2993
  line-height: normal;
1911
2994
  }
1912
2995
 
2996
+ /*
2997
+ * Select boxes draw their own chevron instead of the native arrow: the browser pins that against
2998
+ * the right border and padding cannot move it. Two thin diagonals in currentColor form the V, so it
2999
+ * follows the text colour in light and dark themes. padding-left keeps the value where the native
3000
+ * control put it; padding-right keeps long values clear of the chevron.
3001
+ */
3002
+ .cX-Customizer-RightItemSelect > select {
3003
+ -webkit-appearance: none;
3004
+ -moz-appearance: none;
3005
+ appearance: none;
3006
+ padding-left: 4px;
3007
+ padding-right: 20px;
3008
+ background-image:
3009
+ linear-gradient(45deg, transparent 40%, currentColor 40%, currentColor 60%, transparent 60%),
3010
+ linear-gradient(-45deg, transparent 40%, currentColor 40%, currentColor 60%, transparent 60%);
3011
+ background-position:
3012
+ calc(100% - 13px) 50%,
3013
+ calc(100% - 8px) 50%;
3014
+ background-size: 5px 5px, 5px 5px;
3015
+ background-repeat: no-repeat;
3016
+ }
3017
+
3018
+ /* High-contrast (forced colours) mode drops background images: fall back to the native arrow. */
3019
+ @media (forced-colors: active) {
3020
+ .cX-Customizer-RightItemSelect > select {
3021
+ -webkit-appearance: auto;
3022
+ -moz-appearance: auto;
3023
+ appearance: auto;
3024
+ background-image: none;
3025
+ }
3026
+ }
3027
+
1913
3028
  .cX-Customizer-RightItemTextArea>svg:hover,
1914
3029
  .cX-Customizer-RightItemTextArea>textarea:hover,
1915
3030
  .cX-Customizer-ContainerRaw>svg:hover,
@@ -1920,7 +3035,7 @@ textarea.cX-Chat-Code-Output {
1920
3035
  .cX-Customizer-RightItemCol5>svg:hover,
1921
3036
  .cX-Customizer-RightItemCol6>svg:hover,
1922
3037
  .cX-Customizer-RightItem:hover {
1923
- background-color: var(--cx-customizer-hover-color);
3038
+ background-color: var(--cx-customizer-hover-color, var(--cx-ui-accent-tint));
1924
3039
  }
1925
3040
 
1926
3041
  /*
@@ -1947,7 +3062,7 @@ textarea.cX-Chat-Code-Output {
1947
3062
  .cX-Customizer-Unique,
1948
3063
  .cX-Customizer-Wrangling,
1949
3064
  .cX-Customizer-Container {
1950
- border: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
3065
+ border: 1px var(--cx-border-style) var(--cx-datatable-border-color, var(--cx-ui-border-accent)) !important;
1951
3066
  }
1952
3067
 
1953
3068
  .cX-Customizer-Wrangling:hover {
@@ -2078,7 +3193,7 @@ textarea.cX-Chat-Code-Output {
2078
3193
  }
2079
3194
 
2080
3195
  .cX-Customizer-Numeric {
2081
- color: var(--cx-font-color);
3196
+ color: var(--cx-font-color, var(--cx-ui-text));
2082
3197
  background-color: var(--cx-color-transparent);
2083
3198
  }
2084
3199
 
@@ -2108,7 +3223,7 @@ textarea.cX-Chat-Code-Output {
2108
3223
  }
2109
3224
 
2110
3225
  .cX-Customizer-ListNumeric {
2111
- color: var(--cx-font-color);
3226
+ color: var(--cx-font-color, var(--cx-ui-text));
2112
3227
  }
2113
3228
 
2114
3229
  .cX-Customizer-ListString {
@@ -2122,14 +3237,14 @@ textarea.cX-Chat-Code-Output {
2122
3237
  .cX-Customizer-ListNumeric:hover,
2123
3238
  .cX-Customizer-ListString:hover,
2124
3239
  .cX-Customizer-ListUnique:hover {
2125
- background: var(--cx-customizer-hover-color);
3240
+ background: var(--cx-customizer-hover-color, var(--cx-ui-accent-tint));
2126
3241
  }
2127
3242
 
2128
3243
  .cX-Customizer-ListNumeric:before,
2129
3244
  .cX-Customizer-ListString:before,
2130
3245
  .cX-Customizer-ListUnique:before {
2131
3246
  font: normal 10px courier;
2132
- color: var(--cx-background-color);
3247
+ color: var(--cx-background-color, var(--cx-ui-scrollbar-thumb));
2133
3248
  }
2134
3249
 
2135
3250
  .cX-Customizer-ListNumeric:before {
@@ -2163,13 +3278,13 @@ textarea.cX-Chat-Code-Output {
2163
3278
  select.cX-Customizer-Search,
2164
3279
  input.cX-Customizer-Search {
2165
3280
  margin: 6px;
2166
- background-color: var(--cx-background-widgets-color);
2167
- color: var(--cx-font-color);
3281
+ background-color: var(--cx-background-widgets-color, var(--cx-ui-surface));
3282
+ color: var(--cx-font-color, var(--cx-ui-text));
2168
3283
  cursor: default;
2169
3284
  font: inherit;
2170
3285
  height: 32px;
2171
3286
  border-radius: var(--cx-border-radius);
2172
- border: 1px var(--cx-border-style) var(--cx-datatable-border-color);
3287
+ border: 1px var(--cx-border-style) var(--cx-datatable-border-color, var(--cx-ui-border-accent));
2173
3288
  float: left;
2174
3289
  clear: left;
2175
3290
  }
@@ -2191,13 +3306,6 @@ input.cX-Customizer-Search:not([type="color"]) {
2191
3306
  padding: 4px 6px;
2192
3307
  }
2193
3308
 
2194
- input[type="search"].cX-Customizer-SearchInput::-webkit-search-cancel-button {
2195
- -webkit-appearance: auto;
2196
- height: 16px;
2197
- width: 16px;
2198
- cursor: pointer;
2199
- }
2200
-
2201
3309
  /* Compact, sidebar-like right-widget overrides */
2202
3310
  .cX-Customizer-RightPanel .cX-Customizer-RightItem,
2203
3311
  .cX-Customizer-RightPanel .cX-Customizer-RightItemHeader,
@@ -2208,7 +3316,10 @@ input[type="search"].cX-Customizer-SearchInput::-webkit-search-cancel-button {
2208
3316
  .cX-Customizer-RightPanel .cX-Customizer-String,
2209
3317
  .cX-Customizer-RightPanel .cX-Customizer-Unique,
2210
3318
  .cX-Customizer-RightPanel .cX-Customizer-Wrangling {
2211
- border-color: var(--cx-datatable-banner-border-color) !important;
3319
+ /* The solid accent border every widget frame shares (DataTable, DataFilter cards). This used the
3320
+ light chrome border, so in stripped/old/bms/colorful/ngs360 the Customizer cards were fainter
3321
+ than the DataFilter cards next to them. */
3322
+ border-color: var(--cx-datatable-border-color, var(--cx-ui-border-accent)) !important;
2212
3323
  border-radius: var(--cx-border-radius) !important;
2213
3324
  }
2214
3325
 
@@ -2239,7 +3350,7 @@ input[type="search"].cX-Customizer-SearchInput::-webkit-search-cancel-button {
2239
3350
  }
2240
3351
 
2241
3352
  span.cX-Customizer-Search {
2242
- color: var(--cx-font-color);
3353
+ color: var(--cx-font-color, var(--cx-ui-text));
2243
3354
  font: inherit;
2244
3355
  font-size: var(--cx-small-font-size);
2245
3356
  line-height: 20px;
@@ -2267,7 +3378,7 @@ span.cX-Customizer-SearchCurrent {
2267
3378
  }
2268
3379
 
2269
3380
  span.cX-Customizer-SearchSelect {
2270
- color: var(--cx-font-color);
3381
+ color: var(--cx-font-color, var(--cx-ui-text));
2271
3382
  }
2272
3383
 
2273
3384
  span.cX-Customizer-SearchDescription,
@@ -2280,48 +3391,48 @@ span.cX-Customizer-SearchCategory {
2280
3391
  span.cX-Customizer-SearchDescription,
2281
3392
  span.cX-Customizer-SearchCategory,
2282
3393
  span.cX-Customizer-SearchCurrent {
2283
- color: var(--cx-background-color);
3394
+ color: var(--cx-background-color, var(--cx-ui-scrollbar-thumb));
2284
3395
  }
2285
3396
 
2286
3397
  span.cX-Customizer-SearchSelect:before {
2287
- color: var(--cx-font-color);
3398
+ color: var(--cx-font-color, var(--cx-ui-text));
2288
3399
  font-weight: bold;
2289
3400
  content: "Select property (";
2290
3401
  }
2291
3402
 
2292
3403
  span.cX-Customizer-SearchSelect:after {
2293
- color: var(--cx-font-color);
3404
+ color: var(--cx-font-color, var(--cx-ui-text));
2294
3405
  font-weight: bold;
2295
3406
  content: ")";
2296
3407
  }
2297
3408
 
2298
3409
  span.cX-Customizer-SearchDescription:before {
2299
- color: var(--cx-font-color);
3410
+ color: var(--cx-font-color, var(--cx-ui-text));
2300
3411
  font-weight: bold;
2301
3412
  content: "Description [ ";
2302
3413
  }
2303
3414
 
2304
3415
  span.cX-Customizer-SearchCategory:before {
2305
- color: var(--cx-font-color);
3416
+ color: var(--cx-font-color, var(--cx-ui-text));
2306
3417
  font-weight: bold;
2307
3418
  content: "Category [ ";
2308
3419
  }
2309
3420
 
2310
3421
  span.cX-Customizer-SearchDescription:after,
2311
3422
  span.cX-Customizer-SearchCategory:after {
2312
- color: var(--cx-font-color);
3423
+ color: var(--cx-font-color, var(--cx-ui-text));
2313
3424
  font-weight: bold;
2314
3425
  content: " ]";
2315
3426
  }
2316
3427
 
2317
3428
  span.cX-Customizer-SearchCurrent:before {
2318
- color: var(--cx-font-color);
3429
+ color: var(--cx-font-color, var(--cx-ui-text));
2319
3430
  font-weight: bold;
2320
3431
  content: "Current Value [ ";
2321
3432
  }
2322
3433
 
2323
3434
  span.cX-Customizer-SearchCurrent:after {
2324
- color: var(--cx-font-color);
3435
+ color: var(--cx-font-color, var(--cx-ui-text));
2325
3436
  font-weight: bold;
2326
3437
  content: " ]";
2327
3438
  }
@@ -2332,10 +3443,10 @@ span.cX-Customizer-SearchCurrent:after {
2332
3443
 
2333
3444
  .cX-Password-Dialog {
2334
3445
  border-radius: var(--cx-border-radius);
2335
- background-color: var(--cx-background-widgets-color);
3446
+ background-color: var(--cx-background-widgets-color, var(--cx-ui-surface));
2336
3447
  box-sizing: border-box;
2337
3448
  cursor: move;
2338
- color: var(--cx-font-color);
3449
+ color: var(--cx-font-color, var(--cx-ui-text));
2339
3450
  font: normal 16px arial, tahoma, sans-serif;
2340
3451
  margin: 2px 3px;
2341
3452
  overflow: hidden;
@@ -2359,10 +3470,10 @@ span.cX-Customizer-SearchCurrent:after {
2359
3470
 
2360
3471
  .cX-Password-Container {
2361
3472
  box-sizing: border-box;
2362
- background-color: var(--cx-background-widgets-color);
2363
- border: 1px var(--cx-border-style) var(--cx-datatable-border-color);
3473
+ background-color: var(--cx-background-widgets-color, var(--cx-ui-surface));
3474
+ border: 1px var(--cx-border-style) var(--cx-datatable-border-color, var(--cx-ui-border-accent));
2364
3475
  border-radius: 0px 0px 5px 5px;
2365
- color: var(--cx-font-color);
3476
+ color: var(--cx-font-color, var(--cx-ui-text));
2366
3477
  display: block;
2367
3478
  left: 0px;
2368
3479
  line-height: 100%;
@@ -2382,9 +3493,9 @@ span.cX-Customizer-SearchCurrent:after {
2382
3493
  margin-bottom: 5px;
2383
3494
  padding: 5px;
2384
3495
  border-radius: var(--cx-border-radius);
2385
- border: 1px solid var(--cx-datatable-border-color);
2386
- background-color: var(--cx-background-widgets-color);
2387
- color: var(--cx-font-color);
3496
+ border: 1px solid var(--cx-datatable-border-color, var(--cx-ui-border-accent));
3497
+ background-color: var(--cx-background-widgets-color, var(--cx-ui-surface));
3498
+ color: var(--cx-font-color, var(--cx-ui-text));
2388
3499
  width: 170px;
2389
3500
  }
2390
3501
 
@@ -2425,9 +3536,9 @@ div.CanvasXpressDragLayout {
2425
3536
  /* Keep the tinted header background from the classic look, just tighter. */
2426
3537
  .cX-Customizer-Compact .cX-Customizer-RightItemHeader,
2427
3538
  .cX-Customizer-Compact .cX-Customizer-RightItemHeaderNB {
2428
- background: var(--cx-background-hover-color);
3539
+ background: var(--cx-background-hover-color, var(--cx-ui-accent-tint));
2429
3540
  padding: 6px 10px !important;
2430
- border-bottom: 1px solid var(--cx-datatable-border-color) !important;
3541
+ border-bottom: 1px solid var(--cx-datatable-border-color, var(--cx-ui-border-accent)) !important;
2431
3542
  }
2432
3543
 
2433
3544
  .cX-Customizer-Compact .cX-Customizer-RightItemHeaderMain {
@@ -2450,7 +3561,7 @@ div.CanvasXpressDragLayout {
2450
3561
 
2451
3562
  /* Help text: muted caption */
2452
3563
  .cX-Customizer-Compact .cX-Customizer-RightItemHeaderMain > :last-child {
2453
- color: var(--cx-font-color);
3564
+ color: var(--cx-font-color, var(--cx-ui-text));
2454
3565
  opacity: 0.55;
2455
3566
  font-size: var(--cx-x-small-font-size) !important;
2456
3567
  line-height: 1rem !important;
@@ -2542,7 +3653,7 @@ div.CanvasXpressDragLayout {
2542
3653
 
2543
3654
  .cX-Customizer-Compact .cX-Customizer-RightItemLauncher:hover,
2544
3655
  .cX-Customizer-Compact .cX-Customizer-RightItemLauncherNB:hover {
2545
- background-color: var(--cx-customizer-hover-color) !important;
3656
+ background-color: var(--cx-customizer-hover-color, var(--cx-ui-accent-tint)) !important;
2546
3657
  }
2547
3658
 
2548
3659
  /* Accented-card launchers hover in the card's colour (beats the compact rule above). */
@@ -2595,6 +3706,11 @@ div.CanvasXpressDragLayout {
2595
3706
  word-break: break-word;
2596
3707
  }
2597
3708
 
3709
+ /* Dark theme: the header links (e.g. Title / Text) are plain <a>, drawn in the browser's dark link
3710
+ colour; they take the chart's dark accent text instead (the light theme keeps the browser link colour; per-style dark accents plan, P3) */
3711
+ [data-cx-ui-theme="dark"] .cX-Customizer-RightItemHeaderBottom > a {
3712
+ color: var(--cx-ui-accent-strong);
3713
+ }
2598
3714
  /* @category: widget */
2599
3715
  /***********
2600
3716
  * Tooltip *
@@ -2606,11 +3722,11 @@ div.CanvasXpressDragLayout {
2606
3722
 
2607
3723
  div.cX-Tooltip-Container,
2608
3724
  .cX-Tooltip-Info {
2609
- border: var(--cx-border);
3725
+ border: var(--cx-border, 1px solid var(--cx-ui-border-accent));
2610
3726
  border-radius: var(--cx-border-radius);
2611
3727
  background-color: var(--cx-color-white);
2612
3728
  cursor: move;
2613
- color: var(--cx-font-color);
3729
+ color: var(--cx-font-color, var(--cx-ui-text));
2614
3730
  font: var(--cx-large-font);
2615
3731
  margin: 2px 3px;
2616
3732
  overflow: hidden;
@@ -2623,7 +3739,7 @@ div.cX-Tooltip-Container,
2623
3739
  .cX-Tooltip-Info {
2624
3740
  max-height: 800px;
2625
3741
  max-width: 350px;
2626
- z-index: 1;
3742
+ z-index: var(--cx-z-base);
2627
3743
  }
2628
3744
 
2629
3745
  div.cX-Tooltip-Container {
@@ -2632,7 +3748,7 @@ div.cX-Tooltip-Container {
2632
3748
 
2633
3749
  .cX-Tooltip-Toolbar {
2634
3750
  align-items: center;
2635
- border-bottom: 1px var(--cx-border-style) var(--cx-datatable-banner-border-color);
3751
+ border-bottom: 1px var(--cx-border-style) var(--cx-datatable-banner-border-color, var(--cx-ui-chrome-border));
2636
3752
  cursor: move;
2637
3753
  display: flex;
2638
3754
  flex-direction: row;
@@ -2644,8 +3760,10 @@ div.cX-Tooltip-Container {
2644
3760
 
2645
3761
  /* @category: widget */
2646
3762
  /*****************************************************/
2647
- /* Generators */
2648
- /* A collection of Tooltips/Speech Bubbles */
3763
+ /* Tooltip callouts (speech bubbles) */
3764
+ /* Was 08-generators.css (renamed, UI design-system */
3765
+ /* plan P3): the arrowed tooltip/info callouts, */
3766
+ /* generated with the tool below. */
2649
3767
  /* https://css-generators.com/tooltip-speech-bubble/ */
2650
3768
  /*****************************************************/
2651
3769
 
@@ -2654,14 +3772,14 @@ div.cX-Tooltip-Container {
2654
3772
  .cX-Tooltip-Info-Top,
2655
3773
  .cX-Tooltip-Info-Left,
2656
3774
  .cX-Tooltip-Info-Right {
2657
- color: var(--cx-font-color);
3775
+ color: var(--cx-font-color, var(--cx-ui-text));
2658
3776
  font: var(--cx-font);
2659
3777
  max-height: 800px;
2660
3778
  padding: 10px;
2661
3779
  position: absolute;
2662
3780
  white-space: nowrap;
2663
3781
  text-align: left;
2664
- z-index: 1;
3782
+ z-index: var(--cx-z-base);
2665
3783
  }
2666
3784
 
2667
3785
  .cX-Tooltip-Info-Bottom {
@@ -2688,7 +3806,7 @@ div.cX-Tooltip-Container {
2688
3806
  .cX-Tooltip-Info-Bottom:before {
2689
3807
  content: "";
2690
3808
  position: absolute;
2691
- z-index: -1;
3809
+ z-index: var(--cx-z-behind);
2692
3810
  padding: var(--cx-callout-border-width);
2693
3811
  border-radius: inherit;
2694
3812
  clip-path: polygon(
@@ -2754,7 +3872,7 @@ div.cX-Tooltip-Container {
2754
3872
  .cX-Tooltip-Info-Top:before {
2755
3873
  content: "";
2756
3874
  position: absolute;
2757
- z-index: -1;
3875
+ z-index: var(--cx-z-behind);
2758
3876
  padding: var(--cx-callout-border-width);
2759
3877
  border-radius: inherit;
2760
3878
  clip-path: polygon(
@@ -2814,7 +3932,7 @@ div.cX-Tooltip-Container {
2814
3932
  content: "";
2815
3933
  position: absolute;
2816
3934
  inset: 0;
2817
- z-index: -1;
3935
+ z-index: var(--cx-z-behind);
2818
3936
  padding: var(--cx-callout-border-width);
2819
3937
  border-radius: inherit;
2820
3938
  clip-path: polygon(
@@ -2876,7 +3994,7 @@ div.cX-Tooltip-Container {
2876
3994
  content: "";
2877
3995
  position: absolute;
2878
3996
  inset: 0;
2879
- z-index: -1;
3997
+ z-index: var(--cx-z-behind);
2880
3998
  padding: var(--cx-callout-border-width);
2881
3999
  border-radius: inherit;
2882
4000
  clip-path: polygon(
@@ -2921,12 +4039,12 @@ div.CanvasXpressMousePosition {
2921
4039
  border: 0px none !important;
2922
4040
  box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
2923
4041
  cursor: move;
2924
- color: var(--cx-font-color);
4042
+ color: var(--cx-font-color, var(--cx-ui-text));
2925
4043
  font: var(--cx-font);
2926
4044
  position: absolute;
2927
4045
  white-space: nowrap;
2928
4046
  text-align: left;
2929
- z-index: 1;
4047
+ z-index: var(--cx-z-base);
2930
4048
  }
2931
4049
 
2932
4050
  img.CanvasXpressMousePosition,
@@ -2948,14 +4066,14 @@ span.CanvasXpressMousePosition {
2948
4066
  border: 0px none !important;
2949
4067
  box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
2950
4068
  cursor: move;
2951
- color: var(--cx-font-color);
4069
+ color: var(--cx-font-color, var(--cx-ui-text));
2952
4070
  font: var(--cx-font);
2953
4071
  position: absolute;
2954
4072
  left: 4px;
2955
4073
  top: -20px;
2956
4074
  white-space: nowrap;
2957
4075
  text-align: left;
2958
- z-index: 1;
4076
+ z-index: var(--cx-z-base);
2959
4077
  }
2960
4078
 
2961
4079
  /* @category: widget */
@@ -2977,8 +4095,8 @@ span.CanvasXpressMousePosition {
2977
4095
  }
2978
4096
 
2979
4097
  .cX-Workflow-Wrapper.cX-Workflow-Mode-Repro .cX-Workflow-Widget {
2980
- background: var(--cx-workflow-background-color);
2981
- border: 1px var(--cx-border-style) var(--cx-workflow-border-color);
4098
+ background: var(--cx-workflow-background-color, var(--cx-ui-surface));
4099
+ border: 1px var(--cx-border-style) var(--cx-workflow-border-color, var(--cx-ui-divider));
2982
4100
  border-radius: var(--cx-border-radius);
2983
4101
  padding: 12px;
2984
4102
  box-shadow: none;
@@ -3002,9 +4120,9 @@ span.CanvasXpressMousePosition {
3002
4120
 
3003
4121
  .cX-Workflow-Wrapper.cX-Workflow-Mode-Filter .cX-Workflow-Widget {
3004
4122
  position: relative;
3005
- border: 1px var(--cx-border-style) var(--cx-workflow-border-color) !important;
4123
+ border: 1px var(--cx-border-style) var(--cx-workflow-border-color, var(--cx-ui-divider)) !important;
3006
4124
  border-radius: var(--cx-border-radius);
3007
- background: var(--cx-workflow-background-color);
4125
+ background: var(--cx-workflow-background-color, var(--cx-ui-surface));
3008
4126
  padding: 12px;
3009
4127
  width: 90% !important;
3010
4128
  left: 5% !important;
@@ -3027,8 +4145,8 @@ span.CanvasXpressMousePosition {
3027
4145
 
3028
4146
  .cX-Workflow-Widget {
3029
4147
  font-family: var(--cx-font-family);
3030
- color: var(--cx-workflow-text-color);
3031
- background: var(--cx-workflow-background-color);
4148
+ color: var(--cx-workflow-text-color, var(--cx-ui-text));
4149
+ background: var(--cx-workflow-background-color, var(--cx-ui-surface));
3032
4150
  }
3033
4151
 
3034
4152
  .cX-Workflow-Header {
@@ -3037,13 +4155,13 @@ span.CanvasXpressMousePosition {
3037
4155
  align-items: center;
3038
4156
  margin-bottom: 10px;
3039
4157
  padding-bottom: 8px;
3040
- color: var(--cx-workflow-text-color);
4158
+ color: var(--cx-workflow-text-color, var(--cx-ui-text));
3041
4159
  }
3042
4160
 
3043
4161
  .cX-Workflow-Close-Btn {
3044
4162
  cursor: pointer;
3045
4163
  border-radius: var(--cx-border-radius);
3046
- background: var(--cx-workflow-button-background-color);
4164
+ background: var(--cx-workflow-button-background-color, var(--cx-ui-surface));
3047
4165
  }
3048
4166
 
3049
4167
  .cX-Workflow-Controls {
@@ -3056,7 +4174,7 @@ span.CanvasXpressMousePosition {
3056
4174
  .cX-Workflow-Play-Btn {
3057
4175
  cursor: pointer;
3058
4176
  border-radius: var(--cx-border-radius);
3059
- background: var(--cx-workflow-button-background-color);
4177
+ background: var(--cx-workflow-button-background-color, var(--cx-ui-surface));
3060
4178
  }
3061
4179
 
3062
4180
  .cX-Workflow-Slider-Area {
@@ -3069,7 +4187,7 @@ span.CanvasXpressMousePosition {
3069
4187
  .cX-Workflow-Slider-Track {
3070
4188
  position: relative;
3071
4189
  height: 6px;
3072
- background: var(--cx-workflow-slider-track-color);
4190
+ background: var(--cx-workflow-slider-track-color, var(--cx-ui-divider));
3073
4191
  border-radius: 10px;
3074
4192
  cursor: pointer;
3075
4193
  }
@@ -3077,7 +4195,7 @@ span.CanvasXpressMousePosition {
3077
4195
  .cX-Workflow-Slider-Fill {
3078
4196
  position: absolute;
3079
4197
  height: 100%;
3080
- background: var(--cx-workflow-slider-fill-color);
4198
+ background: var(--cx-workflow-slider-fill-color, var(--cx-ui-accent));
3081
4199
  border-radius: 10px;
3082
4200
  width: 0%;
3083
4201
  }
@@ -3087,12 +4205,12 @@ span.CanvasXpressMousePosition {
3087
4205
  top: 50%;
3088
4206
  width: 22px;
3089
4207
  height: 22px;
3090
- background: var(--cx-workflow-slider-thumb-color);
3091
- border: 2px solid var(--cx-workflow-slider-thumb-border-color);
4208
+ background: var(--cx-workflow-slider-thumb-color, var(--cx-ui-accent));
4209
+ border: 2px solid var(--cx-workflow-slider-thumb-border-color, var(--cx-ui-surface));
3092
4210
  border-radius: 50%;
3093
4211
  transform: translate(-50%, -50%);
3094
4212
  box-shadow: none;
3095
- z-index: 10;
4213
+ z-index: var(--cx-z-raised);
3096
4214
  }
3097
4215
 
3098
4216
  .cX-Workflow-Settings {
@@ -3101,12 +4219,12 @@ span.CanvasXpressMousePosition {
3101
4219
  gap: 12px;
3102
4220
  padding-top: 5px;
3103
4221
  font-size: var(--cx-workflow-list-label-font-size);
3104
- color: var(--cx-workflow-text-color);
4222
+ color: var(--cx-workflow-text-color, var(--cx-ui-text));
3105
4223
  }
3106
4224
 
3107
4225
  .cX-Workflow-Settings span.cX-Toggle {
3108
4226
  font-size: var(--cx-workflow-list-label-font-size);
3109
- color: var(--cx-workflow-text-color);
4227
+ color: var(--cx-workflow-text-color, var(--cx-ui-text));
3110
4228
  }
3111
4229
 
3112
4230
  .cX-Workflow-Duration-Area {
@@ -3131,7 +4249,7 @@ input[type=range].cX-Workflow-Duration-Slider {
3131
4249
  width: auto;
3132
4250
  height: 6px;
3133
4251
  cursor: pointer;
3134
- background: var(--cx-workflow-slider-track-color);
4252
+ background: var(--cx-workflow-slider-track-color, var(--cx-ui-divider));
3135
4253
  border-radius: 10px;
3136
4254
  }
3137
4255
 
@@ -3142,8 +4260,8 @@ input[type=range].cX-Workflow-Duration-Slider::-webkit-slider-thumb {
3142
4260
  width: 16px;
3143
4261
  height: 16px;
3144
4262
  border-radius: 50%;
3145
- background: var(--cx-workflow-slider-thumb-color);
3146
- border: 2px solid var(--cx-workflow-slider-thumb-border-color);
4263
+ background: var(--cx-workflow-slider-thumb-color, var(--cx-ui-accent));
4264
+ border: 2px solid var(--cx-workflow-slider-thumb-border-color, var(--cx-ui-surface));
3147
4265
  }
3148
4266
 
3149
4267
  input[type=range].cX-Workflow-Duration-Slider::-moz-range-thumb {
@@ -3151,19 +4269,19 @@ input[type=range].cX-Workflow-Duration-Slider::-moz-range-thumb {
3151
4269
  width: 16px;
3152
4270
  height: 16px;
3153
4271
  border-radius: 50%;
3154
- background: var(--cx-workflow-slider-thumb-color);
3155
- border: 2px solid var(--cx-workflow-slider-thumb-border-color);
4272
+ background: var(--cx-workflow-slider-thumb-color, var(--cx-ui-accent));
4273
+ border: 2px solid var(--cx-workflow-slider-thumb-border-color, var(--cx-ui-surface));
3156
4274
  }
3157
4275
 
3158
4276
  .cX-Workflow-Duration-Value {
3159
4277
  min-width: 48px;
3160
4278
  text-align: right;
3161
4279
  white-space: nowrap;
3162
- color: var(--cx-workflow-list-text-color);
4280
+ color: var(--cx-workflow-list-text-color, var(--cx-ui-text));
3163
4281
  }
3164
4282
 
3165
4283
  .cX-Workflow-Timeline-Container {
3166
- border: 1px var(--cx-border-style) var(--cx-workflow-timeline-border-color);
4284
+ border: 1px var(--cx-border-style) var(--cx-workflow-timeline-border-color, var(--cx-ui-divider));
3167
4285
  border-radius: var(--cx-border-radius);
3168
4286
  margin-top: 10px;
3169
4287
  /* padding-top: 10px; */
@@ -3181,14 +4299,14 @@ input[type=range].cX-Workflow-Duration-Slider::-moz-range-thumb {
3181
4299
  }
3182
4300
 
3183
4301
  .cX-Workflow-Timeline-Item:hover {
3184
- background: var(--cx-workflow-hover-color);
4302
+ background: var(--cx-workflow-hover-color, var(--cx-ui-accent-tint));
3185
4303
  }
3186
4304
 
3187
4305
  .cX-Workflow-List-Label {
3188
4306
  position: absolute;
3189
4307
  transform: translateX(-50%);
3190
4308
  font-size: var(--cx-workflow-list-label-font-size);
3191
- color: var(--cx-workflow-list-text-color);
4309
+ color: var(--cx-workflow-list-text-color, var(--cx-ui-text));
3192
4310
  white-space: nowrap;
3193
4311
  }
3194
4312
 
@@ -3196,12 +4314,12 @@ input[type=range].cX-Workflow-Duration-Slider::-moz-range-thumb {
3196
4314
  position: absolute;
3197
4315
  transform: translateX(-50%);
3198
4316
  font-size: var(--cx-workflow-list-tick-font-size);
3199
- color: var(--cx-workflow-list-tick-color);
4317
+ color: var(--cx-workflow-list-tick-color, var(--cx-ui-divider));
3200
4318
  }
3201
4319
 
3202
4320
  .cX-Workflow-Timeline-Item.cX-Workflow-Active {
3203
- background-color: var(--cx-workflow-active-color);
3204
- color: var(--cx-workflow-text-color);
4321
+ background-color: var(--cx-workflow-active-color, var(--cx-ui-accent-tint));
4322
+ color: var(--cx-workflow-text-color, var(--cx-ui-text));
3205
4323
  border-radius: var(--cx-border-radius);
3206
4324
  font-weight: bold;
3207
4325
  }
@@ -3255,7 +4373,7 @@ input[type=range].cX-Workflow-Duration-Slider::-moz-range-thumb {
3255
4373
 
3256
4374
  .cX-Toolbar-Trigger {
3257
4375
  position: absolute;
3258
- z-index: 1000;
4376
+ z-index: var(--cx-z-toolbar);
3259
4377
  background: transparent;
3260
4378
  pointer-events: auto;
3261
4379
  }
@@ -3290,12 +4408,12 @@ input[type=range].cX-Workflow-Duration-Slider::-moz-range-thumb {
3290
4408
 
3291
4409
  .cX-Toolbar-Edge {
3292
4410
  position: absolute;
3293
- border: var(--cx-border);
4411
+ border: var(--cx-border, 1px solid var(--cx-ui-border-accent));
3294
4412
  padding: 1px;
3295
- background: var(--cx-background-widgets-color);
4413
+ background: var(--cx-background-widgets-color, var(--cx-ui-surface));
3296
4414
  display: grid;
3297
4415
  opacity: 0;
3298
- z-index: 1001;
4416
+ z-index: var(--cx-z-toolbar-edge);
3299
4417
  transition: all var(--cx-transition-speed) ease;
3300
4418
  pointer-events: none;
3301
4419
  overflow: hidden;
@@ -3445,16 +4563,16 @@ canvas.CanvasXpress::selection {
3445
4563
 
3446
4564
  /* Hide Efect */
3447
4565
 
3448
- .appear {
4566
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).appear {
3449
4567
  transition: all var(--cx-transition-speed) linear;
3450
4568
  opacity: 1;
3451
4569
  }
3452
4570
 
3453
- .dissapear {
4571
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).dissapear {
3454
4572
  display: none;
3455
4573
  }
3456
4574
 
3457
- .dissapearHidden {
4575
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).dissapearHidden {
3458
4576
  transition: all var(--cx-transition-speed) linear;
3459
4577
  opacity: 0;
3460
4578
  }
@@ -3466,9 +4584,9 @@ canvas.CanvasXpress::selection {
3466
4584
 
3467
4585
  div.cX-Marker {
3468
4586
  box-sizing: border-box;
3469
- border: var(--cx-border);
4587
+ border: var(--cx-border, 1px solid var(--cx-ui-border-accent));
3470
4588
  border-radius: var(--cx-border-radius);
3471
- background-color: var(--cx-background-widgets-color);
4589
+ background-color: var(--cx-background-widgets-color, var(--cx-ui-surface));
3472
4590
  cursor: move;
3473
4591
  font: var(--cx-font);
3474
4592
  width: 308px;
@@ -3497,7 +4615,7 @@ textarea.cX-Marker{
3497
4615
  resize: none;
3498
4616
  padding-left: 5px;
3499
4617
  border-radius: var(--cx-border-radius);
3500
- border: var(--cx-border);
4618
+ border: var(--cx-border, 1px solid var(--cx-ui-border-accent));
3501
4619
  }
3502
4620
 
3503
4621
  input.cX-Marker {
@@ -3507,7 +4625,7 @@ input.cX-Marker {
3507
4625
  outline: none;
3508
4626
  padding-left: 5px;
3509
4627
  border-radius: var(--cx-border-radius);
3510
- border: var(--cx-border);
4628
+ border: var(--cx-border, 1px solid var(--cx-ui-border-accent));
3511
4629
  }
3512
4630
 
3513
4631
  select.cX-Marker {
@@ -3518,7 +4636,7 @@ select.cX-Marker {
3518
4636
  outline: none;
3519
4637
  padding-left: 5px;
3520
4638
  border-radius: var(--cx-border-radius);
3521
- border: var(--cx-border);
4639
+ border: var(--cx-border, 1px solid var(--cx-ui-border-accent));
3522
4640
  }
3523
4641
 
3524
4642
  .cX-Marker-Button-Container {
@@ -3537,7 +4655,7 @@ select.cX-Marker {
3537
4655
  .cX-Marker-Add-Update {
3538
4656
  float: left;
3539
4657
  border-radius: var(--cx-border-radius);
3540
- border: var(--cx-border);
4658
+ border: var(--cx-border, 1px solid var(--cx-ui-border-accent));
3541
4659
  position: relative;
3542
4660
  width: 125px;
3543
4661
  height: 36px;
@@ -3614,7 +4732,7 @@ tr.cX-DataTable-DOE {
3614
4732
  }
3615
4733
 
3616
4734
  .cX-DataTable-Container > table > tbody > tr > th {
3617
- background-color: rgb(255, 255, 255);
4735
+ background-color: var(--cx-ui-surface);
3618
4736
  margin: 1px;
3619
4737
  }
3620
4738
 
@@ -3641,27 +4759,29 @@ tr.cX-DataTable-DOE {
3641
4759
 
3642
4760
  .cX-DataTable-Vertical-Scrollbar,
3643
4761
  .cX-DataTable-Horizontal-Scrollbar {
3644
- background-color: var(--cx-background-widgets-color);
4762
+ background-color: var(--cx-background-widgets-color, var(--cx-ui-surface));
3645
4763
  }
3646
4764
 
4765
+ /* Outer frame: the solid accent border shared by every widget frame (DataFilter cards,
4766
+ * Customizer cards); the light chrome border is kept for the table's internal dividers. */
3647
4767
  .cX-DataTable {
3648
4768
  background-color: transparent;
3649
- border: 1px var(--cx-border-style) var(--cx-datatable-banner-border-color);
4769
+ border: 1px var(--cx-border-style) var(--cx-datatable-border-color, var(--cx-ui-border-accent));
3650
4770
  border-radius: var(--cx-border-radius);
3651
4771
  clear: both;
3652
- color: var(--cx-font-color);
4772
+ color: var(--cx-font-color, var(--cx-ui-text));
3653
4773
  font-family: var(--cx-font-family);
3654
4774
  font-size: var(--cx-font-size);
3655
4775
  overflow: hidden;
3656
- z-index: 10001;
4776
+ z-index: var(--cx-z-panel-active);
3657
4777
  }
3658
4778
 
3659
4779
  /* Data Table Banner */
3660
4780
 
3661
4781
  .cX-DataTable-Banner {
3662
- background-color: var(--cx-datatable-banner-background-color);
3663
- border-bottom: 1px var(--cx-border-style) var(--cx-datatable-banner-border-color);
3664
- color: var(--cx-datatable-banner-text-color);
4782
+ background-color: var(--cx-datatable-banner-background-color, var(--cx-ui-chrome));
4783
+ border-bottom: 1px var(--cx-border-style) var(--cx-datatable-banner-border-color, var(--cx-ui-chrome-border));
4784
+ color: var(--cx-datatable-banner-text-color, var(--cx-ui-on-chrome));
3665
4785
  display: flex;
3666
4786
  align-items: center;
3667
4787
  }
@@ -3671,10 +4791,10 @@ tr.cX-DataTable-DOE {
3671
4791
  }
3672
4792
 
3673
4793
  input.cX-DataTable-Search {
3674
- background-color: var(--cx-datatable-background-color);
3675
- border: 1px var(--cx-border-style) var(--cx-datatable-banner-border-color);
4794
+ background-color: var(--cx-datatable-background-color, var(--cx-ui-surface));
4795
+ border: 1px var(--cx-border-style) var(--cx-datatable-border-color, var(--cx-ui-border-accent));
3676
4796
  border-radius: var(--cx-border-radius);
3677
- color: var(--cx-datatable-banner-text-color);
4797
+ color: var(--cx-datatable-banner-text-color, var(--cx-ui-on-chrome));
3678
4798
  margin-right: 10px;
3679
4799
  padding: 10px;
3680
4800
  outline: none;
@@ -3682,18 +4802,11 @@ input.cX-DataTable-Search {
3682
4802
  display: flex;
3683
4803
  }
3684
4804
 
3685
- input[type="search"].cX-DataTable-Search::-webkit-search-cancel-button {
3686
- -webkit-appearance: auto;
3687
- height: 16px;
3688
- width: 16px;
3689
- cursor: pointer;
3690
- }
3691
-
3692
4805
  /* Data Table Toolbar */
3693
4806
 
3694
4807
  .cX-DataTable-Toolbar {
3695
- background-color: var(--cx-datatable-toolbar-background-color);
3696
- border-bottom: 1px var(--cx-border-style) var(--cx-datatable-banner-border-color);
4808
+ background-color: var(--cx-datatable-toolbar-background-color, var(--cx-ui-surface));
4809
+ border-bottom: 1px var(--cx-border-style) var(--cx-datatable-banner-border-color, var(--cx-ui-chrome-border));
3697
4810
  display: flex;
3698
4811
  align-items: center;
3699
4812
  justify-content: flex-end;
@@ -3725,13 +4838,13 @@ input[type="search"].cX-DataTable-Search::-webkit-search-cancel-button {
3725
4838
  .cX-DataTable-Status,
3726
4839
  .cX-DataTable-Container {
3727
4840
  font-family: var(--cx-font-family);
3728
- color: var(--cx-font-color);
4841
+ color: var(--cx-font-color, var(--cx-ui-text));
3729
4842
  }
3730
4843
 
3731
4844
  svg.cX-DataTable-Toolbar-Image {
3732
4845
  background: var(--cx-color-transparent) !important;
3733
4846
  border-radius: var(--cx-border-radius);
3734
- border: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
4847
+ border: 1px var(--cx-border-style) var(--cx-datatable-border-color, var(--cx-ui-border-accent)) !important;
3735
4848
  padding: 2px;
3736
4849
  box-shadow: 0 0 0px var(--cx-color-transparent) !important;
3737
4850
  cursor: pointer;
@@ -3750,7 +4863,7 @@ svg.cX-DataTable-Toolbar-Image-Logo {
3750
4863
  margin-top: 5px;
3751
4864
  margin-left: 8px;
3752
4865
  width: 16px;
3753
- border-left: 1px var(--cx-border-style) var(--cx-datatable-toolbar-border-color);
4866
+ border-left: 1px var(--cx-border-style) var(--cx-datatable-toolbar-border-color, var(--cx-ui-chrome-border));
3754
4867
  }
3755
4868
 
3756
4869
  /* Data Table Body */
@@ -3760,12 +4873,12 @@ svg.cX-DataTable-Toolbar-Image-Logo {
3760
4873
  }
3761
4874
 
3762
4875
  .cX-DataTable-Header-Viewport {
3763
- border-bottom: 1px var(--cx-border-style) var(--cx-datatable-border-color);
4876
+ border-bottom: 1px var(--cx-border-style) var(--cx-datatable-border-color, var(--cx-ui-border-accent));
3764
4877
  border-left: none;
3765
- border-right: 1px var(--cx-border-style) var(--cx-datatable-border-color);
4878
+ border-right: 1px var(--cx-border-style) var(--cx-datatable-border-color, var(--cx-ui-border-accent));
3766
4879
  border-top: none;
3767
4880
  overflow: hidden;
3768
- z-index: 1;
4881
+ z-index: var(--cx-z-base);
3769
4882
  }
3770
4883
 
3771
4884
  .cX-DataTable-Vertical-Scrollbar {
@@ -3797,15 +4910,15 @@ svg.cX-DataTable-Toolbar-Image-Logo {
3797
4910
  /* Data Table Status */
3798
4911
 
3799
4912
  .cX-DataTable-Status {
3800
- background-color: var(--cx-datatable-status-background-color);
3801
- border-top: 1px var(--cx-border-style) var(--cx-datatable-status-border-color);
4913
+ background-color: var(--cx-datatable-status-background-color, var(--cx-ui-chrome-strong));
4914
+ border-top: 1px var(--cx-border-style) var(--cx-datatable-status-border-color, var(--cx-ui-chrome-border));
3802
4915
  position: relative;
3803
4916
  align-items: center;
3804
4917
  display: flex;
3805
4918
  font-family: var(--cx-font-family);
3806
4919
  font-weight: normal;
3807
4920
  font-variant-numeric: tabular-nums;
3808
- color: var(--cx-datatable-status-text-color);
4921
+ color: var(--cx-datatable-status-text-color, var(--cx-ui-on-chrome-strong));
3809
4922
  }
3810
4923
 
3811
4924
  .cX-DataTable-Status-Left {
@@ -3817,21 +4930,21 @@ svg.cX-DataTable-Toolbar-Image-Logo {
3817
4930
  align-items: center;
3818
4931
  margin-left: 20px;
3819
4932
  font-size: var(--cx-font-size);
3820
- color: var(--cx-datatable-status-text-color);
4933
+ color: var(--cx-datatable-status-text-color, var(--cx-ui-on-chrome-strong));
3821
4934
  }
3822
4935
 
3823
4936
  /* Data Table Pagination */
3824
4937
 
3825
4938
  .cX-DataTable-Pagination {
3826
- background-color: var(--cx-datatable-pagination-background-color);
3827
- border-top: 1px var(--cx-border-style) var(--cx-datatable-pagination-border-color);
4939
+ background-color: var(--cx-datatable-pagination-background-color, var(--cx-ui-chrome-strong));
4940
+ border-top: 1px var(--cx-border-style) var(--cx-datatable-pagination-border-color, var(--cx-ui-chrome-border));
3828
4941
  position: relative;
3829
4942
  align-items: center;
3830
4943
  display: flex;
3831
4944
  font-family: var(--cx-font-family);
3832
4945
  font-weight: normal;
3833
4946
  font-variant-numeric: tabular-nums;
3834
- color: var(--cx-datatable-pagination-text-color);
4947
+ color: var(--cx-datatable-pagination-text-color, var(--cx-ui-on-chrome-strong));
3835
4948
  }
3836
4949
 
3837
4950
  .cX-DataTable-Pagination-Size {
@@ -3842,10 +4955,10 @@ svg.cX-DataTable-Toolbar-Image-Logo {
3842
4955
  }
3843
4956
 
3844
4957
  .cX-DataTable-Pagination-Size-Select {
3845
- background-color: var(--cx-datatable-background-color);
3846
- border: 1px var(--cx-border-style) var(--cx-datatable-pagination-border-color);
4958
+ background-color: var(--cx-datatable-background-color, var(--cx-ui-surface));
4959
+ border: 1px var(--cx-border-style) var(--cx-datatable-pagination-border-color, var(--cx-ui-chrome-border));
3847
4960
  border-radius: var(--cx-border-radius);
3848
- color: var(--cx-datatable-pagination-select-text-color);
4961
+ color: var(--cx-datatable-pagination-select-text-color, var(--cx-ui-text));
3849
4962
  height: 20px;
3850
4963
  padding: 2px;
3851
4964
  outline: none;
@@ -3883,7 +4996,7 @@ svg.cX-DataTable-Toolbar-Image-Logo {
3883
4996
  table.cX-DataTable,
3884
4997
  .cX-DataTable-Tooltip {
3885
4998
  border: none !important;
3886
- color: var(--cx-font-color);
4999
+ color: var(--cx-font-color, var(--cx-ui-text));
3887
5000
  position: absolute;
3888
5001
  table-layout: fixed;
3889
5002
  }
@@ -3898,7 +5011,7 @@ table.cX-DataTable,
3898
5011
 
3899
5012
  .cX-DataTable-Container .cX-DataTable-Row th,
3900
5013
  .cX-DataTable-Container .cX-DataTable-Row td {
3901
- border: 1px solid var(--cx-datatable-cell-border-color);
5014
+ border: 1px solid var(--cx-datatable-cell-border-color, var(--cx-ui-border-subtle));
3902
5015
  }
3903
5016
 
3904
5017
  .cX-DataTable-Container .cX-DataTable-Row {
@@ -3927,11 +5040,11 @@ table.cX-DataTable,
3927
5040
 
3928
5041
  .cX-DataTable-Row-Active td,
3929
5042
  .cX-DataTable-Row-Active th {
3930
- background-color: var(--cx-datatable-row-hover-background-color)!important;
5043
+ background-color: var(--cx-datatable-row-hover-background-color, var(--cx-ui-accent-tint))!important;
3931
5044
  }
3932
5045
 
3933
5046
  /* "colorful" style: the selected row is highlighted in amber so it stands out
3934
- * from the purple header/hover and the light-purple striping. */
5047
+ * from the blue header/hover and the light-blue striping. */
3935
5048
  .cX-DataTable-Colorful .cX-DataTable-Row-Active {
3936
5049
  background-color: rgba(242, 169, 0, 0.22) !important;
3937
5050
  }
@@ -3941,7 +5054,7 @@ table.cX-DataTable,
3941
5054
  }
3942
5055
 
3943
5056
  .cX-DataTable-Row:not(:first-child):hover {
3944
- background-color: var(--cx-datatable-row-hover-background-color) !important;
5057
+ background-color: var(--cx-datatable-row-hover-background-color, var(--cx-ui-accent-tint)) !important;
3945
5058
  }
3946
5059
 
3947
5060
  .cX-DataTable-Row:not(:first-child):hover td,
@@ -3953,12 +5066,12 @@ table.cX-DataTable,
3953
5066
 
3954
5067
  .cX-DataTable-Cell-Head,
3955
5068
  .cX-DataTable-Cell-Head-Active {
3956
- background: var(--cx-datatable-accent-color);
5069
+ background: var(--cx-datatable-accent-color, var(--cx-ui-accent));
3957
5070
  border-top: none;
3958
- border-bottom: var(--cx-datatable-cell-border-color);
5071
+ border-bottom: var(--cx-datatable-cell-border-color, var(--cx-ui-border-subtle));
3959
5072
  border-left: none;
3960
- border-right: var(--cx-datatable-cell-border-color);
3961
- color: var(--cx-datatable-header-text-color);
5073
+ border-right: var(--cx-datatable-cell-border-color, var(--cx-ui-border-subtle));
5074
+ color: var(--cx-datatable-header-text-color, var(--cx-ui-text));
3962
5075
  cursor: pointer;
3963
5076
  font-size: var(--cx-datatable-header-font-size);
3964
5077
  font-family: var(--cx-datatable-cell-font-family);
@@ -4054,7 +5167,7 @@ table.cX-DataTable,
4054
5167
  }
4055
5168
 
4056
5169
  .cX-DataTable-Cell-Header-Resize {
4057
- background: var(--cx-datatable-cell-border-color);
5170
+ background: var(--cx-datatable-cell-border-color, var(--cx-ui-border-subtle));
4058
5171
  cursor: col-resize;
4059
5172
  position: absolute;
4060
5173
  right: 0;
@@ -4064,7 +5177,7 @@ table.cX-DataTable,
4064
5177
  }
4065
5178
 
4066
5179
  .cX-DataTable-Cell-Head-Text {
4067
- color: var(--cx-datatable-header-text-color)
5180
+ color: var(--cx-datatable-header-text-color, var(--cx-ui-text))
4068
5181
  }
4069
5182
 
4070
5183
  /* Data Table Cells td */
@@ -4079,13 +5192,13 @@ table.cX-DataTable,
4079
5192
  td.cX-DataTable-Cell,
4080
5193
  td.cX-DataTable-Cell-Active {
4081
5194
  border-top: none !important;
4082
- border-bottom: var(--cx-datatable-cell-border-color);
5195
+ border-bottom: var(--cx-datatable-cell-border-color, var(--cx-ui-border-subtle));
4083
5196
  border-left: none !important;
4084
- border-right: var(--cx-datatable-cell-border-color);
5197
+ border-right: var(--cx-datatable-cell-border-color, var(--cx-ui-border-subtle));
4085
5198
  font-size: var(--cx-datatable-body-font-size);
4086
5199
  font-family: var(--cx-datatable-cell-font-family);
4087
5200
  font-variant-numeric: tabular-nums;
4088
- color: var(--cx-datatable-cell-text-color);
5201
+ color: var(--cx-datatable-cell-text-color, var(--cx-ui-text));
4089
5202
  padding: 0 3px 0 0 !important;
4090
5203
  vertical-align: middle;
4091
5204
  width: unset !important;
@@ -4103,7 +5216,7 @@ td.cX-DataTable-Cell-Active {
4103
5216
  box-sizing: border-box;
4104
5217
  font-size: var(--cx-datatable-cell-font-size);
4105
5218
  font-family: var(--cx-datatable-cell-font-family);
4106
- color: var(--cx-datatable-cell-text-color);
5219
+ color: var(--cx-datatable-cell-text-color, var(--cx-ui-text));
4107
5220
  margin: 0px !important;
4108
5221
  overflow: hidden;
4109
5222
  position: relative;
@@ -4127,7 +5240,7 @@ td.cX-DataTable-Cell-Active {
4127
5240
 
4128
5241
  .cX-DataTable-Cell-Link,
4129
5242
  .cX-DataTable-Cell-Link-Active {
4130
- text-decoration: underline var(--cx-border);
5243
+ text-decoration: underline var(--cx-border, 1px solid var(--cx-ui-border-accent));
4131
5244
  text-underline-offset: 2px;
4132
5245
  cursor: pointer;
4133
5246
  display: flex;
@@ -4137,17 +5250,17 @@ td.cX-DataTable-Cell-Active {
4137
5250
  .cX-DataTable-Cell-Active,
4138
5251
  .cX-DataTable-Cell-Number-Active,
4139
5252
  .cX-DataTable-Cell-Link-Active {
4140
- background-color: var(--cx-datatable-cell-hover-background-color) !important;
4141
- border: 1px var(--cx-border-style) var(--cx-datatable-activecell-border-color) !important;
5253
+ background-color: var(--cx-datatable-cell-hover-background-color, var(--cx-ui-accent-tint)) !important;
5254
+ border: 1px var(--cx-border-style) var(--cx-datatable-activecell-border-color, var(--cx-ui-active-cell)) !important;
4142
5255
  }
4143
5256
 
4144
5257
  .cX-DataTable-Cell-Text {
4145
- color: var(--cx-datatable-cell-text-color)
5258
+ color: var(--cx-datatable-cell-text-color, var(--cx-ui-text))
4146
5259
  }
4147
5260
 
4148
5261
  td.cX-DataTable-Cell > .cX-DataTable-Cell:hover,
4149
5262
  td.cX-DataTable-Cell > .cX-DataTable-Cell-Number:hover {
4150
- background-color: var(--cx-datatable-cell-hover-background-color);
5263
+ background-color: var(--cx-datatable-cell-hover-background-color, var(--cx-ui-accent-tint));
4151
5264
  }
4152
5265
 
4153
5266
  .cX-DataTable-Cell-Tooltip {
@@ -4169,7 +5282,7 @@ td.cX-DataTable-Cell > .cX-DataTable-Cell-Number:hover {
4169
5282
  background-size: contain;
4170
5283
  background-repeat: no-repeat;
4171
5284
  background-position: center center;
4172
- background-color: #ffffff;
5285
+ background-color: var(--cx-ui-surface);
4173
5286
  position: relative;
4174
5287
  }
4175
5288
 
@@ -4182,7 +5295,7 @@ td.cX-DataTable-Cell > .cX-DataTable-Cell-Number:hover {
4182
5295
  /************************************/
4183
5296
 
4184
5297
  .cX-DataTable-Container .cX-DataTable-Row:not(:first-child):hover {
4185
- background-color: var(--cx-datatable-row-hover-background-color) !important;
5298
+ background-color: var(--cx-datatable-row-hover-background-color, var(--cx-ui-accent-tint)) !important;
4186
5299
  }
4187
5300
 
4188
5301
  .cX-DataTable-Container .cX-DataTable-Cell-Tooltip {
@@ -4195,6 +5308,10 @@ td.cX-DataTable-Cell > .cX-DataTable-Cell-Number:hover {
4195
5308
  width: 120px;
4196
5309
  }
4197
5310
 
5311
+ /* Dark theme: the column menu link takes the chart's dark accent text (the light theme keeps the browser link colour; per-style dark accents plan, P3) */
5312
+ [data-cx-ui-theme="dark"] .cX-DataTable-Cell-Header-Menu {
5313
+ color: var(--cx-ui-accent-strong);
5314
+ }
4198
5315
  /* @category: widget */
4199
5316
  /***************/
4200
5317
  /* Data Filter */
@@ -4207,7 +5324,7 @@ td.cX-DataTable-Cell > .cX-DataTable-Cell-Number:hover {
4207
5324
  .cX-DataFilter-Text-Active {
4208
5325
  font-family: var(--cx-font-family);
4209
5326
  font-size: var(--cx-x-large-font-size);
4210
- color: var(--cx-font-color);
5327
+ color: var(--cx-font-color, var(--cx-ui-text));
4211
5328
  }
4212
5329
 
4213
5330
  .cX-DataFilter,
@@ -4222,12 +5339,12 @@ td.cX-DataTable-Cell > .cX-DataTable-Cell-Number:hover {
4222
5339
  top: 0px;
4223
5340
  left: 0px;
4224
5341
  display: none;
4225
- z-index: 10000;
5342
+ z-index: var(--cx-z-panel);
4226
5343
  height: 100%;
4227
5344
  }
4228
5345
 
4229
5346
  .cX-DataFilter-Toolbar {
4230
- border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-datatable-border-color)) !important;
5347
+ border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-ui-border-accent)) !important;
4231
5348
  border-radius: var(--cx-border-radius);
4232
5349
  width: 100%;
4233
5350
  left: 0px;
@@ -4238,9 +5355,9 @@ td.cX-DataTable-Cell > .cX-DataTable-Cell-Number:hover {
4238
5355
  float: left;
4239
5356
  position: relative;
4240
5357
  width: 100%;
4241
- z-index: 10001;
4242
- background-color: var(--cx-datafilter-toolbar-background-color, var(--cx-datatable-banner-background-color));
4243
- border-bottom: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-datatable-border-color));
5358
+ z-index: var(--cx-z-panel-active);
5359
+ background-color: var(--cx-datafilter-toolbar-background-color, var(--cx-ui-chrome));
5360
+ border-bottom: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-ui-border-accent));
4244
5361
  border-radius: var(--cx-border-radius) var(--cx-border-radius) 0px 0px;
4245
5362
  display: flex;
4246
5363
  align-items: center;
@@ -4273,16 +5390,19 @@ td.cX-DataTable-Cell > .cX-DataTable-Cell-Number:hover {
4273
5390
  top: 6px;
4274
5391
  background-repeat: no-repeat;
4275
5392
  background-position: -0px;
4276
- color: var(--cx-datafilter-text-color, var(--cx-font-color));
5393
+ color: var(--cx-datafilter-text-color, var(--cx-ui-text));
4277
5394
  font-size: var(--cx-datafilter-font-size, var(--cx-font-size));
4278
5395
  }
4279
5396
 
5397
+ /* Sits on the chrome-coloured bar, so it takes the text colour readable on it: white on modern's
5398
+ * accent bar, dark on the white/grey bars, light in the dark UI theme. */
4280
5399
  .cX-DataFilter-Toolbar-Text {
4281
5400
  flex: 1;
4282
5401
  top: 0px;
4283
5402
  left: 0px;
4284
5403
  padding-left: 8px;
4285
5404
  font-size: var(--cx-font-size);
5405
+ color: var(--cx-ui-on-chrome);
4286
5406
  }
4287
5407
 
4288
5408
  svg.cX-DataFilter-Toolbar-Image,
@@ -4291,28 +5411,30 @@ svg.cX-DataFilter-Toolbar-ImageNB {
4291
5411
  cursor: pointer;
4292
5412
  }
4293
5413
 
5414
+ /* Left of the icon row: takes the free space, the icons stay right, long counts ellipsize */
4294
5415
  .cX-DataFilter-Summary {
4295
- width: 100%;
4296
- padding: 2px 8px 4px 8px;
5416
+ flex: 1 1 auto;
5417
+ min-width: 0;
5418
+ padding: 0 4px;
4297
5419
  line-height: 1.2;
4298
5420
  white-space: nowrap;
4299
5421
  overflow: hidden;
4300
5422
  text-overflow: ellipsis;
4301
5423
  opacity: 0.7;
4302
- color: var(--cx-datafilter-text-color, var(--cx-font-color));
5424
+ color: var(--cx-datafilter-text-color, var(--cx-ui-text));
4303
5425
  font-size: var(--cx-datafilter-font-size, var(--cx-font-size));
4304
5426
  }
4305
5427
 
4306
5428
 
4307
5429
  .cX-DataFilter-Content {
4308
5430
  box-sizing: border-box;
4309
- background-color: var(--cx-datafilter-background-color, var(--cx-background-widgets-color));
4310
- border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-datatable-border-color));
5431
+ background-color: var(--cx-datafilter-background-color, var(--cx-ui-surface));
5432
+ border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-ui-border-accent));
4311
5433
  border-radius: 0px 0px var(--cx-border-radius) var(--cx-border-radius);
4312
5434
  border-top: 0px;
4313
5435
  font-family: var(--cx-font-family);
4314
5436
  font-size: var(--cx-datafilter-font-size, var(--cx-font-size));
4315
- color: var(--cx-datafilter-text-color, var(--cx-font-color));
5437
+ color: var(--cx-datafilter-text-color, var(--cx-ui-text));
4316
5438
  overflow-y: auto;
4317
5439
  overflow-x: hidden;
4318
5440
  padding: 2px;
@@ -4321,9 +5443,8 @@ svg.cX-DataFilter-Toolbar-ImageNB {
4321
5443
  display: none;
4322
5444
  }
4323
5445
 
5446
+ /* The control itself is the shared checkbox (05-ui-primitives.css); this keeps the list's size */
4324
5447
  input[type=checkbox].cX-Checkbox {
4325
- accent-color: var(--cx-background-accent-color);
4326
- border-radius: var(--cx-border-radius);
4327
5448
  height: 14px;
4328
5449
  width: 14px;
4329
5450
  margin: 2px;
@@ -4342,9 +5463,9 @@ label.cX-Checkbox-Label {
4342
5463
  }
4343
5464
 
4344
5465
  input.cX-DataFilter-Search {
4345
- border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-datatable-border-color));
5466
+ border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-ui-border-accent));
4346
5467
  border-radius: var(--cx-border-radius);
4347
- color: var(--cx-datafilter-text-color, var(--cx-font-color));
5468
+ color: var(--cx-datafilter-text-color, var(--cx-ui-text));
4348
5469
  cursor: default;
4349
5470
  width: calc(100% - 10px);
4350
5471
  margin-left: 5px;
@@ -4355,13 +5476,6 @@ input.cX-DataFilter-Search {
4355
5476
  display: flex;
4356
5477
  }
4357
5478
 
4358
- input[type="search"].cX-DataFilter-Search::-webkit-search-cancel-button {
4359
- -webkit-appearance: auto;
4360
- height: 16px;
4361
- width: 16px;
4362
- cursor: pointer;
4363
- }
4364
-
4365
5479
  .cX-DataFilter-Container,
4366
5480
  .cX-DataFilter-Container-Mask,
4367
5481
  .cX-DataFilter-Container-Hoverable {
@@ -4378,18 +5492,18 @@ input[type="search"].cX-DataFilter-Search::-webkit-search-cancel-button {
4378
5492
  }
4379
5493
 
4380
5494
  .cX-DataFilter-Container-Mask {
4381
- border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-datatable-border-color));
5495
+ border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-ui-border-accent));
4382
5496
  margin: 5px;
4383
5497
  overflow-x: hidden;
4384
5498
  overflow-y: scroll;
4385
5499
  }
4386
5500
 
4387
5501
  .cX-DataFilter-Container-Hoverable:hover {
4388
- background-color: var(--cx-datafilter-hover-color, var(--cx-background-hover-color));
5502
+ background-color: var(--cx-datafilter-hover-color, var(--cx-ui-accent-tint));
4389
5503
  }
4390
5504
 
4391
5505
  .cX-DataFilter-Container-Hoverable {
4392
- border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-datatable-border-color));
5506
+ border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-ui-border-accent));
4393
5507
  border-radius: var(--cx-border-radius);
4394
5508
  margin: 2px;
4395
5509
  margin-bottom: 4px;
@@ -4428,16 +5542,16 @@ input[type="search"].cX-DataFilter-Search::-webkit-search-cancel-button {
4428
5542
  outline-color: var(--cx-item-accent) !important;
4429
5543
  }
4430
5544
  .cX-DataFilter-ItemAccent input[type=checkbox].cX-Checkbox {
4431
- accent-color: var(--cx-item-accent) !important;
5545
+ --cx-check-color: var(--cx-item-accent);
4432
5546
  }
4433
5547
 
4434
5548
  .cX-DataFilter-Head,
4435
5549
  .cX-DataFilter-Head-Active {
4436
- background: var(--cx-background-hover-color);
4437
- border: 1px var(--cx-border-style) var(--cx-datatable-border-color);
5550
+ background: var(--cx-background-hover-color, var(--cx-ui-accent-tint));
5551
+ border: 1px var(--cx-border-style) var(--cx-datatable-border-color, var(--cx-ui-border-accent));
4438
5552
  border-radius: var(--cx-border-radius);
4439
5553
  box-sizing: border-box;
4440
- color: var(--cx-font-color);
5554
+ color: var(--cx-font-color, var(--cx-ui-text));
4441
5555
  cursor: pointer;
4442
5556
  display: flex;
4443
5557
  align-items: center;
@@ -4463,18 +5577,18 @@ input[type="search"].cX-DataFilter-Search::-webkit-search-cancel-button {
4463
5577
  }
4464
5578
 
4465
5579
  svg.cX-DataFilter-Toolbar-Image {
4466
- border: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
5580
+ border: 1px var(--cx-border-style) var(--cx-datatable-border-color, var(--cx-ui-border-accent)) !important;
4467
5581
  border-radius: var(--cx-border-radius) !important;
4468
5582
  padding: 2px;
4469
5583
  }
4470
5584
 
4471
5585
  svg.cX-DataFilter-Toolbar-ImageNB {
4472
5586
  border: none !important;
4473
- z-index: 10002;
5587
+ z-index: var(--cx-z-popover);
4474
5588
  }
4475
5589
 
4476
5590
  .cX-DataFilter-Container-Mask-NoOverflow {
4477
- border: 1px var(--cx-border-style) var(--cx-datatable-border-color);
5591
+ border: 1px var(--cx-border-style) var(--cx-datatable-border-color, var(--cx-ui-border-accent));
4478
5592
  box-sizing: border-box;
4479
5593
  margin: 5px;
4480
5594
  overflow: hidden;
@@ -4483,21 +5597,21 @@ svg.cX-DataFilter-Toolbar-ImageNB {
4483
5597
  input.cX-DataFilter-Container-Input-Left {
4484
5598
  float: left;
4485
5599
  margin: 10px;
4486
- border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-datatable-border-color));
5600
+ border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-ui-border-accent));
4487
5601
  border-radius: var(--cx-border-radius);
4488
5602
  font-size: var(--cx-small-font-size);
4489
- color: var(--cx-datafilter-text-color, var(--cx-font-color));
4490
- background-color: var(--cx-datafilter-background-color, var(--cx-background-widgets-color));
5603
+ color: var(--cx-datafilter-text-color, var(--cx-ui-text));
5604
+ background-color: var(--cx-datafilter-background-color, var(--cx-ui-surface));
4491
5605
  }
4492
5606
 
4493
5607
  input.cX-DataFilter-Container-Input-Right {
4494
5608
  float: right;
4495
5609
  margin: 10px;
4496
- border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-datatable-border-color));
5610
+ border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-ui-border-accent));
4497
5611
  border-radius: var(--cx-border-radius);
4498
5612
  font-size: var(--cx-small-font-size);
4499
- color: var(--cx-datafilter-text-color, var(--cx-font-color));
4500
- background-color: var(--cx-datafilter-background-color, var(--cx-background-widgets-color));
5613
+ color: var(--cx-datafilter-text-color, var(--cx-ui-text));
5614
+ background-color: var(--cx-datafilter-background-color, var(--cx-ui-surface));
4501
5615
  }
4502
5616
 
4503
5617
  /* @category: widget */
@@ -4551,7 +5665,7 @@ label.cX-Toggle:hover div.cX-Toggle-Switch:before {
4551
5665
  }
4552
5666
 
4553
5667
  input.cX-Toggle:checked+div.cX-Toggle-Switch {
4554
- background: var(--cx-toggle-switch-background-color);
5668
+ background: var(--cx-toggle-switch-background-color, var(--cx-ui-control-on));
4555
5669
  }
4556
5670
 
4557
5671
  input.cX-Toggle:checked+div.cX-Toggle-Switch:before {
@@ -4609,8 +5723,8 @@ input.cX-RangeSlider-Max {
4609
5723
  border: none;
4610
5724
  border-radius: var(--cx-border-radius);
4611
5725
  font: var(--cx-font);
4612
- color: var(--cx-font-color);
4613
- background-color: var(--cx-background-widgets-color);
5726
+ color: var(--cx-font-color, var(--cx-ui-text));
5727
+ background-color: var(--cx-background-widgets-color, var(--cx-ui-surface));
4614
5728
  height: 22px;
4615
5729
  line-height: 100%;
4616
5730
  width: calc(50% - 6px);
@@ -4627,14 +5741,14 @@ input.cX-RangeSlider-Max {
4627
5741
 
4628
5742
  div.cX-RangeSlider {
4629
5743
  position: relative;
4630
- z-index: 10001;
5744
+ z-index: var(--cx-z-panel-active);
4631
5745
  height: 8px;
4632
5746
  margin: 0 15px;
4633
5747
  }
4634
5748
 
4635
5749
  div.cX-RangeSlider>div.cX-RangeSlider-Track {
4636
5750
  position: absolute;
4637
- z-index: 10001;
5751
+ z-index: var(--cx-z-panel-active);
4638
5752
  left: 0;
4639
5753
  right: 0;
4640
5754
  top: 0;
@@ -4644,9 +5758,9 @@ div.cX-RangeSlider>div.cX-RangeSlider-Track {
4644
5758
  }
4645
5759
 
4646
5760
  div.cX-RangeSlider>div.cX-RangeSlider-Range {
4647
- background-color: var(--cx-toggle-switch-background-color);
5761
+ background-color: var(--cx-toggle-switch-background-color, var(--cx-ui-control-on));
4648
5762
  position: absolute;
4649
- z-index: 10002;
5763
+ z-index: var(--cx-z-popover);
4650
5764
  left: 0%;
4651
5765
  right: 0%;
4652
5766
  top: 0;
@@ -4666,8 +5780,8 @@ div.cX-RangeSlider>div.cX-RangeSlider-Thumb-Right {
4666
5780
 
4667
5781
  div.cX-RangeSlider>div.cX-RangeSlider-Thumb-Left,
4668
5782
  div.cX-RangeSlider>div.cX-RangeSlider-Thumb-Right {
4669
- background-color: var(--cx-toggle-switch-background-color);
4670
- box-shadow: 0 0 0 0 var(--cx-background-hover-color);
5783
+ background-color: var(--cx-toggle-switch-background-color, var(--cx-ui-control-on));
5784
+ box-shadow: 0 0 0 0 var(--cx-background-hover-color, var(--cx-ui-accent-tint));
4671
5785
  }
4672
5786
 
4673
5787
  div.cX-RangeSlider>div.cX-RangeSlider-Thumb-Left {
@@ -4682,7 +5796,7 @@ div.cX-RangeSlider>div.cX-RangeSlider-Thumb-Right {
4682
5796
 
4683
5797
  div.cX-RangeSlider>div.cX-RangeSlider-Thumb-Left:hover,
4684
5798
  div.cX-RangeSlider>div.cX-RangeSlider-Thumb-Right:hover {
4685
- box-shadow: 0 0 0 10px var(--cx-background-hover-color);
5799
+ box-shadow: 0 0 0 10px var(--cx-background-hover-color, var(--cx-ui-accent-tint));
4686
5800
  }
4687
5801
 
4688
5802
  input[type=range].cX-Customizer-RightItemRangeSelect {
@@ -4702,7 +5816,7 @@ input[type=range].cX-Customizer-RightItemRangeSelect::-webkit-slider-thumb {
4702
5816
  width: 15px;
4703
5817
  height: 15px;
4704
5818
  border-radius: 50%;
4705
- background: var(--cx-toggle-switch-background-color);
5819
+ background: var(--cx-toggle-switch-background-color, var(--cx-ui-control-on));
4706
5820
  cursor: pointer;
4707
5821
  }
4708
5822
 
@@ -4710,22 +5824,22 @@ input[type=range].cX-Customizer-RightItemRangeSelect::-moz-range-thumb {
4710
5824
  width: 15px;
4711
5825
  height: 15px;
4712
5826
  border-radius: 50%;
4713
- background: var(--cx-toggle-switch-background-color);
5827
+ background: var(--cx-toggle-switch-background-color, var(--cx-ui-control-on));
4714
5828
  cursor: pointer;
4715
5829
  }
4716
5830
 
4717
- input[type=range] {
5831
+ :where([data-cx-ui-scope]) input[type=range] {
4718
5832
  position: absolute;
4719
5833
  pointer-events: none;
4720
5834
  appearance: none;
4721
5835
  -webkit-appearance: none;
4722
- z-index: 10002;
5836
+ z-index: var(--cx-z-popover);
4723
5837
  height: 10px;
4724
5838
  width: 100%;
4725
5839
  opacity: 0;
4726
5840
  }
4727
5841
 
4728
- input[type=range]::-webkit-slider-thumb {
5842
+ :where([data-cx-ui-scope]) input[type=range]::-webkit-slider-thumb {
4729
5843
  pointer-events: all;
4730
5844
  width: 30px;
4731
5845
  height: 30px;
@@ -4755,13 +5869,13 @@ span.cX-RangeSlider-Ticks {
4755
5869
  display: flex;
4756
5870
  justify-content: center;
4757
5871
  width: 1px;
4758
- background: var(--cx-toggle-switch-background-color);
5872
+ background: var(--cx-toggle-switch-background-color, var(--cx-ui-control-on));
4759
5873
  margin-bottom: 10px;
4760
5874
  }
4761
5875
 
4762
5876
  span.cX-RangeSlider-Ticks-Long,
4763
5877
  span.cX-RangeSlider-Ticks-Long-Small {
4764
- color: var(--cx-font-color);
5878
+ color: var(--cx-font-color, var(--cx-ui-text));
4765
5879
  height: 10px;
4766
5880
  line-height: 35px;
4767
5881
  font-size: var(--cx-small-font-size);
@@ -4776,7 +5890,7 @@ span.cX-RangeSlider-Ticks {
4776
5890
  * Input type number
4777
5891
  */
4778
5892
 
4779
- input[type=number]::-webkit-inner-spin-button {
5893
+ :where([data-cx-ui-scope]) input[type=number]::-webkit-inner-spin-button {
4780
5894
  appearance: none;
4781
5895
  -webkit-appearance: none;
4782
5896
  }
@@ -4802,12 +5916,12 @@ div.cX-DataFilter-Container-Mask-NoOverflow::-webkit-scrollbar-button {
4802
5916
  /*div.cX-DataFilter-Content::-webkit-scrollbar-track,*/
4803
5917
  div.cX-DataFilter-Container-Mask::-webkit-scrollbar-track,
4804
5918
  div.cX-DataFilter-Container-Mask-NoOverflow::-webkit-scrollbar-track {
4805
- background-color: var(--cx-background-widgets-color);
5919
+ background-color: var(--cx-background-widgets-color, var(--cx-ui-surface));
4806
5920
  }
4807
5921
 
4808
5922
  div.cX-DataTable-Horizontal-Scrollbar::-webkit-scrollbar-track,
4809
5923
  div.cX-DataTable-Vertical-Scrollbar::-webkit-scrollbar-track {
4810
- background-color: var(--cx-background-hover-color);
5924
+ background-color: var(--cx-background-hover-color, var(--cx-ui-accent-tint));
4811
5925
  border-radius: var(--cx-border-radius);
4812
5926
  }
4813
5927
 
@@ -4818,7 +5932,7 @@ div.cX-DataTable-Vertical-Scrollbar::-webkit-scrollbar-track:hover,
4818
5932
  /*div.cX-DataFilter-Content::-webkit-scrollbar-track:hover,*/
4819
5933
  div.cX-DataFilter-Container-Mask::-webkit-scrollbar-track:hover,
4820
5934
  div.cX-DataFilter-Container-Mask-NoOverflow::-webkit-scrollbar-track:hover {
4821
- background-color: var(--cx-background-hover-color);
5935
+ background-color: var(--cx-background-hover-color, var(--cx-ui-accent-tint));
4822
5936
  border-radius: var(--cx-border-radius);
4823
5937
  }
4824
5938
 
@@ -4829,14 +5943,14 @@ div.cX-DataFilter-Container-Mask::-webkit-scrollbar,
4829
5943
  div.cX-DataFilter-Container-Mask-NoOverflow::-webkit-scrollbar {
4830
5944
  width: 8px;
4831
5945
  height: 8px;
4832
- background-color: var(--cx-scrollbar-background-color);
5946
+ background-color: var(--cx-scrollbar-background-color, var(--cx-ui-scrollbar-track));
4833
5947
  }
4834
5948
 
4835
5949
  div.cX-DataTable-Horizontal-Scrollbar::-webkit-scrollbar,
4836
5950
  div.cX-DataTable-Vertical-Scrollbar::-webkit-scrollbar {
4837
5951
  width: 8px;
4838
5952
  height: 8px;
4839
- background-color: var(--cx-scrollbar-alt-background-color);
5953
+ background-color: var(--cx-scrollbar-alt-background-color, var(--cx-ui-scrollbar-track-alt));
4840
5954
  }
4841
5955
 
4842
5956
  /* All tracks thumbs */
@@ -4846,7 +5960,7 @@ div.cX-DataTable-Vertical-Scrollbar::-webkit-scrollbar-thumb,
4846
5960
  /*div.cX-DataFilter-Content::-webkit-scrollbar-thumb,*/
4847
5961
  div.cX-DataFilter-Container-Mask::-webkit-scrollbar-thumb,
4848
5962
  div.cX-DataFilter-Container-Mask-NoOverflow::-webkit-scrollbar-thumb {
4849
- background-color: var(--cx-scrollbar-thumb-color);
5963
+ background-color: var(--cx-scrollbar-thumb-color, var(--cx-ui-scrollbar-thumb));
4850
5964
  border-radius: var(--cx-border-radius);
4851
5965
  border: none;
4852
5966
  }
@@ -4856,13 +5970,13 @@ div.cX-DataTable-Vertical-Scrollbar::-webkit-scrollbar-thumb:hover,
4856
5970
  /*div.cX-DataFilter-Content::-webkit-scrollbar-thumb:hover,*/
4857
5971
  div.cX-DataFilter-Container-Mask::-webkit-scrollbar-thumb:hover,
4858
5972
  div.cX-DataFilter-Container-Mask-NoOverflow::-webkit-scrollbar-thumb:hover {
4859
- background-color: var(--cx-scrollbar-thumb-hover-color);
5973
+ background-color: var(--cx-scrollbar-thumb-hover-color, var(--cx-ui-scrollbar-thumb-hover));
4860
5974
  }
4861
5975
 
4862
5976
  .cX-DataFilter::selection,
4863
5977
  .cX-DataFilter-Toolbar::selection {
4864
5978
  background: var(--cx-color-transparent);
4865
- color: var(--cx-font-color);
5979
+ color: var(--cx-font-color, var(--cx-ui-text));
4866
5980
  }
4867
5981
  /* @category: widget */
4868
5982
  /*****************
@@ -4871,20 +5985,20 @@ div.cX-DataFilter-Container-Mask-NoOverflow::-webkit-scrollbar-thumb:hover {
4871
5985
 
4872
5986
  .cX-Menu-Container {
4873
5987
  position: sticky;
4874
- z-index: 100000;
5988
+ z-index: var(--cx-z-modal);
4875
5989
  background: transparent;
4876
5990
  height: 0px;
4877
5991
  }
4878
5992
 
4879
5993
  .cX-Menu {
4880
5994
  box-sizing: border-box;
4881
- background-color: var(--cx-context-menu-background-color, var(--cx-background-widgets-color));
5995
+ background-color: var(--cx-context-menu-background-color, var(--cx-ui-surface));
4882
5996
  background-image: url(data:image/gif;base64,R0lGODlh+gABAIcAAOLj4/Dw8P///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAP8ALAAAAAD6AAEAAAgfAAMIHEiwoMGBAAQcXMiwocOHECNKnEixosWLGCMGBAA7);
4883
5997
  background-repeat: repeat-y;
4884
- border: 1px var(--cx-border-style) var(--cx-context-menu-border-color, var(--cx-datatable-border-color));
5998
+ border: 1px var(--cx-border-style) var(--cx-context-menu-border-color, var(--cx-ui-border-accent));
4885
5999
  border-radius: var(--cx-border-radius);
4886
6000
  box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
4887
- color: var(--cx-context-menu-text-color, var(--cx-font-color));
6001
+ color: var(--cx-context-menu-text-color, var(--cx-ui-text));
4888
6002
  font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
4889
6003
  line-height: 100%;
4890
6004
  margin: 0px;
@@ -4895,11 +6009,11 @@ div.cX-DataFilter-Container-Mask-NoOverflow::-webkit-scrollbar-thumb:hover {
4895
6009
 
4896
6010
  .cX-Menu-Sub {
4897
6011
  box-sizing: border-box;
4898
- background-color: var(--cx-context-menu-background-color, var(--cx-background-widgets-color));
4899
- border: 1px var(--cx-border-style) var(--cx-context-menu-border-color, var(--cx-datatable-border-color));
6012
+ background-color: var(--cx-context-menu-background-color, var(--cx-ui-surface));
6013
+ border: 1px var(--cx-border-style) var(--cx-context-menu-border-color, var(--cx-ui-border-accent));
4900
6014
  border-radius: var(--cx-border-radius);
4901
6015
  box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
4902
- color: var(--cx-context-menu-text-color, var(--cx-font-color));
6016
+ color: var(--cx-context-menu-text-color, var(--cx-ui-text));
4903
6017
  font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
4904
6018
  line-height: 100%;
4905
6019
  margin: 0px;
@@ -4921,7 +6035,7 @@ ul.cX-Menu-List {
4921
6035
  .cX-Menu-Item-Sep {
4922
6036
  display: block;
4923
6037
  font: var(--cx-font);
4924
- color: var(--cx-font-color);
6038
+ color: var(--cx-font-color, var(--cx-ui-text));
4925
6039
  font-size: 1px;
4926
6040
  height: 100%;
4927
6041
  line-height: 1px;
@@ -4932,7 +6046,7 @@ ul.cX-Menu-List {
4932
6046
  white-space: nowrap;
4933
6047
  }
4934
6048
 
4935
- input[type=file] {
6049
+ :where([data-cx-ui-scope]) input[type=file] {
4936
6050
  display: block;
4937
6051
  }
4938
6052
 
@@ -4943,7 +6057,7 @@ input[type=file] {
4943
6057
  cursor: default;
4944
6058
  display: block;
4945
6059
  font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
4946
- color: var(--cx-context-menu-text-color, var(--cx-font-color));
6060
+ color: var(--cx-context-menu-text-color, var(--cx-ui-text));
4947
6061
  height: 100%;
4948
6062
  line-height: 100%;
4949
6063
  list-style: none;
@@ -4960,8 +6074,8 @@ input[type=file] {
4960
6074
 
4961
6075
  .cX-Menu-Item:hover,
4962
6076
  .cX-Menu-Item-Active {
4963
- background: var(--cx-context-menu-hover-color, rgba(83, 105, 255, 0.1));
4964
- border-color: var(--cx-context-menu-border-color, rgb(83, 105, 255));
6077
+ background: var(--cx-context-menu-hover-color, var(--cx-ui-accent-tint));
6078
+ border-color: var(--cx-context-menu-border-color, var(--cx-ui-border-accent));
4965
6079
  }
4966
6080
 
4967
6081
  .cX-Menu-Item-Active > :first-child,
@@ -5047,7 +6161,7 @@ input[type=file] {
5047
6161
  }
5048
6162
 
5049
6163
  .cX-Menu-Item-Scroll-Search {
5050
- color: var(--cx-context-menu-text-color, var(--cx-font-color));
6164
+ color: var(--cx-context-menu-text-color, var(--cx-ui-text));
5051
6165
  cursor: default;
5052
6166
  font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
5053
6167
  line-height: 24px;
@@ -5063,7 +6177,7 @@ input[type=file] {
5063
6177
  border-color: rgba(0, 0, 0, 0);
5064
6178
  border-style: solid;
5065
6179
  border-width: 0px 1px;
5066
- color: var(--cx-context-menu-text-color, var(--cx-font-color));
6180
+ color: var(--cx-context-menu-text-color, var(--cx-ui-text));
5067
6181
  cursor: pointer;
5068
6182
  display: flex;
5069
6183
  font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
@@ -5079,10 +6193,10 @@ input[type=file] {
5079
6193
  }
5080
6194
 
5081
6195
  .cX-Menu-Item-A-Active {
5082
- border-color: var(--cx-context-menu-border-color, rgb(170, 204, 246));
6196
+ border-color: var(--cx-context-menu-border-color, var(--cx-ui-border-accent));
5083
6197
  border-style: solid;
5084
6198
  border-width: 0px 1px;
5085
- color: var(--cx-context-menu-text-color, var(--cx-font-color));
6199
+ color: var(--cx-context-menu-text-color, var(--cx-ui-text));
5086
6200
  cursor: pointer;
5087
6201
  display: flex;
5088
6202
  font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
@@ -5102,7 +6216,7 @@ input[type=file] {
5102
6216
  border-color: rgba(0, 0, 0, 0);
5103
6217
  border-style: solid;
5104
6218
  border-width: 0px 1px;
5105
- color: var(--cx-context-menu-text-color, var(--cx-font-color));
6219
+ color: var(--cx-context-menu-text-color, var(--cx-ui-text));
5106
6220
  cursor: pointer;
5107
6221
  display: flex;
5108
6222
  font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
@@ -5119,10 +6233,10 @@ input[type=file] {
5119
6233
 
5120
6234
  .cX-Menu-Item-A-Arrow-Active {
5121
6235
  background: url(data:image/gif;base64,R0lGODlhDAAJAIcAACluvipxvzJ1vyxwwCt1yjp6zkD/QDiC1jmE0zyE0z2I3UeLyUGJ2VWUzlKg7FSg6Weg1WKq8Y7D9orD/JXL/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAMAAAYALAAAAAAMAAkAAAgzAA8YGEiwoAEFCQwaJEABgUKCBCRMYPDQAIEHESAIeEjAQYMAFQksAFDR4oCSBgqgNBAQADs=) no-repeat scroll right 50% transparent;
5122
- border-color: var(--cx-context-menu-border-color, rgb(170, 204, 246));
6236
+ border-color: var(--cx-context-menu-border-color, var(--cx-ui-border-accent));
5123
6237
  border-style: solid;
5124
6238
  border-width: 0px 1px;
5125
- color: var(--cx-context-menu-text-color, var(--cx-font-color));
6239
+ color: var(--cx-context-menu-text-color, var(--cx-ui-text));
5126
6240
  cursor: pointer;
5127
6241
  display: flex;
5128
6242
  font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
@@ -5140,7 +6254,7 @@ input[type=file] {
5140
6254
  .cX-Menu-List-Icon {
5141
6255
  background-position: center;
5142
6256
  border: 0px none !important;
5143
- color: var(--cx-context-menu-text-color, var(--cx-font-color));
6257
+ color: var(--cx-context-menu-text-color, var(--cx-ui-text));
5144
6258
  cursor: pointer;
5145
6259
  font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
5146
6260
  height: 24px;
@@ -5159,7 +6273,7 @@ input[type=file] {
5159
6273
  }
5160
6274
 
5161
6275
  .cX-Menu-Item-Text {
5162
- color: var(--cx-context-menu-text-color, var(--cx-font-color));
6276
+ color: var(--cx-context-menu-text-color, var(--cx-ui-text));
5163
6277
  cursor: pointer;
5164
6278
  font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
5165
6279
  line-height: 24px;
@@ -5172,7 +6286,7 @@ span.cX-Menu-Item-Text {
5172
6286
  }
5173
6287
 
5174
6288
  .cX-Menu-Item-Text-Short {
5175
- color: var(--cx-context-menu-text-color, var(--cx-font-color));
6289
+ color: var(--cx-context-menu-text-color, var(--cx-ui-text));
5176
6290
  cursor: pointer;
5177
6291
  float: right;
5178
6292
  font: var(--cx-small-font-italic);
@@ -5184,12 +6298,12 @@ span.cX-Menu-Item-Text {
5184
6298
  }
5185
6299
 
5186
6300
  .cX-Menu-Item-Text-Sep {
5187
- background-color: var(--cx-context-menu-hover-color, rgb(224, 224, 224));
6301
+ background-color: var(--cx-context-menu-hover-color, var(--cx-ui-accent-tint));
5188
6302
  border-bottom: 1px solid;
5189
6303
  border-bottom-color: rgb(255, 255, 255);
5190
6304
  display: block;
5191
6305
  font: var(--cx-small-font-size) var(--cx-font-family);
5192
- color: var(--cx-context-menu-text-color, var(--cx-font-color));
6306
+ color: var(--cx-context-menu-text-color, var(--cx-ui-text));
5193
6307
  font-size: 1px;
5194
6308
  line-height: 1px;
5195
6309
  list-style: none;
@@ -5214,7 +6328,7 @@ span.cX-Menu-Item-Text {
5214
6328
  font-weight: bold;
5215
6329
  pointer-events: none;
5216
6330
  opacity: 0;
5217
- z-index: 10001;
6331
+ z-index: var(--cx-z-panel-active);
5218
6332
  transition: opacity var(--cx-transition-speed) linear;
5219
6333
  }
5220
6334
 
@@ -5222,10 +6336,17 @@ span.cX-Menu-Item-Text {
5222
6336
  opacity: 1;
5223
6337
  }
5224
6338
 
6339
+ /* Dark theme: the chart's dark accent, with the dark text that reads on it (the light theme keeps
6340
+ the literal above; per-style dark accents plan, P3) */
6341
+ [data-cx-ui-theme="dark"] .cX-Resize-Indicator {
6342
+ background: var(--cx-ui-accent);
6343
+ color: var(--cx-ui-on-accent);
6344
+ }
6345
+
5225
6346
  /* 8-POINT RESIZER STYLES */
5226
6347
  .cX-Resizer {
5227
6348
  position: absolute;
5228
- z-index: 2000;
6349
+ z-index: var(--cx-z-resizer);
5229
6350
  background: transparent;
5230
6351
  }
5231
6352
 
@@ -5310,7 +6431,7 @@ body.has-fullscreen {
5310
6431
  visibility: visible;
5311
6432
  width: 100%;
5312
6433
  height: 100%;
5313
- z-index: -1;
6434
+ z-index: var(--cx-z-behind);
5314
6435
  }
5315
6436
 
5316
6437
  .cX-Viewer-Drag,
@@ -5332,7 +6453,7 @@ body.has-fullscreen {
5332
6453
  .cX-DOM:fullscreen {
5333
6454
  width: 100vw;
5334
6455
  height: 100vh;
5335
- background-color: white;
6456
+ background-color: var(--cx-ui-surface);
5336
6457
  overflow-y: auto;
5337
6458
  }
5338
6459
 
@@ -5346,7 +6467,7 @@ body.has-fullscreen {
5346
6467
  top: 0 !important;
5347
6468
  left: 0 !important;
5348
6469
  margin: 0 !important;
5349
- z-index: 1;
6470
+ z-index: var(--cx-z-base);
5350
6471
  background: transparent !important;
5351
6472
  }
5352
6473
 
@@ -5383,9 +6504,9 @@ body.has-fullscreen {
5383
6504
  top: 0 !important;
5384
6505
  left: 0 !important;
5385
6506
  margin: 0 !important;
5386
- z-index: 9999;
6507
+ z-index: var(--cx-z-fullscreen);
5387
6508
  border-radius: 0;
5388
- background: #ffffff !important;
6509
+ background: var(--cx-ui-surface) !important;
5389
6510
  height: 100vh !important;
5390
6511
  width: 100vw !important;
5391
6512
  }
@@ -5446,7 +6567,7 @@ body.has-fullscreen {
5446
6567
  width: 25px;
5447
6568
  height: 25px;
5448
6569
  background: transparent;
5449
- z-index: 10000;
6570
+ z-index: var(--cx-z-panel);
5450
6571
  pointer-events: auto;
5451
6572
  }
5452
6573
 
@@ -5454,12 +6575,13 @@ body.has-fullscreen {
5454
6575
  position: absolute;
5455
6576
  left: 32px;
5456
6577
  top: 32px;
5457
- border: var(--cx-border);
6578
+ border: var(--cx-border, 1px solid var(--cx-ui-border-accent));
5458
6579
  border-radius: 10px;
5459
6580
  padding: 8px;
5460
- background: #ffffff;
6581
+ background: var(--cx-ui-surface);
6582
+ color: var(--cx-font-color, var(--cx-ui-text));
5461
6583
  opacity: 0;
5462
- z-index: 1001;
6584
+ z-index: var(--cx-z-toolbar-edge);
5463
6585
  transition: all var(--cx-transition-speed) ease;
5464
6586
  overflow: hidden;
5465
6587
  white-space: nowrap;
@@ -5472,10 +6594,26 @@ body.has-fullscreen {
5472
6594
  pointer-events: auto;
5473
6595
  }
5474
6596
 
6597
+ /*
6598
+ * A chart whose widgets are dark (its theme is cxdark / cxblue / auto on a dark OS, or widgetsTheme)
6599
+ * paints its root with the dark surface: the HTML widgets, primitives and translucent tints around
6600
+ * the canvas would otherwise sit on the host page (usually white). Only the chart's OWN theme does
6601
+ * this; inside a dark container (a dark dashboard) the container provides the backdrop.
6602
+ */
6603
+ .cX-DOM[data-cx-ui-theme="dark"] {
6604
+ background-color: var(--cx-ui-surface);
6605
+ }
6606
+
6607
+ @media (prefers-color-scheme: dark) {
6608
+ .cX-DOM[data-cx-ui-theme="auto"] {
6609
+ background-color: var(--cx-ui-surface);
6610
+ }
6611
+ }
6612
+
5475
6613
  /* HTML Widget Container */
5476
6614
 
5477
6615
  .cX-Container-HTMLWidget {
5478
- z-index: 100000;
6616
+ z-index: var(--cx-z-modal);
5479
6617
  background: transparent;
5480
6618
  width: 100%;
5481
6619
  height: 100%;
@@ -5483,6 +6621,62 @@ body.has-fullscreen {
5483
6621
  overflow: auto;
5484
6622
  }
5485
6623
 
6624
+ /*
6625
+ * HTML widgets (htmlWidget: radio / dropdown / range above the chart). The container is
6626
+ * .cX-Container-HTMLWidgets (plural, viewport.js); the singular rule above never matched and is
6627
+ * kept as-is (fixing it would change z-index/overflow) until the dead-selector cleanup.
6628
+ * These used to inherit the host page's font (Times, 24px h2). They now follow the UI primitives
6629
+ * (05-ui-primitives.css): field-label titles, a .cX-Select-style dropdown, accent radios.
6630
+ */
6631
+ .cX-Container-HTMLWidgets {
6632
+ color: var(--cx-ui-text);
6633
+ font-family: var(--cx-font-sans);
6634
+ font-size: var(--cx-font-size-md);
6635
+ }
6636
+
6637
+ h2.CanvasXpressSelectDropdown,
6638
+ h2.CanvasXpressRadioGroup {
6639
+ margin: var(--cx-space-4) 0 var(--cx-space-2);
6640
+ color: var(--cx-ui-text);
6641
+ font-size: var(--cx-font-size-lg);
6642
+ font-weight: var(--cx-font-weight-bold);
6643
+ }
6644
+
6645
+ select.CanvasXpressSelectDropdown {
6646
+ min-width: 140px;
6647
+ border: 1px solid var(--cx-ui-border);
6648
+ border-radius: var(--cx-radius-md);
6649
+ background: var(--cx-ui-surface);
6650
+ color: var(--cx-ui-text);
6651
+ font-family: var(--cx-font-sans);
6652
+ font-size: var(--cx-font-size-md);
6653
+ }
6654
+
6655
+ select.CanvasXpressSelectDropdown:focus {
6656
+ border-color: var(--cx-ui-focus);
6657
+ outline: 2px solid var(--cx-ui-accent-tint);
6658
+ }
6659
+
6660
+ form.CanvasXpressRadioGroup {
6661
+ display: flex;
6662
+ flex-wrap: wrap;
6663
+ row-gap: var(--cx-space-2);
6664
+ }
6665
+
6666
+ label.CanvasXpressRadioGroup {
6667
+ display: inline-flex;
6668
+ align-items: center;
6669
+ gap: var(--cx-space-2);
6670
+ color: var(--cx-ui-text);
6671
+ font-size: var(--cx-font-size-md);
6672
+ cursor: pointer;
6673
+ }
6674
+
6675
+ label.CanvasXpressRadioGroup > input[type=radio] {
6676
+ margin: 0;
6677
+ cursor: pointer;
6678
+ }
6679
+
5486
6680
  /******************
5487
6681
  * End Viewport *
5488
6682
  ******************/
@@ -5496,14 +6690,14 @@ Licensed under the MIT license
5496
6690
  Copyright (c) 2018 Christian Pucci
5497
6691
  */
5498
6692
 
5499
- .magictime {
6693
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).magictime {
5500
6694
  -webkit-animation-duration: var(--cx-animation-speed);
5501
6695
  animation-duration: var(--cx-animation-speed);
5502
6696
  -webkit-animation-fill-mode: both;
5503
6697
  animation-fill-mode: both;
5504
6698
  }
5505
6699
 
5506
- .holeIn {
6700
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).holeIn {
5507
6701
  -webkit-animation-name: holeIn;
5508
6702
  animation-name: holeIn;
5509
6703
  }
@@ -5544,7 +6738,7 @@ Copyright (c) 2018 Christian Pucci
5544
6738
  }
5545
6739
  }
5546
6740
 
5547
- .holeOut {
6741
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).holeOut {
5548
6742
  -webkit-animation-name: holeOut;
5549
6743
  animation-name: holeOut;
5550
6744
  }
@@ -5585,7 +6779,7 @@ Copyright (c) 2018 Christian Pucci
5585
6779
  }
5586
6780
  }
5587
6781
 
5588
- .slideLeft {
6782
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).slideLeft {
5589
6783
  -webkit-animation-name: slideLeft;
5590
6784
  animation-name: slideLeft;
5591
6785
  }
@@ -5622,7 +6816,7 @@ Copyright (c) 2018 Christian Pucci
5622
6816
  }
5623
6817
  }
5624
6818
 
5625
- .slideUp {
6819
+ :where([data-cx-ui-scope], [data-cx-ui-scope] *).slideUp {
5626
6820
  -webkit-animation-name: slideUp;
5627
6821
  animation-name: slideUp;
5628
6822
  }