Major: New branding (#792)

* Round 3: Updated branding colors (#764)

* updating migration docs

* minor revisions for readability

* upgrading storybook to 9.1.15, fixing docs order, adding @nasa-jpl/explorer-1 version to intro mdx

* minor config changes for html rendering

* fixing html output rendering

* fixing some arg types in stories

* fixing css fix for html copy button

* improvement documentation in stories

* changeset

* fixing color themes and ThemeInternal

* updating node version

* Revert "updating node version"

This reverts commit 16eeabd.

* fixing BlockText right padding

* fixing JSDoc for BaseAccordionItem, BasePill, and BlockText

* updating types and jsdoc comments for improved automated docs in storybook

* Restoring global tag in html storybook

* fixing type errors

* updating with new brand colors, keeping aliases for now

* adding 'click to copy' color component to Storybook (wip)

* adding all colors and updating docs

* fixing text contrast of links in internal footer

* Branding: Updated Fonts (#786)

* WIP updating typefaces

* updating the rest of the vue components

* small fixes after QA with WWW

* adjustments to swimlane component

* tweaks after meeting with designers

* initial changes to internal nav and footer

* finishing internal components

* using outline version of tribrand for EDU

* removing unnecessary font variant usage

* cleaning out unused fonts

* fixing some final colors in nav elements

* removing semibold weight as it is not supported by Helvetica Now

* adjusting workflow to use fonts from action artifact in vue-storybook

* adding licensed fonts to html storybook

* fixes after design review

* addressing fixes after regression testing

* adjusting gray-mid-dark color

* fixing base audio contrast

* changeset

Author: stephiescastle

.changeset/little-humans-taste.md

@@ -0,0 +1,10 @@
+---
+"@explorer-1/common": major
+"@explorer-1/html": major
+"@explorer-1/vue": major
+"@nasa-jpl/explorer-1": major
+"@explorer-1/common-storybook": minor
+"@explorer-1/vue-storybook": minor
+---
+
+Updating Explorer-1 with JPL's new branding colors and typefaces.

.changeset/sixty-ducks-exercise.md

@@ -0,0 +1,9 @@
+---
+"@explorer-1/common-storybook": patch
+"@explorer-1/html-storybook": patch
+"@explorer-1/vue-storybook": patch
+"@explorer-1/vue": patch
+"@nasa-jpl/explorer-1": patch
+---
+
+Documentation updates, Storybook improvements.

.github/workflows/storybook.yml

@@ -31,6 +31,43 @@ jobs:
         with:
           fetch-depth: 0
 
+      - name: Find Latest Licensed Font Run ID
+        id: find_run
+        uses: actions/github-script@v6
+        with:
+          github-token: ${{ secrets.EXPLORER_1_FONTS_TOKEN }}
+          script: |
+            const { owner, repo } = context.repo;
+
+            // Query the private repo for the latest successful workflow run
+            const runs = await github.rest.actions.listWorkflowRuns({
+              owner: 'nasa-jpl',
+              repo: 'explorer-1-fonts',
+              workflow_id: 'generate-css-artifact.yml',
+              branch: 'main',
+              status: 'success',
+              per_page: 1
+            });
+
+            const runId = runs.data.workflow_runs[0]?.id;
+
+            if (!runId) {
+              core.setFailed("Could not find a successful run for the licensed font workflow.");
+              return;
+            }
+
+            console.log(`Found Run ID: ${runId}`);
+            core.setOutput('run_id', runId);
+
+      - name: Download Licensed Font Artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: explorer-1-licensed-fonts
+          repository: nasa-jpl/explorer-1-fonts
+          path: ./packages/common-storybook/src/
+          run-id: ${{ steps.find_run.outputs.run_id }}
+          github-token: ${{ secrets.EXPLORER_1_FONTS_TOKEN }}
+
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
 
@@ -43,8 +80,22 @@ jobs:
       - name: Install dependencies 🧱
         run: pnpm i
 
+      - name: Generate Font Data and Flag Modules (Shell Injection)
+        run: |
+          # Ensure the primary shell script is executable
+          chmod +x packages/common-storybook/src/scripts/inject-fonts-shell.sh
+
+          # Execute the shell script, passing all necessary paths as arguments
+          ./packages/common-storybook/src/scripts/inject-fonts-shell.sh \
+            ./packages/common-storybook/src \
+            ./packages/common-storybook/src/licensed-fonts-base64.css \
+            ./packages/common-storybook/src/fonts-data.js \
+            ./packages/common-storybook/src/font-flag.js \
+
       - name: Build Storybook
         run: make vue-storybook-build
+        env:
+          VITE_CHROMATIC_BUILD: true
 
       - uses: chromaui/action@latest
         # Options required for Chromatic's GitHub Action
@@ -59,6 +110,7 @@ jobs:
           onlyChanged: true
 
   publish_html:
+    needs: [publish_vue]
     timeout-minutes: 30
     runs-on: ubuntu-latest
     steps:
@@ -67,6 +119,43 @@ jobs:
         with:
           fetch-depth: 0
 
+      - name: Find Latest Licensed Font Run ID
+        id: find_run
+        uses: actions/github-script@v6
+        with:
+          github-token: ${{ secrets.EXPLORER_1_FONTS_TOKEN }}
+          script: |
+            const { owner, repo } = context.repo;
+
+            // Query the private repo for the latest successful workflow run
+            const runs = await github.rest.actions.listWorkflowRuns({
+              owner: 'nasa-jpl',
+              repo: 'explorer-1-fonts',
+              workflow_id: 'generate-css-artifact.yml',
+              branch: 'main',
+              status: 'success',
+              per_page: 1
+            });
+
+            const runId = runs.data.workflow_runs[0]?.id;
+
+            if (!runId) {
+              core.setFailed("Could not find a successful run for the licensed font workflow.");
+              return;
+            }
+
+            console.log(`Found Run ID: ${runId}`);
+            core.setOutput('run_id', runId);
+
+      - name: Download Licensed Font Artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: explorer-1-licensed-fonts
+          repository: nasa-jpl/explorer-1-fonts
+          path: ./packages/common-storybook/src/
+          run-id: ${{ steps.find_run.outputs.run_id }}
+          github-token: ${{ secrets.EXPLORER_1_FONTS_TOKEN }}
+
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
 
@@ -79,8 +168,22 @@ jobs:
       - name: Install dependencies 🧱
         run: pnpm i
 
+      - name: Generate Font Data and Flag Modules (Shell Injection)
+        run: |
+          # Ensure the primary shell script is executable
+          chmod +x packages/common-storybook/src/scripts/inject-fonts-shell.sh
+
+          # Execute the shell script, passing all necessary paths as arguments
+          ./packages/common-storybook/src/scripts/inject-fonts-shell.sh \
+            ./packages/common-storybook/src \
+            ./packages/common-storybook/src/licensed-fonts-base64.css \
+            ./packages/common-storybook/src/fonts-data.js \
+            ./packages/common-storybook/src/font-flag.js \
+
       - name: Build HTML Storybook
         run: make html-storybook-build
+        env:
+          VITE_CHROMATIC_BUILD: true
 
       - uses: chromaui/action@latest
         # Options required for Chromatic's GitHub Action

.gitignore

@@ -68,6 +68,9 @@ storybook_compiled
 # Tailwind
 dist
 
+# Licensed Fonts
+helvetica-now/
+
 # copied assets when preparing builds
 apps/**/.storybook/static/dist
 packages/**/src/assets/fonts
@@ -78,4 +81,8 @@ packages/**/public/edu/explorer-1/
 !public/explorer-1/**/.gitkeep
 !packages/common/src/public/explorer-1
 apps/vue-storybook/public/fonts
-apps/vue-storybook/public/css
+apps/vue-storybook/public/css
+
+# ci-generated files
+packages/common-storybook/src/fonts-data.js
+packages/common-storybook/src/font-flag.js

apps/html-storybook/.storybook/manager-head.html

@@ -2,12 +2,6 @@
   /* styles for the storybook sidebar */
   @import 'dist/css/font-face.css';
 
-  .sidebar-item {
-    font-family: Metropolis, sans-serif !important;
-    line-height: 1.2rem !important;
-    display: flex !important;
-    align-items: center !important;
-  }
   .sidebar-item svg:not([type='document']) {
     color: inherit !important;
   }

apps/html-storybook/.storybook/preview-head.html

@@ -22,12 +22,12 @@
   /* styles for docs tab */
   /* @import 'dist/css/font-face.css'; */
 
-  #storybook-docs
+  /* #storybook-docs
     .sbdocs
     .sbdocs-content
     *:not(.sbdocs-preview, .sbdocs-preview *, pre, pre *, code, code *) {
     font-family: Metropolis, sans-serif !important;
-  }
+  } */
   /* make docs have full width iframes
   ** rescopes width to all nested divs, not the container wrapper */
   .sbdocs.sbdocs-content {

apps/html-storybook/.storybook/preview.ts

@@ -7,7 +7,16 @@ import '@explorer-1/common-storybook/src/config/canvas.css'
 import { withGlobals } from './withGlobals'
 import beautify from 'js-beautify'
 import { beautifyHtmlOptions } from '@explorer-1/common-storybook/src/plugins/beautifyHtmlOptions.js'
-
+import { injectLicensedFonts } from '@explorer-1/common-storybook/src/fonts-data.js'
+import '@explorer-1/common-storybook/src/font-flag.js'
+/* Handle Licensed Fonts in CI */
+// @ts-ignore
+const IS_CHROMATIC_BUILD = import.meta.env.VITE_CHROMATIC_BUILD === 'true'
+// @ts-ignore
+if (IS_CHROMATIC_BUILD && window.__IS_LICENSED_FONT_AVAILABLE__) {
+  console.log('✅ Licensed Fonts loaded.')
+  injectLicensedFonts()
+}
 // viewports that match our tailwind config
 const customViewports = {
   screenSm: {

apps/vue-storybook/.storybook/manager-head.html

@@ -1,13 +1,6 @@
 <style type="text/css">
   /* styles for the storybook sidebar */
-  @import 'css/font-face.css';
 
-  .sidebar-item {
-    font-family: Metropolis, sans-serif !important;
-    line-height: 1.2rem !important;
-    display: flex !important;
-    align-items: center !important;
-  }
   .sidebar-item svg:not([type='document']) {
     color: inherit !important;
   }

apps/vue-storybook/.storybook/preview-head.html

@@ -1,13 +1,6 @@
 <style type="text/css">
   /* styles for docs tab */
-  /* @import 'dist/css/font-face.css'; */
 
-  #storybook-docs
-    .sbdocs
-    .sbdocs-content
-    *:not(.sbdocs-preview, .sbdocs-preview *, pre, pre *, code, code *) {
-    font-family: Metropolis, sans-serif !important;
-  }
   /* make docs have full width iframes
   ** rescopes width to all nested divs, not the container wrapper */
   .sbdocs.sbdocs-content {

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

@@ -16,6 +16,16 @@ import '@explorer-1/common-storybook/src/config/canvas.css'
 import VueObserveVisibility from 'vue3-observe-visibility'
 import beautify from 'js-beautify'
 import { beautifyHtmlOptions } from '@explorer-1/common-storybook/src/plugins/beautifyHtmlOptions.js'
+import { injectLicensedFonts } from '@explorer-1/common-storybook/src/fonts-data.js'
+import '@explorer-1/common-storybook/src/font-flag.js'
+/* Handle Licensed Fonts in CI */
+// @ts-ignore
+const IS_CHROMATIC_BUILD = import.meta.env.VITE_CHROMATIC_BUILD === 'true'
+// @ts-ignore
+if (IS_CHROMATIC_BUILD && window.__IS_LICENSED_FONT_AVAILABLE__) {
+  console.log('✅ Licensed Fonts loaded.')
+  injectLicensedFonts()
+}
 
 const pinia = createPinia()
 const router = createRouter({