diff --git a/airflow-core/src/airflow/ui/src/components/DagActions/FavoriteDagButton.tsx b/airflow-core/src/airflow/ui/src/components/DagActions/FavoriteDagButton.tsx
index 38024ecddde51..b3cf88fc10eab 100644
--- a/airflow-core/src/airflow/ui/src/components/DagActions/FavoriteDagButton.tsx
+++ b/airflow-core/src/airflow/ui/src/components/DagActions/FavoriteDagButton.tsx
@@ -16,11 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box } from "@chakra-ui/react";
+import { Box, useToken } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 import { FiStar } from "react-icons/fi";
 
 import { useToggleFavoriteDag } from "src/queries/useToggleFavoriteDag";
+import { resolveTokenValue } from "src/theme";
 
 import ActionButton from "../ui/ActionButton";
 
@@ -35,17 +36,21 @@ export const FavoriteDagButton = ({ dagId, isFavorite = false, withText = true }
 
   const { isLoading, toggleFavorite } = useToggleFavoriteDag(dagId);
 
+  const [brandSolidColor] = useToken("colors", ["brand.solid"])
+    .map(token => resolveTokenValue(token || "oklch(0.5 0 0)"));
+
   const onToggle = () => toggleFavorite(isFavorite);
 
   return (
     <Box>
       <ActionButton
         actionName={isFavorite ? translate("unfavoriteDag") : translate("favoriteDag")}
+        colorPalette="brand"
         icon={
           <FiStar
             style={{
-              fill: isFavorite ? "var(--chakra-colors-brand-solid)" : "none",
-              stroke: "var(--chakra-colors-brand-solid)",
+              fill: isFavorite ? brandSolidColor : "none",
+              stroke: brandSolidColor,
             }}
           />
         }
diff --git a/airflow-core/src/airflow/ui/src/components/DateTimeInput.tsx b/airflow-core/src/airflow/ui/src/components/DateTimeInput.tsx
index 3ee9dbf62c8bc..753be792c31ef 100644
--- a/airflow-core/src/airflow/ui/src/components/DateTimeInput.tsx
+++ b/airflow-core/src/airflow/ui/src/components/DateTimeInput.tsx
@@ -41,6 +41,8 @@ export const DateTimeInput = forwardRef<HTMLInputElement, Props>(({ onChange, va
 
   return (
     <Input
+      _hover={{ borderColor: "colorPalette.emphasized" }}
+      colorPalette="brand"
       onChange={(event) =>
         onChange?.({
           ...event,
diff --git a/airflow-core/src/airflow/ui/src/components/DurationChart.tsx b/airflow-core/src/airflow/ui/src/components/DurationChart.tsx
index c0fd7cf796b97..98a7b07f4d5a6 100644
--- a/airflow-core/src/airflow/ui/src/components/DurationChart.tsx
+++ b/airflow-core/src/airflow/ui/src/components/DurationChart.tsx
@@ -35,7 +35,7 @@ import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
 import type { TaskInstanceResponse, GridRunsResponse } from "openapi/requests/types.gen";
-import { getComputedCSSVariableValue } from "src/theme";
+import { resolveTokenValue } from "src/theme";
 import { DEFAULT_DATETIME_FORMAT } from "src/utils/datetimeUtils";
 
 ChartJS.register(
@@ -68,14 +68,15 @@ export const DurationChart = ({
 }) => {
   const { t: translate } = useTranslation(["components", "common"]);
   const navigate = useNavigate();
-  const [queuedColorToken] = useToken("colors", ["queued.solid"]);
+  const [queuedColor] = useToken("colors", ["queued.solid"])
+    .map(token => resolveTokenValue(token || "oklch(0.5 0 0)"));
 
   // Get states and create color tokens for them
   const states = entries?.map((entry) => entry.state).filter(Boolean) ?? [];
-  const stateColorTokens = useToken(
+  const stateColors = useToken(
     "colors",
     states.map((state) => `${state}.solid`),
-  );
+  ).map(token => resolveTokenValue(token || "oklch(0.5 0 0)"));
 
   if (!entries) {
     return undefined;
@@ -85,8 +86,8 @@ export const DurationChart = ({
   const stateColorMap: Record<string, string> = {};
 
   states.forEach((state, index) => {
-    if (state) {
-      stateColorMap[state] = getComputedCSSVariableValue(stateColorTokens[index] ?? "oklch(0.5 0 0)");
+    if (state && stateColors[index]) {
+      stateColorMap[state] = stateColors[index];
     }
   });
 
@@ -125,7 +126,7 @@ export const DurationChart = ({
         data={{
           datasets: [
             {
-              backgroundColor: getComputedCSSVariableValue(queuedColorToken ?? "oklch(0.5 0 0)"),
+              backgroundColor: queuedColor,
               data: entries.map((entry: RunResponse) => {
                 switch (kind) {
                   case "Dag Run": {
diff --git a/airflow-core/src/airflow/ui/src/components/EditableMarkdownButton.tsx b/airflow-core/src/airflow/ui/src/components/EditableMarkdownButton.tsx
index 239720f61f219..519cf77993127 100644
--- a/airflow-core/src/airflow/ui/src/components/EditableMarkdownButton.tsx
+++ b/airflow-core/src/airflow/ui/src/components/EditableMarkdownButton.tsx
@@ -57,6 +57,7 @@ const EditableMarkdownButton = ({
       <Box display="inline-block" position="relative">
         <ActionButton
           actionName={placeholder}
+          colorPalette="brand"
           icon={noteIcon}
           onClick={() => {
             if (!isOpen) {
@@ -70,7 +71,7 @@ const EditableMarkdownButton = ({
         />
         {Boolean(mdContent?.trim()) && (
           <Box
-            bg="brand.500"
+            bg="editable-markdown-button.indicator.bg"
             borderRadius="full"
             height={2.5}
             position="absolute"
@@ -89,7 +90,7 @@ const EditableMarkdownButton = ({
         unmountOnExit={true}
       >
         <Dialog.Content backdrop>
-          <Dialog.Header bg="brand.muted">
+          <Dialog.Header bg="editable-markdown-button.header.bg">
             <Heading size="xl">{header}</Heading>
             <Dialog.CloseTrigger closeButtonProps={{ size: "xl" }} />
           </Dialog.Header>
diff --git a/airflow-core/src/airflow/ui/src/components/FilterBar/FilterBar.tsx b/airflow-core/src/airflow/ui/src/components/FilterBar/FilterBar.tsx
index 849047dde072f..245ec7c84b426 100644
--- a/airflow-core/src/airflow/ui/src/components/FilterBar/FilterBar.tsx
+++ b/airflow-core/src/airflow/ui/src/components/FilterBar/FilterBar.tsx
@@ -143,9 +143,10 @@ export const FilterBar = ({
         <Menu.Root>
           <Menu.Trigger asChild>
             <Button
-              _hover={{ bg: "colorPalette.subtle" }}
-              bg="gray.muted"
+              _hover={{ bg: "colorPalette.emphasized" }}
+              bg="colorPalette.muted"
               borderRadius="full"
+              colorPalette="brand"
               variant="outline"
             >
               <MdAdd />
@@ -165,7 +166,7 @@ export const FilterBar = ({
         </Menu.Root>
       )}
       {filters.length > 0 && (
-        <Button borderRadius="full" colorPalette="gray" onClick={resetFilters} size="sm" variant="outline">
+        <Button borderRadius="full" onClick={resetFilters} size="sm" variant="outline">
           <MdClear />
           {translate("common:reset")}
         </Button>
diff --git a/airflow-core/src/airflow/ui/src/components/FilterBar/FilterPill.tsx b/airflow-core/src/airflow/ui/src/components/FilterBar/FilterPill.tsx
index ef789617f203b..a5042c541d093 100644
--- a/airflow-core/src/airflow/ui/src/components/FilterBar/FilterPill.tsx
+++ b/airflow-core/src/airflow/ui/src/components/FilterBar/FilterPill.tsx
@@ -113,10 +113,10 @@ export const FilterPill = ({
     <Box
       _hover={{ bg: "colorPalette.subtle" }}
       as="button"
-      bg={hasValue ? "blue.muted" : "gray.muted"}
+      bg="colorPalette.muted"
       borderRadius="full"
       color="colorPalette.fg"
-      colorPalette={hasValue ? "blue" : "gray"}
+      colorPalette={hasValue ? "brand" : "gray"}
       cursor="pointer"
       display="flex"
       fontSize="sm"
@@ -133,14 +133,13 @@ export const FilterPill = ({
 
         <Box
           _hover={{
-            bg: "gray.100",
-            color: "gray.600",
+            bg: "filter-bar.pill.close.bg.hover",
           }}
           alignItems="center"
           aria-label={`Remove ${filter.config.label} filter`}
           bg="transparent"
           borderRadius="full"
-          color="gray.400"
+          color="filter-bar.pill.close.color"
           cursor="pointer"
           display="flex"
           h={6}
diff --git a/airflow-core/src/airflow/ui/src/components/FilterBar/filters/SelectFilter.tsx b/airflow-core/src/airflow/ui/src/components/FilterBar/filters/SelectFilter.tsx
index 79374b27c23a4..9f88423b26002 100644
--- a/airflow-core/src/airflow/ui/src/components/FilterBar/filters/SelectFilter.tsx
+++ b/airflow-core/src/airflow/ui/src/components/FilterBar/filters/SelectFilter.tsx
@@ -65,30 +65,29 @@ export const SelectFilter = ({ filter, onChange, onRemove }: FilterPluginProps)
         border="0.5px solid"
         borderColor="border"
         borderRadius="full"
+        colorPalette="gray"
         display="flex"
-        h="full"
         overflow="hidden"
         width="330px"
       >
         <Text
           alignItems="center"
-          bg="gray.muted"
+          alignSelf="stretch"
+          bg="colorPalette.muted"
           borderLeftRadius="full"
           display="flex"
+          flexShrink={0}
           fontSize="sm"
           fontWeight="medium"
-          h="full"
-          px={4}
+          px={3}
           py={2}
-          whiteSpace="nowrap"
         >
           {filter.config.label}:
         </Text>
         <Select.Root
-          border="none"
           collection={createListCollection({ items: config.options })}
-          h="full"
           onValueChange={handleValueChange}
+          size="sm"
           value={hasValue ? [String(filter.value)] : []}
         >
           <Select.Trigger triggerProps={{ border: "none" }}>
diff --git a/airflow-core/src/airflow/ui/src/components/Graph/DownloadButton.tsx b/airflow-core/src/airflow/ui/src/components/Graph/DownloadButton.tsx
index 2218e611984b7..76531e8736094 100644
--- a/airflow-core/src/airflow/ui/src/components/Graph/DownloadButton.tsx
+++ b/airflow-core/src/airflow/ui/src/components/Graph/DownloadButton.tsx
@@ -67,6 +67,7 @@ export const DownloadButton = ({ name }: { readonly name: string }) => {
   return (
     <Panel position="bottom-right" style={{ transform: "translateY(-150px)" }}>
       <IconButton
+        _hover={{ bg: "colorPalette.emphasized" }}
         aria-label={translate("graph.downloadImage")}
         colorPalette="info"
         onClick={() => {
diff --git a/airflow-core/src/airflow/ui/src/components/JsonEditor.tsx b/airflow-core/src/airflow/ui/src/components/JsonEditor.tsx
index d422fab6abe30..488c69b582e32 100644
--- a/airflow-core/src/airflow/ui/src/components/JsonEditor.tsx
+++ b/airflow-core/src/airflow/ui/src/components/JsonEditor.tsx
@@ -17,15 +17,20 @@
  * under the License.
  */
 import { json } from "@codemirror/lang-json";
+import { useToken } from "@chakra-ui/react";
 import { githubLight, githubDark } from "@uiw/codemirror-themes-all";
 import CodeMirror, { type ReactCodeMirrorProps, type ReactCodeMirrorRef } from "@uiw/react-codemirror";
 import { forwardRef } from "react";
 
 import { useColorMode } from "src/context/colorMode";
+import { resolveTokenValue } from "src/theme";
 
 export const JsonEditor = forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProps>((props, ref) => {
   const { colorMode } = useColorMode();
 
+  const [borderColor] = useToken("colors", ["border.emphasized"])
+    .map(token => resolveTokenValue(token || "oklch(0.5 0 0)"));
+
   return (
     <CodeMirror
       basicSetup={{
@@ -38,7 +43,7 @@ export const JsonEditor = forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProps>((
       height="200px"
       ref={ref}
       style={{
-        border: "1px solid var(--chakra-colors-border-emphasized)",
+        border: `1px solid ${borderColor}`,
         borderRadius: "8px",
         outline: "none",
         padding: "2px",
diff --git a/airflow-core/src/airflow/ui/src/components/NeedsReviewButton.tsx b/airflow-core/src/airflow/ui/src/components/NeedsReviewButton.tsx
index c0ec70f44ddcf..af4ec0b7c403c 100644
--- a/airflow-core/src/airflow/ui/src/components/NeedsReviewButton.tsx
+++ b/airflow-core/src/airflow/ui/src/components/NeedsReviewButton.tsx
@@ -58,7 +58,7 @@ export const NeedsReviewButton = ({
   return hitlTIsCount > 0 ? (
     <Box maxW="250px">
       <StatsCard
-        colorScheme="deferred"
+        colorPalette="deferred"
         count={hitlTIsCount}
         icon={<LuUserRoundPen />}
         isLoading={isLoading}
diff --git a/airflow-core/src/airflow/ui/src/components/QuickFilterButton.tsx b/airflow-core/src/airflow/ui/src/components/QuickFilterButton.tsx
index 4450e48e062b6..6729531a9af7e 100644
--- a/airflow-core/src/airflow/ui/src/components/QuickFilterButton.tsx
+++ b/airflow-core/src/airflow/ui/src/components/QuickFilterButton.tsx
@@ -24,12 +24,12 @@ type QuickFilterButtonProps = {
 
 export const QuickFilterButton = ({ children, isActive, ...rest }: QuickFilterButtonProps) => (
   <Button
-    _hover={{ bg: "colorPalette.emphasized" }}
+    _hover={{ bg: "colorPalette.subtle" }}
     bg={isActive ? "colorPalette.muted" : undefined}
     borderColor="border.emphasized"
     borderRadius={20}
     borderWidth={1}
-    color="colorPalette.fg"
+    color="fg"
     fontWeight="normal"
     size="sm"
     variant={isActive ? "solid" : "outline"}
diff --git a/airflow-core/src/airflow/ui/src/components/StatsCard.tsx b/airflow-core/src/airflow/ui/src/components/StatsCard.tsx
index cbade7d249d0a..4f8de8077b69d 100644
--- a/airflow-core/src/airflow/ui/src/components/StatsCard.tsx
+++ b/airflow-core/src/airflow/ui/src/components/StatsCard.tsx
@@ -24,7 +24,7 @@ import type { TaskInstanceState } from "openapi/requests/types.gen";
 import { StateBadge } from "src/components/StateBadge";
 
 export const StatsCard = ({
-  colorScheme,
+  colorPalette,
   count,
   icon,
   isLoading = false,
@@ -34,7 +34,7 @@ export const StatsCard = ({
   onClick,
   state,
 }: {
-  readonly colorScheme: string;
+  readonly colorPalette: string;
   readonly count: number;
   readonly icon?: React.ReactNode;
   readonly isLoading?: boolean;
@@ -50,14 +50,19 @@ export const StatsCard = ({
 
   const content = (
     <HStack
+      _hover={{
+        bg: "colorPalette.subtle",
+        borderColor: "colorPalette.emphasized",
+      }}
       alignItems="center"
       borderRadius="lg"
       borderWidth={1}
       color="fg.emphasized"
+      colorPalette={colorPalette}
       cursor="pointer"
       p={2}
     >
-      <StateBadge colorPalette={colorScheme} mr={2} state={state}>
+      <StateBadge colorPalette={colorPalette} mr={2} state={state}>
         {icon}
         {count}
       </StateBadge>
diff --git a/airflow-core/src/airflow/ui/src/components/TrendCountChart.tsx b/airflow-core/src/airflow/ui/src/components/TrendCountChart.tsx
index 68f86ae35d339..7fad8edbdf822 100644
--- a/airflow-core/src/airflow/ui/src/components/TrendCountChart.tsx
+++ b/airflow-core/src/airflow/ui/src/components/TrendCountChart.tsx
@@ -17,6 +17,7 @@
  * under the License.
  */
 import { Box, useToken } from "@chakra-ui/react";
+import { resolveTokenValue } from "src/theme";
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -31,7 +32,6 @@ import dayjs from "dayjs";
 import { useMemo, useRef, useEffect } from "react";
 import { Line } from "react-chartjs-2";
 
-import { useColorMode } from "src/context/colorMode";
 
 ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Filler, Tooltip);
 
@@ -97,46 +97,26 @@ type Props = {
 };
 
 export const TrendCountChart = ({ endDate, events, startDate }: Props) => {
-  const { colorMode } = useColorMode();
   const chartRef = useRef<ChartJS<"line">>();
 
-  // Get raw color values instead of CSS variables
-  const [bgLightGreen, bgDarkGreen, lineLightGreen, lineDarkGreen] = useToken("colors", [
-    "green.100",
-    "green.800",
-    "green.500",
-    "green.400",
-  ]);
-
-  const [bgLightRed, bgDarkRed, lineLightRed, lineDarkRed] = useToken("colors", [
-    "red.100",
-    "red.800",
-    "red.500",
-    "red.400",
-  ]);
+  const [successBg, successLine, failedBg, failedLine] = useToken("colors", [
+    "trend-count-chart.success.bg",
+    "trend-count-chart.success.line",
+    "trend-count-chart.failed.bg",
+    "trend-count-chart.failed.line",
+  ]).map(token => resolveTokenValue(token || "oklch(0.5 0 0)"));
 
   const intervalData = useMemo(
     () => aggregateEventsIntoIntervals(events, startDate, endDate),
     [events, startDate, endDate],
   );
 
-  const backgroundColor =
-    colorMode === "light"
-      ? intervalData.some((value) => value > 0)
-        ? bgLightRed
-        : bgLightGreen
-      : intervalData.some((value) => value > 0)
-        ? bgDarkRed
-        : bgDarkGreen;
-
-  const lineColor =
-    colorMode === "light"
-      ? intervalData.some((value) => value > 0)
-        ? lineLightRed
-        : lineLightGreen
-      : intervalData.some((value) => value > 0)
-        ? lineDarkRed
-        : lineDarkGreen;
+  // TODO: Add a default/neutral state (neither green nor red) when no runs have happened yet.
+  // Currently shows green (success) when count is 0, but this is misleading when there are
+  // actually no runs at all (as opposed to runs with no failures).
+  const hasFailures = intervalData.some((value) => value > 0);
+  const backgroundColor = hasFailures ? failedBg : successBg;
+  const lineColor = hasFailures ? failedLine : successLine;
 
   // Cleanup chart instance on unmount
   useEffect(
diff --git a/airflow-core/src/airflow/ui/src/components/TriggerDag/TriggerDAGButton.tsx b/airflow-core/src/airflow/ui/src/components/TriggerDag/TriggerDAGButton.tsx
index ec8f8f247846a..dec6a8dcd5bda 100644
--- a/airflow-core/src/airflow/ui/src/components/TriggerDag/TriggerDAGButton.tsx
+++ b/airflow-core/src/airflow/ui/src/components/TriggerDag/TriggerDAGButton.tsx
@@ -39,6 +39,7 @@ const TriggerDAGButton: React.FC<Props> = ({ dagDisplayName, dagId, isPaused, wi
     <Box>
       <ActionButton
         actionName={translate("triggerDag.title")}
+        colorPalette="brand"
         icon={<FiPlay />}
         onClick={onOpen}
         text={translate("triggerDag.button")}
diff --git a/airflow-core/src/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx b/airflow-core/src/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
index 8c92730714d7a..8de1171b40ee2 100644
--- a/airflow-core/src/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
+++ b/airflow-core/src/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
@@ -134,7 +134,7 @@ const TriggerDAGForm = ({ dagDisplayName, dagId, isPaused, onClose, open }: Trig
                 </Field.Label>
               </Stack>
               <Stack css={{ flexBasis: "70%" }}>
-                <Input {...field} size="sm" />
+                <Input _hover={{ borderColor: "colorPalette.emphasized" }} colorPalette="brand" {...field} size="sm" />
                 <Field.HelperText>{translate("components:triggerDag.runIdHelp")}</Field.HelperText>
               </Stack>
             </Field.Root>
diff --git a/airflow-core/src/airflow/ui/src/components/ui/ActionButton.tsx b/airflow-core/src/airflow/ui/src/components/ui/ActionButton.tsx
index 773317e3fd45f..8261fc665c157 100644
--- a/airflow-core/src/airflow/ui/src/components/ui/ActionButton.tsx
+++ b/airflow-core/src/airflow/ui/src/components/ui/ActionButton.tsx
@@ -49,6 +49,10 @@ const ActionButton = ({
       {/* Extra div required for the Tooltip to be properly positioned if the ActionButton is used inside a Menu component*/}
       <div>
         <ButtonComponent
+          _hover={{
+            bg: "colorPalette.emphasized",
+            borderColor: "colorPalette.emphasized",
+          }}
           aria-label={actionName}
           colorPalette={withText ? colorPalette : "brand"}
           disabled={disabled}
diff --git a/airflow-core/src/airflow/ui/src/components/ui/InputWithAddon.tsx b/airflow-core/src/airflow/ui/src/components/ui/InputWithAddon.tsx
index b5a49e6cdf82d..bb285f8cfcd6c 100644
--- a/airflow-core/src/airflow/ui/src/components/ui/InputWithAddon.tsx
+++ b/airflow-core/src/airflow/ui/src/components/ui/InputWithAddon.tsx
@@ -39,7 +39,7 @@ export const InputWithAddon = React.forwardRef<HTMLInputElement, InputWithAddonP
       width={width}
     >
       <Text
-        bg="gray.muted"
+        bg="colorPalette.muted"
         borderLeftRadius="full"
         color="colorPalette.fg"
         colorPalette="gray"
diff --git a/airflow-core/src/airflow/ui/src/components/ui/RadioCard.tsx b/airflow-core/src/airflow/ui/src/components/ui/RadioCard.tsx
index ff7d75bc6b402..ad3a0f8e97798 100644
--- a/airflow-core/src/airflow/ui/src/components/ui/RadioCard.tsx
+++ b/airflow-core/src/airflow/ui/src/components/ui/RadioCard.tsx
@@ -45,7 +45,19 @@ export const RadioCardItem = forwardRef<HTMLInputElement, RadioCardItemProps>((p
   const shouldWrapContent = Boolean(indicator);
 
   return (
-    <RadioCard.Item {...rest}>
+    <RadioCard.Item
+      _hover={
+        rest.disabled
+          ? undefined
+          : {
+              bg: "colorPalette.emphasized",
+              borderColor: "colorPalette.emphasized",
+            }
+      }
+      colorPalette="brand"
+      cursor={rest.disabled ? "not-allowed" : "pointer"}
+      {...rest}
+    >
       <RadioCard.ItemHiddenInput ref={ref} {...inputProps} />
       <RadioCard.ItemControl>
         {indicatorPlacement === "start" && indicator}
diff --git a/airflow-core/src/airflow/ui/src/components/ui/Select/Trigger.tsx b/airflow-core/src/airflow/ui/src/components/ui/Select/Trigger.tsx
index ce5f47f201662..b0c3517659ff9 100644
--- a/airflow-core/src/airflow/ui/src/components/ui/Select/Trigger.tsx
+++ b/airflow-core/src/airflow/ui/src/components/ui/Select/Trigger.tsx
@@ -32,7 +32,12 @@ export const Trigger = forwardRef<HTMLButtonElement, Props>((props, ref) => {
 
   return (
     <ChakraSelect.Control {...rest}>
-      <ChakraSelect.Trigger ref={ref} {...triggerProps}>
+      <ChakraSelect.Trigger
+        _hover={{ bg: "colorPalette.emphasized" }}
+        cursor="pointer"
+        ref={ref}
+        {...triggerProps}
+      >
         {children}
       </ChakraSelect.Trigger>
       <ChakraSelect.IndicatorGroup _rtl={{ bottom: 0, left: 0, right: "auto", top: 0 }}>
diff --git a/airflow-core/src/airflow/ui/src/components/ui/Toaster/Toaster.tsx b/airflow-core/src/airflow/ui/src/components/ui/Toaster/Toaster.tsx
index 4d1f0d6b143c8..dd7fa6b2af557 100644
--- a/airflow-core/src/airflow/ui/src/components/ui/Toaster/Toaster.tsx
+++ b/airflow-core/src/airflow/ui/src/components/ui/Toaster/Toaster.tsx
@@ -25,7 +25,7 @@ export const Toaster = () => (
     <ChakraToaster insetInline={{ mdDown: "4" }} toaster={toaster}>
       {(toast) => (
         <Toast.Root width={{ md: "sm" }}>
-          {toast.type === "loading" ? <Spinner color="brand.solid" size="sm" /> : <Toast.Indicator />}
+          {toast.type === "loading" ? <Spinner color="toaster.spinner.color" size="sm" /> : <Toast.Indicator />}
           <Stack flex="1" gap="1" maxWidth="100%">
             {Boolean(toast.title) ? <Toast.Title>{toast.title}</Toast.Title> : undefined}
             {Boolean(toast.description) ? (
diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx b/airflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx
index 8f1371c2f4842..c6dd38ed5e64d 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx
@@ -223,7 +223,7 @@ export const DetailsLayout = ({ children, error, isLoading, tabs }: Props) => {
                       <>
                         <ActionButton
                           actionName={translate("common:dagWarnings")}
-                          colorPalette={Boolean(error) ? "red" : "orange"}
+                          colorPalette={Boolean(error) ? "danger" : "warning"}
                           icon={<LuFileWarning />}
                           margin="2"
                           marginBottom="-1"
diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx b/airflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx
index 8a72f0f54d3bb..9efe23c7304ea 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx
@@ -41,7 +41,6 @@ import { useParams, useNavigate, useLocation } from "react-router-dom";
 
 import { useTaskInstanceServiceGetTaskInstances } from "openapi/queries";
 import type { DagRunState, DagRunType } from "openapi/requests/types.gen";
-import { useColorMode } from "src/context/colorMode";
 import { useHover } from "src/context/hover";
 import { useOpenGroups } from "src/context/openGroups";
 import { useTimezone } from "src/context/timezone";
@@ -49,7 +48,7 @@ import { flattenNodes } from "src/layouts/Details/Grid/utils";
 import { useGridRuns } from "src/queries/useGridRuns";
 import { useGridStructure } from "src/queries/useGridStructure";
 import { useGridTiSummaries } from "src/queries/useGridTISummaries";
-import { getComputedCSSVariableValue } from "src/theme";
+import { resolveTokenValue } from "src/theme";
 import { isStatePending, useAutoRefresh } from "src/utils";
 import { DEFAULT_DATETIME_FORMAT_WITH_TZ, formatDate } from "src/utils/datetimeUtils";
 
@@ -86,22 +85,16 @@ export const Gantt = ({ dagRunState, limit, runType, triggeringUser }: Props) =>
   const deferredOpenGroupIds = useDeferredValue(openGroupIds);
   const { t: translate } = useTranslation("common");
   const { selectedTimezone } = useTimezone();
-  const { colorMode } = useColorMode();
   const { hoveredTaskId, setHoveredTaskId } = useHover();
   const navigate = useNavigate();
   const location = useLocation();
 
-  const [
-    lightGridColor,
-    darkGridColor,
-    lightSelectedColor,
-    darkSelectedColor,
-    lightHoverColor,
-    darkHoverColor,
-  ] = useToken("colors", ["gray.200", "gray.800", "blue.200", "blue.800", "blue.100", "blue.900"]);
-  const gridColor = colorMode === "light" ? lightGridColor : darkGridColor;
-  const selectedItemColor = colorMode === "light" ? lightSelectedColor : darkSelectedColor;
-  const hoveredItemColor = colorMode === "light" ? lightHoverColor : darkHoverColor;
+  const [gridColor, selectedItemColor, hoveredItemColor, infoSubtle] = useToken("colors", [
+    "gantt.grid.color",
+    "gantt.bg.selected",
+    "gantt.bg.hover",
+    "info.subtle",
+  ]).map(token => resolveTokenValue(token || "oklch(0.5 0 0)"));
 
   const { data: gridRuns, isLoading: runsLoading } = useGridRuns({
     dagRunState,
@@ -202,18 +195,25 @@ export const Gantt = ({ dagRunState, limit, runType, triggeringUser }: Props) =>
       .filter((item) => item !== undefined);
   }, [flatNodes, gridTiSummaries, taskInstancesData, selectedTimezone, isLoading, runId, currentTime]);
 
-  // Get all unique states and their colors
-  const states = [...new Set(data.map((item) => item.state ?? "none"))];
+  // Get all unique states from the data
+  const states = useMemo(() => [...new Set(data.map((item) => item.state ?? "none"))], [data]);
+
+  // Use Chakra's useToken hook to get color tokens for each state
   const stateColorTokens = useToken(
     "colors",
     states.map((state) => `${state}.solid`),
   );
-  const stateColorMap = Object.fromEntries(
-    states.map((state, index) => [
-      state,
-      getComputedCSSVariableValue(stateColorTokens[index] ?? "oklch(0.5 0 0)"),
-    ]),
-  );
+
+  // Create a mapping of state to computed color values for ChartJS
+  const stateColorMap = useMemo(() => {
+    const map: Record<string, string> = {};
+
+    states.forEach((state, index) => {
+      map[state] = resolveTokenValue(stateColorTokens[index] ?? "oklch(0.5 0 0)");
+    });
+
+    return map;
+  }, [states, stateColorTokens]);
 
   const chartData = useMemo(
     () => ({
@@ -239,8 +239,8 @@ export const Gantt = ({ dagRunState, limit, runType, triggeringUser }: Props) =>
   );
 
   const handleBarHover = useMemo(
-    () => createHandleBarHover(data, setHoveredTaskId),
-    [data, setHoveredTaskId],
+    () => createHandleBarHover(data, setHoveredTaskId, infoSubtle ?? ""),
+    [data, setHoveredTaskId, infoSubtle],
   );
 
   const chartOptions = useMemo(
diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/Gantt/utils.ts b/airflow-core/src/airflow/ui/src/layouts/Details/Gantt/utils.ts
index d3cab195c196b..babaeace88738 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/Gantt/utils.ts
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/Gantt/utils.ts
@@ -89,6 +89,7 @@ export const createHandleBarClick =
 export const createHandleBarHover = (
   data: Array<GanttDataItem>,
   setHoveredTaskId: (taskId: string | undefined) => void,
+  hoverColor: string,
 ) => {
   let lastHoveredTaskId: string | undefined = undefined;
 
@@ -117,7 +118,7 @@ export const createHandleBarHover = (
         );
 
         tasks.forEach((task) => {
-          task.style.backgroundColor = "var(--chakra-colors-info-subtle)";
+          task.style.backgroundColor = hoverColor;
         });
       }
     } else {
diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/Graph/Graph.tsx b/airflow-core/src/airflow/ui/src/layouts/Details/Graph/Graph.tsx
index 4c70510b7637e..80ce12e6a1315 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/Graph/Graph.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/Graph/Graph.tsx
@@ -19,7 +19,8 @@
 import { useToken } from "@chakra-ui/react";
 import { ReactFlow, Controls, Background, MiniMap, type Node as ReactFlowNode } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
-import { useEffect } from "react";
+import type { CSSProperties } from "react";
+import { useEffect, useMemo } from "react";
 import { useParams } from "react-router-dom";
 import { useLocalStorage } from "usehooks-ts";
 
@@ -34,19 +35,21 @@ import useSelectedVersion from "src/hooks/useSelectedVersion";
 import { flattenGraphNodes } from "src/layouts/Details/Grid/utils.ts";
 import { useDependencyGraph } from "src/queries/useDependencyGraph";
 import { useGridTiSummaries } from "src/queries/useGridTISummaries.ts";
-import { getReactFlowThemeStyle } from "src/theme";
+import { resolveTokenValue } from "src/theme";
 
 const nodeColor = (
-  { data: { depth, height, isOpen, taskInstance, width }, type }: ReactFlowNode<CustomNodeProps>,
-  evenColor?: string,
-  oddColor?: string,
+  node: ReactFlowNode<CustomNodeProps>,
+  colors: { evenColor?: string; oddColor?: string; stateColorMap?: Record<string, string> },
 ) => {
+  const { data: { depth, height, isOpen, taskInstance, width }, type } = node;
+  const { evenColor, oddColor, stateColorMap } = colors;
+
   if (height === undefined || width === undefined || type === "join") {
     return "";
   }
 
-  if (taskInstance?.state !== undefined && !isOpen) {
-    return `var(--chakra-colors-${taskInstance.state}-solid)`;
+  if (taskInstance?.state && !isOpen && stateColorMap) {
+    return stateColorMap[taskInstance.state] ?? "";
   }
 
   if (isOpen && depth !== undefined && depth % 2 === 0) {
@@ -64,14 +67,15 @@ export const Graph = () => {
 
   const selectedVersion = useSelectedVersion();
 
-  // corresponds to the "bg", "bg.emphasized", "border.inverted" semantic tokens
-  const [oddLight, oddDark, evenLight, evenDark, selectedDarkColor, selectedLightColor] = useToken("colors", [
-    "bg",
-    "fg",
-    "bg.muted",
-    "bg.emphasized",
-    "bg.muted",
-    "bg.emphasized",
+  const [groupOdd, groupEven, selectedStroke, bg, pattern, controlsBg, controlsHover, minimapBg] = useToken("colors", [
+    "graph.minimap.group.odd",
+    "graph.minimap.group.even",
+    "graph.selected.stroke",
+    "graph.bg",
+    "graph.pattern",
+    "graph.controls.bg.default",
+    "graph.controls.bg.hover",
+    "graph.minimap.bg",
   ]);
 
   const { allGroupIds, openGroupIds, setAllGroupIds } = useOpenGroups();
@@ -79,7 +83,6 @@ export const Graph = () => {
   const [dependencies] = useLocalStorage<"all" | "immediate" | "tasks">(`dependencies-${dagId}`, "tasks");
   const [direction] = useLocalStorage<Direction>(`direction-${dagId}`, "RIGHT");
 
-  const selectedColor = colorMode === "dark" ? selectedDarkColor : selectedLightColor;
   const { data: graphData = { edges: [], nodes: [] } } = useStructureServiceStructureData(
     {
       dagId,
@@ -122,6 +125,31 @@ export const Graph = () => {
 
   const { data: gridTISummaries } = useGridTiSummaries({ dagId, runId });
 
+  // Get unique states and their colors
+  const states = useMemo(
+    () => [...new Set(gridTISummaries?.task_instances.map((ti) => ti.state).filter(Boolean) ?? [])],
+    [gridTISummaries],
+  );
+
+  const stateColors = useToken(
+    "colors",
+    states.map((state) => `${state}.solid`),
+  ).map(token => resolveTokenValue(token || "oklch(0.5 0 0)"));
+
+  const stateColorMap = useMemo(() => {
+    const map: Record<string, string> = {};
+
+    states.forEach((state, index) => {
+      const color = stateColors[index];
+
+      if (state && color !== undefined) {
+        map[state] = color;
+      }
+    });
+
+    return map;
+  }, [states, stateColors]);
+
   // Add task instances to the node data but without having to recalculate how the graph is laid out
   const nodes = data?.nodes.map((node) => {
     const taskInstance = gridTISummaries?.task_instances.find((ti) => ti.task_id === node.id);
@@ -151,6 +179,14 @@ export const Graph = () => {
     },
   }));
 
+  const reactFlowStyle: CSSProperties = {
+    "--xy-background-color": bg,
+    "--xy-background-pattern-color": pattern,
+    "--xy-controls-button-background-color": controlsBg,
+    "--xy-controls-button-background-color-hover": controlsHover,
+    "--xy-minimap-background-color": minimapBg,
+  } as CSSProperties;
+
   return (
     <ReactFlow
       colorMode={colorMode}
@@ -165,20 +201,16 @@ export const Graph = () => {
       nodesDraggable={false}
       nodeTypes={nodeTypes}
       onlyRenderVisibleElements
-      style={getReactFlowThemeStyle(colorMode)}
+      style={reactFlowStyle}
     >
       <Background />
       <Controls showInteractive={false} />
       <MiniMap
         nodeColor={(node: ReactFlowNode<CustomNodeProps>) =>
-          nodeColor(
-            node,
-            colorMode === "dark" ? evenDark : evenLight,
-            colorMode === "dark" ? oddDark : oddLight,
-          )
+          nodeColor(node, { evenColor: groupEven, oddColor: groupOdd, stateColorMap })
         }
         nodeStrokeColor={(node: ReactFlowNode<CustomNodeProps>) =>
-          node.data.isSelected && selectedColor !== undefined ? selectedColor : ""
+          node.data.isSelected && selectedStroke !== undefined ? selectedStroke : ""
         }
         nodeStrokeWidth={15}
         pannable
diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/Bar.tsx b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/Bar.tsx
index 9360ace225621..fc3059698a7e0 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/Bar.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/Bar.tsx
@@ -48,8 +48,9 @@ export const Bar = ({ max, nodes, onCellClick, onColumnClick, run }: Props) => {
 
   return (
     <Box
-      _hover={{ bg: "brand.subtle" }}
-      bg={isSelected ? "brand.muted" : undefined}
+      _hover={{ bg: "colorPalette.subtle" }}
+      bg={isSelected ? "colorPalette.muted" : undefined}
+      colorPalette="brand"
       position="relative"
       transition="background-color 0.2s"
     >
diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridButton.tsx b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridButton.tsx
index f3dd0b3dc077f..c9035cf08a564 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridButton.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridButton.tsx
@@ -44,7 +44,7 @@ export const GridButton = ({
 }: Props) =>
   isGroup ? (
     <Flex
-      background={`${state}.solid`}
+      background={state ? `${state}.solid` : "grid.defaultState"}
       borderRadius={2}
       height="10px"
       minW="14px"
@@ -64,7 +64,7 @@ export const GridButton = ({
       }}
     >
       <Flex
-        background={`${state}.solid`}
+        background={state ? `${state}.solid` : "grid.defaultState"}
         borderRadius={2}
         height="10px"
         pb="2px"
diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridTI.tsx b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridTI.tsx
index ddf294353cb70..0da5f84cc6bee 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridTI.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridTI.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Badge, Flex } from "@chakra-ui/react";
+import { Badge, Flex, useToken } from "@chakra-ui/react";
 import type { MouseEvent } from "react";
 import React, { useCallback } from "react";
 import { useTranslation } from "react-i18next";
@@ -27,14 +27,16 @@ import { StateIcon } from "src/components/StateIcon";
 import Time from "src/components/Time";
 import { Tooltip } from "src/components/ui";
 import { type HoverContextType, useHover } from "src/context/hover";
+import { resolveTokenValue } from "src/theme";
 import { buildTaskInstanceUrl } from "src/utils/links";
 
 const handleMouseEnter =
-  (setHoveredTaskId: HoverContextType["setHoveredTaskId"]) => (event: MouseEvent<HTMLDivElement>) => {
+  (setHoveredTaskId: HoverContextType["setHoveredTaskId"], hoverColor: string) =>
+  (event: MouseEvent<HTMLDivElement>) => {
     const tasks = document.querySelectorAll<HTMLDivElement>(`#${event.currentTarget.id}`);
 
     tasks.forEach((task) => {
-      task.style.backgroundColor = "var(--chakra-colors-info-subtle)";
+      task.style.backgroundColor = hoverColor;
     });
 
     setHoveredTaskId(event.currentTarget.id.replaceAll("-", "."));
@@ -69,7 +71,10 @@ const Instance = ({ dagId, instance, isGroup, isMapped, onClick, runId, taskId }
 
   const [searchParams] = useSearchParams();
 
-  const onMouseEnter = handleMouseEnter(setHoveredTaskId);
+  const [hoverColor] = useToken("colors", ["info.subtle"])
+    .map(token => resolveTokenValue(token || "oklch(0.5 0 0)"));
+
+  const onMouseEnter = handleMouseEnter(setHoveredTaskId, hoverColor ?? "");
   const onMouseLeave = handleMouseLeave(taskId, setHoveredTaskId);
 
   const getTaskUrl = useCallback(
diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/TaskNames.tsx b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/TaskNames.tsx
index 21b4c6af05481..1e1db3cc0811a 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/TaskNames.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/TaskNames.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, chakra, Flex, Link } from "@chakra-ui/react";
+import { Box, chakra, Flex, Link, useToken } from "@chakra-ui/react";
 import type { MouseEvent } from "react";
 import { useTranslation } from "react-i18next";
 import { FiChevronUp } from "react-icons/fi";
@@ -25,6 +25,7 @@ import { Link as RouterLink, useParams, useSearchParams } from "react-router-dom
 import { TaskName } from "src/components/TaskName";
 import { type HoverContextType, useHover } from "src/context/hover";
 import { useOpenGroups } from "src/context/openGroups";
+import { resolveTokenValue } from "src/theme";
 
 import type { GridTask } from "./utils";
 
@@ -39,15 +40,15 @@ const indent = (depth: number) => `${depth * 0.75 + 0.5}rem`;
 const onMouseEnter = (
   event: MouseEvent<HTMLDivElement>,
   nodeId: string,
-  setHoveredTaskId: HoverContextType["setHoveredTaskId"],
+  handlers: { hoverColor: string; setHoveredTaskId: HoverContextType["setHoveredTaskId"] },
 ) => {
   const tasks = document.querySelectorAll<HTMLDivElement>(`#${event.currentTarget.id}`);
 
   tasks.forEach((task) => {
-    task.style.backgroundColor = "var(--chakra-colors-info-subtle)";
+    task.style.backgroundColor = handlers.hoverColor;
   });
 
-  setHoveredTaskId(nodeId);
+  handlers.setHoveredTaskId(nodeId);
 };
 
 const onMouseLeave = (nodeId: string, setHoveredTaskId: HoverContextType["setHoveredTaskId"]) => {
@@ -67,6 +68,9 @@ export const TaskNames = ({ nodes, onRowClick }: Props) => {
   const { dagId = "", groupId, taskId } = useParams();
   const [searchParams] = useSearchParams();
 
+  const [hoverColor] = useToken("colors", ["info.subtle"])
+    .map(token => resolveTokenValue(token || "oklch(0.5 0 0)"));
+
   return nodes.map((node, index) => (
     <Box
       bg={node.id === taskId || node.id === groupId ? "info.muted" : undefined}
@@ -77,7 +81,7 @@ export const TaskNames = ({ nodes, onRowClick }: Props) => {
       id={`task-${node.id.replaceAll(".", "-")}`}
       key={node.id}
       maxHeight="20px"
-      onMouseEnter={(event) => onMouseEnter(event, node.id, setHoveredTaskId)}
+      onMouseEnter={(event) => onMouseEnter(event, node.id, { hoverColor: hoverColor ?? "", setHoveredTaskId })}
       onMouseLeave={() => onMouseLeave(node.id, setHoveredTaskId)}
       transition="background-color 0.2s"
     >
diff --git a/airflow-core/src/airflow/ui/src/layouts/Nav/Nav.tsx b/airflow-core/src/airflow/ui/src/layouts/Nav/Nav.tsx
index b313a4ff63484..2c9042568dfd4 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Nav/Nav.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Nav/Nav.tsx
@@ -136,7 +136,7 @@ export const Nav = () => {
         right: 0,
       }}
       alignItems="center"
-      bg="brand.muted"
+      bg="nav.bg"
       height="100%"
       justifyContent="space-between"
       position="fixed"
diff --git a/airflow-core/src/airflow/ui/src/layouts/Nav/NavButton.tsx b/airflow-core/src/airflow/ui/src/layouts/Nav/NavButton.tsx
index e8f14803366a1..e6e727d4ae7c5 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Nav/NavButton.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Nav/NavButton.tsx
@@ -22,11 +22,11 @@ import { NavLink } from "react-router-dom";
 
 const styles = {
   _active: {
-    bg: "brand.emphasized",
+    bg: "nav.button.bg.active",
   },
   // Fix inverted hover and active colors
   _hover: {
-    bg: "brand.emphasized", // Even darker for better light mode contrast
+    bg: "colorPalette.emphasized",
   },
   alignItems: "center",
   borderRadius: "none",
@@ -63,9 +63,8 @@ export const NavButton = ({ icon, isExternal = false, title, to, ...rest }: NavB
       {({ isActive }: { readonly isActive: boolean }) => (
         <Button
           {...styles}
-          _active={isActive ? { bg: "brand.solid" } : { bg: "brand.emphasized" }}
-          // Override styles for active state to ensure proper colors
-          _hover={isActive ? { bg: "brand.solid" } : { bg: "brand.emphasized" }}
+          _active={isActive ? { bg: "nav.button.bg.active" } : { bg: "nav.button.bg.default" }}
+          _hover={isActive ? { bg: "nav.button.bg.active" } : { bg: "colorPalette.emphasized" }}
           variant={isActive ? "solid" : "ghost"}
           {...rest}
         >
diff --git a/airflow-core/src/airflow/ui/src/pages/Asset/AssetGraph.tsx b/airflow-core/src/airflow/ui/src/pages/Asset/AssetGraph.tsx
index f00c00b85023d..f58abe5263706 100644
--- a/airflow-core/src/airflow/ui/src/pages/Asset/AssetGraph.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Asset/AssetGraph.tsx
@@ -19,6 +19,7 @@
 import { useToken } from "@chakra-ui/react";
 import { ReactFlow, Controls, Background, MiniMap, type Node as ReactFlowNode } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
+import type { CSSProperties } from "react";
 import { useParams } from "react-router-dom";
 
 import type { AssetResponse } from "openapi/requests/types.gen";
@@ -28,7 +29,6 @@ import type { CustomNodeProps } from "src/components/Graph/reactflowUtils";
 import { useGraphLayout } from "src/components/Graph/useGraphLayout";
 import { useColorMode } from "src/context/colorMode";
 import { useDependencyGraph } from "src/queries/useDependencyGraph";
-import { getReactFlowThemeStyle } from "src/theme";
 
 export const AssetGraph = ({ asset }: { readonly asset?: AssetResponse }) => {
   const { assetId } = useParams();
@@ -46,9 +46,14 @@ export const AssetGraph = ({ asset }: { readonly asset?: AssetResponse }) => {
     node.id === `asset:${assetId}` ? { ...node, data: { ...node.data, isSelected: true } } : node,
   );
 
-  const [selectedDarkColor, selectedLightColor] = useToken("colors", ["bg.muted", "bg.emphasized"]);
-
-  const selectedColor = colorMode === "dark" ? selectedDarkColor : selectedLightColor;
+  const [selectedStroke, bg, pattern, controlsBg, controlsHover, minimapBg] = useToken("colors", [
+    "asset-graph.selected.stroke",
+    "asset-graph.bg",
+    "asset-graph.pattern",
+    "asset-graph.controls.bg.default",
+    "asset-graph.controls.bg.hover",
+    "asset-graph.minimap.bg",
+  ]);
 
   const edges = (graphData?.edges ?? []).map((edge) => ({
     ...edge,
@@ -61,6 +66,14 @@ export const AssetGraph = ({ asset }: { readonly asset?: AssetResponse }) => {
     },
   }));
 
+  const reactFlowStyle: CSSProperties = {
+    "--xy-background-color": bg,
+    "--xy-background-pattern-color": pattern,
+    "--xy-controls-button-background-color": controlsBg,
+    "--xy-controls-button-background-color-hover": controlsHover,
+    "--xy-minimap-background-color": minimapBg,
+  } as CSSProperties;
+
   return (
     <ReactFlow
       colorMode={colorMode}
@@ -75,13 +88,13 @@ export const AssetGraph = ({ asset }: { readonly asset?: AssetResponse }) => {
       nodesDraggable={false}
       nodeTypes={nodeTypes}
       onlyRenderVisibleElements
-      style={getReactFlowThemeStyle(colorMode)}
+      style={reactFlowStyle}
     >
       <Background />
       <Controls showInteractive={false} />
       <MiniMap
         nodeStrokeColor={(node: ReactFlowNode<CustomNodeProps>) =>
-          node.data.isSelected && selectedColor !== undefined ? selectedColor : ""
+          node.data.isSelected && selectedStroke !== undefined ? selectedStroke : ""
         }
         nodeStrokeWidth={15}
         pannable
diff --git a/airflow-core/src/airflow/ui/src/pages/Connections/DeleteConnectionsButton.tsx b/airflow-core/src/airflow/ui/src/pages/Connections/DeleteConnectionsButton.tsx
index 21765b73ae71d..1c8d298fefc74 100644
--- a/airflow-core/src/airflow/ui/src/pages/Connections/DeleteConnectionsButton.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Connections/DeleteConnectionsButton.tsx
@@ -45,7 +45,7 @@ const DeleteConnectionsButton = ({ clearSelections, deleteKeys: connectionIds }:
     <>
       <Button
         aria-label={translate("deleteActions.button")}
-        colorPalette="red"
+        colorPalette="danger"
         onClick={onOpen}
         size="sm"
         variant="outline"
@@ -79,7 +79,7 @@ const DeleteConnectionsButton = ({ clearSelections, deleteKeys: connectionIds }:
             <ErrorAlert error={error} />
             <Flex justifyContent="end" mt={3}>
               <Button
-                colorPalette="red"
+                colorPalette="danger"
                 loading={isPending}
                 onClick={() => {
                   mutate({ requestBody: { actions: [{ action: "delete", entities: connectionIds }] } });
diff --git a/airflow-core/src/airflow/ui/src/pages/Connections/TestConnectionButton.tsx b/airflow-core/src/airflow/ui/src/pages/Connections/TestConnectionButton.tsx
index 7b27877d87037..7d175ebd2362b 100644
--- a/airflow-core/src/airflow/ui/src/pages/Connections/TestConnectionButton.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Connections/TestConnectionButton.tsx
@@ -31,8 +31,8 @@ type Props = {
 };
 
 const defaultIcon = <FiActivity />;
-const connectedIcon = <FiWifi color="green" />;
-const disconnectedIcon = <FiWifiOff color="red" />;
+const connectedIcon = <FiWifi color="test-connection.icon.connected" />;
+const disconnectedIcon = <FiWifiOff color="test-connection.icon.disconnected" />;
 
 const TestConnectionButton = ({ connection }: Props) => {
   const { t: translate } = useTranslation("admin");
diff --git a/airflow-core/src/airflow/ui/src/pages/Dag/Calendar/CalendarTooltip.tsx b/airflow-core/src/airflow/ui/src/pages/Dag/Calendar/CalendarTooltip.tsx
index 61f65e9b8769f..e80a45ce53f7a 100644
--- a/airflow-core/src/airflow/ui/src/pages/Dag/Calendar/CalendarTooltip.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Dag/Calendar/CalendarTooltip.tsx
@@ -16,11 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, HStack, Text, VStack } from "@chakra-ui/react";
+import { Box, HStack, Text, VStack, useToken } from "@chakra-ui/react";
 import { useMemo } from "react";
 import type { RefObject } from "react";
 import { useTranslation } from "react-i18next";
 
+import { resolveTokenValue } from "src/theme";
+
 import type { CalendarCellData, CalendarColorMode } from "./types";
 
 const SQUARE_SIZE = "12px";
@@ -42,6 +44,9 @@ const stateColorMap = {
 export const CalendarTooltip = ({ cellData, triggerRef, viewMode = "total" }: Props) => {
   const { t: translate } = useTranslation(["dag", "common"]);
 
+  const [bgInverted, fgInverted] = useToken("colors", ["bg.inverted", "fg.inverted"])
+    .map(token => resolveTokenValue(token || "oklch(0.5 0 0)"));
+
   const tooltipStyle = useMemo(() => {
     if (!triggerRef.current) {
       return { display: "none" };
@@ -50,9 +55,9 @@ export const CalendarTooltip = ({ cellData, triggerRef, viewMode = "total" }: Pr
     const rect = triggerRef.current.getBoundingClientRect();
 
     return {
-      backgroundColor: "var(--chakra-colors-bg-inverted)",
+      backgroundColor: bgInverted,
       borderRadius: "4px",
-      color: "var(--chakra-colors-fg-inverted)",
+      color: fgInverted,
       fontSize: "14px",
       left: `${rect.left + globalThis.scrollX + rect.width / 2}px`,
       minWidth: "200px",
@@ -63,11 +68,11 @@ export const CalendarTooltip = ({ cellData, triggerRef, viewMode = "total" }: Pr
       whiteSpace: "nowrap" as const,
       zIndex: 1000,
     };
-  }, [triggerRef]);
+  }, [triggerRef, bgInverted, fgInverted]);
 
   const arrowStyle = useMemo(
     () => ({
-      borderBottom: "4px solid var(--chakra-colors-bg-inverted)",
+      borderBottom: `4px solid ${bgInverted}`,
       borderLeft: "4px solid transparent",
       borderRight: "4px solid transparent",
       content: '""',
@@ -78,7 +83,7 @@ export const CalendarTooltip = ({ cellData, triggerRef, viewMode = "total" }: Pr
       transform: "translateX(-50%)",
       width: 0,
     }),
-    [],
+    [bgInverted],
   );
 
   if (!cellData) {
diff --git a/airflow-core/src/airflow/ui/src/pages/Dag/Calendar/HourlyCalendarView.tsx b/airflow-core/src/airflow/ui/src/pages/Dag/Calendar/HourlyCalendarView.tsx
index 0979f5efcb6f4..a39ed87489ca3 100644
--- a/airflow-core/src/airflow/ui/src/pages/Dag/Calendar/HourlyCalendarView.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Dag/Calendar/HourlyCalendarView.tsx
@@ -145,7 +145,7 @@ export const HourlyCalendarView = ({
           {Array.from({ length: 24 }, (_, hour) => (
             <Box
               alignItems="center"
-              color="gray.500"
+              color="calendar.hour-label.color"
               display="flex"
               fontSize="xs"
               height="14px"
diff --git a/airflow-core/src/airflow/ui/src/pages/Dag/Overview/Overview.tsx b/airflow-core/src/airflow/ui/src/pages/Dag/Overview/Overview.tsx
index 8cebcc4ba0b8e..f2f6ffe0aa3cb 100644
--- a/airflow-core/src/airflow/ui/src/pages/Dag/Overview/Overview.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Dag/Overview/Overview.tsx
@@ -89,7 +89,7 @@ export const Overview = () => {
       </Box>
       <HStack flexWrap="wrap">
         <TrendCountButton
-          colorPalette={(failedTasks?.total_entries ?? 0) === 0 ? "green" : "failed"}
+          colorPalette={(failedTasks?.total_entries ?? 0) === 0 ? "success" : "failed"}
           count={failedTasks?.total_entries ?? 0}
           endDate={endDate}
           events={(failedTasks?.task_instances ?? []).map((ti) => ({
@@ -104,7 +104,7 @@ export const Overview = () => {
           startDate={startDate}
         />
         <TrendCountButton
-          colorPalette={(failedRuns?.total_entries ?? 0) === 0 ? "green" : "failed"}
+          colorPalette={(failedRuns?.total_entries ?? 0) === 0 ? "success" : "failed"}
           count={failedRuns?.total_entries ?? 0}
           endDate={endDate}
           events={(failedRuns?.dag_runs ?? []).map((dr) => ({
diff --git a/airflow-core/src/airflow/ui/src/pages/DagsList/DagsFilters/FavoriteFilter.tsx b/airflow-core/src/airflow/ui/src/pages/DagsList/DagsFilters/FavoriteFilter.tsx
index 5e8bcd93cd951..497738334cb3d 100644
--- a/airflow-core/src/airflow/ui/src/pages/DagsList/DagsFilters/FavoriteFilter.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/DagsList/DagsFilters/FavoriteFilter.tsx
@@ -43,7 +43,7 @@ export const FavoriteFilter = ({ onFavoriteChange, showFavorites }: Props) => {
       onValueChange={onFavoriteChange}
       value={[showFavorites ?? "all"]}
     >
-      <Select.Trigger colorPalette="brand" isActive={Boolean(showFavorites)}>
+      <Select.Trigger colorPalette="gray" isActive={Boolean(showFavorites)}>
         <Select.ValueText width={20} />
       </Select.Trigger>
       <Select.Content>
diff --git a/airflow-core/src/airflow/ui/src/pages/DagsList/DagsFilters/PausedFilter.tsx b/airflow-core/src/airflow/ui/src/pages/DagsList/DagsFilters/PausedFilter.tsx
index 042795b18d086..504854932a4e6 100644
--- a/airflow-core/src/airflow/ui/src/pages/DagsList/DagsFilters/PausedFilter.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/DagsList/DagsFilters/PausedFilter.tsx
@@ -44,7 +44,7 @@ export const PausedFilter = ({ defaultShowPaused, onPausedChange, showPaused }:
       onValueChange={onPausedChange}
       value={[showPaused ?? defaultShowPaused]}
     >
-      <Select.Trigger colorPalette="brand" isActive={Boolean(showPaused)}>
+      <Select.Trigger colorPalette="gray" isActive={Boolean(showPaused)}>
         <Select.ValueText width={20} />
       </Select.Trigger>
       <Select.Content>
diff --git a/airflow-core/src/airflow/ui/src/pages/DagsList/DagsFilters/StateFilters.tsx b/airflow-core/src/airflow/ui/src/pages/DagsList/DagsFilters/StateFilters.tsx
index 3bda2ba98feb2..71657427ec1d4 100644
--- a/airflow-core/src/airflow/ui/src/pages/DagsList/DagsFilters/StateFilters.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/DagsList/DagsFilters/StateFilters.tsx
@@ -46,10 +46,11 @@ export const StateFilters = ({
 
   return (
     <HStack>
-      <QuickFilterButton isActive={isAll} onClick={onStateChange} value="all">
+      <QuickFilterButton colorPalette="brand" isActive={isAll} onClick={onStateChange} value="all">
         {translate("dags:filters.paused.all")}
       </QuickFilterButton>
       <QuickFilterButton
+        colorPalette="failed"
         data-testid="dags-failed-filter"
         isActive={isFailed}
         onClick={onStateChange}
@@ -59,6 +60,7 @@ export const StateFilters = ({
         {translate("common:states.failed")}
       </QuickFilterButton>
       <QuickFilterButton
+        colorPalette="queued"
         data-testid="dags-queued-filter"
         isActive={isQueued}
         onClick={onStateChange}
@@ -68,6 +70,7 @@ export const StateFilters = ({
         {translate("common:states.queued")}
       </QuickFilterButton>
       <QuickFilterButton
+        colorPalette="running"
         data-testid="dags-running-filter"
         isActive={isRunning}
         onClick={onStateChange}
@@ -77,6 +80,7 @@ export const StateFilters = ({
         {translate("common:states.running")}
       </QuickFilterButton>
       <QuickFilterButton
+        colorPalette="success"
         data-testid="dags-success-filter"
         isActive={isSuccess}
         onClick={onStateChange}
@@ -86,6 +90,7 @@ export const StateFilters = ({
         {translate("common:states.success")}
       </QuickFilterButton>
       <QuickFilterButton
+        colorPalette="deferred"
         data-testid="dags-needs-review-filter"
         isActive={needsReview}
         onClick={onStateChange}
diff --git a/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/DAGImportErrors.tsx b/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/DAGImportErrors.tsx
index 87b9bf917e0c6..2dd6666db49d6 100644
--- a/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/DAGImportErrors.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/DAGImportErrors.tsx
@@ -60,7 +60,7 @@ export const DAGImportErrors = ({ iconOnly = false }: { readonly iconOnly?: bool
         </StateBadge>
       ) : (
         <StatsCard
-          colorScheme="failed"
+          colorPalette="failed"
           count={importErrorsCount}
           icon={<LuFileWarning />}
           isLoading={isLoading}
diff --git a/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/Stats.tsx b/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/Stats.tsx
index 4192ad7b88652..4559a3fcc45e5 100644
--- a/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/Stats.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/Stats.tsx
@@ -55,7 +55,7 @@ export const Stats = () => {
         <NeedsReviewButton />
 
         <StatsCard
-          colorScheme="failed"
+          colorPalette="failed"
           count={failedDagsCount}
           isLoading={isStatsLoading}
           isRTL={isRTL}
@@ -70,7 +70,7 @@ export const Stats = () => {
 
         {queuedDagsCount > 0 ? (
           <StatsCard
-            colorScheme="queued"
+            colorPalette="queued"
             count={queuedDagsCount}
             isLoading={isStatsLoading}
             isRTL={isRTL}
@@ -81,7 +81,7 @@ export const Stats = () => {
         ) : undefined}
 
         <StatsCard
-          colorScheme="running"
+          colorPalette="running"
           count={runningDagsCount}
           isLoading={isStatsLoading}
           isRTL={isRTL}
@@ -91,7 +91,7 @@ export const Stats = () => {
         />
 
         <StatsCard
-          colorScheme="active"
+          colorPalette="active"
           count={activeDagsCount}
           icon={<FiZap />}
           isLoading={isStatsLoading}
diff --git a/airflow-core/src/airflow/ui/src/pages/Task/Overview/Overview.tsx b/airflow-core/src/airflow/ui/src/pages/Task/Overview/Overview.tsx
index d003174b98752..bd7660f7d0805 100644
--- a/airflow-core/src/airflow/ui/src/pages/Task/Overview/Overview.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Task/Overview/Overview.tsx
@@ -84,7 +84,7 @@ export const Overview = () => {
       </Box>
       <HStack flexWrap="wrap">
         <TrendCountButton
-          colorPalette={(failedTaskInstances?.total_entries ?? 0) === 0 ? "green" : "red"}
+          colorPalette={(failedTaskInstances?.total_entries ?? 0) === 0 ? "success" : "failed"}
           count={failedTaskInstances?.total_entries ?? 0}
           endDate={endDate}
           events={(failedTaskInstances?.task_instances ?? []).map((ti) => ({
diff --git a/airflow-core/src/airflow/ui/src/pages/TaskInstance/Logs/ExternalLogLink.tsx b/airflow-core/src/airflow/ui/src/pages/TaskInstance/Logs/ExternalLogLink.tsx
index 327fa85f9a69b..e995d0ba18f08 100644
--- a/airflow-core/src/airflow/ui/src/pages/TaskInstance/Logs/ExternalLogLink.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/TaskInstance/Logs/ExternalLogLink.tsx
@@ -57,7 +57,7 @@ export const ExternalLogLink = ({ externalLogName, taskInstance, tryNumber }: Pr
   }
 
   return (
-    <Button asChild colorScheme="brand" variant="outline">
+    <Button asChild colorPalette="brand" variant="outline">
       <a href={externalLogData.url} rel="noopener noreferrer" target="_blank">
         {translate("logs.viewInExternal", { attempt: tryNumber, name: externalLogName })}
       </a>
diff --git a/airflow-core/src/airflow/ui/src/pages/Variables/ImportVariablesForm.tsx b/airflow-core/src/airflow/ui/src/pages/Variables/ImportVariablesForm.tsx
index 5f863f356ef06..8ffef8bf47ce0 100644
--- a/airflow-core/src/airflow/ui/src/pages/Variables/ImportVariablesForm.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Variables/ImportVariablesForm.tsx
@@ -154,7 +154,7 @@ const ImportVariablesForm = ({ onClose }: ImportVariablesFormProps) => {
         </InputGroup>
         {isParsing ? (
           <Center mt={2}>
-            <Spinner color="brand.solid" marginRight={2} size="sm" /> Parsing file...
+            <Spinner color="import-variables.spinner.color" marginRight={2} size="sm" /> Parsing file...
           </Center>
         ) : undefined}
       </FileUpload.Root>
@@ -186,7 +186,7 @@ const ImportVariablesForm = ({ onClose }: ImportVariablesFormProps) => {
         {isPending ? (
           <Box bg="bg.muted" inset="0" pos="absolute">
             <Center h="full">
-              <Spinner borderWidth="4px" color="brand.solid" size="xl" />
+              <Spinner borderWidth="4px" color="import-variables.spinner.color" size="xl" />
             </Center>
           </Box>
         ) : undefined}
diff --git a/airflow-core/src/airflow/ui/src/theme.ts b/airflow-core/src/airflow/ui/src/theme.ts
index bd8206c11d338..a18d05eba0fe5 100644
--- a/airflow-core/src/airflow/ui/src/theme.ts
+++ b/airflow-core/src/airflow/ui/src/theme.ts
@@ -21,7 +21,6 @@
 
 /* eslint-disable max-lines */
 import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react";
-import type { CSSProperties } from "react";
 
 const generateSemanticTokens = (color: string, darkContrast: string = "white") => ({
   solid: { value: `{colors.${color}.600}` },
@@ -33,6 +32,13 @@ const generateSemanticTokens = (color: string, darkContrast: string = "white") =
   focusRing: { value: { _light: `{colors.${color}.800}`, _dark: `{colors.${color}.200}` } },
 });
 
+// Utility function to resolve CSS variables to their computed values
+// See: https://github.com/chakra-ui/panda/discussions/2200
+export const resolveTokenValue = (variable: string): string =>
+  getComputedStyle(document.documentElement)
+    .getPropertyValue(variable.slice(4, variable.length - 1))
+    .trim();
+
 export const customConfig = defineConfig({
   // See https://chakra-ui.com/docs/theming/colors for more information on the colors used here.
   theme: {
@@ -392,35 +398,205 @@ export const customConfig = defineConfig({
         zinc: generateSemanticTokens("zinc"),
         neutral: generateSemanticTokens("neutral"),
         stone: generateSemanticTokens("stone"),
+
+        // COMPONENT-SPECIFIC SEMANTIC TOKENS
+
+        // components/DataTable/
+        "data-table": {
+          header: {
+            bg: { value: { _light: "{colors.gray.50}", _dark: "{colors.gray.800}" } },
+            text: { value: { _light: "{colors.gray.700}", _dark: "{colors.gray.300}" } },
+            border: { value: { _light: "{colors.gray.200}", _dark: "{colors.gray.700}" } }
+          },
+          row: {
+            bg: {
+              default: { value: { _light: "white", _dark: "{colors.gray.900}" } },
+              hover: { value: { _light: "{colors.gray.50}", _dark: "{colors.gray.800}" } }
+            },
+            border: { value: { _light: "{colors.gray.100}", _dark: "{colors.gray.800}" } }
+          },
+          cell: {
+            text: { value: { _light: "{colors.gray.700}", _dark: "{colors.gray.300}" } },
+            muted: { value: { _light: "{colors.gray.500}", _dark: "{colors.gray.500}" } }
+          },
+        },
+
+        // components/EditableMarkdownButton.tsx
+        "editable-markdown-button": {
+          indicator: {
+            bg: { value: "{colors.brand.500}" }
+          },
+          header: {
+            bg: { value: { _light: "{colors.brand.200}", _dark: "{colors.brand.800}" } }
+          }
+        },
+
+        // components/FilterBar/
+        "filter-bar": {
+          pill: {
+            close: {
+              color: { value: { _light: "{colors.gray.400}", _dark: "{colors.gray.400}" } },
+              bg: {
+                hover: { value: { _light: "{colors.gray.100}", _dark: "{colors.gray.700}" } }
+              }
+            }
+          }
+        },
+        // components/TrendCountChart.tsx
+        "trend-count-chart": {
+          success: {
+            bg: { value: { _light: "{colors.green.100}", _dark: "{colors.green.800}" } },
+            line: { value: { _light: "{colors.green.500}", _dark: "{colors.green.400}" } }
+          },
+          failed: {
+            bg: { value: { _light: "{colors.red.100}", _dark: "{colors.red.800}" } },
+            line: { value: { _light: "{colors.red.500}", _dark: "{colors.red.400}" } }
+          }
+        },
+        // components/ui/Toaster/Toaster.tsx
+        toaster: {
+          spinner: {
+            color: { value: "{colors.brand.600}" }
+          }
+        },
+        // layouts/Details/Gantt/Gantt.tsx
+        gantt: {
+          grid: {
+            color: { value: { _light: "{colors.gray.200}", _dark: "{colors.gray.800}" } }
+          },
+          bg: {
+            selected: { value: { _light: "{colors.gray.100}", _dark: "{colors.gray.700}" } },
+            hover: { value: { _light: "{colors.gray.50}", _dark: "{colors.gray.800}" } }
+          }
+        },
+
+        // layouts/Details/Graph/Graph.tsx
+        graph: {
+          node: {
+            success: { value: "{colors.green.500}" },
+            failed: { value: "{colors.red.500}" },
+            running: { value: "{colors.cyan.500}" },
+            queued: { value: "{colors.yellow.500}" },
+            skipped: { value: "{colors.gray.400}" },
+            default: { value: { _light: "{colors.gray.300}", _dark: "{colors.gray.600}" } }
+          },
+          edge: {
+            default: { value: { _light: "{colors.gray.300}", _dark: "{colors.gray.600}" } },
+            active: { value: "{colors.brand.600}" }
+          },
+          background: { value: { _light: "{colors.gray.50}", _dark: "{colors.gray.900}" } },
+          bg: { value: { _light: "{colors.brand.50}", _dark: "{colors.brand.950}" } },
+          pattern: { value: { _light: "{colors.gray.800}", _dark: "{colors.gray.200}" } },
+          controls: {
+            bg: {
+              default: { value: { _light: "white", _dark: "{colors.gray.800}" } },
+              hover: { value: { _light: "{colors.gray.100}", _dark: "{colors.gray.700}" } }
+            }
+          },
+          minimap: {
+            bg: { value: { _light: "white", _dark: "{colors.gray.800}" } },
+            group: {
+              odd: { value: { _light: "white", _dark: "{colors.gray.900}" } },
+              even: { value: { _light: "{colors.gray.200}", _dark: "{colors.gray.300}" } }
+            }
+          },
+          selected: {
+            stroke: { value: { _light: "{colors.gray.900}", _dark: "{colors.gray.100}" } }
+          }
+        },
+
+
+        // layouts/Nav/
+        nav: {
+          bg: { value: { _light: "{colors.brand.100}", _dark: "{colors.brand.900}" } },
+          button: {
+            bg: {
+              default: { value: { _light: "{colors.brand.600}", _dark: "{colors.brand.600}" } },
+              active: { value: { _light: "{colors.brand.600}", _dark: "{colors.brand.400}" } }
+            }
+          }
+        },
+
+        // pages/Asset/AssetGraph.tsx
+        "asset-graph": {
+          bg: { value: { _light: "{colors.brand.50}", _dark: "{colors.brand.950}" } },
+          pattern: { value: { _light: "{colors.gray.800}", _dark: "{colors.gray.200}" } },
+          controls: {
+            bg: {
+              default: { value: { _light: "white", _dark: "{colors.gray.800}" } },
+              hover: { value: { _light: "{colors.gray.100}", _dark: "{colors.gray.700}" } }
+            }
+          },
+          minimap: {
+            bg: { value: { _light: "white", _dark: "{colors.gray.800}" } }
+          },
+          selected: {
+            stroke: { value: { _light: "{colors.gray.900}", _dark: "{colors.gray.100}" } }
+          }
+        },
+
+        // pages/Connections/TestConnectionButton.tsx
+        "test-connection": {
+          icon: {
+            connected: { value: "{colors.green.600}" },
+            disconnected: { value: "{colors.red.600}" }
+          }
+        },
+
+        // pages/Dag/Calendar/HourlyCalendarView.tsx
+        calendar: {
+          "hour-label": {
+            color: { value: { _light: "{colors.gray.500}", _dark: "{colors.gray.500}" } }
+          }
+        },
+
+        // pages/Variables/ImportVariablesForm.tsx
+        "import-variables": {
+          spinner: {
+            color: { value: "{colors.brand.600}" }
+          }
+        },
+
+        // Generic tokens (used by HeaderCard, StatsCard, etc.)
+        card: {
+          default: {
+            bg: { value: { _light: "white", _dark: "{colors.gray.800}" } },
+            border: { value: { _light: "{colors.gray.200}", _dark: "{colors.gray.700}" } },
+            shadow: { value: { _light: "0 1px 3px rgba(0, 0, 0, 0.1)", _dark: "0 1px 3px rgba(0, 0, 0, 0.3)" } }
+          },
+          elevated: {
+            bg: { value: { _light: "white", _dark: "{colors.gray.800}" } },
+            border: { value: { _light: "{colors.gray.200}", _dark: "{colors.gray.700}" } },
+            shadow: { value: { _light: "0 4px 6px rgba(0, 0, 0, 0.1)", _dark: "0 4px 6px rgba(0, 0, 0, 0.3)" } }
+          },
+          header: {
+            bg: { value: { _light: "{colors.gray.50}", _dark: "{colors.gray.700}" } },
+            text: { value: { _light: "{colors.gray.900}", _dark: "{colors.gray.100}" } },
+            border: { value: { _light: "{colors.gray.200}", _dark: "{colors.gray.600}" } }
+          }
+        },
+
+        // Generic tokens (used by FlexibleForm and other forms)
+        form: {
+          input: {
+            bg: { value: { _light: "white", _dark: "{colors.gray.800}" } },
+            border: { value: { _light: "{colors.gray.300}", _dark: "{colors.gray.600}" } },
+            focus: { value: "{colors.brand.600}" },
+            error: { value: "{colors.red.500}" },
+            text: { value: { _light: "{colors.gray.900}", _dark: "{colors.gray.100}" } },
+            placeholder: { value: { _light: "{colors.gray.500}", _dark: "{colors.gray.500}" } }
+          },
+          label: {
+            text: { value: { _light: "{colors.gray.700}", _dark: "{colors.gray.300}" } },
+            required: { value: "{colors.red.500}" }
+          },
+          help: {
+            text: { value: { _light: "{colors.gray.600}", _dark: "{colors.gray.400}" } }
+          }
+        },
       },
     },
   },
 });
 
 export const system = createSystem(defaultConfig, customConfig);
-
-// Utility function to resolve CSS variables to their computed values
-// See: https://github.com/chakra-ui/panda/discussions/2200
-export const getComputedCSSVariableValue = (variable: string): string =>
-  getComputedStyle(document.documentElement)
-    .getPropertyValue(variable.slice(4, variable.length - 1))
-    .trim();
-
-// Returns ReactFlow style props using Chakra UI CSS variables
-export const getReactFlowThemeStyle = (colorMode: "dark" | "light"): CSSProperties =>
-  ({
-    // Background
-    "--xy-background-color":
-      colorMode === "dark" ? "var(--chakra-colors-brand-950)" : "var(--chakra-colors-brand-50)",
-    "--xy-background-pattern-color":
-      colorMode === "dark" ? "var(--chakra-colors-gray-200)" : "var(--chakra-colors-gray-800)",
-
-    // Controls
-    "--xy-controls-button-background-color":
-      colorMode === "dark" ? "var(--chakra-colors-gray-800)" : "var(--chakra-colors-white)",
-    "--xy-controls-button-background-color-hover":
-      colorMode === "dark" ? "var(--chakra-colors-gray-700)" : "var(--chakra-colors-gray-100)",
-
-    // MiniMap
-    "--xy-minimap-background-color": "var(--chakra-colors-bg)",
-  }) as CSSProperties;