Feature: theming enhancements and additions #459

stephiescastle · 2024-06-11T00:16:48Z

Checklist

Include a description of your pull request and instructions for the reviewer to verify your work.
Link to the issue if this PR is issue-specific.
Create/update the corresponding story if this includes a UI component.
Create/update documentation. If not included, tell us why.
List the environments / browsers in which you tested your changes.
Tests, linting, or other required checks are passing.
PR has an informative and human-readable title
- PR titles are used to generate the change log in releases; good ones make that easier to scan.
- PRs will be broadly categorized in the change log, but for even easier scanning, consider prefixing with a component name or other useful categorization, e.g., "BaseButton: fix layout bug", or "Storybook: Update dependencies".
PR has been tagged with a SemVer label and a general category label, or skip-changelog.
- These tags are used to do the aforementioned broad categorization in the change log and determine what the next release's version number should be.
- Release Drafter will attempt to do the category labeling for you! Please double-check its work.

Description

Fixes https://github.com/nasa-jpl/www/issues/50
Fixes https://github.com/nasa-jpl/www/issues/53
Starts https://github.com/nasa-jpl/www/issues/48
Starts https://github.com/nasa-jpl/www/issues/21

modifies structure of color definitions
updates color definitions
updates heading type styles for EDU theme
adds star background as a themed Tailwind class (usage for EDU: class="bg-star bg-primary").
adds tailwindcss-themer
moves theme settings to the nuxt module (no longer need to manually add theme classes)
adds a theme store that can be used as a vue directive (can check which theme is in use and use that in Vue logic). The nuxt module automatically installs this store and sets the theme accordingly.
fixes all unsplash images in storybook
adds theming to existing components. this does not include new components needed by EDU, or any of the "pill" style badges added to cards.
adds PageEventDetail component
updated Foundations documentation to include themes and dynamic color tokens, and added to @explorer-1/vue-storybook
adds story for MixinCarousel

Using the themes

Themes can be:

Used as Tailwind modifiers/directives
Retrieved from the pinia store to use in Vue logic
Used as a class at the block level, with some caveats

Tailwind modifiers and directives

The theme can be used as an inline Tailwind modifier

defaultTheme:
edu:
internal:

<div class="bg-jpl-blue-dark edu:bg-primary">

They also work with the @apply directive:

.custom_class {
  @apply font-medium edu:font-extrabold
}

In Vue logic

Options API

<script>
import { mapStores } from 'pinia'
import { useThemeStore } from '../../store/theme'

export default defineComponent({
  computed: {
    ...mapStores(useThemeStore),
    buttonVariant() {
      return this.themeStore.theme === 'ThemeEdu' ? 'reverse-primary' : 'primary'
    }
  }
})
</script>

Composition API

<script setup>
import { useThemeStore } from '../../store/theme'

const themeStore = useThemeStore()

const buttonVariant = computed(() => {
  return this.themeStore.theme === 'ThemeEdu' ? 'reverse-primary' : 'primary'
})
</script>

Used as a class

.defaultTheme
.ThemeEdu
.ThemeInteral

These classes are generally applied to the <html> element, but they can also be used at the block level. However, if you plan to do this, you will need to provide fallbacks for all theme variations within the block.

For example: the code from above would need to be changed to work as expected in the below example:

<html class="ThemeEdu">
  ...
  <div class="ThemeInternal>
-   <div class="bg-jpl-blue-dark edu:bg-primary">
+   <div class="bg-jpl-blue-dark edu:bg-primary internal:bg-jpl-blue-dark">

Note that using theme classes directly only affects CSS -- They will not be taken into account with useThemeStore().

Implementation Notes

At this point, the documentation in @explorer-1/html-storybook will be deprecated (this is the storybook that is published to our gh pages), as it won't accurately show all of the theming differences. This was the motivation behind moving foundational documentation to @explorer-1/vue-storybook.
In a follow-up task, I will be adding CI checks that will make @explorer-1/vue-storybook available: https://github.com/nasa-jpl/www/issues/81
The star background sizing isn't quite right. I'll continue to tweak this.

Instructions to test

pnpm i
make vue-storybook
New colors added: http://localhost:6006/?path=/docs/foundation-colors--docs
Try switching between themes on the following:
- Updated theme documentation
- Dynamic tokens
- Themed Heading sizes
- BlockCTA
- Featured Search Result
- TheFooter (still needs minor adjustments)
- Event Detail page
- Content page

You can also test this with the EDU frontend:

Checkout https://github.com/nasa-jpl/www/pull/74
make checkout-submodules
pnpm i
make frontend
View at http://localhost:3000
make edu
View at http://localhost:3001/edu/

Tested in the following environments/browsers:

Operating System

macOS
iOS
iPadOS
Windows

Browser

jamesray · 2024-06-12T20:31:59Z

Great work @stephiescastle !

stephiescastle added 5 commits June 10, 2024 15:24

adding theme store, adjusting colors, fixing unsplash images

b397682

merging in latest main

b6e8ad6

adding more options to the nuxt module, adding PageEventDetail component

b3e4958

cleanup

6bc8ff9

lint

d3274db

stephiescastle marked this pull request as draft June 11, 2024 00:16

github-actions bot added the feature label Jun 11, 2024

stephiescastle added 20 commits June 10, 2024 17:37

wip fixing nuxt module build

ae41148

updating package.json and updating nuxt module tsconfig

907ba8b

fixing typescript errors in nuxt module

a50b9be

fixing nuxt module build error

90605ab

fixing type error in PageEventDetail

8dbf8e5

adding reverse-primary button variation, adding bg-stars

a8aa48d

updating gitignore

9825c70

deleting files that shouldn't be tracked

8350274

gitignore

f6ab1be

cleaning up files that should be ignored

4e817eb

gitignore

41816d8

rebuilding packages

f31294b

updating color tokens in components

a5c697e

cleaning up star backgrounds

e1bea1f

lint

98c6d0d

fixing html-storybook

efd8a32

updating type styles for EDU theme

91c0c1c

adding foundational docs to vue-storybook, adding mixinCarousel story

0b5039b

cleaning up some storybook assets

c14eb68

fixing order of operations when building nuxt module

90a281a

stephiescastle added storybook This issue relates to Storybook.js minor Contains new features or enhancements feature parity Work needed to maintain consistency between our implementations of Explorer 1 labels Jun 12, 2024

stephiescastle changed the title ~~Feature/additional theming~~ Feature: theming enhancements and additions Jun 12, 2024

stephiescastle marked this pull request as ready for review June 12, 2024 05:01

stephiescastle requested a review from jamesray June 12, 2024 05:01

stephiescastle added 2 commits June 12, 2024 07:31

adding assets to vue-storybook public folder

46ba811

adding PageListingIndex template component

eb1e6f8

jamesray approved these changes Jun 12, 2024

View reviewed changes

stephiescastle merged commit bef830e into main Jun 12, 2024
1 check passed

stephiescastle deleted the feature/additional-theming branch June 12, 2024 20:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature: theming enhancements and additions #459

Feature: theming enhancements and additions #459

stephiescastle commented Jun 11, 2024 •

edited

Loading

jamesray commented Jun 12, 2024

Feature: theming enhancements and additions #459

Feature: theming enhancements and additions #459

Conversation

stephiescastle commented Jun 11, 2024 • edited Loading

Checklist

Description

Using the themes

Tailwind modifiers and directives

In Vue logic

Options API

Composition API

Used as a class

Implementation Notes

Instructions to test

Tested in the following environments/browsers:

Operating System

Browser

jamesray commented Jun 12, 2024

stephiescastle commented Jun 11, 2024 •

edited

Loading