@trdrs/quickcharts 1.2.0 → 1.3.0

package/dist/quickcharts.css

@@ -39,6 +39,14 @@
   --qc-illustration-ink: #1e222d;
   --qc-motion-durationBase: 150ms;
   --qc-motion-durationFast: 90ms;
+  --qc-motion-durationModerate: 250ms;
+  --qc-motion-durationSlow: 350ms;
+  --qc-motion-durationSlower: 500ms;
+  --qc-motion-easingLinear: linear;
+  --qc-motion-easingOut: ease-out;
+  --qc-motion-easingSpring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --qc-motion-easingStandard: ease;
+  --qc-motion-scaleEnter: 0.97;
   --qc-overlay-scrim: rgba(0, 0, 0, 0.35);
   --qc-overlay-separator: #ebebeb;
   --qc-overlay-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
@@ -122,6 +130,14 @@
   --qc-illustration-ink: #d1d4dc;
   --qc-motion-durationBase: 150ms;
   --qc-motion-durationFast: 90ms;
+  --qc-motion-durationModerate: 250ms;
+  --qc-motion-durationSlow: 350ms;
+  --qc-motion-durationSlower: 500ms;
+  --qc-motion-easingLinear: linear;
+  --qc-motion-easingOut: ease-out;
+  --qc-motion-easingSpring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --qc-motion-easingStandard: ease;
+  --qc-motion-scaleEnter: 0.97;
   --qc-overlay-scrim: rgba(0, 0, 0, 0.5);
   --qc-overlay-separator: #4a4a4a;
   --qc-overlay-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
@@ -174,6 +190,16 @@
   --qc-text-primary: #dbdbdb;
   --qc-text-secondary: #b8b8b8;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  [data-qc-theme] {
+    --qc-motion-durationBase: 0ms !important;
+    --qc-motion-durationFast: 0ms !important;
+    --qc-motion-durationModerate: 0ms !important;
+    --qc-motion-durationSlow: 0ms !important;
+    --qc-motion-durationSlower: 0ms !important;
+  }
+}
 }
 
 @layer trdrs.chart {
@@ -249,7 +275,7 @@
   border: 1px solid var(--qc-chrome-border);
   border-radius: var(--qc-chrome-radius);
   cursor: pointer;
-  transition: background-color var(--qc-motion-durationFast) linear, border-color var(--qc-motion-durationFast) linear;
+  transition: background-color var(--qc-motion-durationFast) var(--qc-motion-easingLinear), border-color var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
 }
 
 [data-qc-theme] .qc-button:hover {
@@ -375,7 +401,7 @@
   border: 0;
   border-radius: var(--qc-chrome-radius);
   cursor: pointer;
-  transition: background-color var(--qc-motion-durationFast) linear;
+  transition: background-color var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
 }
 
 [data-qc-theme] .qc-menu-row:hover {
@@ -1139,13 +1165,8 @@
 
 /* Accessibility --------------------------------------------------------------------------------- */
 
-@media (prefers-reduced-motion: reduce) {
-  [data-qc-theme] * {
-    transition-duration: 1ms !important;
-    animation-duration: 1ms !important;
-    animation-iteration-count: 1 !important;
-  }
-}
+/* Every transition reads a motion duration role, and the generated tokens resolve each of them to
+ * zero under a reduced-motion preference, so no recipe here repeats that rule. */
 
 @media (forced-colors: active) {
   [data-qc-theme] .qc-surface,
@@ -1219,6 +1240,17 @@
   font-variant-numeric: tabular-nums lining-nums;
 }
 
+/* With one zone offered the clock stands alone, in the trigger's own cell and inset. */
+[data-qc-theme] .qc-bottombar .qc-tz-clock {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 38px;
+  padding: 0 6px;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums lining-nums;
+}
+
 [data-qc-theme] .qc-clock {
   font-variant-numeric: tabular-nums;
 }
@@ -1304,7 +1336,7 @@
   transform: translateX(-50%);
   opacity: 0;
   pointer-events: auto;
-  transition: opacity var(--qc-motion-durationBase) linear;
+  transition: opacity var(--qc-motion-durationBase) var(--qc-motion-easingLinear);
 }
 
 [data-qc-theme] .qc-nav[data-qc-near],
@@ -1438,7 +1470,7 @@
   inset: 2px;
   z-index: -1;
   border-radius: var(--qc-chrome-radius);
-  transition: background-color var(--qc-motion-durationFast) linear;
+  transition: background-color var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
 }
 
 [data-qc-theme] .qc-toolbar-button:hover {
@@ -1499,11 +1531,11 @@
  * and neither bends the other, and each answers to its OWN button: a caret nested inside some other
  * open thing is not the thing that opened. */
 [data-qc-theme] .qc-caret {
-  transition: translate 350ms ease;
+  transition: translate var(--qc-motion-durationSlow) var(--qc-motion-easingStandard);
 }
 
 [data-qc-theme] .qc-caret > svg {
-  transition: rotate 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transition: rotate var(--qc-motion-durationSlow) var(--qc-motion-easingSpring);
 }
 
 [data-qc-theme] .qc-toolbar-button:not([aria-expanded='true']):hover > .qc-caret {
@@ -1626,7 +1658,7 @@
   height: 14px;
   background: var(--qc-control-mark);
   border-radius: 50%;
-  transition: inset-inline-start 250ms ease-out;
+  transition: inset-inline-start var(--qc-motion-durationModerate) var(--qc-motion-easingOut);
 }
 
 [data-qc-theme] .qc-switch[aria-checked='true'] .qc-switch-knob,
@@ -1650,7 +1682,7 @@
   border: 1px solid var(--qc-control-on);
   border-radius: 3px;
   cursor: pointer;
-  transition: background-color 350ms, border-color 350ms;
+  transition: background-color var(--qc-motion-durationSlow) var(--qc-motion-easingStandard), border-color var(--qc-motion-durationSlow) var(--qc-motion-easingStandard);
 }
 
 [data-qc-theme] .qc-checkbox:checked {
@@ -2755,7 +2787,7 @@
   border-radius: var(--qc-chrome-radius);
   content: '';
   pointer-events: none;
-  transition: background-color var(--qc-motion-durationFast) linear;
+  transition: background-color var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
 }
 
 [data-qc-theme] .qc-drawing-bar-wide {
@@ -2973,7 +3005,7 @@
 
 [data-qc-theme] .qc-drawing-caret {
   display: flex;
-  transition: transform var(--qc-motion-durationFast) linear;
+  transition: transform var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
 }
 
 [data-qc-theme] .qc-drawing-template-button[aria-expanded='true'] .qc-drawing-caret {
@@ -3097,7 +3129,7 @@
   content: '';
   pointer-events: none;
   transform: translate(-50%, -50%);
-  transition: background-color var(--qc-motion-durationFast) linear;
+  transition: background-color var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
 }
 
 [data-qc-theme] .qc-drawing-rail-button:hover,
@@ -3177,13 +3209,13 @@
   border-start-end-radius: 0;
   border-end-end-radius: 0;
   opacity: 0;
-  transition: opacity var(--qc-motion-durationFast) linear;
+  transition: opacity var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
 }
 
 /* The chevron turns to face the panel: pointing out at where the flyout will appear while closed,
  * back at the rail once it is open. */
 [data-qc-theme] .qc-drawing-rail-arrow svg {
-  transition: transform 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transition: transform var(--qc-motion-durationSlower) var(--qc-motion-easingSpring);
 }
 
 [data-qc-theme] .qc-drawing-rail-arrow[aria-expanded='true'] svg {
@@ -3294,10 +3326,6 @@
   cursor: default;
 }
 
-[data-qc-theme] .qc-drawing-menu-note {
-  padding: 8px 12px;
-}
-
 [data-qc-theme] .qc-drawing-menu .qc-separator {
   margin: 6px 0;
 }
@@ -3360,7 +3388,7 @@
   border-radius: 4px;
   cursor: pointer;
   opacity: 0;
-  transition: opacity var(--qc-motion-durationFast) linear;
+  transition: opacity var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
 }
 
 [data-qc-theme] .qc-drawing-flyout-row:hover .qc-drawing-star,
@@ -3457,7 +3485,7 @@
   border-radius: 2px;
   content: '';
   pointer-events: none;
-  transition: background-color var(--qc-motion-durationFast) linear;
+  transition: background-color var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
 }
 
 [data-qc-theme] .qc-drawing-favorite:hover,
@@ -4403,8 +4431,12 @@
   text-transform: uppercase;
 }
 
+/* The line a list shows in place of rows (empty, loading, failed): the rows' own size in the muted
+ * ink, on a row's height, its words 8px in where a row's label starts. */
 [data-qc-theme] .qc-menu-note {
-  padding: 6px 12px;
+  padding: 6px 8px;
+  color: var(--qc-text-muted);
+  line-height: 20px;
 }
 
 [data-qc-theme] .qc-menu-panel .qc-separator {
@@ -4438,6 +4470,34 @@
   font-size: var(--qc-text-fontSizeBase);
 }
 
+/* The modal motion, for a dialog that opens and closes with it (the scrim carries `data-state`):
+ * the backdrop fades in, and the box fades in and grows from the entrance scale, over one duration.
+ * Closing runs the same motion in reverse. Under a reduced-motion preference the duration is zero,
+ * so both are instant. */
+[data-qc-theme] .qc-dialog-scrim[data-state] {
+  opacity: 1;
+  transition: opacity var(--qc-motion-durationBase) var(--qc-motion-easingOut);
+}
+
+[data-qc-theme] .qc-dialog-scrim[data-state] > .qc-dialog {
+  opacity: 1;
+  scale: none;
+  transition:
+    opacity var(--qc-motion-durationBase) var(--qc-motion-easingStandard),
+    scale var(--qc-motion-durationBase) var(--qc-motion-easingStandard);
+}
+
+[data-qc-theme] .qc-dialog-scrim[data-state='opening'],
+[data-qc-theme] .qc-dialog-scrim[data-state='closing'] {
+  opacity: 0;
+}
+
+[data-qc-theme] .qc-dialog-scrim[data-state='opening'] > .qc-dialog,
+[data-qc-theme] .qc-dialog-scrim[data-state='closing'] > .qc-dialog {
+  opacity: 0;
+  scale: var(--qc-motion-scaleEnter);
+}
+
 /* In place of rows: the drawing over the line that says nothing matched, centred where the rows
  * would have stood. */
 [data-qc-theme] .qc-empty {
@@ -4640,14 +4700,15 @@
   transform: translateY(0);
   clip-path: inset(0);
   transition:
-    flex-basis 220ms cubic-bezier(0.22, 1, 0.36, 1),
-    max-height 220ms cubic-bezier(0.22, 1, 0.36, 1),
-    opacity 140ms linear,
-    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
-    clip-path 220ms cubic-bezier(0.22, 1, 0.36, 1);
+    flex-basis var(--qc-motion-durationBase) var(--qc-motion-easingStandard),
+    max-height var(--qc-motion-durationBase) var(--qc-motion-easingStandard),
+    opacity var(--qc-motion-durationBase) var(--qc-motion-easingStandard),
+    transform var(--qc-motion-durationBase) var(--qc-motion-easingStandard),
+    clip-path var(--qc-motion-durationBase) var(--qc-motion-easingStandard);
 }
 
-/* The row itself animates from zero to 49px and back. max-height clamps the fixed-height band while
+/* The row itself animates from zero to 49px and back, on the modal motion's duration and timing,
+ * and closing runs the opening in reverse. max-height clamps the fixed-height band while
  * flex-basis gives the chart space up at the same pace, so the chart and controls move together.
  * The state is driven by CSS transitions because some embedded hosts omit Element.animate(). */
 [data-qc-theme] .qc-replay[data-state='opening'],
@@ -4659,11 +4720,6 @@
   clip-path: inset(100% 0 0);
 }
 
-[data-qc-theme] .qc-replay[data-state='closing'] {
-  transition-duration: 170ms, 170ms, 170ms, 170ms, 170ms;
-  transition-timing-function: cubic-bezier(0.4, 0, 1, 1), cubic-bezier(0.4, 0, 1, 1), linear, cubic-bezier(0.4, 0, 1, 1), cubic-bezier(0.4, 0, 1, 1);
-}
-
 [data-qc-theme] .qc-replay::-webkit-scrollbar {
   display: none;
 }
@@ -5028,40 +5084,8 @@
 
 /* The symbol search dialog and its compare family: the heading, the field with its operators, the
  * class strip, and the result list. */
-[data-qc-theme] .qc-search-dialog-scrim {
-  opacity: 1;
-  transition: opacity 160ms linear;
-}
-
 [data-qc-theme] .qc-search-dialog {
   height: min(85vh, 680px);
-  opacity: 1;
-  transform: translateY(0) scale(1);
-  transform-origin: center 42%;
-  transition:
-    opacity 150ms ease-out,
-    transform 190ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-[data-qc-theme] .qc-search-dialog-scrim[data-state='opening'] {
-  opacity: 0;
-}
-
-[data-qc-theme] .qc-search-dialog-scrim[data-state='opening'] .qc-search-dialog {
-  opacity: 0;
-  transform: translateY(8px) scale(0.985);
-}
-
-[data-qc-theme] .qc-search-dialog-scrim[data-state='closing'] {
-  opacity: 0;
-  transition-duration: 140ms;
-}
-
-[data-qc-theme] .qc-search-dialog-scrim[data-state='closing'] .qc-search-dialog {
-  opacity: 0;
-  transform: translateY(6px) scale(0.985);
-  transition-duration: 110ms, 140ms;
-  transition-timing-function: ease-in, cubic-bezier(0.4, 0, 1, 1);
 }
 
 [data-qc-theme] .qc-search-dialog--compare {
@@ -5205,6 +5229,12 @@
   display: none;
 }
 
+/* A selected class's narrower classes: a second strip of the same tabs, standing directly under the
+ * strip above so the two rows read as one filter. */
+[data-qc-theme] .qc-search-classes + .qc-search-subclasses {
+  padding-top: 0;
+}
+
 [data-qc-theme] .qc-search-scope {
   display: inline-flex;
   flex: 0 0 auto;
@@ -5606,11 +5636,6 @@
 
 /* Chart settings follows the same centered, two-column layout as TradingView: a fixed title and
  * footer around a section rail and one roomy settings page. */
-[data-qc-theme] .qc-chart-settings-scrim {
-  opacity: 1;
-  transition: opacity 160ms linear;
-}
-
 [data-qc-theme] .qc-chart-settings-dialog {
   box-sizing: border-box;
   height: min(612px, calc(100vh - 32px));
@@ -5620,32 +5645,6 @@
   border: 0;
   border-radius: 6px;
   box-shadow: var(--qc-overlay-shadow);
-  opacity: 1;
-  transform: translateY(0) scale(1);
-  transform-origin: center 42%;
-  transition:
-    opacity 150ms ease-out,
-    transform 190ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-[data-qc-theme] .qc-chart-settings-scrim[data-state='opening'],
-[data-qc-theme] .qc-chart-settings-scrim[data-state='closing'] {
-  opacity: 0;
-}
-
-[data-qc-theme] .qc-chart-settings-scrim[data-state='opening'] .qc-chart-settings-dialog,
-[data-qc-theme] .qc-chart-settings-scrim[data-state='closing'] .qc-chart-settings-dialog {
-  opacity: 0;
-  transform: translateY(8px) scale(0.985);
-}
-
-[data-qc-theme] .qc-chart-settings-scrim[data-state='closing'] {
-  transition-duration: 140ms;
-}
-
-[data-qc-theme] .qc-chart-settings-scrim[data-state='closing'] .qc-chart-settings-dialog {
-  transition-duration: 110ms, 140ms;
-  transition-timing-function: ease-in, cubic-bezier(0.4, 0, 1, 1);
 }
 
 [data-qc-theme] .qc-chart-settings-dialog .qc-dialog-title {
@@ -5807,7 +5806,7 @@
   border-radius: 0;
   opacity: 0;
   transform: rotate(45deg);
-  transition: opacity var(--qc-motion-durationFast) linear;
+  transition: opacity var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
 }
 
 [data-qc-theme] .qc-settings-menu .qc-switch[aria-checked='true'] .qc-switch-knob {
@@ -5943,13 +5942,6 @@
   }
 }
 
-@media (prefers-reduced-motion: reduce) {
-  [data-qc-theme] .qc-chart-settings-scrim,
-  [data-qc-theme] .qc-chart-settings-dialog {
-    transition-duration: 0ms;
-  }
-}
-
 /* The market-status control on the legend and its popup. */
 [data-qc-theme] .qc-legend-status {
   display: inline-flex;
@@ -6347,7 +6339,7 @@
 [data-qc-theme] .qc-tf-unit-caret {
   flex: 0 0 auto;
   color: var(--qc-text-muted);
-  transition: transform var(--qc-motion-durationFast) linear;
+  transition: transform var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
   transform: rotate(180deg);
 }
 
@@ -6401,6 +6393,26 @@
   cursor: not-allowed;
 }
 
+/* The same list with no drop-down around it, for a page that holds the picker in a box of its own:
+ * a phone's card, where the card IS the picker. It fills that box, the rows scroll inside it, and the
+ * composer stays pinned below them. The box is the page's, so the card paints no surface of its own. */
+[data-qc-theme].qc-tf-card {
+  display: flex;
+  min-height: 0;
+  height: 100%;
+  flex-direction: column;
+  color: var(--qc-text-primary);
+  font-family: var(--qc-text-fontFamily);
+  font-size: var(--qc-text-fontSizeBase);
+}
+
+[data-qc-theme].qc-tf-card > .qc-tf-menu {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+  flex-direction: column;
+}
+
 /* The chart's notices, stacked at the bottom of the charts, newest last. The region is the charts
  * grid's next sibling in the root's column and takes no height of its own; the stack inside it is
  * anchored to its top edge and grows upward, over the charts, never over the bottom bar. */

package/dist/theme-manifest.json

@@ -239,7 +239,15 @@
       "family": "motion",
       "roles": [
         "motion.durationFast",
-        "motion.durationBase"
+        "motion.durationBase",
+        "motion.durationModerate",
+        "motion.durationSlow",
+        "motion.durationSlower",
+        "motion.easingStandard",
+        "motion.easingOut",
+        "motion.easingLinear",
+        "motion.easingSpring",
+        "motion.scaleEnter"
       ]
     }
   ],
@@ -1236,11 +1244,91 @@
       "id": "motion.durationBase",
       "family": "motion",
       "kind": "duration",
-      "description": "An ordinary transition, such as a menu opening.",
+      "description": "An ordinary transition: a modal dialog and its backdrop opening and closing, and the replay row entering and leaving.",
       "values": {
         "light": "150ms",
         "dark": "150ms"
       }
+    },
+    {
+      "id": "motion.durationModerate",
+      "family": "motion",
+      "kind": "duration",
+      "description": "A control moving to its new state, such as a switch knob sliding.",
+      "values": {
+        "light": "250ms",
+        "dark": "250ms"
+      }
+    },
+    {
+      "id": "motion.durationSlow",
+      "family": "motion",
+      "kind": "duration",
+      "description": "A small mark settling, such as a disclosure caret turning or a checkbox filling.",
+      "values": {
+        "light": "350ms",
+        "dark": "350ms"
+      }
+    },
+    {
+      "id": "motion.durationSlower",
+      "family": "motion",
+      "kind": "duration",
+      "description": "A larger mark turning, such as the drawing rail's chevron.",
+      "values": {
+        "light": "500ms",
+        "dark": "500ms"
+      }
+    },
+    {
+      "id": "motion.easingStandard",
+      "family": "motion",
+      "kind": "easing",
+      "description": "The timing of an ordinary transition: a modal dialog box, the replay row, a caret dip, a checkbox fill.",
+      "values": {
+        "light": "ease",
+        "dark": "ease"
+      }
+    },
+    {
+      "id": "motion.easingOut",
+      "family": "motion",
+      "kind": "easing",
+      "description": "The timing of a motion that settles as it ends: a modal backdrop fading, a switch knob sliding.",
+      "values": {
+        "light": "ease-out",
+        "dark": "ease-out"
+      }
+    },
+    {
+      "id": "motion.easingLinear",
+      "family": "motion",
+      "kind": "easing",
+      "description": "The timing of a color or opacity change under the pointer.",
+      "values": {
+        "light": "linear",
+        "dark": "linear"
+      }
+    },
+    {
+      "id": "motion.easingSpring",
+      "family": "motion",
+      "kind": "easing",
+      "description": "The timing of a mark that turns with a slight overshoot, such as a caret or chevron.",
+      "values": {
+        "light": "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
+        "dark": "cubic-bezier(0.175, 0.885, 0.32, 1.275)"
+      }
+    },
+    {
+      "id": "motion.scaleEnter",
+      "family": "motion",
+      "kind": "scale",
+      "description": "The scale a modal dialog box grows from as it opens and returns to as it closes.",
+      "values": {
+        "light": "0.97",
+        "dark": "0.97"
+      }
     }
   ]
 }

package/package.json

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