Tokens and layout

A token is a named value in CSS, a custom property such as --gutter or --ink, that a page’s rules read instead of writing a number or a color themselves. Tokens come in two kinds. The house’s set sizes, spacing and motion, and they’re the same in every game. A game can’t change them. The look’s set colors, faces and corners, and each game declares its own, mapped onto the same jobs.

Every value in this chapter is read from the stylesheets as the page is drawn, so it’s always the one in use.

Space: one rhythm#

Every root declares the same five spaces (One skeleton). Here they are as the hub declares them:

--s2 goes inside a group, --s3 between rows and groups, --s4 between sections and --s5 around a page. npm run check:tokens fails any stylesheet that gives one of them another value.

The page’s frame#

The layout tokens are declared once, in games/static/games/house/house.css, and every page on the house kit inherits them. No other stylesheet may set one.

• --gutter is where the page’s words and controls start, from each side of the window. It grows to clear a phone’s notch where there is one (Every screen fits).
• --frame is the margin round a framed table (the felt), inside the gutter. On a phone the felt is the screen.
• --bar-h, --bar-top and --bar-gap are the top bar’s height, its distance from the top, and the room under it on a home or lobby.
• --page-max is a home’s or lobby’s column. --page-max-wide is for pages of panels side by side, such as a waiting room.

Safe areas and the app#

Every page asks for viewport-fit=cover, so on a notched phone on its side the page may run to the glass, and keeps clear of the notch, the rounded corners and the home bar itself (ADR 0029):

• --gutter is the larger of its size and the side insets, so everything drawn from it clears the notch with nothing to remember.
• A dock or a foot at the bottom pads by the larger of its padding and the bottom inset; a bar or a felt that fills a side pads by the side insets the same way.
• The app’s status bar is black and opaque on every page, since the pages run from the cream paper to the dark felt, and a translucent bar would lose its clock on the paper.
• In the app, the arrow at the top left is the only way home, so every screen has it, and nothing links outside the site.

Type roles#

Each role has one size, weight and line height (Type roles). A game picks the faces; the sizes are the house’s.

The Heading, Body, Label and Note sizes are declared by every root (here, the hub’s), and check:tokens holds them all to one value. The rest are house.css’s alone.

Fine print at 12–13px is only for table furniture (Readable).

Buttons, panels and sheets#

--btn-h and --btn-pad are a move’s or a page’s button. --tool-h and --tool-pad are a quiet tool in the bar or a dock’s small button, a finger’s height on a touch screen. --panel-radius is the one layout token a game may set: corners are personality.

What check:layout holds#

npm run check:layout measures the pages as drawn, in a browser, against these numbers. That includes the page’s one title, whose size each family’s root sets but every family keeps to the same two sizes:

export const RULES = {
  gutter: w => (phone(w) ? 16 : 24),
  barHeight: 44,
  type: {
    title: { size: w => (phone(w) ? 32 : 44) },
    barTitle: { size: w => (phone(w) ? 15 : 17) },
    section: { size: () => 20 },
    lead: { size: () => 16 },
    column: { size: () => 16, name: 'body' },
    note: { size: () => 14 },
    label: { size: () => 16, weight: () => 600 },
    kicker: { size: () => 12, weight: () => 700 },
    tool: { size: () => 15, weight: () => 700 },
  },
  // The way up, top left of every bar (house/nav.js): a finger square, one
  // per screen, at the bar's start.
  back: { size: 44 },
  button: { height: 44, padX: w => (phone(w) ? 12 : 16) },
  tool: { height: w => (w < 768 ? 44 : 36) },
  panelPad: 16,
  sheet: { pad: w => (w <= 560 ? 16 : 24) },
};

The Register’s masthead is the one title off the scale, listed in EXCEPTIONS beside it.

Motion#

Things move from one vocabulary of named motions (Motion explains), each a token here and the same number in MOTION in games/static/games/house/motion.js. npm run check:house fails if the two disagree. Under reduced motion, everything that travels takes no time, and short fades stay.

Color jobs#

The house has six color jobs (Colors have jobs). Every look maps its palette onto them, under its own kit’s names. The names differ by kit, but the jobs don’t, and the house kit reads either through its fallbacks (below).

The surfaces and faces line up the same way:

A game whose names differ declares the --house-* ones itself (the puzzle kit and the hub do). Every name the house kit reads falls back to the room’s, so a table game declares nothing extra:

:where(.house-scrim, .house-toasts, .house-banner, .house-splash, .house-announce, .house-cheer, .house-options, .house-section, .house-setting, .house-seg) {
  --_surface: var(--house-surface, var(--sheet));
  --_ink: var(--house-ink, var(--ink));
  --_soft: var(--house-soft, var(--soft));
  --_edge: var(--house-edge, var(--rail));
  --_radius: var(--house-radius, var(--rail-radius, 14px));
  --_line: var(--house-line, color-mix(in srgb, var(--_ink) 14%, transparent));
  --_field-edge: var(--house-field-edge, var(--field-edge, 1.5px solid color-mix(in srgb, currentColor 50%, transparent)));
  --_btn-radius: var(--house-btn-radius, var(--btn-radius, 8px));
  --_display: var(--house-display, var(--display));
  --_display-weight: var(--house-display-weight, var(--display-weight, 400));
  --_font: var(--house-font, var(--ui-font));
  --_focus: var(--house-focus, var(--focus, var(--_ink)));
  --_turn: var(--house-turn, var(--turn, var(--_ink)));
  --_turn-ink: var(--house-turn-ink, var(--turn-ink, var(--_surface)));
  --_toast-edge: var(--house-toast-edge, var(--chip-edge, var(--_edge)));
  --_scrim: var(--house-scrim, rgba(0, 0, 0, .55));
  --_shadow: var(--house-shadow, 0 24px 64px rgba(0, 0, 0, .45));
}

The paper#

The hub, this guide and the pencil puzzles are printed on one palette, declared once and never set again (ADR 0036). It stays light whatever the reader’s dark-mode setting.

Choosing isn’t doing#

Every root declares how a pick looks, drawn in the color of the words around it, so a pick never wears the fill (Choosing isn’t doing). On the paper:

The card room’s tint is a little stronger, for its darker felt: