/* ============================================================ URBINO DESIGN TOKENS · LAYER 2 — SEMANTIC Component-intent tokens. Reference primitives only. Defaults map to the MANAGER world (dense, professional). The CITIZEN world overrides these inside .urbino-cit { … } in tokens/world-cit.css. Components reference these tokens, never the primitives directly. This is the contract every implementation (PrimeNG Aura preset, Flutter ThemeData, the reference CSS) honours so the visual result stays in sync. See tokens/README.md for the full architecture. ============================================================ */ :root { /* ============================================================ SURFACES & BORDERS ============================================================ */ --u-bg: var(--u-slate-75); /* page canvas */ --u-surface: var(--u-slate-0); /* default surface (card / panel) */ --u-surface-alt: var(--u-slate-50); /* subtle surface (toolbar bg) */ --u-surface-sunk: var(--u-slate-100); /* recessed surface (input bg-alt, chip bg) */ --u-border: var(--u-slate-150); --u-border-strong: var(--u-slate-300); --u-divider: var(--u-slate-100); /* ============================================================ FOREGROUNDS ============================================================ */ --u-fg-1: var(--u-slate-900); /* primary text */ --u-fg-2: var(--u-slate-600); /* secondary text */ --u-fg-3: var(--u-slate-500); /* tertiary / meta */ --u-fg-4: var(--u-slate-400); /* muted / placeholder */ --u-fg-inv: var(--u-slate-0); /* on-primary, dark-surface text */ /* ============================================================ BRAND ============================================================ */ --u-primary: var(--u-blue-500); --u-primary-hover: var(--u-blue-600); --u-primary-press: var(--u-blue-700); --u-primary-soft: var(--u-blue-50); /* ============================================================ FOCUS ============================================================ */ --u-focus-ring: 0 0 0 3px rgba(46, 99, 235, 0.25); --u-focus-ring-danger: 0 0 0 3px rgba(220, 38, 38, 0.25); /* ============================================================ CARD — molecule ============================================================ */ --u-card-bg: var(--u-surface); --u-card-radius: var(--u-radius-md); /* 10 */ --u-card-border: 1px solid var(--u-border); --u-card-shadow: var(--u-shadow-sm); --u-card-padding: var(--u-space-4); /* 16 */ --u-card-padding-sm: var(--u-space-3); /* 12 — row-card */ --u-card-padding-lg: var(--u-space-5); /* 20 — hero */ --u-card-padding-xl: var(--u-space-6); /* 24 — detail-view */ --u-card-header-py: var(--u-space-3); /* 12 */ --u-card-header-px: var(--u-space-4); /* 16 */ --u-card-footer-py: var(--u-space-3); /* 12 */ --u-card-footer-px: var(--u-space-4); /* 16 */ --u-card-header-title-size: 16px; --u-card-press-transform: translateY(1px); /* ============================================================ BUTTON — atom ============================================================ */ --u-btn-h-sm: 28px; --u-btn-h-md: 36px; --u-btn-h-lg: 44px; --u-btn-h-xl: 44px; /* same as lg in manager; citizen overrides */ --u-btn-radius-sm: var(--u-radius-xs); /* 6 */ --u-btn-radius-md: var(--u-radius-sm); /* 8 */ --u-btn-radius-lg: var(--u-radius-md); /* 10 */ --u-btn-radius-xl: var(--u-radius-md); /* 10 — citizen overrides to pill */ --u-btn-px-sm: var(--u-space-3); /* 12 */ --u-btn-px-md: var(--u-space-4); /* 16 */ --u-btn-px-lg: var(--u-space-5); /* 20 */ --u-btn-px-xl: var(--u-space-7); /* 28 */ --u-btn-gap: var(--u-space-2); /* 8 — icon ↔ label */ --u-btn-gap-sm: 6px; /* tighter at sm size */ --u-btn-font-size-sm: 12px; --u-btn-font-size-md: 14px; --u-btn-font-size-lg: 15px; --u-btn-font-size-xl: 16px; --u-btn-font-weight: 600; --u-btn-icon-size-sm: 14px; --u-btn-icon-size-md: 16px; --u-btn-icon-size-lg: 18px; --u-btn-icon-size-xl: 20px; --u-btn-press-transform: none; /* ============================================================ INPUT — atom ============================================================ */ --u-input-h-sm: 28px; --u-input-h-md: 36px; --u-input-h-lg: 44px; --u-input-radius-sm: var(--u-radius-xs); /* 6 */ --u-input-radius-md: var(--u-radius-sm); /* 8 */ --u-input-radius-lg: var(--u-radius-md); /* 10 */ --u-input-px-sm: var(--u-space-3); /* 12 */ --u-input-px-md: var(--u-space-3); /* 12 */ --u-input-px-lg: var(--u-space-4); /* 16 */ --u-input-font-size-sm: 12px; --u-input-font-size-md: 14px; --u-input-font-size-lg: 15px; --u-input-textarea-min-h: 96px; --u-input-textarea-py: 10px; --u-input-leading-offset: var(--u-space-3); /* 12 — left position of leading icon */ --u-input-icon-size: 16px; --u-input-padding-leading: var(--u-space-9, 36px); /* fallback when no token */ /* ============================================================ FIELD WRAPPER — label + control + hint/error ============================================================ */ --u-field-gap: var(--u-space-1); /* 4 — label/control/hint */ --u-field-label-font-size: 13px; --u-field-label-font-weight: 500; --u-field-label-color: var(--u-slate-700); --u-field-hint-font-size: 12px; --u-field-hint-color: var(--u-fg-3); --u-field-error-color: var(--u-red-700); /* ============================================================ TOAST — molecule Manager: corner-card (360px fixed-width); citizen: top banner. Four intents share the same shape; the intent only colours the leading icon and a subtle 4px left strip. ============================================================ */ --u-toast-bg: var(--u-surface); --u-toast-fg: var(--u-fg-1); --u-toast-fg-muted: var(--u-fg-2); --u-toast-border: 1px solid var(--u-border); --u-toast-shadow: var(--u-shadow-pop); --u-toast-radius: var(--u-radius-md); /* 10 */ --u-toast-py: var(--u-space-3); /* 12 */ --u-toast-px: var(--u-space-4); /* 16 */ --u-toast-gap: var(--u-space-3); /* 12 — icon ↔ body */ --u-toast-stack-gap: var(--u-space-2); /* 8 — between stacked toasts */ --u-toast-width: 360px; --u-toast-max-width: calc(100vw - var(--u-space-8)); --u-toast-icon-size: 20px; --u-toast-accent-w: 4px; /* left intent-color strip */ --u-toast-title-font-size: 14px; --u-toast-body-font-size: 13px; /* Per-intent accents — the icon + left strip carry the intent. The surface itself stays --u-surface; we don't tint the whole toast (Citizens shouldn't feel scolded by a red surface). */ --u-toast-info-accent: var(--u-primary); --u-toast-success-accent: var(--u-green-500); --u-toast-warning-accent: var(--u-amber-500); --u-toast-danger-accent: var(--u-red-500); /* Container — where toasts pile up */ --u-toast-container-py: var(--u-space-5); /* 20 */ --u-toast-container-px: var(--u-space-5); /* 20 */ --u-toast-container-z: var(--u-z-toast); /* ============================================================ OVERLAY — scrim / backdrop behind blocking surfaces Composes with Dialog, Drawer (Wave 5c). ============================================================ */ --u-overlay-bg: rgba(15, 23, 42, 0.45); --u-overlay-z: var(--u-z-modal); --u-overlay-py: var(--u-space-6); /* 24 — viewport padding */ --u-overlay-px: var(--u-space-6); --u-overlay-blur: 0; /* opt-in: set to e.g. 2px to enable */ /* ============================================================ DIALOG — molecule Blocking, focused, decision-required surface. Use Toast for non-blocking confirmations; Dialog for decisions. ============================================================ */ --u-dialog-bg: var(--u-surface); --u-dialog-fg: var(--u-fg-1); --u-dialog-radius: var(--u-radius-lg); /* 14 */ --u-dialog-shadow: var(--u-shadow-pop); --u-dialog-width-sm: 480px; /* confirm / small form */ --u-dialog-width-md: 640px; /* default — most dialogs */ --u-dialog-width-lg: 800px; /* rich content, side-by-side fields */ --u-dialog-max-h: calc(100vh - var(--u-space-12) * 2); --u-dialog-header-py: var(--u-space-4); /* 16 */ --u-dialog-header-px: var(--u-space-5); /* 20 */ --u-dialog-body-py: var(--u-space-4); /* 16 */ --u-dialog-body-px: var(--u-space-5); /* 20 */ --u-dialog-footer-py: var(--u-space-3); /* 12 */ --u-dialog-footer-px: var(--u-space-5); /* 20 */ --u-dialog-footer-gap: var(--u-space-2); /* 8 — between buttons */ --u-dialog-title-font-size: 18px; --u-dialog-close-size: 32px; --u-dialog-z: var(--u-z-modal); /* ============================================================ DRAWER — molecule (manager only) Side panel anchored to the right (default) or left. For citizen mobile "from-the-bottom" use Dialog --sheet. ============================================================ */ --u-drawer-bg: var(--u-surface); --u-drawer-fg: var(--u-fg-1); --u-drawer-shadow: var(--u-shadow-lg); --u-drawer-width-sm: 320px; /* compact — quick-view, settings */ --u-drawer-width-md: 420px; /* default — detail panel */ --u-drawer-width-lg: 560px; /* rich detail — form + log */ --u-drawer-header-py: var(--u-space-4); /* 16 */ --u-drawer-header-px: var(--u-space-5); /* 20 */ --u-drawer-body-py: var(--u-space-4); /* 16 */ --u-drawer-body-px: var(--u-space-5); /* 20 */ --u-drawer-footer-py: var(--u-space-3); /* 12 */ --u-drawer-footer-px: var(--u-space-5); /* 20 */ --u-drawer-footer-gap: var(--u-space-2); /* 8 */ --u-drawer-title-font-size: 18px; --u-drawer-close-size: 32px; --u-drawer-z: var(--u-z-drawer); /* ============================================================ TABS — molecule Section switcher. Default is underline; .u-tabs--pill swaps the active-state to a pill background. ============================================================ */ --u-tab-h-sm: 32px; --u-tab-h-md: 40px; --u-tab-h-lg: 48px; --u-tab-px-sm: var(--u-space-2); /* 8 */ --u-tab-px-md: var(--u-space-3); /* 12 */ --u-tab-px-lg: var(--u-space-4); /* 16 */ --u-tab-font-size-sm: 12px; --u-tab-font-size-md: 14px; --u-tab-font-size-lg: 15px; --u-tab-font-weight: 500; --u-tab-font-weight-active: 600; --u-tab-gap: var(--u-space-2); /* 8 — icon ↔ label */ --u-tab-list-gap: 0; /* 0 for underline (tabs touch) */ --u-tab-list-border-color: var(--u-border); --u-tab-list-border-w: var(--u-border-w-hairline); /* 1px */ --u-tab-indicator-w: 2px; --u-tab-color: var(--u-fg-2); --u-tab-color-hover: var(--u-fg-1); --u-tab-color-active: var(--u-primary); --u-tab-bg-hover: transparent; --u-tab-bg-active: transparent; --u-tab-pill-radius: var(--u-radius-sm); /* 8 */ --u-tab-pill-bg-active: var(--u-primary-soft); --u-tab-icon-size-sm: 14px; --u-tab-icon-size-md: 16px; --u-tab-icon-size-lg: 18px; /* ============================================================ POPOVER — anchored floating surface Used as the base for filter popover, dropdown menu, column chooser, date picker. The CSS provides surface + slots + show/hide; *positioning* (anchor detection, viewport clip, flip) is consumer JS (Floating UI / Popper). ============================================================ */ --u-popover-bg: var(--u-surface); --u-popover-fg: var(--u-fg-1); --u-popover-border: 1px solid var(--u-border); --u-popover-radius: var(--u-radius-md); /* 10 */ --u-popover-shadow: var(--u-shadow-md); --u-popover-py: var(--u-space-3); /* 12 */ --u-popover-px: var(--u-space-3); /* 12 */ --u-popover-gap: var(--u-space-2); /* 8 — between blocks */ --u-popover-min-width: 180px; --u-popover-max-width: 420px; --u-popover-arrow-size: 8px; --u-popover-z: var(--u-z-popover); /* Menu variant — list of choices inside a popover */ --u-popover-menu-py: var(--u-space-1); /* 4 — list padding */ --u-popover-menu-px: var(--u-space-1); /* 4 */ --u-popover-menu-item-py: 6px; /* sub-grid for dense menus */ --u-popover-menu-item-px: var(--u-space-2); /* 8 */ --u-popover-menu-item-gap: var(--u-space-2); /* 8 — icon ↔ label */ --u-popover-menu-item-radius: var(--u-radius-xs); /* 6 */ --u-popover-menu-item-font: 13px; --u-popover-menu-section-py: var(--u-space-1); --u-popover-menu-section-color: var(--u-fg-3); /* ============================================================ BREADCRUMB — navigation trail Tiny molecule. Header-level wayfinding above page titles. ============================================================ */ --u-breadcrumb-gap: var(--u-space-2); /* 8 — item ↔ sep ↔ item */ --u-breadcrumb-font-size: 13px; --u-breadcrumb-font-size-sm: 12px; --u-breadcrumb-color: var(--u-fg-3); /* items along the trail */ --u-breadcrumb-color-hover: var(--u-fg-1); --u-breadcrumb-color-current: var(--u-fg-1); /* the leaf */ --u-breadcrumb-current-weight: 600; --u-breadcrumb-separator-color: var(--u-fg-4); --u-breadcrumb-separator-size: 12px; /* chevron / slash size */ --u-breadcrumb-icon-size: 14px; /* leading home icon */ /* ============================================================ CHIP — atom Internal sub-grid padding is allowed (atom-internal exception to the 4-grid; chips are visually tuned, not laid out). ============================================================ */ --u-chip-radius-pill: var(--u-radius-pill); --u-chip-radius-square: var(--u-radius-xs); /* 6 */ --u-chip-py-sm: 2px; --u-chip-py-md: 3px; --u-chip-py-lg: 4px; --u-chip-px-sm: 8px; --u-chip-px-md: 10px; --u-chip-px-lg: 12px; --u-chip-font-size-sm: 11px; --u-chip-font-size-md: 12px; --u-chip-font-size-lg: 13px; --u-chip-gap: var(--u-space-2); /* 8 — icon/dot ↔ label */ --u-chip-gap-sm: 5px; --u-chip-dot-size: 6px; --u-chip-dot-size-sm: 5px; --u-chip-dot-size-lg: 7px; /* ============================================================ TAP TARGET FLOOR Manager: 28px allowed (compact rows, icon-only). Citizen: 44px floor (mobile thumbs). ============================================================ */ --u-tap-min: 28px; /* ============================================================ TYPE SCALE Manager defaults (dense). Citizen overrides bump the floor up. ============================================================ */ --u-text-xs: 11px; --u-text-sm: 12px; --u-text-base: 14px; --u-text-md: 15px; --u-text-lg: 18px; --u-text-xl: 22px; --u-text-2xl: 28px; --u-text-3xl: 36px; --u-h1-size: var(--u-text-3xl); --u-h2-size: var(--u-text-2xl); --u-h3-size: var(--u-text-xl); --u-h4-size: var(--u-text-lg); /* ============================================================ LAYOUT (manager-default) ============================================================ */ --u-page-px: var(--u-space-6); /* 24 */ --u-page-py: var(--u-space-5); /* 20 */ --u-page-max-w: 1280px; --u-sidebar-w: 248px; /* ============================================================ COMPOSITION RHYTHM (consumed by layout.css + density modes) These are the canonical names for the four density rhythms. Density-mode attribute selectors override these inside their scope; see tokens/density.css. ============================================================ */ --u-block-gap: var(--u-space-3); /* 12 — between cards in a list */ --u-section-gap: var(--u-space-6); /* 24 — between named sections */ --u-list-tile-py: var(--u-space-3); /* 12 — list-tile vertical padding */ --u-list-tile-px: var(--u-space-4); /* 16 — list-tile horizontal padding */ /* ============================================================ LAYOUT — page padding, max widths, sidebar widths docs/spacing.md §4 (Page anatomy) + §4.2 (Max content widths). Referenced by components/layout.css .u-page family. ============================================================ */ --u-page-px: var(--u-space-6); /* 24 — manager default H padding */ --u-page-py: var(--u-space-5); /* 20 — manager default V padding */ --u-page-px-dense: var(--u-space-5); /* 20 — .u-page--mgr-dense */ --u-page-py-dense: var(--u-space-4); /* 16 — .u-page--mgr-dense */ --u-page-max-w: 1280px; /* manager canvas default */ --u-page-max-w-form: 960px; /* .u-page--form — readable form line-length */ --u-page-max-w-detail: 1280px; /* .u-page--detail — two-column outer */ --u-sidebar-w: 240px; /* app-shell left nav, expanded */ --u-sidebar-w-collapsed: 64px; /* app-shell left nav, collapsed */ --u-detail-sidebar-w: 320px; /* .u-page__sidebar — detail-view right rail */ } /* ============================================================ CITIZEN WORLD OVERRIDES Lives in tokens/world-cit.css to keep this file's payload focused on defaults. Loaded after this file. ============================================================ */ /* ============================================================ LEGACY ALIASES — back-compat for existing components Old --mgr-* and --cit-* names continue to resolve while we migrate components to the new semantic tokens (Wave 2). New code MUST use --u-* tokens. ============================================================ */ :root { /* Manager world aliases */ --mgr-bg: var(--u-bg); --mgr-surface: var(--u-surface); --mgr-surface-alt: var(--u-surface-alt); --mgr-surface-sunk: var(--u-surface-sunk); --mgr-border: var(--u-border); --mgr-border-strong: var(--u-border-strong); --mgr-divider: var(--u-divider); --mgr-fg-1: var(--u-fg-1); --mgr-fg-2: var(--u-fg-2); --mgr-fg-3: var(--u-fg-3); --mgr-fg-4: var(--u-fg-4); --mgr-fg-inv: var(--u-fg-inv); --mgr-primary: var(--u-primary); --mgr-primary-hover: var(--u-primary-hover); --mgr-primary-press: var(--u-primary-press); --mgr-primary-soft: var(--u-primary-soft); --mgr-focus-ring: var(--u-focus-ring); --mgr-space-1: var(--u-space-1); --mgr-space-2: var(--u-space-2); --mgr-space-3: var(--u-space-3); --mgr-space-4: var(--u-space-4); --mgr-space-5: var(--u-space-5); --mgr-space-6: var(--u-space-6); --mgr-space-8: var(--u-space-8); --mgr-space-10: var(--u-space-10); --mgr-space-12: var(--u-space-12); --mgr-radius-xs: var(--u-radius-xs); --mgr-radius-sm: var(--u-radius-sm); --mgr-radius-md: var(--u-radius-md); --mgr-radius-lg: var(--u-radius-lg); --mgr-radius-pill: var(--u-radius-pill); --mgr-shadow-xs: var(--u-shadow-xs); --mgr-shadow-sm: var(--u-shadow-sm); --mgr-shadow-md: var(--u-shadow-md); --mgr-shadow-lg: var(--u-shadow-lg); --mgr-shadow-pop: var(--u-shadow-pop); --mgr-control-sm: var(--u-btn-h-sm); --mgr-control-md: var(--u-btn-h-md); --mgr-control-lg: var(--u-btn-h-lg); --mgr-text-xs: var(--u-text-xs); --mgr-text-sm: var(--u-text-sm); --mgr-text-base: var(--u-text-base); --mgr-text-md: var(--u-text-md); --mgr-text-lg: var(--u-text-lg); --mgr-text-xl: var(--u-text-xl); --mgr-text-2xl: var(--u-text-2xl); --mgr-text-3xl: var(--u-text-3xl); --mgr-sidebar-w: var(--u-sidebar-w); /* Citizen world aliases — same surfaces, citizen-specific spacing/radii live in world-cit.css */ --cit-bg: var(--u-bg); --cit-surface: var(--u-surface); --cit-surface-alt: var(--u-surface-alt); --cit-surface-sunk: var(--u-surface-sunk); --cit-border: var(--u-border); --cit-border-strong: var(--u-border-strong); --cit-divider: var(--u-divider); --cit-fg-1: var(--u-fg-1); --cit-fg-2: var(--u-fg-2); --cit-fg-3: var(--u-fg-3); --cit-fg-4: var(--u-fg-4); --cit-fg-inv: var(--u-fg-inv); --cit-primary: var(--u-primary); --cit-primary-hover: var(--u-primary-hover); --cit-primary-press: var(--u-primary-press); --cit-primary-soft: var(--u-primary-soft); --cit-focus-ring: 0 0 0 4px rgba(46, 99, 235, 0.22); --cit-space-1: var(--u-space-1); --cit-space-2: var(--u-space-2); --cit-space-3: var(--u-space-3); --cit-space-4: var(--u-space-4); --cit-space-5: var(--u-space-5); --cit-space-6: var(--u-space-6); --cit-space-8: var(--u-space-8); --cit-space-10: var(--u-space-10); --cit-space-12: var(--u-space-12); --cit-space-16: var(--u-space-16); --cit-radius-sm: var(--u-radius-md); /* 10 */ --cit-radius-md: var(--u-radius-lg); /* 14 */ --cit-radius-lg: var(--u-radius-xl); /* 18 */ --cit-radius-xl: var(--u-radius-2xl); /* 22 */ --cit-radius-2xl: var(--u-radius-3xl); /* 28 */ --cit-radius-pill: var(--u-radius-pill); --cit-shadow-xs: var(--u-shadow-xs); --cit-shadow-sm: var(--u-shadow-sm); --cit-shadow-md: var(--u-shadow-md); --cit-shadow-lg: var(--u-shadow-lg); --cit-control-md: 48px; --cit-control-lg: 56px; --cit-control-xl: 64px; --cit-text-sm: 13px; --cit-text-base: 16px; --cit-text-md: 18px; --cit-text-lg: 20px; --cit-text-xl: 24px; --cit-text-2xl: 30px; --cit-text-3xl: 38px; --cit-text-4xl: 48px; }