raven-client/ayanova/src/plugins/vuetify.js

/* xeslint-disable */

import Vue from "vue";
import Vuetify from "vuetify/lib";

//---------------------------
//ICONS
//tree shaking compatible icon method
//https://stackoverflow.com/a/58261449/8939
import { library } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

Vue.component("font-awesome-icon", FontAwesomeIcon); // Register component globally
import { faSquare as farSquare } from "@fortawesome/free-regular-svg-icons";
import {
  faAddressBook,
  faAddressCard,
  faArrowsAltH,
  faArrowsAltV,
  faBars,
  faBell,
  faBinoculars,
  faBold,
  faBox,
  faBoxes,
  faBullhorn,
  faBusinessTime,
  faCalculator,
  faCalendarAlt,
  faCalendarCheck,
  faCalendarDay,
  faCaretDown,
  faCheckCircle,
  faCheckSquare,
  faChevronDown,
  faChild,
  faClock,
  faCode,
  faCogs,
  faColumns,
  faDiceD20,
  faDolly,
  faDollyFlatbed,
  faDoorOpen,
  faEdit,
  faEllipsisV,
  faExclamationCircle,
  faEye,
  faEyeSlash,
  faFan,
  faFeather,
  faFile,
  faFileAlt,
  faFileArchive,
  faFileAudio,
  faFileCode,
  faFileContract,
  faFileCsv,
  faFileExcel,
  faFileImage,
  faFileImport,
  faFileMedicalAlt,
  faFilePdf,
  faFilePowerpoint,
  faFileVideo,
  faFileWord,
  faFilter,
  faFolder,
  faGenderless,
  faGlasses,
  faGlobe,
  faHeading,
  faHistory,
  faHome,
  faImage,
  faInbox,
  faInfoCircle,
  faItalic,
  faKey,
  faLanguage,
  faLink,
  faListOl,
  faListUl,
  faMinus,
  faPallet,
  faPaperclip,
  faPaperPlane,
  faPencilAlt,
  faPencilRuler,
  faPlug,
  faQuestionCircle,
  faQuoteLeft,
  faRobot,
  faRocket,
  faSearch,
  faSeedling,
  faServer,
  faShippingFast,
  faSignInAlt,
  faSignOutAlt,
  faSitemap,
  faSlidersH,
  faSquareFull,
  faStickyNote,
  faStore,
  faStrikethrough,
  faTable,
  faTachometerAlt,
  faThList,
  faTicketAlt,
  faToolbox,
  faTools,
  faUser,
  faUserCog,
  faUsers,
  faUserTie,
  faVial
} from "@fortawesome/free-solid-svg-icons";

Vue.component("font-awesome-icon", FontAwesomeIcon);

library.add(
  faAddressBook,
  faAddressCard,
  faArrowsAltH,
  faArrowsAltV,
  faBars,
  faBell,
  faBinoculars,
  faBold,
  faBox,
  faBoxes,
  faBullhorn,
  faBusinessTime,
  faCalculator,
  faCalendarAlt,
  faCalendarCheck,
  faCalendarDay,
  faCaretDown,
  faCheckCircle,
  faCheckSquare,
  faChevronDown,
  faChild,
  faClock,
  faCode,
  faCogs,
  faColumns,
  faDiceD20,
  faDolly,
  faDollyFlatbed,
  faDoorOpen,
  faEdit,
  faEllipsisV,
  faExclamationCircle,
  faEye,
  faEyeSlash,
  faFan,
  faFeather,
  faFile,
  faFileAlt,
  faFileArchive,
  faFileAudio,
  faFileCode,
  faFileContract,
  faFileCsv,
  faFileExcel,
  faFileImage,
  faFileImport,
  faFileMedicalAlt,
  faFilePdf,
  faFilePowerpoint,
  faFileVideo,
  faFileWord,
  faFilter,
  faFolder,
  faGenderless,
  faGlasses,
  faGlobe,
  faHeading,
  faHistory,
  faHome,
  faImage,
  faInbox,
  faInfoCircle,
  faItalic,
  faKey,
  faLanguage,
  faLink,
  faListOl,
  faListUl,
  faMinus,
  faPallet,
  faPaperclip,
  faPaperPlane,
  faPencilAlt,
  faPencilRuler,
  faPlug,
  faQuestionCircle,
  faQuoteLeft,
  faRobot,
  faRocket,
  faSearch,
  faSeedling,
  faServer,
  faShippingFast,
  faSignInAlt,
  faSignOutAlt,
  faSitemap,
  faSlidersH,
  farSquare,
  faSquareFull,
  faStickyNote,
  faStore,
  faStrikethrough,
  faTable,
  faTachometerAlt,
  faThList,
  faTicketAlt,
  faToolbox,
  faTools,
  faUser,
  faUserCog,
  faUsers,
  faUserTie,
  faVial
);

const CUSTOM_ICONS = {
  ayiAddressBook: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "address-book"]
    }
  },
  ayiAddressCard: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "address-card"]
    }
  },
  ayiArrowsAltH: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "arrows-alt-h"]
    }
  },
  ayiArrowsAltV: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "arrows-alt-v"]
    }
  },
  ayiBell: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "bell"]
    }
  },
  ayiBinoculars: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "binoculars"]
    }
  },
  ayiBold: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "bold"]
    }
  },
  ayiBox: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "box"]
    }
  },
  ayiBoxes: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "boxes"]
    }
  },
  ayiBullhorn: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "bullhorn"]
    }
  },
  ayiBusinessTime: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "business-time"]
    }
  },
  ayiCalculator: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "calculator"]
    }
  },
  ayiCalendarAlt: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "calendar-alt"]
    }
  },
  ayiCalendarCheck: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "calendar-check"]
    }
  },
  ayiCalendarDay: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "calendar-day"]
    }
  },
  ayiCheckCircle: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "check-circle"]
    }
  },
  ayiCheckSquare: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "check-square"]
    }
  },
  ayiChild: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "child"]
    }
  },
  ayiClock: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "clock"]
    }
  },
  ayiCode: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "code"]
    }
  },
  ayiCogs: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "cogs"]
    }
  },
  ayiColumns: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "columns"]
    }
  },
  ayiCustomize: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "sliders-h"]
    }
  },
  ayiDiceD20: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "dice-d20"]
    }
  },
  ayiDolly: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "dolly"]
    }
  },
  ayiDollyFlatbed: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "dolly-flatbed"]
    }
  },
  ayiDoorOpen: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "door-open"]
    }
  },
  ayiEdit: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "edit"]
    }
  },
  ayiExclamationCircle: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "exclamation-circle"]
    }
  },
  ayiEye: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "eye"]
    }
  },
  ayiEyeSlash: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "eye-slash"]
    }
  },
  ayiEllipsisV: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "ellipsis-v"]
    }
  },
  ayiFan: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "fan"]
    }
  },
  ayiFeather: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "feather"]
    }
  },
  ayiFile: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "file"]
    }
  },
  ayiFileArchive: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "file-archive"]
    }
  },
  ayiFileAlt: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "file-alt"]
    }
  },
  ayiFileAudio: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "file-audio"]
    }
  },
  ayiFileCode: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "file-code"]
    }
  },
  ayiFileContract: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "file-contract"]
    }
  },
  ayiFileCsv: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "file-csv"]
    }
  },
  ayiFileExcel: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "file-excel"]
    }
  },
  ayiFileImage: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "file-image"]
    }
  },
  ayiFileImport: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "file-import"]
    }
  },
  ayiFileMedicalAlt: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "file-medical-alt"]
    }
  },
  ayiFilePdf: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "file-pdf"]
    }
  },
  ayiFilePowerpoint: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "file-powerpoint"]
    }
  },
  ayiFileVidio: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "file-vidio"]
    }
  },
  ayiFileWord: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "file-word"]
    }
  },
  ayiFilter: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "filter"]
    }
  },
  ayiFolder: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "folder"]
    }
  },
  ayiGenderless: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "genderless"]
    }
  },
  ayiGlasses: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "glasses"]
    }
  },
  ayiGlobe: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "globe"]
    }
  },
  ayiHeading: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "heading"]
    }
  },
  ayiHistory: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "history"]
    }
  },
  ayiHome: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "home"]
    }
  },
  ayiImage: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "image"]
    }
  },
  ayiInbox: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "inbox"]
    }
  },
  ayiInfoCircle: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "info-circle"]
    }
  },
  ayiItalic: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "italic"]
    }
  },
  ayiKey: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "key"]
    }
  },
  ayiLanguage: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "language"]
    }
  },
  ayiLink: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "link"]
    }
  },
  ayiListOl: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "list-ol"]
    }
  },
  ayiListUl: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "list-ul"]
    }
  },
  ayiMinus: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "minus"]
    }
  },
  ayiPallet: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "pallet"]
    }
  },
  ayiPaperclip: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "paperclip"]
    }
  },
  ayiPaperPlane: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "paper-plane"]
    }
  },
  ayiPencilAlt: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "pencil-alt"]
    }
  },
  ayiPencilRuler: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "pencil-ruler"]
    }
  },
  ayiPlug: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "plug"]
    }
  },
  ayiQuestionCircle: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "question-circle"]
    }
  },
  ayiQuoteLeft: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "quote-left"]
    }
  },
  ayiRobot: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "robot"]
    }
  },
  ayiRocket: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "rocket"]
    }
  },
  ayiSearch: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "search"]
    }
  },
  ayiSeedling: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "seedling"]
    }
  },
  ayiServer: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "server"]
    }
  },
  ayiShippingFast: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "shipping-fast"]
    }
  },
  ayiSignIn: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "sign-in-alt"]
    }
  },
  ayiSignOut: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "sign-out-alt"]
    }
  },
  ayiSitemap: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "sitemap"]
    }
  },
  ayiSquare: {
    component: FontAwesomeIcon,
    props: {
      icon: ["far", "square"]
    }
  },
  ayiSquareFull: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "square-full"]
    }
  },
  ayiStickyNote: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "sticky-note"]
    }
  },
  ayiStore: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "store"]
    }
  },
  ayiStrikethrough: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "strikethrough"]
    }
  },
  ayiTable: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "table"]
    }
  },
  ayiTachometer: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "tachometer-alt"]
    }
  },
  ayiThList: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "th-list"]
    }
  },
  ayiTicket: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "ticket-alt"]
    }
  },
  ayiToolbox: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "toolbox"]
    }
  },
  ayiTools: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "tools"]
    }
  },
  ayiUser: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "user"]
    }
  },
  ayiUserCog: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "user-cog"]
    }
  },
  ayiUsers: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "users"]
    }
  },
  ayiUserTie: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "user-tie"]
    }
  },
  ayiVial: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "vial"]
    }
  },
  //VUETIFY REQUIRED ONES
  //https://vuetifyjs.com/en/features/icons/#using-custom-icons
  dropdown: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "caret-down"]
    }
  },
  info: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "info-circle"]
    }
  },
  menu: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "bars"]
    }
  },
  sort: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fas", "chevron-down"]
    }
  }
};
//-------------

Vue.use(Vuetify);

export default new Vuetify({
  // lang: { locales: { myLang }, current: "myLang" },
  theme: {
    themes: {
      light: {
        primary: "#00205B", //Canucks dark blue
        secondary: "#00843D", //canucks green

        accent: "#db7022", //lighter orangey red, more friendly looking though not as much clarity it seems
        //error: "#b71c1c", //dark red, easy to read but not error-y enough possibly

        //accent: "#BD491A", //dark orangey red, more clarity, less friendly looking
        error: "#ff5252", //lighter red, have to see if it's good for all screens and sizes as it's a bit light but it stands out as an error condition better

        disabled: "#e0e0e0"
      },
      dark: {
        //here you will define primary secondary stuff for dark theme
        //color adjuster tool: https://www.hexcolortool.com/#00205c
        primary: "#7F9FDA", //Canucks dark blue LIGHTENED 50%
        secondary: "#006B24", //canucks green DARKENED 10%

        accent: "#db7022", //lighter orangey red, more friendly looking though not as much clarity it seems
        //error: "#b71c1c", //dark red, easy to read but not error-y enough possibly

        //accent: "#BD491A", //dark orangey red, more clarity, less friendly looking
        error: "#ff5252", //lighter red, have to see if it's good for all screens and sizes as it's a bit light but it stands out as an error condition better

        disabled: "#e0e0e0"
      }
    }
  },
  icons: {
    iconfont: "faSvg",
    values: CUSTOM_ICONS
  }
});