feat: update color handling for dark mode compatibility

- Updated various components to utilize `getAdaptiveLabelColor` for dynamic label color adjustments based on the current theme.
- Enhanced dark mode styles in `globals.css` for better visual consistency across components.

Made-with: Cursor

frontend/lib/registry/components/text-display/TextDisplayComponent.tsx

@@ -3,6 +3,7 @@
 import React from "react";
 import { ComponentRendererProps } from "../../types";
 import { TextDisplayConfig } from "./types";
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
 import { filterDOMProps } from "@/lib/utils/domPropsFilter";
 
 export interface TextDisplayComponentProps extends ComponentRendererProps {
@@ -60,7 +61,7 @@ export const TextDisplayComponent: React.FC<TextDisplayComponentProps> = ({
   const textStyle: React.CSSProperties = {
     fontSize: componentConfig.fontSize || "14px",
     fontWeight: componentConfig.fontWeight || "normal",
-    color: componentConfig.color || "hsl(var(--foreground))",
+    color: getAdaptiveLabelColor(componentConfig.color),
     textAlign: componentConfig.textAlign || "left",
     backgroundColor: componentConfig.backgroundColor || "transparent",
     padding: componentConfig.padding || "0",
@@ -92,7 +93,7 @@ export const TextDisplayComponent: React.FC<TextDisplayComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#64748b",
+            color: getAdaptiveLabelColor(component.style?.labelColor),
             fontWeight: "500",
           }}
         >