38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
/**
|
|
* The two-accent brand system, expressed as class names.
|
|
*
|
|
* There are exactly two non-semantic hues in this product — warm (Loyaly
|
|
* yellow) and cool (purple) — and their values live in globals.css as
|
|
* `--color-brand-*`. This file is the only place that turns one into markup,
|
|
* so "which utility do I use for a warm icon?" has a single answer and a
|
|
* feature file never writes `text-brand-warm-ink` by hand.
|
|
*
|
|
* Assignment is a property of the DATA, not of the position in a grid. Each
|
|
* activity carries its own accent from the API, so the same activity is the
|
|
* same colour on the dashboard, on the activity page and inside a campaign
|
|
* row — and a grid that gains a row does not repaint itself.
|
|
*
|
|
* `ink` is the readable slot (icons, text); `soft` is a tint for an icon chip
|
|
* only. Nothing here paints a card background: the cards stay white.
|
|
*/
|
|
|
|
export type BrandAccent = 'warm' | 'cool';
|
|
|
|
export const ACCENT: Record<
|
|
BrandAccent,
|
|
{ink: string; soft: string; solid: string; chip: string}
|
|
> = {
|
|
warm: {
|
|
ink: 'text-brand-warm-ink',
|
|
soft: 'bg-brand-warm-soft',
|
|
solid: 'bg-brand-warm',
|
|
chip: 'bg-brand-warm-soft text-brand-warm-ink',
|
|
},
|
|
cool: {
|
|
ink: 'text-brand-cool-ink',
|
|
soft: 'bg-brand-cool-soft',
|
|
solid: 'bg-brand-cool',
|
|
chip: 'bg-brand-cool-soft text-brand-cool-ink',
|
|
},
|
|
};
|