@heartlandone/vega 2.0.0-temp-test-0.2 → 2.0.0

package/dist/collection/components/vega-tooltip/vega-tooltip.css

@@ -1,82 +1,4 @@
-vega-tooltip {
-	@apply v-inline-block;
-}
-
-.vega-tooltip {
-	@apply v-absolute;
-}
-
-.vega-tooltip .vega-tooltip-content {
-	@apply v-rounded-4 v-px-size-12 v-py-size-8 v-break-words;
-	@apply v-bg-inverted-primary v-text-inverted-primary v-font-field-label-sm;
-}
-
-html.dark .vega-tooltip .vega-tooltip-content {
-	@apply v-dark-bg-inverted-primary v-dark-text-inverted-primary;
-}
-
-.vega-tooltip.vega-placement-bottom {
-	@apply v-mt-size-8;
-}
-
-.vega-tooltip.vega-placement-left {
-	@apply v--ml-size-8;
-}
-
-.vega-tooltip.vega-placement-right {
-	@apply v-ml-size-8;
-}
-
-.vega-tooltip.vega-placement-top {
-	@apply v--mt-size-8;
-}
-
-.vega-tooltip .vega-tooltip-content::after {
-	content: '';
-	position: absolute;
-	border-style: solid;
-}
-
-.vega-tooltip.vega-placement-bottom .vega-tooltip-content::after {
-	left: calc(50% - 5px);
-	top: -4px;
-	border-width: 0 5px 4px 5px;
-	border-color: transparent transparent rgba(4, 4, 28, 1) transparent;
-}
-
-.vega-tooltip.vega-placement-left .vega-tooltip-content::after {
-	left: 100%;
-	top: calc(50% - 5px);
-	border-width: 5px 0 5px 4px;
-	border-color: transparent transparent transparent rgba(4, 4, 28, 1);
-}
-
-.vega-tooltip.vega-placement-right .vega-tooltip-content::after {
-	left: -4px;
-	top: calc(50% - 5px);
-	border-width: 5px 4px 5px 0;
-	border-color: transparent rgba(4, 4, 28, 1) transparent transparent;
-}
-
-.vega-tooltip.vega-placement-top .vega-tooltip-content::after {
-	left: calc(50% - 5px);
-	bottom: -4px;
-	border-width: 4px 5px 0px 5px;
-	border-color: rgba(4, 4, 28, 1) transparent transparent transparent;
-}
-
-html.dark .vega-tooltip.vega-placement-bottom .vega-tooltip-content::after {
-	border-bottom-color: rgba(252, 252, 252, 1);
-}
-
-html.dark .vega-tooltip.vega-placement-left .vega-tooltip-content::after {
-	border-left-color: rgba(252, 252, 252, 1);
-}
-
-html.dark .vega-tooltip.vega-placement-right .vega-tooltip-content::after {
-	border-right-color: rgba(252, 252, 252, 1);
-}
-
-html.dark .vega-tooltip.vega-placement-top .vega-tooltip-content::after {
-	border-top-color: rgba(252, 252, 252, 1);
-}
+/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
+:host {
+  display: inline-block;
+}

package/dist/collection/components/vega-tooltip/vega-tooltip.js

@@ -6,13 +6,21 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { Component, Host, h, Element, Prop, Watch, State } from '@stencil/core';
 import { sanitizeVegaComponent } from '../../utils/component';
-import { InjectElementAppender } from '../../decorators/property-decorators/injectElementAppender';
 import { InjectKeyboardManager } from '../../decorators/property-decorators/injectKeyboardManager';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+import { VegaTooltipElementAppenderController } from './slimmers/controllers/vega-tooltip-element-appender-controller';
+import { VegaTooltipContentBoxRenderer } from './slimmers/renderers/vega-tooltip-content-box-renderer';
 export class VegaTooltip {
   constructor() {
+    this.globalSlimmers = {};
+    this.vegaTooltipElementAppenderController = new VegaTooltipElementAppenderController();
+    this.vegaTooltipContentBoxRenderer = new VegaTooltipContentBoxRenderer();
     this.isTooltipShow = false;
     /**
      * Specifies the trigger mode for the tooltip.
+     * - click: means the tooltip show/hide by click.
+     * - hover: means the tooltip show/hide by hover.
+     * - none: means tooltip is not displayed regardless of hover or click.
      */
     this.trigger = 'hover';
     /**
@@ -25,24 +33,26 @@ export class VegaTooltip {
      *    within its container or relative to a reference point.
      */
     this.alignment = 'center';
+    /**
+     * The tooltip is interactive by default.
+     * Set `disableInteractive` to `true` to deactivate this feature, causing the tooltip to close upon hover.
+     */
+    this.disableInteractive = false;
   }
   watchPlacement() {
     if (this.isTooltipShow) {
-      this.elementAppender.show();
+      this.vegaTooltipElementAppenderController.show();
     }
   }
   render() {
     return sanitizeVegaComponent(h(Host, null,
       h("slot", null),
-      this.renderTooltip()), this.el);
-  }
-  renderTooltip() {
-    return (h("div", { ref: (e) => (this.tooltip = e), class: "vega-tooltip", role: "tooltip" },
-      h("div", { class: "vega-tooltip-content" }, this.content)));
+      this.vegaTooltipContentBoxRenderer.render()), this.el);
   }
   static get is() { return "vega-tooltip"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["vega-tooltip.css"]
+    "$": ["vega-tooltip.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["vega-tooltip.css"]
@@ -130,15 +140,15 @@ export class VegaTooltip {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'hover' | 'click'",
-        "resolved": "\"click\" | \"hover\"",
+        "original": "'hover' | 'click' | 'none'",
+        "resolved": "\"click\" | \"hover\" | \"none\"",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Specifies the trigger mode for the tooltip."
+        "text": "Specifies the trigger mode for the tooltip.\n- click: means the tooltip show/hide by click.\n- hover: means the tooltip show/hide by hover.\n- none: means tooltip is not displayed regardless of hover or click."
       },
       "attribute": "trigger",
       "reflect": false,
@@ -155,12 +165,32 @@ export class VegaTooltip {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "This property will be removed soon and replaced by prop text"
+          }],
         "text": "Specifies the content that is displayed\n   inside the tooltip."
       },
       "attribute": "content",
       "reflect": false
     },
+    "text": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the text that is displayed\n   inside the tooltip."
+      },
+      "attribute": "text",
+      "reflect": false
+    },
     "placement": {
       "type": "string",
       "mutable": false,
@@ -223,6 +253,24 @@ export class VegaTooltip {
       },
       "attribute": "position-relative-to",
       "reflect": false
+    },
+    "disableInteractive": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The tooltip is interactive by default.\nSet `disableInteractive` to `true` to deactivate this feature, causing the tooltip to close upon hover."
+      },
+      "attribute": "disable-interactive",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {
@@ -235,37 +283,36 @@ export class VegaTooltip {
     }, {
       "propName": "placement",
       "methodName": "watchPlacement"
+    }, {
+      "propName": "alignment",
+      "methodName": "watchPlacement"
     }]; }
 }
 __decorate([
-  InjectElementAppender((host) => ({
-    target: host.el,
-    appendableElement: host.tooltip,
-    positionRelativeTo: host.positionRelativeTo,
-    matchTargetWidth: false,
-    size: host.size,
-    minWidth: host.minWidth,
-    maxWidth: host.maxWidth,
-    placement: host.placement,
-    alignment: host.alignment,
-  }), (host) => host.trigger, 'isTooltipShow')
-], VegaTooltip.prototype, "elementAppender", void 0);
+  InjectVegaGlobalSlimmer()
+], VegaTooltip.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTooltip.prototype, "vegaTooltipElementAppenderController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTooltip.prototype, "vegaTooltipContentBoxRenderer", void 0);
 __decorate([
   InjectKeyboardManager((host) => [
     {
       keyCode: 'Tab',
       activeElementInScope: [host.el],
-      callback: /* istanbul ignore next */ () => host.trigger === 'hover' && host.elementAppender.show(),
+      callback: /* istanbul ignore next */ () => host.trigger === 'hover' && host.vegaTooltipElementAppenderController.show(),
     },
     {
       keyCode: 'Escape',
-      activeElementInScope: [host.el, host.tooltip],
-      callback: /* istanbul ignore next */ () => host.elementAppender.hide(),
+      activeElementInScope: [host.el, host.vegaTooltipContentBoxRenderer.getTooltipContentBoxRef()],
+      callback: /* istanbul ignore next */ () => host.vegaTooltipElementAppenderController.hide(),
     },
     {
       keyCode: 'Tab',
-      activeElementOutScope: [host.el, host.tooltip],
-      callback: /* istanbul ignore next */ () => host.isTooltipShow && host.elementAppender.hide(),
+      activeElementOutScope: [host.el, host.vegaTooltipContentBoxRenderer.getTooltipContentBoxRef()],
+      callback: /* istanbul ignore next */ () => host.isTooltipShow && host.vegaTooltipElementAppenderController.hide(),
     },
   ])
 ], VegaTooltip.prototype, "el", void 0);

package/dist/collection/components/vega-virtual-scroll/vega-virtual-scroll.js

@@ -1,5 +1,12 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 import { Component, Host, h, Prop, Element, State, Watch, Method, Fragment } from '@stencil/core';
 import { containerScrollToItem } from '../../utils/ui';
+import { InjectVegaGlobalSlimmer } from 'vega-slimmer/core';
 /**
  * Items that really need to be rendered include header, viewport and footer.
  * The number of header and footer is determined by extendItemsCount,
@@ -7,6 +14,7 @@ import { containerScrollToItem } from '../../utils/ui';
  */
 export class VegaVirtualScroll {
   constructor() {
+    this.globalSlimmers = {};
     /** Count of all items */
     this.totalCount = 0;
     /** Count of in viewport items */
@@ -157,6 +165,7 @@ export class VegaVirtualScroll {
     return true;
   }
   static get is() { return "vega-virtual-scroll"; }
+  static get encapsulation() { return "shadow"; }
   static get properties() { return {
     "source": {
       "type": "unknown",
@@ -322,3 +331,6 @@ export class VegaVirtualScroll {
       "methodName": "watchToInitData"
     }]; }
 }
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaVirtualScroll.prototype, "globalSlimmers", void 0);

package/dist/collection/constants/misc.js

@@ -1,59 +1,3 @@
-export const SIDEBAR_SOURCE_MOCK_DATA = [
-  {
-    url: '',
-    name: 'Dashboard',
-    icon: 'fas fa-tachometer-alt',
-  },
-  {
-    url: '',
-    name: 'Order Equipment',
-    icon: 'fas fa-shopping-bag',
-  },
-  {
-    url: '',
-    name: 'Dashboard',
-    icon: 'fas fa-file-alt',
-    children: [
-      {
-        url: '',
-        name: 'Form W-9',
-        selected: true,
-      },
-      {
-        url: '',
-        name: 'Form W-8BEN',
-      },
-      {
-        url: '',
-        name: 'Very very very very very very very very long title',
-      },
-    ],
-  },
-  {
-    url: '',
-    name: 'Main Heading',
-    icon: 'fas fa-user',
-    children: [
-      {
-        url: '',
-        name: 'Sub-Heading',
-      },
-      {
-        url: '',
-        name: 'Sub-Heading',
-      },
-      {
-        url: '',
-        name: 'Sub-Heading',
-      },
-    ],
-  },
-  {
-    url: '',
-    name: 'Support',
-    icon: 'fas fa-file-alt',
-  },
-];
 export const UUID = 'uuid';
 export const INPUT_TEXT_FOCUS_WIDTH = 2;
 export const HEARTLAND_TOS_URL = 'https://www.heartland.us/terms';

package/dist/collection/constants/tokens/borderRadius.js

@@ -3,14 +3,14 @@
 /* tslint:disable */
 // prettier-ignore
 export const BorderRadius = {
-  "2": 2,
-  "4": 4,
-  "8": 8,
-  "12": 12,
-  "16": 16,
-  "24": 24,
-  "32": 32,
-  "48": 48,
-  "none": 0,
-  "full": 9999
+  "rounded-none": 0,
+  "rounded-full": 9999,
+  "rounded-2": 2,
+  "rounded-4": 4,
+  "rounded-8": 8,
+  "rounded-12": 12,
+  "rounded-16": 16,
+  "rounded-24": 24,
+  "rounded-32": 32,
+  "rounded-48": 48
 };

package/dist/collection/constants/tokens/borders.js

@@ -0,0 +1,31 @@
+/* This file is generated by vega-design 2.0.71 */
+/* eslint-disable */
+/* tslint:disable */
+// prettier-ignore
+export const Borders = ["border-secondary-btn", "border-secondary-btn-hover", "border-secondary-danger-btn", "border-secondary-btn-active", "border-secondary-danger-btn-hover", "border-secondary-danger-btn-active", "border-input-field", "border-input-field-hover", "border-input-field-focus", "border-input-field-danger", "border-input-field-danger-hover", "border-input-field-danger-focus", "border-sidebar-item-focus", "border-input-field-disabled", "border-success", "border-secondary-btn-disabled", "border-chip", "border-divider", "border-divider-secondary", "border-selection-tile-selected", "border-selection-tile-selected-hover", "border-table-divider", "border-slider-handle"];
+// prettier-ignore
+export const BorderMap = {
+  'border-secondary-btn': '2px solid rgba(var(--v-border-secondary-btn, 19, 98, 226, 1))',
+  'border-secondary-btn-hover': '2px solid rgba(var(--v-border-secondary-btn-hover, 4, 112, 236, 1))',
+  'border-secondary-danger-btn': '2px solid rgba(var(--v-border-secondary-danger-btn, 230, 50, 87, 1))',
+  'border-secondary-btn-active': '2px solid rgba(var(--v-border-secondary-btn-active, 29, 65, 195, 1))',
+  'border-secondary-danger-btn-hover': '2px solid rgba(var(--v-border-secondary-danger-btn-hover, 255, 87, 114, 1))',
+  'border-secondary-danger-btn-active': '2px solid rgba(var(--v-border-secondary-danger-btn-active, 189, 41, 71, 1))',
+  'border-input-field': '1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1))',
+  'border-input-field-hover': '1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1))',
+  'border-input-field-focus': '1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1))',
+  'border-input-field-danger': '1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))',
+  'border-input-field-danger-hover': '1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1))',
+  'border-input-field-danger-focus': '1px solid rgba(var(--v-border-input-field-danger-focus, 233, 71, 104, 1))',
+  'border-sidebar-item-focus': '2px solid rgba(var(--v-border-sidebar-item-focus, 19, 98, 226, 1))',
+  'border-input-field-disabled': '1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))',
+  'border-success': '2px solid rgba(var(--v-border-success, 1, 128, 31, 1))',
+  'border-secondary-btn-disabled': '2px solid rgba(var(--v-border-secondary-btn-disabled, 176, 180, 181, 1))',
+  'border-chip': '1px solid rgba(var(--v-border-chip, 205, 209, 211, 1))',
+  'border-divider': '1px solid rgba(var(--v-border-divider, 171, 198, 216, 1))',
+  'border-divider-secondary': '1px solid rgba(var(--v-border-divider-secondary, 199, 217, 229, 1))',
+  'border-selection-tile-selected': '2px solid rgba(var(--v-border-selection-tile-selected, 19, 98, 226, 1))',
+  'border-selection-tile-selected-hover': '2px solid rgba(var(--v-border-selection-tile-selected-hover, 4, 112, 236, 1))',
+  'border-table-divider': '1px solid rgba(var(--v-border-table-divider, 171, 198, 216, 1))',
+  'border-slider-handle': '1px solid rgba(var(--v-border-slider-handle, 199, 217, 229, 1))'
+};

package/dist/collection/constants/tokens/colors.js

@@ -13,3 +13,185 @@ export const StrokeBackgroundColors = ["stroke-bg-brand", "stroke-bg-page", "str
 export const TextColors = ["text-primary", "text-secondary", "text-inverted-primary", "text-inverted-secondary", "text-link", "text-link-hover", "text-link-active", "text-link-focus", "text-link-visited", "text-danger-link", "text-danger-link-hover", "text-danger-link-active", "text-danger-link-focus", "text-danger-link-visited", "text-success", "text-error", "text-black", "text-white", "text-disabled", "text-input-disabled", "text-sidebar-link", "text-sidebar-link-hover", "text-sidebar-link-selected", "text-input-placeholder", "text-accent1-primary", "text-accent2-primary", "text-accent3-primary", "text-accent4-primary", "text-accent5-primary", "text-accent6-primary", "text-accent7-primary", "text-accent8-primary", "text-accent9-primary", "text-accent10-primary", "text-site-footer-link", "text-site-footer-link-hover", "text-site-footer-link-active", "text-brand", "text-on-action", "text-on-danger", "text-on-disabled"];
 // prettier-ignore
 export const BorderColors = ["border-color-action", "border-color-action-hover", "border-color-action-active", "border-color-danger", "border-color-danger-hover", "border-color-danger-active", "border-color-input-field", "border-color-input-field-hover", "border-color-input-field-focus", "border-color-input-field-danger", "border-color-input-field-danger-hover", "border-color-input-field-danger-focus", "border-color-input-field-disabled", "border-color-sidebar-item-focus", "border-color-success", "border-color-secondary-btn-disabled", "border-color-chip", "border-color-divider", "border-color-divider-secondary", "border-color-tile-selected", "border-color-tile-selected-hover", "border-color-table-divider", "border-color-slider-handle"];
+// prettier-ignore
+export const TextColorMap = {
+  'text-primary': 'rgba(var(--v-text-primary, 32, 54, 69, 1))',
+  'text-secondary': 'rgba(var(--v-text-secondary, 107, 116, 125, 1))',
+  'text-inverted-primary': 'rgba(var(--v-text-inverted-primary, 252, 252, 252, 1))',
+  'text-inverted-secondary': 'rgba(var(--v-text-inverted-secondary, 188, 186, 213, 1))',
+  'text-link': 'rgba(var(--v-text-link, 19, 98, 226, 1))',
+  'text-link-hover': 'rgba(var(--v-text-link-hover, 4, 112, 236, 1))',
+  'text-link-active': 'rgba(var(--v-text-link-active, 29, 65, 195, 1))',
+  'text-link-focus': 'rgba(var(--v-text-link-focus, 4, 112, 236, 1))',
+  'text-link-visited': 'rgba(var(--v-text-link-visited, 95, 56, 206, 1))',
+  'text-danger-link': 'rgba(var(--v-text-danger-link, 230, 50, 87, 1))',
+  'text-danger-link-hover': 'rgba(var(--v-text-danger-link-hover, 233, 71, 104, 1))',
+  'text-danger-link-active': 'rgba(var(--v-text-danger-link-active, 189, 41, 71, 1))',
+  'text-danger-link-focus': 'rgba(var(--v-text-danger-link-focus, 240, 52, 91, 1))',
+  'text-danger-link-visited': 'rgba(var(--v-text-danger-link-visited, 230, 50, 87, 1))',
+  'text-success': 'rgba(var(--v-text-success, 1, 128, 31, 1))',
+  'text-error': 'rgba(var(--v-text-error, 189, 41, 71, 1))',
+  'text-black': 'rgba(var(--v-text-black, 32, 54, 69, 1))',
+  'text-white': 'rgba(var(--v-text-white, 252, 252, 252, 1))',
+  'text-disabled': 'rgba(var(--v-text-disabled, 176, 180, 181, 1))',
+  'text-input-disabled': 'rgba(var(--v-text-input-disabled, 107, 116, 125, 1))',
+  'text-sidebar-link': 'rgba(var(--v-text-sidebar-link, 188, 186, 213, 1))',
+  'text-sidebar-link-hover': 'rgba(var(--v-text-sidebar-link-hover, 18, 18, 39, 1))',
+  'text-sidebar-link-selected': 'rgba(var(--v-text-sidebar-link-selected, 252, 252, 252, 1))',
+  'text-input-placeholder': 'rgba(var(--v-text-input-placeholder, 176, 180, 181, 1))',
+  'text-accent1-primary': 'rgba(var(--v-text-accent1-primary, 115, 230, 220, 1))',
+  'text-accent2-primary': 'rgba(var(--v-text-accent2-primary, 128, 107, 255, 1))',
+  'text-accent3-primary': 'rgba(var(--v-text-accent3-primary, 255, 220, 131, 1))',
+  'text-accent4-primary': 'rgba(var(--v-text-accent4-primary, 255, 149, 113, 1))',
+  'text-accent5-primary': 'rgba(var(--v-text-accent5-primary, 0, 187, 255, 1))',
+  'text-accent6-primary': 'rgba(var(--v-text-accent6-primary, 240, 52, 91, 1))',
+  'text-accent7-primary': 'rgba(var(--v-text-accent7-primary, 37, 159, 159, 1))',
+  'text-accent8-primary': 'rgba(var(--v-text-accent8-primary, 86, 61, 130, 1))',
+  'text-accent9-primary': 'rgba(var(--v-text-accent9-primary, 255, 191, 63, 1))',
+  'text-accent10-primary': 'rgba(var(--v-text-accent10-primary, 237, 122, 35, 1))',
+  'text-site-footer-link': 'rgba(var(--v-text-site-footer-link, 171, 198, 216, 1))',
+  'text-site-footer-link-hover': 'rgba(var(--v-text-site-footer-link-hover, 199, 217, 229, 1))',
+  'text-site-footer-link-active': 'rgba(var(--v-text-site-footer-link-active, 143, 179, 203, 1))',
+  'text-brand': 'rgba(var(--v-text-brand, 89, 96, 99, 1))',
+  'text-on-action': 'rgba(var(--v-text-on-action, 252, 252, 252, 1))',
+  'text-on-danger': 'rgba(var(--v-text-on-danger, 252, 252, 252, 1))',
+  'text-on-disabled': 'rgba(var(--v-text-on-disabled, 252, 252, 252, 1))'
+};
+// prettier-ignore
+export const BackgroundColorMap = {
+  'bg-brand': 'rgba(var(--v-bg-brand, 89, 96, 99, 1))',
+  'bg-page': 'rgba(var(--v-bg-page, 240, 243, 247, 1))',
+  'bg-transparent': 'rgba(var(--v-bg-transparent, 0, 0, 0, 0))',
+  'bg-primary': 'rgba(var(--v-bg-primary, 252, 252, 252, 1))',
+  'bg-secondary': 'rgba(var(--v-bg-secondary, 245, 247, 247, 1))',
+  'bg-tertiary': 'rgba(var(--v-bg-tertiary, 240, 243, 247, 1))',
+  'bg-quaternary': 'rgba(var(--v-bg-quaternary, 241, 248, 251, 1))',
+  'bg-inverted-primary': 'rgba(var(--v-bg-inverted-primary, 4, 4, 28, 1))',
+  'bg-inverted-secondary': 'rgba(var(--v-bg-inverted-secondary, 18, 18, 39, 1))',
+  'bg-inverted-tertiary': 'rgba(var(--v-bg-inverted-tertiary, 24, 24, 48, 1))',
+  'bg-inverted-quaternary': 'rgba(var(--v-bg-inverted-quaternary, 70, 71, 101, 1))',
+  'bg-selected': 'rgba(var(--v-bg-selected, 0, 151, 255, 0.3))',
+  'bg-action': 'rgba(var(--v-bg-action, 19, 98, 226, 1))',
+  'bg-action-hover': 'rgba(var(--v-bg-action-hover, 4, 112, 236, 1))',
+  'bg-action-focus': 'rgba(var(--v-bg-action-focus, 0, 151, 255, 1))',
+  'bg-action-active': 'rgba(var(--v-bg-action-active, 29, 65, 195, 1))',
+  'bg-action-secondary': 'rgba(var(--v-bg-action-secondary, 252, 252, 252, 1))',
+  'bg-action-tertiary': 'rgba(var(--v-bg-action-tertiary, 0, 0, 0, 0))',
+  'bg-action-tertiary-hover': 'rgba(var(--v-bg-action-tertiary-hover, 4, 4, 28, 0.05))',
+  'bg-action-tertiary-active': 'rgba(var(--v-bg-action-tertiary-active, 4, 4, 28, 0.1))',
+  'bg-action-quaternary': 'rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1))',
+  'bg-action-quaternary-hover': 'rgba(var(--v-bg-action-quaternary-hover, 239, 239, 239, 1))',
+  'bg-action-quaternary-active': 'rgba(var(--v-bg-action-quaternary-active, 205, 209, 211, 1))',
+  'bg-danger': 'rgba(var(--v-bg-danger, 230, 50, 87, 1))',
+  'bg-danger-hover': 'rgba(var(--v-bg-danger-hover, 255, 87, 114, 1))',
+  'bg-danger-focus': 'rgba(var(--v-bg-danger-focus, 240, 52, 91, 1))',
+  'bg-danger-active': 'rgba(var(--v-bg-danger-active, 189, 41, 71, 1))',
+  'bg-danger-tertiary': 'rgba(var(--v-bg-danger-tertiary, 0, 0, 0, 0))',
+  'bg-danger-tertiary-hover': 'rgba(var(--v-bg-danger-tertiary-hover, 255, 87, 114, 0.2))',
+  'bg-danger-tertiary-active': 'rgba(var(--v-bg-danger-tertiary-active, 189, 41, 71, 0.2))',
+  'bg-status-success': 'rgba(var(--v-bg-status-success, 160, 233, 167, 1))',
+  'bg-status-warning': 'rgba(var(--v-bg-status-warning, 255, 220, 131, 1))',
+  'bg-status-info': 'rgba(var(--v-bg-status-info, 205, 209, 211, 1))',
+  'bg-status-error': 'rgba(var(--v-bg-status-error, 255, 110, 139, 1))',
+  'bg-sidebar': 'rgba(var(--v-bg-sidebar, 18, 18, 39, 1))',
+  'bg-sidebar-item-hover': 'rgba(var(--v-bg-sidebar-item-hover, 252, 252, 252, 1))',
+  'bg-sidebar-item-selected': 'rgba(var(--v-bg-sidebar-item-selected, 19, 98, 226, 0.4))',
+  'bg-sidebar-icon': 'rgba(var(--v-bg-sidebar-icon, 188, 186, 213, 1))',
+  'bg-sidebar-icon-hover': 'rgba(var(--v-bg-sidebar-icon-hover, 18, 18, 39, 1))',
+  'bg-sidebar-icon-selected': 'rgba(var(--v-bg-sidebar-icon-selected, 252, 252, 252, 1))',
+  'bg-backdrop-popover': 'rgba(var(--v-bg-backdrop-popover, 32, 54, 69, 0.16))',
+  'bg-backdrop-modal': 'rgba(var(--v-bg-backdrop-modal, 18, 18, 39, 0.85))',
+  'bg-backdrop-sidebar': 'rgba(var(--v-bg-backdrop-sidebar, 18, 18, 39, 0.85))',
+  'bg-accent1-primary': 'rgba(var(--v-bg-accent1-primary, 115, 230, 220, 1))',
+  'bg-accent1-secondary': 'rgba(var(--v-bg-accent1-secondary, 193, 244, 239, 1))',
+  'bg-accent1-tertiary': 'rgba(var(--v-bg-accent1-tertiary, 224, 249, 247, 1))',
+  'bg-accent2-primary': 'rgba(var(--v-bg-accent2-primary, 128, 107, 255, 1))',
+  'bg-accent2-secondary': 'rgba(var(--v-bg-accent2-secondary, 199, 189, 255, 1))',
+  'bg-accent2-tertiary': 'rgba(var(--v-bg-accent2-tertiary, 227, 222, 255, 1))',
+  'bg-accent3-primary': 'rgba(var(--v-bg-accent3-primary, 255, 220, 131, 1))',
+  'bg-accent3-secondary': 'rgba(var(--v-bg-accent3-secondary, 255, 239, 200, 1))',
+  'bg-accent3-tertiary': 'rgba(var(--v-bg-accent3-tertiary, 255, 247, 227, 1))',
+  'bg-accent4-primary': 'rgba(var(--v-bg-accent4-primary, 255, 149, 113, 1))',
+  'bg-accent4-secondary': 'rgba(var(--v-bg-accent4-secondary, 255, 208, 192, 1))',
+  'bg-accent4-tertiary': 'rgba(var(--v-bg-accent4-tertiary, 255, 231, 223, 1))',
+  'bg-accent5-primary': 'rgba(var(--v-bg-accent5-primary, 0, 187, 255, 1))',
+  'bg-accent5-secondary': 'rgba(var(--v-bg-accent5-secondary, 142, 223, 249, 1))',
+  'bg-accent5-tertiary': 'rgba(var(--v-bg-accent5-tertiary, 227, 247, 253, 1))',
+  'bg-accent6-primary': 'rgba(var(--v-bg-accent6-primary, 255, 130, 201, 1))',
+  'bg-accent6-secondary': 'rgba(var(--v-bg-accent6-secondary, 255, 199, 231, 1))',
+  'bg-accent6-tertiary': 'rgba(var(--v-bg-accent6-tertiary, 255, 227, 243, 1))',
+  'bg-accent7-primary': 'rgba(var(--v-bg-accent7-primary, 37, 159, 159, 1))',
+  'bg-accent7-secondary': 'rgba(var(--v-bg-accent7-secondary, 155, 212, 214, 1))',
+  'bg-accent7-tertiary': 'rgba(var(--v-bg-accent7-tertiary, 208, 239, 239, 1))',
+  'bg-accent8-primary': 'rgba(var(--v-bg-accent8-primary, 86, 61, 130, 1))',
+  'bg-accent8-secondary': 'rgba(var(--v-bg-accent8-secondary, 199, 162, 204, 1))',
+  'bg-accent8-tertiary': 'rgba(var(--v-bg-accent8-tertiary, 230, 214, 234, 1))',
+  'bg-accent9-primary': 'rgba(var(--v-bg-accent9-primary, 255, 191, 63, 1))',
+  'bg-accent9-secondary': 'rgba(var(--v-bg-accent9-secondary, 254, 215, 142, 1))',
+  'bg-accent9-tertiary': 'rgba(var(--v-bg-accent9-tertiary, 251, 226, 185, 1))',
+  'bg-accent10-primary': 'rgba(var(--v-bg-accent10-primary, 237, 122, 35, 1))',
+  'bg-accent10-secondary': 'rgba(var(--v-bg-accent10-secondary, 241, 146, 85, 1))',
+  'bg-accent10-tertiary': 'rgba(var(--v-bg-accent10-tertiary, 245, 187, 148, 1))',
+  'bg-divider': 'rgba(var(--v-bg-divider, 171, 198, 216, 1))',
+  'bg-divider-secondary': 'rgba(var(--v-bg-divider-secondary, 199, 217, 229, 1))',
+  'bg-disabled': 'rgba(var(--v-bg-disabled, 176, 180, 181, 1))',
+  'bg-tab': 'rgba(var(--v-bg-tab, 240, 243, 247, 1))',
+  'bg-tab-hover': 'rgba(var(--v-bg-tab-hover, 245, 247, 247, 1))',
+  'bg-tab-selected': 'rgba(var(--v-bg-tab-selected, 32, 54, 69, 1))',
+  'bg-table-header': 'rgba(var(--v-bg-table-header, 240, 243, 247, 1))',
+  'bg-table-alt-row': 'rgba(var(--v-bg-table-alt-row, 245, 247, 247, 1))',
+  'bg-table-selected-row': 'rgba(var(--v-bg-table-selected-row, 204, 223, 255, 1))',
+  'bg-site-footer': 'rgba(var(--v-bg-site-footer, 51, 57, 61, 1))',
+  'bg-site-footer-action': 'rgba(var(--v-bg-site-footer-action, 171, 198, 216, 1))',
+  'bg-site-footer-action-hover': 'rgba(var(--v-bg-site-footer-action-hover, 199, 217, 229, 1))',
+  'bg-site-footer-action-active': 'rgba(var(--v-bg-site-footer-action-active, 143, 179, 203, 1))',
+  'bg-site-footer-field': 'rgba(var(--v-bg-site-footer-field, 89, 96, 99, 1))',
+  'bg-textarea-count': 'rgba(var(--v-bg-textarea-count, 4, 4, 28, 0.6))',
+  'bg-table-row-hover': 'rgba(var(--v-bg-table-row-hover, 241, 248, 251, 1))',
+  'bg-table-row-selected-expanded': 'rgba(var(--v-bg-table-row-selected-expanded, 229, 239, 255, 1))',
+  'bg-app-header': 'rgba(var(--v-bg-app-header, 240, 243, 247, 0.88))',
+  'bg-selection-tile': 'rgba(var(--v-bg-selection-tile, 252, 252, 252, 1))',
+  'bg-selection-tile-hover': 'rgba(var(--v-bg-selection-tile-hover, 247, 247, 247, 1))',
+  'bg-selection-tile-selected': 'rgba(var(--v-bg-selection-tile-selected, 242, 247, 255, 1))',
+  'bg-selection-tile-selected-hover': 'rgba(var(--v-bg-selection-tile-selected-hover, 229, 239, 255, 1))',
+  'bg-loading-track': 'rgba(var(--v-bg-loading-track, 229, 239, 255, 1))',
+  'bg-loading-progress': 'rgba(var(--v-bg-loading-progress, 153, 192, 255, 1))',
+  'bg-toggle-switch': 'rgba(var(--v-bg-toggle-switch, 107, 116, 125, 0.7))',
+  'bg-toggle-switch-hover': 'rgba(var(--v-bg-toggle-switch-hover, 107, 116, 125, 1))',
+  'bg-toggle-switch-selected-disabled': 'rgba(var(--v-bg-toggle-switch-selected-disabled, 153, 192, 255, 1))',
+  'bg-segment-control': 'rgba(var(--v-bg-segment-control, 89, 96, 99, 0.1))',
+  'bg-segment-hover': 'rgba(var(--v-bg-segment-hover, 205, 209, 211, 1))',
+  'bg-slider-handle': 'rgba(var(--v-bg-slider-handle, 252, 252, 252, 1))',
+  'bg-chip': 'rgba(var(--v-bg-chip, 32, 54, 69, 0.06))',
+  'bg-chip-hover': 'rgba(var(--v-bg-chip-hover, 32, 54, 69, 0.12))',
+  'bg-chip-active': 'rgba(var(--v-bg-chip-active, 32, 54, 69, 0.2))',
+  'bg-keypad-btn-active': 'rgba(var(--v-bg-keypad-btn-active, 229, 239, 255, 1))',
+  'bg-action-secondary-hover': 'rgba(var(--v-bg-action-secondary-hover, 4, 112, 236, 0.1))',
+  'bg-action-secondary-active': 'rgba(var(--v-bg-action-secondary-active, 29, 65, 195, 0.1))'
+};
+// prettier-ignore
+export const BorderColorMap = {
+  'border-color-action': 'rgba(var(--v-border-color-action, 19, 98, 226, 1))',
+  'border-color-action-hover': 'rgba(var(--v-border-color-action-hover, 4, 112, 236, 1))',
+  'border-color-action-active': 'rgba(var(--v-border-color-action-active, 29, 65, 195, 1))',
+  'border-color-danger': 'rgba(var(--v-border-color-danger, 230, 50, 87, 1))',
+  'border-color-danger-hover': 'rgba(var(--v-border-color-danger-hover, 255, 87, 114, 1))',
+  'border-color-danger-active': 'rgba(var(--v-border-color-danger-active, 189, 41, 71, 1))',
+  'border-color-input-field': 'rgba(var(--v-border-color-input-field, 171, 198, 216, 1))',
+  'border-color-input-field-hover': 'rgba(var(--v-border-color-input-field-hover, 115, 160, 190, 1))',
+  'border-color-input-field-focus': 'rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1))',
+  'border-color-input-field-danger': 'rgba(var(--v-border-color-input-field-danger, 230, 50, 87, 1))',
+  'border-color-input-field-danger-hover': 'rgba(var(--v-border-color-input-field-danger-hover, 255, 87, 114, 1))',
+  'border-color-input-field-danger-focus': 'rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1))',
+  'border-color-input-field-disabled': 'rgba(var(--v-border-color-input-field-disabled, 222, 225, 227, 1))',
+  'border-color-sidebar-item-focus': 'rgba(var(--v-border-color-sidebar-item-focus, 19, 98, 226, 1))',
+  'border-color-success': 'rgba(var(--v-border-color-success, 1, 128, 31, 1))',
+  'border-color-secondary-btn-disabled': 'rgba(var(--v-border-color-secondary-btn-disabled, 176, 180, 181, 1))',
+  'border-color-chip': 'rgba(var(--v-border-color-chip, 205, 209, 211, 1))',
+  'border-color-divider': 'rgba(var(--v-border-color-divider, 171, 198, 216, 1))',
+  'border-color-divider-secondary': 'rgba(var(--v-border-color-divider-secondary, 199, 217, 229, 1))',
+  'border-color-tile-selected': 'rgba(var(--v-border-color-tile-selected, 19, 98, 226, 1))',
+  'border-color-tile-selected-hover': 'rgba(var(--v-border-color-tile-selected-hover, 4, 112, 236, 1))',
+  'border-color-table-divider': 'rgba(var(--v-border-color-table-divider, 171, 198, 216, 1))',
+  'border-color-slider-handle': 'rgba(var(--v-border-color-slider-handle, 199, 217, 229, 1))'
+};

package/dist/collection/constants/tokens/overridableColorTokens.js

@@ -383,10 +383,10 @@ export const OverridableColorTokens = [
         ? baseColor.clone()
         : undefined;
       if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
-        value = tinycolor({ a: 0.9, b: 255, r: 255, g: 255 });
+        value = tinycolor({ a: 0.9, r: 255, b: 255, g: 255 });
       }
       else {
-        value = tinycolor({ a: 0.86, b: 15, r: 15, g: 15 });
+        value = tinycolor({ a: 0.86, r: 15, b: 15, g: 15 });
       }
       return formatValue(value);
     },
@@ -436,7 +436,7 @@ export const OverridableColorTokens = [
         value = tinycolor({ a: 0.9, r: 255, b: 255, g: 255 });
       }
       else {
-        value = tinycolor({ a: 0.86, b: 15, r: 15, g: 15 });
+        value = tinycolor({ a: 0.86, r: 15, b: 15, g: 15 });
       }
       return formatValue(value);
     },