updating colors to use new coordinated color steps

nasa-jpl · Jul 9, 2024 · b110af0 · b110af0
1 parent 23c2bfc
commit b110af0
Show file tree

Hide file tree

Showing 38 changed files with 251 additions and 197 deletions.
diff --git a/packages/common/src/scss/_forms.scss b/packages/common/src/scss/_forms.scss
@@ -26,8 +26,8 @@
     @apply border-gray-light-mid;
 
     &:focus {
-      --tw-ring-color: #1871c9; // focus-blue
-      @apply border-focus-blue;
+      --tw-ring-color: #1871c9; // focus
+      @apply border-focus;
     }
   }
 
@@ -47,13 +47,13 @@
   [type='radio'],
   .form-checkbox,
   .form-radio {
-    @apply border-gray-mid text-focus-blue;
+    @apply border-gray-mid text-focus;
   }
 
   [type='checkbox']:focus,
   [type='radio']:focus,
   .form-checkbox:focus,
   .form-radio:focus {
-    --tw-ring-color: #1871c9; // focus-blue
+    --tw-ring-color: #1871c9; // focus
   }
 }
diff --git a/packages/common/src/scss/_typography.scss b/packages/common/src/scss/_typography.scss
@@ -281,6 +281,6 @@
   }
 
   mark {
-    @apply bg-alert-gold-light p-0.5 border border-alert-gold rounded;
+    @apply bg-warning-light p-0.5 border border-warning rounded;
   }
 }
diff --git a/packages/common/src/scss/components/_BaseButton.scss b/packages/common/src/scss/components/_BaseButton.scss
@@ -37,7 +37,7 @@
     @apply px-12 bg-transparent text-white border border-white/40 to-white-w50;
 
     &:hover {
-      @apply text-dark-blue edu:text-primary-dark border-white bg-white;
+      @apply text-jpl-blue-darker edu:text-primary-dark border-white bg-white;
     }
   }
 

diff --git a/packages/common/src/scss/components/_BlockTable.scss b/packages/common/src/scss/components/_BlockTable.scss
@@ -4,7 +4,7 @@
   }
 
   thead {
-    @apply bg-dark-blue;
+    @apply bg-jpl-blue-darker;
   }
 
   th {

diff --git a/packages/common/src/scss/components/_NavInternal.scss b/packages/common/src/scss/components/_NavInternal.scss
@@ -227,14 +227,14 @@
 
     .repeated-item {
       a {
-        @apply text-jpl-sky-blue-dark leading-tight transition-colors text-lg font-medium;
+        @apply text-jpl-teal-dark leading-tight transition-colors text-lg font-medium;
 
         span {
           @apply border-b border-transparent;
         }
 
         &:hover {
-          @apply text-jpl-sky-blue;
+          @apply text-jpl-teal;
         }
 
         &.active {
@@ -283,14 +283,14 @@
         }
 
         &.text-subtitle {
-          @apply text-jpl-sky-blue-dark transition-colors;
+          @apply text-jpl-teal-dark transition-colors;
 
           > span {
             @apply border-0;
           }
 
           &:hover {
-            @apply text-jpl-sky-blue;
+            @apply text-jpl-teal;
           }
 
           svg.IconExternal {

diff --git a/packages/common/src/scss/components/_SearchResultCard.scss b/packages/common/src/scss/components/_SearchResultCard.scss
@@ -1,3 +1,3 @@
-.SearchResultCard .bg-dark-blue mark {
+.SearchResultCard .bg-jpl-blue-darker mark {
   @apply bg-gray-dark p-0.5 border border-gray-mid-dark rounded text-white;
 }
diff --git a/packages/common/tailwind.colors.ts b/packages/common/tailwind.colors.ts
@@ -1,68 +1,105 @@
 // Dedicated file for managing tailwind theme colors
 
 export const jplRed = {
-  lighter: '#E73B54',
-  light: '#E73B54',
+  lighter: '#FDCFD5',
+  light: '#EA435B',
   base: '#E31937',
-  dark: '#C1152E',
-  darker: '#5C0411'
+  dark: '#BD142E',
+  darker: '#900B1F',
+  darkest: '#3A040C'
+}
+
+export const jplOrange = {
+  lighter: '#FCDECF',
+  light: '#EC905F',
+  base: '#E36019',
+  dark: '#AB3C00',
+  darker: '#732800',
+  darkest: '#3B1500'
+}
+
+export const jplYellow = {
+  lighter: '#FCF6CF', // intentionally the same as 'light'
+  light: '#FCF6CF',
+  base: '#E3C519',
+  dark: '#B69B00',
+  darker: '#897500',
+  darkest: '#5C4F00'
 }
 
 export const jplTeal = {
-  lighter: '#99D1DF',
+  lighter: '#CFF3FC',
   light: '#4BA7BE',
   base: '#10829E',
   dark: '#006077',
-  darker: '#004050'
+  darker: '#004050',
+  darkest: '#002129'
+}
+
+export const jplBlue = {
+  lighter: '#CFECFC',
+  light: '#199CE3',
+  base: '#0076B6',
+  dark: '#005989',
+  darker: '#003C5C',
+  darkest: '#001F2F'
 }
 
 export const jplViolet = {
-  lighter: '#C4AAF6',
-  light: '#905FEC',
+  lighter: '#EBE0FE',
+  light: '#854FEC',
   base: '#6019E3',
   dark: '#3C00AB',
-  darker: '#280073'
+  darker: '#280073',
+  darkest: '#15003B'
+}
+
+export const jplMagenta = {
+  lighter: '#FEDFF3', // intentionally the same as 'light'
+  light: '#FEDFF3',
+  base: '#E3199C',
+  dark: '#B60076',
+  darker: '#890059',
+  darkest: '#5C003C'
 }
 
 export const foundationColors = {
+  'jpl-red-lighter': jplRed.lighter,
   'jpl-red-light': jplRed.light,
   'jpl-red': jplRed.base,
   'jpl-red-dark': jplRed.dark,
   'jpl-red-darker': jplRed.darker,
-  'jpl-aqua': '#489FDF',
-  blue: '#8BCBFA',
-  'dark-blue': '#004562',
-  green: '#14C97A'
-}
-
-export const internalColors = {
-  'jpl-sky-blue-light': jplTeal.light,
-  'jpl-sky-blue': jplTeal.base,
-  'jpl-sky-blue-dark': jplTeal.dark,
-  'jpl-sky-blue-darker': jplTeal.darker
-}
-
-export const eduColors = {
-  'jpl-purple-light': jplViolet.light,
-  'jpl-purple': jplViolet.base,
-  'jpl-purple-dark': jplViolet.dark,
-  'jpl-purple-darker': jplViolet.darker,
+  'jpl-teal-lighter': jplTeal.lighter,
   'jpl-teal-light': jplTeal.light,
   'jpl-teal': jplTeal.base,
   'jpl-teal-dark': jplTeal.dark,
-  'jpl-teal-darker': jplTeal.darker
-}
-
-export const semanticColors = {
-  'alert-gold': '#FFBA32',
-  'alert-gold-light': '#FFF9EB',
-  'disabled-gray': '#D8D8D8', // same as Light Mid Gray
-  'error-red': '#C1152E', // same as JPL Red Dark
-  'error-red-light': '#FFE8EB',
-  'focus-blue': '#1871C9',
-  'focus-blue-light': '#E8F1FA',
-  'success-green': '#33A17B',
-  'success-green-light': '#E1F5EE'
+  'jpl-teal-darker': jplTeal.darker,
+  'jpl-violet-lighter': jplViolet.lighter,
+  'jpl-violet-light': jplViolet.light,
+  'jpl-violet': jplViolet.base,
+  'jpl-violet-dark': jplViolet.dark,
+  'jpl-violet-darker': jplViolet.darker,
+  'jpl-orange-lighter': jplOrange.lighter,
+  'jpl-orange-light': jplOrange.light,
+  'jpl-orange': jplOrange.base,
+  'jpl-orange-dark': jplOrange.dark,
+  'jpl-orange-darker': jplOrange.darker,
+  'jpl-yellow-lighter': jplYellow.lighter,
+  'jpl-yellow-light': jplYellow.light,
+  'jpl-yellow': jplYellow.base,
+  'jpl-yellow-dark': jplYellow.dark,
+  'jpl-yellow-darker': jplYellow.darker,
+  'jpl-blue-lighter': jplBlue.lighter,
+  'jpl-blue-light': jplBlue.light,
+  'jpl-blue': jplBlue.base,
+  'jpl-blue-dark': jplBlue.dark,
+  'jpl-blue-darker': jplBlue.darker,
+  'jpl-magenta-lighter': jplMagenta.lighter,
+  'jpl-magenta-light': jplMagenta.light,
+  'jpl-magenta': jplMagenta.base,
+  'jpl-magenta-dark': jplMagenta.dark,
+  'jpl-magenta-darker': jplMagenta.darker,
+  green: '#14C97A'
 }
 
 export const grayScaleColors = {
@@ -76,6 +113,22 @@ export const grayScaleColors = {
   black: '#000000'
 }
 
+export const semanticColors = {
+  error: '#E42020',
+  'error-light': '#FFEBEB',
+  'error-dark': '#700000',
+  warning: '#FFBA32',
+  'warning-light': '#FFF3DB',
+  'warning-dark': '#573A00',
+  success: '#2E8452',
+  'success-light': '#D7F9E5',
+  'success-dark': '#00421C',
+  focus: '#2072E4',
+  'focus-light': '#EBF3FF',
+  'focus-dark': '#00337A',
+  disabled: grayScaleColors['gray-light-mid'] // same as Light Mid Gray
+}
+
 export const socialColors = {
   facebook: '#3b5998',
   twitter: '#000000',
@@ -137,41 +190,41 @@ export const ThemeWww = {
 
 export const ThemeEdu = {
   default: {
-    '--color-primary': eduColors['jpl-purple'],
-    '--color-primary-light': eduColors['jpl-purple-light'],
-    '--color-primary-dark': eduColors['jpl-purple-dark'],
-    '--color-primary-darker': eduColors['jpl-purple-darker'],
+    '--color-primary': foundationColors['jpl-violet'],
+    '--color-primary-light': foundationColors['jpl-violet-light'],
+    '--color-primary-dark': foundationColors['jpl-violet-dark'],
+    '--color-primary-darker': foundationColors['jpl-violet-darker'],
     '--color-secondary': foundationColors['jpl-red'],
     '--color-secondary-light': foundationColors['jpl-red-light'],
     '--color-secondary-dark': foundationColors['jpl-red-dark'],
     '--color-secondary-darker': foundationColors['jpl-red-darker'],
-    '--color-action': eduColors['jpl-teal'],
-    '--color-action-light': eduColors['jpl-teal-light'],
-    '--color-action-dark': eduColors['jpl-teal-dark'],
-    '--color-action-darker': eduColors['jpl-teal-darker']
+    '--color-action': foundationColors['jpl-teal'],
+    '--color-action-light': foundationColors['jpl-teal-light'],
+    '--color-action-dark': foundationColors['jpl-teal-dark'],
+    '--color-action-darker': foundationColors['jpl-teal-darker']
   },
   dark: {
-    '--color-primary': eduColors['jpl-purple-light'],
-    '--color-primary-light': eduColors['jpl-purple-light'],
-    '--color-primary-dark': eduColors['jpl-purple'],
-    '--color-primary-darker': eduColors['jpl-purple-dark'],
+    '--color-primary': foundationColors['jpl-violet-light'],
+    '--color-primary-light': foundationColors['jpl-violet-light'],
+    '--color-primary-dark': foundationColors['jpl-violet'],
+    '--color-primary-darker': foundationColors['jpl-violet-dark'],
     '--color-secondary': foundationColors['jpl-red-light'],
     '--color-secondary-light': foundationColors['jpl-red-light'],
     '--color-secondary-dark': foundationColors['jpl-red'],
     '--color-secondary-darker': foundationColors['jpl-red-dark'],
-    '--color-action': eduColors['jpl-teal-light'],
-    '--color-action-light': eduColors['jpl-teal-light'],
-    '--color-action-dark': eduColors['jpl-teal'],
-    '--color-action-darker': eduColors['jpl-teal-dark']
+    '--color-action': foundationColors['jpl-teal-light'],
+    '--color-action-light': foundationColors['jpl-teal-light'],
+    '--color-action-dark': foundationColors['jpl-teal'],
+    '--color-action-darker': foundationColors['jpl-teal-dark']
   }
 }
 
 export const ThemeInternal = {
   default: {
-    '--color-primary': internalColors['jpl-sky-blue'],
-    '--color-primary-light': internalColors['jpl-sky-blue-light'],
-    '--color-primary-dark': internalColors['jpl-sky-blue-dark'],
-    '--color-primary-darker': internalColors['jpl-sky-blue-darker'],
+    '--color-primary': foundationColors['jpl-teal'],
+    '--color-primary-light': foundationColors['jpl-teal-light'],
+    '--color-primary-dark': foundationColors['jpl-teal-dark'],
+    '--color-primary-darker': foundationColors['jpl-teal-darker'],
     '--color-secondary': 'var(--color-primary)',
     '--color-secondary-light': 'var(--color-primary-light)',
     '--color-secondary-dark': 'var(--color-primary-dark)',
@@ -182,22 +235,19 @@ export const ThemeInternal = {
     '--color-action-darker': 'var(--color-primary-darker)'
   },
   dark: {
-    '--color-primary': internalColors['jpl-sky-blue-light'],
-    '--color-primary-light': internalColors['jpl-sky-blue-light'],
-    '--color-primary-dark': internalColors['jpl-sky-blue'],
-    '--color-primary-darker': internalColors['jpl-sky-blue-dark']
+    '--color-primary': foundationColors['jpl-teal-light'],
+    '--color-primary-light': foundationColors['jpl-teal-light'],
+    '--color-primary-dark': foundationColors['jpl-teal'],
+    '--color-primary-darker': foundationColors['jpl-teal-dark']
   }
 }
 
 export default {
   ...foundationColors,
-  ...internalColors,
-  ...eduColors,
   ...grayScaleColors,
   ...semanticColors,
   ...socialColors,
   ...themeVariantColors,
-  // ...uiColors,
   transparent: 'transparent',
   current: 'currentColor'
 }
diff --git a/packages/common/tailwind.config.ts b/packages/common/tailwind.config.ts
@@ -3,7 +3,6 @@ import type { CustomThemeConfig } from 'tailwindcss/types/config'
 import plugin from 'tailwindcss/plugin'
 import themeColors, {
   foundationColors,
-  internalColors,
   grayScaleColors,
   socialColors,
   ThemeWww,
@@ -137,8 +136,8 @@ const defaultTheme: Partial<CustomThemeConfig> = {
     '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': internalColors['jpl-sky-blue'] + ' 50%',
-    'jpl-sky-blue-dark-w50': internalColors['jpl-sky-blue-dark'] + ' 50%',
+    'jpl-teal-w50': foundationColors['jpl-teal'] + ' 50%',
+    'jpl-teal-dark-w50': foundationColors['jpl-teal-dark'] + ' 50%',
     'white-w50': grayScaleColors.white + ' 50%',
     'gray-dark-w50': grayScaleColors['gray-dark'] + ' 50%',
     'facebook-w50': socialColors.facebook + ' 50%',

diff --git a/packages/html/index.html b/packages/html/index.html
@@ -16,7 +16,7 @@
         <title>JPL Design System Assets</title>
       </head>
       <body>
-        <div class="bg-dark-blue py-5 px-4 3xl:px-0 mb-10">
+        <div class="bg-jpl-blue-darker py-5 px-4 3xl:px-0 mb-10">
           <div class="flex items-center justify-between max-w-screen-3xl mx-auto">
             <h1 class="text-subtitle text-white">JPL Design System Assets</h1>
             <a
@@ -793,7 +793,7 @@ <h2 class="text-h3">Heading</h2>
             </div>
           </nav>
         </div>
-        <div class="bg-dark-blue py-8 mt-10 px-4 3xl:px-0">
+        <div class="bg-jpl-blue-darker py-8 mt-10 px-4 3xl:px-0">
           <p class="max-w-screen-3xl text-right text-opacity-50 mx-auto text-subtitle text-white">
             Maintained by DesignLab
           </p>