lanre-ds 0.1.0 → 0.2.0

package/components/map/PortraitMedallion.jsx

@@ -1,51 +1,29 @@
 'use client';
-import React, { useState } from 'react';
+import React from 'react';
 import { Avatar } from '../identity/Avatar';
 
+/* A completed level on the map: the friend on a gold pedestal, with the level number on a plate underneath. Give it
+   onClick and it becomes a button that replays the level, with a press, a hover and a keyboard focus ring. The pedestal's
+   shadow and the number plate are the same at every size. */
 export function PortraitMedallion({ name = '', seed, src, number, size = 84, pop = false, onClick, label, style, ...rest }) {
-  const [down, setDown] = useState(false);
-  const [hover, setHover] = useState(false);
   const interactive = typeof onClick === 'function';
-  const pressed = interactive && down;
-  const depth = Math.max(4, Math.round(size / 12)), travel = depth - 2;
-  const plate = { h: Math.round(size * 0.36), min: Math.round(size * 0.43), fs: Math.round(size * 0.2) };
   const who = name || 'a friend';
   const accessibleName = label || (interactive
     ? (number != null ? 'Replay level ' + number + ', ' + who : 'Replay surprise from ' + who)
     : (number != null ? 'Level ' + number + ', ' + who : name || 'A friend'));
-  const body = (
-    <>
-      <span aria-hidden="true" style={{
-        display: 'grid', placeItems: 'center', width: size, height: size, borderRadius: '50%',
-        background: 'radial-gradient(circle at 50% 30%, var(--gold-300), var(--gold-500) 60%, var(--gold-700))',
-        boxShadow: '0 ' + (pressed ? 2 : depth) + 'px 0 var(--gold-900), 0 ' + (pressed ? 6 : depth * 2) + 'px ' + (pressed ? 10 : 18) + 'px oklch(0.2 0.05 60 / 0.35), inset 0 3px 0 oklch(1 0 0 / 0.6)',
-        transform: pressed ? 'translateY(' + travel + 'px)' : 'none',
-        filter: hover && !pressed ? 'brightness(1.06)' : 'none',
-        transition: 'transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), filter var(--dur-fast)',
-      }}>
+  const medallion = (
+    <span className={'mp-medallion' + (pop ? ' mp-medallion-pop' : '')} style={{ '--m': size + 'px', ...(interactive ? null : style) }}
+      {...(interactive ? null : { role: 'img', 'aria-label': accessibleName, ...rest })}>
+      <span className="mp-medallion-ring">
         <Avatar name={name} seed={seed} src={src} size={Math.round(size * 0.8)} alt="" />
       </span>
-      {number != null && (
-        <span aria-hidden="true" style={{
-          position: 'relative', zIndex: 1, marginTop: -Math.round(size * 0.17), minWidth: plate.min, height: plate.h, padding: '0 ' + Math.round(plate.h / 3) + 'px', boxSizing: 'border-box',
-          borderRadius: 'var(--radius-pill)', background: 'linear-gradient(180deg, #fff, var(--cream-100))', boxShadow: '0 3px 0 var(--cream-300), 0 6px 10px oklch(0 0 0 / 0.2)',
-          fontFamily: 'var(--font-display)', fontSize: plate.fs, lineHeight: plate.h + 'px', color: 'var(--ink-900)', textAlign: 'center',
-          transform: pressed ? 'translateY(' + (travel - 1) + 'px)' : 'none', transition: 'transform var(--dur-fast) var(--ease-out)',
-        }}>{number}</span>
-      )}
-    </>
+      {number != null && <span className="mp-medallion-number">{number}</span>}
+    </span>
   );
-  const frame = {
-    position: 'relative', display: 'inline-grid', justifyItems: 'center', width: size,
-    animation: pop ? 'mp-medallion-pop 900ms var(--ease-out) both' : undefined,
-  };
-  if (!interactive) return <span role="img" aria-label={accessibleName} style={{ ...frame, ...style }} {...rest}>{body}</span>;
+  if (!interactive) return medallion;
   return (
-    <button type="button" aria-label={accessibleName} onClick={onClick}
-      onPointerDown={() => setDown(true)} onPointerUp={() => setDown(false)} onPointerCancel={() => setDown(false)}
-      onPointerEnter={() => setHover(true)} onPointerLeave={() => { setDown(false); setHover(false); }}
-      style={{ appearance: 'none', background: 'none', border: 0, margin: 0, padding: 0, cursor: 'pointer', borderRadius: 'var(--radius-pill)', WebkitTapHighlightColor: 'transparent', ...frame, ...style }} {...rest}>
-      {body}
+    <button type="button" className="mp-medallion-button" aria-label={accessibleName} onClick={onClick} style={style} {...rest}>
+      {medallion}
     </button>
   );
 }

package/components/map/PortraitMedallion.prompt.md

@@ -11,3 +11,4 @@ Portrait medallion: what a completed level becomes on the map. The revealed frie
 - Keep the replay label readable: it defaults to "Replay level 4, Ada Okafor". Pass `label` to change the wording, never to remove the name.
 - `pop` plays the arrival once. Set it only for the level that was just finished.
 - Same size as the `LevelNode` it replaces (84 by default), so the road doesn't shift.
+- The pedestal's shadow and the number plate are the same at every size, so a small medallion for a discovery has the same bevel as a big one. It is a real button when it has `onClick`, with a hover, a press and a keyboard focus ring.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lanre-ds",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Lanre: a design system for a casual exploration game. React components and CSS tokens.",
   "license": "MIT",
   "keywords": [

package/readme.md

@@ -119,7 +119,7 @@ Source: the shared build brief (12 Sep 2026). The generic Lanre kit above is the
 - `tokens/viewer.css`: the styles behind the viewer (`.mp-viewer`, `.mp-cabinet`, `.mp-keys`, `.mp-knob`, `.mp-tray`). It sets sizes for phones, iPad and desktop.
 - **Package:** `package.json` makes the repo an installable package, `lanre-ds`: `import 'lanre-ds/styles.css'`, then `import { Button } from 'lanre-ds/components/buttons/Button'`. See the docs page *Install it in an app*. It is published on npm and licensed MIT.
 - `tokens/fx.css`: the styles behind the effects and the boot screen (`.mp-confetti`, `.mp-sparkle-spot`, `.mp-sunburst-motion`, `.mp-loading`).
-- `tokens/ui.css`: the styles behind the small pieces (`.mp-heading`, `.mp-sticker`, `.mp-notice`, `.mp-error-text`, `.mp-save-pill`, `.mp-save-alert`, `.mp-avatar-button`, `.mp-seg`, `.mp-recorder`).
+- `tokens/ui.css`: the styles behind the small pieces (`.mp-heading`, `.mp-sticker`, `.mp-notice`, `.mp-error-text`, `.mp-save-pill`, `.mp-save-alert`, `.mp-avatar-button`, `.mp-seg`, `.mp-recorder`, `.mp-medallion`).
 - `tokens/signs.css`: the styles behind the world signs (`.mp-gate`, `.mp-sign`, `.mp-world-pill`, `.mp-world-option`).
 - `tokens/media.css`: the styles behind the media components (`.mp-words`, `.mp-album`, `.mp-cassette`, `.mp-film`, `.mp-shimmer`). They use container queries, so each piece fits the box it sits in.
 - `tokens/worlds.css`, `tokens/gems.css`: world scopes and gem tones; iPad/phone layout tokens in `spacing.css`; memory/letter sizes in `typography.css`; focus ring + reduced motion in `utilities.css`; the night palette (`--night-*`, the summit letter and credits) and step-marker tokens (`--step-*`) in `colors.css`, with the `.mp-step` recipe in `utilities.css`.

package/tokens/ui.css

@@ -1,6 +1,6 @@
 /* Small interface pieces: a heading with its plate, a sticker, a notice and error text, the autosave pill and alert, an avatar
-   button with a pencil, segmented tabs, and the voice recorder card. Used by Heading, Sticker, Notice, ErrorText, SavePill,
-   SaveAlert, AvatarButton, SegmentedTabs and RecorderPanel. */
+   button with a pencil, segmented tabs, the voice recorder card and the portrait medallion. Used by Heading, Sticker, Notice,
+   ErrorText, SavePill, SaveAlert, AvatarButton, SegmentedTabs, RecorderPanel and PortraitMedallion. */
 
 /* The friend's avatar in the HUD, with a small pencil to say it can be changed. */
 .mp-avatar-button {
@@ -352,3 +352,81 @@
   background: var(--coral-500);
   animation: mp-sparkle 1.2s infinite;
 }
+
+/* ---------- Portrait medallion ---------- */
+
+/* The tappable wrapper: it takes the press, the hover and the keyboard focus for the medallion inside it. */
+.mp-medallion-button {
+  appearance: none;
+  background: none;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* Every tap answers back: the medallion presses down like a bevelled button. */
+.mp-medallion-button:hover .mp-medallion-ring {
+  filter: brightness(1.06);
+}
+
+.mp-medallion-button:active .mp-medallion-ring {
+  transform: translateY(5px);
+  box-shadow: 0 2px 0 var(--gold-900), 0 6px 10px oklch(0.2 0.05 60 / 0.3), inset 0 3px 0 oklch(1 0 0 / 0.6);
+}
+
+.mp-medallion-button:active .mp-medallion-number {
+  transform: translateY(4px);
+}
+
+.mp-medallion-button:focus-visible {
+  outline: 4px solid #fff;
+  outline-offset: 4px;
+  border-radius: 999px;
+}
+
+/* Set --m to the medallion's size. The shadow and the number plate stay the same at every size. */
+.mp-medallion {
+  position: relative;
+  display: inline-grid;
+  justify-items: center;
+  width: var(--m);
+}
+
+.mp-medallion-ring {
+  display: grid;
+  place-items: center;
+  width: var(--m);
+  height: var(--m);
+  border-radius: 50%;
+  background: radial-gradient(circle at 50% 30%, var(--gold-300), var(--gold-500) 60%, var(--gold-700));
+  box-shadow: 0 7px 0 var(--gold-900), 0 14px 18px oklch(0.2 0.05 60 / 0.35), inset 0 3px 0 oklch(1 0 0 / 0.6);
+  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), filter var(--dur-fast);
+}
+
+.mp-medallion-number {
+  margin-top: -14px;
+  min-width: 36px;
+  height: 30px;
+  padding: 0 10px;
+  border-radius: 999px;
+  background: linear-gradient(180deg, #fff, var(--cream-100));
+  box-shadow: 0 3px 0 var(--cream-300), 0 6px 10px oklch(0 0 0 / 0.2);
+  font-family: var(--font-display);
+  font-size: 17px;
+  line-height: 30px;
+  color: var(--ink-900);
+  text-align: center;
+  z-index: 1;
+  transition: transform var(--dur-fast) var(--ease-out);
+}
+
+.mp-medallion-pop {
+  animation: mp-medallion-pop 900ms var(--ease-out) both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mp-medallion-pop {
+    animation: none;
+  }
+}