Adding an internal theme

README.md

@@ -148,6 +148,9 @@ Once your tooling and `tailwind.config.js` is set up, you can import SCSS files
 @import '@nasa-jpl/explorer-1/src/scss/polyfills';
 @import '@nasa-jpl/explorer-1/src/scss/animations';
 
+// Themes: include this if you want to use the internal theme colors
+@import '@nasa-jpl/explorer-1/src/scss/themes/internal';
+
 // Components: include all components
 // Alternative: cherry-pick from _components.scss and include only those that are needed
 @import '@nasa-jpl/explorer-1/src/scss/components';

src/scss/_typography-theme-colors.scss

@@ -0,0 +1,56 @@
+/* internal theme text styles
+ * kept in a separate scss file for easier use in components
+ * ex: import this file in a vue component to be able to @apply these classes
+ */
+
+/* Deprecation warning:
+ * .text-theme-red and .text-theme-red-hover are deprecated and will be removed in the next major release.
+ * Use .text-theme-color and .text-theme-color-hover instead.
+ */
+@layer utilities {
+  @responsive {
+    @variants hover {
+      .text-theme-color,
+      .text-theme-red {
+        @apply text-jpl-red;
+      }
+
+      .text-theme-color-hover,
+      .text-theme-red-hover {
+        @apply text-jpl-red-dark;
+      }
+    }
+
+    .ThemeLight {
+      .text-theme-color,
+      .text-theme-red,
+      .hover\:text-theme-color:hover,
+      .hover\:text-theme-red:hover {
+        @apply text-jpl-red;
+      }
+
+      .text-theme-color-hover,
+      .text-theme-red-hover,
+      .hover\:text-theme-color-hover:hover,
+      .hover\:text-theme-red-hover:hover {
+        @apply text-jpl-red-dark;
+      }
+    }
+
+    .ThemeDark {
+      .text-theme-color,
+      .text-theme-red,
+      .hover\:text-theme-color:hover,
+      .hover\:text-theme-red:hover {
+        @apply text-jpl-red-light;
+      }
+
+      .text-theme-color-hover,
+      .text-theme-red-hover,
+      .hover\:text-theme-color-hover:hover,
+      .hover\:text-theme-red-hover:hover {
+        @apply text-jpl-red;
+      }
+    }
+  }
+}

src/scss/_typography.scss

@@ -1,3 +1,5 @@
+@import 'typography-theme-colors';
+
 // typography styles
 html {
   @apply font-primary;
@@ -210,34 +212,6 @@ h5,
   }
 }
 
-@responsive {
-  @variants hover {
-    .text-theme-red {
-      @apply text-jpl-red;
-
-      .ThemeLight & {
-        @apply text-jpl-red;
-      }
-
-      .ThemeDark & {
-        @apply text-jpl-red-light;
-      }
-    }
-
-    .text-theme-red-hover {
-      @apply text-jpl-red-dark;
-
-      .ThemeLight & {
-        @apply text-jpl-red-dark;
-      }
-
-      .ThemeDark & {
-        @apply text-jpl-red;
-      }
-    }
-  }
-}
-
 // text readability class
 // use this in areas where text is overlaying an image
 // managed separately for the navigation since we can't @apply these classes there

src/scss/components/_BaseButton.scss

@@ -100,10 +100,8 @@
       @apply text-white;
     }
   }
-}
 
-.ThemeLight {
-  .BaseButton {
+  .ThemeLight & {
     &.-primary {
       @apply text-white bg-jpl-red to-jpl-red-dark-w50;
     }
@@ -117,10 +115,8 @@
       }
     }
   }
-}
 
-.ThemeDark {
-  .BaseButton {
+  .ThemeDark & {
     &.-primary {
       @apply text-white bg-jpl-red-light to-jpl-red-w50;
     }

src/scss/components/_BaseImageCaption.scss

@@ -7,18 +7,10 @@
     }
 
     a {
-      @apply text-jpl-red underline cursor-pointer;
+      @apply text-theme-color underline cursor-pointer;
 
       @include hover {
-        @apply text-jpl-red-dark;
-      }
-
-      .ThemeDark & {
-        @apply text-jpl-red-light;
-
-        @include hover {
-          @apply text-jpl-red-dark;
-        }
+        @apply text-theme-color-hover;
       }
     }
   }

src/scss/components/_BlockText.scss

@@ -1,9 +1,9 @@
 .BlockText {
   a {
-    @apply text-jpl-red underline cursor-pointer break-words;
+    @apply text-theme-color underline cursor-pointer break-words;
 
     @include hover {
-      @apply text-jpl-red-dark;
+      @apply text-theme-color-hover;
     }
   }
 

src/scss/styles.scss

@@ -16,5 +16,8 @@
 @import 'polyfills';
 @import 'animations';
 
+// themes
+@import 'themes/internal';
+
 // components
 @import 'components';

src/scss/themes/_internal-typography-theme-colors.scss

@@ -0,0 +1,61 @@
+/* internal theme text styles
+ * kept in a separate scss file for easier use in components
+ * ex: import this file in a vue component to be able to @apply these classes
+ */
+
+/* Deprecation warning:
+ * .text-theme-red and .text-theme-red-hover are deprecated and will be removed in the next major release.
+ * Use .text-theme-color and .text-theme-color-hover instead.
+ */
+
+@layer utilities {
+  @responsive {
+    .ThemeInternal {
+      .text-theme-color,
+      .text-theme-red,
+      .hover\:text-theme-color:hover,
+      .hover\:text-theme-red:hover {
+        @apply text-jpl-sky-blue-dark;
+      }
+
+      .text-theme-color-hover,
+      .text-theme-red-hover,
+      .hover\:text-theme-color-hover:hover,
+      .hover\:text-theme-red-hover:hover {
+        @apply text-jpl-sky-blue;
+      }
+
+      .ThemeLight {
+        .text-theme-color,
+        .text-theme-red,
+        .hover\:text-theme-color:hover,
+        .hover\:text-theme-red:hover {
+          @apply text-jpl-sky-blue-dark;
+        }
+
+        .text-theme-color-hover,
+        .text-theme-red-hover,
+        .hover\:text-theme-color-hover:hover,
+        .hover\:text-theme-red-hover:hover {
+          @apply text-jpl-sky-blue;
+        }
+      }
+
+      .ThemeDark {
+        .text-theme-color,
+        .text-theme-red,
+        .hover\:text-theme-color:hover,
+        .hover\:text-theme-red:hover {
+          @apply text-jpl-sky-blue;
+        }
+
+        .text-theme-color-hover,
+        .text-theme-red-hover,
+        .hover\:text-theme-color-hover:hover,
+        .hover\:text-theme-red-hover:hover {
+          @apply text-jpl-sky-blue-dark;
+        }
+      }
+    }
+  }
+}

src/scss/themes/_internal.scss

@@ -0,0 +1,44 @@
+@import 'internal-typography-theme-colors';
+
+@layer utilities {
+  .ThemeInternal {
+    .BaseButton {
+      &.-primary {
+        @apply bg-jpl-sky-blue-dark to-jpl-sky-blue-w50;
+      }
+
+      &.-secondary {
+        @apply text-jpl-sky-blue-dark border-jpl-sky-blue-dark to-jpl-sky-blue-w50;
+
+        @include hover {
+          @apply text-white border-jpl-sky-blue;
+        }
+      }
+
+      &.-dark {
+        @include hover {
+          @apply text-gray-dark;
+        }
+      }
+    }
+
+    .ThemeLight,
+    .ThemeDark,
+    &.ThemeLight,
+    &.ThemeDark {
+      .BaseButton {
+        &.-primary {
+          @apply bg-jpl-sky-blue-dark to-jpl-sky-blue-w50;
+        }
+
+        &.-secondary {
+          @apply text-jpl-sky-blue-dark border-jpl-sky-blue-dark to-jpl-sky-blue-w50;
+
+          @include hover {
+            @apply text-white border-jpl-sky-blue bg-jpl-sky-blue;
+          }
+        }
+      }
+    }
+  }
+}

storybook/preview.js

@@ -73,6 +73,11 @@ export const parameters = {
         class: 'ThemeDark',
         color: '#000000',
       },
+      {
+        name: 'ThemeInternal',
+        class: 'ThemeInternal',
+        color: '#53C8ED',
+      },
     ],
   },