Update color palette for one from Tailwind CSS with higher contrast #49658

odaneau-astro · 2025-04-23T20:24:04Z

✅ 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:

closes: #49658

airflow-core/src/airflow/ui/src/theme.ts

pierrejeambrun

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

pierrejeambrun

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.

pierrejeambrun · 2025-05-06T14:36:02Z

airflow-core/src/airflow/ui/src/theme.ts

-        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" },
-        },


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

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

odaneau-astro · 2025-05-08T14:21:56Z

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

Thanks. Looks good overall.

Just noticed that the DurationChart colors are not working as expected (access directly a 'state' color such as failed.600.

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

eladkal · 2025-05-21T07:06:10Z

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

eladkal · 2025-06-10T04:49:39Z

Is there something blocking merging this PR?

pierrejeambrun · 2025-06-10T14:51:06Z

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 · 2025-06-12T16:59:39Z

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


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

bbovenzi

We should do more to double check the background set for all of our inputs, buttons and dropdowns:

As Pierre mentioned, we need to fix how we pass colors to the duration charts:

bbovenzi · 2025-07-02T18:03:26Z

@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 · 2025-07-16T15:56:23Z

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

bbovenzi · 2025-07-16T16:03:35Z

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

.github/workflows/lighthouse-ci.yml

+    timeout-minutes: 15
+    name: Lighthouse Accessibility Audit
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: "Cleanup repo"
+        shell: bash
+        run: docker run -v "${GITHUB_WORKSPACE}:/workspace" -u 0:0 bash -c "rm -rf /workspace/*"
+      - name: "Checkout ${{ github.ref }} ( ${{ github.sha }} )"
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683  # v4.2.2
+        with:
+          persist-credentials: false
+      - name: "Prepare and cleanup runner"
+        run: ./scripts/ci/prepare_and_cleanup_runner.sh
+      - name: Setup pnpm
+        uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2  # v4.0.0
+        with:
+          version: 9
+          run_install: false
+      - name: "Setup node"
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020  # v4.4.0
+        with:
+          node-version: 21
+          cache: 'pnpm'
+          cache-dependency-path: 'airflow-core/src/airflow/**/pnpm-lock.yaml'
+      - name: "Restore eslint cache (ui)"
+        uses: apache/infrastructure-actions/stash/restore@1c35b5ccf8fba5d4c3fdf25a045ca91aa0cbc468
+        with:
+          path: airflow-core/src/airflow/ui/node_modules/
+          key: cache-ui-node-modules-v1-${{ runner.os }}-${{ hashFiles('airflow-core/src/airflow/ui/**/pnpm-lock.yaml') }}
+        id: restore-eslint-cache-ui
+      - run: cd airflow-core/src/airflow/ui && pnpm install --frozen-lockfile && pnpm build
+        env:
+          FORCE_COLOR: 2
+      - name: "Save eslint cache (ui)"
+        uses: apache/infrastructure-actions/stash/save@1c35b5ccf8fba5d4c3fdf25a045ca91aa0cbc468
+        with:
+          path: airflow-core/src/airflow/ui/node_modules/
+          key: cache-ui-node-modules-v1-${{ runner.os }}-${{ hashFiles('airflow-core/src/airflow/ui/**/pnpm-lock.yaml') }}
+          if-no-files-found: 'error'
+          retention-days: '2'
+        if: steps.restore-eslint-cache-ui.outputs.stash-hit != 'true'
+      - name: Run Lighthouse CI
+        run: |
+          npm install -g @lhci/cli@0.15.x
+          lhci autorun


odaneau-astro · 2025-07-31T14:54:16Z

Closed in favor of #53981

✅ Changes made: - Introduce semantic tokens for colors used across all components. This allows for user customization in the future (see apache#53443). - Added the Tailwind V4 color tokens to theme.ts in place of the default Chakra UI colors. This color palette offers better accessibility across both dark and light modes. - Updated the existing semantic tokens to use the newly added Tailwind color tokens instead of default Chakra colors. - Replaced all references to color Tokens with Semantic tokens to allow changing colors later without having to change the components. closes: apache#49658

✅ Changes made: - Introduce semantic tokens for colors used across all components. This allows for user customization in the future (see #53443). - Added the Tailwind V4 color tokens to theme.ts in place of the default Chakra UI colors. This color palette offers better accessibility across both dark and light modes. - Updated the existing semantic tokens to use the newly added Tailwind color tokens instead of default Chakra colors. - Replaced all references to color Tokens with Semantic tokens to allow changing colors later without having to change the components. closes: #49658

✅ Changes made: - Introduce semantic tokens for colors used across all components. This allows for user customization in the future (see apache#53443). - Added the Tailwind V4 color tokens to theme.ts in place of the default Chakra UI colors. This color palette offers better accessibility across both dark and light modes. - Updated the existing semantic tokens to use the newly added Tailwind color tokens instead of default Chakra colors. - Replaced all references to color Tokens with Semantic tokens to allow changing colors later without having to change the components. closes: apache#49658 (cherry picked from commit 1046874)

✅ Changes made: - Introduce semantic tokens for colors used across all components. This allows for user customization in the future (see apache#53443). - Added the Tailwind V4 color tokens to theme.ts in place of the default Chakra UI colors. This color palette offers better accessibility across both dark and light modes. - Updated the existing semantic tokens to use the newly added Tailwind color tokens instead of default Chakra colors. - Replaced all references to color Tokens with Semantic tokens to allow changing colors later without having to change the components. closes: apache#49658

✅ Changes made: - Introduce semantic tokens for colors used across all components. This allows for user customization in the future (see apache/airflow#53443). - Added the Tailwind V4 color tokens to theme.ts in place of the default Chakra UI colors. This color palette offers better accessibility across both dark and light modes. - Updated the existing semantic tokens to use the newly added Tailwind color tokens instead of default Chakra colors. - Replaced all references to color Tokens with Semantic tokens to allow changing colors later without having to change the components. closes: apache/airflow#49658 (cherry picked from commit 10468747fef650ab4100a08fff059f0cd6908cf9) GitOrigin-RevId: 54548996d9ca591d144067f9561a438070dc3b9b

odaneau-astro requested review from bbovenzi, jscheffl, pierrejeambrun, ryanahamilton and shubhamraj-git as code owners April 23, 2025 20:24

boring-cyborg bot added the area:UI Related to UI/UX. For Frontend Developers. label Apr 23, 2025

odaneau-astro force-pushed the main branch 2 times, most recently from 3d46743 to a4d0ab8 Compare April 23, 2025 20:28

bbovenzi reviewed Apr 23, 2025

View reviewed changes

airflow-core/src/airflow/ui/src/theme.ts Outdated Show resolved Hide resolved

airflow-core/src/airflow/ui/src/theme.ts Outdated Show resolved Hide resolved

odaneau-astro force-pushed the main branch from 9a67f6e to 7273581 Compare April 23, 2025 21:53

odaneau-astro commented Apr 23, 2025

View reviewed changes

airflow-core/src/airflow/ui/src/theme.ts Outdated Show resolved Hide resolved

ashb added this to the Airflow 3.0.1 milestone Apr 24, 2025

odaneau-astro requested a review from bbovenzi April 24, 2025 19:45

pierrejeambrun reviewed Apr 28, 2025

View reviewed changes

pierrejeambrun modified the milestones: Airflow 3.0.1, Airflow 3.1.0 May 6, 2025

pierrejeambrun reviewed May 6, 2025

View reviewed changes

odaneau-astro requested a review from pierrejeambrun May 8, 2025 14:22

pierrejeambrun reviewed May 13, 2025

View reviewed changes

bbovenzi mentioned this pull request Jun 9, 2025

Dark Mode: Optimize Label Saturation, Background & Navbar Colors #51416

Closed

2 tasks

bbovenzi reviewed Jun 12, 2025

View reviewed changes

odaneau-astro requested a review from potiuk as a code owner July 22, 2025 15:36

odaneau-astro force-pushed the main branch from e8fdd9d to b6a9355 Compare July 22, 2025 16:25

github-advanced-security bot found potential problems Jul 22, 2025

View reviewed changes

odaneau-astro closed this Jul 27, 2025

odaneau-astro force-pushed the main branch from 388b775 to 2c677a4 Compare July 27, 2025 16:54

odaneau-astro mentioned this pull request Jul 31, 2025

Update color palette and leverage Chakra semantic tokens #53981

Merged

kaxil removed this from the Airflow 3.1.0 milestone Sep 14, 2025

Update color palette for one from Tailwind CSS with higher contrast #49658

Update color palette for one from Tailwind CSS with higher contrast #49658

Uh oh!

Conversation

odaneau-astro commented Apr 23, 2025 • edited by pierrejeambrun Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

pierrejeambrun left a comment

Choose a reason for hiding this comment

Uh oh!

pierrejeambrun left a comment

Choose a reason for hiding this comment

Uh oh!

pierrejeambrun May 6, 2025

Choose a reason for hiding this comment

Uh oh!

odaneau-astro May 8, 2025

Choose a reason for hiding this comment

Uh oh!

odaneau-astro commented May 8, 2025

Uh oh!

pierrejeambrun left a comment • 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!

eladkal commented May 21, 2025

Uh oh!

eladkal commented Jun 10, 2025

Uh oh!

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

Uh oh!

Uh oh!

bbovenzi Jun 12, 2025

Choose a reason for hiding this comment

Uh oh!

bbovenzi left a comment

Choose a reason for hiding this comment

Uh oh!

bbovenzi commented Jul 2, 2025

Uh oh!

odaneau-astro commented Jul 16, 2025

Uh oh!

bbovenzi commented Jul 16, 2025

Uh oh!

Check warning

odaneau-astro commented Jul 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

odaneau-astro commented Apr 23, 2025 •

edited by pierrejeambrun

Loading

pierrejeambrun left a comment •

edited

Loading

pierrejeambrun commented Jun 10, 2025 •

edited

Loading

odaneau-astro commented Jul 31, 2025 •

edited

Loading