@usssa/component-library 1.0.0-alpha.4 → 1.0.0-alpha.40

package/src/css/colors.sass

@@ -0,0 +1,101 @@
+
+// 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
+
+
+//USSSA Description content color
+.text-description
+  color: $description
+
+.bg-description
+  background-color: $description
+
+//USSSA Surface background color
+.bg-surface-bg-1
+  background-color: $surface-bg-1

package/src/css/media.sass

@@ -0,0 +1 @@
+

package/src/css/quasar.variables.sass

@@ -0,0 +1,119 @@
+// 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
+
+// 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, weight: 500) !default
+$caption-md: (size: 0.875rem,  line-height: 1.25rem, letter-spacing: .03333rem, weight: 500) !default
+$caption-sm: (size: 0.75rem,    line-height: 1.25rem,   letter-spacing: .03333rem, weight: 500) !default
+$caption-xs: (size: 0.688rem,  line-height: 1.25rem, letter-spacing: .03333rem, 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
+
+$heading-xxxl:   (size: 3rem,    line-height: 3.75rem,   letter-spacing: -0.0156rem, weight: 700) !default
+$heading-xxl:    (size: 2.5rem,  line-height: 3.125rem, letter-spacing: 0rem, weight: 700) !default
+$heading-xl:    (size: 2.0rem,    line-height: 2.5rem,   letter-spacing: 0rem, weight: 700) !default
+$heading-lg:    (size: 1.75rem,  line-height: 2.188rem, letter-spacing: .00714rem, weight: 700) !default
+$heading-md:    (size: 1.5rem,  line-height: 1.875rem, letter-spacing: .00714rem, weight: 700) !default
+$heading-sm:    (size: 1.25rem,  line-height: 2rem, letter-spacing: 0rem, weight: 700) !default
+$heading-xs:    (size: 1.125rem,  line-height: 1.406rem, letter-spacing: .0125rem, weight: 700) !default
+$heading-xxs:    (size: 1.0rem,  line-height: 1.5rem, letter-spacing: .0125rem, weight: 700) !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, 'heading-xxxl': $heading-xxxl, 'heading-xxl':$heading-xxl,'heading-xl':$heading-xl,'heading-lg':$heading-lg,'heading-md':$heading-md,'heading-sm':$heading-sm,'heading-xs':$heading-xs,'heading-xxs': $heading-xxs) !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)
+$surface-bg-link-hover :rgba(16, 17, 20, .5)

package/src/css/vars/colors.variables.sass

@@ -0,0 +1,126 @@
+// USSSA BLUE
+$blue-1: #E1E9F9 !default
+$blue-2: #CADBF9 !default
+$blue-3: #678BE0 !default
+$blue-4: #4571D9 !default
+$blue-5: #2A5ACB !default
+$blue-6: #234BA9 !default
+$blue-7: #183477 !default
+$blue-8: #143066 !default
+$blue-9: #0D2044 !default
+
+// USSSA GOLD
+$gold-1: #FBF6EE !default
+$gold-2: #EEEAD3 !default
+$gold-3: #DED5AA !default
+$gold-4: #C5B16A !default
+$gold-5: #AC8D46 !default
+$gold-6: #93723B !default
+$gold-7: #775631 !default
+$gold-8: #64482F !default
+$gold-9: #312017 !default
+
+// USSSA GREEN
+$green-1: #EFFAF4 !default
+$green-2: #D9F2E3 !default
+$green-3: #85D0AD !default
+$green-4: #53B48A !default
+$green-5: #248560 !default
+$green-6: #1A6248 !default
+$green-7: #174E3A !default
+$green-8: #144031 !default
+$green-9: #0A241C !default
+
+// USSSA NEUTRAL
+$neutral-1: #FFFFFF !default
+$neutral-2: #F5F7F9 !default
+$neutral-3: #EBEFF3 !default
+$neutral-4: #DCE1E9 !default
+$neutral-5: #CFD5E1 !default
+$neutral-6: #C2CAD9 !default
+$neutral-7: #929CB0 !default
+$neutral-8: #7D89A1 !default
+$neutral-9: #566176 !default
+$neutral-10: #3D4452 !default
+$neutral-11: #2E333D !default
+$neutral-12: #202328 !default
+$neutral-13: #101114 !default
+
+// USSSA ORANGE
+$orange-1: #FEEEEB !default
+$orange-2: #FEE0D7 !default
+$orange-3: #FDBEAA !default
+$orange-4: #FA6C3D !default
+$orange-5: #FE4C10 !default
+$orange-6: #F8430D !default
+$orange-7: #D33809 !default
+$orange-8: #8C3712 !default
+$orange-9: #542007 !default
+
+// USSSA PINK
+$pink-1: #FAE0F4 !default
+$pink-2: #EA99D8 !default
+$pink-3: #E067C6 !default
+$pink-4: #D945B9 !default
+$pink-5: #CB2AA8 !default
+$pink-6: #A9238C !default
+$pink-7: #771862 !default
+$pink-8: #661454 !default
+$pink-9: #440D38 !default
+
+// USSSA PURPLE
+$purple-1: #F0F2FD !default
+$purple-2: #CED3F7 !default
+$purple-3: #B0B6F1 !default
+$purple-4: #7B75DF !default
+$purple-5: #6B5AD1 !default
+$purple-6: #5C4AB8 !default
+$purple-7: #4B3F94 !default
+$purple-8: #403877 !default
+$purple-9: #262145 !default
+
+// USSSA RED
+$red-1: #FEF2F2 !default
+$red-2: #FCCCCE !default
+$red-3: #F9A8AB !default
+$red-4: #E94A50 !default
+$red-5: #CB2A3D !default
+$red-6: #B42126 !default
+$red-7: #951F23 !default
+$red-8: #7C2023 !default
+$red-9: #430C0E !default
+
+// USSSA TEAL
+$teal-1: #CCEDF5 !default
+$teal-2: #99DBEA !default
+$teal-3: #67CAE0 !default
+$teal-4: #45BED9 !default
+$teal-5: #2AAECB !default
+$teal-6: #2390A9 !default
+$teal-7: #186677 !default
+$teal-8: #145766 !default
+$teal-9: #0D3A44 !default
+
+// USSSA YELLOW
+$yellow-1: #FBF4D8 !default
+$yellow-2: #FFF5CC !default
+$yellow-3: #FBE589 !default
+$yellow-4: #FCDE62 !default
+$yellow-5: #F8D547 !default
+$yellow-6: #EBC321 !default
+$yellow-7: #D2AB0C !default
+$yellow-8: #B49104 !default
+$yellow-9: #8C7000 !default
+
+// USSSA RED TRANSPARENT
+$accent-transparent: rgba(203, 42, 61, .20)
+$accent-bg-hover: rgba(203, 42, 61, 0.15)
+
+// USSSA BLUE TRANSPARENT
+$primary-transparent: rgba(35, 75, 169, .20)
+$primary-bg-hover: rgba(35, 75, 169, .15)
+
+//USSSA Description content color
+$description : $neutral-9
+
+$surface-bg-1: #FFFFFF

package/src/layouts/MainLayout.vue

@@ -0,0 +1,177 @@
+<script setup>
+import { ref } from 'vue'
+
+defineOptions({
+  name: 'MainLayout',
+})
+
+const components = [
+  {
+    title: 'Address Lookup',
+    path: '/address-lookup',
+  },
+  {
+    title: 'Advanced Search',
+    path: '/advanced-search',
+  },
+  {
+    title: 'Avatar',
+    path: '/avatar',
+  },
+  {
+    title: 'Avatar Group',
+    path: '/avatar-group',
+  },
+  {
+    title: 'Badge',
+    path: '/badge',
+  },
+  {
+    title: 'Banner',
+    path: '/banner',
+  },
+  {
+    title: 'Bread Crumbs',
+    path: '/bread-crumbs',
+  },
+  {
+    title: 'Button',
+    path: '/button-standard',
+  },
+  {
+    title: 'Button Icon',
+    path: '/button-icon',
+  },
+  {
+    title: 'Button Toggle',
+    path: '/button-toggle',
+  },
+  {
+    title: 'Checkbox',
+    path: '/check-box',
+  },
+  {
+    title: 'Chip',
+    path: 'chip',
+  },
+  {
+    title: 'Dialog',
+    path: 'dialog',
+  },
+  {
+    title: 'Drawer',
+    path: '/drawer',
+  },
+  {
+    title: 'Input Text',
+    path: 'input-text',
+  },
+  {
+    title: 'Input Phone',
+    path: 'input-phone',
+  },
+  {
+    title: 'Menu Dropdown',
+    path: 'menu-dropdown',
+  },
+  {
+    title: 'Menu Item',
+    path: 'menu-item',
+  },
+  {
+    title: 'Menu Button',
+    path: 'menu-button',
+  },
+  {
+    title: 'MultiSelect',
+    path: 'multiselect-standard',
+  },
+  {
+    title: 'Notify',
+    path: '/notify',
+  },
+  {
+    title: 'Pagination',
+    path: 'pagination',
+  },
+  {
+    title: 'Radio',
+    path: 'radio',
+  },
+  {
+    title: 'Radio Button',
+    path: 'radio-btn',
+  },
+  {
+    title: 'Select',
+    path: 'select',
+  },
+  {
+    title: 'Tabs',
+    path: '/tabs/home',
+  },
+  {
+    title: 'Tab Button',
+    path: '/tab-button',
+  },
+  {
+    title: 'Tooltip',
+    path: '/tooltip',
+  },
+  {
+    title: 'Toggle',
+    path: '/toggle',
+  },
+  {
+    title: 'Table',
+    path: '/table',
+  },
+  {
+    title: 'Inner Loader',
+    path: '/inner-loader',
+  },
+  {
+    title: 'Typeahead Dropdown Search',
+    path: '/typeahead-advance-search',
+  },
+  {
+    title: 'Overlay Loader',
+    path: '/overlay-loader',
+  },
+]
+
+const leftDrawerOpen = ref(true)
+</script>
+
+<template>
+  <q-layout view="hHh lpr fFf">
+    <q-header bordered>
+      <q-toolbar class="bg-primary">
+        <q-toolbar-title>USSSA Component Library</q-toolbar-title>
+      </q-toolbar>
+    </q-header>
+
+    <q-drawer v-model="leftDrawerOpen" bordered>
+      <q-list separator>
+        <q-item-label class="bg-grey-8 text-grey-3" header>
+          Select Component
+        </q-item-label>
+
+        <q-item
+          v-for="c of components.sort((a, b) => a.title.localeCompare(b.title))"
+          :key="c.title"
+          active-class="bg-info text-grey-1 text-weight-bold"
+          clickable
+          :to="c.path"
+        >
+          <q-item-section>
+            <q-item-label>{{ c.title }}</q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-drawer>
+    <q-page-container>
+      <router-view />
+    </q-page-container>
+  </q-layout>
+</template>