CSS Variables Plugin for @gravity-ui/graph

[draedful]

Currently, graph styling is only possible through JavaScript API (setColors(), setConstants()). This creates several issues:

• Debug complexity - cannot quickly change colors in DevTools for testing
• CSS ecosystem gap - impossible to use CSS variables and themes
• Poor developer experience - requires knowledge of JavaScript API for styling experiments
• No live debugging - changes require page reload

Proposed Solution

Create CSSVariablesLayer plugin that creates an empty HTML element with CSS variables that automatically sync with the graph.

Implementation Requirements

Core Functionality

• Create empty HTML div with user-specified CSS class
• Use style-observer npm package to monitor CSS variable changes
• Automatically map CSS variables to TGraphColors and TGraphConstants
• Apply changes via existing graph.setColors() and graph.setConstants() methods

API

const cssLayer = graph.addLayer(CSSVariablesLayer, {
  containerClass: "my-graph-theme",
  onChange?: (changes: CSSVariableChange[]) => void
});

CSS Variables Mapping

.my-graph-theme {
  --graph-block-background: #e0e0e0;
  --graph-block-text: #272727;
  --graph-connection-background: #666666;
  --graph-canvas-background: #ffffff;
  /* ... other variables */
}

Benefits

1. Simplified styling - Use CSS instead of JavaScript API
2. Live debugging - Change variables in DevTools and see immediate results
3. Performance - Empty div container avoids layout/paint recalculation

Use Cases

Theme switching

.light .my-graph-theme {
  --graph-canvas-background: #ffffff;
  --graph-block-background: #f5f5f5;
}

.dark .my-graph-theme {
  --graph-canvas-background: #1e1e1e;
  --graph-block-background: #2d2d2d;
}

Technical Details

• Plugin creates empty HTML div with specified CSS class
• Uses style-observer package for CSS variable change detection
• Maps CSS variables to existing TGraphColors/TGraphConstants interfaces
• Applies changes through current setColors()/setConstants() methods
• No DOM elements inside container div to avoid rendering performance impact

Dependencies

• style-observer npm package for CSS variable monitoring

[mordvinx]

I will do it 🫡