Skip to content

Replace Chakra UI default color palette with Tailwind CSS color palette #49658

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 11 commits into
base: main
Choose a base branch
from
Open

Replace Chakra UI default color palette with Tailwind CSS color palette #49658

wants to merge 11 commits into from
+343 −131

Conversation

odaneau-astro
Copy link
Contributor

@odaneau-astro odaneau-astro commented Apr 23, 2025 •
edited by pierrejeambrun
Loading

✅ Changes made:

  • Added the Tailwind V4 color tokens to theme.ts in place of the default Chakra UI colors.
  • Replaced the default semantic tokens with the ones generated from the Tailwind color tokens
  • Updated the custom task state semantic tokens to use the newly added Tailwind color tokens
  • Updated references in the Navbar and Navbar button to use a dedicated semantic token for easier modification in the future

🎯 Motivation:

  • Usability: Clearer color naming and predictable gradations improve maintainability and scalability of the design system.
  • Consistency: Tailwind’s color system is familiar to many developers and aligns well with modern UI trends. The color palette is carefully crafted by expert designers and is suitable for a wide range of different design styles.

📷 Preview:
image
image

closes: #49658

@boring-cyborg boring-cyborg bot added the area:UI Related to UI/UX. For Frontend Developers. label Apr 23, 2025
bbovenzi
bbovenzi reviewed Apr 23, 2025
View reviewed changes
odaneau-astro
odaneau-astro commented Apr 23, 2025
View reviewed changes
@ashb ashb added this to the Airflow 3.0.1 milestone Apr 24, 2025
@odaneau-astro odaneau-astro requested a review from bbovenzi April 24, 2025 19:45
pierrejeambrun
pierrejeambrun reviewed Apr 28, 2025
View reviewed changes
Copy link
Member

@pierrejeambrun pierrejeambrun left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like where this is going. I agree the dark mode background was too dark too.

pierrejeambrun
pierrejeambrun reviewed May 6, 2025
View reviewed changes
Copy link
Member

@pierrejeambrun pierrejeambrun left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe the main page content background is not dark enough now. The contrast is too subtle I think, it's hard (at least for me to read) things in light gray such as History, Health, or Stats.

airflow-core/src/airflow/ui/src/theme.ts
Comment on lines -127 to -139
none: {
"50": { value: "#F7FBFD" },
"100": { value: "#F3F9FB" },
"200": { value: "#E4F2F7" },
"300": { value: "#D8ECF3" },
"400": { value: "#C8E5EE" },
"500": { value: "#BDDFEB" },
"600": { value: "#ADD8E6" },
"700": { value: "#5FB2CE" },
"800": { value: "#30819C" },
"900": { value: "#18414E" },
"950": { value: "#0C2027" },
},
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are missing the none color palette. How are no status tasks displayed ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The none color palette is defined in the semantic tokens section and uses the "gray" color palette.

@odaneau-astro
Copy link
Contributor Author

Maybe the main page content background is not dark enough now. The contrast is too subtle I think, it's hard (at least for me to read) things in light gray such as History, Health, or Stats.

I've darkened the background and lightened the color for "History", "Health", "Stats" to increase contrast.

pierrejeambrun
pierrejeambrun reviewed May 13, 2025
View reviewed changes
Copy link
Member

@pierrejeambrun pierrejeambrun left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks. Looks good overall.

Just noticed that the DurationChart colors are not working as expected (access directly a 'state' color such as failed.600.
Screenshot 2025-05-13 at 11 44 03

I think Brent plans on doing an in depth review of this PR for 3.1.0.

@eladkal
Copy link
Contributor

eladkal commented May 21, 2025

I tried this and it looks good!
Personally I prefer more grey color rather than blue.

@bbovenzi bbovenzi mentioned this pull request Jun 9, 2025
Open
2 tasks
@eladkal
Copy link
Contributor

eladkal commented Jun 10, 2025

Is there something blocking merging this PR?

@pierrejeambrun
Copy link
Member

pierrejeambrun commented Jun 10, 2025 •
edited
Loading

Is there something blocking merging this PR?

Just a more detailed review to be sure that everything is working as expected. Brent is planing on doing that but as this will land for 3.1.0 I assume he's focusing on more pressing bug fixes.

Also I think we still need to fix the issue mentioned in #49658 (review) (after that I think we can merge it and iterate before 3.1.0 to unblock it, cc: @bbovenzi)

bbovenzi
bbovenzi reviewed Jun 12, 2025
View reviewed changes
airflow-core/src/airflow/ui/src/theme.ts
"900": { value: "oklch(25.9% 0.062 265.566)" },
"950": { value: "oklch(17.9% 0.050 265.487)" },
},
// TAILWIND 4.0 COLORS
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we put a url to tailwind 4.0 here for future reference?

bbovenzi
bbovenzi reviewed Jun 12, 2025
View reviewed changes
Copy link
Contributor

@bbovenzi bbovenzi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should do more to double check the background set for all of our inputs, buttons and dropdowns:
Screenshot 2025-06-12 at 12 54 01 PM

As Pierre mentioned, we need to fix how we pass colors to the duration charts:
Screenshot 2025-06-12 at 12 55 54 PM

@bbovenzi
Copy link
Contributor

bbovenzi commented Jul 2, 2025

@odaneau-astro Do you mind taking a second look at the colors on our buttons and inputs? Would be nice to get this in for 3.1

@odaneau-astro
Copy link
Contributor Author

Will have some free time next week to address these issues. What's the cutoff for 3.1?

@bbovenzi
Copy link
Contributor

@odaneau-astro Sounds good. I think late August.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@bbovenzi bbovenzi bbovenzi left review comments

@pierrejeambrun pierrejeambrun pierrejeambrun left review comments

@ryanahamilton ryanahamilton Awaiting requested review from ryanahamilton ryanahamilton is a code owner

@jscheffl jscheffl Awaiting requested review from jscheffl jscheffl is a code owner

@shubhamraj-git shubhamraj-git Awaiting requested review from shubhamraj-git shubhamraj-git is a code owner

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
area:UI Related to UI/UX. For Frontend Developers.
Projects
None yet
Milestone
Airflow 3.1.0
Development

Successfully merging this pull request may close these issues.
6 participants
@odaneau-astro @eladkal @pierrejeambrun @bbovenzi @ashb @vatsrahul1001