Rebase fix and move semantic color gen to a function

apache · Oct 25, 2024 · efc4b92 · efc4b92
1 parent 5fc4c03
commit efc4b92
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 75 deletions.
diff --git a/airflow/ui/src/pages/DagsList/DagCard.tsx b/airflow/ui/src/pages/DagsList/DagCard.tsx
@@ -26,12 +26,12 @@ import {
   Tooltip,
   VStack,
   Link,
-  useColorModeValue,
 } from "@chakra-ui/react";
 import { FiCalendar } from "react-icons/fi";
 import { Link as RouterLink } from "react-router-dom";
 
 import type { DAGResponse } from "openapi/requests/types.gen";
+import Time from "src/components/Time";
 import { TogglePause } from "src/components/TogglePause";
 
 import { DagTags } from "./DagTags";
@@ -40,71 +40,63 @@ type Props = {
   readonly dag: DAGResponse;
 };
 
-export const DagCard = ({ dag }: Props) => {
-  const cardBorder = useColorModeValue("gray.100", "gray.700");
-
-  return (
-    <Box
-      borderColor={cardBorder}
-      borderRadius={8}
-      borderWidth={1}
-      overflow="hidden"
+export const DagCard = ({ dag }: Props) => (
+  <Box
+    borderColor="gray.emphasized"
+    borderRadius={8}
+    borderWidth={1}
+    overflow="hidden"
+  >
+    <Flex
+      alignItems="center"
+      bg="blue.minimal"
+      justifyContent="space-between"
+      px={3}
+      py={2}
     >
-      <Flex
-        alignItems="center"
-        bg="subtle-bg"
-        justifyContent="space-between"
-        px={3}
-        py={2}
-      >
-        <HStack>
-          <Tooltip hasArrow label={dag.description}>
-            <Link
-              as={RouterLink}
-              color="subtle-text"
-              fontSize="md"
-              fontWeight="bold"
-              to={`/dags/${dag.dag_id}`}
-            >
-              {dag.dag_display_name}
-            </Link>
-          </Tooltip>
-          <DagTags tags={dag.tags} />
-        </HStack>
-        <HStack>
-          <TogglePause dagId={dag.dag_id} isPaused={dag.is_paused} />
-        </HStack>
-      </Flex>
-      <SimpleGrid columns={4} height={20} px={3} py={2} spacing={4}>
-        <div />
-        <VStack align="flex-start" spacing={1}>
-          <Heading color="gray.500" fontSize="xs">
-            Last Run
-          </Heading>
-        </VStack>
-        <VStack align="flex-start" spacing={1}>
-          <Heading color="gray.500" fontSize="xs">
-            Next Run
-          </Heading>
-          {Boolean(dag.next_dagrun) ? (
+      <HStack>
+        <Tooltip hasArrow label={dag.description}>
+          <Link
+            as={RouterLink}
+            color="blue.contrast"
+            fontSize="md"
+            fontWeight="bold"
+            to={`/dags/${dag.dag_id}`}
+          >
+            {dag.dag_display_name}
+          </Link>
+        </Tooltip>
+        <DagTags tags={dag.tags} />
+      </HStack>
+      <HStack>
+        <TogglePause dagId={dag.dag_id} isPaused={dag.is_paused} />
+      </HStack>
+    </Flex>
+    <SimpleGrid columns={4} height={20} px={3} py={2} spacing={4}>
+      <div />
+      <VStack align="flex-start" spacing={1}>
+        <Heading color="gray.500" fontSize="xs">
+          Last Run
+        </Heading>
+      </VStack>
+      <VStack align="flex-start" spacing={1}>
+        <Heading color="gray.500" fontSize="xs">
+          Next Run
+        </Heading>
+        <Text fontSize="sm">
+          <Time datetime={dag.next_dagrun} />
+        </Text>
+        {Boolean(dag.timetable_summary) ? (
+          <Tooltip hasArrow label={dag.timetable_description}>
             <Text fontSize="sm">
               {" "}
               <FiCalendar style={{ display: "inline" }} />{" "}
               {dag.timetable_summary}
             </Text>
-          ) : undefined}
-          {Boolean(dag.timetable_summary) ? (
-            <Tooltip hasArrow label={dag.timetable_description}>
-              <Text fontSize="sm">
-                {" "}
-                <FiCalendar style={{ display: "inline" }} />{" "}
-                {dag.timetable_summary}
-              </Text>
-            </Tooltip>
-          ) : undefined}
-        </VStack>
-        <div />
-      </SimpleGrid>
-    </Box>
-  );
-};
+          </Tooltip>
+        ) : undefined}
+      </VStack>
+      <div />
+    </SimpleGrid>
+  </Box>
+);
diff --git a/airflow/ui/src/theme.ts b/airflow/ui/src/theme.ts
@@ -52,6 +52,19 @@ const baseStyle = definePartsStyle(() => ({
 
 export const tableTheme = defineMultiStyleConfig({ baseStyle });
 
+const generateSemanticColors = (color: string) => ({
+  /* eslint-disable perfectionist/sort-objects */
+  contrast: { _dark: `${color}.200`, _light: `${color}.600` },
+  focusRing: `${color}.500`,
+  fg: { _dark: `${color}.600`, _light: `${color}.400` },
+  emphasized: { _dark: `${color}.700`, _light: `${color}.300` },
+  solid: { _dark: `${color}.800`, _light: `${color}.200` },
+  muted: { _dark: `${color}.900`, _light: `${color}.100` },
+  subtle: { _dark: `${color}.950`, _light: `${color}.50` },
+  minimal: { _dark: "gray.900", _light: `${color}.50` },
+  /* eslint-enable perfectionist/sort-objects */
+});
+
 const theme = extendTheme({
   colors: {
     blue: {
@@ -67,18 +80,8 @@ const theme = extendTheme({
   },
   semanticTokens: {
     colors: {
-      blue: {
-        /* eslint-disable perfectionist/sort-objects */
-        contrast: { _dark: "blue.200", _light: "blue.600" },
-        focusRing: "blue.500",
-        fg: { _dark: "blue.600", _light: "blue.400" },
-        emphasized: { _dark: "blue.700", _light: "blue.300" },
-        solid: { _dark: "blue.800", _light: "blue.200" },
-        muted: { _dark: "blue.900", _light: "blue.100" },
-        subtle: { _dark: "blue.950", _light: "blue.50" },
-        minimal: { _dark: "gray.900", _light: "blue.50" },
-        /* eslint-enable perfectionist/sort-objects */
-      },
+      blue: generateSemanticColors("blue"),
+      gray: generateSemanticColors("gray"),
     },
   },
   styles: {