@usssa/component-library 1.0.0-alpha.17 → 1.0.0-alpha.18

package/README.md

@@ -1,4 +1,4 @@
-# Component Library v1.0.0-alpha.17
+# Component Library v1.0.0-alpha.18
 
 This library provides custom UI components for USSSA applications.
 

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-alpha.17",
+  "version": "1.0.0-alpha.18",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Troy Moreland <troy.moreland@usssa.com>",
   "main": "src/components/index.js",
   "files": [
-    "src/components",
-    "src/composables",
+    "src",
     "README.md"
   ],
   "publishConfig": {

package/src/App.vue

@@ -0,0 +1,9 @@
+<template>
+  <router-view />
+</template>
+
+<script setup>
+defineOptions({
+  name: "App",
+});
+</script>

package/src/assets/quasar-logo-vertical.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 356 360">
+	<path
+		d="M43.4 303.4c0 3.8-2.3 6.3-7.1 6.3h-15v-22h14.4c4.3 0 6.2 2.2 6.2 5.2 0 2.6-1.5 4.4-3.4 5 2.8.4 4.9 2.5 4.9 5.5zm-8-13H24.1v6.9H35c2.1 0 4-1.3 4-3.8 0-2.2-1.3-3.1-3.7-3.1zm5.1 12.6c0-2.3-1.8-3.7-4-3.7H24.2v7.7h11.7c3.4 0 4.6-1.8 4.6-4zm36.3 4v2.7H56v-22h20.6v2.7H58.9v6.8h14.6v2.3H58.9v7.5h17.9zm23-5.8v8.5H97v-8.5l-11-13.4h3.4l8.9 11 8.8-11h3.4l-10.8 13.4zm19.1-1.8V298c0-7.9 5.2-10.7 12.7-10.7 7.5 0 13 2.8 13 10.7v1.4c0 7.9-5.5 10.8-13 10.8s-12.7-3-12.7-10.8zm22.7 0V298c0-5.7-3.9-8-10-8-6 0-9.8 2.3-9.8 8v1.4c0 5.8 3.8 8.1 9.8 8.1 6 0 10-2.3 10-8.1zm37.2-11.6v21.9h-2.9l-15.8-17.9v17.9h-2.8v-22h3l15.6 18v-18h2.9zm37.9 10.2v1.3c0 7.8-5.2 10.4-12.4 10.4H193v-22h11.2c7.2 0 12.4 2.8 12.4 10.3zm-3 0c0-5.3-3.3-7.6-9.4-7.6h-8.4V307h8.4c6 0 9.5-2 9.5-7.7V298zm50.8-7.6h-9.7v19.3h-3v-19.3h-9.7v-2.6h22.4v2.6zm34.4-2.6v21.9h-3v-10.1h-16.8v10h-2.8v-21.8h2.8v9.2H296v-9.2h2.9zm34.9 19.2v2.7h-20.7v-22h20.6v2.7H316v6.8h14.5v2.3H316v7.5h17.8zM24 340.2v7.3h13.9v2.4h-14v9.6H21v-22h20v2.7H24zm41.5 11.4h-9.8v7.9H53v-22h13.3c5.1 0 8 1.9 8 6.8 0 3.7-2 6.3-5.6 7l6 8.2h-3.3l-5.8-8zm-9.8-2.6H66c3.1 0 5.3-1.5 5.3-4.7 0-3.3-2.2-4.1-5.3-4.1H55.7v8.8zm47.9 6.2H89l-2 4.3h-3.2l10.7-22.2H98l10.7 22.2h-3.2l-2-4.3zm-1-2.3l-6.3-13-6 13h12.2zm46.3-15.3v21.9H146v-17.2L135.7 358h-2.1l-10.2-15.6v17h-2.8v-21.8h3l11 16.9 11.3-17h3zm35 19.3v2.6h-20.7v-22h20.6v2.7H166v6.8h14.5v2.3H166v7.6h17.8zm47-19.3l-8.3 22h-3l-7.1-18.6-7 18.6h-3l-8.2-22h3.3L204 356l6.8-18.5h3.4L221 356l6.6-18.5h3.3zm10 11.6v-1.4c0-7.8 5.2-10.7 12.7-10.7 7.6 0 13 2.9 13 10.7v1.4c0 7.9-5.4 10.8-13 10.8-7.5 0-12.7-3-12.7-10.8zm22.8 0v-1.4c0-5.7-4-8-10-8s-9.9 2.3-9.9 8v1.4c0 5.8 3.8 8.2 9.8 8.2 6.1 0 10-2.4 10-8.2zm28.3 2.4h-9.8v7.9h-2.8v-22h13.2c5.2 0 8 1.9 8 6.8 0 3.7-2 6.3-5.6 7l6 8.2h-3.3l-5.8-8zm-9.8-2.6h10.2c3 0 5.2-1.5 5.2-4.7 0-3.3-2.1-4.1-5.2-4.1h-10.2v8.8zm40.3-1.5l-6.8 5.6v6.4h-2.9v-22h2.9v12.3l15.2-12.2h3.7l-9.9 8.1 10.3 13.8h-3.6l-8.9-12z" />
+	<path fill="#050A14"
+		d="M188.4 71.7a10.4 10.4 0 01-20.8 0 10.4 10.4 0 1120.8 0zM224.2 45c-2.2-3.9-5-7.5-8.2-10.7l-12 7c-3.7-3.2-8-5.7-12.6-7.3a49.4 49.4 0 00-9.7 13.9 59 59 0 0140.1 14l7.6-4.4a57 57 0 00-5.2-12.5zM178 125.1c4.5 0 9-.6 13.4-1.7v-14a40 40 0 0012.5-7.2 47.7 47.7 0 00-7.1-15.3 59 59 0 01-32.2 27.7v8.7c4.4 1.2 8.9 1.8 13.4 1.8zM131.8 45c-2.3 4-4 8.1-5.2 12.5l12 7a40 40 0 000 14.4c5.7 1.5 11.3 2 16.9 1.5a59 59 0 01-8-41.7l-7.5-4.3c-3.2 3.2-6 6.7-8.2 10.6z" />
+	<path fill="#00B4FF"
+		d="M224.2 98.4c2.3-3.9 4-8 5.2-12.4l-12-7a40 40 0 000-14.5c-5.7-1.5-11.3-2-16.9-1.5a59 59 0 018 41.7l7.5 4.4c3.2-3.2 6-6.8 8.2-10.7zm-92.4 0c2.2 4 5 7.5 8.2 10.7l12-7a40 40 0 0012.6 7.3c4-4.1 7.3-8.8 9.7-13.8a59 59 0 01-40-14l-7.7 4.4c1.2 4.3 3 8.5 5.2 12.4zm46.2-80c-4.5 0-9 .5-13.4 1.7V34a40 40 0 00-12.5 7.2c1.5 5.7 4 10.8 7.1 15.4a59 59 0 0132.2-27.7V20a53.3 53.3 0 00-13.4-1.8z" />
+	<path fill="#00B4FF"
+		d="M178 9.2a62.6 62.6 0 11-.1 125.2A62.6 62.6 0 01178 9.2m0-9.2a71.7 71.7 0 100 143.5A71.7 71.7 0 00178 0z" />
+	<path fill="#050A14"
+		d="M96.6 212v4.3c-9.2-.8-15.4-5.8-15.4-17.8V180h4.6v18.4c0 8.6 4 12.6 10.8 13.5zm16-31.9v18.4c0 8.9-4.3 12.8-10.9 13.5v4.4c9.2-.7 15.5-5.6 15.5-18v-18.3h-4.7zM62.2 199v-2.2c0-12.7-8.8-17.4-21-17.4-12.1 0-20.7 4.7-20.7 17.4v2.2c0 12.8 8.6 17.6 20.7 17.6 1.5 0 3-.1 4.4-.3l11.8 6.2 2-3.3-8.2-4-6.4-3.1a32 32 0 01-3.6.2c-9.8 0-16-3.9-16-13.3v-2.2c0-9.3 6.2-13.1 16-13.1 9.9 0 16.3 3.8 16.3 13.1v2.2c0 5.3-2.1 8.7-5.6 10.8l4.8 2.4c3.4-2.8 5.5-7 5.5-13.2zM168 215.6h5.1L156 179.7h-4.8l17 36zM143 205l7.4-15.7-2.4-5-15.1 31.4h5.1l3.3-7h18.3l-1.8-3.7H143zm133.7 10.7h5.2l-17.3-35.9h-4.8l17 36zm-25-10.7l7.4-15.7-2.4-5-15.1 31.4h5.1l3.3-7h18.3l-1.7-3.7h-14.8zm73.8-2.5c6-1.2 9-5.4 9-11.4 0-8-4.5-10.9-12.9-10.9h-21.4v35.5h4.6v-31.3h16.5c5 0 8.5 1.4 8.5 6.7 0 5.2-3.5 7.7-8.5 7.7h-11.4v4.1h10.7l9.3 12.8h5.5l-9.9-13.2zm-117.4 9.9c-9.7 0-14.7-2.5-18.6-6.3l-2.2 3.8c5.1 5 11 6.7 21 6.7 1.6 0 3.1-.1 4.6-.3l-1.9-4h-3zm18.4-7c0-6.4-4.7-8.6-13.8-9.4l-10.1-1c-6.7-.7-9.3-2.2-9.3-5.6 0-2.5 1.4-4 4.6-5l-1.8-3.8c-4.7 1.4-7.5 4.2-7.5 8.9 0 5.2 3.4 8.7 13 9.6l11.3 1.2c6.4.6 8.9 2 8.9 5.4 0 2.7-2.1 4.7-6 5.8l1.8 3.9c5.3-1.6 8.9-4.7 8.9-10zm-20.3-21.9c7.9 0 13.3 1.8 18.1 5.7l1.8-3.9a30 30 0 00-19.6-5.9c-2 0-4 .1-5.7.3l1.9 4 3.5-.2z" />
+	<path fill="#00B4FF"
+		d="M.5 251.9c29.6-.5 59.2-.8 88.8-1l88.7-.3 88.7.3 44.4.4 44.4.6-44.4.6-44.4.4-88.7.3-88.7-.3a7981 7981 0 01-88.8-1z" />
+	<path fill="none" d="M-565.2 324H-252v15.8h-313.2z" />
+</svg>

package/src/components/core/UDialogStd.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed, ref } from 'vue'
+import UBtnStd from './UBtnStd.vue'
 
 const props = defineProps({
   heading: {
@@ -52,15 +53,21 @@ const headerClass = computed(() => {
         <div class="heading-wrapper row">
           <div class="flex items-center dialog-heading-container">
             <div v-if="leftIcon">
-              <q-icon
-                class="icon-back"
-                :class="leftIcon"
-                size="1.5rem"
-                @click="handleBackClick()"
+              <UBtnStd
                 tabindex="0"
+                class="dialog-action-icons"
+                :flat="true"
                 :aria-label="leftIconLabel"
+                @click="handleBackClick()"
               >
-              </q-icon>
+                <q-icon
+                  class="icon-back"
+                  :class="leftIcon"
+                  size="1.5rem"
+                  @click="handleBackClick()"
+                  :aria-label="leftIconLabel"
+                />
+              </UBtnStd>
             </div>
             <div class="col">
               <div>
@@ -75,17 +82,23 @@ const headerClass = computed(() => {
               </div>
             </div>
           </div>
-          <q-icon
-            v-if="closeIcon"
-            class="icon-close"
-            :class="closeIcon"
-            size="1.5rem"
-            @click="dialogRef.hide()"
-            tabindex="0"
+          <UBtnStd
+            class="dialog-action-icons"
+            :flat="true"
             :aria-label="closeIconLabel"
-            :aria-hidden="false"
+            tabindex="0"
+            @click="dialogRef.hide()"
           >
-          </q-icon>
+            <q-icon
+              v-if="closeIcon"
+              class="icon-close"
+              :class="closeIcon"
+              size="1.5rem"
+              @click="dialogRef.hide()"
+              :aria-label="closeIconLabel"
+              :aria-hidden="false"
+            />
+          </UBtnStd>
         </div>
         <div class="row">
           <slot name="secondary_row"></slot>
@@ -174,6 +187,7 @@ const headerClass = computed(() => {
   justify-content: space-between
   flex-wrap: nowrap
   margin-bottom: $ba
+  align-items: center
 
 .icon-close
   color: $neutral-9
@@ -199,4 +213,13 @@ const headerClass = computed(() => {
   gap: $xs
   .q-btn
     margin: 0 !important
+
+.q-btn.dialog-action-icons
+  padding: 0px 0px !important
+  min-width: 0px !important
+  min-height: 0px !important
+  height: auto !important
+
+  .q-focus-helper
+    background: transparent !important
 </style>

package/src/components/core/UTableStd.vue

@@ -147,9 +147,7 @@ const isRowSelected = (row) => {
   } else {
     return computed({
       get: () => {
-        let dataLength = props.virtualScroll
-          ? pagination.value.rowsPerPage
-          : props.rows.length
+        let dataLength = props.rows.length
         return selectedRows.value.length === dataLength
           ? true
           : selectedRows.value.length === 0
@@ -160,23 +158,11 @@ const isRowSelected = (row) => {
         if (value !== null) {
           selectedRows.value.splice(0, selectedRows.value.length)
         } else {
-          if (props.virtualScroll) {
             handleSelectAllData().then((res) => {
               if (res === 200) {
                 customLoading.value = false
               }
             })
-          } else {
-            props.rows.forEach((element) => {
-              if (
-                selectedRows.value.findIndex(
-                  (item) => item._id === element._id
-                ) === -1
-              ) {
-                selectedRows.value.push(element)
-              }
-            })
-          }
         }
       },
     })
@@ -189,7 +175,7 @@ const handleSelectAllData = () => {
   return new Promise((resolve, reject) => {
     let index = 0
     function processChunk() {
-      if (index >= pagination.value.rowsPerPage) {
+      if (index >= rows.value.length) {
         resolve(200)
         return
       }

package/src/components/index.js

@@ -16,7 +16,9 @@ import UAvatarGroup from './core/UAvatarGroup.vue'
 import UBadgeStd from './core/UBadgeStd.vue'
 import UBtnIcon from './core/UBtnIcon.vue'
 import UChip from './core/UChip.vue'
+import UInputPhoneStd from './core/UInputPhoneStd.vue'
 import UInputTextStd from './core/UInputTextStd.vue'
+import UDialogStd from './core/UDialogStd.vue'
 import URadioBtn from './core/URadioBtn.vue'
 
 import { useNotify } from '../composables/useNotify.js'
@@ -42,4 +44,6 @@ export {
   URadioBtn,
   UTableStd,
   useNotify,
+  UDialogStd,
+  UInputPhoneStd,
 }

package/src/css/app.sass

@@ -0,0 +1,156 @@
+@import './vars/colors.variables'
+@import './colors'
+@import './typography'
+@import 'flag-icons/css/flag-icons.min'
+
+// @import './media'
+
+*
+  font-family: 'neue-haas-grotesk-text', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'
+
+//FOCUS CLASSES
+
+.focus-primary
+    &:focus
+        box-shadow: 0 0 0 2px rgba(35, 75, 169, .20)
+
+.focus-positive
+    &:focus
+        box-shadow: 0 0 0 2px rgba(36, 133, 96, .20)
+
+.focus-warning
+    &:focus
+        box-shadow: 0 0 0 2px rgba(254, 78, 17, .20)
+
+.focus-accent
+    &:focus
+        box-shadow: 0 0 0 2px rgba(203, 42, 61, .20)
+
+.focus-info
+    &:focus
+        box-shadow: 0 0 0 2px rgba(92, 74, 184, .20)
+
+.focus-neutral
+    &:focus
+        box-shadow: 0 0 0 2px rgba(220, 225, 233, .20)
+
+//Shadow CLASSES
+
+.shadow-1
+    box-shadow: 0px 0px 4px 0px rgba(16, 17, 20, 0.08)
+
+.shadow-2
+    box-shadow: 0px 0px 8px 0px rgba(16, 17, 20, 0.12)
+
+.shadow-3
+    box-shadow: 0px 12px 12px 0px rgba(16, 17, 20, 0.16)
+
+.shadow-4
+    box-shadow: 0px 0px 16px 0px rgba(16, 17, 20, 0.20)
+
+.shadow-down-1
+    box-shadow: 0px 2px 2px 0px rgba(16, 17, 20, 0.04)
+
+.shadow-down-2
+    box-shadow: 0px 4px 4px 0px rgba(16, 17, 20, 0.08)
+
+.shadow-down-3
+    box-shadow: 0px 8px 8px 0px rgba(16, 17, 20, 0.12)
+
+.shadow-down-4
+    box-shadow: 0px 12px 12px 0px rgba(16, 17, 20, 0.16)
+
+.shadow-up-1
+    box-shadow: 0px -2px 2px 0px rgba(16, 17, 20, 0.04)
+
+.shadow-up-2
+    box-shadow: 0px -4px 4px 0px rgba(16, 17, 20, 0.08)
+
+.shadow-up-3
+    box-shadow: 0px -8px 8px 0px rgba(16, 17, 20, 0.12)
+
+.shadow-up-4
+    box-shadow: 0px -12px 12px 0px rgba(16, 17, 20, 0.16)
+
+
+// NOTIFY Custom CLASSES
+
+.u-notify
+  width: 25.25rem
+  min-height: $xxl
+  border-radius: $xs
+  padding: $sm $sm $xs $sm
+  box-shadow: 0px 0px 8px 0px rgba(16, 17, 20, 0.12)
+
+  .q-notification__actions
+    padding: 0rem 0.5rem
+
+  .q-notification__progress
+    width: 25.25rem
+    bottom: -0.5rem
+    border-radius: 0rem 0.25rem
+    height: 0.25rem
+
+  .q-notification__content
+    .q-icon
+      margin-right: $xs
+
+  .q-notification__message
+    padding: 0rem
+    > div:first-child
+      font-size: 0.875rem
+      font-weight: 500
+      line-height: 1.25rem
+      letter-spacing: 0.03333rem
+
+    .q-notification__caption
+      font-size: 0.75rem
+      font-weight: 400
+      line-height: 1.25rem
+      letter-spacing: 0.01786rem
+
+.u-notify-action-button
+  height: $lg
+  min-width: 5.5rem
+  padding: 0rem $ba
+  border-radius: $xs
+
+.u-notify-action-icon
+  background: transparent !important
+
+.u-action-icon-positive
+  .q-icon
+    color: $positive
+.u-action-icon-info
+  .q-icon
+    color: $info
+.u-action-icon-warning
+  .q-icon
+    color: $warning
+.u-action-icon-accent
+  .q-icon
+    color: $accent
+
+.u-type-positive
+  background: $green-2 !important
+  color: $green-7 !important
+  .q-btn
+    background: $positive
+
+.u-type-info
+  background: $purple-1 !important
+  color: $purple-7 !important
+  .q-btn
+    background: $info
+
+.u-type-warning
+  background: $orange-1 !important
+  color: $orange-7 !important
+  .q-btn
+    background: $warning
+
+.u-type-accent
+  background: $red-1 !important
+  color: $red-7 !important
+  .q-btn
+    background: $accent

package/src/css/colors.sass

@@ -0,0 +1,89 @@
+
+// GOLD TEXT
+.text-gold-1
+  color: $gold-1 !important
+.text-gold-2
+  color: $gold-2 !important
+.text-gold-3
+  color: $gold-3 !important
+.text-gold-4
+  color: $gold-4 !important
+.text-gold-5
+  color: $gold-5 !important
+.text-gold-6
+  color: $gold-6 !important
+.text-gold-7
+  color: $gold-7 !important
+.text-gold-8
+  color: $gold-8 !important
+.text-gold-9
+  color: $gold-9 !important
+
+// GOLD BACKGROUND
+.bg-gold-1
+  background-color: $gold-1 !important
+.bg-gold-2
+  background-color: $gold-2 !important
+.bg-gold-3
+  background-color: $gold-3 !important
+.bg-gold-4
+  background-color: $gold-4 !important
+.bg-gold-5
+  background-color: $gold-5 !important
+.bg-gold-6
+  background-color: $gold-6 !important
+.bg-gold-7
+  background-color: $gold-7 !important
+.bg-gold-8
+  background-color: $gold-8 !important
+.bg-gold-9
+  background-color: $gold-9 !important
+
+
+// NEUTRAL TEXT
+.text-neutral-1
+  color: $neutral-1 !important
+.text-neutral-2
+  color: $neutral-2 !important
+.text-neutral-3
+  color: $neutral-3 !important
+.text-neutral-4
+  color: $neutral-4 !important
+.text-neutral-5
+  color: $neutral-5 !important
+.text-neutral-6
+  color: $neutral-6 !important
+.text-neutral-7
+  color: $neutral-7 !important
+.text-neutral-8
+  color: $neutral-8 !important
+.text-neutral-9
+  color: $neutral-9 !important
+
+// RED TEXT
+.text-red-5
+  color: $red-5 !important
+
+// NEUTRAL BACKGROUND
+.bg-neutral-1
+  background-color: $neutral-1 !important
+.bg-neutral-2
+  background-color: $neutral-2 !important
+.bg-neutral-3
+  background-color: $neutral-3 !important
+.bg-neutral-4
+  background-color: $neutral-4 !important
+.bg-neutral-5
+  background-color: $neutral-5 !important
+.bg-neutral-6
+  background-color: $neutral-6 !important
+.bg-neutral-7
+  background-color: $neutral-7 !important
+.bg-neutral-8
+  background-color: $neutral-8 !important
+.bg-neutral-9
+  background-color: $neutral-9 !important
+
+//BLUE BACKGROUND
+.bg-blue-1
+  background-color: $blue-1 !important

package/src/css/media.sass

@@ -0,0 +1 @@
+

package/src/css/quasar.variables.sass

@@ -0,0 +1,114 @@
+// Quasar Sass (& SCSS) Variables
+// --------------------------------------------------
+// To customize the look and feel of this app, you can override
+// the Sass/SCSS variables found in Quasar's source Sass/SCSS files.
+
+// Check documentation for full list of Quasar variables
+
+// Your own variables (that are declared here) and Quasar's own
+// ones will be available out of the box in your .vue/.scss/.sass files
+
+// It's highly recommended to change the default colors
+// to match your app's branding.
+// Tip: Use the "Theme Builder" on Quasar's documentation website.
+
+@import 'vars/colors.variables'
+$primary   : #234BA9
+$secondary : #143066
+$accent    : #CB2A3D
+
+$dark      : #101114
+$dark-page : #121212
+
+$positive  : #248560
+$negative  : #CB2A3D
+$info      : #5C4AB8
+$warning   : #D33809
+
+$description: #566176
+
+$surface-bg-1: #FFFFFF
+
+// USSSA TYPOGRAPHY RESET
+$h1:        (size: 4.063rem, line-height: 5.079rem,   letter-spacing: .35px, weight: 700) !default
+$h2:        (size: 2.5rem,   line-height: 3.125rem,   letter-spacing: .35px, weight: 700) !default
+$h3:        (size: 1.5rem,   line-height: 1.875rem,   letter-spacing: .35px, weight: 700) !default
+$h4:        (size: 1.25rem,  line-height: 1.563rem,   letter-spacing: .35px, weight: 700) !default
+
+// QUASAR DEFAULTS
+$h5:        (size: 1.5rem,   line-height: 2rem,     letter-spacing: normal,    weight: 700) !default
+$h6:        (size: 1.25rem,  line-height: 2rem,     letter-spacing: .0125em,   weight: 700) !default
+
+// USSSA CUSTOM
+$h1-md: (size: 3.00rem , line-height: 3.75rem, letter-spacing: .35px, weight: bold) !default
+$h1-sm: (size: 2.50rem , line-height: 3.44rem, letter-spacing: .35px, weight: bold) !default
+
+$h2-md: (size: 2.25rem , line-height: 2.813rem, letter-spacing: .35px, weight: bold) !default
+$h2-sm: (size: 2.00rem , line-height: 2.50rem, letter-spacing: .35px, weight: bold) !default
+
+$h3-md: (size: 1.375rem , line-height: 1.719rem, letter-spacing: .35px, weight: bold) !default
+$h3-sm: (size: 1.250rem , line-height: 1.563rem, letter-spacing: .35px, weight: bold) !default
+
+$h4-md: (size: 1.125rem , line-height: 1.406rem, letter-spacing: .35px, weight: bold) !default
+$h4-sm: (size: 1.00rem , line-height: 1.25rem, letter-spacing: .35px, weight: bold) !default
+
+
+// DESKTOP
+$caption-lg:    (size: 1rem,    line-height: 1.25rem,   letter-spacing: .03333rem, font-weight: 500) !default
+$caption-md:    (size: 0.875rem,  line-height: 1.25rem, letter-spacing: .03333rem, font-weight: 500) !default
+$caption-sm:    (size: 0.75rem,    line-height: 1.25rem,   letter-spacing: .03333rem, font-weight: 500) !default
+$caption-xs:    (size: 0.688rem,  line-height: 1.25rem, letter-spacing: .03333rem, font-weight: 500) !default
+
+$body-xl:   (size: 1.25rem, line-height: 2.5rem,   letter-spacing: .03215rem,  weight: 400) !default
+$body-lg:   (size: 1.125rem, line-height: 1.75rem,   letter-spacing: .03215rem,  weight: 400) !default
+$body-md:   (size: 1.00rem, line-height: 1.5rem,   letter-spacing: .01786rem,  weight: 400) !default
+$body-sm:   (size: 0.875rem, line-height: 1.5rem,   letter-spacing: .01786rem,  weight: 400) !default
+$body-xs:   (size: 0.75rem, line-height: 1.25rem,   letter-spacing: .01786rem,  weight: 400) !default
+$body-xxs:   (size: 0.688rem, line-height: 1.25rem,   letter-spacing: .01786rem,  weight: 400) !default
+
+$overline-lg:    (size: 1.00rem,  line-height: 1.50rem,    letter-spacing: .53px,  weight: 500) !default
+$overline-md:    (size: 0.875rem,  line-height: 2rem,    letter-spacing: .53px,  weight: 500) !default
+$overline-sm:    (size: 0.75rem,  line-height: 2rem,    letter-spacing: .53px,  weight: 500) !default
+$overline-xs:    (size: 0.688rem,  line-height: 2rem,   letter-spacing: .53px,  weight: 500) !default
+
+// VARIABLE ASSIGNMENT
+$headings: ('h1': $h1, 'h1-md': $h1-md, 'h1-sm': $h1-sm, 'h2': $h2, 'h2-md': $h2-md, 'h2-sm': $h2-sm, 'h3': $h3, 'h3-md': $h3-md, 'h3-sm': $h3-sm, 'h4': $h4, 'h4-md': $h4-md, 'h4-sm': $h4-sm, 'h5': $h5, 'h6': $h6, 'body-xl': $body-xl, 'body-lg': $body-lg, 'body-md': $body-md, 'body-sm': $body-sm, 'body-xs': $body-xs, 'body-xxs': $body-xxs, 'overline-lg': $overline-lg, 'overline-md': $overline-md, 'overline-sm': $overline-sm,'overline-xs': $overline-xs, 'caption-lg': $caption-lg, 'caption-md': $caption-md, 'caption-sm': $caption-sm, 'caption-xs': $caption-xs) !default
+
+// SPACING BASE
+$space-base   : 1rem !default
+$space-x-base : $space-base !default
+$space-y-base : $space-base !default
+
+// SPACING SINGLE VARIABLES
+$xxs  : $space-base * .25 !default
+$xs   : $space-base * .5 !default
+$sm   : $space-base * .75 !default
+$ms   : $space-base * 1.5 !default
+$ba   : $space-base * 1 !default
+$md   : $space-base * 2 !default
+$lg   : $space-base * 2.5 !default
+$xl   : $space-base * 3 !default
+$xxl  : $space-base * 3.375 !default
+
+// SPACING VARIABLES FOR QUASAR SPACING UTILITY CLASSES
+$space-none : (x: 0, y: 0) !default
+$space-xxs   : (x: ($space-x-base * .25), y: ($space-y-base * .25)) !default
+$space-xs   : (x: ($space-x-base * .5), y: ($space-y-base * .5)) !default
+$space-sm   : (x: ($space-x-base * .75), y: ($space-y-base * .5)) !default
+$space-ms   : (x: ($space-x-base * 1.5), y: ($space-y-base * 1.5)) !default
+$space-ba : (x: ($space-x-base * 1), y: ($space-y-base * 1)) !default
+$space-md   : (x: $space-x-base * 2, y: $space-y-base * 2) !default
+$space-lg   : (x: ($space-x-base * 2.5), y: ($space-y-base * 2.5)) !default
+$space-xl   : (x: ($space-x-base * 3), y: ($space-y-base * 3)) !default
+$space-xxl   : (x: ($space-x-base * 3.375), y: ($space-y-base * 3.375)) !default
+
+$spaces: ('none': $space-none, 'xxs': $space-xxs, 'xs': $space-xs, 'sm': $space-sm, 'ms': $space-ms, 'ba': $space-ba, 'md': $space-md, 'lg': $space-lg, 'xl': $space-xl, 'xxl': $space-xxl) !default
+
+//Shadow variables
+
+$shadow-inner: 0px 0px 1px 1px rgb(16, 17, 20, .12) inset
+$shadow-skeumorphic-primary: 0px 1px 0.4px 0px rgba(136, 136, 138, 0.40) inset, 0px -1px 0.4px 0px rgba(16, 17, 20, 0.40) inset, 0px 4px 10px 0px rgba(16,17,20,0.00), 0px 0px 0px 1px rgb(35,75,169)
+$stroke-skeuomorphic: 1px solid rgba(255, 255, 255, 0.12)
+$shadow-2: 0px 0px 8px 0px rgba(16, 17, 20, 0.12)
+
+$accent-bg-hover: rgba(203, 42, 61, 0.15)

package/src/css/typography.sass

@@ -0,0 +1,34 @@
+.text-heading-xxxl
+  font-size: 3rem
+  line-height: 3.75rem
+
+.text-heading-xxl
+  font-size: 2.5rem
+  line-height: 3.125rem
+
+.text-heading-xl
+  font-size: 2rem
+  line-height: 2.5rem
+
+.text-heading-lg
+  font-size: 1.75rem
+  line-height: 2.188rem
+
+.text-heading-md
+  font-size: 1.5rem
+  line-height: 1.875rem
+
+.text-heading-sm
+  font-size: 1.25rem
+  line-height: 2rem
+  letter-spacing: 0
+  font-weight: 700
+
+.text-heading-xs
+  font-size: 1.125rem
+  line-height: 1.406rem
+
+.text-heading-xxs
+  font-size: 1rem
+  line-height: 1.5rem
+