adding ThemeVariantGray to accommodate gray background use-cases

nasa-jpl · Jul 9, 2024 · c9e02be · c9e02be
1 parent d5b6636
commit c9e02be
Show file tree

Hide file tree

Showing 13 changed files with 80 additions and 19 deletions.
diff --git a/apps/html-storybook/.storybook/preview.ts b/apps/html-storybook/.storybook/preview.ts
@@ -62,7 +62,7 @@ const preview = {
     },
     variantsConfig: {
       defaultValue: {
-        variants: ['ThemeVariantLight', 'ThemeVariantDark'],
+        variants: ['ThemeVariantLight', 'ThemeVariantDark', 'ThemeVariantGray'],
         method: 'css'
       }
     },
@@ -98,7 +98,8 @@ const preview = {
             icon: 'circlehollow',
             title: 'Light Variant'
           },
-          { value: 'ThemeVariantDark', icon: 'circle', title: 'Dark Variant' }
+          { value: 'ThemeVariantDark', icon: 'circle', title: 'Dark Variant' },
+          { value: 'ThemeVariantGray', icon: 'circle', title: 'Gray Variant' }
         ],
         dynamicTitle: true
       }

diff --git a/apps/html-storybook/.storybook/withGlobals.ts b/apps/html-storybook/.storybook/withGlobals.ts
@@ -124,7 +124,7 @@ export const globalTypes = {
   },
   variantsConfig: {
     defaultValue: {
-      variants: ['ThemeVariantLight', 'ThemeVariantDark'],
+      variants: ['ThemeVariantLight', 'ThemeVariantDark', 'ThemeVariantGray'],
       method: 'css'
     }
   },
@@ -160,7 +160,8 @@ export const globalTypes = {
           icon: 'circlehollow',
           title: 'Light Variant'
         },
-        { value: 'ThemeVariantDark', icon: 'circle', title: 'Dark Variant' }
+        { value: 'ThemeVariantDark', icon: 'circle', title: 'Dark Variant' },
+        { value: 'ThemeVariantGray', icon: 'circle', title: 'Gray Variant' }
       ],
       dynamicTitle: true
     }

diff --git a/apps/vue-storybook/.storybook/withGlobals.ts b/apps/vue-storybook/.storybook/withGlobals.ts
@@ -146,7 +146,7 @@ export const globalTypes = {
   },
   variantsConfig: {
     defaultValue: {
-      variants: ['ThemeVariantLight', 'ThemeVariantDark'],
+      variants: ['ThemeVariantLight', 'ThemeVariantDark', 'ThemeVariantGray'],
       method: 'css'
     }
   },
@@ -182,7 +182,8 @@ export const globalTypes = {
           icon: 'circlehollow',
           title: 'Light Variant'
         },
-        { value: 'ThemeVariantDark', icon: 'circle', title: 'Dark Variant' }
+        { value: 'ThemeVariantDark', icon: 'circle', title: 'Dark Variant' },
+        { value: 'ThemeVariantGray', icon: 'circle', title: 'Gray Variant' }
       ],
       dynamicTitle: true
     }

diff --git a/packages/common/tailwind.colors.ts b/packages/common/tailwind.colors.ts
@@ -185,6 +185,20 @@ export const ThemeWww = {
     '--color-action-light': 'var(--color-primary-light)',
     '--color-action-dark': 'var(--color-primary-dark)',
     '--color-action-darker': 'var(--color-primary-darker)'
+  },
+  gray: {
+    '--color-primary': foundationColors['jpl-red-dark'],
+    '--color-primary-light': foundationColors['jpl-red'],
+    '--color-primary-dark': foundationColors['jpl-red-darker'],
+    '--color-primary-darker': foundationColors['jpl-red-darker'],
+    '--color-secondary': 'var(--color-primary)',
+    '--color-secondary-light': 'var(--color-primary-light)',
+    '--color-secondary-dark': 'var(--color-primary-dark)',
+    '--color-secondary-darker': 'var(--color-primary-darker)',
+    '--color-action': 'var(--color-primary)',
+    '--color-action-light': 'var(--color-primary-light)',
+    '--color-action-dark': 'var(--color-primary-dark)',
+    '--color-action-darker': 'var(--color-primary-darker)'
   }
 }
 
@@ -216,6 +230,20 @@ export const ThemeEdu = {
     '--color-action-light': foundationColors['jpl-teal-light'],
     '--color-action-dark': foundationColors['jpl-teal'],
     '--color-action-darker': foundationColors['jpl-teal-dark']
+  },
+  gray: {
+    '--color-primary': foundationColors['jpl-violet-dark'],
+    '--color-primary-light': foundationColors['jpl-violet'],
+    '--color-primary-dark': foundationColors['jpl-violet-darker'],
+    '--color-primary-darker': foundationColors['jpl-violet-darker'],
+    '--color-secondary': foundationColors['jpl-red-dark'],
+    '--color-secondary-light': foundationColors['jpl-red'],
+    '--color-secondary-dark': foundationColors['jpl-red-darker'],
+    '--color-secondary-darker': foundationColors['jpl-red-darker'],
+    '--color-action': foundationColors['jpl-teal-dark'],
+    '--color-action-light': foundationColors['jpl-teal'],
+    '--color-action-dark': foundationColors['jpl-teal-darker'],
+    '--color-action-darker': foundationColors['jpl-teal-darker']
   }
 }
 
@@ -238,7 +266,29 @@ export const ThemeInternal = {
     '--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']
+    '--color-primary-darker': foundationColors['jpl-teal-dark'],
+    '--color-secondary': 'var(--color-primary)',
+    '--color-secondary-light': 'var(--color-primary-light)',
+    '--color-secondary-dark': 'var(--color-primary-dark)',
+    '--color-secondary-darker': 'var(--color-primary-darker)',
+    '--color-action': 'var(--color-primary)',
+    '--color-action-light': 'var(--color-primary-light)',
+    '--color-action-dark': 'var(--color-primary-dark)',
+    '--color-action-darker': 'var(--color-primary-darker)'
+  },
+  gray: {
+    '--color-primary': foundationColors['jpl-teal-dark'],
+    '--color-primary-light': foundationColors['jpl-teal'],
+    '--color-primary-dark': foundationColors['jpl-teal-darker'],
+    '--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)',
+    '--color-secondary-darker': 'var(--color-primary-darker)',
+    '--color-action': 'var(--color-primary)',
+    '--color-action-light': 'var(--color-primary-light)',
+    '--color-action-dark': 'var(--color-primary-dark)',
+    '--color-action-darker': 'var(--color-primary-darker)'
   }
 }
 

diff --git a/packages/common/tailwind.config.ts b/packages/common/tailwind.config.ts
@@ -286,13 +286,16 @@ export default {
         // www theme selectors
         ':root, .ThemeVariantLight': ThemeWww.default,
         '.ThemeVariantDark': ThemeWww.dark,
+        '.ThemeVariantGray': ThemeWww.gray,
         // edu theme selectors
         '.ThemeEdu, .ThemeEdu.ThemeVariantLight, .ThemeEdu .ThemeVariantLight': ThemeEdu.default,
         '.ThemeEdu .ThemeVariantDark, .ThemeEdu.ThemeVariantDark': ThemeEdu.dark,
+        '.ThemeEdu .ThemeVariantGray, .ThemeEdu.ThemeVariantGray': ThemeEdu.gray,
         // internal theme selectors
         '.ThemeInternal, .ThemeInternal.ThemeVariantLight, .ThemeInternal .ThemeVariantLight':
           ThemeInternal.default,
-        '.ThemeInternal .ThemeVariantDark, .ThemeInternal.ThemeVariantDark': ThemeInternal.dark
+        '.ThemeInternal .ThemeVariantDark, .ThemeInternal.ThemeVariantDark': ThemeInternal.dark,
+        '.ThemeInternal .ThemeVariantGray, .ThemeInternal.ThemeVariantGray': ThemeInternal.gray
       })
     }),
     require('tailwindcss-themer')({

diff --git a/packages/vue/src/components/BlockImageCarousel/BlockImageCarousel.vue b/packages/vue/src/components/BlockImageCarousel/BlockImageCarousel.vue
@@ -88,6 +88,10 @@ export default defineComponent({
       type: Array as PropType<Partial<ImageObject>[]>,
       required: false
     },
+    itemRole: {
+      type: String,
+      required: false
+    },
     loop: {
       type: Boolean,
       default: true
@@ -122,6 +126,9 @@ export default defineComponent({
         loop: this.loop,
         // this component has custom pagination
         pagination: false,
+        a11y: {
+          slideRole: this.itemRole as string | undefined
+        },
         on: {
           slideChange: (swiper: Swiper) => {
             // See https://github.com/vuejs/vue/issues/8721.

diff --git a/packages/vue/src/components/BlockImageGallery/BlockImageGallery.vue b/packages/vue/src/components/BlockImageGallery/BlockImageGallery.vue
@@ -3,6 +3,7 @@
     v-if="items"
     class="BlockImageGallery"
     :items="items"
+    item-role="link"
     :loop="false"
     :block-id="blockId"
   >

diff --git a/packages/vue/src/components/HeroMedia/HeroMedia.stories.js b/packages/vue/src/components/HeroMedia/HeroMedia.stories.js
@@ -4,11 +4,6 @@ import HeroMedia from './HeroMedia.vue'
 export default {
   title: 'Components/Heroes/HeroMedia',
   component: HeroMedia,
-  decorators: [
-    () => ({
-      template: `<div id="storyDecorator" class="absolute inset-0"><story/></div>`
-    })
-  ],
   parameters: {
     html: {
       root: '#storyDecorator'

diff --git a/packages/vue/src/components/HeroMedia/HeroMedia.vue b/packages/vue/src/components/HeroMedia/HeroMedia.vue
@@ -43,7 +43,7 @@
       <div
         v-if="hasCaptionArea"
         :class="captionVisibilityClass"
-        class="max-w-screen-3xl bg-gray-light bg-opacity-90 lg:bg-opacity-100 lg:block lg:pb-4 lg:px-3 xl:px-8 lg:pt-4 items-start p-4 mx-auto"
+        class="max-w-screen-3xl ThemeVariantGray bg-gray-light bg-opacity-90 lg:bg-opacity-100 ThemeVariantGray lg:block lg:pb-4 lg:px-3 xl:px-8 lg:pt-4 items-start p-4 mx-auto"
       >
         <BaseImageCaption :data="theImageData || customCaption" />
       </div>

diff --git a/packages/vue/src/components/MixinCarousel/MixinCarousel.vue b/packages/vue/src/components/MixinCarousel/MixinCarousel.vue
@@ -23,7 +23,7 @@
           </h2>
           <BaseLink
             v-if="link"
-            class="sm:block hidden"
+            class="ThemeVariantGray sm:block hidden"
             variant="primary"
             :to="typeof link === 'object' ? link : undefined"
             :href="typeof link != 'object' ? link : undefined"
@@ -196,7 +196,8 @@ export default defineComponent({
         initialSlide: this.initialSlide,
         a11y: {
           prevSlideMessage: this.heading ? this.heading + ' - Previous slide' : 'Previous slide',
-          nextSlideMessage: this.heading ? this.heading + ' - Next slide' : 'Next slide'
+          nextSlideMessage: this.heading ? this.heading + ' - Next slide' : 'Next slide',
+          slideRole: 'link'
         },
         breakpoints: {
           ...MixinCarouselOptions.breakpoints,

diff --git a/packages/vue/src/components/MixinFancybox/MixinFancybox.vue b/packages/vue/src/components/MixinFancybox/MixinFancybox.vue
@@ -283,6 +283,7 @@ export default defineComponent({
 <template>
   <a
     class="MixinFancybox group cursor-pointer block"
+    role="link"
     aria-label="Open in Lightbox"
     :href="src"
     :data-fancybox="galleryName || ''"

diff --git a/packages/vue/src/components/NavHeading/NavHeading.vue b/packages/vue/src/components/NavHeading/NavHeading.vue
@@ -6,15 +6,15 @@
     <template v-if="data.headingPage && data.heading">
       <BaseLink
         variant="none"
-        class="text-subtitle text-blue inline-block mb-4"
+        class="text-subtitle text-jpl-blue-lighter inline-block mb-4"
         link-class="p-2"
         :to="data.headingPage.url"
       >
         {{ data.heading }}
       </BaseLink>
     </template>
     <template v-else-if="data.heading">
-      <div class="text-subtitle text-blue inline-block mb-4">
+      <div class="text-subtitle text-jpl-blue-lighter inline-block mb-4">
         <span class="p-2">{{ data.heading }}</span>
       </div>
     </template>

diff --git a/packages/vue/src/components/SearchFilterGroup/SearchFilterGroup.vue b/packages/vue/src/components/SearchFilterGroup/SearchFilterGroup.vue
@@ -37,7 +37,7 @@
           class="form-check-label pl-2 tracking-normal align-middle"
         >
           {{ prettyFilterNames(bucket.key_as_string ? bucket.key_as_string : bucket.key) }}
-          <span class="text-gray-mid"> ({{ bucket.doc_count.toLocaleString() }}) </span>
+          <span class="text-gray-mid-dark"> ({{ bucket.doc_count.toLocaleString() }}) </span>
         </label>
       </div>
     </div>