Refactor color handling in node components to use theme-based rotating colors

src/main/frontend/app/app.css

@@ -39,20 +39,6 @@
     --color-warning: var(--color-brand);
     --color-success: #247d12;
 
-    /* Node styling */
-    --type-pipe: #68d250;
-    --type-listener: #d250bf;
-    --type-receiver: #d250bf;
-    --type-sender: #30ccaf;
-    --type-validator: #3079cc;
-    --type-wrapper: #4a30cc;
-    --type-job: #fd7200;
-    --type-exit: #e84e4e;
-    --type-errormessageformatter: #ff2424;
-    --type-param: #1389ff;
-    --type-other: #fdc300;
-    --type-sticky-note: #facc15;
-
     --sticky-color-yellow: #fef08a;
     --sticky-color-blue: #bfdbfe;
     --sticky-color-green: #bbf7d0;
@@ -67,18 +53,6 @@
     --group-color-amber: #fcd34d;
     --group-color-cyan: #67e8f9;
 
-    /* Palette Styling */
-    --palette-pipes: #68d250;
-    --palette-listeners: #d250bf;
-    --palette-senders: #30ccaf;
-    --palette-validators: #3079cc;
-    --palette-batch: #fdc300;
-    --palette-scheduling: #fd7200;
-    --palette-errormessageformatters: #ff2424;
-    --palette-other: #fdc300;
-    --palette-parameters: #1389ff;
-    --palette-monitoring: #00ff84;
-    --palette-transactionalstorages: #fdc300;
   }
 
   [data-theme='dark'] {
@@ -96,20 +70,6 @@
     --color-warning: var(--color-brand);
     --color-success: #247d12;
 
-    /* Node styling */
-    --type-pipe: #136502;
-    --type-listener: #853279;
-    --type-receiver: #7e3072;
-    --type-sender: #1c7c6a;
-    --type-validator: #3079cc;
-    --type-wrapper: #4a30cc;
-    --type-job: #9a4602;
-    --type-exit: #882e2e;
-    --type-errormessageformatter: #7b1313;
-    --type-param: #0d4a87;
-    --type-other: #9c7800;
-    --type-sticky-note: #986804;
-
     --sticky-color-yellow: #854d0e;
     --sticky-color-blue: #1e3a8a;
     --sticky-color-green: #14532d;
@@ -124,17 +84,6 @@
     --group-color-amber: #b45309;
     --group-color-cyan: #0e7490;
 
-    --palette-pipes: #136502;
-    --palette-listeners: #853279;
-    --palette-senders: #1c7c6a;
-    --palette-validators: #3079cc;
-    --palette-batch: #9c7800;
-    --palette-scheduling: #9a4602;
-    --palette-errormessageformatters: #7b1313;
-    --palette-other: #9c7800;
-    --palette-parameters: #0d4a87;
-    --palette-monitoring: #01924c;
-    --palette-transactionalstorages: #9c7800;
   }
 }
 

src/main/frontend/app/routes/datamapper/root.tsx

@@ -1,4 +1,6 @@
 import { useEffect, useReducer, useState } from 'react'
+import { useTheme } from '~/hooks/use-theme'
+import { getPaletteColor } from '~/utils/flow-utils'
 import PropertyList from './property-list'
 import { showErrorToast, showSuccessToast } from '~/components/toast'
 import {
@@ -15,6 +17,7 @@ import { SAVING_THROTTLE } from '~/utils/datamapper_utils/constant'
 
 export default function Root() {
   const routes = ['Initialize', 'Properties', 'Mappings']
+  const theme = useTheme()
 
   const project = useProjectStore.getState().project
 
@@ -87,7 +90,12 @@ export default function Root() {
       <div className="bg-backdrop inset-0 z-50 h-screen items-center justify-center">
         <div className="bg-background text-foreground rounded-lg shadow-lg">
           {/* Header */}
-          <div className="border-b-border box-border h-10 w-full rounded-t-md border-b bg-[radial-gradient(ellipse_farthest-corner_at_20%_20%,var(--type-pipe)_0%,var(--color-background)_100%)] p-2 text-lg font-semibold">
+          <div
+            className="border-b-border box-border h-10 w-full rounded-t-md border-b p-2 text-lg font-semibold"
+            style={{
+              background: `radial-gradient(ellipse farthest-corner at 20% 20%, ${getPaletteColor('Pipes', theme)} 0%, var(--color-background) 100%)`,
+            }}
+          >
             Mapping (mappingName)
           </div>
 

src/main/frontend/app/routes/studio/canvas/nodetypes/child-node.tsx

@@ -5,6 +5,8 @@
 import { useNodeContextMenu } from '../node-context-menu-context'
 import { canAcceptChildStatic, type FrankElement } from './node-utilities'
 import { useFFDoc } from '@frankframework/doc-library-react'
+import { useTheme } from '~/hooks/use-theme'
+import { getCategoryColor } from '~/utils/flow-utils'
 
 export interface ChildNode {
   id: string
@@ -39,6 +41,7 @@
   const [canDropDraggedElement, setCanDropDraggedElement] = useState(false)
   const [dragForbidden, setDragForbidden] = useState(false)
   const { elements, filters, ffDoc } = useFFDoc()
+  const theme = useTheme()
 
   const frankElement = useMemo(() => {
     if (!elements) return null
@@ -125,7 +128,7 @@
       // Add child recursively
       addChildToChild(rootId, child.id, newChild)
     },
     [
       setDraggedName,
       canAcceptChild,
       showNodeContextMenu,
@@ -174,10 +177,10 @@
           background: gradientEnabled
             ? `radial-gradient(
               ellipse farthest-corner at 20% 20%,
-              var(--type-${child.type?.toLowerCase()}) 0%,
+              ${getCategoryColor(child.subtype, filters, theme)} 0%,
               var(--color-background) 100%
             )`
-            : `var(--type-${child.type?.toLowerCase()})`,
+            : getCategoryColor(child.subtype, filters, theme),
         }}
       >
         <h1 className="font-bold">{child.subtype}</h1>

src/main/frontend/app/routes/studio/canvas/nodetypes/exit-node.tsx

@@ -2,6 +2,7 @@ import { Handle, type Node, type NodeProps, NodeResizeControl, Position } from '
 import { ResizeIcon } from '~/routes/studio/canvas/nodetypes/frank-node'
 import { FlowConfig } from '~/routes/studio/canvas/flow.config'
 import { useSettingsStore } from '~/stores/settings-store'
+import { useTheme } from '~/hooks/use-theme'
 
 export type ExitNode = Node<{
   subtype: string
@@ -14,6 +15,8 @@ export default function ExitNodeComponent(properties: NodeProps<ExitNode>) {
   const minNodeWidth = FlowConfig.EXIT_DEFAULT_WIDTH
   const minNodeHeight = FlowConfig.EXIT_DEFAULT_HEIGHT
   const gradientEnabled = useSettingsStore((state) => state.studio.gradient)
+  const theme = useTheme()
+  const exitColor = `hsl(0 90% ${theme === 'dark' ? 62 : 45}%)`
 
   return (
     <>
@@ -44,10 +47,10 @@ export default function ExitNodeComponent(properties: NodeProps<ExitNode>) {
             background: gradientEnabled
               ? `radial-gradient(
                 ellipse farthest-corner at 20% 20%,
-                var(--type-exit) 0%,
+                ${exitColor} 0%,
                 var(--color-background) 100%
               )`
-              : `var(--type-exit)`,
+              : exitColor,
           }}
         >
           <h1 className="font-bold">{properties.data.subtype}</h1>

src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx

@@ -26,6 +26,8 @@
 import { showWarningToast } from '~/components/toast'
 import { useHandleTypes } from '~/hooks/use-handle-types'
 import AddSubcomponentModal from '~/components/flow/add-subcomponent-modal'
+import { useTheme } from '~/hooks/use-theme'
+import { getCategoryColor } from '~/utils/flow-utils'
 import { fetchFrankConfigXsd } from '~/services/xsd-service'
 import {
   type Requirement,
@@ -51,14 +53,14 @@
 export default function FrankNode(properties: NodeProps<FrankNodeType>) {
   const minNodeWidth = FlowConfig.NODE_DEFAULT_WIDTH
   const minNodeHeight = FlowConfig.NODE_MIN_HEIGHT
-  const type = properties.data.type.toLowerCase()
-  const colorVariable = `--type-${type}`
   const handleSpacing = 20
+  const theme = useTheme()
+  const { elements, filters, ffDoc } = useFFDoc()
+  const nodeColor = getCategoryColor(properties.data.subtype, filters, theme)
   const containerReference = useRef<HTMLDivElement>(null)
   const [dragOver, setDragOver] = useState(false)
   const [canDropDraggedElement, setCanDropDraggedElement] = useState(false)
   const showNodeContextMenu = useNodeContextMenu()
-  const { elements, filters, ffDoc } = useFFDoc()
   const {
     setNodeId,
     setIsNewNode,
@@ -322,7 +324,7 @@
 
       addChild(properties.id, child)
     },
     [
       properties.id,
       addChild,
       setIsNewNode,
@@ -385,17 +387,17 @@
           style={{
             minWidth: `${minNodeWidth}px`,
             minHeight: `${minNodeHeight}px`,
-            ...(properties.selected && { borderColor: `var(${colorVariable})` }),
+            ...(properties.selected && { borderColor: `${nodeColor}` }),
           }}
         >
           <div
             className="flex h-32 w-32 shrink-0 items-center justify-center rounded-3xl shadow-md"
             style={{
-              backgroundColor: `color-mix(in srgb, var(${colorVariable}) 25%, transparent)`,
-              border: `3px solid var(${colorVariable})`,
+              backgroundColor: `color-mix(in srgb, ${nodeColor} 25%, transparent)`,
+              border: `3px solid ${nodeColor}`,
             }}
           >
-            <span className="text-4xl font-black tracking-tight" style={{ color: `var(${colorVariable})` }}>
+            <span className="text-4xl font-black tracking-tight" style={{ color: `${nodeColor}` }}>
               {abbr}
             </span>
           </div>
@@ -457,7 +459,7 @@
         className={`bg-background border-border relative flex w-full flex-col items-center overflow-x-visible rounded-md border ${isManuallyResized ? 'h-full overflow-y-hidden' : 'overflow-y-visible'}`}
         style={{
           minWidth: `${minNodeWidth}px`,
-          ...(properties.selected && { borderColor: `var(${colorVariable})` }),
+          ...(properties.selected && { borderColor: `${nodeColor}` }),
         }}
         ref={containerReference}
         onDragOver={handleDragOver}
@@ -470,10 +472,10 @@
             background: gradientEnabled
               ? `radial-gradient(
                 ellipse farthest-corner at 20% 20%,
-                var(${colorVariable}) 0%,
+                ${nodeColor} 0%,
                 var(--color-background) 100%
               )`
-              : `var(${colorVariable})`,
+              : `${nodeColor}`,
           }}
         >
           <h1 className="font-bold">{properties.data.subtype}</h1>

src/main/frontend/app/routes/studio/context/sorted-elements.tsx

@@ -4,7 +4,8 @@ import ArrowRightIcon from 'icons/solar/Alt Arrow Right.svg?react'
 import { useSettingsStore } from '~/stores/settings-store'
 import useNodeContextStore from '~/stores/node-context-store'
 import type { ElementDetails } from '@frankframework/doc-library-core'
-import { getElementTypeFromName } from '../node-translator-module'
+import { useTheme } from '~/hooks/use-theme'
+import { getPaletteColor } from '~/utils/flow-utils'
 import DangerIcon from '../../../../icons/solar/Danger Triangle.svg?react'
 import { DeprecatedListPopover, type DeprecatedInfo } from './deprecated-list-popover'
 import ElementHoverCard from './element-hover-card'
@@ -22,6 +23,8 @@ const CLOSE_DELAY = 200
 
 export default function SortedElements({ type, items, onDragStart, searchTerm }: Readonly<Properties>) {
   const paletteExpandedByDefault = useSettingsStore((state) => state.studio.paletteExpandedByDefault)
+  const theme = useTheme()
+  const categoryColor = getPaletteColor(type, theme)
   const [isExpanded, setIsExpanded] = useState(paletteExpandedByDefault)
   const { draggedName, setDraggedName, dropSuccessful, setDropSuccessful } = useNodeContextStore((state) => state)
   const [hoveredRect, setHoveredRect] = useState<DOMRect | null>(null)
@@ -76,7 +79,7 @@ export default function SortedElements({ type, items, onDragStart, searchTerm }:
       <Button
         onClick={toggleExpansion}
         className="text-foreground-muted hover:text-foreground-active hover:bg-hover flex w-full cursor-pointer items-center gap-2 rounded-sm border-0 bg-transparent px-3 py-3 text-left text-sm font-semibold capitalize transition-colors"
-        style={{ borderLeft: `3px solid var(--palette-${type.toLowerCase()})` }}
+        style={{ borderLeft: `3px solid ${categoryColor}` }}
       >
         {shouldExpand ? (
           <ArrowDownIcon className="h-4 w-4 shrink-0 fill-current" />
@@ -90,13 +93,11 @@ export default function SortedElements({ type, items, onDragStart, searchTerm }:
       {shouldExpand && (
         <div className="mt-1 space-y-0.5 pl-3">
           {items.map((value) => {
-            const elementType = getElementTypeFromName(value.name)
-
             return (
               <li
                 key={value.name}
                 className="text-foreground hover:bg-hover group mb-1 flex cursor-move items-center justify-between rounded-sm py-3 pr-3 pl-3 text-sm transition-colors"
-                style={{ borderLeft: `3px solid var(--type-${elementType})` }}
+                style={{ borderLeft: `3px solid ${categoryColor}` }}
                 draggable
                 onDragStart={(event) => {
                   cancelClose()

src/main/frontend/app/utils/flow-utils.ts

@@ -1,4 +1,5 @@
 import type { FlowNode } from '~/routes/studio/canvas/flow'
+import type { Filters } from '@frankframework/doc-library-core'
 
 const REFERENCE_KEYS = new Set(['source', 'target', 'parentId'])
 
@@ -127,22 +128,50 @@ function capitalize(value: string): string {
   return value.charAt(0).toUpperCase() + value.slice(1)
 }
 
-export function frankdocChipStyle(name: string): { borderColor: string; backgroundColor: string } {
-  let sum = 0
-  for (const char of name) sum += char.codePointAt(0) ?? 0
-  const h = sum % 360
-  const s = 0.9
-  const l = 0.78
-  const a = s * Math.min(l, 1 - l)
-  const f = (n: number) => {
-    const k = (n + h / 30) % 12
-    return l - a * Math.max(-1, Math.min(k - 3, Math.min(9 - k, 1)))
+function hashToCuratedHue(name: string): number {
+  let hash = 5381
+  for (let i = 0; i < name.length; i++) {
+    hash = (hash * 33) ^ (name.codePointAt(i) ?? 0)
   }
-  const r = Math.round(f(0) * 255)
-  const g = Math.round(f(8) * 255)
-  const b = Math.round(f(4) * 255)
+
+  const CURATED_HUES = [10, 215, 140, 45, 290, 180, 30, 330]
+
+  const index = Math.abs(hash) % CURATED_HUES.length
+  return CURATED_HUES[index]
+}
+
+export function getPaletteColor(key: string, theme: 'light' | 'dark'): string {
+  const hue = hashToCuratedHue(key)
+
+  const saturation = theme === 'dark' ? 35 : 70
+  const lightness = theme === 'dark' ? 35 : 55
+
+  return `hsl(${hue} ${saturation}% ${lightness}%)`
+}
+
+export function getCategoryColor(subtype: string, filters: Filters | null, theme: 'light' | 'dark'): string {
+  if (filters?.Components) {
+    const matchedCategory = Object.entries(filters.Components).find(([, names]) => names.includes(subtype))
+
+    if (matchedCategory) {
+      return getPaletteColor(matchedCategory[0], theme)
+    }
+  }
+
+  return getPaletteColor(subtype, theme)
+}
+
+export function frankdocChipStyle(
+  name: string,
+  theme: 'light' | 'dark' = 'light',
+): { borderColor: string; backgroundColor: string } {
+  const hue = hashToCuratedHue(name)
+
+  const saturation = theme === 'dark' ? 80 : 85
+  const lightness = theme === 'dark' ? 45 : 40
+
   return {
-    borderColor: `rgb(${r} ${g} ${b})`,
-    backgroundColor: `rgb(${r} ${g} ${b} / 0.2)`,
+    borderColor: `hsl(${hue} ${saturation}% ${lightness}%)`,
+    backgroundColor: `hsl(${hue} ${saturation}% ${lightness}% / 0.2)`,
   }
 }