Custom palette and chrome colours

import { type CSSProperties, useMemo, useState } from "react";

import {
  CUSTOM_PALETTE,
  randomAccent,
  resolvePalette,
  type SceneInstance,
  SceneThumb,
  type WrappedConfig,
} from "@react-wrapped/core";

const COLUMNS: CSSProperties = { display: "flex", flexWrap: "wrap", gap: 24, alignItems: "flex-start" };
const SWATCHES: CSSProperties = { display: "flex", flexWrap: "wrap", gap: 6, marginTop: 14 };
const SWATCH: CSSProperties = {
  width: 34,
  height: 34,
  borderRadius: 9,
  boxShadow: "inset 0 0 0 1px rgb(0 0 0 / 0.12)",
};

export function OwnColour({ scene, config }: { scene: SceneInstance; config: WrappedConfig }) {
  const [accent, setAccent] = useState("#ff5c8a");
  // One colour in, a whole palette out. Dark or light still comes from the config's `mode`.
  const own = useMemo((): WrappedConfig => ({ ...config, palette: CUSTOM_PALETTE, accent }), [config, accent]);
  const palette = resolvePalette(own);
  return (
    <div style={COLUMNS}>
      <SceneThumb scene={scene} config={own} width={280} loop />
      <div>
        <div role="group" aria-label="Accent colour">
          <input
            type="color"
            aria-label="Accent colour"
            value={accent}
            onChange={(event) => setAccent(event.target.value)}
          />
          <button type="button" onClick={() => setAccent(randomAccent())}>
            Surprise me
          </button>
        </div>
        {/* The five levels the accent was stretched into, then the four rarity colours cut from it. */}
        <div style={SWATCHES}>
          {[...palette.levels, ...Object.values(palette.rarity)].map((colour, index) => (
            // oxlint-disable-next-line react/no-array-index-key -- nine fixed swatches, and two may share a colour
            <i key={index} title={colour} style={{ ...SWATCH, background: colour }} />
          ))}
        </div>
        <output>{`palette: "custom", accent: "${accent}"`}</output>
      </div>
    </div>
  );
}

import { DEFAULT_WRAPPED_CONFIG, paletteStyle, resolvePalette } from "@react-wrapped/core";

const palette = resolvePalette({ ...DEFAULT_WRAPPED_CONFIG, palette: "custom", accent: "#ff5c8a" });

// The same colours as CSS variables, for an element of your own that should match the frame.
export const frameColours = paletteStyle(palette);

:root {
  --wr-ui-primary: oklch(0.62 0.2 285);
  --wr-ui-card: oklch(0.97 0.02 285);
  --wr-ui-border: oklch(0.86 0.05 285);
  --wr-ui-radius: 6px;
  --wr-font: "Your Font", sans-serif;
}

/* Your rule on :root also beats the library's dark values, so say what dark should be. */
.dark {
  --wr-ui-primary: oklch(0.74 0.16 285);
  --wr-ui-card: oklch(0.25 0.03 285);
  --wr-ui-border: oklch(0.34 0.05 285);
}

import { type CSSProperties, useState } from "react";

import type { SceneInstance, WrappedConfig, WrappedSubject } from "@react-wrapped/core";
import { WrappedConfigurator, WrappedPlayer } from "@react-wrapped/player";

// Set on any ancestor of the library's parts. Each one falls back to the library's own value when left out.
const BRAND = {
  "--wr-ui-bg": "oklch(0.985 0.012 285)",
  "--wr-ui-primary": "oklch(0.62 0.2 285)",
  "--wr-ui-card": "oklch(0.97 0.02 285)",
  "--wr-ui-muted": "oklch(0.93 0.03 285)",
  "--wr-ui-border": "oklch(0.86 0.05 285)",
  "--wr-ui-fg": "oklch(0.25 0.08 285)",
  "--wr-ui-muted-fg": "oklch(0.48 0.08 285)",
  "--wr-font": "Georgia, serif",
} as CSSProperties;

// Your page around the parts can read the same tokens, so the two always match.
const COLUMNS: CSSProperties = {
  display: "flex",
  flexWrap: "wrap",
  gap: 24,
  alignItems: "flex-start",
  marginTop: 14,
  padding: 16,
  borderRadius: 18,
  background: "var(--wr-ui-bg)",
  color: "var(--wr-ui-fg)",
};
const ROOM: CSSProperties = { display: "grid", height: 520, flex: "1 1 260px", minWidth: 0 };
const PANEL: CSSProperties = { flex: "1 1 300px", minWidth: 0 };

export function OwnChrome({
  subject,
  seed,
  scenes,
  config,
  onConfigChange,
}: {
  subject: WrappedSubject;
  seed: string;
  scenes: readonly SceneInstance[];
  config: WrappedConfig;
  onConfigChange: (next: WrappedConfig) => void;
}) {
  const [branded, setBranded] = useState(true);
  return (
    <div>
      <label>
        <input type="checkbox" checked={branded} onChange={(event) => setBranded(event.target.checked)} />
        Use our tokens
      </label>
      {/* The video keeps its own palette: the tokens only reach the chrome around it. */}
      <div style={branded ? { ...COLUMNS, ...BRAND } : COLUMNS}>
        <div style={ROOM}>
          <WrappedPlayer subject={subject} seed={seed} scenes={scenes} config={config} />
        </div>
        <div style={PANEL}>
          <WrappedConfigurator config={config} onChange={onConfigChange} />
        </div>
      </div>
    </div>
  );
}