From be8543f696031722c3b38aeed1495c938ee99789 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephiescastle@users.noreply.github.com>
Date: Thu, 18 Jul 2024 16:56:36 -0700
Subject: [PATCH] moving text-subtitle to a Tailwind plugin so BlockTable and
 @apply without importing the typography CSS (#502)

---
 packages/common/src/scss/_typography.scss        | 16 +++++++++-------
 .../common/src/scss/components/_BlockTable.scss  |  5 ++++-
 packages/common/tailwind.config.ts               |  7 +++++++
 .../vue/src/components/BlockTable/BlockTable.vue |  4 ----
 4 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/packages/common/src/scss/_typography.scss b/packages/common/src/scss/_typography.scss
index 877dc44c..e464e878 100644
--- a/packages/common/src/scss/_typography.scss
+++ b/packages/common/src/scss/_typography.scss
@@ -188,13 +188,15 @@
     }
   }
 
-  .text-subtitle {
-    @apply font-secondary uppercase text-base leading-tight tracking-wider;
-  }
-
-  .text-subtitle-sm {
-    @apply font-secondary uppercase text-sm leading-tight tracking-wider;
-  }
+  // moved to a tailwind plugin in tailwind.config.js which allows us to @apply text-subtitle
+  // .text-subtitle {
+  //   @apply font-secondary uppercase text-base leading-tight tracking-wider;
+  // }
+
+  // moved to a tailwind plugin in tailwind.config.js which allows us to @apply text-subtitle
+  // .text-subtitle-sm {
+  //   @apply font-secondary uppercase text-sm leading-tight tracking-wider;
+  // }
 
   .text-body-lg {
     font-size: pxToRem(18); // Based on Tailwind's text-lg
diff --git a/packages/common/src/scss/components/_BlockTable.scss b/packages/common/src/scss/components/_BlockTable.scss
index aa0f09b4..303da010 100644
--- a/packages/common/src/scss/components/_BlockTable.scss
+++ b/packages/common/src/scss/components/_BlockTable.scss
@@ -1,3 +1,6 @@
+// needed to @extend .BlockText
+@import '@explorer-1/common/src/scss/components/BlockText';
+
 .BlockTable {
   table {
     @apply border-gray-light-mid border-t border-b border-collapse w-full;
@@ -8,7 +11,7 @@
   }
 
   th {
-    @apply p-3 lg:p-5 border-gray-light-mid border-b text-subtitle text-white text-left font-normal;
+    @apply p-3 lg:p-5 border-gray-light-mid border-b font-secondary uppercase text-base leading-tight tracking-wider text-white text-left font-normal;
   }
 
   tbody {
diff --git a/packages/common/tailwind.config.ts b/packages/common/tailwind.config.ts
index 81217979..439787a1 100644
--- a/packages/common/tailwind.config.ts
+++ b/packages/common/tailwind.config.ts
@@ -283,6 +283,13 @@ export default {
     require('@tailwindcss/forms'),
     plugin(({ addBase }) => {
       addBase({
+        // reusable typography classes TODO: write a more robust way to include most typography classes
+        '.text-subtitle': {
+          '@apply font-secondary uppercase text-base leading-tight tracking-wider': {}
+        },
+        '.text-subtitle-sm': {
+          '@apply font-secondary uppercase text-sm leading-tight tracking-wider': {}
+        },
         // www theme selectors
         ':root, .ThemeVariantLight': ThemeWww.default,
         '.ThemeVariantDark': ThemeWww.dark,
diff --git a/packages/vue/src/components/BlockTable/BlockTable.vue b/packages/vue/src/components/BlockTable/BlockTable.vue
index 45b8f251..d61a698e 100644
--- a/packages/vue/src/components/BlockTable/BlockTable.vue
+++ b/packages/vue/src/components/BlockTable/BlockTable.vue
@@ -65,9 +65,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import '@explorer-1/common/src/scss/typography';
-// required for @apply text-subtitle in _BlockTable.scss
-@import '@explorer-1/common/src/scss/components/BlockText';
-// required for @extend .BlockText in _BlockTable.scss
 @import '@explorer-1/common/src/scss/components/BlockTable';
 </style>