@deephaven/components 0.55.1-beta.9 → 0.56.0

package/dist/RandomAreaPlotAnimation.js

@@ -5,27 +5,47 @@ import React, { useEffect, useState, useRef } from 'react';
 import debounce from 'lodash.debounce';
 import { assertNotNull } from '@deephaven/utils';
 import "./RandomAreaPlotAnimation.css";
-import ThemeExport from "./ThemeExport.js";
+import { resolveCssVariablesInRecord, useTheme } from "./theme/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 var VOLATILITY = 0.025; // how spikey the data gets
 var LOW = 0.9;
 var HIGH = 0.1;
 var START_Y = 0.618;
-var FOREGROUND = ThemeExport['primary-dark'];
 var GRID_SIZE = 80;
-var GRID_COLOR = ThemeExport['gray-800'];
-var BACKGROUND = ThemeExport['gray-900'];
 var PATTERN = {
   SIZE: 8,
-  DOT_SIZE: 2,
-  FILL_OPACITY: 0.25
+  DOT_SIZE: 2
 };
 var PX_PER_SECOND = 18;
 var RESIZE_DEBOUNCE = 250;
 var INTERACTION_TIMEOUT = 60 * 1000;
+var THEME_COLOR_VARIABLES = {
+  background: 'var(--dh-color-random-area-plot-animation-bg)',
+  foregroundFill: 'var(--dh-color-random-area-plot-animation-fg-fill)',
+  foregroundStroke: 'var(--dh-color-random-area-plot-animation-fg-stroke)',
+  gridColor: 'var(--dh-color-random-area-plot-animation-grid)'
+};
+
+/**
+ * Resolve theme colors needed for our animation.
+ */
+function getRandomAreaPlotAnimationThemeColors() {
+  return resolveCssVariablesInRecord(THEME_COLOR_VARIABLES);
+}
 
 // Draw a background canvas, paint it with a fun chart looking animation
 var RandomAreaPlotAnimation = /*#__PURE__*/React.memo(() => {
+  var {
+    activeThemes
+  } = useTheme();
+  var [themeColors, setThemeColors] = useState(null);
+
+  // Resolving css variables has to run in `useEffect` or `useLayoutEffect` so
+  // that we know React has updated the DOM with any styles set by the
+  // ThemeProvider.
+  useEffect(() => {
+    setThemeColors(getRandomAreaPlotAnimationThemeColors());
+  }, [activeThemes]);
   var canvas = useRef(null);
   var container = useRef(null);
   var [shade, setShade] = useState(false);
@@ -55,6 +75,14 @@ var RandomAreaPlotAnimation = /*#__PURE__*/React.memo(() => {
 
   // Returns the background fill create offscreen as pattern
   function createPatternFill() {
+    if (themeColors == null) {
+      return null;
+    }
+    var {
+      foregroundFill,
+      foregroundStroke
+    } = themeColors;
+
     // create the off-screen canvas
     var canvasPattern = document.createElement('canvas');
     canvasPattern.width = PATTERN.SIZE;
@@ -63,11 +91,11 @@ var RandomAreaPlotAnimation = /*#__PURE__*/React.memo(() => {
 
     // draw pattern to off-screen context
     if (contextPattern != null) {
-      contextPattern.fillStyle = FOREGROUND;
+      contextPattern.fillStyle = foregroundStroke;
       contextPattern.fillRect(0, 0, PATTERN.DOT_SIZE, PATTERN.DOT_SIZE);
 
       // add an overlay fill
-      contextPattern.fillStyle = FOREGROUND + Math.round(255 * PATTERN.FILL_OPACITY).toString(16).padStart(2, '0'); // adds opacity in hex to color
+      contextPattern.fillStyle = foregroundFill;
       contextPattern.fillRect(0, 0, PATTERN.SIZE, PATTERN.SIZE);
     }
     return contextPattern === null || contextPattern === void 0 ? void 0 : contextPattern.createPattern(canvasPattern, 'repeat');
@@ -146,14 +174,22 @@ var RandomAreaPlotAnimation = /*#__PURE__*/React.memo(() => {
    */
   function drawCanvas(timestamp) {
     var _lastTimestamp, _lastTimestamp2, _lastTimestamp3;
+    if (themeColors == null) {
+      return;
+    }
     lastTimestamp = (_lastTimestamp = lastTimestamp) !== null && _lastTimestamp !== void 0 ? _lastTimestamp : timestamp;
+    var {
+      background,
+      foregroundStroke,
+      gridColor
+    } = themeColors;
     assertNotNull(ctx);
     // clear the canvas
-    ctx.fillStyle = BACKGROUND;
+    ctx.fillStyle = background;
     ctx.fillRect(0, 0, width, height);
     drawGridLines(ctx);
     ctx.lineWidth = 1;
-    ctx.strokeStyle = GRID_COLOR;
+    ctx.strokeStyle = gridColor;
     ctx.stroke();
 
     // for speeds less then 60 px per second, subpixel motion is required to look smooth
@@ -161,7 +197,7 @@ var RandomAreaPlotAnimation = /*#__PURE__*/React.memo(() => {
     ctx.translate(subPixelMotion, 0);
     drawAreaLine(data, ctx);
     ctx.lineWidth = 2;
-    ctx.strokeStyle = FOREGROUND;
+    ctx.strokeStyle = foregroundStroke;
     ctx.stroke();
     ctx.translate(-subPixelMotion, 0); // we don't pattern to shift however
     if (pattern != null) {
@@ -278,8 +314,8 @@ var RandomAreaPlotAnimation = /*#__PURE__*/React.memo(() => {
       resetIdleTimeout.cancel();
       debouncedHandleResize.cancel();
     };
-  }, []);
-  return /*#__PURE__*/_jsx("div", {
+  }, [themeColors]);
+  return themeColors && /*#__PURE__*/_jsx("div", {
     className: "random-area-plot-animation-container",
     ref: container,
     children: /*#__PURE__*/_jsx("canvas", {

package/dist/RandomAreaPlotAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"RandomAreaPlotAnimation.js","names":["React","useEffect","useState","useRef","debounce","assertNotNull","ThemeExport","jsx","_jsx","VOLATILITY","LOW","HIGH","START_Y","FOREGROUND","GRID_SIZE","GRID_COLOR","BACKGROUND","PATTERN","SIZE","DOT_SIZE","FILL_OPACITY","PX_PER_SECOND","RESIZE_DEBOUNCE","INTERACTION_TIMEOUT","RandomAreaPlotAnimation","memo","canvas","container","shade","setShade","scale","window","devicePixelRatio","ctx","pattern","width","height","rAF","lastTimestamp","data","setCanvasSize","_ctx","current","offsetWidth","offsetHeight","style","concat","createPatternFill","canvasPattern","document","createElement","contextPattern","getContext","fillStyle","fillRect","Math","round","toString","padStart","createPattern","randomWalk","prev","rand","random","change","abs","initData","startingData","y","x","push","setDataSize","length","pop","drawAreaLine","path","context","beginPath","moveTo","lineTo","i","closePath","drawGridLines","drawCanvas","timestamp","_lastTimestamp","_lastTimestamp2","_lastTimestamp3","lineWidth","strokeStyle","stroke","subPixelMotion","translate","fill","setTransform","_lastTimestamp4","numberOfPoints","floor","shift","cancelAnimationFrame","requestAnimationFrame","debouncedHandleResize","leading","pauseAnimation","resetIdleTimeout","startAnimation","handleActivity","hasFocus","handleResize","_canvas$current","alpha","addEventListener","removeEventListener","cancel","className","ref","children"],"sources":["../src/RandomAreaPlotAnimation.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\n/* eslint-disable react/display-name */\n\nimport React, { useEffect, useState, useRef } from 'react';\nimport debounce from 'lodash.debounce';\nimport { assertNotNull } from '@deephaven/utils';\nimport './RandomAreaPlotAnimation.scss';\nimport ThemeExport from './ThemeExport';\n\nconst VOLATILITY = 0.025; // how spikey the data gets\nconst LOW = 0.9;\nconst HIGH = 0.1;\nconst START_Y = 0.618;\nconst FOREGROUND = ThemeExport['primary-dark'];\nconst GRID_SIZE = 80;\nconst GRID_COLOR = ThemeExport['gray-800'];\nconst BACKGROUND = ThemeExport['gray-900'];\nconst PATTERN = { SIZE: 8, DOT_SIZE: 2, FILL_OPACITY: 0.25 };\nconst PX_PER_SECOND = 18;\nconst RESIZE_DEBOUNCE = 250;\nconst INTERACTION_TIMEOUT = 60 * 1000;\n\n// Draw a background canvas, paint it with a fun chart looking animation\nconst RandomAreaPlotAnimation = React.memo(() => {\n  const canvas = useRef<HTMLCanvasElement>(null);\n  const container = useRef<HTMLDivElement>(null);\n  const [shade, setShade] = useState(false);\n  const scale = window.devicePixelRatio;\n\n  let ctx: CanvasRenderingContext2D | null | undefined;\n  let pattern: CanvasPattern | null | undefined;\n  let width: number;\n  let height: number;\n  let rAF: number | null;\n\n  let lastTimestamp: DOMHighResTimeStamp | null | undefined = null;\n  let data: number[] = [];\n\n  function setCanvasSize(): void {\n    // Set canvas size to fill screen\n    if (container.current != null) {\n      width = container.current.offsetWidth;\n      height = container.current.offsetHeight;\n    }\n\n    if (canvas.current != null) {\n      canvas.current.style.width = `${width}px`;\n      canvas.current.style.height = `${height}px`;\n\n      canvas.current.width = width * scale;\n      canvas.current.height = height * scale;\n    }\n\n    ctx?.scale(scale, scale);\n  }\n\n  // Returns the background fill create offscreen as pattern\n  function createPatternFill(): CanvasPattern | null | undefined {\n    // create the off-screen canvas\n    const canvasPattern = document.createElement('canvas');\n    canvasPattern.width = PATTERN.SIZE;\n    canvasPattern.height = PATTERN.SIZE;\n    const contextPattern = canvasPattern.getContext('2d');\n\n    // draw pattern to off-screen context\n    if (contextPattern != null) {\n      contextPattern.fillStyle = FOREGROUND;\n      contextPattern.fillRect(0, 0, PATTERN.DOT_SIZE, PATTERN.DOT_SIZE);\n\n      // add an overlay fill\n      contextPattern.fillStyle =\n        FOREGROUND +\n        Math.round(255 * PATTERN.FILL_OPACITY)\n          .toString(16)\n          .padStart(2, '0'); // adds opacity in hex to color\n      contextPattern.fillRect(0, 0, PATTERN.SIZE, PATTERN.SIZE);\n    }\n    return contextPattern?.createPattern(canvasPattern, 'repeat');\n  }\n\n  /**\n   * Generates a step in a random walk between LOW - HIGH given a previous value\n   * data is always in 0-1 data space so its scaleable\n   * data space is converted to screen space inside draw functions\n   * @param prev previous random walk step\n   * @return new random walk step\n   */\n  function randomWalk(prev: number): number {\n    const rand = Math.random() - 0.5; // give it directionality\n    let change = VOLATILITY * rand; // scale by volatity constant\n\n    // ensure directional bounce off approaching edges\n    if (prev < HIGH) {\n      change = Math.abs(change);\n    } else if (prev > LOW) {\n      change = -Math.abs(change);\n    }\n\n    return prev + change;\n  }\n\n  function initData(): number[] {\n    const startingData = [];\n    let y = START_Y; // always start towards the bottom of the screen\n    for (let x = 0; x < width + PX_PER_SECOND; x += 1) {\n      y = randomWalk(y);\n      startingData.push(y);\n    }\n    return startingData;\n  }\n\n  function setDataSize(): void {\n    while (data.length >= width + PX_PER_SECOND) {\n      data.pop();\n    }\n    while (data.length < width + PX_PER_SECOND) {\n      data.push(randomWalk(data[data.length - 1]));\n    }\n  }\n\n  function drawAreaLine(\n    path: number[],\n    context: CanvasRenderingContext2D\n  ): void {\n    context.beginPath();\n    // start offscreen\n    context.moveTo(-1, height + 1);\n    context.lineTo(-1, height * path[0]);\n\n    // draw the line\n    for (let i = 0; i < path.length; i += 1) {\n      context.lineTo(i, height * path[i]);\n    }\n\n    // close offscreen\n    context.lineTo(width + PX_PER_SECOND, height * path[path.length - 1]);\n    context.lineTo(width + PX_PER_SECOND, height + 1);\n    context.closePath();\n  }\n\n  function drawGridLines(context: CanvasRenderingContext2D): void {\n    context.beginPath();\n    // draw verticals\n    for (let x = 1; x < width; x += GRID_SIZE) {\n      context.moveTo(x, 0);\n      context.lineTo(x, height);\n    }\n    // draw horizontals\n    for (let y = 1; y < height; y += GRID_SIZE) {\n      context.moveTo(0, y);\n      context.lineTo(width, y);\n    }\n  }\n\n  /**\n   * Main draw loop for where the animation happens\n   * all the styling happens within drawCanvas from paths generated by other functions\n   * @param timestamp passed in callback from requestAnimationFrame\n   */\n  function drawCanvas(timestamp?: DOMHighResTimeStamp): void {\n    lastTimestamp = lastTimestamp ?? timestamp;\n\n    assertNotNull(ctx);\n    // clear the canvas\n    ctx.fillStyle = BACKGROUND;\n    ctx.fillRect(0, 0, width, height);\n\n    drawGridLines(ctx);\n    ctx.lineWidth = 1;\n    ctx.strokeStyle = GRID_COLOR;\n    ctx.stroke();\n\n    // for speeds less then 60 px per second, subpixel motion is required to look smooth\n    const subPixelMotion =\n      ((lastTimestamp ?? 0) - (timestamp ?? 0)) / (1000 / PX_PER_SECOND);\n    ctx.translate(subPixelMotion, 0);\n\n    drawAreaLine(data, ctx);\n    ctx.lineWidth = 2;\n    ctx.strokeStyle = FOREGROUND;\n    ctx.stroke();\n\n    ctx.translate(-subPixelMotion, 0); // we don't pattern to shift however\n    if (pattern != null) {\n      ctx.fillStyle = pattern;\n    }\n    ctx.fill();\n    ctx.setTransform(scale, 0, 0, scale, 0, 0); // reset the translate matrix to normal\n\n    // generate new data points\n    if ((timestamp ?? 0) - (lastTimestamp ?? 0) > 1000 / PX_PER_SECOND) {\n      // number of points to add since last update\n      const numberOfPoints = Math.floor(\n        ((timestamp ?? 0) - (lastTimestamp ?? 0)) / (1000 / PX_PER_SECOND)\n      );\n      for (let i = 0; i < numberOfPoints; i += 1) {\n        data.shift();\n        data.push(randomWalk(data[data.length - 1]));\n      }\n      lastTimestamp = timestamp;\n    }\n\n    if (rAF != null) {\n      cancelAnimationFrame(rAF);\n    }\n    rAF = requestAnimationFrame(drawCanvas);\n  }\n\n  // debounce the resize so its not overly aggresive\n  const debouncedHandleResize = debounce(\n    () => {\n      rAF = requestAnimationFrame(timestamp => {\n        setCanvasSize(); // setCanvas can cause lag if not debounced\n\n        // fill or remove extra data points\n        setDataSize();\n\n        // opening devtools triggers a blur then resize,\n        // need to reset shade as we are restarting animation\n        setShade(false);\n        drawCanvas(timestamp);\n      });\n    },\n    RESIZE_DEBOUNCE,\n    { leading: true } // resize immediately, once.\n  );\n\n  function pauseAnimation(): void {\n    // pause animation when browser window is blurred to conserve CPU usage\n    setShade(true);\n    if (rAF != null) {\n      cancelAnimationFrame(rAF);\n    }\n    rAF = null;\n    lastTimestamp = null;\n  }\n\n  // when timeout expires, pause animation\n  const resetIdleTimeout = debounce(() => {\n    pauseAnimation();\n  }, INTERACTION_TIMEOUT);\n\n  function startAnimation(): void {\n    // can fire multiple times, check if rAF is null first\n    // restart animation loop, and fade back in\n    if (rAF == null) {\n      setShade(false);\n      setCanvasSize();\n      setDataSize();\n      rAF = requestAnimationFrame(drawCanvas);\n    }\n    resetIdleTimeout();\n  }\n\n  function handleActivity(): void {\n    if (document.hasFocus()) {\n      // only if document has focus (mousemove can fire on non-focused tabs)\n      startAnimation();\n    }\n  }\n\n  function handleResize(): void {\n    // pause and debounce animation during resize for better resizing performance\n    if (rAF != null) {\n      cancelAnimationFrame(rAF);\n    }\n    resetIdleTimeout(); // treat resizing as a form of activity\n    debouncedHandleResize();\n  }\n\n  // react mount/unmount hooks\n  useEffect(() => {\n    ctx = canvas.current?.getContext('2d', { alpha: false });\n    setCanvasSize();\n    data = initData();\n    pattern = createPatternFill();\n\n    // start draw loop\n    drawCanvas();\n    resetIdleTimeout();\n\n    window.addEventListener('resize', handleResize);\n\n    window.addEventListener('focus', startAnimation);\n    window.addEventListener('blur', pauseAnimation);\n\n    // don't burn cpu if the user is \"idle\", start a timer that resets\n    // on any user activity, and on timeout expiry pause the animation\n    window.addEventListener('mousemove', handleActivity);\n    window.addEventListener('keydown', handleActivity);\n\n    return () => {\n      if (rAF != null) {\n        cancelAnimationFrame(rAF);\n      }\n      window.removeEventListener('resize', handleResize);\n      window.removeEventListener('focus', startAnimation);\n      window.removeEventListener('blur', pauseAnimation);\n\n      window.removeEventListener('mousemove', handleActivity);\n      window.removeEventListener('keydown', handleActivity);\n\n      resetIdleTimeout.cancel();\n      debouncedHandleResize.cancel();\n    };\n  }, []);\n\n  return (\n    <div className=\"random-area-plot-animation-container\" ref={container}>\n      <canvas ref={canvas} className={shade ? 'shade' : ''} />\n    </div>\n  );\n});\n\nexport default RandomAreaPlotAnimation;\n"],"mappings":"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"}
+{"version":3,"file":"RandomAreaPlotAnimation.js","names":["React","useEffect","useState","useRef","debounce","assertNotNull","resolveCssVariablesInRecord","useTheme","jsx","_jsx","VOLATILITY","LOW","HIGH","START_Y","GRID_SIZE","PATTERN","SIZE","DOT_SIZE","PX_PER_SECOND","RESIZE_DEBOUNCE","INTERACTION_TIMEOUT","THEME_COLOR_VARIABLES","background","foregroundFill","foregroundStroke","gridColor","getRandomAreaPlotAnimationThemeColors","RandomAreaPlotAnimation","memo","activeThemes","themeColors","setThemeColors","canvas","container","shade","setShade","scale","window","devicePixelRatio","ctx","pattern","width","height","rAF","lastTimestamp","data","setCanvasSize","_ctx","current","offsetWidth","offsetHeight","style","concat","createPatternFill","canvasPattern","document","createElement","contextPattern","getContext","fillStyle","fillRect","createPattern","randomWalk","prev","rand","Math","random","change","abs","initData","startingData","y","x","push","setDataSize","length","pop","drawAreaLine","path","context","beginPath","moveTo","lineTo","i","closePath","drawGridLines","drawCanvas","timestamp","_lastTimestamp","_lastTimestamp2","_lastTimestamp3","lineWidth","strokeStyle","stroke","subPixelMotion","translate","fill","setTransform","_lastTimestamp4","numberOfPoints","floor","shift","cancelAnimationFrame","requestAnimationFrame","debouncedHandleResize","leading","pauseAnimation","resetIdleTimeout","startAnimation","handleActivity","hasFocus","handleResize","_canvas$current","alpha","addEventListener","removeEventListener","cancel","className","ref","children"],"sources":["../src/RandomAreaPlotAnimation.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\n/* eslint-disable react/display-name */\n\nimport React, { useEffect, useState, useRef } from 'react';\nimport debounce from 'lodash.debounce';\nimport { assertNotNull } from '@deephaven/utils';\nimport './RandomAreaPlotAnimation.scss';\nimport { resolveCssVariablesInRecord, useTheme } from './theme';\n\nconst VOLATILITY = 0.025; // how spikey the data gets\nconst LOW = 0.9;\nconst HIGH = 0.1;\nconst START_Y = 0.618;\nconst GRID_SIZE = 80;\nconst PATTERN = { SIZE: 8, DOT_SIZE: 2 };\nconst PX_PER_SECOND = 18;\nconst RESIZE_DEBOUNCE = 250;\nconst INTERACTION_TIMEOUT = 60 * 1000;\n\ninterface ThemeColors {\n  background: string;\n  foregroundFill: string;\n  foregroundStroke: string;\n  gridColor: string;\n}\n\nconst THEME_COLOR_VARIABLES = {\n  background: 'var(--dh-color-random-area-plot-animation-bg)',\n  foregroundFill: 'var(--dh-color-random-area-plot-animation-fg-fill)',\n  foregroundStroke: 'var(--dh-color-random-area-plot-animation-fg-stroke)',\n  gridColor: 'var(--dh-color-random-area-plot-animation-grid)',\n} satisfies ThemeColors;\n\n/**\n * Resolve theme colors needed for our animation.\n */\nfunction getRandomAreaPlotAnimationThemeColors(): ThemeColors {\n  return resolveCssVariablesInRecord(THEME_COLOR_VARIABLES);\n}\n\n// Draw a background canvas, paint it with a fun chart looking animation\nconst RandomAreaPlotAnimation = React.memo(() => {\n  const { activeThemes } = useTheme();\n\n  const [themeColors, setThemeColors] = useState<ThemeColors | null>(null);\n\n  // Resolving css variables has to run in `useEffect` or `useLayoutEffect` so\n  // that we know React has updated the DOM with any styles set by the\n  // ThemeProvider.\n  useEffect(() => {\n    setThemeColors(getRandomAreaPlotAnimationThemeColors());\n  }, [activeThemes]);\n\n  const canvas = useRef<HTMLCanvasElement>(null);\n  const container = useRef<HTMLDivElement>(null);\n  const [shade, setShade] = useState(false);\n  const scale = window.devicePixelRatio;\n\n  let ctx: CanvasRenderingContext2D | null | undefined;\n  let pattern: CanvasPattern | null | undefined;\n  let width: number;\n  let height: number;\n  let rAF: number | null;\n\n  let lastTimestamp: DOMHighResTimeStamp | null | undefined = null;\n  let data: number[] = [];\n\n  function setCanvasSize(): void {\n    // Set canvas size to fill screen\n    if (container.current != null) {\n      width = container.current.offsetWidth;\n      height = container.current.offsetHeight;\n    }\n\n    if (canvas.current != null) {\n      canvas.current.style.width = `${width}px`;\n      canvas.current.style.height = `${height}px`;\n\n      canvas.current.width = width * scale;\n      canvas.current.height = height * scale;\n    }\n\n    ctx?.scale(scale, scale);\n  }\n\n  // Returns the background fill create offscreen as pattern\n  function createPatternFill(): CanvasPattern | null | undefined {\n    if (themeColors == null) {\n      return null;\n    }\n\n    const { foregroundFill, foregroundStroke } = themeColors;\n\n    // create the off-screen canvas\n    const canvasPattern = document.createElement('canvas');\n    canvasPattern.width = PATTERN.SIZE;\n    canvasPattern.height = PATTERN.SIZE;\n    const contextPattern = canvasPattern.getContext('2d');\n\n    // draw pattern to off-screen context\n    if (contextPattern != null) {\n      contextPattern.fillStyle = foregroundStroke;\n      contextPattern.fillRect(0, 0, PATTERN.DOT_SIZE, PATTERN.DOT_SIZE);\n\n      // add an overlay fill\n      contextPattern.fillStyle = foregroundFill;\n      contextPattern.fillRect(0, 0, PATTERN.SIZE, PATTERN.SIZE);\n    }\n    return contextPattern?.createPattern(canvasPattern, 'repeat');\n  }\n\n  /**\n   * Generates a step in a random walk between LOW - HIGH given a previous value\n   * data is always in 0-1 data space so its scaleable\n   * data space is converted to screen space inside draw functions\n   * @param prev previous random walk step\n   * @return new random walk step\n   */\n  function randomWalk(prev: number): number {\n    const rand = Math.random() - 0.5; // give it directionality\n    let change = VOLATILITY * rand; // scale by volatity constant\n\n    // ensure directional bounce off approaching edges\n    if (prev < HIGH) {\n      change = Math.abs(change);\n    } else if (prev > LOW) {\n      change = -Math.abs(change);\n    }\n\n    return prev + change;\n  }\n\n  function initData(): number[] {\n    const startingData = [];\n    let y = START_Y; // always start towards the bottom of the screen\n    for (let x = 0; x < width + PX_PER_SECOND; x += 1) {\n      y = randomWalk(y);\n      startingData.push(y);\n    }\n    return startingData;\n  }\n\n  function setDataSize(): void {\n    while (data.length >= width + PX_PER_SECOND) {\n      data.pop();\n    }\n    while (data.length < width + PX_PER_SECOND) {\n      data.push(randomWalk(data[data.length - 1]));\n    }\n  }\n\n  function drawAreaLine(\n    path: number[],\n    context: CanvasRenderingContext2D\n  ): void {\n    context.beginPath();\n    // start offscreen\n    context.moveTo(-1, height + 1);\n    context.lineTo(-1, height * path[0]);\n\n    // draw the line\n    for (let i = 0; i < path.length; i += 1) {\n      context.lineTo(i, height * path[i]);\n    }\n\n    // close offscreen\n    context.lineTo(width + PX_PER_SECOND, height * path[path.length - 1]);\n    context.lineTo(width + PX_PER_SECOND, height + 1);\n    context.closePath();\n  }\n\n  function drawGridLines(context: CanvasRenderingContext2D): void {\n    context.beginPath();\n    // draw verticals\n    for (let x = 1; x < width; x += GRID_SIZE) {\n      context.moveTo(x, 0);\n      context.lineTo(x, height);\n    }\n    // draw horizontals\n    for (let y = 1; y < height; y += GRID_SIZE) {\n      context.moveTo(0, y);\n      context.lineTo(width, y);\n    }\n  }\n\n  /**\n   * Main draw loop for where the animation happens\n   * all the styling happens within drawCanvas from paths generated by other functions\n   * @param timestamp passed in callback from requestAnimationFrame\n   */\n  function drawCanvas(timestamp?: DOMHighResTimeStamp): void {\n    if (themeColors == null) {\n      return;\n    }\n\n    lastTimestamp = lastTimestamp ?? timestamp;\n\n    const { background, foregroundStroke, gridColor } = themeColors;\n\n    assertNotNull(ctx);\n    // clear the canvas\n    ctx.fillStyle = background;\n    ctx.fillRect(0, 0, width, height);\n\n    drawGridLines(ctx);\n    ctx.lineWidth = 1;\n    ctx.strokeStyle = gridColor;\n    ctx.stroke();\n\n    // for speeds less then 60 px per second, subpixel motion is required to look smooth\n    const subPixelMotion =\n      ((lastTimestamp ?? 0) - (timestamp ?? 0)) / (1000 / PX_PER_SECOND);\n    ctx.translate(subPixelMotion, 0);\n\n    drawAreaLine(data, ctx);\n    ctx.lineWidth = 2;\n    ctx.strokeStyle = foregroundStroke;\n    ctx.stroke();\n\n    ctx.translate(-subPixelMotion, 0); // we don't pattern to shift however\n    if (pattern != null) {\n      ctx.fillStyle = pattern;\n    }\n    ctx.fill();\n    ctx.setTransform(scale, 0, 0, scale, 0, 0); // reset the translate matrix to normal\n\n    // generate new data points\n    if ((timestamp ?? 0) - (lastTimestamp ?? 0) > 1000 / PX_PER_SECOND) {\n      // number of points to add since last update\n      const numberOfPoints = Math.floor(\n        ((timestamp ?? 0) - (lastTimestamp ?? 0)) / (1000 / PX_PER_SECOND)\n      );\n      for (let i = 0; i < numberOfPoints; i += 1) {\n        data.shift();\n        data.push(randomWalk(data[data.length - 1]));\n      }\n      lastTimestamp = timestamp;\n    }\n\n    if (rAF != null) {\n      cancelAnimationFrame(rAF);\n    }\n    rAF = requestAnimationFrame(drawCanvas);\n  }\n\n  // debounce the resize so its not overly aggresive\n  const debouncedHandleResize = debounce(\n    () => {\n      rAF = requestAnimationFrame(timestamp => {\n        setCanvasSize(); // setCanvas can cause lag if not debounced\n\n        // fill or remove extra data points\n        setDataSize();\n\n        // opening devtools triggers a blur then resize,\n        // need to reset shade as we are restarting animation\n        setShade(false);\n        drawCanvas(timestamp);\n      });\n    },\n    RESIZE_DEBOUNCE,\n    { leading: true } // resize immediately, once.\n  );\n\n  function pauseAnimation(): void {\n    // pause animation when browser window is blurred to conserve CPU usage\n    setShade(true);\n    if (rAF != null) {\n      cancelAnimationFrame(rAF);\n    }\n    rAF = null;\n    lastTimestamp = null;\n  }\n\n  // when timeout expires, pause animation\n  const resetIdleTimeout = debounce(() => {\n    pauseAnimation();\n  }, INTERACTION_TIMEOUT);\n\n  function startAnimation(): void {\n    // can fire multiple times, check if rAF is null first\n    // restart animation loop, and fade back in\n    if (rAF == null) {\n      setShade(false);\n      setCanvasSize();\n      setDataSize();\n      rAF = requestAnimationFrame(drawCanvas);\n    }\n    resetIdleTimeout();\n  }\n\n  function handleActivity(): void {\n    if (document.hasFocus()) {\n      // only if document has focus (mousemove can fire on non-focused tabs)\n      startAnimation();\n    }\n  }\n\n  function handleResize(): void {\n    // pause and debounce animation during resize for better resizing performance\n    if (rAF != null) {\n      cancelAnimationFrame(rAF);\n    }\n    resetIdleTimeout(); // treat resizing as a form of activity\n    debouncedHandleResize();\n  }\n\n  // react mount/unmount hooks\n  useEffect(() => {\n    ctx = canvas.current?.getContext('2d', { alpha: false });\n    setCanvasSize();\n    data = initData();\n    pattern = createPatternFill();\n\n    // start draw loop\n    drawCanvas();\n    resetIdleTimeout();\n\n    window.addEventListener('resize', handleResize);\n\n    window.addEventListener('focus', startAnimation);\n    window.addEventListener('blur', pauseAnimation);\n\n    // don't burn cpu if the user is \"idle\", start a timer that resets\n    // on any user activity, and on timeout expiry pause the animation\n    window.addEventListener('mousemove', handleActivity);\n    window.addEventListener('keydown', handleActivity);\n\n    return () => {\n      if (rAF != null) {\n        cancelAnimationFrame(rAF);\n      }\n      window.removeEventListener('resize', handleResize);\n      window.removeEventListener('focus', startAnimation);\n      window.removeEventListener('blur', pauseAnimation);\n\n      window.removeEventListener('mousemove', handleActivity);\n      window.removeEventListener('keydown', handleActivity);\n\n      resetIdleTimeout.cancel();\n      debouncedHandleResize.cancel();\n    };\n  }, [themeColors]);\n\n  return (\n    themeColors && (\n      <div className=\"random-area-plot-animation-container\" ref={container}>\n        <canvas ref={canvas} className={shade ? 'shade' : ''} />\n      </div>\n    )\n  );\n});\n\nexport default RandomAreaPlotAnimation;\n"],"mappings":"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"}

package/dist/SearchInput.css

@@ -18,7 +18,7 @@
 }
 .search-group ::-webkit-search-cancel-button {
   background-size: 16px;
-  background-color: var(--dh-color-foreground);
+  background-color: var(--dh-color-fg);
   mask-image: var(--dh-svg-icon-search-cancel);
   mask-position: center center;
   mask-repeat: no-repeat;
@@ -45,12 +45,12 @@
   padding: 1px 2px;
 }
 .search-group .search-change-text {
-  background-color: rgba(240, 240, 238, 0.2);
+  background-color: hsla(var(--dh-color-white-hsl), 0.2);
   border-radius: 10px;
   padding: 1px 5px;
 }
 .search-group .search-match {
-  background-color: rgba(240, 240, 238, 0.2);
+  background-color: hsla(var(--dh-color-white-hsl), 0.2);
   border-radius: 10px;
   padding: 1px 5px;
   margin: 0 5px;

package/dist/SearchInput.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/custom.scss","../src/SearchInput.scss","../scss/new_variables.scss","../scss/util.scss"],"names":[],"mappings":"AAAA;ACGA;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA,OCXO;EDYP;EACA;EACA;EACA;EACA;;AAGF;EEpBA,iBFqBc;EEpBd;EACA,YFoB2B;EEnB3B;EACA;EACA,WFgBc;EAIZ;EACA,QALY;EAMZ,OANY;EAOZ;EACA;;AACA;EACE;;AAIJ;EACE;EACA,OCrCO;EDsCP;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA","file":"SearchInput.css","sourcesContent":["/* stylelint-disable scss/at-import-no-partial-leading-underscore */\n// Consumers should be able to resolve bootstrap/ to node_modules/bootstrap\n\n//Make bootstrap functions available for use in overrides\n@import 'bootstrap/scss/_functions.scss';\n@import './bootstrap_overrides.scss';\n\n//_variable imports come after bootstrap default overrides,\n// makes all other variables and mixins from bootstrap available\n/// with just importing customer.scss\n@import 'bootstrap/scss/_variables.scss';\n@import 'bootstrap/scss/_mixins.scss';\n\n//New variables come after imports\n@import './new_variables.scss';\n","@import '../scss/custom.scss';\n@import '../scss/util.scss';\n\n.search-group {\n  position: relative;\n\n  .form-control {\n    padding-right: 1.75rem; // leave space for search icon and cancel button from browser\n  }\n\n  .search-icon {\n    color: var(--dh-color-search-icon);\n    pointer-events: none;\n    position: absolute;\n    right: $spacer-2;\n    top: 0;\n    bottom: 0;\n    height: 100%;\n    display: flex;\n    align-items: center;\n  }\n\n  ::-webkit-search-cancel-button {\n    $icon-size: 16px;\n    @include icon-image-mask(var(--dh-svg-icon-search-cancel), $icon-size);\n\n    // Need to specify -webkit-appearance: none for Chrome\n    -webkit-appearance: none;\n    height: $icon-size;\n    width: $icon-size;\n    opacity: 0.4;\n    transition: opacity 300ms ease;\n    &:hover {\n      opacity: 1;\n    }\n  }\n\n  .search-change-selection {\n    position: absolute;\n    right: $spacer-1;\n    top: 15%;\n    bottom: 15%;\n    height: 70%;\n  }\n\n  .search-change-button {\n    background: none;\n    border: none;\n    padding: 1px 2px; \n  }\n\n  .search-change-text {\n    background-color: rgba($white, 0.2);\n    border-radius: 10px;\n    padding: 1px 5px;\n  }\n\n  .search-match {\n    background-color: rgba($white, 0.2);\n    border-radius: 10px;\n    padding: 1px 5px;\n    margin: 0 5px;\n  }\n}\n","//Set of spacer variables from the spacer map\n$spacer-0: map-get($spacers, 0); //0\n$spacer-1: map-get($spacers, 1);\n$spacer-2: map-get($spacers, 2);\n$spacer-3: map-get($spacers, 3);\n$spacer-4: map-get($spacers, 4);\n$spacer-5: map-get($spacers, 5);\n\n//Marching Ants for golden layout dropzone and drag and drop\n//top bottom, left right.\n//create 4 background images that are 50% color 1, 50% color 2 using graidents,  two veritical, two horizontal\n//size them to ant-size and thickness\n//position those images along the egdes and make top/bottom repeat-x and left/right repeat-y\n//then offest each of those background positions by ant-size in animation to make them march.\n$ant-size: 8px;\n$ant-thickness: 1px;\n\n@mixin ants-base($color-1: black, $color-2: white) {\n  background-image: linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%);\n  background-size:\n    $ant-size $ant-thickness,\n    $ant-size $ant-thickness,\n    $ant-thickness $ant-size,\n    $ant-thickness $ant-size;\n  background-position:\n    0 top,\n    0 bottom,\n    left 0,\n    right 0;\n  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;\n  animation: march 0.5s;\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n}\n\n@mixin drag-stack($pseudo-element) {\n  &::#{$pseudo-element} {\n    content: ' ';\n    background: $primary;\n    box-shadow: $box-shadow;\n    border-radius: $border-radius;\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    @content;\n  }\n}\n\n$focus-bg-transparency: 0.12;\n$hover-bg-transparency: 0.14;\n$active-bg-transparency: 0.28;\n$exception-transparency: 0.13;\n","// Setup a mask-image for an inline svg\n@mixin icon-image-mask($mask-image, $size: 16px) {\n  background-size: $size;\n  background-color: var(--dh-color-foreground);\n  mask-image: $mask-image;\n  mask-position: center center;\n  mask-repeat: no-repeat;\n  mask-size: $size;\n}\n\n// Caret icon for pickers, dropdowns, select, etc.\n@mixin caret-icon() {\n  $width: 10px;\n  $height: 6px;\n  @include icon-image-mask(var(--dh-svg-icon-selector-caret), $width $height);\n\n  background-color: var(--dh-color-selector-fg);\n  width: $width;\n  height: $height;\n}\n\n/// Utilty for increasing specificity by repeating a given selector n number of\n/// times.\n///\n/// It should work for selectors that can be concatenated without delimiters\n/// such as '.some-selector.some-selector', '#some-id#some-id', or '&&'. A\n/// case where it would not work would be with an element selector e.g. 'divdiv'.\n///\n/// Example usage:\n///\n/// #{multiply-specificity-n('.some-selector', 2)} {\n/// }\n///\n/// would produce\n///\n/// .some-selector.some-selector {\n/// }\n///\n/// @param {string} $selector the selector to duplicate\n/// @param {number} $n number of times to duplicate\n/// @return {string} duplicated selector\n@function multiply-specificity-n($selector, $n) {\n  $result: $selector;\n  @for $i from 2 through $n {\n    $result: selector-append($result, $selector);\n  }\n\n  @return $result;\n}\n\n// Linear gradient with same start and end color. Useful for certain scenarios\n// where we need a solid background image layer.\n@function solid-gradient($color) {\n  @return linear-gradient(0deg, $color, $color);\n}"]}
+{"version":3,"sourceRoot":"","sources":["../scss/custom.scss","../src/SearchInput.scss","../scss/new_variables.scss","../scss/util.scss"],"names":[],"mappings":"AAAA;ACGA;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA,OCTO;EDUP;EACA;EACA;EACA;EACA;;AAGF;EEpBA,iBFqBc;EEpBd;EACA,YFoB2B;EEnB3B;EACA;EACA,WFgBc;EAIZ;EACA,QALY;EAMZ,OANY;EAOZ;EACA;;AACA;EACE;;AAIJ;EACE;EACA,OCnCO;EDoCP;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA","file":"SearchInput.css","sourcesContent":["/* stylelint-disable scss/at-import-no-partial-leading-underscore */\n// Consumers should be able to resolve bootstrap/ to node_modules/bootstrap\n\n//Make bootstrap functions available for use in overrides\n@import 'bootstrap/scss/_functions.scss';\n@import './bootstrap_overrides.scss';\n\n//_variable imports come after bootstrap default overrides,\n// makes all other variables and mixins from bootstrap available\n/// with just importing customer.scss\n@import 'bootstrap/scss/_variables.scss';\n@import 'bootstrap/scss/_mixins.scss';\n\n//New variables come after imports\n@import './new_variables.scss';\n","@import '../scss/custom.scss';\n@import '../scss/util.scss';\n\n.search-group {\n  position: relative;\n\n  .form-control {\n    padding-right: 1.75rem; // leave space for search icon and cancel button from browser\n  }\n\n  .search-icon {\n    color: var(--dh-color-search-icon);\n    pointer-events: none;\n    position: absolute;\n    right: $spacer-2;\n    top: 0;\n    bottom: 0;\n    height: 100%;\n    display: flex;\n    align-items: center;\n  }\n\n  ::-webkit-search-cancel-button {\n    $icon-size: 16px;\n    @include icon-image-mask(var(--dh-svg-icon-search-cancel), $icon-size);\n\n    // Need to specify -webkit-appearance: none for Chrome\n    -webkit-appearance: none;\n    height: $icon-size;\n    width: $icon-size;\n    opacity: 0.4;\n    transition: opacity 300ms ease;\n    &:hover {\n      opacity: 1;\n    }\n  }\n\n  .search-change-selection {\n    position: absolute;\n    right: $spacer-1;\n    top: 15%;\n    bottom: 15%;\n    height: 70%;\n  }\n\n  .search-change-button {\n    background: none;\n    border: none;\n    padding: 1px 2px;\n  }\n\n  .search-change-text {\n    background-color: hsla(var(--dh-color-white-hsl), 0.2);\n    border-radius: 10px;\n    padding: 1px 5px;\n  }\n\n  .search-match {\n    background-color: hsla(var(--dh-color-white-hsl), 0.2);\n    border-radius: 10px;\n    padding: 1px 5px;\n    margin: 0 5px;\n  }\n}\n","@use 'sass:math';\n\n//Set of spacer variables from the spacer map\n$spacer-0: map-get($spacers, 0); //0\n$spacer-1: map-get($spacers, 1);\n$spacer-2: map-get($spacers, 2);\n$spacer-3: map-get($spacers, 3);\n$spacer-4: map-get($spacers, 4);\n$spacer-5: map-get($spacers, 5);\n\n//Marching Ants for golden layout dropzone and drag and drop\n//top bottom, left right.\n//create 4 background images that are 50% color 1, 50% color 2 using graidents,  two veritical, two horizontal\n//size them to ant-size and thickness\n//position those images along the egdes and make top/bottom repeat-x and left/right repeat-y\n//then offest each of those background positions by ant-size in animation to make them march.\n$ant-size: 8px;\n$ant-thickness: 1px;\n\n@mixin ants-base($color-1: black, $color-2: white) {\n  background-image: linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%);\n  background-size:\n    $ant-size $ant-thickness,\n    $ant-size $ant-thickness,\n    $ant-thickness $ant-size,\n    $ant-thickness $ant-size;\n  background-position:\n    0 top,\n    0 bottom,\n    left 0,\n    right 0;\n  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;\n  animation: march 0.5s;\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n}\n\n@mixin drag-stack($pseudo-element) {\n  &::#{$pseudo-element} {\n    content: ' ';\n    background: $primary;\n    box-shadow: $box-shadow;\n    border-radius: $border-radius;\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    @content;\n  }\n}\n\n@function hsla-opacity($semantic-name, $i: 100) {\n  @return hsla(var(--dh-color-#{$semantic-name}-hsl), math.div($i, 100));\n}\n\n@function accent-opacity($i: 100) {\n  @return hsla-opacity('accent', $i);\n}\n\n@function background-opacity($i: 100) {\n  @return hsla-opacity('bg', $i);\n}\n\n@function foreground-opacity($i: 100) {\n  @return hsla-opacity('fg', $i);\n}\n\n$focus-bg-transparency: 0.12;\n$hover-bg-transparency: 0.14;\n$active-bg-transparency: 0.28;\n$exception-transparency: 0.13;\n","// Setup a mask-image for an inline svg\n@mixin icon-image-mask($mask-image, $size: 16px) {\n  background-size: $size;\n  background-color: var(--dh-color-fg);\n  mask-image: $mask-image;\n  mask-position: center center;\n  mask-repeat: no-repeat;\n  mask-size: $size;\n}\n\n// Caret icon for pickers, dropdowns, select, etc.\n@mixin caret-icon() {\n  $width: 10px;\n  $height: 6px;\n  @include icon-image-mask(var(--dh-svg-icon-selector-caret), $width $height);\n\n  background-color: var(--dh-color-selector-fg);\n  width: $width;\n  height: $height;\n}\n\n/// Utilty for increasing specificity by repeating a given selector n number of\n/// times.\n///\n/// It should work for selectors that can be concatenated without delimiters\n/// such as '.some-selector.some-selector', '#some-id#some-id', or '&&'. A\n/// case where it would not work would be with an element selector e.g. 'divdiv'.\n///\n/// Example usage:\n///\n/// #{multiply-specificity-n('.some-selector', 2)} {\n/// }\n///\n/// would produce\n///\n/// .some-selector.some-selector {\n/// }\n///\n/// @param {string} $selector the selector to duplicate\n/// @param {number} $n number of times to duplicate\n/// @return {string} duplicated selector\n@function multiply-specificity-n($selector, $n) {\n  $result: $selector;\n  @for $i from 2 through $n {\n    $result: selector-append($result, $selector);\n  }\n\n  @return $result;\n}\n\n// Linear gradient with same start and end color. Useful for certain scenarios\n// where we need a solid background image layer.\n@function solid-gradient($color) {\n  @return linear-gradient(0deg, $color, $color);\n}\n"]}

package/dist/SelectValueList.css

@@ -2,12 +2,12 @@
 .select-value-list-scroll-pane {
   overflow-x: hidden;
   overflow-y: auto;
-  border: 1px solid #929192;
+  border: 1px solid var(--dh-color-input-border);
   border-radius: 4px;
   padding: 0.375rem 0 0.375rem;
 }
 .select-value-list-scroll-pane.is-invalid {
-  border-color: rgba(249, 93, 132, 0.85);
+  border-color: hsla(var(--dh-color-negative-hsl), 0.85);
 }
 
 .select-value-list {
@@ -27,7 +27,7 @@
   display: flex;
 }
 .select-value-list .select-value-list-content .custom-control:hover {
-  background: #5b5a5c;
+  background: var(--dh-color-gray-500);
 }
 .select-value-list .select-value-list-content .custom-control .custom-control-label {
   margin-left: 0.75rem;