Fix/agentflow Fixing agentflow UI style and make it similar to v2

[j-sanaa]

1. Fixed Node outputs ( FLOWISE-511)
   Before:

After:

2. Fixed node displaying label (FLOWISE-512)

Before:

After:

3. Fixed tool Input Arguments are not populated when selecting tools (FLOWISE-520)
   before:

After:

4. Apply consistent typography across agentflow (FLOWISE-601)
   Before:

Typography.before.fix.mov

After:

Fixing.Typography.mov

5. Fix inconsistent spacing between fields (FLOWISE-602)

6. Fix styling of variable select
   Before:

after:

7. Fix Source dialog window size:
   Before:

After:

8. FIx input fields background color
   Before:

After:

[gemini-code-assist]

Code Review

This pull request refactors the theme system by introducing a centralized token scale for typography and colors, updating multiple components to use these tokens. It also enhances the ArrayInput component to support structured node outputs as variables and ensures parent-level inputs are accessible within array items. Review feedback highlights the need to restore dark mode compatibility for mention chips, avoid hardcoded colors in theme overrides by using tokens, and improve the usability of the ExpandTextDialog by restoring monospace fonts and flexible height for structured data.

[gemini-code-assist]

The .mention styling has been updated with hardcoded hex colors (#b3f0b8 and #0d7115), replacing the previous theme-aware logic. This will likely cause accessibility and contrast issues in dark mode, as these light colors will not adapt to the dark background. It is recommended to restore the conditional logic for dark mode while keeping the new layout properties.

Suggested change

	backgroundColor: '#b3f0b8',
	borderRadius: '0.4rem',
	boxDecorationBreak: 'clone',
	WebkitBoxDecorationBreak: 'clone',
	color: '#0d7115',
	padding: '0.1rem 0.3rem'
	backgroundColor: mode === 'dark' ? 'rgba(76, 175, 80, 0.2)' : '#b3f0b8',
	borderRadius: '0.4rem',
	boxDecorationBreak: 'clone',
	WebkitBoxDecorationBreak: 'clone',
	color: mode === 'dark' ? '#81c784' : '#0d7115',
	padding: '0.1rem 0.3rem'

[j-sanaa]

The same color scheme is used in v2

[jocelynlin-wd]

could you share screenshot of both versions (gemini suggested theme vs v2) and loop in Henry to see if we should fix the contrast & accessibility issue instead?

[j-sanaa]

@HenryHengZJ
Wanted to check with you if you prefet gemini's suggestion for variable syntax highlighting or continue with the existing implementation

Gemini:

Original:

[HenryHengZJ]

Original is better, Gemini's is hard to see in dark mode

[gemini-code-assist]

Setting maxRows={15} to match minRows={15} makes the text area fixed-height, which can significantly hinder the user experience when viewing or editing long content (e.g., large JSON or code blocks) as it forces scrolling within a small viewport. Additionally, the removal of the monospace font styling (fontFamily: 'monospace') makes it harder to read structured data or code, which is the primary use case for the 'Source' input. Consider allowing the field to expand and restoring the monospace font.

                            maxRows={30}
                            value={localValue}
                            disabled={disabled}
                            onChange={(e) => setLocalValue(e.target.value)}
                            placeholder={placeholder}
                            data-testid='source-input'
                            inputProps={{ style: { fontFamily: 'monospace', fontSize: '0.85em' } }}
                        />

[j-sanaa]

v2 also has a fixed size of the dialog and no monospace font is used

[jocelynlin-wd]

lgtm, just need to confirm dark mode behaviour