Prototype design system theming

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nasa-jpl/explorer-1",
-  "version": "1.9.0",
+  "version": "2.0.0-alpha.edu.1",
   "description": "Packaged frontend assets for JPL's design system, Explorer 1",
   "author": "DesignLab",
   "repository": {

src/scss/components/_BaseButton.scss

@@ -18,18 +18,18 @@
   }
 
   &.-primary {
-    @apply px-12 text-white bg-jpl-red to-jpl-red-dark-w50;
+    @apply px-12 text-white bg-theme-color;
 
     & > .label {
       @apply border-2 border-transparent;
     }
   }
 
   &.-secondary {
-    @apply px-12 bg-transparent text-jpl-red border-2 border-jpl-red to-jpl-red-dark-w50;
+    @apply px-12 bg-transparent text-theme-color border-2 border-theme-color;
 
     @include hover {
-      @apply text-white border-jpl-red-dark;
+      @apply text-white border-theme-color-dark;
     }
   }
 
@@ -108,34 +108,4 @@
       @apply text-white;
     }
   }
-
-  .ThemeLight & {
-    &.-primary {
-      @apply text-white bg-jpl-red to-jpl-red-dark-w50;
-    }
-
-    &.-secondary {
-      @apply text-jpl-red bg-transparent border-jpl-red to-jpl-red-dark-w50;
-
-      @include hover {
-        // including a bg color resolves pixelation inconsistencies between browsers
-        @apply text-white border-jpl-red-dark bg-jpl-red-dark;
-      }
-    }
-  }
-
-  .ThemeDark & {
-    &.-primary {
-      @apply text-white bg-jpl-red-light to-jpl-red-w50;
-    }
-
-    &.-secondary {
-      @apply text-jpl-red-light bg-transparent border-jpl-red-light to-jpl-red-w50;
-
-      @include hover {
-        // including a bg color resolves pixelation inconsistencies between browsers
-        @apply text-white border-jpl-red bg-jpl-red;
-      }
-    }
-  }
 }

src/scss/components/_BlockImageCarousel.scss

@@ -43,7 +43,7 @@
 
       &.swiper-dot-active {
         > span {
-          @apply bg-jpl-red;
+          @apply bg-theme-color;
         }
       }
     }

src/scss/components/_BlockKeyPoints.scss

@@ -1,7 +1,7 @@
 .BlockKeyPoints {
   ul li {
     &::before {
-      @apply bg-jpl-red;
+      @apply bg-theme-color;
       @apply inline-block;
       @apply relative;
       @apply mr-4;

src/scss/components/_BlockQuote.scss

@@ -17,7 +17,7 @@
 
   > hr {
     max-width: 100px;
-    @apply border-t mx-auto border-jpl-red-light;
+    @apply border-t mx-auto border-theme-color-light;
 
     @screen lg {
       max-width: 120px;
@@ -26,7 +26,7 @@
 
   > .quote {
     line-height: 1.4; // custom
-    @apply font-primary italic text-xl font-medium py-4 text-jpl-red;
+    @apply font-primary italic text-xl font-medium py-4 text-theme-color;
 
     @screen lg {
       font-size: 1.875rem; // custom  // 30px
@@ -51,11 +51,11 @@
 .ThemeLight {
   .BlockQuote {
     > hr {
-      @apply border-jpl-red;
+      @apply border-theme-color;
     }
 
     > .quote {
-      @apply text-jpl-red;
+      @apply text-theme-color;
     }
 
     > div > div > .attribution-text {
@@ -67,7 +67,7 @@
 .ThemeDark {
   .BlockQuote {
     > hr {
-      @apply border-jpl-red-light;
+      @apply border-theme-color-light;
     }
 
     > .quote {

src/scss/components/_BlockText.scss

@@ -86,15 +86,11 @@
         content: '';
         width: 30px;
         height: 2px;
-        @apply bg-jpl-red block absolute top-0 left-0 mt-3;
+        @apply bg-theme-color block absolute top-0 left-0 mt-3;
 
         @screen sm {
           @apply mt-4;
         }
-
-        .ThemeDark & {
-          @apply bg-jpl-red-light;
-        }
       }
     }
   }

src/scss/styles.scss

@@ -18,6 +18,7 @@
 
 // themes
 @import 'themes/internal';
+@import 'themes/edu';
 
 // components
 @import 'components';

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

@@ -0,0 +1,61 @@
+/* EDU 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 {
+    .ThemeEDU {
+      .text-theme-color,
+      .text-theme-red,
+      .hover\:text-theme-color:hover,
+      .hover\:text-theme-red:hover {
+        @apply text-edu-purple-dark;
+      }
+
+      .text-theme-color-hover,
+      .text-theme-red-hover,
+      .hover\:text-theme-color-hover:hover,
+      .hover\:text-theme-red-hover:hover {
+        @apply text-edu-purple;
+      }
+
+      .ThemeLight {
+        .text-theme-color,
+        .text-theme-red,
+        .hover\:text-theme-color:hover,
+        .hover\:text-theme-red:hover {
+          @apply text-edu-purple-dark;
+        }
+
+        .text-theme-color-hover,
+        .text-theme-red-hover,
+        .hover\:text-theme-color-hover:hover,
+        .hover\:text-theme-red-hover:hover {
+          @apply text-edu-purple;
+        }
+      }
+
+      .ThemeDark {
+        .text-theme-color,
+        .text-theme-red,
+        .hover\:text-theme-color:hover,
+        .hover\:text-theme-red:hover {
+          @apply text-edu-purple;
+        }
+
+        .text-theme-color-hover,
+        .text-theme-red-hover,
+        .hover\:text-theme-color-hover:hover,
+        .hover\:text-theme-red-hover:hover {
+          @apply text-edu-purple-dark;
+        }
+      }
+    }
+  }
+}

src/scss/themes/_edu.scss

@@ -0,0 +1,151 @@
+/* EDU 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 {
+    .ThemeEDU {
+      .text-theme-color,
+      .text-theme-red,
+      .hover\:text-theme-color:hover,
+      .hover\:text-theme-red:hover {
+        @apply text-edu-purple-dark;
+      }
+
+      .text-theme-color-hover,
+      .text-theme-red-hover,
+      .hover\:text-theme-color-hover:hover,
+      .hover\:text-theme-red-hover:hover {
+        @apply text-edu-purple;
+      }
+
+      .border-jpl-red-light,
+      .hover\:border-jpl-red-light:hover {
+        @apply border-edu-peach;
+      }
+
+      .border-jpl-red,
+      .hover\:border-jpl-red:hover {
+        @apply border-edu-purple;
+      }
+
+      .border-jpl-red-dark,
+      .hover\:border-jpl-red-dark:hover {
+        @apply border-edu-purple-dark;
+      }
+
+      .bg-jpl-red-light,
+      .hover\:bg-jpl-red-light:hover {
+        @apply bg-edu-peach;
+      }
+
+      .bg-jpl-red,
+      .hover\:bg-jpl-red:hover {
+        @apply bg-edu-purple;
+      }
+
+      .bg-jpl-red-dark,
+      .hover\:bg-jpl-red-dark:hover {
+        @apply bg-edu-purple-dark;
+      }
+
+      .ThemeLight {
+        .text-theme-color,
+        .text-theme-red,
+        .hover\:text-theme-color:hover,
+        .hover\:text-theme-red:hover {
+          @apply text-edu-purple-dark;
+        }
+
+        .text-theme-color-hover,
+        .text-theme-red-hover,
+        .hover\:text-theme-color-hover:hover,
+        .hover\:text-theme-red-hover:hover {
+          @apply text-edu-purple;
+        }
+
+        .border-jpl-red-light,
+        .hover\:border-jpl-red-light:hover {
+          @apply border-edu-peach;
+        }
+
+        .border-jpl-red,
+        .hover\:border-jpl-red:hover {
+          @apply border-edu-purple;
+        }
+
+        .border-jpl-red-dark,
+        .hover\:border-jpl-red-dark:hover {
+          @apply border-edu-purple-dark;
+        }
+
+        .bg-jpl-red-light,
+        .hover\:bg-jpl-red-light:hover {
+          @apply bg-edu-peach;
+        }
+
+        .bg-jpl-red,
+        .hover\:bg-jpl-red:hover {
+          @apply bg-edu-purple;
+        }
+
+        .bg-jpl-red-dark,
+        .hover\:bg-jpl-red-dark:hover {
+          @apply bg-edu-purple-dark;
+        }
+      }
+
+      .ThemeDark {
+        .text-theme-color,
+        .text-theme-red,
+        .hover\:text-theme-color:hover,
+        .hover\:text-theme-red:hover {
+          @apply text-edu-purple;
+        }
+
+        .text-theme-color-hover,
+        .text-theme-red-hover,
+        .hover\:text-theme-color-hover:hover,
+        .hover\:text-theme-red-hover:hover {
+          @apply text-edu-purple-dark;
+        }
+
+        .border-jpl-red-light,
+        .hover\:border-jpl-red-light:hover {
+          @apply border-edu-peach;
+        }
+
+        .border-jpl-red,
+        .hover\:border-jpl-red:hover {
+          @apply border-edu-purple;
+        }
+
+        .border-jpl-red-dark,
+        .hover\:border-jpl-red-dark:hover {
+          @apply border-edu-purple-dark;
+        }
+
+        .bg-jpl-red-light,
+        .hover\:bg-jpl-red-light:hover {
+          @apply bg-edu-peach;
+        }
+
+        .bg-jpl-red,
+        .hover\:bg-jpl-red:hover {
+          @apply bg-edu-purple;
+        }
+
+        .bg-jpl-red-dark,
+        .hover\:bg-jpl-red-dark:hover {
+          @apply bg-edu-purple-dark;
+        }
+      }
+    }
+  }
+}

storybook/preview.js

@@ -78,6 +78,11 @@ export const parameters = {
         class: 'ThemeInternal',
         color: '#53C8ED',
       },
+      {
+        name: 'ThemeEDU',
+        class: 'ThemeEDU',
+        color: '#9438E0',
+      },
     ],
   },
 

storybook/stories/_docs/foundation_color.stories.mdx

@@ -35,6 +35,17 @@ These colors should not be used on public-facing JPL websites.
 | <div class="bg-jpl-sky-blue p-4"></div>      | JPL Sky Blue      | `jpl-sky-blue`      | `#53C8ED` |
 | <div class="bg-jpl-sky-blue-dark p-4"></div> | JPL Sky Blue Dark | `jpl-sky-blue-dark` | `#0080A4` |
 
+## EDU Colors
+
+EDU colors are reserved for use for Education material components and templates.
+
+| Color                                      | Name            | Token             | Value     |
+| :----------------------------------------- | :-------------- | :---------------- | :-------- |
+| <div class="bg-edu-purple p-4"></div>      | EDU Purple      | `edu-purple`      | `#9438E0` |
+| <div class="bg-edu-purple-dark p-4"></div> | EDU Purple Dark | `edu-purple-dark` | `#741EBB` |
+| <div class="bg-edu-teal p-4"></div>        | EDU Teal        | `edu-teal`        | `#007E99` |
+| <div class="bg-edu-peach p-4"></div>       | EDU Peach       | `edu-peach`       | `#FF5555` |
+
 <span id="functional-gray-tones"></span>
 
 ## Functional Gray Tones