@usssa/component-library 1.0.0-alpha.2 → 1.0.0-alpha.200

package/src/components/index.js

@@ -0,0 +1,91 @@
+// import BtnStd from "./BtnStd.vue";
+import UAvatar from './core/UAvatar.vue'
+import UAvatarGroup from './core/UAvatarGroup.vue'
+import UBadgeStd from './core/UBadgeStd.vue'
+import UBannerStd from './core/UBannerStd.vue'
+import UBreadCrumbs from './core/UBreadCrumbs.vue'
+import UBtnIcon from './core/UBtnIcon.vue'
+import UBtnStd from './core/UBtnStd.vue'
+import UBtnToggle from './core/UBtnToggle.vue'
+import UCheckboxStd from './core/UCheckboxStd.vue'
+import UChip from './core/UChip.vue'
+import UDate from './core/UDate.vue'
+import UDialogStd from './core/UDialogStd.vue'
+import UDrawer from './core/UDrawer/UDrawer.vue'
+import UExpansionStd from './core/UExpansionStd.vue'
+import UInnerLoader from './core/UInnerLoader.vue'
+import UInputAddressLookup from './core/UInputAddressLookup.vue'
+import UInputPhoneStd from './core/UInputPhoneStd.vue'
+import UInputTextStd from './core/UInputTextStd.vue'
+import UInputTypeaheadAdvanceSearch from './core/UInputTypeaheadAdvanceSearch.vue'
+import UMenuButtonStd from './core/UMenuButtonStd.vue'
+import UMenuDropdown from './core/UMenuDropdown.vue'
+import UMenuDropdownAdvancedSearch from './core/UMenuDropdownAdvancedSearch.vue'
+import UMenuItem from './core/UMenuItem.vue'
+import UMenuSearch from './core/UMenuSearch.vue'
+import UModal from './core/UModal.vue'
+import UMultiSelectStd from './core/UMultiSelectStd.vue'
+import UPagination from './core/UPagination.vue'
+import URadioBtn from './core/URadioBtn.vue'
+import URadioStd from './core/URadioStd.vue'
+import USelectStd from './core/USelectStd.vue'
+import USheet from './core/USheet.vue'
+import UStepper from './core/UStepper/UStepper.vue'
+import UTabBtnStd from './core/UTabBtnStd.vue'
+import UTableStd from './core/UTableStd.vue'
+import UTabsStd from './core/UTabsStd.vue'
+import UToggleStd from './core/UToggleStd.vue'
+import UToolbar from './core/UToolbar/UToolbar.vue'
+import UTooltip from './core/UTooltip.vue'
+import UTypeahead from './core/UTypeahead.vue'
+import UUploader from './core/UUploader.vue'
+
+import { useNotify } from '../composables/useNotify.js'
+import { useOverlayLoader } from '../composables/useOverlayLoader.js'
+import { useScreenType } from '../composables/useScreenType.js'
+
+export {
+  UAvatar,
+  UAvatarGroup,
+  UBadgeStd,
+  UBannerStd,
+  UBreadCrumbs,
+  UBtnIcon,
+  UBtnStd,
+  UBtnToggle,
+  UCheckboxStd,
+  UChip,
+  UDate,
+  UDialogStd,
+  UDrawer,
+  UExpansionStd,
+  UInnerLoader,
+  UInputAddressLookup,
+  UInputPhoneStd,
+  UInputTextStd,
+  UInputTypeaheadAdvanceSearch,
+  UMenuButtonStd,
+  UMenuDropdown,
+  UMenuDropdownAdvancedSearch,
+  UMenuItem,
+  UMenuSearch,
+  UModal,
+  UMultiSelectStd,
+  UPagination,
+  URadioBtn,
+  URadioStd,
+  USelectStd,
+  useNotify,
+  useOverlayLoader,
+  useScreenType,
+  USheet,
+  UStepper,
+  UTabBtnStd,
+  UTableStd,
+  UTabsStd,
+  UToggleStd,
+  UToolbar,
+  UTooltip,
+  UTypeahead,
+  UUploader,
+}

package/src/composables/useNotify.js

@@ -0,0 +1,79 @@
+import { useQuasar } from 'quasar'
+
+export const useNotify = () => {
+  const $q = useQuasar()
+
+  const handleGetActions = (data) => {
+    if (data.actionLabel) {
+      return [
+        {
+          label: data.actionLabel,
+          color: 'white',
+          noCaps: true,
+          unelevated: true,
+          class: 'u-notify-action-button',
+          handler: data.handler,
+        },
+      ]
+    } else {
+      return [
+        {
+          round: true,
+          color: 'white',
+          flat: true,
+          class: `u-notify-action-icon u-action-icon-${data.type}`,
+          icon: 'close',
+          handler: data.handler,
+        },
+      ]
+    }
+  }
+  /**
+   * it is chaing the custom icon with font awesome custom class
+   * @param {*} icon
+   */
+
+  // Adding class to Notification element to make it customizable
+  const handleGetCustomIcon = (icon, randomId) => {
+    setTimeout(() => {
+      let getNotificationElement = document.querySelector(
+        `.q-notification-elem-${randomId}`
+      )
+      if (getNotificationElement) {
+        let childElement = getNotificationElement.querySelector(
+          `.q-notification__wrapper .q-notification__content`
+        )
+        if (childElement.childNodes.length == 1) {
+          const iconEleHTML = `<i class='${icon}' aria-label='Custom Icon' style='height:24px; width:24px; font-size: 24px; margin-right: 8px' alt='Custom Icon Alt'></i>`
+          childElement.insertAdjacentHTML('afterbegin', iconEleHTML)
+        }
+      }
+    }, 100)
+  }
+
+  const notify = (props) => {
+    if (props.label && props.type) {
+      let randomId = Math.floor(100000 + Math.random() * 900000)
+      let notifyProps = {
+        type: props.type === 'accent' ? 'negative' : props.type,
+        message: props.label,
+        caption: props.message,
+        color: props.type,
+        timeout: props.timeout,
+        classes: `u-notify u-type-${props.type} q-notification-elem-${randomId} ${props?.altclasses}`,
+        position: props.position,
+        progress: props.progress,
+        icon: props.icon ? handleGetCustomIcon(props.icon, randomId) : null,
+        actions: handleGetActions(props),
+      }
+
+      $q.notify(notifyProps)
+    } else {
+      console.error(
+        'Error: Failed prop types: The props `label` and `type` are marked as required in Notify, but its values are `undefined'
+      )
+    }
+  }
+
+  return { notify }
+}

package/src/composables/useOverlayLoader.js

@@ -0,0 +1,23 @@
+import { Loading, QSpinnerGears } from 'quasar'
+
+export const useOverlayLoader = () => {
+
+    const showLoader = (props = {}) => {
+
+    Loading.show({
+        backgroundColor: props?.backgroundColor,
+        customClass: props.customClass ? props.customClass : '',
+        message: props?.message,
+        messageColor: props.messageColor ? props.messageColor: 'dark',
+        spinner: props.spinner ? props.spinner : QSpinnerGears,
+        spinnerSize: props.spinnerSize ? props.spinnerSize : '6rem',
+        spinnerColor: props?.spinnerColor
+    })
+   }
+
+  const hideLoader = () =>{
+   Loading.hide()
+  }
+
+  return { showLoader, hideLoader }
+}

package/src/composables/useScreenType.js

@@ -0,0 +1,30 @@
+import { computed, ref, watch } from 'vue'
+import { useQuasar } from 'quasar'
+
+export const useScreenType = () => {
+  const $q = useQuasar()
+
+  const getScreenType = () => {
+    if ($q.screen.xs) return 'mobile' // Extra small screens (phones)
+    if ($q.screen.sm) return 'tablet' // Small screens (tablets)
+    return 'desktop' // Default is desktop
+  }
+
+  const screenType = ref(getScreenType())
+
+  const screen = computed(() => ({
+    isDesktop: screenType.value === 'desktop',
+    isMobile: screenType.value === 'mobile',
+    isTablet: screenType.value === 'tablet',
+  }))
+
+  // Watch for Quasar's screen changes and update `screenType`
+  watch(
+    () => $q.screen.name,
+    () => {
+      screenType.value = getScreenType()
+    }
+  )
+
+  return screen
+}

package/src/css/app.sass

@@ -0,0 +1,168 @@
+@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
+      overflow-wrap: break-word
+
+    .q-notification__caption
+      font-size: 0.75rem
+      font-weight: 400
+      line-height: 1.25rem
+      letter-spacing: 0.01786rem
+      overflow-wrap: break-word
+
+.u-notify-action-button
+  height: $lg
+  min-width: 5.5rem
+  max-width: 6.5rem
+  padding: 0rem $ba
+  border-radius: $xs
+  overflow-wrap: break-word
+  .block
+    white-space: nowrap
+    width: 6.5rem
+    overflow: hidden
+    text-overflow: ellipsis
+
+.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
+
+.icon-secondary-opacity
+  --fa-secondary-opacity: 0.20

package/src/css/colors.sass

@@ -0,0 +1,103 @@
+
+// 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
+.text-neutral-10
+  color: $neutral-10 !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,150 @@
+// 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'
+
+// USSSA BRAND COLOR VALUES
+$primary: $blue-8
+$secondary: $blue-9
+$accent: $red-5
+$negative: $red-5
+$warning: $orange-7
+$positive: $green-6
+$info: $purple-6
+$dark: $neutral-13
+$white: $neutral-1
+$description: $neutral-9
+$transparent: rgb(0, 0, 0, .10)
+$dark-page: #121212
+
+// BG Hover variables
+$accent-bg-hover: rgb(203, 42, 61, .15)
+$primary-bg-hover: rgb(35, 75, 169, .15)
+
+// BODY
+$body-xl: (size: 1.25rem, line-height: 1.75rem, letter-spacing: .03215rem, weight: 400) !default
+$body-lg: (size: 1.125rem, line-height: 1.313rem, letter-spacing: .03215rem, weight: 400) !default
+$body-md: (size: 1.00rem, line-height: 1.188rem, letter-spacing: .01786rem, weight: 400) !default
+$body-sm: (size: 0.875rem, line-height: 1.188rem, letter-spacing: .01786rem, weight: 400) !default
+$body-xs: (size: 0.75rem, line-height: 1.063rem, letter-spacing: .01786rem, weight: 400) !default
+$body-xxs: (size: 0.688rem, line-height: 1.063rem, letter-spacing: .01786rem, weight: 400) !default
+
+// BORDER RADIUS
+$border-radius-xs: .25rem
+$border-radius-sm: .5rem
+
+// CAPTION
+$caption-lg: (size: 1rem, line-height: 1.063rem, letter-spacing: .03333rem, weight: 500) !default
+$caption-md: (size: 0.875rem, line-height: 1.063rem, letter-spacing: .03333rem, weight: 500) !default
+$caption-sm: (size: 0.75rem, line-height: 1.063rem, letter-spacing: .03333rem, weight: 500) !default
+$caption-xs: (size: 0.688rem, line-height: 1.063rem, letter-spacing: .03333rem, weight: 500) !default
+
+// OVERLINE
+$overline-lg: (size: 1.00rem, line-height: 1.50rem, letter-spacing: .53px, weight: 500) !default
+$overline-md: (size: 0.875rem, line-height: 1.5rem, letter-spacing: .03333px, weight: 500) !default
+$overline-sm: (size: 0.75rem, line-height: 1.5rem, letter-spacing: .03333px, weight: 500) !default
+$overline-xs: (size: 0.688rem, line-height: 1.5rem, letter-spacing: .03333px, weight: 500) !default
+
+// 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
+
+// HEADING
+$heading-xxxl: (size: 3rem, line-height: 5.25rem, letter-spacing: -0.0156rem, weight: 700) !default
+$heading-xxl: (size: 2.5rem, line-height: 3.281rem, letter-spacing: 0rem, weight: 700) !default
+$heading-xl: (size: 2.0rem, line-height: 2.734rem, letter-spacing: 0rem, weight: 700) !default
+$heading-lg: (size: 1.75rem, line-height: 1.75rem, letter-spacing: .00714rem, weight: 700) !default
+$heading-md: (size: 1.5rem, line-height: 1.5rem, letter-spacing: .00714rem, weight: 700) !default
+$heading-sm: (size: 1.25rem, line-height: 1.5rem, letter-spacing: 0rem, weight: 700) !default
+$heading-xs: (size: 1.125rem, line-height: 1.313rem, letter-spacing: .0125rem, weight: 700) !default
+$heading-xxs: (size: 1.0rem, line-height: 1.313rem, letter-spacing: .0125rem, weight: 700) !default
+
+// DISPLAY
+$display-xxxl: (size: 3.5rem, line-height: 3.5rem, letter-spacing: 0rem, weight: 500) !default
+$display-xxl: (size: 3rem, line-height: 3rem, letter-spacing: 0rem, weight: 500) !default
+$display-xl: (size: 2.5rem, line-height: 2.5rem, letter-spacing: 0rem, weight: 500) !default
+$display-lg: (size: 2rem, line-height: 2rem, letter-spacing: .00714rem, weight: 500) !default
+$display-md: (size: 1.5rem, line-height: 1.5rem, letter-spacing: .00714rem, weight: 500) !default
+$display-sm: (size: 1.25rem, line-height: 1.5rem, letter-spacing: 0rem, weight: 500) !default
+$display-xs: (size: 1.125rem, line-height: 1.313rem, letter-spacing: .0125rem, weight: 500) !default
+$display-xxs: (size: 1.0rem, line-height: 1.313rem, letter-spacing: .0125rem, weight: 500) !default
+
+$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, 'display-xxxl': $display-xxxl, 'display-xxl':$display-xxl,'display-xl':$display-xl,'display-lg':$display-lg,'display-md':$display-md,'display-sm':$display-sm,'display-xs':$display-xs,'display-xxs': $display-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 * .75)) !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)
+
+// Surface variables
+$surface-bg-1: $neutral-1
+$surface-bg-link-hover: rgba(16, 17, 20, .5)
+
+// Transparent variables
+$accent-transparent: rgba(203, 42, 61, .20)
+$primary-transparent: rgb(35, 75, 169, .20)
+
+// Others
+$bg-blue-1: #E1E9F9