Add custom Tailwind themes and a styled Button component by aaronxsu · Pull Request #667 · azavea/echo-locator

aaronxsu · 2025-06-21T21:32:54Z

Overview

This PR:

adds project-specific VS code settings especially for tailwind css files
adds custom themes based on design tokens in Figma
creates a styled button component and puts examples on a components page
updates configs to allow absolute import paths

Checklist

fixup! commits have been squashed
CHANGELOG.md updated with summary of features or fixes, following
Keep a Changelog guidelines
README.md updated if necessary to reflect the changes
Run ./scripts/format to lint, format, and fix the application source code.
CI passes after rebase

Demo

Notes

I initially just wanted to define the themes based on Figma design tokens, but then noticed that a good way to test how they work would be creating a styled component, so I took the button component card and included it in the same PR. Changes are separated by commits, so they should be handy to review.

Testing Instructions

Go to http://localhost:9966/components and make sure the buttons align with the designs

Resolves #646
Resolves #647

aaronxsu · 2025-06-23T15:47:21Z

In #648, I will add leftIcon, rightIcon, and label props to the Button component to parameterize it further.

rachelekm

Nice! This is looking really good! My only initial comment is to flesh out the button variants so they align with all button style and size types in the figma system design page.

rachelekm · 2025-06-23T19:15:19Z

+            orange: "bg-orange-200 text-orange-800 hover:bg-orange-300",
+        },
+        size: {
+            default: "h-9 px-5 py-2 min-w-9",


Instead of default, let's make these entries "large", "medium" and "small", using their respective figma sizing properties. And then for the defaultVariants let's set size to "small" to accomodate mobile-first.

And then for the defaultVariants let's set size to "small" to accomodate mobile-first.

I thought about it in the first round of development. But after inspecting the buttons in the mobile v.s. desktop designs, I did not find a definitive answer to this. I think maybe setting default to medium makes more sense.

Sometimes a large button is used in the mobile view, for example the finish button; And Sometimes a medium button is used in the mobile view, for example the detail button. large and medium differ in height, x-axis padding, and font size.

~~6a32ba2~~

Edit: 682d1a4

Good observation, medium as the default seems like the way to go!

rachelekm · 2025-06-23T19:15:52Z

+        variant: {
+            primary: "bg-teal-800 text-white hover:bg-teal-950",
+            outline: "border border-gray-300 bg-transparent hover:bg-gray-100",
+            orange: "bg-orange-200 text-orange-800 hover:bg-orange-300",


Can we also add the secondary style variant?

I was wondering about that too! I saw the secondary button in the button component list, but did not get any luck finding where it is actually used in the mobile or desktop design. So I ended up removing it. I could add secondary back though.

Edit: After a closer look, I found that the "+" and "-" buttons have the same styling as secondary- going to add it back now.

~~6a32ba2~~

Edit: 682d1a4

Thanks! Even if not immediately used, because we're implementing a headless library it might be helpful to implement every variant from the design system page so that if we need to add any other small UI down the road we've already got some form of cohesive styling setup

rachelekm · 2025-06-23T19:19:30Z

+                                List all neighborhoods
+                            </Button>
+                            <Button variant="outline">
+                                <ArrowLeftIcon className="font-normal h-[18px] w-[18px] text-black" />


I saw you took out the icon sizing in the button styles but I imagine this group of icon class names would be repeated often, do you feel like it's worth keeping out for now? Looks like this would also be handled in your work for #648 so feel free to ignore!

I removed the icon size button in 4b032b9 because it was a leftover from my experiments. In the mobile or desktop designs, the icon buttons seem to have the same styling as the small, medium, and large buttons. So I suspect we do not actually need a special size for icon buttons. Please correct me if this is not the case though. e.g. those arrow buttons next to "Continue" etc

Edit: Though the "X" button that closes or deletes some stuff seems to have its own styling like below:

How about this: let's add back icon and only for sizing. We will use outline variant for these X buttons, and then override the background or box shadow etc in the specific places where they are used.

~~6a32ba2~~

Edit: 682d1a4

Thanks for clarifying I misinterpreted that icon size config thinking it affected child component sizing like ArrowLeftIcon and ArrowRightIcon. I think having a separate icon variant makes sense though!

rachelekm · 2025-06-23T19:21:40Z

+  "css.validate": false,
+  "less.validate": false,
+  "scss.validate": false
+}


Nice, this will be helpful! Maybe let's also add something like the below to the .gitignore so that if anyone has their own personal vs code settings it isn't accidentally committed:

.vscode/* !.vscode/settings.json

~~0549ba9~~

Edit: ec5d46c

rachelekm · 2025-06-23T19:33:24Z

        "react-aria-components": "^1.10.1",
        "react-dom": "^19.1.0",
        "react-router": "^7.6.2",
+        "tailwind-variants": "^1.0.0",


I haven't used tailwind-variants before but this is interesting and seems really helpful. Interesting that it's made by HeroUI which is one of the component libraries we thought about using and is react-aria + tailwind under the hood!

rachelekm · 2025-06-23T19:34:34Z

+            {...props}
+            // composeRenderProps is a utility from React Aria Components
+            // merging a user's className with component-specific classes.
+            // This correctly handles all types and states.


rachelekm · 2025-06-23T19:35:18Z

+            components: "/src/components",
+            pages: "/src/pages",
+        },
+    },


This will be helpful, thank you!

aaronxsu · 2025-06-23T21:04:16Z

@rachelekm thanks for the review and the suggestions- they are great. I addressed them and update the components page to show different sizes and variants more explicitly. Please let me know if there is any question.

aaronxsu · 2025-06-23T21:51:52Z

Oh, I saw this one: Compare favorites in the design system, but did not see it in the designs for mobile or desktop. Did I miss something? Or is it removed from the designs? (I vaguely recall a mention of it, but I am not certain

rachelekm

This looks really great, on the development side this is good to go!

Documenting that we just discussed this component in a huddle and it will be implemented in upcoming work for #648 since that already includes utilizing react-aria's ButtonGroup component:

Oh, I saw this one: Compare favorites in the design system, but did not see it in the designs for mobile or desktop. Did I miss something? Or is it removed from the designs? (I vaguely recall a mention of it, but I am not certain

philippschmitt · 2025-06-24T15:22:01Z

Alright, sorry for how long this took me but hopefully things will go more quickly now that I have the project set up. Looks good overall! I pushed a few small tweaks. Good to go from my POV.

aaronxsu · 2025-06-24T16:45:17Z

Thank you both for the reviews and the design tweaks. I squashed my fixup commits and added a changelog entry. Will merge pending CI.

aaronxsu requested a review from rachelekm June 23, 2025 15:03

aaronxsu assigned rachelekm Jun 23, 2025

rachelekm reviewed Jun 23, 2025

View reviewed changes

aaronxsu requested a review from rachelekm June 23, 2025 21:04

aaronxsu force-pushed the feature/asu/bootstrap-new-frontend branch from 0d9d762 to 66dd634 Compare June 23, 2025 21:08

Base automatically changed from feature/asu/bootstrap-new-frontend to develop June 23, 2025 21:13

aaronxsu force-pushed the feature/asu/frontend-themes branch from 6a32ba2 to 682d1a4 Compare June 23, 2025 21:26

rachelekm approved these changes Jun 23, 2025

View reviewed changes

aaronxsu and others added 10 commits June 24, 2025 12:42

Add project-specific VS Code settings

80e827f

Add tailwind svg related deps

b8b580a

Add Tailwind CSS theme and styles based on Figma design

d844af8

Add Button component and update the components page

3bb11c7

Update configs to allow absolute path imports

f0775c6

Enable text antialising (webkit browsers)

d691e72

Add/overwrite Tailwind shadow styles

9b59650

Increase focus style contrast

65f33f5

Button style tweak

e147a76

Update changelog

f22ba16

aaronxsu force-pushed the feature/asu/frontend-themes branch from f37c2e2 to f22ba16 Compare June 24, 2025 16:44

aaronxsu merged commit a14227e into develop Jun 24, 2025
6 checks passed

aaronxsu deleted the feature/asu/frontend-themes branch June 24, 2025 16:49

Uh oh!

Conversation

aaronxsu commented Jun 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

Checklist

Demo

Notes

Testing Instructions

Uh oh!

aaronxsu commented Jun 23, 2025

Uh oh!

rachelekm left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aaronxsu Jun 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aaronxsu Jun 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aaronxsu Jun 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aaronxsu Jun 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aaronxsu Jun 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aaronxsu Jun 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aaronxsu commented Jun 23, 2025

Uh oh!

aaronxsu commented Jun 23, 2025

Uh oh!

rachelekm left a comment

Choose a reason for hiding this comment

Uh oh!

philippschmitt commented Jun 24, 2025

Uh oh!

aaronxsu commented Jun 24, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

aaronxsu commented Jun 21, 2025 •

edited

Loading

aaronxsu Jun 23, 2025 •

edited

Loading

aaronxsu Jun 23, 2025 •

edited

Loading

aaronxsu Jun 23, 2025 •

edited

Loading

aaronxsu Jun 23, 2025 •

edited

Loading

aaronxsu Jun 23, 2025 •

edited

Loading

aaronxsu Jun 23, 2025 •

edited

Loading