make node colors & shapes consistent and visually meaningful

[jackparmer]

Currently there are 5 top-level node categories:

• Data
• I/O
• ETL
• Logic
• Autogenerated ("Autogen")

To make it easier to associate nodes with their functional category, their coloring and shapes should be meaningful, distinctive, and consistent.

I propose the color and shape scheme below

Studio canvas

Docs sidebar

Docs sidebar when fully collapsed

Studio sidebar

Previous studio canvas mocks (for comparison)

[jackparmer]

SVG icons

[jackparmer]

(cc @bbogens who first pointed out the inconsistency ⬆️ )

[trbritt]

BTW the SVGs used for the NumPy and SciPy autogenerated nodes are hardcoded https://github.com/flojoy-io/studio/blob/main/src/feature/flow_chart_panel/svgs/add-multiply-svg.tsx#L130, just FYI

[scorinaldi]

Note: Node styling will have to be updated in the docs renderer also

[jackparmer]

Nodes navigation home page on docs

Dark theme

Light theme