You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by "odaneau-astro (via GitHub)" <gi...@apache.org> on 2025/07/31 14:52:54 UTC
[PR] Update color palette and leverage Chakra semantic tokens [airflow]
odaneau-astro opened a new pull request, #53981:
URL: https://github.com/apache/airflow/pull/53981
Newer PR for https://github.com/apache/airflow/pull/49658
✅ 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
- Added semantic tokens for button colors, inputs and more.
- Replaced all references to color Tokens with Semantic tokens to allow changing colors later without having to change the components.
🎯 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: https://github.com/apache/airflow/pull/49658
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Update color palette and leverage Chakra semantic tokens [airflow]
Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi commented on code in PR #53981:
URL: https://github.com/apache/airflow/pull/53981#discussion_r2334228583
##########
airflow-core/src/airflow/ui/src/pages/Dag/Calendar/calendarUtils.ts:
##########
@@ -143,20 +143,26 @@ export const getCalendarCellColor = (
colorMode: CalendarColorMode = "total",
): string | { _dark: string; _light: string } => {
if (runs.length === 0) {
- return { _dark: "gray.700", _light: "gray.100" };
+ const colorScheme = colorMode === "total" ? TOTAL_COLOR_INTENSITIES : FAILURE_COLOR_INTENSITIES;
+ return colorScheme[0];
}
const counts = calculateRunCounts(runs);
- if (counts.planned > 0) {
+ // Only show planned color if there are no actual runs (only planned)
+ if (counts.planned > 0 && counts.total === counts.planned) {
return PLANNED_COLOR;
}
- const targetCount = colorMode === "total" ? counts.total : counts.failed;
- const intensityLevel = getIntensityLevel(targetCount, colorMode);
- const colorScheme = colorMode === "total" ? TOTAL_COLOR_INTENSITIES : FAILURE_COLOR_INTENSITIES;
+ // For failed runs mode, show failed runs
+ if (colorMode === "failed") {
+ const intensityLevel = getIntensityLevel(counts.failed, colorMode);
+ return FAILURE_COLOR_INTENSITIES[intensityLevel] ?? FAILURE_COLOR_INTENSITIES[0];
+ }
- return colorScheme[intensityLevel] ?? { _dark: "gray.700", _light: "gray.100" };
+ // For total runs mode, show total runs in blue
Review Comment:
blue is fine.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Update color palette and leverage Chakra semantic tokens [airflow]
Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi commented on code in PR #53981:
URL: https://github.com/apache/airflow/pull/53981#discussion_r2283236534
##########
airflow-core/src/airflow/api_fastapi/auth/managers/simple/ui/src/main.tsx:
##########
@@ -16,25 +16,144 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { ChakraProvider, defaultSystem } from "@chakra-ui/react";
+import { ChakraProvider } from "@chakra-ui/react";
import { QueryClientProvider } from "@tanstack/react-query";
import { ThemeProvider } from "next-themes";
+import React from "react";
import { CookiesProvider } from "react-cookie";
import { createRoot } from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import { router } from "src/router";
+import { system } from "src/theme";
import { queryClient } from "./queryClient";
-createRoot(document.querySelector("#root") as HTMLDivElement).render(
- <ChakraProvider value={defaultSystem}>
- <ThemeProvider attribute="class" disableTransitionOnChange>
- <QueryClientProvider client={queryClient}>
- <CookiesProvider>
- <RouterProvider router={router} />
- </CookiesProvider>
- </QueryClientProvider>
- </ThemeProvider>
- </ChakraProvider>,
+// Add global accessibility styles
+const globalStyles = `
+ .sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
+ }
+
+ /* Ensure focus is visible for keyboard navigation */
+ *:focus-visible {
+ outline: 2px solid #005fcc;
+ outline-offset: 2px;
+ }
+
+ /* Reduce motion for users who prefer it */
+ @media (prefers-reduced-motion: reduce) {
+ *,
+ *::before,
+ *::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ }
+ }
+
+ /* High contrast mode support */
+ @media (prefers-contrast: high) {
+ * {
+ text-shadow: none !important;
+ box-shadow: none !important;
+ }
+ }
+`;
+
+// Inject global styles
+const styleSheet = document.createElement("style");
+
+styleSheet.type = "text/css";
+styleSheet.innerHTML = globalStyles;
+document.head.append(styleSheet);
+
+type ErrorBoundaryProps = {
+ readonly children: React.ReactNode;
+}
+
+type ErrorBoundaryState = {
+ hasError: boolean;
+}
+
+// Error boundary component for better error handling
+class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
Review Comment:
Let's move ErrorBoundary to its own file.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Update color palette and leverage Chakra semantic tokens [airflow]
Posted by "odaneau-astro (via GitHub)" <gi...@apache.org>.
odaneau-astro commented on code in PR #53981:
URL: https://github.com/apache/airflow/pull/53981#discussion_r2327733608
##########
airflow-core/src/airflow/ui/src/pages/Dag/Calendar/CalendarCell.tsx:
##########
@@ -38,13 +41,15 @@ export const CalendarCell = ({ backgroundColor, content, index, marginRight }: P
<Box
_hover={{ transform: "scale(1.1)" }}
bg={backgroundColor}
+ border="1px solid"
Review Comment:
We do need it now that the "0 runs" is rendered with a transparent background.
<img width="873" height="553" alt="image" src="https://github.com/user-attachments/assets/66c8ef61-1653-4bfe-aa19-03096d4fad21" />
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Update color palette and leverage Chakra semantic tokens [airflow]
Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi commented on code in PR #53981:
URL: https://github.com/apache/airflow/pull/53981#discussion_r2334236259
##########
airflow-core/src/airflow/ui/src/pages/Dag/Calendar/calendarUtils.ts:
##########
@@ -143,20 +143,26 @@ export const getCalendarCellColor = (
colorMode: CalendarColorMode = "total",
): string | { _dark: string; _light: string } => {
if (runs.length === 0) {
- return { _dark: "gray.700", _light: "gray.100" };
+ const colorScheme = colorMode === "total" ? TOTAL_COLOR_INTENSITIES : FAILURE_COLOR_INTENSITIES;
+ return colorScheme[0];
}
const counts = calculateRunCounts(runs);
- if (counts.planned > 0) {
+ // Only show planned color if there are no actual runs (only planned)
+ if (counts.planned > 0 && counts.total === counts.planned) {
return PLANNED_COLOR;
}
- const targetCount = colorMode === "total" ? counts.total : counts.failed;
- const intensityLevel = getIntensityLevel(targetCount, colorMode);
- const colorScheme = colorMode === "total" ? TOTAL_COLOR_INTENSITIES : FAILURE_COLOR_INTENSITIES;
+ // For failed runs mode, show failed runs
+ if (colorMode === "failed") {
+ const intensityLevel = getIntensityLevel(counts.failed, colorMode);
+ return FAILURE_COLOR_INTENSITIES[intensityLevel] ?? FAILURE_COLOR_INTENSITIES[0];
+ }
- return colorScheme[intensityLevel] ?? { _dark: "gray.700", _light: "gray.100" };
+ // For total runs mode, show total runs in blue
Review Comment:
Actually, I think it should be `info`?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Update color palette and leverage Chakra semantic tokens [airflow]
Posted by "odaneau-astro (via GitHub)" <gi...@apache.org>.
odaneau-astro commented on code in PR #53981:
URL: https://github.com/apache/airflow/pull/53981#discussion_r2327733608
##########
airflow-core/src/airflow/ui/src/pages/Dag/Calendar/CalendarCell.tsx:
##########
@@ -38,13 +41,15 @@ export const CalendarCell = ({ backgroundColor, content, index, marginRight }: P
<Box
_hover={{ transform: "scale(1.1)" }}
bg={backgroundColor}
+ border="1px solid"
Review Comment:
We do need it now that the "0 runs" is rendered with a transparent background.
<img width="873" height="553" alt="image" src="https://github.com/user-attachments/assets/66c8ef61-1653-4bfe-aa19-03096d4fad21" />
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Update color palette and leverage Chakra semantic tokens [airflow]
Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi commented on PR #53981:
URL: https://github.com/apache/airflow/pull/53981#issuecomment-3250142930
I think a lot of the static checks can be fixed simply by running `pnpm format`
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Update color palette and leverage Chakra semantic tokens [airflow]
Posted by "RoyLee1224 (via GitHub)" <gi...@apache.org>.
RoyLee1224 commented on code in PR #53981:
URL: https://github.com/apache/airflow/pull/53981#discussion_r2323532001
##########
airflow-core/src/airflow/ui/src/pages/Dag/Calendar/CalendarLegend.tsx:
##########
@@ -29,15 +29,15 @@ type Props = {
};
const totalRunsLegendData = [
- { color: { _dark: "gray.700", _light: "gray.100" }, label: "0" },
- { color: { _dark: "green.300", _light: "green.200" }, label: "1-5" },
- { color: { _dark: "green.500", _light: "green.400" }, label: "6-15" },
- { color: { _dark: "green.700", _light: "green.600" }, label: "16-25" },
- { color: { _dark: "green.900", _light: "green.800" }, label: "26+" },
+ { color: { _dark: "transparent", _light: "transparent" }, label: "0" },
+ { color: { _dark: "blue.300", _light: "blue.200" }, label: "1-5" },
+ { color: { _dark: "blue.500", _light: "blue.400" }, label: "6-15" },
+ { color: { _dark: "blue.700", _light: "blue.600" }, label: "16-25" },
+ { color: { _dark: "blue.900", _light: "blue.800" }, label: "26+" },
Review Comment:
I think the color setting are move to `calendarUtils.ts` for dynamic calculation.
`totalRunsLegendData` & `failedRunsLegendData` should be deleted
Reference: #55155
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Update color palette and leverage Chakra semantic tokens [airflow]
Posted by "RoyLee1224 (via GitHub)" <gi...@apache.org>.
RoyLee1224 commented on code in PR #53981:
URL: https://github.com/apache/airflow/pull/53981#discussion_r2323544782
##########
airflow-core/src/airflow/ui/src/pages/Dag/Calendar/CalendarCell.tsx:
##########
@@ -38,13 +41,15 @@ export const CalendarCell = ({ backgroundColor, content, index, marginRight }: P
<Box
_hover={{ transform: "scale(1.1)" }}
bg={backgroundColor}
+ border="1px solid"
Review Comment:
Not sure if we need a border here.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Update color palette and leverage Chakra semantic tokens [airflow]
Posted by "RoyLee1224 (via GitHub)" <gi...@apache.org>.
RoyLee1224 commented on code in PR #53981:
URL: https://github.com/apache/airflow/pull/53981#discussion_r2323545113
##########
airflow-core/src/airflow/ui/src/pages/Dag/Calendar/CalendarLegend.tsx:
##########
@@ -81,7 +89,15 @@ export const CalendarLegend = ({ colorMode, vertical = false }: Props) => {
<HStack gap={0.5}>
{legendData.map(({ color, label }) => (
<Tooltip content={`${label} ${colorMode === "total" ? "runs" : "failed"}`} key={label}>
- <Box bg={color} borderRadius="2px" cursor="pointer" height="14px" width="14px" />
+ <Box
+ bg={color}
+ border="1px solid"
Review Comment:
Not sure if we need a border here.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Update color palette and leverage Chakra semantic tokens [airflow]
Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi commented on code in PR #53981:
URL: https://github.com/apache/airflow/pull/53981#discussion_r2334228583
##########
airflow-core/src/airflow/ui/src/pages/Dag/Calendar/calendarUtils.ts:
##########
@@ -143,20 +143,26 @@ export const getCalendarCellColor = (
colorMode: CalendarColorMode = "total",
): string | { _dark: string; _light: string } => {
if (runs.length === 0) {
- return { _dark: "gray.700", _light: "gray.100" };
+ const colorScheme = colorMode === "total" ? TOTAL_COLOR_INTENSITIES : FAILURE_COLOR_INTENSITIES;
+ return colorScheme[0];
}
const counts = calculateRunCounts(runs);
- if (counts.planned > 0) {
+ // Only show planned color if there are no actual runs (only planned)
+ if (counts.planned > 0 && counts.total === counts.planned) {
return PLANNED_COLOR;
}
- const targetCount = colorMode === "total" ? counts.total : counts.failed;
- const intensityLevel = getIntensityLevel(targetCount, colorMode);
- const colorScheme = colorMode === "total" ? TOTAL_COLOR_INTENSITIES : FAILURE_COLOR_INTENSITIES;
+ // For failed runs mode, show failed runs
+ if (colorMode === "failed") {
+ const intensityLevel = getIntensityLevel(counts.failed, colorMode);
+ return FAILURE_COLOR_INTENSITIES[intensityLevel] ?? FAILURE_COLOR_INTENSITIES[0];
+ }
- return colorScheme[intensityLevel] ?? { _dark: "gray.700", _light: "gray.100" };
+ // For total runs mode, show total runs in blue
Review Comment:
blue is fine.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Update color palette and leverage Chakra semantic tokens [airflow]
Posted by "RoyLee1224 (via GitHub)" <gi...@apache.org>.
RoyLee1224 commented on code in PR #53981:
URL: https://github.com/apache/airflow/pull/53981#discussion_r2323581289
##########
airflow-core/src/airflow/ui/src/pages/Dag/Calendar/calendarUtils.ts:
##########
@@ -143,20 +143,26 @@ export const getCalendarCellColor = (
colorMode: CalendarColorMode = "total",
): string | { _dark: string; _light: string } => {
if (runs.length === 0) {
- return { _dark: "gray.700", _light: "gray.100" };
+ const colorScheme = colorMode === "total" ? TOTAL_COLOR_INTENSITIES : FAILURE_COLOR_INTENSITIES;
+ return colorScheme[0];
}
const counts = calculateRunCounts(runs);
- if (counts.planned > 0) {
+ // Only show planned color if there are no actual runs (only planned)
+ if (counts.planned > 0 && counts.total === counts.planned) {
return PLANNED_COLOR;
}
- const targetCount = colorMode === "total" ? counts.total : counts.failed;
- const intensityLevel = getIntensityLevel(targetCount, colorMode);
- const colorScheme = colorMode === "total" ? TOTAL_COLOR_INTENSITIES : FAILURE_COLOR_INTENSITIES;
+ // For failed runs mode, show failed runs
+ if (colorMode === "failed") {
+ const intensityLevel = getIntensityLevel(counts.failed, colorMode);
+ return FAILURE_COLOR_INTENSITIES[intensityLevel] ?? FAILURE_COLOR_INTENSITIES[0];
+ }
- return colorScheme[intensityLevel] ?? { _dark: "gray.700", _light: "gray.100" };
+ // For total runs mode, show total runs in blue
Review Comment:
Not sure if we want to use blue color for total run calendar cells. I'm personally fine with this choice, but I wanted to bring it up to make sure we're all aligned on the color scheme.
cc @bbovenzi
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Update color palette and leverage Chakra semantic tokens [airflow]
Posted by "odaneau-astro (via GitHub)" <gi...@apache.org>.
odaneau-astro commented on code in PR #53981:
URL: https://github.com/apache/airflow/pull/53981#discussion_r2327733608
##########
airflow-core/src/airflow/ui/src/pages/Dag/Calendar/CalendarCell.tsx:
##########
@@ -38,13 +41,15 @@ export const CalendarCell = ({ backgroundColor, content, index, marginRight }: P
<Box
_hover={{ transform: "scale(1.1)" }}
bg={backgroundColor}
+ border="1px solid"
Review Comment:
We do need it now that the "0 runs" is rendered with a transparent background.
See airflow-core/src/airflow/ui/src/pages/Dag/Calendar/DailyCalendarView.tsx line 110
<img width="873" height="553" alt="image" src="https://github.com/user-attachments/assets/66c8ef61-1653-4bfe-aa19-03096d4fad21" />
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Update color palette and leverage Chakra semantic tokens [airflow]
Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi commented on code in PR #53981:
URL: https://github.com/apache/airflow/pull/53981#discussion_r2283234113
##########
airflow-core/src/airflow/api_fastapi/auth/managers/simple/ui/src/login/Login.tsx:
##########
@@ -52,6 +52,24 @@ export const Login = () => {
localStorage.getItem(LOCAL_STORAGE_DISABLE_BANNER_KEY),
);
+ // Set page title for SEO
+ useEffect(() => {
+ document.title = "Sign In - Apache Airflow";
Review Comment:
But this is the login for someone's airflow instance. We don't need SEO? Also, isn't the title already set in the index.html?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Update color palette and leverage Chakra semantic tokens [airflow]
Posted by "odaneau-astro (via GitHub)" <gi...@apache.org>.
odaneau-astro commented on code in PR #53981:
URL: https://github.com/apache/airflow/pull/53981#discussion_r2328651063
##########
airflow-core/src/airflow/ui/src/pages/Dag/Calendar/calendarUtils.ts:
##########
@@ -143,20 +143,26 @@ export const getCalendarCellColor = (
colorMode: CalendarColorMode = "total",
): string | { _dark: string; _light: string } => {
if (runs.length === 0) {
- return { _dark: "gray.700", _light: "gray.100" };
+ const colorScheme = colorMode === "total" ? TOTAL_COLOR_INTENSITIES : FAILURE_COLOR_INTENSITIES;
+ return colorScheme[0];
}
const counts = calculateRunCounts(runs);
- if (counts.planned > 0) {
+ // Only show planned color if there are no actual runs (only planned)
+ if (counts.planned > 0 && counts.total === counts.planned) {
return PLANNED_COLOR;
}
- const targetCount = colorMode === "total" ? counts.total : counts.failed;
- const intensityLevel = getIntensityLevel(targetCount, colorMode);
- const colorScheme = colorMode === "total" ? TOTAL_COLOR_INTENSITIES : FAILURE_COLOR_INTENSITIES;
+ // For failed runs mode, show failed runs
+ if (colorMode === "failed") {
+ const intensityLevel = getIntensityLevel(counts.failed, colorMode);
+ return FAILURE_COLOR_INTENSITIES[intensityLevel] ?? FAILURE_COLOR_INTENSITIES[0];
+ }
- return colorScheme[intensityLevel] ?? { _dark: "gray.700", _light: "gray.100" };
+ // For total runs mode, show total runs in blue
Review Comment:
Yeah, I'm not sure about it either. I replaced green as it's associated with "success" and not "total". Maybe we can use "brand" instead of "blue". Let me know what you guys prefer.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Update color palette and leverage Chakra semantic tokens [airflow]
Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi commented on code in PR #53981:
URL: https://github.com/apache/airflow/pull/53981#discussion_r2283226502
##########
airflow-core/src/airflow/ui/src/theme/react_components_analysis.md:
##########
@@ -0,0 +1,183 @@
+# Airflow UI React Components Analysis
+
+## Overview
+This document analyzes all React components, pages, and layouts in the Airflow UI codebase to identify those that are not following Chakra UI best practices and the custom Chakra UI theme defined in `src/theme.ts`.
+
+## Theme Structure
+The custom theme defines semantic color tokens for:
+- **Airflow Task States**: success, failed, queued, skipped, up_for_reschedule, up_for_retry, upstream_failed, running, restarting, deferred, scheduled, none, removed
+- **Color Palettes**: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, slate, gray, zinc, neutral, stone
+- **Special Tokens**: navbar
+
+## Components Directory
+
+### Root Level Components
Review Comment:
What's the point of listing all these components? I feel like this isn't reasonable to maintain. Why don't we want to check for semantic colors in every .tsx file?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Update color palette and leverage Chakra semantic tokens [airflow]
Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi commented on PR #53981:
URL: https://github.com/apache/airflow/pull/53981#issuecomment-3271687382
Some local testing. Found a few bugs:
Gantt chart colors not working:
<img width="889" height="798" alt="Screenshot 2025-09-09 at 11 30 06 AM" src="https://github.com/user-attachments/assets/845f360e-e752-487b-9a9e-1ccaa11c89b4" />
Calendar view tooltip is broken:
<img width="369" height="350" alt="Screenshot 2025-09-09 at 11 30 52 AM" src="https://github.com/user-attachments/assets/4683e162-102e-4943-ba4e-3776afbb4b45" />
Code+Logs copy/wrap button colors are inconsistent:
<img width="486" height="198" alt="Screenshot 2025-09-09 at 11 31 23 AM" src="https://github.com/user-attachments/assets/116bb4ff-bd45-47d6-968e-d6e724a620fb" />
Icons in the dag run bar in the grid view colors are missing light mode version:
<img width="333" height="207" alt="Screenshot 2025-09-09 at 11 35 55 AM" src="https://github.com/user-attachments/assets/5c938d5e-5edf-4246-a338-9d9f052aeb86" />
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Update color palette and leverage Chakra semantic tokens [airflow]
Posted by "ashb (via GitHub)" <gi...@apache.org>.
ashb commented on PR #53981:
URL: https://github.com/apache/airflow/pull/53981#issuecomment-3275784207
#protm
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Update color palette and leverage Chakra semantic tokens [airflow]
Posted by "eladkal (via GitHub)" <gi...@apache.org>.
eladkal commented on PR #53981:
URL: https://github.com/apache/airflow/pull/53981#issuecomment-3214868387
@odaneau-astro I'm hoping we can get this in time for 3.1
any chance you can address the open issues soon?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Update color palette and leverage Chakra semantic tokens [airflow]
Posted by "RoyLee1224 (via GitHub)" <gi...@apache.org>.
RoyLee1224 commented on code in PR #53981:
URL: https://github.com/apache/airflow/pull/53981#discussion_r2323556391
##########
airflow-core/src/airflow/ui/src/pages/Dag/Calendar/CalendarLegend.tsx:
##########
@@ -29,15 +29,15 @@ type Props = {
};
const totalRunsLegendData = [
- { color: { _dark: "gray.700", _light: "gray.100" }, label: "0" },
- { color: { _dark: "green.300", _light: "green.200" }, label: "1-5" },
- { color: { _dark: "green.500", _light: "green.400" }, label: "6-15" },
- { color: { _dark: "green.700", _light: "green.600" }, label: "16-25" },
- { color: { _dark: "green.900", _light: "green.800" }, label: "26+" },
+ { color: { _dark: "transparent", _light: "transparent" }, label: "0" },
+ { color: { _dark: "blue.300", _light: "blue.200" }, label: "1-5" },
+ { color: { _dark: "blue.500", _light: "blue.400" }, label: "6-15" },
+ { color: { _dark: "blue.700", _light: "blue.600" }, label: "16-25" },
+ { color: { _dark: "blue.900", _light: "blue.800" }, label: "26+" },
Review Comment:
### Current
<img width="2016" height="868" alt="CleanShot 2025-09-04 at 17 09 14@2x" src="https://github.com/user-attachments/assets/d69fe96e-6ba9-4f46-9c76-42a2e2bfff66" />
### Before
<img width="2016" height="868" alt="CleanShot 2025-09-04 at 17 06 55@2x" src="https://github.com/user-attachments/assets/ff1fc021-df91-4b17-a72b-31f25e1f39d8" />
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Update color palette and leverage Chakra semantic tokens [airflow]
Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi commented on PR #53981:
URL: https://github.com/apache/airflow/pull/53981#issuecomment-3275218241
Can we run `pnpm format`?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Update color palette and leverage Chakra semantic tokens [airflow]
Posted by "kaxil (via GitHub)" <gi...@apache.org>.
kaxil commented on PR #53981:
URL: https://github.com/apache/airflow/pull/53981#issuecomment-3276003735
#protm
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Update color palette and leverage Chakra semantic tokens [airflow]
Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi merged PR #53981:
URL: https://github.com/apache/airflow/pull/53981
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Update color palette and leverage Chakra semantic tokens [airflow]
Posted by "RoyLee1224 (via GitHub)" <gi...@apache.org>.
RoyLee1224 commented on code in PR #53981:
URL: https://github.com/apache/airflow/pull/53981#discussion_r2337604953
##########
airflow-core/src/airflow/ui/src/pages/TaskInstance/Logs/Logs.test.tsx:
##########
@@ -18,18 +18,13 @@
*/
import "@testing-library/jest-dom";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { setupServer, type SetupServerApi } from "msw/node";
Review Comment:
This file change seems out of scope for updating colors. Was it included intentionally?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Update color palette and leverage Chakra semantic tokens [airflow]
Posted by "RoyLee1224 (via GitHub)" <gi...@apache.org>.
RoyLee1224 commented on PR #53981:
URL: https://github.com/apache/airflow/pull/53981#issuecomment-3255887240
Thank you for the great work on this! I really like the new UI design.
To keep things focused, I suggest we move the miscellaneous calendar UI changes out of this PR and into a separate discussion. Maybe just make simple color changes such as `colorPalette="blue"` -> `colorPalette="brand"`
I'd be more than happy to help with that part in a separate PR.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Update color palette and leverage Chakra semantic tokens [airflow]
Posted by "odaneau-astro (via GitHub)" <gi...@apache.org>.
odaneau-astro commented on code in PR #53981:
URL: https://github.com/apache/airflow/pull/53981#discussion_r2317125305
##########
airflow-core/src/airflow/ui/src/theme/react_components_analysis.md:
##########
@@ -0,0 +1,183 @@
+# Airflow UI React Components Analysis
+
+## Overview
+This document analyzes all React components, pages, and layouts in the Airflow UI codebase to identify those that are not following Chakra UI best practices and the custom Chakra UI theme defined in `src/theme.ts`.
+
+## Theme Structure
+The custom theme defines semantic color tokens for:
+- **Airflow Task States**: success, failed, queued, skipped, up_for_reschedule, up_for_retry, upstream_failed, running, restarting, deferred, scheduled, none, removed
+- **Color Palettes**: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, slate, gray, zinc, neutral, stone
+- **Special Tokens**: navbar
+
+## Components Directory
+
+### Root Level Components
Review Comment:
This file should not have been included. It was generated to simplify validations on my end.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Update color palette and leverage Chakra semantic tokens [airflow]
Posted by "RoyLee1224 (via GitHub)" <gi...@apache.org>.
RoyLee1224 commented on code in PR #53981:
URL: https://github.com/apache/airflow/pull/53981#discussion_r2323532001
##########
airflow-core/src/airflow/ui/src/pages/Dag/Calendar/CalendarLegend.tsx:
##########
@@ -29,15 +29,15 @@ type Props = {
};
const totalRunsLegendData = [
- { color: { _dark: "gray.700", _light: "gray.100" }, label: "0" },
- { color: { _dark: "green.300", _light: "green.200" }, label: "1-5" },
- { color: { _dark: "green.500", _light: "green.400" }, label: "6-15" },
- { color: { _dark: "green.700", _light: "green.600" }, label: "16-25" },
- { color: { _dark: "green.900", _light: "green.800" }, label: "26+" },
+ { color: { _dark: "transparent", _light: "transparent" }, label: "0" },
+ { color: { _dark: "blue.300", _light: "blue.200" }, label: "1-5" },
+ { color: { _dark: "blue.500", _light: "blue.400" }, label: "6-15" },
+ { color: { _dark: "blue.700", _light: "blue.600" }, label: "16-25" },
+ { color: { _dark: "blue.900", _light: "blue.800" }, label: "26+" },
Review Comment:
I think the color setting are move to `calendarUtils.ts` for dynamic calculation.
Reference: #55155
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org