now builds all components as custom web components

src/assets/scss/_utilities.scss

@@ -326,6 +326,81 @@
   }
 }
 
+// Extends ///////////////
+%shadow {
+  text-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
+}
+
+
+%no-ul-list {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+
+  >li {
+    display: inline-block;
+    list-style-type: none;
+    margin: 0;
+  }
+}
+
+%container {
+  margin: 0 $gutter;
+  position: relative;
+
+  @include breakpoint(page-container) {
+    max-width: 81.875em;
+    margin: 0 auto;
+  }
+}
+
+// Font Smoothing ///////////////
+%font-smoothing-on {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+%font-smoothing-off {
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+}
+
+// utility classes
+
+%uids-component--center {
+  @include center(both);
+  display: block;
+  text-align: center;
+}
+
+%uids-component--flex-center {
+  @include center(both);
+  flex-flow: column nowrap;
+  text-align: center;
+
+  @include breakpoint(sm) {
+    padding: 1.5rem 0;
+  }
+}
+
+%uids-component--left {
+  text-align: left;
+  @include center(both);
+}
+
+%uids-component--flex-left {
+  flex-flow: column nowrap;
+  text-align: left;
+  width: 100%;
+  padding: 1.5rem 0;
+}
+
+
+/*****************
+ buttons should be moved into their own file and only imported
+ in button.vue, psuedobutton.vue, and card.vue
+******************/
+
 // Buttons
 
 @mixin bttn {
@@ -419,71 +494,6 @@
   }
 }
 
-// Extends ///////////////
-%shadow {
-  text-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
-}
-
-
-%no-ul-list {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-
-  >li {
-    display: inline-block;
-    list-style-type: none;
-    margin: 0;
-  }
-}
-
-%container {
-  margin: 0 $gutter;
-  position: relative;
-
-  @include breakpoint(page-container) {
-    max-width: 81.875em;
-    margin: 0 auto;
-  }
-}
-
-// Font Smoothing ///////////////
-%font-smoothing-on {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-%font-smoothing-off {
-  -webkit-font-smoothing: auto;
-  -moz-osx-font-smoothing: auto;
-}
-
-// utility classes
-
-%uids-component--center {
-  @include center(both);
-  display: block;
-  text-align: center;
-}
-
-%uids-component--flex-center {
-  @include center(both);
-  flex-flow: column nowrap;
-  text-align: center;
-
-  @include breakpoint(sm) {
-    padding: 1.5rem 0;
-  }
-}
-
-%uids-component--left {
-  text-align: left;
-  @include center(both);
-}
-
-%uids-component--flex-left {
-  flex-flow: column nowrap;
-  text-align: left;
-  width: 100%;
-  padding: 1.5rem 0;
-}
+/****************
+end of buttons
+****************/

src/components/alert/Alert.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import './alert.scss';
 import {computed} from 'vue';
 import {className} from '../utlity';
 
@@ -99,3 +98,7 @@ const classes = computed(() => {
     </button>
   </div>
 </template>
+
+<style scoped lang='scss'>
+ @use 'alert';
+</style>

src/components/banner/Banner.vue

@@ -101,6 +101,6 @@ const getHeadlineSettings = computed(() => {
   </div>
 </template>
 
-<style lang="scss">
-@import 'banner';
+<style scoped lang="scss">
+  @use 'banner';
 </style>

src/components/brand-bar/BrandBar.vue

@@ -59,3 +59,7 @@ export default {
     </div>
   </header>
 </template>
+
+<style scoped lang='scss'>
+  @use 'brand-bar';
+</style>

src/components/button/Button.vue

@@ -76,3 +76,7 @@ const classes = computed(() => {
     <slot name="icon"></slot>
   </a>
 </template>
+
+<style scoped lang='scss'>
+  @use 'button';
+</style>

src/components/button/PseudoButton.vue

@@ -53,3 +53,8 @@ const classes = computed(() => ({
     <i v-if="arrow" class="fas fa-arrow-right"></i>
   </div>
 </template>
+
+
+<style scoped lang='scss'>
+  @use 'button';
+</style>

src/components/callout/Callout.vue

@@ -28,3 +28,6 @@ const classes = computed(() => {
     <slot></slot>
   </div>
 </template>
+<style scoped lang='scss'>
+  @use 'callout';
+</style>

src/components/card/Card.vue

@@ -246,3 +246,7 @@ onMounted(() => {
     </div>
   </div>
 </template>
+
+<style scoped lang='scss'>
+  @use 'card';
+</style>

src/components/cta/Cta.vue

@@ -89,3 +89,6 @@ const buttonClasses = computed(() => {
     </footer>
   </div>
 </template>
+<style scoped lang='scss'>
+  @use 'cta';
+</style>

src/components/grid/Grid.vue

@@ -1,11 +1,3 @@
-<template>
-  <div :class="classes">
-    <div class="list-container__inner">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import './grid.scss'
 import { computed } from 'vue';
@@ -28,3 +20,15 @@ const classes = computed(() => {
   return classes;
 });
 </script>
+
+<template>
+  <div :class="classes">
+    <div class="list-container__inner">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped lang='scss'>
+  @use 'grid';
+</style>

src/components/grid/GridItem.vue

@@ -1,9 +1,13 @@
+<script setup lang="ts">
+import './grid.scss'
+</script>
+
 <template>
   <div class="grid__column">
     <slot></slot>
   </div>
 </template>
 
-<script setup lang="ts">
-import './grid.scss'
-</script>
+<style scoped lang='scss'>
+  @use 'grid';
+</style>

src/components/headline/Headline.vue

@@ -42,3 +42,8 @@ const getClasses = computed(() => ({
     <slot></slot>
   </component>
 </template>
+
+<style scoped lang='scss'>
+  @use 'headline';
+  @use 'headline-mixins';
+</style>

src/components/inline/Figure.vue

@@ -26,3 +26,6 @@ const classes = computed(() => {
     <figcaption>Erika Ernst</figcaption>
   </figure>
 </template>
+<style scoped lang='scss'>
+  @use 'inline';
+</style>

src/components/logo/Logo.vue

@@ -28,3 +28,6 @@ const props = defineProps({
     </a>
   </div>
 </template>
+<style scoped lang='scss'>
+  @use 'logo';
+</style>

src/components/media/Media.vue

@@ -61,3 +61,7 @@ const classes = computed(() => {
     </video>
   </div>
 </template>
+
+<style scoped lang='scss'>
+  @use 'media';
+</style>

src/components/stub/Stub.vue

@@ -44,3 +44,7 @@ const V3_COMPONENT_PATH = 'components/detail/';
     <template #icon ><i class='fas fa-arrow-right'></i></template>
   </uids-button>
 </template>
+
+<style scoped lang='scss'>
+  @use 'stub';
+</style>