From b110af0beb5d42a08336a5f98355216bf59b25f5 Mon Sep 17 00:00:00 2001 From: Stephanie Smith Date: Mon, 8 Jul 2024 18:23:07 -0700 Subject: [PATCH] updating colors to use new coordinated color steps --- packages/common/src/scss/_forms.scss | 8 +- packages/common/src/scss/_typography.scss | 2 +- .../src/scss/components/_BaseButton.scss | 2 +- .../src/scss/components/_BlockTable.scss | 2 +- .../src/scss/components/_NavInternal.scss | 8 +- .../scss/components/_SearchResultCard.scss | 2 +- packages/common/tailwind.colors.ts | 184 +++++++++++------- packages/common/tailwind.config.ts | 5 +- packages/html/index.html | 4 +- .../BaseButton/BaseButton.stories.js | 4 +- .../src/components/BlockTable/BlockTable.js | 2 +- .../FooterInternal/FooterInternal.js | 10 +- .../FooterInternalContactList.js | 2 +- .../components/FormTextArea/FormTextArea.js | 2 +- .../components/FormTextInput/FormTextInput.js | 2 +- .../NavInternal/NavInternalHighlight.js | 2 +- .../SearchResultCard/SearchResultCard.js | 2 +- .../html/src/docs/foundation/color.docs.mdx | 50 ++--- .../foundation/grid_layouthelpers.stories.ts | 8 +- .../html/src/docs/foundation/themes.docs.mdx | 4 +- .../docs/overviews/forms.example.stories.ts | 4 +- .../src/components/BlockTable/BlockTable.vue | 2 +- .../components/FormContact/FormContact.vue | 2 +- .../FormNewsletterSignup.vue | 2 +- .../MissionDetailStats/MissionDetailStats.vue | 4 +- .../MissionDetailStatsMicro.vue | 2 +- .../MissionDetailStatsMini.vue | 6 +- .../NavDesktop/NavDesktop.stories.js | 2 +- .../NavDesktop/NavDesktopDropdownContent.vue | 2 +- .../NavDesktop/NavDesktopDropdownMore.vue | 2 +- .../NavHeading/NavHeading.stories.js | 2 +- .../NavLinkList/NavLinkList.stories.js | 2 +- .../components/NavSocial/NavSocial.stories.js | 2 +- .../SearchResultCard/SearchResultCard.vue | 2 +- .../src/components/TheFooter/TheFooter.vue | 2 +- .../TopicDetailMissionCarouselItem.vue | 2 +- .../vue/src/docs/foundation/color.docs.mdx | 95 ++++----- pnpm-lock.yaml | 8 +- 38 files changed, 251 insertions(+), 197 deletions(-) diff --git a/packages/common/src/scss/_forms.scss b/packages/common/src/scss/_forms.scss index c39576db..e6172061 100644 --- 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 index e2c2464f..877dc44c 100644 --- 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 index 53345580..21e68b9a 100644 --- 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 index 04fc1354..aa0f09b4 100644 --- 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 index 53b1be78..1034feed 100644 --- 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 index 7511eb73..3a2c88fa 100644 --- 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 index f6eeace2..662d3bf4 100644 --- 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 index b83dcaf4..fce0e2f2 100644 --- 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 = { '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 index ff32fecc..aef3f340 100644 --- a/packages/html/index.html +++ b/packages/html/index.html @@ -16,7 +16,7 @@ JPL Design System Assets -
+

JPL Design System Assets

Heading
-
+

Maintained by DesignLab

diff --git a/packages/html/src/components/BaseButton/BaseButton.stories.js b/packages/html/src/components/BaseButton/BaseButton.stories.js index 250631af..3a439e4d 100644 --- a/packages/html/src/components/BaseButton/BaseButton.stories.js +++ b/packages/html/src/components/BaseButton/BaseButton.stories.js @@ -152,7 +152,7 @@ Dark_Button.args = { compact: false, disabled: false } -Dark_Button.decorators = [(Story) => `
${Story()}
`] +Dark_Button.decorators = [(Story) => `
${Story()}
`] export const Primary_Icon_Button = BaseButtonTemplate.bind({}) Primary_Icon_Button.args = { @@ -189,7 +189,7 @@ Dark_Icon_Button.args = { icon: 'next', iconOnly: true } -Dark_Icon_Button.decorators = [(Story) => `
${Story()}
`] +Dark_Icon_Button.decorators = [(Story) => `
${Story()}
`] export const Social_Icon_Button = () => { let facebook = BaseButtonTemplate({ diff --git a/packages/html/src/components/BlockTable/BlockTable.js b/packages/html/src/components/BlockTable/BlockTable.js index 6cc82f3d..893c75c5 100644 --- a/packages/html/src/components/BlockTable/BlockTable.js +++ b/packages/html/src/components/BlockTable/BlockTable.js @@ -2,7 +2,7 @@ export const BlockTableTemplate = ({ caption, table }) => { let tableRow = '' let tableCol = '' let tableColType = 'th' - let tableColClass = 'bg-dark-blue text-subtitle text-white text-left font-normal' + let tableColClass = 'bg-jpl-blue-darker text-subtitle text-white text-left font-normal' for (const [index, value] of table.data.entries()) { if (index > 0) { tableColType = 'td' diff --git a/packages/html/src/components/FooterInternal/FooterInternal.js b/packages/html/src/components/FooterInternal/FooterInternal.js index 804173ed..478289ea 100644 --- a/packages/html/src/components/FooterInternal/FooterInternal.js +++ b/packages/html/src/components/FooterInternal/FooterInternal.js @@ -67,7 +67,7 @@ export const FooterInternalTemplate = ({ siteEditors, siteManagers, dateUpdated, link: 'https://www.jpl.nasa.gov/', icon: 'external', linkClass: - 'flex flex-nowrap items-baseline lg:hidden text-jpl-sky-blue can-hover:hover:text-jpl-sky-blue-dark', + 'flex flex-nowrap items-baseline lg:hidden text-jpl-teal can-hover:hover:text-jpl-teal-dark', target: '_blank' })} @@ -86,7 +86,7 @@ export const FooterInternalTemplate = ({ siteEditors, siteManagers, dateUpdated, link: 'https://js.jpl.nasa.gov/', icon: 'external', linkClass: - 'flex flex-nowrap items-center lg:hidden text-jpl-sky-blue can-hover:hover:text-jpl-sky-blue-dark', + 'flex flex-nowrap items-center lg:hidden text-jpl-teal can-hover:hover:text-jpl-teal-dark', target: '_blank' })} @@ -105,7 +105,7 @@ export const FooterInternalTemplate = ({ siteEditors, siteManagers, dateUpdated, link: 'https://www.caltech.edu/', icon: 'external', linkClass: - 'flex flex-nowrap items-center lg:hidden text-jpl-sky-blue can-hover:hover:text-jpl-sky-blue-dark', + 'flex flex-nowrap items-center lg:hidden text-jpl-teal can-hover:hover:text-jpl-teal-dark', target: '_blank' })} @@ -124,7 +124,7 @@ export const FooterInternalTemplate = ({ siteEditors, siteManagers, dateUpdated, link: 'https://www.nasa.gov/', icon: 'external', linkClass: - 'flex flex-nowrap items-center lg:hidden text-jpl-sky-blue can-hover:hover:text-jpl-sky-blue-dark', + 'flex flex-nowrap items-center lg:hidden text-jpl-teal can-hover:hover:text-jpl-teal-dark', target: '_blank' })} @@ -144,7 +144,7 @@ export const FooterInternalTemplate = ({ siteEditors, siteManagers, dateUpdated, icon: 'external', wrapperClass: 'inline', linkClass: - 'flex flex-nowrap items-center text-jpl-sky-blue can-hover:hover:text-jpl-sky-blue-dark', + 'flex flex-nowrap items-center text-jpl-teal can-hover:hover:text-jpl-teal-dark', target: '_blank' })}
diff --git a/packages/html/src/components/FooterInternal/FooterInternalContactList.js b/packages/html/src/components/FooterInternal/FooterInternalContactList.js index c4dec7f4..25d61de6 100644 --- a/packages/html/src/components/FooterInternal/FooterInternalContactList.js +++ b/packages/html/src/components/FooterInternal/FooterInternalContactList.js @@ -11,7 +11,7 @@ export const FooterInternalContactListTemplate = ({ title, items }) => { for (const [index, item] of items.entries()) { itemsTemplate += `
  • ${BaseLinkTemplate({ variant: 'none', - linkClass: 'text-jpl-sky-blue can-hover:hover:text-jpl-sky-blue-dark', + linkClass: 'text-jpl-teal can-hover:hover:text-jpl-teal-dark', text: item.name, link: `mailto:${item.email}` })} diff --git a/packages/html/src/components/FormTextArea/FormTextArea.js b/packages/html/src/components/FormTextArea/FormTextArea.js index bceb8003..2a16e750 100644 --- a/packages/html/src/components/FormTextArea/FormTextArea.js +++ b/packages/html/src/components/FormTextArea/FormTextArea.js @@ -21,6 +21,6 @@ export const FormTextAreaTemplate = ({ placeholder, label, inputName, required } placeholder="${placeholder}" cols="40" rows="5" - class="border-gray-light-mid w-full px-4 py-3 border mt-2 focus:border-focus-blue focus:shadow-jpl" + class="border-gray-light-mid w-full px-4 py-3 border mt-2 focus:border-focus focus:shadow-jpl" >` } diff --git a/packages/html/src/components/FormTextInput/FormTextInput.js b/packages/html/src/components/FormTextInput/FormTextInput.js index a2584248..be19d1e7 100644 --- a/packages/html/src/components/FormTextInput/FormTextInput.js +++ b/packages/html/src/components/FormTextInput/FormTextInput.js @@ -20,6 +20,6 @@ export const FormTextInputTemplate = ({ placeholder, label, inputName, required : `` } placeholder="${placeholder}" - class="border-gray-light-mid w-full px-4 py-3 border mt-2 focus:border-focus-blue focus:shadow-jpl" + class="border-gray-light-mid w-full px-4 py-3 border mt-2 focus:border-focus focus:shadow-jpl" />` } diff --git a/packages/html/src/components/NavInternal/NavInternalHighlight.js b/packages/html/src/components/NavInternal/NavInternalHighlight.js index c3e7be24..544d06f9 100644 --- a/packages/html/src/components/NavInternal/NavInternalHighlight.js +++ b/packages/html/src/components/NavInternal/NavInternalHighlight.js @@ -27,7 +27,7 @@ export const NavInternalHighlightTemplate = ({ title, description, image, link, image && image.src && link ? ` diff --git a/packages/html/src/components/SearchResultCard/SearchResultCard.js b/packages/html/src/components/SearchResultCard/SearchResultCard.js index 3995b553..fa1e117a 100644 --- a/packages/html/src/components/SearchResultCard/SearchResultCard.js +++ b/packages/html/src/components/SearchResultCard/SearchResultCard.js @@ -88,7 +88,7 @@ export const SearchResultCardTemplate = ({
    • ` : ` -
    +
    ${ diff --git a/packages/html/src/docs/foundation/color.docs.mdx b/packages/html/src/docs/foundation/color.docs.mdx index c91e5136..d37be4d7 100644 --- a/packages/html/src/docs/foundation/color.docs.mdx +++ b/packages/html/src/docs/foundation/color.docs.mdx @@ -18,25 +18,25 @@ import { Meta } from '@storybook/blocks' Each of these foundation colors has specific usage scenarios. -| Color | Name | Token | Value | -| :---------------------------------------- | :------------- | :--------------- | :-------- | -|
    | JPL Red | `jpl-red` | `#E31937` | -|
    | JPL Red Light | `jpl-red-light` | `#E73B54` | -|
    | JPL Red Dark | `jpl-red-dark` | `#C1152E` | -|
    | JPL Red Darker | `jpl-red-darker` | `#5C0411` | -|
    | JPL Aqua | `aqua` | `#489FDF` | -|
    | Blue | `blue` | `#8BCBFA` | -|
    | Dark Blue | `dark-blue` | `#004562` | -|
    | Green | `green` | `#14C97A` | +| Color | Name | Token | Value | +| :----------------------------------------- | :------------- | :---------------- | :-------- | +|
    | JPL Red | `jpl-red` | `#E31937` | +|
    | JPL Red Light | `jpl-red-light` | `#E73B54` | +|
    | JPL Red Dark | `jpl-red-dark` | `#C1152E` | +|
    | JPL Red Darker | `jpl-red-darker` | `#5C0411` | +|
    | JPL Aqua | `aqua` | `#489FDF` | +|
    | Blue | `blue` | `#8BCBFA` | +|
    | Dark Blue | `jpl-blue-darker` | `#004562` | +|
    | Green | `green` | `#14C97A` | ### Reserved for Internal Use These colors should not be used on public-facing JPL websites. -| Color | Name | Token | Value | -| :------------------------------------------- | :---------------- | :------------------ | :-------- | -|
    | JPL Sky Blue | `jpl-sky-blue` | `#53C8ED` | -|
    | JPL Sky Blue Dark | `jpl-sky-blue-dark` | `#0080A4` | +| Color | Name | Token | Value | +| :--------------------------------------- | :---------------- | :-------------- | :-------- | +|
    | JPL Sky Blue | `jpl-teal` | `#53C8ED` | +|
    | JPL Sky Blue Dark | `jpl-teal-dark` | `#0080A4` | @@ -73,17 +73,17 @@ Recommended for use in forms, alerts, or any element meant to communicate a stat **Note:** Color should never be the _only_ means used to convey state information; it must always be accompanied by text or iconography that makes it clear for colorblind users. -| Color | Name | Token | Value | -| :--------------------------------------------- | :------------------ | :-------------------- | :-------- | -|
    | Alert Gold | `alert-gold` | `#FFBA32` | -|
    | Alert Gold Light | `alert-gold-light` | `#FFF9EB` | -|
    | Disabled Gray | `disabled-gray` | `#D8D8D8` | -|
    | Error Red | `error-red` | `#C1152E` | -|
    | Error Red Light | `error-red-light` | `#FFE8EB` | -|
    | Focus Blue | `focus-blue` | `#1871C9` | -|
    | Focus Blue Light | `focus-blue-light` | `#E8F1FA` | -|
    | Success Green | `success-green` | `#33A17B` | -|
    | Success Green Light | `success-green-light` | `#E1F5EE` | +| Color | Name | Token | Value | +| :--------------------------------------- | :------------------ | :-------------- | :-------- | +|
    | Alert Gold | `alert` | `#FFBA32` | +|
    | Alert Gold Light | `alert-light` | `#FFF9EB` | +|
    | Disabled Gray | `disabled` | `#D8D8D8` | +|
    | Error Red | `error` | `#C1152E` | +|
    | Error Red Light | `error-light` | `#FFE8EB` | +|
    | Focus Blue | `focus` | `#1871C9` | +|
    | Focus Blue Light | `focus-light` | `#E8F1FA` | +|
    | Success Green | `success` | `#33A17B` | +|
    | Success Green Light | `success-light` | `#E1F5EE` | diff --git a/packages/html/src/docs/foundation/grid_layouthelpers.stories.ts b/packages/html/src/docs/foundation/grid_layouthelpers.stories.ts index 0148453e..19038e8a 100644 --- a/packages/html/src/docs/foundation/grid_layouthelpers.stories.ts +++ b/packages/html/src/docs/foundation/grid_layouthelpers.stories.ts @@ -8,7 +8,7 @@ const meta: Meta = { export default meta const BaseWidthTemplate = () => `
    -
    +
    .indent-col-base
    ` @@ -16,7 +16,7 @@ const BaseWidthTemplate = () => `
    -
    +
    .indent-col-base.indent-col-2
    ` @@ -35,7 +35,7 @@ ColTwoStart.parameters = { const ColThreeStartTemplate = () => `
    -
    +
    .indent-col-base.indent-col-3
    ` @@ -47,7 +47,7 @@ export const ColThreeStart: StoryObj = { const ColFourStartTemplate = () => `
    -
    +
    .indent-col-base.indent-col-4
    ` diff --git a/packages/html/src/docs/foundation/themes.docs.mdx b/packages/html/src/docs/foundation/themes.docs.mdx index 1079314b..3647a37a 100644 --- a/packages/html/src/docs/foundation/themes.docs.mdx +++ b/packages/html/src/docs/foundation/themes.docs.mdx @@ -7,7 +7,7 @@ import * as Stories from './themes.stories' ## Internal Theme -Apply a body class of `.ThemeInternal` to your build to reflect JPL's internal color scheme. The difference between the internal theme and the default theme is subtle: for the most part, only link colors are changed to `jpl-sky-blue` and `jpl-sky-blue-dark`. +Apply a body class of `.ThemeInternal` to your build to reflect JPL's internal color scheme. The difference between the internal theme and the default theme is subtle: for the most part, only link colors are changed to `jpl-teal` and `jpl-teal-dark`. ```html @@ -79,7 +79,7 @@ For components that have light and dark themes, add theme rules to the end of yo ## Adaptive Text Colors -Usage of `.text-jpl-red` vs `.text-jpl-red-light` (or the `.text-jpl-sky-blue` variants for internal sites) in the correct context of `.ThemeVariantLight` and `.ThemeVariantDark` ensures that the contrast of the text color is sufficient against the background color. To avoid rewriting the CSS rules for each use-case, we created text color classes that follow this rule automatically. These color classes also check for usage of `.ThemeInternal`. +Usage of `.text-jpl-red` vs `.text-jpl-red-light` (or the `.text-jpl-teal` variants for internal sites) in the correct context of `.ThemeVariantLight` and `.ThemeVariantDark` ensures that the contrast of the text color is sufficient against the background color. To avoid rewriting the CSS rules for each use-case, we created text color classes that follow this rule automatically. These color classes also check for usage of `.ThemeInternal`. ```css .text-action diff --git a/packages/html/src/docs/overviews/forms.example.stories.ts b/packages/html/src/docs/overviews/forms.example.stories.ts index e99352ad..80b77b98 100644 --- a/packages/html/src/docs/overviews/forms.example.stories.ts +++ b/packages/html/src/docs/overviews/forms.example.stories.ts @@ -13,7 +13,7 @@ const ExampleFormTemplate = () => `
    type="text" name="name" placeholder="enter your name" - class="border-gray-light-mid w-full px-4 py-3 border mt-2 focus:border-focus-blue focus:shadow-jpl" + class="border-gray-light-mid w-full px-4 py-3 border mt-2 focus:border-focus focus:shadow-jpl" />
    @@ -29,7 +29,7 @@ const ExampleFormTemplate = () => ` placeholder="enter your message..." cols="40" rows="5" - class="border-gray-light-mid w-full px-4 py-3 border mt-2 focus:border-focus-blue focus:shadow-jpl" + class="border-gray-light-mid w-full px-4 py-3 border mt-2 focus:border-focus focus:shadow-jpl" >