Styling
Recommended patterns for styling Graphs, Nodes, Edges and Anchors
Overview
This section is a work in progress, but listed below are the available CSS variables for styling elements. Types are not provided as these are traditional CSS parameters.
These variables can be passed as styling props to individual components or used to create global themes using a selector with the following structure: :root[svelvet-theme="theme-name"]
.
These theme names can be passed to the Svelvet component via the reactive theme
prop and to the Theme Toggle component via the main
and alt
props.
When passing to individual components, these styles are scoped to the component itself. This is not currently true of Edges and our recommendation is to create custom Edge components.
Scroll to the bottom for example code.
You can style parameters beyond those available here by using global selectors.
:global(.svelvet-node)
applies to all Nodes, for instance. Will add all internal class names
with time!
Graph
Icon displayed when the cursor is over the background element.
Color of the background.
Color of the grid dots
Color of the selection box used to grab multiple Nodes
Nodes
Width of the default Node border
Border radius of the default Node
Icon displayed when the cursor is over a Node component
Icon displayed when the cursor is over a Node component which is blocked
Width of the default Node
Height of the default Node
Color of the default Node
Text color of the default Node
Border color of the default Node when selected
Border color of the default Node when not selected
Shadow of the default Node
Anchors
Width of the default Anchor border
Border radius of the default Anchor
Width of the default Anchor
Height of the default Anchor
Color when the default Anchor is in a neutral state
Color when the default Anchor is in a neutral state
Color when the default Anchor is connected
Border color when the default Anchor is connected
Color when the default Anchor is hovering
Border color when the default Anchor is hovering
Color when the default Anchor is connecting
Border color when the default Anchor is connecting
Edges
Width of the default Edge
Color of the default Edge
Color of the default target Edge visible only when hovering and the Edge has been created with an edgeClick function.
<script lang="ts">
import { Svelvet, Node, ThemeToggle } from 'svelvet';
</script>
<Svelvet>
<Node --anchor-color="green" --anchor-width="20px" --anchor-radius="2px" />
<Node --node-color="red" --node-border-radius="40px" />
<Node --node-border-color="black" />
<ThemeToggle slot="toggle" main="light" alt="custom-theme" />
</Svelvet>
<style>
:root[svelvet-theme='custom-theme'] {
--node-color: hsl(225, 30%, 50%);
--node-border-color: hsl(225, 20%, 40%);
--node-selection-color: hsl(45, 90%, 60%);
--text-color: hsl(0, 0%, 100%);
--background-color: hsl(225, 20%, 27%);
--dot-color: hsl(225, 10%, 50%);
--accent-color: hsl(45, 90%, 60%);
--primary-color: hsl(225, 30%, 66%);
--edge-color: hsl(0, 0%, 100%);
--target-edge-color: hsl(225, 20%, 40%);
--anchor-color: hsl(45, 90%, 67%);
--anchor-border-color: hsl(45, 90%, 87%);
--anchor-connected: hsl(45, 90%, 100%);
--anchor-connected-border: hsl(225, 20%, 20%);
--anchor-connecting: hsl(225, 30%, 40%);
--anchor-connecting-border: hsl(0, 0%, 100%);
--anchor-hovering: hsl(225, 20%, 46%);
--anchor-hovering-border: hsl(0, 0%, 0%);
--minimap-background-color: hsl(225, 20%, 27%);
--minimap-node-color: hsl(225, 30%, 20%);
--controls-background-color: hsl(225, 20%, 27%);
--controls-text-color: hsl(0, 0%, 100%);
--theme-toggle-text-color: hsl(0, 0%, 100%);
--theme-toggle-color: hsl(225, 20%, 27%);
}
</style>