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

--background-cursor · default: "move"

Icon displayed when the cursor is over the background element.

--background-color · default: "white"

Color of the background.

--dot-color · default: "gray"

Color of the grid dots

--selection-box-color · default: "lightblue"

Color of the selection box used to grab multiple Nodes

Nodes

--node-border-width · default: "1px"

Width of the default Node border

--node-border-radius · default: "10px"

Border radius of the default Node

--node-cursor · default: "grab"

Icon displayed when the cursor is over a Node component

--node-cursor-blocked · default: "not-allowed"

Icon displayed when the cursor is over a Node component which is blocked

--node-width · default: "200px"

Width of the default Node

--node-height · default: "100px"

Height of the default Node

--node-color · default: "white"

Color of the default Node

--node-text-color · default: "white"

Text color of the default Node

--node-selection-color · default: "white"

Border color of the default Node when selected

--node-border-color · default: "white"

Border color of the default Node when not selected

--node-shadow · default: "multi-layer shadow"

Shadow of the default Node

Anchors

--anchor-border-width · default: "1px"

Width of the default Anchor border

--anchor-radius · default: "50%"

Border radius of the default Anchor

--anchor-width · default: "12px"

Width of the default Anchor

--anchor-height · default: "12px"

Height of the default Anchor

--anchor-color · default: "gray"

Color when the default Anchor is in a neutral state

--anchor-border-color · default: "gray"

Color when the default Anchor is in a neutral state

--anchor-connected · default: "gray"

Color when the default Anchor is connected

--anchor-connected-border · default: "gray"

Border color when the default Anchor is connected

--anchor-hovering · default: "gray"

Color when the default Anchor is hovering

--anchor-hovering-border · default: "gray"

Border color when the default Anchor is hovering

--anchor-connecting · default: "gray"

Color when the default Anchor is connecting

--anchor-connecting-border · default: "gray"

Border color when the default Anchor is connecting

Edges

--edge-width · default: "2px"

Width of the default Edge

--edge-color · default: "black"

Color of the default Edge

--target-edge-color · default: "gray"

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>