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";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";namedColorsRead-only array of all named colors.
import { namedColors } from "@ngrok/mantle/color";
namedColors; // readonly ["amber", "blue", "cyan", ...]functionalColorsRead-only array of all functional colors.
import { functionalColors } from "@ngrok/mantle/color";
functionalColors; // readonly ["info", "accent", "danger", "neutral", "success", "warning"]colorsRead-only array of all colors (named + functional).
import { colors } from "@ngrok/mantle/color";
colors; // readonly [...namedColors, ...functionalColors]isNamedColor(value)Returns true if value is a named color string.
import { isNamedColor } from "@ngrok/mantle/color";
isNamedColor("blue"); // true
isNamedColor("danger"); // false
isNamedColor("foo"); // falseisFunctionalColor(value)Returns true if value is a functional color string.
import { isFunctionalColor } from "@ngrok/mantle/color";
isFunctionalColor("danger"); // true
isFunctionalColor("blue"); // false
isFunctionalColor("foo"); // falseisColor(value)Returns true if value is any Mantle color (named or functional).
import { isColor } from "@ngrok/mantle/color";
isColor("blue"); // true
isColor("danger"); // true
isColor("foo"); // falseimport { 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>;
}