Tint

Tint is a family of 21 clean themes, each painted from one hue. Every tint is the same design: a card that fades from a pale tint of the hue to cream, a title in the hue’s deep shade, a dotted grid, translucent bars square at the axis and rounded at their free end, and groups told apart by lightness steps of the one hue rather than by other colors.

Every tint ships in one package, @graphysdk/theme-tint, still on 0.x. A minor release may change their look, so pin a caret range (^0.1.0) to take only patches. Tell us what works and what doesn’t on Discord.

Install

npm install @graphysdk/theme-tint

Its peer dependencies are @graphysdk/react and React 19. Pass one of the tints to createGraphyKit and import its fonts once:

import { createGraphyKit, GraphRenderer } from '@graphysdk/react';
import { tintSage } from '@graphysdk/theme-tint';
import '@graphysdk/theme-tint/fonts.css';

const kit = createGraphyKit({ theme: tintSage });

Every graph drawn through kit.GraphProvider takes the theme. The spec is written as usual and names no theme:

const spec = kit.pipe(
  kit.createSpec({ x: 'quarter', y: 'revenue', color: 'region' }),
  kit.geom.bar({ position: 'dodge' }),
  kit.scale.x(),
  kit.scale.y()
);

<kit.GraphProvider spec={spec} data={data}>
  <GraphRenderer />
</kit.GraphProvider>;

Without a kit, pass the theme to the provider instead: <GraphProvider theme={tintSage}>. The provider reads the theme once, when it mounts. To switch themes, remount the provider, for example with a React key.

The tints

The family comes in three groups: the core hues, soft pastels whose deepest step stays gentle, and deep jewel and ink tones. Each tint is its own export.

Export	Group	Scheme
`tintCoral`	Core	light
`tintClementine`	Core	light
`tintSunflower`	Core	light
`tintSage`	Core	light
`tintSeafoam`	Core	light
`tintSky`	Core	light
`tintLavender`	Core	light
`tintRose`	Core	light
`tintOnyx`	Core	dark
`tintPeach`	Pastel	light
`tintMint`	Pastel	light
`tintPowder`	Pastel	light
`tintLilac`	Pastel	light
`tintBlush`	Pastel	light
`tintSorbet`	Pastel	light
`tintPetrol`	Deep	light
`tintInkBlue`	Deep	light
`tintForest`	Deep	light
`tintPlum`	Deep	light
`tintMidnight`	Deep	dark
`tintEmerald`	Deep	dark

Sunflower adds its flower’s seed brown and leaf green to its groups, and Sorbet takes six pastel flavors, so their groups differ in hue as well as lightness.

What the theme decides

Part	What every tint sets
Stylesheet	A card fading from the hue’s pale tint to cream inside a double border, a dotted grid on the value axis, a 2px axis line, translucent shapes outlined in the hue’s ink, Inter Tight
Colors	Steps of the hue for groups, a colormap from the hue’s palest step to its deepest, the text against the hue either side of a midpoint, and a green rise and red fall leaning to the hue
Config	The legend above the plot and the value axis on the left
Geoms	Pies, donuts, roses and radial bars repainted with slices meeting at their true angles; every other geom drawn by the engine
Color scheme	Light, or dark for Onyx, Midnight and Emerald, whatever `colorScheme` the provider is given

Changing the look of one graph

A spec’s own styles(), scales and config() sit above the theme. This graph keeps the card and draws its bars fully opaque:

kit.pipe(
  spec,
  kit.styles({ defaults: [kit.style.geom.bar({ fillAlpha: 1 })] })
);

The theme is drawn for a graph about 600 pixels wide. style.graph({ textScale }) scales its type for a larger or smaller one.

With a geom package

Tint repaints the polar bar only. A geom from a package, such as the dumbbell, is drawn in the tint’s colors and type like a built-in one.

import { dumbbell } from '@graphysdk/geom-dumbbell';

const kit = createGraphyKit({ theme: tintSage, plugins: [dumbbell] });

Fonts

fonts.css loads Inter Tight from Google Fonts, in weights 400, 500 and 600. To host the font yourself, leave the import out and load a family named Inter Tight before the first graph is drawn.

Get Started

Core concepts

Chart types

Rendering

Editing

Themes

Annotations & emphasis

Configuration

Advanced

Extending

Install

The tints

What the theme decides

Changing the look of one graph

With a geom package

Fonts

​Install

​The tints

​What the theme decides

​Changing the look of one graph

​With a geom package

​Fonts

Install

The tints

What the theme decides

Changing the look of one graph

With a geom package

Fonts