removing tailwindcss themer

apps/vue-storybook/.storybook/preview.ts

@@ -68,11 +68,11 @@ const preview: Preview = {
 
   parameters: {
     controls: {
-      expanded: true
-      // matchers: {
-      //   color: /(background|color)$/i,
-      //   date: /Date$/
-      // }
+      expanded: true,
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/
+      }
     }
   },
 

apps/vue-storybook/tailwind.config.ts

@@ -7,8 +7,7 @@
 
 // import explorer 1's tailwind config
 import explorer1Config from '@explorer-1/common/tailwind.config'
-import plugin from 'tailwindcss/plugin'
-console.log(explorer1Config)
+
 export default {
   ...explorer1Config,
   content: ['stories/**/*', './node_modules/@explorer-1/vue/src/components/**/*.vue']

packages/common/package.json

@@ -10,7 +10,6 @@
     "@tailwindcss/forms": "^0.5.7",
     "stylelint": "^16.5.0",
     "stylelint-config-standard-scss": "^13.1.0",
-    "tailwindcss": "^3.4.3",
-    "tailwindcss-themer": "^4.0.0"
+    "tailwindcss": "^3.4.3"
   }
 }

packages/common/src/scss/components/_BaseButton.scss

@@ -108,34 +108,4 @@
       @apply text-white;
     }
   }
-
-  //   .ThemeVariantLight & {
-  //     &.-primary {
-  //       @apply text-white bg-theme-color to-theme-color-dark-w50;
-  //     }
-
-  //     &.-secondary {
-  //       @apply text-theme-color bg-transparent border-theme-color to-theme-color-dark-w50;
-
-  //       @include hover {
-  //         // including a bg color resolves pixelation inconsistencies between browsers
-  //         @apply text-white border-theme-color-dark bg-theme-color-dark;
-  //       }
-  //     }
-  //   }
-
-  //   .ThemeVariantDark & {
-  //     &.-primary {
-  //       @apply text-white bg-theme-color-light to-theme-color-w50;
-  //     }
-
-  //     &.-secondary {
-  //       @apply text-theme-color-light bg-transparent border-theme-color-light to-theme-color-w50;
-
-  //       @include hover {
-  //         // including a bg color resolves pixelation inconsistencies between browsers
-  //         @apply text-white border-theme-color bg-theme-color;
-  //       }
-  //     }
-  //   }
 }

packages/common/src/scss/styles.scss

@@ -23,29 +23,3 @@
 
 // components
 @import 'components';
-
-// $jpl-sky-blue: 0 128 164; // 0080A4
-// $jpl-sky-blue-light: red; // #00a0cc
-// $jpl-sky-blue-dark: 0 100 128; // #006480
-// $jpl-sky-blue-darker: 0 60 77; // #003c4d
-
-// // overrides for light and dark variants of the themes
-// .ThemeVariantDark.ThemeInternal {
-//   --colors-theme-color: purple;
-//   --colors-theme-color-light: fuchsia;
-//   --colors-theme-color-dark: brown;
-//   --colors-theme-color-darker: orange;
-//   --gradientColorStops-theme-color-dark-w50: red;
-//   --gradientColorStops-theme-color-darker-w50: green;
-//   --gradientColorStops-theme-color-light-w50: blue;
-// }
-
-// @layer base {
-//   :root {
-//     --colors-theme-color: @apply --colors-action-color;
-//     --colors-theme-color-light: foundationColors[ 'jpl-red-light'] --colors-theme-color-dark: foundationColors[
-//       'jpl-red-dark'] --gradientColorStops-theme-color-dark-w50: foundationColors[ 'jpl-red-dark'] --gradientColorStops-theme-color-darker-w50:
-//       foundationColors[ 'jpl-red-darker'] --gradientColorStops-theme-color-light-w50:
-//       foundationColors[ 'jpl-red-light'];
-//   }
-// }

packages/common/tailwind.config.ts

@@ -271,22 +271,22 @@ export default {
     require('@tailwindcss/forms'),
     plugin(({ addBase }) => {
       addBase({
-        // www theme
+        // www theme selectors
         ':root, .ThemeVariantLight': ThemeWww.default,
         '.ThemeVariantDark': ThemeWww.dark,
-        // edu theme
+        // edu theme selectors
         '.ThemeEdu, .ThemeEdu.ThemeVariantLight, .ThemeEdu .ThemeVariantLight': ThemeEdu.default,
         '.ThemeEdu .ThemeVariantDark, .ThemeEdu.ThemeVariantDark': ThemeEdu.dark,
-        // internal theme
+        // internal theme selectors
         '.ThemeInternal, .ThemeInternal.ThemeVariantLight, .ThemeInternal .ThemeVariantLight':
           ThemeInternal.default,
         '.ThemeInternal .ThemeVariantDark, .ThemeInternal.ThemeVariantDark': ThemeInternal.dark
       })
     })
   ],
-  safelist: ['ThemeVariantDark', 'ThemeVariantLight', 'ThemeEdu', 'ThemeInternal'],
   future: {
     hoverOnlyWhenSupported: true
   },
+  safelist: ['ThemeVariantLight', 'ThemeVariantDark'],
   content: []
 } satisfies Config

packages/vue/package.json

@@ -18,7 +18,6 @@
     "@tailwindcss/forms": "^0.5.7",
     "swiper": "^11.1.3",
     "tailwindcss": "^3.4.3",
-    "tailwindcss-themer": "^4.0.0",
     "vue": "^3.4.21"
   },
   "devDependencies": {

packages/vue/src/components/BaseButton/BaseButton.vue

@@ -107,7 +107,6 @@ export default defineComponent({
       <slot name="icon"></slot>
     </span>
   </component>
-  <span class="ThemeInternal ThemeEdu ThemeVariantLight ThemeVariantDark"></span>
 </template>
 <style lang="scss">
 @import '@explorer-1/common/src/scss/components/BaseButton';