/* ============================================================ Arbah v2 — Primitives layer Scoped restyle of the shared UI primitives (Button, Chip, Card, KpiCard, PageHeader, Tabs, EmptyState, ProgressBar, ButtonGroup) under the .arbah-v2 class. Builds on --arbah-v2-* tokens only. Legacy AND v1 stylesheets stay byte-identical; nothing here applies unless has .arbah-v2. Focus-visible already comes from arbah-v2-tokens.css — not redefined here. Source mockups: progress/v2-source/arbah-v2/{screen-shell, desktop-chrome, screen-body, icons}.jsx. ============================================================ */ /* ---------- Body type baseline -------------------------------- */ /* arbah-v2-tokens.css sets .arbah-v2 .phone to 15px / line-height 1.5 for the on-site mobile reading bump; no base font-size was set on the .arbah-v2 root. Anchor it at 14px so the primitive type sizes below have a stable reference. */ .arbah-v2 { font-size: 14px; line-height: 1.5; } /* ---------- Button ------------------------------------------- */ /* Base reset shared by all variants. Per the staged mockups, v2 buttons are 36px tall at default size; .btn-sm shrinks to 28px; .btn-lg grows to 42px. */ .arbah-v2 .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding-inline: 14px; height: 36px; border: 1px solid transparent; border-radius: var(--arbah-v2-radius-md); background: transparent; font-family: var(--arbah-v2-font-sans); font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; box-shadow: none; transition: background-color 120ms cubic-bezier(.2, 0, 0, 1), border-color 120ms cubic-bezier(.2, 0, 0, 1), color 120ms cubic-bezier(.2, 0, 0, 1); } .arbah-v2 .btn:disabled { opacity: 0.55; cursor: not-allowed; } /* Primary — bronze accent on white. Source: desktop-chrome.jsx ButtonGroup primary, with the accent token resolved through v2. */ .arbah-v2 .btn-primary { background: var(--arbah-v2-accent); border-color: var(--arbah-v2-accent); color: #fff; box-shadow: var(--arbah-v2-shadow-sm); } .arbah-v2 .btn-primary:hover { background: var(--arbah-v2-bronze-700); border-color: var(--arbah-v2-bronze-700); } /* Secondary — bordered surface card. Same shape as the joined ButtonGroup items in desktop-chrome.jsx. */ .arbah-v2 .btn-secondary { background: var(--arbah-v2-surface); border-color: var(--arbah-v2-border); color: var(--arbah-v2-ink); } .arbah-v2 .btn-secondary:hover { background: var(--arbah-v2-surface-sunken); border-color: var(--arbah-v2-border-strong); } /* Danger — destructive secondary. Same border shape, danger text; solid red is reserved for irreversible confirmation surfaces. */ .arbah-v2 .btn-danger { background: var(--arbah-v2-surface); border-color: var(--arbah-v2-danger); color: var(--arbah-v2-danger); } .arbah-v2 .btn-danger:hover { background: var(--arbah-v2-danger-soft); } /* Ghost — transparent text-only action (icon-buttons in chrome). ui.js calls .btn-ghost from a few callsites; keep paint quiet. */ .arbah-v2 .btn-ghost { background: transparent; border-color: transparent; color: var(--arbah-v2-ink-muted); } .arbah-v2 .btn-ghost:hover { background: var(--arbah-v2-surface-sunken); color: var(--arbah-v2-ink); } .arbah-v2 .btn-sm { height: 28px; padding-inline: 10px; font-size: 12px; border-radius: var(--arbah-v2-radius-sm); } .arbah-v2 .btn-lg { height: 42px; padding-inline: 18px; font-size: 14px; } /* ---------- Chip + tones ------------------------------------- */ /* Base chip — pill, 22px tall, semibold, uppercase via the chip-uppercase variant. Each tone defines its own bg/fg pair from the v2 token soft pairs (see screen-shell.jsx StatusPill toneMap and CountBadge map). */ .arbah-v2 .chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 18px; height: 22px; padding-inline: 10px; border-radius: 999px; background: var(--arbah-v2-surface-raised); color: var(--arbah-v2-ink-muted); font-family: var(--arbah-v2-font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; line-height: 1; white-space: nowrap; } /* Neutral — informational count tier from the CountBadge 3-tier model (info bucket). Also the default tabs-bar count chip. */ .arbah-v2 .chip-neutral { background: var(--arbah-v2-surface-raised); color: var(--arbah-v2-ink-muted); } /* Brand — navy-100 fill, navy-700 text (StatusPill 'done' tone). */ .arbah-v2 .chip-brand { background: var(--arbah-v2-navy-100); color: var(--arbah-v2-navy-700); } /* Semantic soft pairs — match the StatusPill toneMap exactly. */ .arbah-v2 .chip-success { background: var(--arbah-v2-success-soft); color: var(--arbah-v2-success); } .arbah-v2 .chip-info { background: var(--arbah-v2-info-soft); color: var(--arbah-v2-info); } .arbah-v2 .chip-warning { background: var(--arbah-v2-warning-soft); color: var(--arbah-v2-warning); } .arbah-v2 .chip-danger { background: var(--arbah-v2-danger-soft); color: var(--arbah-v2-danger); } /* Attention tier (CountBadge 'attn' bucket from screen-shell.jsx): bronze-100 fill, bronze-700 text. Exposed as a chip tone so the tabs-bar count chip can opt in with `chip-attn`. */ .arbah-v2 .chip-attn { background: var(--arbah-v2-bronze-100); color: var(--arbah-v2-bronze-700); } /* Urgent tier — solid danger, white text. */ .arbah-v2 .chip-urgent { background: var(--arbah-v2-danger); color: #fff; } /* Sizing + casing variants */ .arbah-v2 .chip-lg { height: 26px; padding-inline: 12px; font-size: 12px; } .arbah-v2 .chip-uppercase { text-transform: uppercase; letter-spacing: 0.04em; } /* ---------- Card --------------------------------------------- */ /* Surface card with 1px border, lg radius, sm shadow. Density variants tighten or expand padding without changing chrome. */ .arbah-v2 .card { position: relative; background: var(--arbah-v2-surface); border: 1px solid var(--arbah-v2-border); border-radius: var(--arbah-v2-radius-lg); box-shadow: var(--arbah-v2-shadow-sm); padding: 16px; color: var(--arbah-v2-ink); font-family: var(--arbah-v2-font-sans); } .arbah-v2 .card-dense { padding: 12px; } .arbah-v2 .card-hero { padding: 20px 24px; } .arbah-v2 .card-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; } .arbah-v2 .card-title { font-family: var(--arbah-v2-font-display); font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--arbah-v2-ink); } .arbah-v2 .card-subtitle { font-size: 12.5px; line-height: 1.4; color: var(--arbah-v2-ink-muted); margin-top: 2px; } /* Ribbon — thin top stripe in a token semantic color, sits above the card border. Uses the card's overflow geometry to hug the top edge without leaking past the rounded corners. */ .arbah-v2 .ribbon { overflow: hidden; } .arbah-v2 .ribbon::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px; background: var(--arbah-v2-accent); border-start-start-radius: var(--arbah-v2-radius-lg); border-start-end-radius: var(--arbah-v2-radius-lg); } .arbah-v2 .ribbon-brand::before { background: var(--arbah-v2-brand); } .arbah-v2 .ribbon-success::before { background: var(--arbah-v2-success); } .arbah-v2 .ribbon-info::before { background: var(--arbah-v2-info); } .arbah-v2 .ribbon-warning::before { background: var(--arbah-v2-warning); } .arbah-v2 .ribbon-danger::before { background: var(--arbah-v2-danger); } /* ---------- KpiCard ------------------------------------------ */ /* Shares the .card chrome but adds the head/label/value/sub layout. Tile sizes per the mockups: label small, value display-serif. */ .arbah-v2 .kpi { background: var(--arbah-v2-surface); border: 1px solid var(--arbah-v2-border); border-radius: var(--arbah-v2-radius-lg); box-shadow: var(--arbah-v2-shadow-sm); padding: 14px 16px; color: var(--arbah-v2-ink); font-family: var(--arbah-v2-font-sans); transition: background-color 120ms cubic-bezier(.2, 0, 0, 1), box-shadow 120ms cubic-bezier(.2, 0, 0, 1); } .arbah-v2 .kpi-clickable { cursor: pointer; } .arbah-v2 .kpi-clickable:hover { background: var(--arbah-v2-surface-sunken); } .arbah-v2 .kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .arbah-v2 .kpi-label { font-size: 12px; font-weight: 500; color: var(--arbah-v2-ink-muted); letter-spacing: 0.02em; } .arbah-v2 .kpi-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--arbah-v2-radius-sm); background: var(--arbah-v2-surface-sunken); color: var(--arbah-v2-ink-muted); flex: 0 0 auto; } /* Icon tones mirror the Chip semantic palette so the tile color reads the same way across the dashboard. */ .arbah-v2 .kpi-icon-brand { background: var(--arbah-v2-navy-100); color: var(--arbah-v2-brand); } .arbah-v2 .kpi-icon-accent { background: var(--arbah-v2-bronze-100); color: var(--arbah-v2-bronze-700); } .arbah-v2 .kpi-icon-success { background: var(--arbah-v2-success-soft); color: var(--arbah-v2-success); } .arbah-v2 .kpi-icon-info { background: var(--arbah-v2-info-soft); color: var(--arbah-v2-info); } .arbah-v2 .kpi-icon-warning { background: var(--arbah-v2-warning-soft); color: var(--arbah-v2-warning); } .arbah-v2 .kpi-icon-danger { background: var(--arbah-v2-danger-soft); color: var(--arbah-v2-danger); } .arbah-v2 .kpi-value { /* Plex Mono on KPI numerals per the locked design bundle (BudgetKPIRow, RisksSummary, PGKPIRow, ProjectsKPIRow all spec --arbah-font-mono for the big value). tabular-nums/tnum were already here; only the family diverged (was --arbah-v2-font-display / Plex Serif). Scoped under .arbah-v2 so the legacy off-state is byte-identical. Serif stays on titles, not numerals. */ font-family: var(--arbah-v2-font-mono); font-weight: 500; font-size: 26px; line-height: 1.15; color: var(--arbah-v2-ink); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .arbah-v2 .kpi-sub { margin-top: 2px; font-size: 12px; color: var(--arbah-v2-ink-muted); } /* ---------- PageHeader --------------------------------------- */ /* Plex Serif page title — the display face is the v2 hallmark. Breadcrumb sits above in subtle ink; subtitle sits below in muted. */ .arbah-v2 .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-block-end: 20px; } .arbah-v2 .page-breadcrumb { font-size: 12px; font-weight: 500; color: var(--arbah-v2-ink-subtle); margin-bottom: 4px; } .arbah-v2 .page-title { font-family: var(--arbah-v2-font-display); font-weight: 500; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; color: var(--arbah-v2-ink); } .arbah-v2 .page-subtitle { margin-top: 4px; font-size: 13.5px; color: var(--arbah-v2-ink-muted); line-height: 1.45; } /* AR display face: Plex Serif doesn't carry Arabic, so swap to Plex Sans Arabic 600 at the page-title size — same trick the v2 shell applies to sidebar-brand-title. */ .arbah-v2[dir="rtl"] .page-title, [dir="rtl"] .arbah-v2 .page-title, .arbah-v2 [dir="rtl"] .page-title { font-family: "IBM Plex Sans Arabic", var(--arbah-v2-font-display); font-weight: 600; letter-spacing: 0; } /* ---------- Tabs — bar variant (page navigation) ------------- */ /* Horizontal scroll bar with a 2px accent underline on active. Source: screen-shell.jsx TabBar. The 2px line sits inside the bottom border so it doesn't extend the row height. */ .arbah-v2 .tabs-bar { display: flex; align-items: stretch; gap: 0; border-bottom: 1px solid var(--arbah-v2-border); background: var(--arbah-v2-surface); overflow-x: auto; scrollbar-width: none; } .arbah-v2 .tabs-bar::-webkit-scrollbar { display: none; } .arbah-v2 .tab-bar-item { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 12px 12px 10px; min-height: 44px; background: transparent; border: none; color: var(--arbah-v2-ink-muted); font-family: var(--arbah-v2-font-sans); font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; } .arbah-v2 .tab-bar-item:hover { color: var(--arbah-v2-ink); } .arbah-v2 .tab-bar-active { color: var(--arbah-v2-ink); font-weight: 600; } /* Underline indicator. Direction-agnostic — uses inset-inline so RTL flips for free. The 2px line sits at the bottom edge, tucked beneath the .tabs-bar border so visual height stays stable across active state changes. */ .arbah-v2 .tab-bar-active::after { content: ""; position: absolute; inset-inline: 8px; inset-block-end: -1px; height: 2px; background: var(--arbah-v2-accent); border-radius: 2px; } /* ---------- Tabs — pill segmented (filter contexts) ---------- */ .arbah-v2 .tabs { display: inline-flex; align-items: stretch; padding: 2px; background: var(--arbah-v2-surface-sunken); border: 1px solid var(--arbah-v2-border); border-radius: 999px; gap: 0; } .arbah-v2 .tab { display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; min-width: 44px; height: 28px; background: transparent; border: none; border-radius: 999px; color: var(--arbah-v2-ink-muted); font-family: var(--arbah-v2-font-sans); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color 120ms cubic-bezier(.2, 0, 0, 1), color 120ms cubic-bezier(.2, 0, 0, 1); } .arbah-v2 .tab:hover { color: var(--arbah-v2-ink); } .arbah-v2 .tab-active { background: var(--arbah-v2-surface); box-shadow: var(--arbah-v2-shadow-sm); color: var(--arbah-v2-ink); } /* ---------- EmptyState --------------------------------------- */ /* Dashed border-strong wrap, large vertical padding, muted icon circle on top. Source: desktop-chrome.jsx EmptyState. */ .arbah-v2 .empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 48px 24px; background: var(--arbah-v2-surface); border: 1px dashed var(--arbah-v2-border-strong); border-radius: var(--arbah-v2-radius-lg); text-align: center; color: var(--arbah-v2-ink); font-family: var(--arbah-v2-font-sans); } .arbah-v2 .empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 999px; background: var(--arbah-v2-surface-sunken); color: var(--arbah-v2-ink-subtle); margin-bottom: 12px; } .arbah-v2 .empty-title { font-size: 16px; font-weight: 600; color: var(--arbah-v2-ink); } .arbah-v2 .empty-hint { margin-top: 4px; font-size: 13.5px; color: var(--arbah-v2-ink-muted); line-height: 1.5; max-width: 380px; } /* ---------- ProgressBar -------------------------------------- */ /* Track is surface-sunken, fill is bronze by default. Tone variants match the token semantic palette. Source: screen-body.jsx BudgetCard / LifecycleCard progress strip. */ .arbah-v2 .pbar { position: relative; width: 100%; height: 6px; background: var(--arbah-v2-surface-sunken); border-radius: 4px; overflow: hidden; } .arbah-v2 .pbar-fill { height: 100%; background: var(--arbah-v2-accent); border-radius: 4px; transition: width 200ms cubic-bezier(.2, 0, 0, 1); } .arbah-v2 .pbar-fill-brand { background: var(--arbah-v2-brand); } .arbah-v2 .pbar-fill-success { background: var(--arbah-v2-success); } .arbah-v2 .pbar-fill-info { background: var(--arbah-v2-info); } .arbah-v2 .pbar-fill-warning { background: var(--arbah-v2-warning); } .arbah-v2 .pbar-fill-danger { background: var(--arbah-v2-danger); } /* ---------- ButtonGroup -------------------------------------- */ /* Two variants: - joined: a single bordered container with internal dividers, end radius on the outer corners only. Children paint as plain transparent buttons (no border). - spaced: 8px gap between siblings; each child keeps its own border + radius from .btn rules above. Source: desktop-chrome.jsx ButtonGroup. */ .arbah-v2 .btn-group { display: inline-flex; align-items: stretch; font-family: var(--arbah-v2-font-sans); } .arbah-v2 .btn-group-spaced { gap: 8px; } .arbah-v2 .btn-group-joined { background: var(--arbah-v2-surface); border: 1px solid var(--arbah-v2-border); border-radius: var(--arbah-v2-radius-md); overflow: hidden; box-shadow: var(--arbah-v2-shadow-sm); } /* Strip per-child borders + radii inside the joined container so the outer wrap owns the chrome. Internal dividers use border-inline-start so RTL flips naturally. */ .arbah-v2 .btn-group-joined > .btn, .arbah-v2 .btn-group-joined > button { background: transparent; border: none; border-radius: 0; box-shadow: none; } .arbah-v2 .btn-group-joined > .btn + .btn, .arbah-v2 .btn-group-joined > button + button, .arbah-v2 .btn-group-joined > .btn + button, .arbah-v2 .btn-group-joined > button + .btn { border-inline-start: 1px solid var(--arbah-v2-border); } .arbah-v2 .btn-group-joined > .btn:hover, .arbah-v2 .btn-group-joined > button:hover { background: var(--arbah-v2-surface-sunken); }