@trdrs/quickcharts 5.3.0 → 5.5.0

package/dist/quickcharts.css

@@ -231,6 +231,184 @@
   --qc-text-secondary: #b8b8b8;
 }
 
+[data-qc-theme] [data-qc-canvas="light"] {
+  --qc-canvas-background: #ffffff;
+  --qc-canvas-paneBorder: #ebebeb;
+  --qc-canvas-watermark: rgba(80, 83, 94, 0.2);
+  --qc-chrome-border: #ebebeb;
+  --qc-chrome-borderStrong: #8c8c8c;
+  --qc-chrome-caret: #707070;
+  --qc-chrome-fieldBorder: #dbdbdb;
+  --qc-chrome-grip: #b8b8b8;
+  --qc-chrome-scrollThumb: #9c9c9c;
+  --qc-chrome-surface: #ffffff;
+  --qc-chrome-surfaceRaised: #ffffff;
+  --qc-control-fieldEdge: #dbdbdb;
+  --qc-control-fieldEdgeHover: #a8a8a8;
+  --qc-control-fieldFill: #f2f2f2;
+  --qc-control-fieldInvalid: #f23645;
+  --qc-control-mark: #ffffff;
+  --qc-control-neutral: #f2f2f2;
+  --qc-control-neutralHover: #ebebeb;
+  --qc-control-neutralInk: #000000;
+  --qc-control-neutralPressed: #dbdbdb;
+  --qc-control-off: #9c9c9c;
+  --qc-control-offHover: #8c8c8c;
+  --qc-control-offPressed: #b8b8b8;
+  --qc-control-on: #1a1a1a;
+  --qc-control-onHover: #464646;
+  --qc-control-onInk: #ffffff;
+  --qc-control-onPressed: #707070;
+  --qc-control-outline: #1a1a1a;
+  --qc-control-selectEdgeHover: #a8a8a8;
+  --qc-control-tipMark: #a8a8a8;
+  --qc-control-tipMarkHover: #707070;
+  --qc-drawing-fill: rgba(41, 98, 255, 0.15);
+  --qc-drawing-handle: #ffffff;
+  --qc-drawing-line: #2962ff;
+  --qc-drawing-selected: #2962ff;
+  --qc-drawing-text: #000000;
+  --qc-illustration-accent: #2196f3;
+  --qc-illustration-accentInk: #ffffff;
+  --qc-illustration-ink: #1e222d;
+  --qc-overlay-scrim: rgba(156, 156, 156, 0.5);
+  --qc-overlay-separator: #ebebeb;
+  --qc-overlay-surface: #ffffff;
+  --qc-overlay-tooltip: #1a1a1a;
+  --qc-overlay-tooltipInk: #f2f2f2;
+  --qc-scale-background: #ffffff;
+  --qc-scale-border: rgba(26, 26, 26, 0);
+  --qc-scale-crosshair: #9c9c9c;
+  --qc-scale-crosshairLabelBackground: #000000;
+  --qc-scale-crosshairLabelText: #ffffff;
+  --qc-scale-grid: rgba(26, 26, 26, 0.2);
+  --qc-scale-sessionAfterHours: rgba(41, 98, 255, 0.08);
+  --qc-scale-sessionClosed: rgba(0, 0, 0, 0.05);
+  --qc-scale-sessionExtended: rgba(213, 0, 249, 0.08);
+  --qc-scale-sessionPreMarket: rgba(255, 152, 0, 0.08);
+  --qc-scale-text: #000000;
+  --qc-series-down: #f23645;
+  --qc-series-neutral: #787b86;
+  --qc-series-up: #089981;
+  --qc-state-accent: #2962ff;
+  --qc-state-focusRing: #2962ff;
+  --qc-state-hover: #f2f2f2;
+  --qc-state-hoverInk: #000000;
+  --qc-state-markInk: #ffffff;
+  --qc-state-pressed: #ebebeb;
+  --qc-state-pressedHover: #dbdbdb;
+  --qc-state-selected: #ebebeb;
+  --qc-state-selection: rgba(31, 86, 238, 0.18);
+  --qc-status-info: #1160c4;
+  --qc-status-loading: #787b86;
+  --qc-status-negative: #df323f;
+  --qc-status-positive: #078671;
+  --qc-status-sessionAfterHours: #f5a623;
+  --qc-status-sessionClosed: rgba(0, 0, 0, 0.35);
+  --qc-status-sessionExtended: #4c98fb;
+  --qc-status-sessionOpen: #22c55e;
+  --qc-status-sessionPreMarket: #4c98fb;
+  --qc-status-warning: #ac6600;
+  --qc-text-caption: #707070;
+  --qc-text-disabled: #b8b8b8;
+  --qc-text-highlight: #2962ff;
+  --qc-text-inverse: #ffffff;
+  --qc-text-link: #2962ff;
+  --qc-text-muted: #6a6a6a;
+  --qc-text-onCanvas: #000000;
+  --qc-text-primary: #000000;
+  --qc-text-secondary: #000000;
+}
+
+[data-qc-theme] [data-qc-canvas="dark"] {
+  --qc-canvas-background: #000000;
+  --qc-canvas-paneBorder: #1a1a1a;
+  --qc-canvas-watermark: rgba(80, 83, 94, 0.3);
+  --qc-chrome-border: #1a1a1a;
+  --qc-chrome-borderStrong: #707070;
+  --qc-chrome-caret: #8c8c8c;
+  --qc-chrome-fieldBorder: #636363;
+  --qc-chrome-grip: #555555;
+  --qc-chrome-scrollThumb: #2b2b2b;
+  --qc-chrome-surface: #000000;
+  --qc-chrome-surfaceRaised: #1a1a1a;
+  --qc-control-fieldEdge: #555555;
+  --qc-control-fieldEdgeHover: #707070;
+  --qc-control-fieldFill: #1a1a1a;
+  --qc-control-fieldInvalid: #f23645;
+  --qc-control-mark: #1a1a1a;
+  --qc-control-neutral: #1a1a1a;
+  --qc-control-neutralHover: #2b2b2b;
+  --qc-control-neutralInk: #ffffff;
+  --qc-control-neutralPressed: #464646;
+  --qc-control-off: #636363;
+  --qc-control-offHover: #707070;
+  --qc-control-offPressed: #636363;
+  --qc-control-on: #f2f2f2;
+  --qc-control-onHover: #dbdbdb;
+  --qc-control-onInk: #000000;
+  --qc-control-onPressed: #8c8c8c;
+  --qc-control-outline: #ffffff;
+  --qc-control-selectEdgeHover: #808080;
+  --qc-control-tipMark: #555555;
+  --qc-control-tipMarkHover: #8c8c8c;
+  --qc-drawing-fill: rgba(41, 98, 255, 0.15);
+  --qc-drawing-handle: #000000;
+  --qc-drawing-line: #2962ff;
+  --qc-drawing-selected: #1e53e5;
+  --qc-drawing-text: #dbdbdb;
+  --qc-illustration-accent: #1976d2;
+  --qc-illustration-accentInk: #d1d4dc;
+  --qc-illustration-ink: #d1d4dc;
+  --qc-overlay-scrim: rgba(0, 0, 0, 0.5);
+  --qc-overlay-separator: #464646;
+  --qc-overlay-surface: #131313;
+  --qc-overlay-tooltip: #2b2b2b;
+  --qc-overlay-tooltipInk: #f2f2f2;
+  --qc-scale-background: #000000;
+  --qc-scale-border: rgba(242, 242, 242, 0);
+  --qc-scale-crosshair: #9c9c9c;
+  --qc-scale-crosshairLabelBackground: #2b2b2b;
+  --qc-scale-crosshairLabelText: #ffffff;
+  --qc-scale-grid: rgba(242, 242, 242, 0.2);
+  --qc-scale-sessionAfterHours: rgba(41, 98, 255, 0.08);
+  --qc-scale-sessionClosed: rgba(0, 0, 0, 0.22);
+  --qc-scale-sessionExtended: rgba(213, 0, 249, 0.08);
+  --qc-scale-sessionPreMarket: rgba(255, 152, 0, 0.08);
+  --qc-scale-text: #b8b8b8;
+  --qc-series-down: #f23645;
+  --qc-series-neutral: #787b86;
+  --qc-series-up: #089981;
+  --qc-state-accent: #2962ff;
+  --qc-state-focusRing: #2962ff;
+  --qc-state-hover: #1a1a1a;
+  --qc-state-hoverInk: #c9c9c9;
+  --qc-state-markInk: #ffffff;
+  --qc-state-pressed: #2b2b2b;
+  --qc-state-pressedHover: #464646;
+  --qc-state-selected: #333333;
+  --qc-state-selection: rgba(82, 160, 252, 0.22);
+  --qc-status-info: #68a5ff;
+  --qc-status-loading: #787b86;
+  --qc-status-negative: #f34452;
+  --qc-status-positive: #089981;
+  --qc-status-sessionAfterHours: #f5a623;
+  --qc-status-sessionClosed: rgba(255, 255, 255, 0.35);
+  --qc-status-sessionExtended: #4c98fb;
+  --qc-status-sessionOpen: #22c55e;
+  --qc-status-sessionPreMarket: #4c98fb;
+  --qc-status-warning: #ff9800;
+  --qc-text-caption: #8c8c8c;
+  --qc-text-disabled: #555555;
+  --qc-text-highlight: #5280ff;
+  --qc-text-inverse: #000000;
+  --qc-text-link: #5b9cf6;
+  --qc-text-muted: #9b9b9b;
+  --qc-text-onCanvas: #dbdbdb;
+  --qc-text-primary: #dbdbdb;
+  --qc-text-secondary: #b8b8b8;
+}
+
 @media (prefers-reduced-motion: reduce) {
   [data-qc-theme] {
     --qc-motion-durationBase: 0ms !important;
@@ -3844,10 +4022,13 @@
 
 /* The page: a two-column grid inside 16px by 20px, the labels' column as wide as the widest label
  * and its 20px gap, the controls' column the rest. Everything on the page that is not a labelled
- * row stands across both columns. */
+ * row stands across both columns. Every row is as tall as what it holds, whether or not the page
+ * has room to spare: a row whose controls wrap onto a second line keeps that line, and the 50px
+ * floor the controls carry still holds, so the rows never overlap while the page scrolls. */
 [data-qc-theme] .qc-drawing-page {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
+  grid-auto-rows: max-content;
   padding: 16px 20px;
 }
 
@@ -4993,11 +5174,12 @@
   height: 28px;
 }
 
-/* The shipped catalog has no author and no count: a row is its star, its name and its actions. */
-[data-qc-theme] .qc-picker-list--catalog .qc-picker-author,
-[data-qc-theme] .qc-picker-list--catalog .qc-picker-count,
-[data-qc-theme] .qc-picker-list--catalog .qc-picker-headings > :nth-child(3),
-[data-qc-theme] .qc-picker-list--catalog .qc-picker-headings > :nth-child(4) {
+/* The author and count columns stand only while a listed row fills them, so the shipped catalog is
+ * a row of its star, its name and its actions. */
+[data-qc-theme] .qc-picker-list:not(.qc-picker-list--authors) .qc-picker-author,
+[data-qc-theme] .qc-picker-list:not(.qc-picker-list--authors) .qc-picker-headings > :nth-child(3),
+[data-qc-theme] .qc-picker-list:not(.qc-picker-list--counts) .qc-picker-count,
+[data-qc-theme] .qc-picker-list:not(.qc-picker-list--counts) .qc-picker-headings > :nth-child(4) {
   display: none;
 }
 
@@ -5010,6 +5192,49 @@
   display: none;
 }
 
+/* A collection's empty state fills the list's place, centred in the row ink: a 120px mark 12px over
+ * an 18px title, 12px over 16px text, and its action 20px under that, a dialog footer's primary
+ * button. */
+[data-qc-theme] .qc-picker-empty {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 0;
+  padding: 0 34px 0 30px;
+  color: var(--qc-text-secondary);
+  text-align: center;
+}
+
+[data-qc-theme] .qc-picker-empty-mark,
+[data-qc-theme] .qc-picker-empty-mark svg {
+  display: flex;
+  width: 120px;
+  height: 120px;
+}
+
+[data-qc-theme] .qc-picker-empty-mark {
+  margin-bottom: 12px;
+}
+
+[data-qc-theme] .qc-picker-empty-title {
+  margin-bottom: 12px;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 24px;
+}
+
+[data-qc-theme] .qc-picker-empty-text {
+  margin: 0 0 -4px;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+[data-qc-theme] .qc-picker-empty-action {
+  margin-top: 20px;
+}
+
 [data-qc-theme] .qc-picker-status {
   flex: 0 0 auto;
   padding: 0 20px;
@@ -6544,14 +6769,15 @@
  * places each over the scale's box as it measures it and writes `--qcd-chart-background`, the
  * chart's own background, which each control stands on. */
 
-/* The auto-scale and logarithmic buttons at the foot of the scale: two 20x22 buttons 4px apart, a
- * letter each. Off, a button is a 1px outline on the chart's background; on, it is a held mode,
- * filled in the emphasis fill a checked box wears with its letter in the inverse ink. */
+/* The auto-scale and logarithmic buttons at the foot of the scale: two 20x22 buttons 15px apart, each
+ * centred in a 35x30 cell, a 14px letter each on an 18px line. Off, a button is a 1px outline on the
+ * chart's background, lit under the pointer; on, it is a held mode, filled in the emphasis fill a
+ * checked box wears with its letter in the inverse ink, a step lighter under the pointer. */
 [data-qc-theme] .qc-scale-modes {
   position: absolute;
   z-index: 4;
   display: flex;
-  gap: 4px;
+  gap: 15px;
   pointer-events: auto;
 }
 
@@ -6562,10 +6788,11 @@
   height: 22px;
   align-items: center;
   justify-content: center;
-  padding: 0;
+  padding: 1px 0;
   font: inherit;
-  font-size: 12px;
-  line-height: 1;
+  font-size: var(--qc-text-fontSizeBase);
+  font-weight: 400;
+  line-height: 18px;
   color: var(--qc-text-primary);
   background: var(--qcd-chart-background, var(--qc-canvas-background));
   border: 1px solid var(--qc-overlay-separator);
@@ -6583,6 +6810,11 @@
   border-color: var(--qc-control-on);
 }
 
+[data-qc-theme] .qc-scale-mode[aria-pressed='true']:hover {
+  background: var(--qc-control-onHover);
+  border-color: var(--qc-control-onHover);
+}
+
 /* The box at the top of the scale naming what its prices are in: at least 64x26, four pixels in from
  * the scale's top and its side away from the plot, on the chart's background inside a 1px border
  * with a radius of 4, in 12px text. It takes no pointer, so the scale under it still drags. */
@@ -6607,6 +6839,23 @@
   pointer-events: none;
 }
 
+/* With the host's door the box is a button that opens the host's menu: it keeps the box's size, type
+ * and outline, takes the pointer, and lights under it and while pressed as the scale's buttons do.
+ * The chrome gives every button its pointer back, so this rule names the chrome as well. */
+[data-qc-theme] .qc-chrome button.qc-scale-unit {
+  font-family: inherit;
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+[data-qc-theme] .qc-chrome button.qc-scale-unit:hover {
+  background: var(--qc-state-hover);
+}
+
+[data-qc-theme] .qc-chrome button.qc-scale-unit:active {
+  background: var(--qc-state-pressed);
+}
+
 /* The plus beside the crosshair's price label is painted by the renderer with the label. Its button
  * stands over the painted box, at the size the chart writes: transparent, and taking no pointer, so
  * a pointer resting on the plus stays on the plot and keeps the crosshair. It carries the plus's

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trdrs/quickcharts",
-  "version": "5.3.0",
+  "version": "5.5.0",
   "description": "Quick Charts: a datafeed-driven charting library with drawings, indicators, layouts and replay over host-supplied data and storage ports.",
   "keywords": [
     "charts",