/* ============================================================ * Axismundi — tokens.comp.css * v3.6.1 — Token Architecture Refactor Phase 1A * * Component, semantic alias, and layout tokens. Non-mode system * tokens moved to tokens.sys.core.css. * * ── Omphalos admission policy ────────────────────────────── * This file is the runtime component-token layer Omphalos ships and enqueues. * A token belongs here when EITHER: * (1) it is referenced by active Omphalos CSS (blocks/prose/foundation) or * theme.json, OR * (2) it backs an active Omphalos registered block-style / component contract. * * Tokens defined but only meaningful to lab / app-shell / future component work * are isolation candidates: kept for now (no deletion), tracked in * docs/TOKENS-COMP-AUDIT.md, and migrated to tokens.comp.future.css (or dropped * from the Omphalos copy) per-phase as each contract settles — never big-bang. * As of the latest audit, --comp-card-padding / --comp-card-radius (blocks.css §8 * core/group Card) and --comp-button-height / --comp-button-radius (blocks.css §9 * + theme.json button) are consumed; the rest await their block contract (e.g. * the button size matrix, icon sizes). See the audit for the table. * ============================================================ */ /* ============================================================ * §9 Component tokens (prompt-v2 §3.3) * * Hybrid layer: per-component sizing/radius handles that * compose system tokens. Extension policy — add when a value * would otherwise be hard-coded across multiple component * files. Don't add for one-off literals. * ============================================================ */ :root { /* Card */ --comp-card-padding: var(--space-md); --comp-card-radius: var(--md-sys-shape-corner-medium); /* Button (M3 small button default) */ --comp-button-height: 40px; --comp-button-radius: calc(var(--comp-button-height) / 2); /* Button family size matrix (v3.5.13 BACKLOG #32) */ --comp-button-height-xs: 32px; --comp-button-height-s: 40px; --comp-button-height-m: 56px; --comp-button-height-l: 96px; --comp-button-height-xl: 136px; --comp-button-padding-inline-xs: 12px; --comp-button-padding-inline-s: 16px; --comp-button-padding-inline-m: 24px; --comp-button-padding-inline-l: 48px; --comp-button-padding-inline-xl: 64px; --comp-button-icon-size-xs: 20px; --comp-button-icon-size-s: 20px; --comp-button-icon-size-m: 24px; --comp-button-icon-size-l: 32px; --comp-button-icon-size-xl: 40px; --comp-button-outline-width-xs: 1px; --comp-button-outline-width-s: 1px; --comp-button-outline-width-m: 1px; --comp-button-outline-width-l: 2px; --comp-button-outline-width-xl: 3px; /* Icon button family size matrix (M3 Expressive — * m3.material.io/components/icon-buttons/specs). The icon-button contract that * core/social-links' icon cluster, the theme-switcher segment, the core/search * icon submit, and any future standalone icon button converge on. WP * social-links sizes map small/normal(default)/large/huge → XS/S/M/L (see * docs/ICON-BUTTON-ROUTE.md). Stored now, consumed when that contract lands * (isolation candidate — see docs/TOKENS-COMP-AUDIT.md). Raw dimensions are * literal dp; every shape references the sys corner scale, and the pressed / * selected shape morph reuses the sys fast-spatial spring. */ /* container height (dp) */ --comp-icon-button-height-xs: 32px; --comp-icon-button-height-s: 40px; /* default */ --comp-icon-button-height-m: 56px; --comp-icon-button-height-l: 96px; --comp-icon-button-height-xl: 136px; /* icon glyph size (dp) */ --comp-icon-button-icon-size-xs: 20px; --comp-icon-button-icon-size-s: 24px; --comp-icon-button-icon-size-m: 24px; --comp-icon-button-icon-size-l: 32px; --comp-icon-button-icon-size-xl: 40px; /* leading/trailing inline space — symmetric; width variants narrow / (default) / wide */ --comp-icon-button-space-xs-narrow: 4px; --comp-icon-button-space-xs: 6px; --comp-icon-button-space-xs-wide: 10px; --comp-icon-button-space-s-narrow: 4px; --comp-icon-button-space-s: 8px; --comp-icon-button-space-s-wide: 14px; --comp-icon-button-space-m-narrow: 12px; --comp-icon-button-space-m: 16px; --comp-icon-button-space-m-wide: 24px; --comp-icon-button-space-l-narrow: 16px; --comp-icon-button-space-l: 32px; --comp-icon-button-space-l-wide: 48px; --comp-icon-button-space-xl-narrow: 32px; --comp-icon-button-space-xl: 48px; --comp-icon-button-space-xl-wide: 72px; /* outline width (outlined variant, dp) */ --comp-icon-button-outline-width-xs: 1px; --comp-icon-button-outline-width-s: 1px; --comp-icon-button-outline-width-m: 1px; --comp-icon-button-outline-width-l: 2px; --comp-icon-button-outline-width-xl: 3px; /* shape — resting round = Circular (full); square + pressed-morph + selected * reference the sys corner scale (dp noted for provenance). */ --comp-icon-button-shape-round: var(--md-sys-shape-corner-full); --comp-icon-button-shape-square-xs: var(--md-sys-shape-corner-medium); /* 12 */ --comp-icon-button-shape-square-s: var(--md-sys-shape-corner-medium); /* 12 */ --comp-icon-button-shape-square-m: var(--md-sys-shape-corner-large); /* 16 */ --comp-icon-button-shape-square-l: var(--md-sys-shape-corner-extra-large); /* 28 */ --comp-icon-button-shape-square-xl: var(--md-sys-shape-corner-extra-large); /* 28 */ --comp-icon-button-shape-pressed-xs: var(--md-sys-shape-corner-small); /* 8 */ --comp-icon-button-shape-pressed-s: var(--md-sys-shape-corner-small); /* 8 */ --comp-icon-button-shape-pressed-m: var(--md-sys-shape-corner-medium); /* 12 */ --comp-icon-button-shape-pressed-l: var(--md-sys-shape-corner-large); /* 16 */ --comp-icon-button-shape-pressed-xl: var(--md-sys-shape-corner-large); /* 16 */ /* selected: round variant morphs to a rounded square; square variant morphs to Circular */ --comp-icon-button-shape-selected-round-xs: var(--md-sys-shape-corner-medium); /* 12 */ --comp-icon-button-shape-selected-round-s: var(--md-sys-shape-corner-medium); /* 12 */ --comp-icon-button-shape-selected-round-m: var(--md-sys-shape-corner-large); /* 16 */ --comp-icon-button-shape-selected-round-l: var(--md-sys-shape-corner-extra-large); /* 28 */ --comp-icon-button-shape-selected-round-xl: var(--md-sys-shape-corner-extra-large); /* 28 */ --comp-icon-button-shape-selected-square: var(--md-sys-shape-corner-full); /* Circular */ /* pressed / selected shape-morph spring — reuse the sys fast-spatial spring (0.6 / 800) */ --comp-icon-button-morph-spring-damping: var(--md-sys-motion-spring-fast-spatial-damping); --comp-icon-button-morph-spring-stiffness: var(--md-sys-motion-spring-fast-spatial-stiffness); /* Feed */ --comp-feed-gap: var(--space-sm); --comp-feed-max: 640px; /* Avatar */ --comp-avatar-size: 40px; --comp-avatar-radius: var(--md-sys-shape-corner-full); /* Navigation */ --comp-rail-width: 96px; /* collapsed nav rail default */ --comp-rail-narrow: 80px; --comp-rail-expanded: 220px; /* Icon sizing — for buttons, icon buttons, app bar, nav, card icons */ --comp-icon-size-sm: 20px; /* button XS/S, chip, menu item */ --comp-icon-size-md: 24px; /* button M, icon button, app bar, nav, card */ --comp-icon-size-lg: 28px; /* medium FAB, button L */ --comp-icon-size-xl: 32px; /* large FAB, button XL */ /* Touch target minimum (a11y) */ --comp-touch-target: 48px; } /* ============================================================ * §10 Semantic aliases (prompt-v2 §8.1) * * Sit between sys tokens and component CSS. Components prefer * aliases first; sys tokens only as fallback. All aliases * reference var(--md-sys-color-*) directly — never rgb() wrap. * ============================================================ */ :root { /* --- Surface roles (by use, not by M3 name) --- */ --site-bg: var(--md-sys-color-background); --feed-bg: var(--md-sys-color-surface-container-lowest); --card-bg: var(--md-sys-color-surface-container); --card-bg-hover: var(--md-sys-color-surface-container-high); --modal-bg: var(--md-sys-color-surface-container-high); /* --- Navigation roles --- */ --nav-rail-bg: var(--md-sys-color-surface); /* collapsed standalone */ --nav-rail-bg-modal: var(--md-sys-color-surface-container); /* expanded modal */ --nav-bar-bg: var(--md-sys-color-surface-container); --nav-item-active: var(--md-sys-color-secondary-container); --nav-on-item-active: var(--md-sys-color-on-secondary-container); /* --- Action roles --- */ --action-primary-bg: var(--md-sys-color-primary); --action-primary-fg: var(--md-sys-color-on-primary); --action-secondary-bg: var(--md-sys-color-secondary-container); --action-secondary-fg: var(--md-sys-color-on-secondary-container); } /* ============================================================ * §11 Layout tokens (prompt-v2 §9) * * Replaces Phase-1's hardcoded 640/320. Templates may override * any of these in a more specific selector. * ============================================================ */ :root { --layout-content-max: 640px; /* feed surface, articles */ --layout-rail-width: 96px; /* collapsed nav rail */ --layout-rail-narrow: 80px; /* narrow rail variant */ --layout-rail-expanded: 220px; /* expanded rail min-width */ --layout-rail-expanded-max: 360px; --layout-feed-max: 640px; /* feed timeline */ --layout-aside-max: 320px; /* right column on wide layout */ --layout-modal-max: 560px; /* basic dialog */ --layout-bottom-sheet-max: 640px; }