@deephaven/components 0.43.0 → 0.44.0

package/dist/HierarchicalCheckboxMenu.js

@@ -0,0 +1,218 @@
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import React, { Component } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { dhSort } from '@deephaven/icons';
+import classNames from 'classnames';
+import Checkbox from "./Checkbox.js";
+import Popper from "./popper/Popper.js";
+import "./HierarchicalCheckboxMenu.css";
+import Button from "./Button.js";
+/**
+ * A pull down menu that displays a hierarchy of checkboxes.
+ *
+ * Currently supports only two levels of check boxes. The input should be a Map
+ * where the keys are the parent names. The values can a boolean if the parent
+ * has no children or another Map where keys are child names and values are booleans.
+ *
+ * Here is an example:
+ * const INITIAL_TYPE_MAP = new Map([
+ * ['Queries', new Map([['Live', true], ['Batch', true]])],
+ * [
+ *   'DBA Queries',
+ *   new Map([
+ *     ['Data Merge', true],
+ *     ['Data Validation', true],
+ *     ['Imports', true],
+ *     ['Data Services', true],
+ *   ]),
+ * ],
+ * ['Helper Queries', true],
+ * ]);
+ *
+ * When a checkbox is changed, this component will make a deep copy of the Map
+ * with the appropriate booleans changed. It will then call onUpdateValueMap
+ * with the new Map.
+ */
+class HierarchicalCheckboxMenu extends Component {
+  static isParentSelected(parent, valueMap) {
+    var children = valueMap.get(parent);
+    if (children === undefined) {
+      return false;
+    }
+    if (typeof children === 'boolean') {
+      // This parent has no children
+      return children;
+    }
+    var includesTrue = Array.from(children.values()).includes(true);
+    var includesFalse = Array.from(children.values()).includes(false);
+    if (includesTrue && includesFalse) {
+      // Indeterminate
+      return null;
+    }
+    return includesTrue;
+  }
+  constructor(props) {
+    super(props);
+    this.toggleMenu = this.toggleMenu.bind(this);
+    this.toggleValueFor = this.toggleValueFor.bind(this);
+    this.selectAll = this.selectAll.bind(this);
+    this.clear = this.clear.bind(this);
+    this.state = {
+      menuIsOpen: false
+    };
+  }
+  toggleMenu(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    this.setState(state => {
+      var {
+        menuIsOpen
+      } = state;
+      return {
+        menuIsOpen: !menuIsOpen
+      };
+    });
+  }
+  toggleValueFor(parent, child) {
+    var {
+      valueMap,
+      onUpdateValueMap
+    } = this.props;
+
+    // Make a deep copy of the Map and toggle the boolean for parent / child
+    var map = new Map(valueMap);
+    var children = map.get(parent);
+    if (children instanceof Map) {
+      var newChildren = new Map(children);
+      if (child != null) {
+        newChildren.set(child, children.get(child) === undefined);
+      } else {
+        var parentSelected = HierarchicalCheckboxMenu.isParentSelected(parent, map);
+        var newChildValue = parentSelected == null || !parentSelected;
+        children.forEach((_, key) => newChildren.set(key, newChildValue));
+      }
+      map.set(parent, newChildren);
+    } else {
+      map.set(parent, children == null || !children);
+    }
+
+    // The parent was clicked so all children must be toggled
+    var currentChildren = map.get(parent);
+    if (child === undefined && currentChildren !== undefined && typeof currentChildren !== 'boolean') {
+      var _parentSelected = HierarchicalCheckboxMenu.isParentSelected(parent, valueMap);
+      if (_parentSelected != null && _parentSelected) {
+        currentChildren.forEach((_, key) => currentChildren.set(key, false));
+      } else {
+        // for parent selection of false or null (indeterminate), select everything
+        currentChildren.forEach((_, key) => currentChildren.set(key, true));
+      }
+    }
+    onUpdateValueMap(map);
+  }
+  setAllValues(value) {
+    var {
+      valueMap,
+      onUpdateValueMap
+    } = this.props;
+
+    // Make a deep copy of the Map and set everything
+    var copy = new Map();
+    valueMap.forEach((child, parent) => {
+      if (typeof child === 'boolean') {
+        copy.set(parent, value);
+      } else {
+        var children = new Map();
+        child.forEach((_, key) => children.set(key, value));
+        copy.set(parent, children);
+      }
+    });
+    onUpdateValueMap(copy);
+  }
+  selectAll() {
+    this.setAllValues(true);
+  }
+  clear() {
+    this.setAllValues(false);
+  }
+  renderMenuElement() {
+    var {
+      valueMap,
+      'data-testid': dataTestId
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "hcm-menu-container"
+    }, Array.from(valueMap.entries()).map(_ref => {
+      var [parent, children] = _ref;
+      return /*#__PURE__*/React.createElement("div", {
+        key: parent
+      }, /*#__PURE__*/React.createElement(Checkbox, {
+        className: "hcm-parent",
+        checked: HierarchicalCheckboxMenu.isParentSelected(parent, valueMap),
+        onChange: () => this.toggleValueFor(parent)
+      }, parent), children !== undefined && typeof children !== 'boolean' && Array.from(children.entries()).map(_ref2 => {
+        var [child, value] = _ref2;
+        return /*#__PURE__*/React.createElement(Checkbox, {
+          className: "hcm-child",
+          key: child,
+          checked: value,
+          onChange: () => this.toggleValueFor(parent, child)
+        }, child);
+      }));
+    }), /*#__PURE__*/React.createElement(Button, {
+      kind: "ghost",
+      onClick: this.selectAll,
+      "data-testid": dataTestId !== undefined ? "".concat(dataTestId, "-btn-select-all") : undefined
+    }, "Select All"), /*#__PURE__*/React.createElement(Button, {
+      kind: "ghost",
+      onClick: this.clear,
+      "data-testid": dataTestId !== undefined ? "".concat(dataTestId, "-btn-clear") : undefined
+    }, "Clear"));
+  }
+  render() {
+    var {
+      menuText,
+      className,
+      icon,
+      id,
+      'data-testid': dataTestId
+    } = this.props;
+    var {
+      menuIsOpen
+    } = this.state;
+    return /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: classNames('btn hcm-btn', className),
+      onClick: this.toggleMenu,
+      id: id,
+      "data-testid": dataTestId
+    }, /*#__PURE__*/React.createElement("span", null, icon && /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: icon,
+      className: "hcm-icon mr-1"
+    }), menuText), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: dhSort,
+      className: "hcm-icon ml-1"
+    }), /*#__PURE__*/React.createElement(Popper, {
+      options: {
+        placement: 'bottom'
+      },
+      isShown: menuIsOpen,
+      onExited: () => {
+        this.setState({
+          menuIsOpen: false
+        });
+      },
+      closeOnBlur: true,
+      interactive: true
+    }, this.renderMenuElement()));
+  }
+}
+_defineProperty(HierarchicalCheckboxMenu, "defaultProps", {
+  className: '',
+  icon: null,
+  id: '',
+  'data-testid': undefined
+});
+export default HierarchicalCheckboxMenu;
+//# sourceMappingURL=HierarchicalCheckboxMenu.js.map

package/dist/HierarchicalCheckboxMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HierarchicalCheckboxMenu.js","names":["React","Component","FontAwesomeIcon","dhSort","classNames","Checkbox","Popper","Button","HierarchicalCheckboxMenu","isParentSelected","parent","valueMap","children","get","undefined","includesTrue","Array","from","values","includes","includesFalse","constructor","props","toggleMenu","bind","toggleValueFor","selectAll","clear","state","menuIsOpen","event","stopPropagation","preventDefault","setState","child","onUpdateValueMap","map","Map","newChildren","set","parentSelected","newChildValue","forEach","_","key","currentChildren","setAllValues","value","copy","renderMenuElement","dataTestId","entries","render","menuText","className","icon","id","placement"],"sources":["../src/HierarchicalCheckboxMenu.tsx"],"sourcesContent":["import React, { Component } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { dhSort, IconDefinition } from '@deephaven/icons';\nimport classNames from 'classnames';\nimport Checkbox from './Checkbox';\nimport Popper from './popper/Popper';\nimport './HierarchicalCheckboxMenu.scss';\nimport Button from './Button';\n\nexport type HierarchicalCheckboxValueMap = Map<\n  string,\n  boolean | Map<string, boolean>\n>;\n\ntype HierarchicalCheckboxMenuProps = {\n  className: string;\n  menuText: string;\n  valueMap: HierarchicalCheckboxValueMap;\n  onUpdateValueMap(map: HierarchicalCheckboxValueMap): void;\n  icon: IconDefinition | null;\n  id: string;\n  'data-testid'?: string;\n};\n\ntype HierarchicalCheckboxMenuState = {\n  menuIsOpen: boolean;\n};\n\n/**\n * A pull down menu that displays a hierarchy of checkboxes.\n *\n * Currently supports only two levels of check boxes. The input should be a Map\n * where the keys are the parent names. The values can a boolean if the parent\n * has no children or another Map where keys are child names and values are booleans.\n *\n * Here is an example:\n * const INITIAL_TYPE_MAP = new Map([\n * ['Queries', new Map([['Live', true], ['Batch', true]])],\n * [\n *   'DBA Queries',\n *   new Map([\n *     ['Data Merge', true],\n *     ['Data Validation', true],\n *     ['Imports', true],\n *     ['Data Services', true],\n *   ]),\n * ],\n * ['Helper Queries', true],\n * ]);\n *\n * When a checkbox is changed, this component will make a deep copy of the Map\n * with the appropriate booleans changed. It will then call onUpdateValueMap\n * with the new Map.\n */\nclass HierarchicalCheckboxMenu extends Component<\n  HierarchicalCheckboxMenuProps,\n  HierarchicalCheckboxMenuState\n> {\n  static defaultProps: Partial<HierarchicalCheckboxMenuProps> = {\n    className: '',\n    icon: null,\n    id: '',\n    'data-testid': undefined,\n  };\n\n  static isParentSelected(\n    parent: string,\n    valueMap: HierarchicalCheckboxValueMap\n  ): boolean | null {\n    const children = valueMap.get(parent);\n    if (children === undefined) {\n      return false;\n    }\n    if (typeof children === 'boolean') {\n      // This parent has no children\n      return children;\n    }\n    const includesTrue = Array.from(children.values()).includes(true);\n    const includesFalse = Array.from(children.values()).includes(false);\n    if (includesTrue && includesFalse) {\n      // Indeterminate\n      return null;\n    }\n    return includesTrue;\n  }\n\n  constructor(props: HierarchicalCheckboxMenuProps) {\n    super(props);\n\n    this.toggleMenu = this.toggleMenu.bind(this);\n    this.toggleValueFor = this.toggleValueFor.bind(this);\n    this.selectAll = this.selectAll.bind(this);\n    this.clear = this.clear.bind(this);\n\n    this.state = {\n      menuIsOpen: false,\n    };\n  }\n\n  toggleMenu(event: React.MouseEvent<HTMLButtonElement>): void {\n    event.stopPropagation();\n    event.preventDefault();\n    this.setState(state => {\n      const { menuIsOpen } = state;\n      return { menuIsOpen: !menuIsOpen };\n    });\n  }\n\n  toggleValueFor(parent: string, child?: string): void {\n    const { valueMap, onUpdateValueMap } = this.props;\n\n    // Make a deep copy of the Map and toggle the boolean for parent / child\n    const map = new Map(valueMap);\n    const children = map.get(parent);\n    if (children instanceof Map) {\n      const newChildren = new Map(children);\n      if (child != null) {\n        newChildren.set(child, children.get(child) === undefined);\n      } else {\n        const parentSelected = HierarchicalCheckboxMenu.isParentSelected(\n          parent,\n          map\n        );\n        const newChildValue = parentSelected == null || !parentSelected;\n        children.forEach((_, key) => newChildren.set(key, newChildValue));\n      }\n      map.set(parent, newChildren);\n    } else {\n      map.set(parent, children == null || !children);\n    }\n\n    // The parent was clicked so all children must be toggled\n    const currentChildren = map.get(parent);\n    if (\n      child === undefined &&\n      currentChildren !== undefined &&\n      typeof currentChildren !== 'boolean'\n    ) {\n      const parentSelected = HierarchicalCheckboxMenu.isParentSelected(\n        parent,\n        valueMap\n      );\n      if (parentSelected != null && parentSelected) {\n        currentChildren.forEach((_, key) => currentChildren.set(key, false));\n      } else {\n        // for parent selection of false or null (indeterminate), select everything\n        currentChildren.forEach((_, key) => currentChildren.set(key, true));\n      }\n    }\n\n    onUpdateValueMap(map);\n  }\n\n  setAllValues(value: boolean): void {\n    const { valueMap, onUpdateValueMap } = this.props;\n\n    // Make a deep copy of the Map and set everything\n    const copy = new Map();\n    valueMap.forEach((child, parent) => {\n      if (typeof child === 'boolean') {\n        copy.set(parent, value);\n      } else {\n        const children = new Map();\n        child.forEach((_, key) => children.set(key, value));\n        copy.set(parent, children);\n      }\n    });\n\n    onUpdateValueMap(copy);\n  }\n\n  selectAll(): void {\n    this.setAllValues(true);\n  }\n\n  clear(): void {\n    this.setAllValues(false);\n  }\n\n  renderMenuElement(): React.ReactNode {\n    const { valueMap, 'data-testid': dataTestId } = this.props;\n    return (\n      <div className=\"hcm-menu-container\">\n        {Array.from(valueMap.entries()).map(([parent, children]) => (\n          <div key={parent}>\n            <Checkbox\n              className=\"hcm-parent\"\n              checked={HierarchicalCheckboxMenu.isParentSelected(\n                parent,\n                valueMap\n              )}\n              onChange={() => this.toggleValueFor(parent)}\n            >\n              {parent}\n            </Checkbox>\n            {children !== undefined &&\n              typeof children !== 'boolean' &&\n              Array.from(children.entries()).map(([child, value]) => (\n                <Checkbox\n                  className=\"hcm-child\"\n                  key={child}\n                  checked={value}\n                  onChange={() => this.toggleValueFor(parent, child)}\n                >\n                  {child}\n                </Checkbox>\n              ))}\n          </div>\n        ))}\n        <Button\n          kind=\"ghost\"\n          onClick={this.selectAll}\n          data-testid={\n            dataTestId !== undefined\n              ? `${dataTestId}-btn-select-all`\n              : undefined\n          }\n        >\n          Select All\n        </Button>\n        <Button\n          kind=\"ghost\"\n          onClick={this.clear}\n          data-testid={\n            dataTestId !== undefined ? `${dataTestId}-btn-clear` : undefined\n          }\n        >\n          Clear\n        </Button>\n      </div>\n    );\n  }\n\n  render(): JSX.Element {\n    const {\n      menuText,\n      className,\n      icon,\n      id,\n      'data-testid': dataTestId,\n    } = this.props;\n    const { menuIsOpen } = this.state;\n\n    return (\n      <button\n        type=\"button\"\n        className={classNames('btn hcm-btn', className)}\n        onClick={this.toggleMenu}\n        id={id}\n        data-testid={dataTestId}\n      >\n        <span>\n          {icon && <FontAwesomeIcon icon={icon} className=\"hcm-icon mr-1\" />}\n          {menuText}\n        </span>\n        <FontAwesomeIcon icon={dhSort} className=\"hcm-icon ml-1\" />\n        <Popper\n          options={{ placement: 'bottom' }}\n          isShown={menuIsOpen}\n          onExited={() => {\n            this.setState({ menuIsOpen: false });\n          }}\n          closeOnBlur\n          interactive\n        >\n          {this.renderMenuElement()}\n        </Popper>\n      </button>\n    );\n  }\n}\n\nexport default HierarchicalCheckboxMenu;\n"],"mappings":"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"}

package/dist/ItemList.css

@@ -0,0 +1,13 @@
+/* stylelint-disable scss/at-import-no-partial-leading-underscore */
+.item-list-scroll-pane {
+  border: 1px solid #929192;
+  border-radius: 4px;
+}
+.item-list-scroll-pane:focus {
+  outline: none;
+}
+.item-list-scroll-pane .item-list-inner-element {
+  position: relative;
+}
+
+/*# sourceMappingURL=ItemList.css.map */

package/dist/ItemList.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/custom.scss","../src/ItemList.scss","../scss/bootstrap_overrides.scss"],"names":[],"mappings":"AAAA;ACCA;EAEE;EACA,eCqHc;;ADpHd;EACE;;AAEF;EACE","file":"ItemList.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.item-list-scroll-pane {\n  // no point in padding, it will be ignored by list scrollToItem(last)\n  border: 1px solid $input-border-color;\n  border-radius: $input-border-radius;\n  &:focus {\n    outline: none;\n  }\n  .item-list-inner-element {\n    position: relative;\n  }\n}\n","// Styling overrides for bootstrap\n\n// Override / set color variables\n$red: #f95d84;\n$orange: #f37e3f;\n$yellow: #fcd65b;\n$green: #9edc6f;\n$blue: #76d9e4;\n$purple: #aa9af4;\n\n//Define some UI colors\n$interfacegray: #2d2a2e;\n$interfaceblue: #4878ea;\n$interfacewhite: #f0f0ee; //same as gray-200\n$interfaceblack: #1a171a;\n\n//Define our Gray scale\n$white: $interfacewhite;\n$gray-100: #fcfcfa;\n$gray-200: $interfacewhite;\n$gray-300: #c0bfbf;\n$gray-400: #929192;\n$gray-500: #5b5a5c;\n$gray-600: #555356;\n$gray-700: #403e41;\n$gray-800: #373438;\n$gray-850: #322f33;\n$gray-900: #211f22;\n$black: $interfaceblack;\n$content-bg: $interfacegray;\n$background: $interfaceblack;\n$foreground: $interfacewhite;\n\n//Load colors into map\n$colors: ();\n$colors: map-merge(\n  (\n    'red': $red,\n    'orange': $orange,\n    'yellow': $yellow,\n    'green': $green,\n    'blue': $blue,\n    'purple': $purple,\n    'white': $white,\n    'black': $black,\n  ),\n  $colors\n);\n\n//Set default colors\n$body-bg: $black;\n$body-color: $interfacewhite;\n\n// Set brand colors\n$primary: $interfaceblue;\n$primary-hover: darken($primary, 8%);\n$primary-dark: mix($primary, $content-bg, 25%);\n$primary-light: scale-color($primary, $lightness: -25%);\n$secondary: $gray-500;\n$secondary-hover: darken($secondary, 8%);\n$success: $green;\n$info: $yellow;\n$warning: $orange;\n$danger: $red;\n$danger-hover: darken($danger, 8%);\n$light: $gray-100;\n$mid: $gray-400; //Added a mid color, useful for input styling\n$dark: $gray-800;\n$green-dark: scale-color($green, $lightness: -45%, $saturation: -10%);\n\n$theme-colors: () !default;\n$theme-colors: map-merge(\n  (\n    'primary': $primary,\n    'primary-hover': $primary-hover,\n    'primary-light': $primary-light,\n    'primary-dark': $primary-dark,\n    'secondary': $secondary,\n    'success': $success,\n    'info': $info,\n    'warning': $warning,\n    'danger': $danger,\n    'light': $light,\n    'dark': $dark,\n    'mid': $mid,\n    'content-bg': $interfacegray,\n    'background': $interfaceblack,\n    'foreground': $interfacewhite,\n  ),\n  $theme-colors\n);\n\n$component-active-bg: $primary;\n$theme-color-interval: 9%;\n$yiq-contrasted-threshold: 180;\n\n// Override fonts\n$font-family-sans-serif: 'Fira Sans', -apple-system, blinkmacsystemfont,\n  'Segoe UI', 'Roboto', 'Helvetica Neue', arial, sans-serif; //fira sans then native system ui fallbacks\n$font-family-monospace: 'Fira Mono', menlo, monaco, consolas, 'Liberation Mono',\n  'Courier New', monospace;\n$font-family-base: $font-family-sans-serif;\n\n$headings-font-weight: 400;\n\n//Text overides\n$text-muted: $gray-400;\n\n//Style Selection highlight color\n//so browsers add alpha to your color by default, ignoring opacity 1\n//by setting rgba with 0.99 it tricks browser into thinking there is alpha applied\n$text-select-color: $primary-hover;\n$text-select-color-editor: lighten(\n  $gray-700,\n  15%\n); //we lighten it abit to account for that 0.01 loss, and because it needs some anyways.\n\n//Grid variables, same value as default just making easily accessible\n$grid-gutter-width: 30px;\n\n//Visual Overrides\n$border-radius: 4px;\n$box-shadow: 0 0.1rem 1rem rgba($black, 45%); //because our UI is so dark, we need darker default shadows\n$box-shadow-900: 0 0.1rem 1rem rgba(0, 0, 0, 45%); //darkest shadow for $black popups over $black UI\n\n//Override Btn\n$btn-border-radius: 4rem;\n$btn-padding-x: 1.5rem;\n$btn-transition: color 0.12s ease-in-out, background-color 0.12s ease-in-out,\n  border-color 0.12s ease-in-out, box-shadow 0.12s ease-in-out; //default 0.15 is too long\n$btn-border-width: 2px;\n\n//Override Inputs\n$input-bg: $gray-600;\n$input-disabled-bg: $gray-800;\n$input-color: $foreground;\n$input-border-color: $gray-400;\n$input-placeholder-color: $gray-400;\n$input-focus-border-color: rgba($primary, 85%);\n\n$input-btn-focus-width: 0.2rem;\n$input-btn-focus-color: rgba($component-active-bg, 35%);\n$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;\n\n//checkbox\n$custom-control-indicator-bg: $gray-600;\n$custom-control-indicator-bg-size: 75% 75%;\n$custom-control-indicator-disabled-bg: $gray-800;\n$custom-control-indicator-checked-disabled-bg: $gray-800;\n$custom-control-label-disabled-color: $gray-400;\n\n//Custom Select\n$custom-select-indicator-color: $gray-400;\n$custom-select-bg-size: 16px 16px;\n//dhSort icon encoded\n$custom-select-indicator: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M4 7l-.4-.8 4-3.7h.8l4 3.7-.4.8H4zm0 2l-.4.8 4 3.7h.8l4-3.7L12 9H4z'/%3E%3C/svg%3E\"),\n  '#',\n  '%23'\n);\n$custom-select-focus-box-shadow: $input-btn-focus-box-shadow;\n$custom-select-disabled-color: darken($gray-400, 5%);\n$custom-select-disabled-bg: $gray-800;\n\n//modal\n$modal-content-bg: $gray-200;\n$modal-content-border-width: 0;\n$modal-md: 550px;\n\n// Toast notification\n$toast-bg: $primary-dark;\n$toast-color: $foreground;\n$toast-error-bg: mix($danger, $content-bg, 15%);\n$toast-error-color: $foreground;\n\n//tooltips\n$tooltip-bg: $gray-700;\n$tooltip-color: $foreground;\n$tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem rgba($black, 80%);\n\n//drowdowns\n$dropdown-bg: $gray-600;\n$dropdown-link-color: $foreground;\n$dropdown-link-hover-color: $foreground;\n$dropdown-link-hover-bg: $primary;\n$dropdown-divider-bg: $gray-700;\n\n//context menus\n$contextmenu-bg: $gray-600;\n$contextmenu-color: $foreground;\n$contextmenu-disabled-color: $text-muted;\n$contextmenu-keyboard-selected-bg: rgba($primary, 50%);\n$contextmenu-selected-bg: $primary;\n$contextmenu-selected-color: $foreground;\n\n//links\n$link-color: $gray-400;\n$link-hover-color: $foreground;\n\n//progress-bar\n$progress-bg: $gray-600;\n$progress-border-radius: 1rem;\n\n// Set global options\n$enable-shadows: false;\n$enable-gradients: false;\n$enable-print-styles: false; //I don't think anyone should expect to \"print\" this app.\n\n// Transition times\n$transition: 0.15s;\n$transition-mid: 0.2s;\n$transition-long: 0.3s;\n$transition-slow: 0.6s;\n\n//form-validation icon, uses vsWarning icon encoded here as svg\n$form-feedback-icon-invalid-color: theme-color('danger');\n$form-feedback-icon-invalid: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none'%3E%3Cg fill='#{$form-feedback-icon-invalid-color}'%3E%3Cpath d='M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28 2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E \"),\n  '#',\n  '%23'\n);\n"]}