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,8 +17,10 @@ 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
+  const pipesColor = getPaletteColor('Pipes', theme)
 
   const [mappingListConfig, dispatchMappingListConfig] = useReducer(
     mappingListConfigReducer,
@@ -87,7 +91,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%, ${pipesColor} 0%, var(--color-background) 100%)`,
+            }}
+          >
             Mapping (mappingName)
           </div>
 

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

@@ -6,6 +6,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
@@ -53,6 +55,8 @@
   const [canDropDraggedElement, setCanDropDraggedElement] = useState(false)
   const [dragForbidden, setDragForbidden] = useState(false)
   const { elements, filters, ffDoc } = useFFDoc()
+  const theme = useTheme()
+  const categoryColor = getCategoryColor(child.subtype, filters, theme)
 
   const frankElement = useMemo(() => {
     if (!elements) return null
@@ -136,7 +140,7 @@
       // Add child recursively
       addChildToChild(rootId, child.id, newChild)
     },
     [
       setDraggedName,
       canAcceptChild,
       showNodeContextMenu,
@@ -186,10 +190,10 @@
           background: gradientEnabled
             ? `radial-gradient(
               ellipse farthest-corner at 20% 20%,
-              var(--type-${child.type?.toLowerCase()}) 0%,
+              ${categoryColor} 0%,
               var(--color-background) 100%
             )`
-            : `var(--type-${child.type?.toLowerCase()})`,
+            : categoryColor,
         }}
       >
         <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

@@ -27,6 +27,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,
@@ -52,14 +54,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,
@@ -342,7 +344,7 @@
 
       addChild(properties.id, child)
     },
     [
       properties.id,
       addChild,
       setIsNewNode,
@@ -405,17 +407,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>
@@ -477,7 +479,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}
@@ -490,10 +492,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="text-foreground 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)
@@ -77,7 +80,7 @@ export default function SortedElements({ type, items, onDragStart, searchTerm }:
       <Button
         onClick={toggleExpansion}
         className="text-foreground-muted hover:text-foreground 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"
-        style={{ borderLeft: `3px solid var(--palette-${type.toLowerCase()})` }}
+        style={{ borderLeft: `3px solid ${categoryColor}` }}
       >
         {shouldExpand ? (
           <ArrowDownIcon className="h-4 w-4 shrink-0 fill-current" />
@@ -91,13 +94,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 dark:text-foreground-muted hover: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"
-                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,46 @@ 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 stringToHue(name: string): number {
+  let hash = 0
+  for (let index = 0; index < name.length; index++) {
+    hash += name.codePointAt(index) ?? 0
   }
-  const r = Math.round(f(0) * 255)
-  const g = Math.round(f(8) * 255)
-  const b = Math.round(f(4) * 255)
+  return hash % 360
+}
+
+export function getPaletteColor(key: string, theme: 'light' | 'dark'): string {
+  const hue = stringToHue(key)
+
+  const saturation = 100
+  const lightness = theme === 'dark' ? 60 : 45
+
+  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 = stringToHue(name)
+
+  const saturation = 100
+  const lightness = theme === 'dark' ? 60 : 45
+
   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)`,
   }
 }