103 lines
4.3 KiB
TypeScript
103 lines
4.3 KiB
TypeScript
export function ColorSwatches() {
|
|
const primaryColors = [
|
|
{ name: "Off-white", hex: "#F9F9F7", rgb: "249 249 247", token: "--card" },
|
|
{ name: "Off-black", hex: "#161614", rgb: "22 22 20", token: "--foreground", dark: true },
|
|
{ name: "Orange", hex: "#D95E2A", rgb: "217 94 42", token: "--primary", dark: true },
|
|
]
|
|
|
|
const greyScale = [
|
|
{ name: "Grey 1 (5%)", hex: "#F0F0EC", rgb: "240 240 236" },
|
|
{ name: "Grey 2 (10%)", hex: "#DDDDD7", rgb: "221 221 215" },
|
|
{ name: "Grey 3 (20%)", hex: "#C4C4BD", rgb: "196 196 189" },
|
|
{ name: "Grey 4 (50%)", hex: "#A6A69F", rgb: "166 166 159" },
|
|
{ name: "Grey 5 (60%)", hex: "#7F7F79", rgb: "127 127 121", dark: true },
|
|
{ name: "Grey 7 (70%)", hex: "#575753", rgb: "87 87 83", dark: true },
|
|
{ name: "Grey 8 (80%)", hex: "#2F2F2C", rgb: "47 47 44", dark: true },
|
|
]
|
|
|
|
const semanticTokens = [
|
|
{ name: "Background", cssVar: "bg-background", className: "bg-background" },
|
|
{ name: "Foreground", cssVar: "bg-foreground", className: "bg-foreground", dark: true },
|
|
{ name: "Card", cssVar: "bg-card", className: "bg-card" },
|
|
{ name: "Muted", cssVar: "bg-muted", className: "bg-muted" },
|
|
{ name: "Secondary", cssVar: "bg-secondary", className: "bg-secondary" },
|
|
{ name: "Primary", cssVar: "bg-primary", className: "bg-primary", dark: true },
|
|
{ name: "Accent", cssVar: "bg-accent", className: "bg-accent" },
|
|
{ name: "Border", cssVar: "bg-border", className: "bg-border" },
|
|
]
|
|
|
|
return (
|
|
<div className="space-y-10">
|
|
{/* Primary Scheme */}
|
|
<div>
|
|
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
|
Primary Scheme
|
|
</h4>
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
|
{primaryColors.map((color) => (
|
|
<div key={color.name} className="border border-border rounded-md overflow-hidden">
|
|
<div
|
|
className="h-24 flex items-end p-3"
|
|
style={{ backgroundColor: color.hex }}
|
|
>
|
|
<span className={`font-sans text-xs font-medium ${color.dark ? "text-white" : "text-foreground"}`}>
|
|
{color.hex}
|
|
</span>
|
|
</div>
|
|
<div className="p-3 bg-card">
|
|
<p className="font-sans text-sm font-medium">{color.name}</p>
|
|
<p className="font-mono text-xs text-muted-foreground">{color.token}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Grey Scale */}
|
|
<div>
|
|
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
|
Grey Scale
|
|
</h4>
|
|
<div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-7 gap-3">
|
|
{greyScale.map((color) => (
|
|
<div key={color.name} className="border border-border rounded-md overflow-hidden">
|
|
<div
|
|
className="h-16 flex items-end p-2"
|
|
style={{ backgroundColor: color.hex }}
|
|
>
|
|
<span className={`font-mono text-xs ${color.dark ? "text-white" : "text-foreground"}`}>
|
|
{color.hex}
|
|
</span>
|
|
</div>
|
|
<div className="p-2 bg-card">
|
|
<p className="font-sans text-xs font-medium truncate">{color.name}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Semantic Tokens */}
|
|
<div>
|
|
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
|
Semantic Tokens
|
|
</h4>
|
|
<div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-3">
|
|
{semanticTokens.map((token) => (
|
|
<div key={token.name} className="border border-border rounded-md overflow-hidden">
|
|
<div className={`h-16 flex items-end p-2 ${token.className}`}>
|
|
<span className={`font-sans text-xs ${token.dark ? "text-white" : "text-foreground"}`}>
|
|
{token.name}
|
|
</span>
|
|
</div>
|
|
<div className="p-2 bg-card">
|
|
<p className="font-mono text-xs text-muted-foreground truncate">{token.cssVar}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|