From fef2d3a16f96ae32812cfe206896b8437a4abdb9 Mon Sep 17 00:00:00 2001
From: Brian Akpa <ba105445@bgov.com>
Date: Wed, 10 Apr 2019 12:23:16 -0400
Subject: [PATCH] fix: Fixed background color class name reference
 functionality for Box components

---
 dev/views/Box.vue              |   3 +-
 src/components/FishTankBox.vue |   6 +-
 src/styles/box/box-colors.css  | 682 ---------------------------------
 src/util/ColorsClassMapping.ts | 166 +-------
 vue-shim.d.ts                  |   4 +-
 5 files changed, 17 insertions(+), 844 deletions(-)
 delete mode 100644 src/styles/box/box-colors.css

diff --git a/dev/views/Box.vue b/dev/views/Box.vue
index 5f3bce0..3b4e153 100644
--- a/dev/views/Box.vue
+++ b/dev/views/Box.vue
@@ -30,7 +30,8 @@
           Text in a FishTankBox component in a 8 column space
         </fish-tank-text>
       </fish-tank-box>
-      <fish-tank-box>
+      <fish-tank-box
+        color="btaxOrange">
         <fish-tank-text>
           Text in another box justified in the remaining space, shared equally
         </fish-tank-text>
diff --git a/src/components/FishTankBox.vue b/src/components/FishTankBox.vue
index c5c7f7f..e67491d 100644
--- a/src/components/FishTankBox.vue
+++ b/src/components/FishTankBox.vue
@@ -24,7 +24,7 @@ import {
   rangeWithoutZero
 } from '../util/transform'
 
-import color  from '../util/ColorsClassMapping'
+import color  from '../util/colorsClassMapping'
 
 const _ = require("lodash").noConflict()
 export type IsBoxType = "div" | "span" | "section" | "article" | "aside" | "footer" | "header" | "details" | "figcaption" | "figure" | "main" | "nav" | "summary" | "time";
@@ -43,10 +43,11 @@ export type Color = any
 
 let colorMappingFunc = (value:any) => {
   if (!value) return identity()
-  let allColorMappings = mapping(color)
+  let allColorMappings = mapping(color())
   let mapColorNameToClass = (colorName:String) => {
     let [prefix, rest] = [colorName[0], colorName.substring(1, colorName.length)]
     let colorClassName = `color${prefix.toUpperCase()}${rest}Bg`
+    // debugger
     return colorClassName
   }
   return allColorMappings(mapColorNameToClass(value))
@@ -620,7 +621,6 @@ export default Vue.extend({
 })
 </script>
 <style module lang="scss">
-@import "../styles/variables";
 @import "../styles/mixins";
 @import "../styles/box/box-style";
 @import "../styles/box/box-whitespaces";
diff --git a/src/styles/box/box-colors.css b/src/styles/box/box-colors.css
deleted file mode 100644
index 7d826e5..0000000
--- a/src/styles/box/box-colors.css
+++ /dev/null
@@ -1,682 +0,0 @@
-/*
-This file was generated by running
-  $ /Users/srana6/.nvm/versions/node/v8.9.4/bin/node /Users/srana6/Projects/bgov-core/config/webpack/utils/cssbuilder/color.js
-*/
-
-:root {
-  --color-secondary-lighter: #F6F8FA;
-  --color-action: #3DA774;
-  --color-link-visited: #7F57B8;
-  --color-error-darkest: #B43931;
-  --color-gray-lighter: #C5CACD;
-  --color-action-darkest: #30855C;
-  --color-link: #267ABD;
-  --color-selected: #0D9DDB;
-  --color-disabled: #C5CACD;
-  --color-secondary-darker: #E0E5E8;
-  --color-warning-lighter: #FFC314;
-  --color-selected-darkest: #0A7DAF;
-  --color-secondary: #EDF2F5;
-  --color-warning-lightest: #FFF7E7;
-  --color-selected-darker: #0D94CF;
-  --color-notification-yellow: #FFB511;
-  --color-gray: #777C7F;
-  --color-notification-pink: #EA60A7;
-  --color-highlight-1: #FFF8B0;
-  --color-highlight-2: #E3F7FF;
-  --color-action-darker: #399E6E;
-  --color-highlight-3: #E0FFE0;
-  --color-gray-lightest: #EDF2F5;
-  --color-notification-blue: #0D9DDB;
-  --color-error-darker: #D5443A;
-  --color-warning: #FFB511;
-  --color-link-dark-bg: #ACCCE5;
-  --color-error-lighter: #E7564A;
-  --color-black: #292E31;
-  --color-warning-darkest: #CC900D;
-  --color-gray-light: #9EA3A6;
-  --color-gray-dark: #505558;
-  --color-action-lighter: #49B88B;
-  --color-background-darker: #F2F2F2;
-  --color-background: #F8F8F8;
-  --color-selected-lightest: #E7F5FB;
-  --color-selected-lighter: #0FB0E2;
-  --color-action-lightest: #EBF6F1;
-  --color-warning-darker: #F2AB10;
-  --color-error: #E1483E;
-  --color-white: #FFFFFF;
-  --color-error-lightest: #FBECEB;
-  --color-blaw-blue: #0D9DDB;
-  --color-bna-blue: #17509F;
-  --color-btax-orange: #EA7815;
-  --color-btax-blue: #2785D6;
-  --color-bgov-navy: #0018AB;
-  --color-bgov-purple: #9933CC;
-  --color-theme-labor: #00C18C;
-  --color-theme-environment: #6DC470;
-  --color-theme-bankruptcy: #C52700;
-  --color-theme-antitrust: #57534A;
-  --color-theme-telecom: #6A8C8A;
-  --color-theme-health: #0D3B91;
-  --color-theme-benefits: #EA6A02;
-  --color-theme-securities: #45BDE9;
-  --color-theme-ip: #1E95C1;
-  --color-theme-corporate: #8A5BB6;
-  --color-theme-banking: #379851;
-  --color-theme-ediscovery: #F64A56;
-  --color-dataviz-negative: #F87060;
-  --color-dataviz-positive: #2ECC71;
-  --color-dataviz-1: #63B995;
-  --color-dataviz-2: #1E4882;
-  --color-dataviz-3: #F87060;
-  --color-dataviz-10: #FF6D10;
-  --color-dataviz-4: #1AA2AF;
-  --color-dataviz-5: #FFB511;
-  --color-dataviz-6: #9357C8;
-  --color-dataviz-7: #F697C0;
-  --color-dataviz-8: #2ECC71;
-  --color-dataviz-9: #34495E;
-  --color-democrat: #0A54C2;
-  --color-republican: #D3301A;
-  --color-independent: #FFB00D;
-}
-
-.colorSecondaryLighter {
-  color: var(--color-secondary-lighter);
-}
-
-.colorAction {
-  color: var(--color-action);
-}
-
-.colorLinkVisited {
-  color: var(--color-link-visited);
-}
-
-.colorErrorDarkest {
-  color: var(--color-error-darkest);
-}
-
-.colorGrayLighter {
-  color: var(--color-gray-lighter);
-}
-
-.colorActionDarkest {
-  color: var(--color-action-darkest);
-}
-
-.colorLink {
-  color: var(--color-link);
-}
-
-.colorSelected {
-  color: var(--color-selected);
-}
-
-.colorDisabled {
-  color: var(--color-disabled);
-}
-
-.colorSecondaryDarker {
-  color: var(--color-secondary-darker);
-}
-
-.colorWarningLighter {
-  color: var(--color-warning-lighter);
-}
-
-.colorSelectedDarkest {
-  color: var(--color-selected-darkest);
-}
-
-.colorSecondary {
-  color: var(--color-secondary);
-}
-
-.colorWarningLightest {
-  color: var(--color-warning-lightest);
-}
-
-.colorSelectedDarker {
-  color: var(--color-selected-darker);
-}
-
-.colorNotificationYellow {
-  color: var(--color-notification-yellow);
-}
-
-.colorGray {
-  color: var(--color-gray);
-}
-
-.colorNotificationPink {
-  color: var(--color-notification-pink);
-}
-
-.colorHighlight1 {
-  color: var(--color-highlight-1);
-}
-
-.colorHighlight2 {
-  color: var(--color-highlight-2);
-}
-
-.colorActionDarker {
-  color: var(--color-action-darker);
-}
-
-.colorHighlight3 {
-  color: var(--color-highlight-3);
-}
-
-.colorGrayLightest {
-  color: var(--color-gray-lightest);
-}
-
-.colorNotificationBlue {
-  color: var(--color-notification-blue);
-}
-
-.colorErrorDarker {
-  color: var(--color-error-darker);
-}
-
-.colorWarning {
-  color: var(--color-warning);
-}
-
-.colorLinkDarkBg {
-  color: var(--color-link-dark-bg);
-}
-
-.colorErrorLighter {
-  color: var(--color-error-lighter);
-}
-
-.colorBlack {
-  color: var(--color-black);
-}
-
-.colorWarningDarkest {
-  color: var(--color-warning-darkest);
-}
-
-.colorGrayLight {
-  color: var(--color-gray-light);
-}
-
-.colorGrayDark {
-  color: var(--color-gray-dark);
-}
-
-.colorActionLighter {
-  color: var(--color-action-lighter);
-}
-
-.colorBackgroundDarker {
-  color: var(--color-background-darker);
-}
-
-.colorBackground {
-  color: var(--color-background);
-}
-
-.colorSelectedLightest {
-  color: var(--color-selected-lightest);
-}
-
-.colorSelectedLighter {
-  color: var(--color-selected-lighter);
-}
-
-.colorActionLightest {
-  color: var(--color-action-lightest);
-}
-
-.colorWarningDarker {
-  color: var(--color-warning-darker);
-}
-
-.colorError {
-  color: var(--color-error);
-}
-
-.colorWhite {
-  color: var(--color-white);
-}
-
-.colorErrorLightest {
-  color: var(--color-error-lightest);
-}
-
-.colorBlawBlue {
-  color: var(--color-blaw-blue);
-}
-
-.colorBnaBlue {
-  color: var(--color-bna-blue);
-}
-
-.colorBtaxOrange {
-  color: var(--color-btax-orange);
-}
-
-.colorBtaxBlue {
-  color: var(--color-btax-blue);
-}
-
-.colorBgovNavy {
-  color: var(--color-bgov-navy);
-}
-
-.colorBgovPurple {
-  color: var(--color-bgov-purple);
-}
-
-.colorThemeLabor {
-  color: var(--color-theme-labor);
-}
-
-.colorThemeEnvironment {
-  color: var(--color-theme-environment);
-}
-
-.colorThemeBankruptcy {
-  color: var(--color-theme-bankruptcy);
-}
-
-.colorThemeAntitrust {
-  color: var(--color-theme-antitrust);
-}
-
-.colorThemeTelecom {
-  color: var(--color-theme-telecom);
-}
-
-.colorThemeHealth {
-  color: var(--color-theme-health);
-}
-
-.colorThemeBenefits {
-  color: var(--color-theme-benefits);
-}
-
-.colorThemeSecurities {
-  color: var(--color-theme-securities);
-}
-
-.colorThemeIp {
-  color: var(--color-theme-ip);
-}
-
-.colorThemeCorporate {
-  color: var(--color-theme-corporate);
-}
-
-.colorThemeBanking {
-  color: var(--color-theme-banking);
-}
-
-.colorThemeEdiscovery {
-  color: var(--color-theme-ediscovery);
-}
-
-.colorDatavizNegative {
-  color: var(--color-dataviz-negative);
-}
-
-.colorDatavizPositive {
-  color: var(--color-dataviz-positive);
-}
-
-.colorDataviz1 {
-  color: var(--color-dataviz-1);
-}
-
-.colorDataviz2 {
-  color: var(--color-dataviz-2);
-}
-
-.colorDataviz3 {
-  color: var(--color-dataviz-3);
-}
-
-.colorDataviz10 {
-  color: var(--color-dataviz-10);
-}
-
-.colorDataviz4 {
-  color: var(--color-dataviz-4);
-}
-
-.colorDataviz5 {
-  color: var(--color-dataviz-5);
-}
-
-.colorDataviz6 {
-  color: var(--color-dataviz-6);
-}
-
-.colorDataviz7 {
-  color: var(--color-dataviz-7);
-}
-
-.colorDataviz8 {
-  color: var(--color-dataviz-8);
-}
-
-.colorDataviz9 {
-  color: var(--color-dataviz-9);
-}
-
-.colorDemocrat {
-  color: var(--color-democrat);
-}
-
-.colorRepublican {
-  color: var(--color-republican);
-}
-
-.colorIndependent {
-  color: var(--color-independent);
-}
-
-.colorSecondaryLighterBg {
-  background: var(--color-secondary-lighter);
-}
-
-.colorActionBg {
-  background: var(--color-action);
-}
-
-.colorLinkVisitedBg {
-  background: var(--color-link-visited);
-}
-
-.colorErrorDarkestBg {
-  background: var(--color-error-darkest);
-}
-
-.colorGrayLighterBg {
-  background: var(--color-gray-lighter);
-}
-
-.colorActionDarkestBg {
-  background: var(--color-action-darkest);
-}
-
-.colorLinkBg {
-  background: var(--color-link);
-}
-
-.colorSelectedBg {
-  background: var(--color-selected);
-}
-
-.colorDisabledBg {
-  background: var(--color-disabled);
-}
-
-.colorSecondaryDarkerBg {
-  background: var(--color-secondary-darker);
-}
-
-.colorWarningLighterBg {
-  background: var(--color-warning-lighter);
-}
-
-.colorSelectedDarkestBg {
-  background: var(--color-selected-darkest);
-}
-
-.colorSecondaryBg {
-  background: var(--color-secondary);
-}
-
-.colorWarningLightestBg {
-  background: var(--color-warning-lightest);
-}
-
-.colorSelectedDarkerBg {
-  background: var(--color-selected-darker);
-}
-
-.colorNotificationYellowBg {
-  background: var(--color-notification-yellow);
-}
-
-.colorGrayBg {
-  background: var(--color-gray);
-}
-
-.colorNotificationPinkBg {
-  background: var(--color-notification-pink);
-}
-
-.colorHighlight1Bg {
-  background: var(--color-highlight-1);
-}
-
-.colorHighlight2Bg {
-  background: var(--color-highlight-2);
-}
-
-.colorActionDarkerBg {
-  background: var(--color-action-darker);
-}
-
-.colorHighlight3Bg {
-  background: var(--color-highlight-3);
-}
-
-.colorGrayLightestBg {
-  background: var(--color-gray-lightest);
-}
-
-.colorNotificationBlueBg {
-  background: var(--color-notification-blue);
-}
-
-.colorErrorDarkerBg {
-  background: var(--color-error-darker);
-}
-
-.colorWarningBg {
-  background: var(--color-warning);
-}
-
-.colorLinkDarkBgBg {
-  background: var(--color-link-dark-bg);
-}
-
-.colorErrorLighterBg {
-  background: var(--color-error-lighter);
-}
-
-.colorBlackBg {
-  background: var(--color-black);
-}
-
-.colorWarningDarkestBg {
-  background: var(--color-warning-darkest);
-}
-
-.colorGrayLightBg {
-  background: var(--color-gray-light);
-}
-
-.colorGrayDarkBg {
-  background: var(--color-gray-dark);
-}
-
-.colorActionLighterBg {
-  background: var(--color-action-lighter);
-}
-
-.colorBackgroundDarkerBg {
-  background: var(--color-background-darker);
-}
-
-.colorBackgroundBg {
-  background: var(--color-background);
-}
-
-.colorSelectedLightestBg {
-  background: var(--color-selected-lightest);
-}
-
-.colorSelectedLighterBg {
-  background: var(--color-selected-lighter);
-}
-
-.colorActionLightestBg {
-  background: var(--color-action-lightest);
-}
-
-.colorWarningDarkerBg {
-  background: var(--color-warning-darker);
-}
-
-.colorErrorBg {
-  background: var(--color-error);
-}
-
-.colorWhiteBg {
-  background: var(--color-white);
-}
-
-.colorErrorLightestBg {
-  background: var(--color-error-lightest);
-}
-
-.colorBlawBlueBg {
-  background: var(--color-blaw-blue);
-}
-
-.colorBnaBlueBg {
-  background: var(--color-bna-blue);
-}
-
-.colorBtaxOrangeBg {
-  background: var(--color-btax-orange);
-}
-
-.colorBtaxBlueBg {
-  background: var(--color-btax-blue);
-}
-
-.colorBgovNavyBg {
-  background: var(--color-bgov-navy);
-}
-
-.colorBgovPurpleBg {
-  background: var(--color-bgov-purple);
-}
-
-.colorThemeLaborBg {
-  background: var(--color-theme-labor);
-}
-
-.colorThemeEnvironmentBg {
-  background: var(--color-theme-environment);
-}
-
-.colorThemeBankruptcyBg {
-  background: var(--color-theme-bankruptcy);
-}
-
-.colorThemeAntitrustBg {
-  background: var(--color-theme-antitrust);
-}
-
-.colorThemeTelecomBg {
-  background: var(--color-theme-telecom);
-}
-
-.colorThemeHealthBg {
-  background: var(--color-theme-health);
-}
-
-.colorThemeBenefitsBg {
-  background: var(--color-theme-benefits);
-}
-
-.colorThemeSecuritiesBg {
-  background: var(--color-theme-securities);
-}
-
-.colorThemeIpBg {
-  background: var(--color-theme-ip);
-}
-
-.colorThemeCorporateBg {
-  background: var(--color-theme-corporate);
-}
-
-.colorThemeBankingBg {
-  background: var(--color-theme-banking);
-}
-
-.colorThemeEdiscoveryBg {
-  background: var(--color-theme-ediscovery);
-}
-
-.colorDatavizNegativeBg {
-  background: var(--color-dataviz-negative);
-}
-
-.colorDatavizPositiveBg {
-  background: var(--color-dataviz-positive);
-}
-
-.colorDataviz1Bg {
-  background: var(--color-dataviz-1);
-}
-
-.colorDataviz2Bg {
-  background: var(--color-dataviz-2);
-}
-
-.colorDataviz3Bg {
-  background: var(--color-dataviz-3);
-}
-
-.colorDataviz10Bg {
-  background: var(--color-dataviz-10);
-}
-
-.colorDataviz4Bg {
-  background: var(--color-dataviz-4);
-}
-
-.colorDataviz5Bg {
-  background: var(--color-dataviz-5);
-}
-
-.colorDataviz6Bg {
-  background: var(--color-dataviz-6);
-}
-
-.colorDataviz7Bg {
-  background: var(--color-dataviz-7);
-}
-
-.colorDataviz8Bg {
-  background: var(--color-dataviz-8);
-}
-
-.colorDataviz9Bg {
-  background: var(--color-dataviz-9);
-}
-
-.colorDemocratBg {
-  background: var(--color-democrat);
-}
-
-.colorRepublicanBg {
-  background: var(--color-republican);
-}
-
-.colorIndependentBg {
-  background: var(--color-independent);
-}
\ No newline at end of file
diff --git a/src/util/ColorsClassMapping.ts b/src/util/ColorsClassMapping.ts
index daf7b90..0d3d3b9 100644
--- a/src/util/ColorsClassMapping.ts
+++ b/src/util/ColorsClassMapping.ts
@@ -1,157 +1,9 @@
-/*
-This file was generated by running
-  $ /Users/srana6/.nvm/versions/node/v8.9.4/bin/node /Users/srana6/Projects/bgov-core/config/webpack/utils/cssbuilder/color.js
-*/
-
-export default {
-  colorSecondaryLighter: 'colorSecondaryLighter',
-  colorAction: 'colorAction',
-  colorLinkVisited: 'colorLinkVisited',
-  colorErrorDarkest: 'colorErrorDarkest',
-  colorGrayLighter: 'colorGrayLighter',
-  colorActionDarkest: 'colorActionDarkest',
-  colorLink: 'colorLink',
-  colorSelected: 'colorSelected',
-  colorDisabled: 'colorDisabled',
-  colorSecondaryDarker: 'colorSecondaryDarker',
-  colorWarningLighter: 'colorWarningLighter',
-  colorSelectedDarkest: 'colorSelectedDarkest',
-  colorSecondary: 'colorSecondary',
-  colorWarningLightest: 'colorWarningLightest',
-  colorSelectedDarker: 'colorSelectedDarker',
-  colorNotificationYellow: 'colorNotificationYellow',
-  colorGray: 'colorGray',
-  colorNotificationPink: 'colorNotificationPink',
-  colorHighlight1: 'colorHighlight1',
-  colorHighlight2: 'colorHighlight2',
-  colorActionDarker: 'colorActionDarker',
-  colorHighlight3: 'colorHighlight3',
-  colorGrayLightest: 'colorGrayLightest',
-  colorNotificationBlue: 'colorNotificationBlue',
-  colorErrorDarker: 'colorErrorDarker',
-  colorWarning: 'colorWarning',
-  colorLinkDarkBg: 'colorLinkDarkBg',
-  colorErrorLighter: 'colorErrorLighter',
-  colorBlack: 'colorBlack',
-  colorWarningDarkest: 'colorWarningDarkest',
-  colorGrayLight: 'colorGrayLight',
-  colorGrayDark: 'colorGrayDark',
-  colorActionLighter: 'colorActionLighter',
-  colorBackgroundDarker: 'colorBackgroundDarker',
-  colorBackground: 'colorBackground',
-  colorSelectedLightest: 'colorSelectedLightest',
-  colorSelectedLighter: 'colorSelectedLighter',
-  colorActionLightest: 'colorActionLightest',
-  colorWarningDarker: 'colorWarningDarker',
-  colorError: 'colorError',
-  colorWhite: 'colorWhite',
-  colorErrorLightest: 'colorErrorLightest',
-  colorBlawBlue: 'colorBlawBlue',
-  colorBnaBlue: 'colorBnaBlue',
-  colorBtaxOrange: 'colorBtaxOrange',
-  colorBtaxBlue: 'colorBtaxBlue',
-  colorBgovNavy: 'colorBgovNavy',
-  colorBgovPurple: 'colorBgovPurple',
-  colorThemeLabor: 'colorThemeLabor',
-  colorThemeEnvironment: 'colorThemeEnvironment',
-  colorThemeBankruptcy: 'colorThemeBankruptcy',
-  colorThemeAntitrust: 'colorThemeAntitrust',
-  colorThemeTelecom: 'colorThemeTelecom',
-  colorThemeHealth: 'colorThemeHealth',
-  colorThemeBenefits: 'colorThemeBenefits',
-  colorThemeSecurities: 'colorThemeSecurities',
-  colorThemeIp: 'colorThemeIp',
-  colorThemeCorporate: 'colorThemeCorporate',
-  colorThemeBanking: 'colorThemeBanking',
-  colorThemeEdiscovery: 'colorThemeEdiscovery',
-  colorDatavizNegative: 'colorDatavizNegative',
-  colorDatavizPositive: 'colorDatavizPositive',
-  colorDataviz1: 'colorDataviz1',
-  colorDataviz2: 'colorDataviz2',
-  colorDataviz3: 'colorDataviz3',
-  colorDataviz10: 'colorDataviz10',
-  colorDataviz4: 'colorDataviz4',
-  colorDataviz5: 'colorDataviz5',
-  colorDataviz6: 'colorDataviz6',
-  colorDataviz7: 'colorDataviz7',
-  colorDataviz8: 'colorDataviz8',
-  colorDataviz9: 'colorDataviz9',
-  colorDemocrat: 'colorDemocrat',
-  colorRepublican: 'colorRepublican',
-  colorIndependent: 'colorIndependent',
-  colorSecondaryLighterBg: 'colorSecondaryLighterBg',
-  colorActionBg: 'colorActionBg',
-  colorLinkVisitedBg: 'colorLinkVisitedBg',
-  colorErrorDarkestBg: 'colorErrorDarkestBg',
-  colorGrayLighterBg: 'colorGrayLighterBg',
-  colorActionDarkestBg: 'colorActionDarkestBg',
-  colorLinkBg: 'colorLinkBg',
-  colorSelectedBg: 'colorSelectedBg',
-  colorDisabledBg: 'colorDisabledBg',
-  colorSecondaryDarkerBg: 'colorSecondaryDarkerBg',
-  colorWarningLighterBg: 'colorWarningLighterBg',
-  colorSelectedDarkestBg: 'colorSelectedDarkestBg',
-  colorSecondaryBg: 'colorSecondaryBg',
-  colorWarningLightestBg: 'colorWarningLightestBg',
-  colorSelectedDarkerBg: 'colorSelectedDarkerBg',
-  colorNotificationYellowBg: 'colorNotificationYellowBg',
-  colorGrayBg: 'colorGrayBg',
-  colorNotificationPinkBg: 'colorNotificationPinkBg',
-  colorHighlight1Bg: 'colorHighlight1Bg',
-  colorHighlight2Bg: 'colorHighlight2Bg',
-  colorActionDarkerBg: 'colorActionDarkerBg',
-  colorHighlight3Bg: 'colorHighlight3Bg',
-  colorGrayLightestBg: 'colorGrayLightestBg',
-  colorNotificationBlueBg: 'colorNotificationBlueBg',
-  colorErrorDarkerBg: 'colorErrorDarkerBg',
-  colorWarningBg: 'colorWarningBg',
-  colorLinkDarkBgBg: 'colorLinkDarkBgBg',
-  colorErrorLighterBg: 'colorErrorLighterBg',
-  colorBlackBg: 'colorBlackBg',
-  colorWarningDarkestBg: 'colorWarningDarkestBg',
-  colorGrayLightBg: 'colorGrayLightBg',
-  colorGrayDarkBg: 'colorGrayDarkBg',
-  colorActionLighterBg: 'colorActionLighterBg',
-  colorBackgroundDarkerBg: 'colorBackgroundDarkerBg',
-  colorBackgroundBg: 'colorBackgroundBg',
-  colorSelectedLightestBg: 'colorSelectedLightestBg',
-  colorSelectedLighterBg: 'colorSelectedLighterBg',
-  colorActionLightestBg: 'colorActionLightestBg',
-  colorWarningDarkerBg: 'colorWarningDarkerBg',
-  colorErrorBg: 'colorErrorBg',
-  colorWhiteBg: 'colorWhiteBg',
-  colorErrorLightestBg: 'colorErrorLightestBg',
-  colorBlawBlueBg: 'colorBlawBlueBg',
-  colorBnaBlueBg: 'colorBnaBlueBg',
-  colorBtaxOrangeBg: 'colorBtaxOrangeBg',
-  colorBtaxBlueBg: 'colorBtaxBlueBg',
-  colorBgovNavyBg: 'colorBgovNavyBg',
-  colorBgovPurpleBg: 'colorBgovPurpleBg',
-  colorThemeLaborBg: 'colorThemeLaborBg',
-  colorThemeEnvironmentBg: 'colorThemeEnvironmentBg',
-  colorThemeBankruptcyBg: 'colorThemeBankruptcyBg',
-  colorThemeAntitrustBg: 'colorThemeAntitrustBg',
-  colorThemeTelecomBg: 'colorThemeTelecomBg',
-  colorThemeHealthBg: 'colorThemeHealthBg',
-  colorThemeBenefitsBg: 'colorThemeBenefitsBg',
-  colorThemeSecuritiesBg: 'colorThemeSecuritiesBg',
-  colorThemeIpBg: 'colorThemeIpBg',
-  colorThemeCorporateBg: 'colorThemeCorporateBg',
-  colorThemeBankingBg: 'colorThemeBankingBg',
-  colorThemeEdiscoveryBg: 'colorThemeEdiscoveryBg',
-  colorDatavizNegativeBg: 'colorDatavizNegativeBg',
-  colorDatavizPositiveBg: 'colorDatavizPositiveBg',
-  colorDataviz1Bg: 'colorDataviz1Bg',
-  colorDataviz2Bg: 'colorDataviz2Bg',
-  colorDataviz3Bg: 'colorDataviz3Bg',
-  colorDataviz10Bg: 'colorDataviz10Bg',
-  colorDataviz4Bg: 'colorDataviz4Bg',
-  colorDataviz5Bg: 'colorDataviz5Bg',
-  colorDataviz6Bg: 'colorDataviz6Bg',
-  colorDataviz7Bg: 'colorDataviz7Bg',
-  colorDataviz8Bg: 'colorDataviz8Bg',
-  colorDataviz9Bg: 'colorDataviz9Bg',
-  colorDemocratBg: 'colorDemocratBg',
-  colorRepublicanBg: 'colorRepublicanBg',
-  colorIndependentBg: 'colorIndependentBg'
-}
\ No newline at end of file
+import * as colors from '@fishtank/colors/dist/index.common'
+export type ftColors = { [key: string]: string }
+export default function (){
+  const newColors:ftColors = {}
+  Object.keys(colors).map((key, index)=>{
+    newColors[key+'Bg'] = key+'Bg'
+  })
+ return newColors
+}
diff --git a/vue-shim.d.ts b/vue-shim.d.ts
index e6cf1b1..90d975e 100644
--- a/vue-shim.d.ts
+++ b/vue-shim.d.ts
@@ -1,4 +1,6 @@
 declare module "*.vue" {
   import Vue from "vue";
   export default Vue;
-}
\ No newline at end of file
+}
+
+declare module '@fishtank/colors/dist/index.common';