Brand

Accent scope

Paints a subtree in another city’s colour.

stablev0.1.0 Chromium 103 ui-scale safe

Install

Copies the file into components/ds/, with its registry dependencies and npm packages. See Installation for the one-time setup.
bunx shadcn@3 add @fastrp/accent-scope

Examples

Default

Open alone
Los Santos#fab432

248 / 300

Janti#fe004f

96 / 200

Refused#1a1a1a

falls back

API

<AccentScope />

Paints a subtree in another city's colour: a city card on a page that wears a different one, a preview in a city editor. Writes the accent contract — `--primary`, `--primary-foreground`, `--primary-hover` — inline, so every `*-primary`, `text-brand` and `ring` inside follows.

PropTypeDefaultNotes
accent*string | null | undefined—A city's `#rrggbb`. A missing or refused colour leaves the subtree on the page's accent.
asChildboolean—Put the scope on the child element instead of a wrapping `div`.

Dependencies

npm

  • @fastrp/design-tokens
  • @radix-ui/react-slot@^1.1.1

Registry

  • None

Source

components/ds/accent-scope.tsxShow
import { accentStyleVars } from '@fastrp/design-tokens/accent';
import { Slot } from '@radix-ui/react-slot';
import type * as React from 'react';

// @fast-ds [email protected]

export type AccentScopeProps = React.ComponentProps<'div'> & {
  /** A city's `#rrggbb`. A missing or refused colour leaves the subtree on the page's accent. */
  accent: string | null | undefined;
  /** Put the scope on the child element instead of a wrapping `div`. */
  asChild?: boolean;
};

/**
 * Paints a subtree in another city's colour: a city card on a page that wears a different one,
 * a preview in a city editor. Writes the accent contract — `--primary`, `--primary-foreground`,
 * `--primary-hover` — inline, so every `*-primary`, `text-brand` and `ring` inside follows.
 */
function AccentScope({ accent, asChild, style, ...props }: AccentScopeProps) {
  const Comp = asChild ? Slot : 'div';
  const vars = accentStyleVars(accent) as React.CSSProperties | undefined;

  return <Comp data-slot="accent-scope" style={vars ? { ...vars, ...style } : style} {...props} />;
}

export { AccentScope };