Skip to main content
/mantle

color

Color constants, type guards, and TypeScript types for Mantle's color system. Useful for building components that accept a color prop constrained to Mantle's palette.

import {	colors,	namedColors,	functionalColors,	isColor,	isNamedColor,	isFunctionalColor,} from "@ngrok/mantle/color";import type { Color, NamedColor, FunctionalColor } from "@ngrok/mantle/color";

Color categories

Mantle has two categories of colors:

Named colors, the 18 palette colors:

"amber" |	"blue" |	"cyan" |	"emerald" |	"fuchsia" |	"gray" |	"green" |	"indigo" |	"lime" |	"orange" |	"pink" |	"purple" |	"red" |	"rose" |	"sky" |	"teal" |	"violet" |	"yellow";

Functional colors, semantic role-based colors:

"info" | "accent" | "danger" | "neutral" | "success" | "warning";

Constants

namedColors

Read-only array of all named colors.

import { namedColors } from "@ngrok/mantle/color"; namedColors; // readonly ["amber", "blue", "cyan", ...]

functionalColors

Read-only array of all functional colors.

import { functionalColors } from "@ngrok/mantle/color"; functionalColors; // readonly ["info", "accent", "danger", "neutral", "success", "warning"]

colors

Read-only array of all colors (named + functional).

import { colors } from "@ngrok/mantle/color"; colors; // readonly [...namedColors, ...functionalColors]

Type guards

isNamedColor(value)

Returns true if value is a named color string.

import { isNamedColor } from "@ngrok/mantle/color"; isNamedColor("blue"); // trueisNamedColor("danger"); // falseisNamedColor("foo"); // false

isFunctionalColor(value)

Returns true if value is a functional color string.

import { isFunctionalColor } from "@ngrok/mantle/color"; isFunctionalColor("danger"); // trueisFunctionalColor("blue"); // falseisFunctionalColor("foo"); // false

isColor(value)

Returns true if value is any Mantle color (named or functional).

import { isColor } from "@ngrok/mantle/color"; isColor("blue"); // trueisColor("danger"); // trueisColor("foo"); // false

Types

TypeDescription
NamedColorOne of the 18 named palette colors
FunctionalColorOne of the 6 semantic role colors
ColorNamedColor | FunctionalColor

Example: Color prop

import { isColor } from "@ngrok/mantle/color";import type { Color } from "@ngrok/mantle/color"; type BadgeProps = {	color: Color;	children: React.ReactNode;}; function Badge({ color, children }: BadgeProps) {	return <span data-color={color}>{children}</span>;}