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.
1import {2 colors,3 namedColors,4 functionalColors,5 isColor,6 isNamedColor,7 isFunctionalColor,8} from "@ngrok/mantle/color";9import type { Color, NamedColor, FunctionalColor } from "@ngrok/mantle/color";Mantle has two categories of colors:
Named colors — the 18 palette colors:
1"amber" |2 "blue" |3 "cyan" |4 "emerald" |5 "fuchsia" |6 "gray" |7 "green" |8 "indigo" |9 "lime" |10 "orange" |11 "pink" |12 "purple" |13 "red" |14 "rose" |15 "sky" |16 "teal" |17 "violet" |18 "yellow";Functional colors — semantic role-based colors:
1"info" | "accent" | "danger" | "neutral" | "success" | "warning";namedColorsRead-only array of all named colors.
1import { namedColors } from "@ngrok/mantle/color";2 3namedColors; // readonly ["amber", "blue", "cyan", ...]functionalColorsRead-only array of all functional colors.
1import { functionalColors } from "@ngrok/mantle/color";2 3functionalColors; // readonly ["info", "accent", "danger", "neutral", "success", "warning"]colorsRead-only array of all colors (named + functional).
1import { colors } from "@ngrok/mantle/color";2 3colors; // readonly [...namedColors, ...functionalColors]isNamedColor(value)Returns true if value is a named color string.
1import { isNamedColor } from "@ngrok/mantle/color";2 3isNamedColor("blue"); // true4isNamedColor("danger"); // false5isNamedColor("foo"); // falseisFunctionalColor(value)Returns true if value is a functional color string.
1import { isFunctionalColor } from "@ngrok/mantle/color";2 3isFunctionalColor("danger"); // true4isFunctionalColor("blue"); // false5isFunctionalColor("foo"); // falseisColor(value)Returns true if value is any Mantle color (named or functional).
1import { isColor } from "@ngrok/mantle/color";2 3isColor("blue"); // true4isColor("danger"); // true5isColor("foo"); // false1import { isColor } from "@ngrok/mantle/color";2import type { Color } from "@ngrok/mantle/color";3 4type BadgeProps = {5 color: Color;6 children: React.ReactNode;7};8 9function Badge({ color, children }: BadgeProps) {10 return <span data-color={color}>{children}</span>;11}