> ## Documentation Index
> Fetch the complete documentation index at: https://docs.graphy.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

> [!WARNING]
>
> 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](https://discord.gg/yGmYCjkSr).

## Install

```bash theme={null}
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:

```tsx theme={null}
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:

```tsx theme={null}
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:

```tsx theme={null}
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](https://docs.graphy.dev/sdk-next/graph-types/dumbbell.md), is drawn in the tint's colors and type like a built-in one.

```tsx theme={null}
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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.