@trdrs/quickcharts 1.0.0

package/dist/theme-manifest.json

@@ -0,0 +1,1246 @@
+{
+  "rootAttribute": "data-qc-theme",
+  "cssEntry": "@trdrs/quickcharts/styles.css",
+  "layers": {
+    "tokens": "trdrs.tokens",
+    "chart": "trdrs.chart",
+    "hostOrder": "@layer reset, trdrs.tokens, trdrs.chart, trdrs.platform, host;"
+  },
+  "hooks": [
+    {
+      "className": "qc-topbar",
+      "purpose": "The top toolbar: symbol search, timeframe, chart style, indicators, layouts, replay and the widget menus.",
+      "states": [],
+      "customization": [
+        "background-color",
+        "border",
+        "padding",
+        "gap",
+        "box-shadow"
+      ]
+    },
+    {
+      "className": "qc-drawing-toolbar",
+      "purpose": "The drawing rail beside the plot.",
+      "states": [
+        {
+          "attribute": "aria-orientation",
+          "description": "vertical beside the plot, horizontal in a host row."
+        }
+      ],
+      "customization": [
+        "background-color",
+        "border",
+        "padding",
+        "gap",
+        "box-shadow"
+      ]
+    },
+    {
+      "className": "qc-bottombar",
+      "purpose": "The bottom bar: range shortcuts, the session clock and the timezone.",
+      "states": [],
+      "customization": [
+        "background-color",
+        "border",
+        "padding",
+        "gap",
+        "box-shadow"
+      ]
+    },
+    {
+      "className": "qc-legend",
+      "purpose": "The legend over the plot: the symbol, its reading and each study row.",
+      "states": [],
+      "customization": [
+        "background-color",
+        "border",
+        "border-radius",
+        "padding",
+        "box-shadow",
+        "inset"
+      ]
+    },
+    {
+      "className": "qc-menu-panel",
+      "purpose": "A floating menu opened from a toolbar control.",
+      "states": [
+        {
+          "attribute": "hidden",
+          "description": "present while the menu is closed."
+        }
+      ],
+      "customization": [
+        "background-color",
+        "border",
+        "border-radius",
+        "padding",
+        "box-shadow"
+      ]
+    },
+    {
+      "className": "qc-dialog",
+      "purpose": "A modal dialog: settings, search, layouts and the drawing editors.",
+      "states": [
+        {
+          "attribute": "data-role",
+          "description": "which dialog this is, in the chart's own vocabulary."
+        }
+      ],
+      "customization": [
+        "background-color",
+        "border",
+        "border-radius",
+        "padding",
+        "box-shadow",
+        "max-width"
+      ]
+    }
+  ],
+  "modes": [
+    "light",
+    "dark"
+  ],
+  "families": [
+    {
+      "family": "canvas",
+      "roles": [
+        "canvas.background",
+        "canvas.paneBorder"
+      ]
+    },
+    {
+      "family": "series",
+      "roles": [
+        "series.up",
+        "series.down",
+        "series.neutral"
+      ]
+    },
+    {
+      "family": "scale",
+      "roles": [
+        "scale.grid",
+        "scale.background",
+        "scale.border",
+        "scale.text",
+        "scale.crosshair",
+        "scale.crosshairLabelBackground",
+        "scale.crosshairLabelText",
+        "scale.sessionPreMarket",
+        "scale.sessionExtended",
+        "scale.sessionAfterHours",
+        "scale.sessionClosed"
+      ]
+    },
+    {
+      "family": "text",
+      "roles": [
+        "text.primary",
+        "text.secondary",
+        "text.muted",
+        "text.disabled",
+        "text.inverse",
+        "text.link",
+        "text.highlight",
+        "text.onCanvas",
+        "text.fontFamily",
+        "text.fontSizeAxis",
+        "text.fontSizeTitle",
+        "text.fontSizeBase",
+        "text.fontSizeSmall",
+        "text.fontSizeMicro"
+      ]
+    },
+    {
+      "family": "chrome",
+      "roles": [
+        "chrome.surface",
+        "chrome.surfaceRaised",
+        "chrome.border",
+        "chrome.borderStrong",
+        "chrome.fieldBorder",
+        "chrome.caret",
+        "chrome.grip",
+        "chrome.scrollThumb",
+        "chrome.radius",
+        "chrome.radiusLarge"
+      ]
+    },
+    {
+      "family": "overlay",
+      "roles": [
+        "overlay.surface",
+        "overlay.separator",
+        "overlay.shadow",
+        "overlay.scrim"
+      ]
+    },
+    {
+      "family": "state",
+      "roles": [
+        "state.accent",
+        "state.hover",
+        "state.hoverInk",
+        "state.pressed",
+        "state.pressedHover",
+        "state.selected",
+        "state.focusRing",
+        "state.markInk",
+        "state.selection"
+      ]
+    },
+    {
+      "family": "control",
+      "roles": [
+        "control.on",
+        "control.onHover",
+        "control.onPressed",
+        "control.off",
+        "control.offHover",
+        "control.offPressed",
+        "control.mark"
+      ]
+    },
+    {
+      "family": "status",
+      "roles": [
+        "status.positive",
+        "status.negative",
+        "status.warning",
+        "status.info",
+        "status.loading",
+        "status.sessionPreMarket",
+        "status.sessionOpen",
+        "status.sessionExtended",
+        "status.sessionAfterHours",
+        "status.sessionClosed"
+      ]
+    },
+    {
+      "family": "illustration",
+      "roles": [
+        "illustration.ink",
+        "illustration.accent",
+        "illustration.accentInk"
+      ]
+    },
+    {
+      "family": "drawing",
+      "roles": [
+        "drawing.line",
+        "drawing.fill",
+        "drawing.text",
+        "drawing.handle",
+        "drawing.selected"
+      ]
+    },
+    {
+      "family": "motion",
+      "roles": [
+        "motion.durationFast",
+        "motion.durationBase"
+      ]
+    }
+  ],
+  "roles": [
+    {
+      "id": "canvas.background",
+      "family": "canvas",
+      "kind": "color",
+      "description": "The fill behind the plotted series.",
+      "values": {
+        "light": "#ffffff",
+        "dark": "#0f0f0f"
+      }
+    },
+    {
+      "id": "canvas.paneBorder",
+      "family": "canvas",
+      "kind": "color",
+      "description": "The divider between stacked panes and around the plot area.",
+      "values": {
+        "light": "#ebebeb",
+        "dark": "#2e2e2e"
+      }
+    },
+    {
+      "id": "series.up",
+      "family": "series",
+      "kind": "color",
+      "description": "A rising value: up volume, a rising study tint, a positive series default.",
+      "values": {
+        "light": "#089981",
+        "dark": "#089981"
+      }
+    },
+    {
+      "id": "series.down",
+      "family": "series",
+      "kind": "color",
+      "description": "A falling value: down volume, a falling study tint, a negative series default.",
+      "values": {
+        "light": "#f23645",
+        "dark": "#f23645"
+      }
+    },
+    {
+      "id": "series.neutral",
+      "family": "series",
+      "kind": "color",
+      "description": "A series or level with no direction, such as a study level line.",
+      "values": {
+        "light": "#787b86",
+        "dark": "#787b86"
+      }
+    },
+    {
+      "id": "scale.grid",
+      "family": "scale",
+      "kind": "color",
+      "description": "The grid lines drawn across the plot area.",
+      "values": {
+        "light": "rgba(0, 0, 0, 0.06)",
+        "dark": "rgba(255, 255, 255, 0.035)"
+      }
+    },
+    {
+      "id": "scale.background",
+      "family": "scale",
+      "kind": "color",
+      "description": "The ground behind the price and time scales.",
+      "values": {
+        "light": "#ffffff",
+        "dark": "#0f0f0f"
+      }
+    },
+    {
+      "id": "scale.border",
+      "family": "scale",
+      "kind": "color",
+      "description": "The line separating a scale from the plot area.",
+      "values": {
+        "light": "#e0e3eb",
+        "dark": "#2a2e39"
+      }
+    },
+    {
+      "id": "scale.text",
+      "family": "scale",
+      "kind": "color",
+      "description": "Tick labels on the price and time scales.",
+      "contrast": [
+        {
+          "over": "scale.background",
+          "min": 4.5
+        }
+      ],
+      "values": {
+        "light": "#5b616e",
+        "dark": "#9aa0aa"
+      }
+    },
+    {
+      "id": "scale.crosshair",
+      "family": "scale",
+      "kind": "color",
+      "description": "The crosshair lines that follow the pointer.",
+      "values": {
+        "light": "#9598a1",
+        "dark": "#758696"
+      }
+    },
+    {
+      "id": "scale.crosshairLabelBackground",
+      "family": "scale",
+      "kind": "color",
+      "description": "The fill of the crosshair value label on a scale.",
+      "values": {
+        "light": "#131722",
+        "dark": "#dbdbdb"
+      }
+    },
+    {
+      "id": "scale.crosshairLabelText",
+      "family": "scale",
+      "kind": "color",
+      "description": "The value inside the crosshair label.",
+      "contrast": [
+        {
+          "over": "scale.crosshairLabelBackground",
+          "min": 4.5
+        }
+      ],
+      "values": {
+        "light": "#ffffff",
+        "dark": "#0f0f0f"
+      }
+    },
+    {
+      "id": "scale.sessionPreMarket",
+      "family": "scale",
+      "kind": "color",
+      "description": "Shading over pre-market bars.",
+      "values": {
+        "light": "rgba(76, 152, 251, 0.06)",
+        "dark": "rgba(76, 152, 251, 0.05)"
+      }
+    },
+    {
+      "id": "scale.sessionExtended",
+      "family": "scale",
+      "kind": "color",
+      "description": "Shading over electronic-hours bars.",
+      "values": {
+        "light": "rgba(76, 152, 251, 0.06)",
+        "dark": "rgba(76, 152, 251, 0.05)"
+      }
+    },
+    {
+      "id": "scale.sessionAfterHours",
+      "family": "scale",
+      "kind": "color",
+      "description": "Shading over after-hours bars.",
+      "values": {
+        "light": "rgba(245, 166, 35, 0.06)",
+        "dark": "rgba(245, 166, 35, 0.045)"
+      }
+    },
+    {
+      "id": "scale.sessionClosed",
+      "family": "scale",
+      "kind": "color",
+      "description": "Shading over bars while the market is closed.",
+      "values": {
+        "light": "rgba(0, 0, 0, 0.05)",
+        "dark": "rgba(0, 0, 0, 0.22)"
+      }
+    },
+    {
+      "id": "text.primary",
+      "family": "text",
+      "kind": "color",
+      "description": "Default ink for chart controls, menus, and dialogs.",
+      "contrast": [
+        {
+          "over": "chrome.surface",
+          "min": 4.5
+        },
+        {
+          "over": "state.selected",
+          "on": "overlay.surface",
+          "min": 4.5
+        }
+      ],
+      "values": {
+        "light": "#0f0f0f",
+        "dark": "#dbdbdb"
+      }
+    },
+    {
+      "id": "text.secondary",
+      "family": "text",
+      "kind": "color",
+      "description": "Supporting ink: descriptions, group headings, secondary values.",
+      "contrast": [
+        {
+          "over": "chrome.surface",
+          "min": 4.5
+        },
+        {
+          "over": "state.selected",
+          "on": "overlay.surface",
+          "min": 4.5
+        },
+        {
+          "over": "state.hover",
+          "on": "overlay.surface",
+          "min": 4.5
+        }
+      ],
+      "values": {
+        "light": "#4a4a4a",
+        "dark": "#b8b8b8"
+      }
+    },
+    {
+      "id": "text.muted",
+      "family": "text",
+      "kind": "color",
+      "description": "The least emphasized readable ink, such as a keyboard hint.",
+      "contrast": [
+        {
+          "over": "chrome.surface",
+          "min": 4.5
+        },
+        {
+          "over": "state.selected",
+          "on": "overlay.surface",
+          "min": 4.5
+        },
+        {
+          "over": "state.hover",
+          "on": "overlay.surface",
+          "min": 4.5
+        }
+      ],
+      "values": {
+        "light": "#636363",
+        "dark": "#9c9c9c"
+      }
+    },
+    {
+      "id": "text.disabled",
+      "family": "text",
+      "kind": "color",
+      "description": "Ink of a control that cannot be used. WCAG exempts an inactive control from a contrast minimum.",
+      "values": {
+        "light": "#b8b8b8",
+        "dark": "#575757"
+      }
+    },
+    {
+      "id": "text.inverse",
+      "family": "text",
+      "kind": "color",
+      "description": "Ink on an inverted or danger fill: a held mode on the on fill, a destructive action.",
+      "contrast": [
+        {
+          "over": "control.on",
+          "min": 4.5
+        },
+        {
+          "over": "status.negative",
+          "min": 4.5
+        }
+      ],
+      "values": {
+        "light": "#ffffff",
+        "dark": "#0f0f0f"
+      }
+    },
+    {
+      "id": "text.link",
+      "family": "text",
+      "kind": "color",
+      "description": "Ink of a text link inside chart chrome, and of a label naming an accent state, such as a running replay.",
+      "contrast": [
+        {
+          "over": "chrome.surface",
+          "min": 4.5
+        },
+        {
+          "over": "overlay.surface",
+          "min": 4.5
+        }
+      ],
+      "values": {
+        "light": "#2962ff",
+        "dark": "#5b9cf6"
+      }
+    },
+    {
+      "id": "text.highlight",
+      "family": "text",
+      "kind": "color",
+      "description": "Ink of the part of a label that matches what the reader typed, such as a symbol search.",
+      "contrast": [
+        {
+          "over": "overlay.surface",
+          "min": 4.5
+        },
+        {
+          "over": "chrome.surface",
+          "min": 4.5
+        }
+      ],
+      "values": {
+        "light": "#2962ff",
+        "dark": "#5280ff"
+      }
+    },
+    {
+      "id": "text.onCanvas",
+      "family": "text",
+      "kind": "color",
+      "description": "Ink drawn directly over the plot area, such as the legend.",
+      "contrast": [
+        {
+          "over": "canvas.background",
+          "min": 4.5
+        }
+      ],
+      "values": {
+        "light": "#0f0f0f",
+        "dark": "#dbdbdb"
+      }
+    },
+    {
+      "id": "text.fontFamily",
+      "family": "text",
+      "kind": "font",
+      "description": "The font stack chart chrome and canvas text share. Quick Charts never downloads a font.",
+      "values": {
+        "light": "-apple-system, BlinkMacSystemFont, \"Trebuchet MS\", Roboto, Ubuntu, sans-serif",
+        "dark": "-apple-system, BlinkMacSystemFont, \"Trebuchet MS\", Roboto, Ubuntu, sans-serif"
+      }
+    },
+    {
+      "id": "text.fontSizeAxis",
+      "family": "text",
+      "kind": "length",
+      "description": "Size of scale and crosshair labels drawn into the canvas.",
+      "values": {
+        "light": "13px",
+        "dark": "13px"
+      }
+    },
+    {
+      "id": "text.fontSizeTitle",
+      "family": "text",
+      "kind": "length",
+      "description": "Size of a dialog or panel title.",
+      "values": {
+        "light": "14px",
+        "dark": "14px"
+      }
+    },
+    {
+      "id": "text.fontSizeBase",
+      "family": "text",
+      "kind": "length",
+      "description": "Size of ordinary control and menu text.",
+      "values": {
+        "light": "14px",
+        "dark": "14px"
+      }
+    },
+    {
+      "id": "text.fontSizeSmall",
+      "family": "text",
+      "kind": "length",
+      "description": "Size of dense control text, such as a legend row.",
+      "values": {
+        "light": "11px",
+        "dark": "11px"
+      }
+    },
+    {
+      "id": "text.fontSizeMicro",
+      "family": "text",
+      "kind": "length",
+      "description": "Size of the smallest chip and hint text.",
+      "values": {
+        "light": "10px",
+        "dark": "10px"
+      }
+    },
+    {
+      "id": "chrome.surface",
+      "family": "chrome",
+      "kind": "color",
+      "description": "The fill of toolbars, rails, bars, and panels.",
+      "values": {
+        "light": "#ffffff",
+        "dark": "#0f0f0f"
+      }
+    },
+    {
+      "id": "chrome.surfaceRaised",
+      "family": "chrome",
+      "kind": "color",
+      "description": "The fill of a control sitting on a chrome surface, such as a button or field.",
+      "values": {
+        "light": "#ffffff",
+        "dark": "#2e2e2e"
+      }
+    },
+    {
+      "id": "chrome.border",
+      "family": "chrome",
+      "kind": "color",
+      "description": "The ordinary border of a control or panel.",
+      "values": {
+        "light": "#ebebeb",
+        "dark": "#2e2e2e"
+      }
+    },
+    {
+      "id": "chrome.borderStrong",
+      "family": "chrome",
+      "kind": "color",
+      "description": "A border or divider that must stay visible at a glance.",
+      "contrast": [
+        {
+          "over": "chrome.surface",
+          "min": 3
+        }
+      ],
+      "values": {
+        "light": "#8c8c8c",
+        "dark": "#707070"
+      }
+    },
+    {
+      "id": "chrome.fieldBorder",
+      "family": "chrome",
+      "kind": "color",
+      "description": "The outline of a text field, such as the symbol search field. The field's mark and prompt name it, so the outline is not its only sign.",
+      "values": {
+        "light": "#dbdbdb",
+        "dark": "#636363"
+      }
+    },
+    {
+      "id": "chrome.caret",
+      "family": "chrome",
+      "kind": "color",
+      "description": "The ink of the arrow that opens a control's menu or flyout.",
+      "contrast": [
+        {
+          "over": "chrome.surface",
+          "min": 3
+        }
+      ],
+      "values": {
+        "light": "#0f0f0f",
+        "dark": "#8c8c8c"
+      }
+    },
+    {
+      "id": "chrome.grip",
+      "family": "chrome",
+      "kind": "color",
+      "description": "The dots of a drag handle on a floating toolbar.",
+      "values": {
+        "light": "#b8b8b8",
+        "dark": "#575757"
+      }
+    },
+    {
+      "id": "chrome.scrollThumb",
+      "family": "chrome",
+      "kind": "color",
+      "description": "The thumb of the thin bar beside a list the viewer scrolls, such as the search results or the indicator list.",
+      "values": {
+        "light": "#9c9c9c",
+        "dark": "#3d3d3d"
+      }
+    },
+    {
+      "id": "chrome.radius",
+      "family": "chrome",
+      "kind": "length",
+      "description": "Corner radius of a control.",
+      "values": {
+        "light": "6px",
+        "dark": "6px"
+      }
+    },
+    {
+      "id": "chrome.radiusLarge",
+      "family": "chrome",
+      "kind": "length",
+      "description": "Corner radius of a panel, dialog, or menu.",
+      "values": {
+        "light": "6px",
+        "dark": "6px"
+      }
+    },
+    {
+      "id": "overlay.surface",
+      "family": "overlay",
+      "kind": "color",
+      "description": "The fill of a floating menu, dialog, or popover.",
+      "values": {
+        "light": "#ffffff",
+        "dark": "#1f1f1f"
+      }
+    },
+    {
+      "id": "overlay.separator",
+      "family": "overlay",
+      "kind": "color",
+      "description": "The rule between groups inside a menu or panel.",
+      "values": {
+        "light": "#ebebeb",
+        "dark": "#4a4a4a"
+      }
+    },
+    {
+      "id": "overlay.shadow",
+      "family": "overlay",
+      "kind": "shadow",
+      "description": "The elevation shadow of a floating surface.",
+      "values": {
+        "light": "0 2px 4px rgba(0, 0, 0, 0.2)",
+        "dark": "0 2px 4px rgba(0, 0, 0, 0.4)"
+      }
+    },
+    {
+      "id": "overlay.scrim",
+      "family": "overlay",
+      "kind": "color",
+      "description": "The backdrop that dims the chart behind a modal dialog.",
+      "values": {
+        "light": "rgba(0, 0, 0, 0.35)",
+        "dark": "rgba(0, 0, 0, 0.5)"
+      }
+    },
+    {
+      "id": "state.accent",
+      "family": "state",
+      "kind": "color",
+      "description": "The accent a mark, fill, or glyph wears: a chosen day, a selected tab, an armed favorite.",
+      "contrast": [
+        {
+          "over": "chrome.surface",
+          "min": 3
+        },
+        {
+          "over": "overlay.surface",
+          "min": 3
+        }
+      ],
+      "values": {
+        "light": "#2962ff",
+        "dark": "#2962ff"
+      }
+    },
+    {
+      "id": "state.hover",
+      "family": "state",
+      "kind": "color",
+      "description": "The fill a control takes under the pointer.",
+      "values": {
+        "light": "#f2f2f2",
+        "dark": "#2e2e2e"
+      }
+    },
+    {
+      "id": "state.hoverInk",
+      "family": "state",
+      "kind": "color",
+      "description": "The ink a row of a plain picking list, such as the time zone list, dims to under the pointer.",
+      "contrast": [
+        {
+          "over": "state.hover",
+          "on": "overlay.surface",
+          "min": 4.5
+        }
+      ],
+      "values": {
+        "light": "#0f0f0f",
+        "dark": "#c9c9c9"
+      }
+    },
+    {
+      "id": "state.pressed",
+      "family": "state",
+      "kind": "color",
+      "description": "The fill a control takes while the pointer is down, and the fill of an armed tool.",
+      "values": {
+        "light": "#ebebeb",
+        "dark": "#3d3d3d"
+      }
+    },
+    {
+      "id": "state.pressedHover",
+      "family": "state",
+      "kind": "color",
+      "description": "The fill of an armed tool or a held toggle under the pointer.",
+      "values": {
+        "light": "#dbdbdb",
+        "dark": "#4a4a4a"
+      }
+    },
+    {
+      "id": "state.selected",
+      "family": "state",
+      "kind": "color",
+      "description": "The fill of a chosen row, tab, or tool.",
+      "values": {
+        "light": "#ebebeb",
+        "dark": "#333333"
+      }
+    },
+    {
+      "id": "state.focusRing",
+      "family": "state",
+      "kind": "color",
+      "description": "The visible focus indicator, including the active pane ring.",
+      "contrast": [
+        {
+          "over": "chrome.surface",
+          "min": 3
+        }
+      ],
+      "values": {
+        "light": "#2962ff",
+        "dark": "#2962ff"
+      }
+    },
+    {
+      "id": "state.markInk",
+      "family": "state",
+      "kind": "color",
+      "description": "Ink on the accent or a filled state mark: a chosen day, the replay disc's cut-out.",
+      "contrast": [
+        {
+          "over": "state.accent",
+          "min": 4.5
+        }
+      ],
+      "values": {
+        "light": "#ffffff",
+        "dark": "#ffffff"
+      }
+    },
+    {
+      "id": "state.selection",
+      "family": "state",
+      "kind": "color",
+      "description": "The tint over selected content.",
+      "values": {
+        "light": "rgba(31, 86, 238, 0.18)",
+        "dark": "rgba(82, 160, 252, 0.22)"
+      }
+    },
+    {
+      "id": "control.on",
+      "family": "control",
+      "kind": "color",
+      "description": "The emphasis fill: a switch, checkbox, or radio that is on, a chosen row, a held mode, and the primary action; also the ring of a checkbox or radio that is off.",
+      "contrast": [
+        {
+          "over": "overlay.surface",
+          "min": 3
+        },
+        {
+          "over": "chrome.surface",
+          "min": 3
+        }
+      ],
+      "values": {
+        "light": "#2e2e2e",
+        "dark": "#f2f2f2"
+      }
+    },
+    {
+      "id": "control.onHover",
+      "family": "control",
+      "kind": "color",
+      "description": "The emphasis fill, and the ring of a radio, under the pointer.",
+      "values": {
+        "light": "#4a4a4a",
+        "dark": "#dbdbdb"
+      }
+    },
+    {
+      "id": "control.onPressed",
+      "family": "control",
+      "kind": "color",
+      "description": "The emphasis fill, and the ring of a radio, while the pointer is down.",
+      "values": {
+        "light": "#707070",
+        "dark": "#8c8c8c"
+      }
+    },
+    {
+      "id": "control.off",
+      "family": "control",
+      "kind": "color",
+      "description": "The track of a switch that is off.",
+      "values": {
+        "light": "#9c9c9c",
+        "dark": "#636363"
+      }
+    },
+    {
+      "id": "control.offHover",
+      "family": "control",
+      "kind": "color",
+      "description": "The track of a switch that is off, under the pointer.",
+      "values": {
+        "light": "#8c8c8c",
+        "dark": "#707070"
+      }
+    },
+    {
+      "id": "control.offPressed",
+      "family": "control",
+      "kind": "color",
+      "description": "The track of a switch that is off, while the pointer is down.",
+      "values": {
+        "light": "#b8b8b8",
+        "dark": "#636363"
+      }
+    },
+    {
+      "id": "control.mark",
+      "family": "control",
+      "kind": "color",
+      "description": "The knob of a switch, the check of a checkbox, and the dot of a radio.",
+      "contrast": [
+        {
+          "over": "control.on",
+          "min": 3
+        },
+        {
+          "over": "control.onHover",
+          "min": 3
+        },
+        {
+          "over": "control.onPressed",
+          "min": 3
+        }
+      ],
+      "values": {
+        "light": "#ffffff",
+        "dark": "#2e2e2e"
+      }
+    },
+    {
+      "id": "status.positive",
+      "family": "status",
+      "kind": "color",
+      "description": "A positive value or a successful outcome in chart chrome.",
+      "contrast": [
+        {
+          "over": "chrome.surface",
+          "min": 4.5
+        }
+      ],
+      "values": {
+        "light": "#067a67",
+        "dark": "#089981"
+      }
+    },
+    {
+      "id": "status.negative",
+      "family": "status",
+      "kind": "color",
+      "description": "A negative value or a failed outcome in chart chrome.",
+      "contrast": [
+        {
+          "over": "chrome.surface",
+          "min": 4.5
+        }
+      ],
+      "values": {
+        "light": "#cc2f3c",
+        "dark": "#f7525f"
+      }
+    },
+    {
+      "id": "status.warning",
+      "family": "status",
+      "kind": "color",
+      "description": "A condition the reader should notice before acting.",
+      "contrast": [
+        {
+          "over": "chrome.surface",
+          "min": 4.5
+        }
+      ],
+      "values": {
+        "light": "#8a5a00",
+        "dark": "#f5a623"
+      }
+    },
+    {
+      "id": "status.info",
+      "family": "status",
+      "kind": "color",
+      "description": "An informational note in chart chrome.",
+      "contrast": [
+        {
+          "over": "chrome.surface",
+          "min": 4.5
+        }
+      ],
+      "values": {
+        "light": "#1160c4",
+        "dark": "#68a5ff"
+      }
+    },
+    {
+      "id": "status.loading",
+      "family": "status",
+      "kind": "color",
+      "description": "The indicator shown while the chart waits for data.",
+      "values": {
+        "light": "#787b86",
+        "dark": "#787b86"
+      }
+    },
+    {
+      "id": "status.sessionPreMarket",
+      "family": "status",
+      "kind": "color",
+      "description": "The session status marker for pre-market.",
+      "values": {
+        "light": "#4c98fb",
+        "dark": "#4c98fb"
+      }
+    },
+    {
+      "id": "status.sessionOpen",
+      "family": "status",
+      "kind": "color",
+      "description": "The session status marker while the market is open.",
+      "values": {
+        "light": "#22c55e",
+        "dark": "#22c55e"
+      }
+    },
+    {
+      "id": "status.sessionExtended",
+      "family": "status",
+      "kind": "color",
+      "description": "The session status marker for electronic hours.",
+      "values": {
+        "light": "#4c98fb",
+        "dark": "#4c98fb"
+      }
+    },
+    {
+      "id": "status.sessionAfterHours",
+      "family": "status",
+      "kind": "color",
+      "description": "The session status marker for after-hours.",
+      "values": {
+        "light": "#f5a623",
+        "dark": "#f5a623"
+      }
+    },
+    {
+      "id": "status.sessionClosed",
+      "family": "status",
+      "kind": "color",
+      "description": "The session status marker while the market is closed.",
+      "values": {
+        "light": "rgba(0, 0, 0, 0.35)",
+        "dark": "rgba(255, 255, 255, 0.35)"
+      }
+    },
+    {
+      "id": "illustration.ink",
+      "family": "illustration",
+      "kind": "color",
+      "description": "The line drawing of an empty-state illustration.",
+      "contrast": [
+        {
+          "over": "overlay.surface",
+          "min": 3
+        }
+      ],
+      "values": {
+        "light": "#1e222d",
+        "dark": "#d1d4dc"
+      }
+    },
+    {
+      "id": "illustration.accent",
+      "family": "illustration",
+      "kind": "color",
+      "description": "The badge an empty-state illustration wears on the action it invites.",
+      "contrast": [
+        {
+          "over": "overlay.surface",
+          "min": 3
+        }
+      ],
+      "values": {
+        "light": "#2196f3",
+        "dark": "#1976d2"
+      }
+    },
+    {
+      "id": "illustration.accentInk",
+      "family": "illustration",
+      "kind": "color",
+      "description": "The mark on an illustration's badge.",
+      "contrast": [
+        {
+          "over": "illustration.accent",
+          "min": 3
+        }
+      ],
+      "values": {
+        "light": "#ffffff",
+        "dark": "#d1d4dc"
+      }
+    },
+    {
+      "id": "drawing.line",
+      "family": "drawing",
+      "kind": "color",
+      "description": "The stroke of a newly placed drawing.",
+      "values": {
+        "light": "#2962ff",
+        "dark": "#4c98fb"
+      }
+    },
+    {
+      "id": "drawing.fill",
+      "family": "drawing",
+      "kind": "color",
+      "description": "The fill of a newly placed drawing that has an area.",
+      "values": {
+        "light": "rgba(41, 98, 255, 0.15)",
+        "dark": "rgba(76, 152, 251, 0.15)"
+      }
+    },
+    {
+      "id": "drawing.text",
+      "family": "drawing",
+      "kind": "color",
+      "description": "The ink of a drawing label.",
+      "values": {
+        "light": "#0f0f0f",
+        "dark": "#dbdbdb"
+      }
+    },
+    {
+      "id": "drawing.handle",
+      "family": "drawing",
+      "kind": "color",
+      "description": "The center of a drawing selection handle.",
+      "values": {
+        "light": "#ffffff",
+        "dark": "#0f0f0f"
+      }
+    },
+    {
+      "id": "drawing.selected",
+      "family": "drawing",
+      "kind": "color",
+      "description": "The highlight of a selected drawing and its handles.",
+      "values": {
+        "light": "#2962ff",
+        "dark": "#4c98fb"
+      }
+    },
+    {
+      "id": "motion.durationFast",
+      "family": "motion",
+      "kind": "duration",
+      "description": "A state change the reader should not have to wait for, such as a hover.",
+      "values": {
+        "light": "90ms",
+        "dark": "90ms"
+      }
+    },
+    {
+      "id": "motion.durationBase",
+      "family": "motion",
+      "kind": "duration",
+      "description": "An ordinary transition, such as a menu opening.",
+      "values": {
+        "light": "150ms",
+        "dark": "150ms"
+      }
+    }
+  ]
+}