moving text-subtitle to a Tailwind plugin so BlockTable and @apply wi…

…thout importing the typography CSS (#502)
nasa-jpl · Jul 18, 2024 · be8543f · be8543f
1 parent 59abf06
commit be8543f
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>