Change caps utility to match font-size

Author: ScopeyNZ

src/components/BaseButton.vue

@@ -170,7 +170,7 @@ export default {
     &-round {
       @apply py-2 px-4 rounded-full;
       & .button__content {
-        @apply small-caps;
+        @apply caps-xs;
       }
     }
   }

src/components/BaseDivider.vue

@@ -12,7 +12,7 @@ export default {
 
 <style lang="scss">
 .divider {
-  @apply flex items-center text-center tiny-caps text-gray-500;
+  @apply flex items-center text-center caps-xxs text-gray-500;
 
   &:before, &:after {
     content: '';

src/components/ChecCard/InnerBlock.vue

@@ -68,7 +68,7 @@ export default {
   @apply text-gray-600 text-sm leading-tight font-lato;
 
   &__title {
-    @apply small-caps mb-2 text-gray-500;
+    @apply caps-xs mb-2 text-gray-500;
   }
 }
 </style>

src/components/ChecDataPill.vue

@@ -34,7 +34,7 @@ export default {
 </script>
 <style lang="scss">
 .data-pill {
-  @apply py-1 px-2 rounded-full tiny-caps bg-white text-black border border-black;
+  @apply py-1 px-2 rounded-full caps-xxs bg-white text-black border border-black;
 
   &--news {
     @apply bg-gray-200 border-gray-200 text-gray-500;

src/components/ChecHeader.vue

@@ -63,13 +63,13 @@ export default {
   }
 
   &--card &__title {
-    @apply rounded-full tiny-caps bg-gray-200 px-2 py-1 text-gray-500;
+    @apply rounded-full caps-xxs bg-gray-200 px-2 py-1 text-gray-500;
   }
 
   &-inner {
     @apply flex items-center;
     &__label {
-      @apply small-caps;
+      @apply caps-xs;
       &:not(:last-child) {
         @apply pr-4;
       }

src/components/ChecLoading.vue

@@ -58,7 +58,7 @@ export default {
   }
 
   &__message {
-    @apply small-caps mt-2;
+    @apply caps-xs mt-2;
   }
 }
 

src/components/ChecPaginate.vue

@@ -184,7 +184,7 @@ export default {
 }
 
 %control-group {
-  @apply rounded-md bg-gray-500 p-2 text-white small-caps;
+  @apply rounded-md bg-gray-500 p-2 text-white caps-xs;
 }
 
 .chec-paginate {

src/components/ChecSegmentedButton.vue

@@ -62,7 +62,7 @@ export default {
 
 <style lang="scss">
 .segmented-btn {
-  @apply cursor-pointer bg-gray-200 px-3 py-1 rounded-sm text-gray-500 small-caps;
+  @apply cursor-pointer bg-gray-200 px-3 py-1 rounded-sm text-gray-500 caps-xs;
 
   &:disabled {
     @apply cursor-not-allowed opacity-50;

src/components/TextField.vue

@@ -212,7 +212,7 @@ export default {
   @apply relative;
 
   &__action-button {
-    @apply tiny-caps text-blue-500 float-right mt-1 cursor-pointer;
+    @apply caps-xxs text-blue-500 float-right mt-1 cursor-pointer;
   }
 
   &__label {
@@ -278,7 +278,7 @@ export default {
     // Alignment & spacing
     @apply absolute flex items-center h-full right-0 top-0 mx-4;
     // Default styles & colours
-    @apply cursor-default text-gray-500 tiny-caps;
+    @apply cursor-default text-gray-500 caps-xxs;
   }
 
   &--disabled {

src/stories/styles/typography.stories.mdx

@@ -18,14 +18,14 @@ import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
       template: `
         <div class="p-16 bg-gray-200 text-gray-500">
           <template v-for="size in sizes">
-            <div class="small-caps mt-8 mb-2">.text-{{ size }}</div>
+            <div class="caps-xs mt-8 mb-2">.text-{{ size }}</div>
             <div class="flex justify-center items-start" :class="\`text-\${size}\`">
               <div class="p-8 bg-white">
-                <div class="mb-2 small-caps text-gray-400">.font-normal</div>
+                <div class="mb-2 caps-xs text-gray-400">.font-normal</div>
                 Imagination will often carry us to worlds that never were, but without it we go nowhere.
               </div>
               <div class="ml-16 p-8 bg-white" :class="weight(size)">
-                <div class="mb-2 small-caps text-gray-400">.{{ weight(size) }}</div>
+                <div class="mb-2 caps-xs text-gray-400">.{{ weight(size) }}</div>
                 Imagination will often carry us to worlds that never were, but without it we go nowhere.
               </div>
             </div>
@@ -43,12 +43,12 @@ import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
     {{
       template: `
         <div class="p-16 bg-gray-200 text-gray-500 grid grid-cols-2 col-gap-16 row-gap-12">
-          <div class="p-8 bg-white small-caps">
-            <div class="mb-2 small-caps text-gray-400">.small-caps</div>
+          <div class="p-8 bg-white caps-xs">
+            <div class="mb-2 caps-xs text-gray-400">.caps-xs</div>
             Imagination will often carry us to worlds that never were, but without it we go nowhere.
           </div>
-          <div class="p-8 bg-white tiny-caps">
-            <div class="mb-2 small-caps text-gray-400">.tiny-caps</div>
+          <div class="p-8 bg-white caps-xxs">
+            <div class="mb-2 caps-xs text-gray-400">.caps-xxs</div>
             Imagination will often carry us to worlds that never were, but without it we go nowhere.
           </div>
         </div>