Adding more colors to tailwind.config.js (#236)

* adding internal colors to tailwind config * adding custom gradient color stop for jpl-red-darker
nasa-jpl · May 25, 2022 · 8c818e4 · 8c818e4
1 parent 1cb3993
commit 8c818e4
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 10 deletions.
diff --git a/dist/css/explorer-1.min.css b/dist/css/explorer-1.min.css
diff --git a/storybook/stories/_docs/foundation_color.stories.mdx b/storybook/stories/_docs/foundation_color.stories.mdx
@@ -13,15 +13,25 @@ import { Meta } from '@storybook/addon-docs'
 
 Each of these foundation colors has specific usage scenarios.
 
-| Color                                    | Name          | Token           | Value     |
-| :--------------------------------------- | :------------ | :-------------- | :-------- |
-| <div class="bg-jpl-red p-4"></div>       | JPL Red       | `jpl-red`       | `#E31937` |
-| <div class="bg-jpl-red-light p-4"></div> | JPL Red Light | `jpl-red-light` | `#E73B54` |
-| <div class="bg-jpl-red-dark p-4"></div>  | JPL Red Dark  | `jpl-red-dark`  | `#C1152E` |
-| <div class="bg-jpl-aqua p-4"></div>      | JPL Aqua      | `aqua`          | `#489FDF` |
-| <div class="bg-blue p-4"></div>          | Blue          | `blue`          | `#8BCBFA` |
-| <div class="bg-dark-blue p-4"></div>     | Dark Blue     | `dark-blue`     | `#004562` |
-| <div class="bg-green p-4"></div>         | Green         | `green`         | `#14C97A` |
+| Color                                     | Name           | Token            | Value     |
+| :---------------------------------------- | :------------- | :--------------- | :-------- |
+| <div class="bg-jpl-red p-4"></div>        | JPL Red        | `jpl-red`        | `#E31937` |
+| <div class="bg-jpl-red-light p-4"></div>  | JPL Red Light  | `jpl-red-light`  | `#E73B54` |
+| <div class="bg-jpl-red-dark p-4"></div>   | JPL Red Dark   | `jpl-red-dark`   | `#C1152E` |
+| <div class="bg-jpl-red-darker p-4"></div> | JPL Red Darker | `jpl-red-darker` | `#5C0411` |
+| <div class="bg-jpl-aqua p-4"></div>       | JPL Aqua       | `aqua`           | `#489FDF` |
+| <div class="bg-blue p-4"></div>           | Blue           | `blue`           | `#8BCBFA` |
+| <div class="bg-dark-blue p-4"></div>      | Dark Blue      | `dark-blue`      | `#004562` |
+| <div class="bg-green p-4"></div>          | Green          | `green`          | `#14C97A` |
+
+### Reserved for Internal Use
+
+These colors should not be used on public-facing JPL websites.
+
+| Color                                        | Name              | Token               | Value     |
+| :------------------------------------------- | :---------------- | :------------------ | :-------- |
+| <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` |
 
 ## Functional Gray Tones
 
@@ -30,6 +40,7 @@ Grayscale colors are used throughout the site for text and layout.
 | Color                                     | Name           | Token            | Value     |
 | :---------------------------------------- | :------------- | :--------------- | :-------- |
 | <div class="bg-white p-4"></div>          | White          | `white`          | `#FFFFFF` |
+| <div class="bg-off-white p-4"></div>      | Off White      | `off-white`      | `#FAFAFA` |
 | <div class="bg-gray-light p-4"></div>     | Gray Light     | `gray-light`     | `#F5F5F5` |
 | <div class="bg-gray-light-mid p-4"></div> | Gray Light Mid | `gray-light-mid` | `#D8D8D8` |
 | <div class="bg-gray-mid p-4"></div>       | Gray Mid       | `gray-mid`       | `#949494` |

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -11,9 +11,12 @@ const foundationColors = {
   'jpl-red': '#E31937',
   'jpl-red-light': '#E73B54',
   'jpl-red-dark': '#C1152E',
+  'jpl-red-darker': '#5C0411',
   'jpl-aqua': '#489FDF',
   blue: '#8BCBFA',
   'dark-blue': '#004562',
+  'jpl-sky-blue': '#53C8ED',
+  'jpl-sky-blue-dark': '#0080A4',
   green: '#14C97A',
 }
 
@@ -31,6 +34,7 @@ const semanticColors = {
 
 const grayScale = {
   white: '#FFFFFF',
+  'off-white': '#FAFAFA',
   'gray-light': '#F5F5F5',
   'gray-light-mid': '#D8D8D8',
   'gray-mid': '#949494',
@@ -172,7 +176,10 @@ module.exports = {
       'transparent-w25': 'transparent 25%',
       'jpl-red-w50': foundationColors['jpl-red'] + ' 50%',
       'jpl-red-dark-w50': foundationColors['jpl-red-dark'] + ' 50%',
+      'jpl-red-darker-w50': foundationColors['jpl-red-darker'] + ' 50%',
       'jpl-red-light-w50': foundationColors['jpl-red-light'] + ' 50%',
+      'jpl-sky-blue-w50': foundationColors['jpl-sky-blue'] + ' 50%',
+      'jpl-sky-blue-dark-w50': foundationColors['jpl-sky-blue-dark'] + ' 50%',
       'white-w50': grayScale.white + ' 50%',
       'gray-dark-w50': grayScale['gray-dark'] + ' 50%',
       'facebook-w50': socialColors.facebook + ' 50%',