/* ================================================================== COMPONENT LANGUAGE — SHARED IDENTITY CONTROLS · PILLS · CHIPS Per L1 §5 (15 Sep 2026, WITH_COMPONENT_LANGUAGE): "Compact pills, chips, status badges and compact action controls are deliberate UI components, not flat coloured blobs." "Names/person selectors and other compact identity controls should use the same component language as status/job pills." Per L1 §20: "the component language is a forward design-system rule and should be implemented centrally by Claude when the viewer surfaces are wired into the app." This file is the central design-system layer. Every viewer refers to these classes rather than re-styling their own. All values from tokens; tone drives colour via CSS variables set on the element. Scoped under [data-new-ui]. v1.45.5 ================================================================== */ /* ================================================================ Tone tokens — set on the element via a .nu-tone-* modifier. Each tone provides three vars the components read: --nu-tone-bg — soft tint background --nu-tone-fg — foreground/text/stroke colour --nu-tone-ring — ring/border colour for hover / focus / selected Not a fixed list — new viewers add tones as needed. Names are semantic (green/blue/purple/amber/red/neutral) so a viewer picks the tone that matches state, not the raw colour. ================================================================ */ [data-new-ui] .nu-tone-green { --nu-tone-bg: var(--nu-c-tint-green); --nu-tone-fg: #0a7b51; --nu-tone-ring: var(--nu-c-green); } [data-new-ui] .nu-tone-blue { --nu-tone-bg: var(--nu-c-tint-blue); --nu-tone-fg: #1268d2; --nu-tone-ring: var(--nu-c-blue); } [data-new-ui] .nu-tone-purple { --nu-tone-bg: var(--nu-c-tint-purple); --nu-tone-fg: #6b31bf; --nu-tone-ring: var(--nu-c-purple); } [data-new-ui] .nu-tone-amber { --nu-tone-bg: var(--nu-c-tint-amber); --nu-tone-fg: #966100; --nu-tone-ring: var(--nu-c-amber); } [data-new-ui] .nu-tone-red { --nu-tone-bg: var(--nu-c-tint-red); --nu-tone-fg: #c83830; --nu-tone-ring: var(--nu-c-red); } [data-new-ui] .nu-tone-slate { --nu-tone-bg: #eef2f6; --nu-tone-fg: #4a5f78; --nu-tone-ring: #7a90a8; } [data-new-ui] .nu-tone-neutral{ --nu-tone-bg: #eef2f6; --nu-tone-fg: var(--nu-c-text-muted); --nu-tone-ring: var(--nu-c-border-strong); } /* ================================================================ AVATAR — compact identity control Sizes: xs (20px), sm (28px), md (34px), lg (44px) Tone drives fill; text is initials. Ring uses --nu-tone-ring. Same construction language as pills below — purposeful shape, restrained border, clear typography, colour as identity/state. ================================================================ */ [data-new-ui] .nu-avatar-c { display: inline-grid; place-items: center; border-radius: var(--nu-r-pill); background: var(--nu-tone-bg, #dfeaf3); color: var(--nu-tone-fg, #254a68); font-weight: var(--nu-t-weight-black); font-family: var(--nu-t-family); letter-spacing: 0; flex: none; user-select: none; line-height: 1; } [data-new-ui] .nu-avatar-c.nu-avatar-xs { width: 20px; height: 20px; font-size: 11px; } /* 4j: was 9px */ [data-new-ui] .nu-avatar-c.nu-avatar-sm { width: 28px; height: 28px; font-size: 12px; } /* 4j: was 10px */ [data-new-ui] .nu-avatar-c.nu-avatar-md { width: 34px; height: 34px; font-size: 13px; } /* 4j: was 11px */ [data-new-ui] .nu-avatar-c.nu-avatar-lg { width: 44px; height: 44px; font-size: 13px; } /* Focus / ring variant (used when the avatar acts as a link/button) */ [data-new-ui] .nu-avatar-c.nu-avatar-ring { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--nu-tone-ring, var(--nu-c-border-strong)); } /* Avatar + name stack — used in team member cards, task assignees, notebook rows, quick-actions. Avatar first, name to the right. */ [data-new-ui] .nu-identity { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } [data-new-ui] .nu-identity-name { font-size: var(--nu-t-size-md); font-weight: var(--nu-t-weight-heavy); color: var(--nu-c-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-new-ui] .nu-identity-role { display: block; font-size: var(--nu-t-size-sm); font-weight: var(--nu-t-weight-semibold); color: var(--nu-c-text-muted); margin-top: 1px; } [data-new-ui] .nu-identity-stack { display: flex; flex-direction: column; min-width: 0; } /* ------------------------------------------------------------------ .nu-teammember-c — app-wide team member display standard (v1.45.9) ------------------------------------------------------------------ Locked amendment (2026-09-23): everywhere a team member appears in a list row, use avatar + first name together. Supersedes the initials-only .small-avatar (file 02) and .miniav (file 05) treatments — files 02 and 05 to be reworked to this standard in their next passes. Structure: JS Jake Design intent (grounded in file 05 .miniav): - 29px round avatar with pale tone-bg + dark tone-fg (never white on saturated). Assigned per user id so the same person always reads the same colour. - Inset white highlight + thin border + subtle drop shadow gives the avatar a "coin" quality rather than a flat SaaS circle. - First name only, 13px weight 700 dark text, single line, ellipsis if long. - Full name lives on the wrapper's title attr (browser tooltip). ------------------------------------------------------------------ */ [data-new-ui] .nu-teammember-c { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; } [data-new-ui] .nu-teammember-coin { width: 29px; height: 29px; font-size: 12px; /* 4j: was 10px */ border: 1px solid rgba(114, 151, 173, 0.28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 5px rgba(8, 32, 51, 0.06); } [data-new-ui] .nu-teammember-name { font-size: var(--nu-t-size-md); font-weight: var(--nu-t-weight-bold); color: var(--nu-c-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* Stacked variant — multi-person crews (currently only Recent Jobs uses this). Overlaps avatars, first name follows the last visible avatar. Kept for future — dashboard tables render one lead per row. */ [data-new-ui] .nu-teammember-crew { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } [data-new-ui] .nu-teammember-crew .nu-avatar-stack + .nu-teammember-name { margin-left: 2px; } /* ================================================================ PILL — status/priority/state control Sizes: sm (24px), md (28px) Tone drives fill + text colour. Optional dot prefix (·) for "operational status" pills (In Progress, On site, Scheduled etc). ================================================================ */ [data-new-ui] .nu-pill-c { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--nu-r-pill); padding: 0 10px; background: var(--nu-tone-bg); color: var(--nu-tone-fg); font-weight: var(--nu-t-weight-black); font-size: var(--nu-t-size-sm); font-family: var(--nu-t-family); letter-spacing: 0; line-height: 1; white-space: nowrap; } [data-new-ui] .nu-pill-c.nu-pill-sm { height: 24px; padding: 0 8px; font-size: var(--nu-t-size-xs); } [data-new-ui] .nu-pill-c.nu-pill-md { height: 28px; padding: 0 10px; font-size: var(--nu-t-size-sm); } /* Dot prefix for operational status pills */ [data-new-ui] .nu-pill-c.nu-pill-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--nu-tone-ring); margin-right: 6px; } /* ================================================================ CHIP — attribute / tag / job-address chip Softer border, thinner weight than a status pill. Used for "job address" chips (Teams reference), tags on note cards. ================================================================ */ [data-new-ui] .nu-chip-c { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--nu-r-pill); background: var(--nu-tone-bg); color: var(--nu-tone-fg); font-weight: var(--nu-t-weight-bold); font-size: var(--nu-t-size-sm); font-family: var(--nu-t-family); letter-spacing: 0; white-space: nowrap; border: 0; } /* ================================================================ BADGE — small count indicator, sits on top-right of an icon ================================================================ */ [data-new-ui] .nu-badge-c { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--nu-r-pill); background: var(--nu-c-red); color: #fff; font-size: var(--nu-t-size-2xs); font-weight: var(--nu-t-weight-heavy); line-height: 1; } /* ================================================================ CHIP GROUP — horizontal row of chips with "+N more" Used in Teams (jobs per person) and Assigned Team panel. ================================================================ */ [data-new-ui] .nu-chip-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } /* ================================================================ AVATAR STACK — overlapping avatars (crew planner style) ================================================================ */ [data-new-ui] .nu-avatar-stack { display: inline-flex; align-items: center; } [data-new-ui] .nu-avatar-stack .nu-avatar-c { margin-left: -8px; box-shadow: 0 0 0 2px var(--nu-c-surface-card); } [data-new-ui] .nu-avatar-stack .nu-avatar-c:first-child { margin-left: 0; } /* v2.0 (Phil): every coloured pill gets the same fine outline as the Schedule bars (amendment 11) — a slightly darker shade of its own colour. (Schedule bars keep their thick left edge; pills don't.) */ [data-new-ui] .nu-tone-green { --nu-tone-line: #9fdcc2; } [data-new-ui] .nu-tone-blue { --nu-tone-line: #b3cbeb; } [data-new-ui] .nu-tone-purple { --nu-tone-line: #cdb5ef; } [data-new-ui] .nu-tone-amber { --nu-tone-line: #e6c88e; } [data-new-ui] .nu-tone-red { --nu-tone-line: #eeb0ae; } [data-new-ui] .nu-tone-slate { --nu-tone-line: #c4ced7; } [data-new-ui] .nu-tone-neutral{ --nu-tone-line: #d3dce5; } [data-new-ui] .nu-pill-c { border: 1px solid var(--nu-tone-line, transparent); box-sizing: border-box; }