chore: font organization (#523)

* font improvements and organization changes that allow for consuming projects to optimize fonts

* adjusting html package and vue-storybook app style imports

* fixing accessibility issue with 'hidden' slides in MixinCarousel

* minor version bump

apps/vue-storybook/.storybook/preview.ts

@@ -7,7 +7,7 @@ import vClickOutside from 'click-outside-vue3'
 import VueCompareImage from 'vue3-compare-image'
 import { createPinia } from 'pinia'
 import filters from '@explorer-1/vue/src/utils/filters'
-import '@explorer-1/common/src/scss/styles.scss'
+import '@explorer-1/common/src/scss/styles-with-fonts.scss'
 import { withGlobals, globalTypes } from './withGlobals'
 import customTheme from '@explorer-1/common-storybook/src/config/customTheme'
 import '@explorer-1/common-storybook/src/config/canvas.css'

package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "3.1.3",
+  "version": "3.2.0",
   "type": "module",
   "description": "Monorepo for JPL's design system, Explorer 1",
   "keywords": [

packages/common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/common",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "private": false,
   "publishConfig": {
     "access": "public"

packages/common/src/scss/_fonts.scss

@@ -35,8 +35,7 @@
   font-weight: 600;
   font-style: italic;
   font-display: swap;
-  src: url('../fonts/metropolis/Metropolis-SemiBoldItalic.woff2')
-    format('woff2');
+  src: url('../fonts/metropolis/Metropolis-SemiBoldItalic.woff2') format('woff2');
 }
 
 @font-face {
@@ -84,24 +83,21 @@
   font-weight: 700;
   font-style: italic;
   font-display: swap;
-  src: url('../fonts/archivo-narrow/ArchivoNarrow-BoldItalic.woff2')
-    format('woff2');
+  src: url('../fonts/archivo-narrow/ArchivoNarrow-BoldItalic.woff2') format('woff2');
 }
 
 @font-face {
   font-family: 'Archivo Narrow';
   font-weight: 600;
   font-style: normal;
   font-display: swap;
-  src: url('../fonts/archivo-narrow/ArchivoNarrow-SemiBold.woff2')
-    format('woff2');
+  src: url('../fonts/archivo-narrow/ArchivoNarrow-SemiBold.woff2') format('woff2');
 }
 
 @font-face {
   font-family: 'Archivo Narrow';
   font-weight: 600;
   font-style: italic;
   font-display: swap;
-  src: url('../fonts/archivo-narrow/ArchivoNarrow-SemiBoldItalic.woff2')
-    format('woff2');
+  src: url('../fonts/archivo-narrow/ArchivoNarrow-SemiBoldItalic.woff2') format('woff2');
 }

packages/common/src/scss/_typography.scss

@@ -1,6 +1,4 @@
 @use 'sass:math';
-@tailwind base;
-@tailwind utilities;
 
 // Conversion util for easier definition of font sizes by pixel size
 @function pxToRem($pxValue) {

packages/common/src/scss/components/_MixinCarousel.scss

@@ -75,12 +75,12 @@
     @apply overflow-visible #{!important};
 
     .swiper-slide {
-      @apply opacity-50 transition-opacity duration-500 ease-in-out h-auto;
+      @apply opacity-50 transition-opacity duration-500 ease-in-out h-auto pointer-events-none;
 
       &.swiper-slide-visible,
       &:focus,
       &:focus-within {
-        @apply opacity-100;
+        @apply opacity-100 pointer-events-auto;
       }
     }
   }

packages/common/src/scss/styles-with-fonts.scss

@@ -0,0 +1,2 @@
+@import 'fonts';
+@import 'styles.scss';

packages/common/src/scss/styles.scss

@@ -16,7 +16,6 @@
 
 // main elements
 @import 'forms';
-@import 'fonts';
 @import 'aspect-ratios';
 @import 'grid';
 @import 'typography';

packages/html/src/assets/scss/styles.scss

@@ -1 +1 @@
-@import './../../../node_modules/@explorer-1/common/src/scss/styles';
+@import '@explorer-1/common/src/scss/styles-with-fonts';

packages/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "private": false,
   "publishConfig": {
     "access": "public"

packages/vue/src/main.ts

@@ -6,7 +6,7 @@ import filters from './utils/filters'
 // @ts-ignore
 import vClickOutside from 'click-outside-vue3'
 import VueCompareImage from 'vue3-compare-image'
-import './assets/scss/styles.scss'
+import './assets/scss/styles-with-fonts.scss'
 import App from './App.vue'
 
 const pinia = createPinia()

packages/vue/src/templates/PageImageDetail/PageImageDetail.stories.js

@@ -58,11 +58,7 @@ export const ImageDetailPageData = {
       }
     ],
     keepExploringInstrument: BlockLinkTileCarouselData,
-    keepExploringMission: [
-      BlockLinkTileCarouselData[0],
-      BlockLinkTileCarouselData[1],
-      BlockLinkTileCarouselData[2]
-    ],
+    keepExploringMission: BlockLinkTileCarouselData,
     keepExploringTarget: BlockLinkTileCarouselData,
     label: 'Image',
     piaNumber: 'PIA23356',