/* ============================================================================= MYKA DESIGN SYSTEM — CANONICAL COMPONENT LAYER ============================================================================= Implements docs/ui/MYKA_DESIGN_SYSTEM.md. This file is the component library referenced by MYKA_DESIGN_SYSTEM.md §27. Every list page and every modal in the ERP is assembled from these classes. Pages MUST NOT restyle them and MUST NOT introduce their own colour, spacing, radius or shadow values (§0.3, §28.1). NAMESPACE --------- All classes and tokens use the `mds-` / `--mds-` prefix. Why a new namespace instead of editing the existing --erp-* registry: MYKA_DESIGN_SYSTEM.md §2.1 forbids removing or redefining a published token, because tokens are a public API consumed by screens nobody is currently looking at. The existing --erp-* values (radius 6px, spacing 4/8/12/16/24) do not match the standard's scale, so redefining them would silently reshape every screen in the product. Instead this layer: - derives Tier-2 semantic tokens FROM the existing --erp-* primitives, so light/dark theming and any future rebrand keep working through one file; - adds the Tier-3 component tokens the standard requires but the registry does not yet have (density, z-scale, focus ring, motion). The result is additive: linking this file changes nothing on a page that does not use `mds-` classes. LOAD ORDER ---------- head.php loads: styles.css -> custom.css -> modern-theme.css -> brand-theme.css This file is page CSS and is linked AFTER those, from the view. DENSITY ------- Set data-mds-density="comfortable|standard|compact" on or on any container. Default is standard (§2.8). ============================================================================= */ /* ============================================================================= 1. TOKENS ============================================================================= */ :root { /* ---- Tier 2: semantic surfaces (derived from the --erp-* primitives) ---- */ --mds-bg-canvas: var(--erp-bg-page, #F8F8F9); --mds-bg-surface: var(--erp-bg-card, #ffffff); --mds-bg-raised: var(--erp-bg-card, #ffffff); --mds-bg-sunken: var(--erp-bg-hover, #F8F8F9); --mds-bg-hover: rgba(23, 25, 30, 0.035); --mds-bg-selected: var(--erp-accent-soft, rgba(214, 69, 47, 0.10)); --mds-bg-disabled: var(--erp-bg-hover, #F8F8F9); /* ---- Tier 2: text ---- */ --mds-text-primary: var(--erp-text-primary, #1F2126); --mds-text-secondary: var(--erp-text-muted, #6B6F78); --mds-text-tertiary: var(--erp-text-light, #9A9DA6); --mds-text-disabled: var(--erp-text-light, #9A9DA6); --mds-text-inverse: #ffffff; --mds-text-link: var(--erp-primary, #17191E); /* ---- Tier 2: structure ---- */ --mds-border: var(--erp-border, #E5E5E9); --mds-border-strong: var(--erp-border-hover, #D3D3D8); --mds-border-subtle: rgba(23, 25, 30, 0.06); /* ---- Tier 2: accent (single product accent, §2.2.1) ---- */ --mds-accent: var(--erp-accent, #D6452F); --mds-accent-hover: var(--erp-accent-hover, #B3341F); --mds-accent-active: #932A18; --mds-accent-subtle: var(--erp-accent-soft, rgba(214, 69, 47, 0.10)); --mds-accent-border: var(--erp-accent-border, rgba(214, 69, 47, 0.25)); --mds-accent-fg: var(--erp-accent-contrast, #ffffff); /* ---- Tier 2: status roles. fg / bg / border for each (§2.2.1) ---- */ --mds-success-fg: var(--erp-success, #059669); --mds-success-bg: var(--erp-success-bg, #d1fae5); --mds-success-border: rgba(5, 150, 105, 0.22); /* Fallback aligned to --erp-warning (#d97706). It previously read #b45309, the value --mds-warning-border is still built from. Because modern-theme.css is global the fallback arm never applied, so #d97706 is — and always was — what actually painted; this records reality rather than changing it. Whether the warning foreground SHOULD be the darker #b45309 that its own border implies is a design decision, logged in FINAL_KNOWN_LIMITATIONS.md. */ --mds-warning-fg: var(--erp-warning, #d97706); --mds-warning-bg: var(--erp-warning-bg, #fef3c7); --mds-warning-border: rgba(180, 83, 9, 0.22); --mds-danger-fg: var(--erp-danger, #dc2626); --mds-danger-bg: var(--erp-danger-bg, #fee2e2); --mds-danger-border: rgba(220, 38, 38, 0.22); --mds-info-fg: #1d4ed8; --mds-info-bg: #eaf0fb; --mds-info-border: rgba(29, 78, 216, 0.18); --mds-neutral-fg: var(--erp-text-muted, #6B6F78); --mds-neutral-bg: rgba(23, 25, 30, 0.055); --mds-neutral-border: rgba(23, 25, 30, 0.10); /* ---- Tier 2: typography (§2.3.2) ---- */ --mds-font-sans: var(--erp-font-sans, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif); --mds-font-mono: var(--erp-font-mono, ui-monospace, Consolas, monospace); --mds-fs-display: 1.5rem; /* 24px — KPI hero only */ --mds-fs-h1: 1.25rem; /* 20px — page title */ --mds-fs-h2: 1rem; /* 16px — card / modal title */ --mds-fs-h3: 0.875rem; /* 14px — form section title */ --mds-fs-body: 0.875rem; /* 14px — default, input values */ --mds-fs-data: 0.8125rem; /* 13px — table cells */ --mds-fs-label: 0.75rem; /* 12px — column heads, field labels */ --mds-fs-caption: 0.6875rem; /* 11px — timestamps, helper text */ --mds-lh-h1: 1.4; --mds-lh-body: 1.43; --mds-lh-data: 1.38; --mds-fw-normal: 400; --mds-fw-medium: 500; --mds-fw-semibold: 600; /* ---- Tier 2: 4px spacing grid (§2.4) ---- */ --mds-space-1: 2px; --mds-space-2: 4px; --mds-space-3: 8px; --mds-space-4: 12px; --mds-space-5: 16px; --mds-space-6: 20px; --mds-space-7: 24px; --mds-space-8: 32px; --mds-space-9: 40px; --mds-space-10: 48px; /* ---- Tier 2: radius (§2.5). Deliberately small — large radii cost density */ --mds-radius-sm: 3px; --mds-radius-md: 6px; --mds-radius-lg: 8px; --mds-radius-pill: 999px; /* ---- Tier 2: elevation. Depth == dismissibility (§2.5) ---- */ --mds-shadow-0: none; --mds-shadow-1: 0 2px 6px rgba(23, 25, 30, 0.08); --mds-shadow-2: 0 4px 12px rgba(23, 25, 30, 0.10); --mds-shadow-3: 0 12px 32px rgba(23, 25, 30, 0.16); --mds-shadow-4: 0 16px 40px rgba(23, 25, 30, 0.20); /* ---- Tier 2: z-index scale (§2.5). No arbitrary values anywhere ---- */ --mds-z-sticky: 100; --mds-z-header: 200; --mds-z-dropdown: 1000; --mds-z-backdrop: 1040; --mds-z-modal: 1050; --mds-z-popover: 1060; --mds-z-toast: 1080; --mds-z-tooltip: 1090; /* ---- Tier 2: motion (§2.7). Nothing exceeds 240ms ---- */ --mds-duration-fast: 120ms; --mds-duration-base: 180ms; --mds-ease-out: cubic-bezier(0.16, 0.84, 0.44, 1); /* ---- Focus ring (§23.4). 2px, offset 2px, never removed ---- */ --mds-focus-ring: 0 0 0 2px var(--mds-bg-surface), 0 0 0 4px var(--mds-accent); /* ---- Tier 3: component tokens, STANDARD density (§2.8 default) ---- */ --mds-row-h: 36px; --mds-control-h: 32px; --mds-cell-pad-y: 8px; --mds-cell-pad-x: 12px; --mds-fs-cell: var(--mds-fs-data); --mds-badge-h: 20px; } /* Density: comfortable */ [data-mds-density="comfortable"] { --mds-row-h: 44px; --mds-control-h: 40px; --mds-cell-pad-y: 12px; --mds-cell-pad-x: 16px; --mds-fs-cell: var(--mds-fs-body); --mds-badge-h: 22px; } /* Density: compact */ [data-mds-density="compact"] { --mds-row-h: 30px; --mds-control-h: 28px; --mds-cell-pad-y: 6px; --mds-cell-pad-x: 10px; --mds-fs-cell: var(--mds-fs-label); --mds-badge-h: 18px; } /* Coarse pointers get comfortable targets automatically (§22.3, §23.5) */ @media (pointer: coarse) { :root { --mds-row-h: 44px; --mds-control-h: 40px; } } /* Dark theme: re-derive rather than alpha-blend (§2.2.2) */ [data-bs-theme="dark"] { --mds-bg-hover: rgba(255, 255, 255, 0.045); --mds-border-subtle: rgba(255, 255, 255, 0.07); --mds-info-fg: #93c5fd; --mds-info-bg: rgba(59, 130, 246, 0.16); --mds-info-border: rgba(147, 197, 253, 0.28); --mds-neutral-bg: rgba(255, 255, 255, 0.06); --mds-neutral-border: rgba(255, 255, 255, 0.12); --mds-success-border: rgba(52, 211, 153, 0.28); --mds-warning-border: rgba(251, 191, 36, 0.28); --mds-danger-border: rgba(248, 113, 113, 0.28); --mds-shadow-1: 0 2px 6px rgba(0, 0, 0, 0.40); --mds-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45); --mds-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.55); --mds-shadow-4: 0 16px 40px rgba(0, 0, 0, 0.60); } /* ============================================================================= 2. PAGE SHELL (§3.1) ============================================================================= */ .mds-page { display: flex; flex-direction: column; min-height: calc(100dvh - var(--mds-shell-offset, 60px)); padding: 0; font-family: var(--mds-font-sans); color: var(--mds-text-primary); background: var(--mds-bg-canvas); } /* ----------------------------------------------------------------------------- BOUNDED CONTENT SCROLL — .mds-page--fill ----------------------------------------------------------------------------- Opt-in layout for List pages, where the DATA is the only thing that scrolls. Why this exists rather than letting the document scroll: A wide table needs `overflow-x: auto` on its container. CSS then computes `overflow-y` to `auto` as well — there is no way to have one axis scrollable and the other visible. That silently turns the table container into a scroll container, which means `position: sticky` on `thead` sticks to the top of the CONTAINER, not the viewport. If the document is what actually scrolls, the container scrolls away and takes the "sticky" header with it: the header is gone by row 20, which is precisely the failure §9.4 exists to prevent. The fix is to make the table container the page's single scroll region, and to pin the header, toolbar, filter bar and pagination outside it. Then: - §3.2 holds: exactly one vertical scroll region. - §9.4 holds: the column header is genuinely always visible. - §9.10 holds: the totals footer is genuinely sticky to the table's bottom. - §10.2 holds: "Showing X-Y of N" never scrolls out of reach. --mds-shell-offset is the height of everything above .mds-page (the app topbar and any wrapper padding). The page script measures it at runtime and sets it on the element, because that chrome differs between shells; the 60px default is only what applies before script runs. -------------------------------------------------------------------------- */ .mds-page--fill { height: calc(100dvh - var(--mds-shell-offset, 60px)); min-height: 0; overflow: hidden; } /* The min-height:0 on every link of the chain is required: a flex item's default min-height is auto, which refuses to shrink below its content and would push the scroll region past the bottom of the screen. */ .mds-page--fill .mds-page-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-bottom: var(--mds-space-4); } /* A flex chain is only as long as its links: EVERY element between the card and .mds-table-scroll must itself be a column flex container that is allowed to shrink, or the bounded height stops there. This rule was originally written as `.mds-card--table > .mds-list`, which assumed the list partial is a direct child of the card. It is not, and cannot be: every list page injects its AJAX response into a wrapper element (the #ListBody div) so that the skeleton and the result can be swapped. The child combinator stopped at that wrapper, so .mds-list stayed `display: block`, `flex: 1 1 auto` on .mds-table-scroll was inert, the table rendered at its full content height, and .mds-card's `overflow: hidden` clipped it — a list that could not be scrolled at all. The wrapper is therefore matched explicitly. `:not([hidden])` is required: these selectors are more specific than the UA's `[hidden] { display: none }`, so without it the hidden skeleton would be forced back into view. `:not(.mds-print-header)` protects the print-only identification block, which is hidden by a class selector for the same reason. */ .mds-page--fill .mds-card--table, .mds-page--fill .mds-card--table > div:not([hidden]):not(.mds-print-header), .mds-page--fill .mds-card--table .mds-list { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .mds-page--fill .mds-card--table .mds-table-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; } .mds-page--fill .mds-pagination { flex: 0 0 auto; } /* Header, toolbar and filter bar sit outside the scroll region, so they are permanently visible and their sticky positioning becomes a no-op. It is left in place for pages that do not opt into the bounded layout. */ /* The page body must never scroll horizontally (§3.2). Only the table container may, and it does so inside its own overflow box. */ .mds-page, .mds-page > * { max-width: 100%; } /* Standard page gutter (§3.3) */ .mds-page-header, .mds-toolbar, .mds-filterbar, .mds-page-body, .mds-page-footer { padding-left: var(--mds-space-7); padding-right: var(--mds-space-7); } @media (max-width: 1199.98px) { .mds-page-header, .mds-toolbar, .mds-filterbar, .mds-page-body, .mds-page-footer { padding-left: var(--mds-space-5); padding-right: var(--mds-space-5); } } @media (max-width: 767.98px) { .mds-page-header, .mds-toolbar, .mds-filterbar, .mds-page-body, .mds-page-footer { padding-left: var(--mds-space-4); padding-right: var(--mds-space-4); } } .mds-page-body { flex: 1 1 auto; padding-bottom: var(--mds-space-7); } /* ============================================================================= 3. PAGE HEADER (§5) Max 96px including breadcrumb. Sticky. Identity left, actions right. ============================================================================= */ .mds-page-header { position: sticky; top: 0; z-index: var(--mds-z-header); background: var(--mds-bg-surface); border-bottom: 1px solid var(--mds-border); padding-top: var(--mds-space-2); padding-bottom: var(--mds-space-2); } .mds-breadcrumb { display: flex; align-items: center; gap: var(--mds-space-2); margin: 0 0 var(--mds-space-1); padding: 0; list-style: none; font-size: var(--mds-fs-caption); color: var(--mds-text-tertiary); line-height: 16px; } .mds-breadcrumb a { color: var(--mds-text-secondary); text-decoration: none; } .mds-breadcrumb a:hover { color: var(--mds-text-primary); text-decoration: underline; } .mds-breadcrumb-sep { color: var(--mds-text-tertiary); } .mds-breadcrumb [aria-current="page"] { color: var(--mds-text-secondary); } .mds-page-header-row { display: flex; align-items: center; justify-content: space-between; gap: var(--mds-space-5); min-height: 32px; } .mds-page-identity { display: flex; align-items: baseline; gap: var(--mds-space-3); min-width: 0; } .mds-page-title { margin: 0; font-size: var(--mds-fs-h1); font-weight: var(--mds-fw-semibold); line-height: var(--mds-lh-h1); color: var(--mds-text-primary); letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Record count. Must state its scope when filtered (§5.2). */ .mds-page-count { font-size: var(--mds-fs-label); color: var(--mds-text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; } .mds-page-meta { margin: 2px 0 0; font-size: var(--mds-fs-caption); color: var(--mds-text-secondary); line-height: 16px; } /* Page actions. Least-committing left, single primary rightmost (§5.3, §14.3) */ .mds-page-actions { display: flex; align-items: center; gap: var(--mds-space-3); flex: 0 0 auto; } .mds-page-actions-divider { width: 1px; height: 20px; background: var(--mds-border); } /* Unsaved marker (§5.4) */ .mds-unsaved { display: inline-flex; align-items: center; gap: var(--mds-space-2); font-size: var(--mds-fs-caption); font-weight: var(--mds-fw-medium); color: var(--mds-warning-fg); } /* ============================================================================= 4. TOOLBAR (§6) ============================================================================= */ .mds-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--mds-space-5); min-height: 44px; background: var(--mds-bg-surface); border-bottom: 1px solid var(--mds-border); } .mds-toolbar-group { display: flex; align-items: center; gap: var(--mds-space-2); } /* Selection toolbar REPLACES the toolbar in place — it never stacks on top, because an appearing bar pushes the table down and moves the row the user was about to click (§6.3, Law 5). */ .mds-toolbar[hidden], .mds-selection-bar[hidden] { display: none !important; } .mds-selection-bar { display: flex; align-items: center; gap: var(--mds-space-4); min-height: 44px; background: var(--mds-accent-subtle); border-bottom: 1px solid var(--mds-accent-border); } .mds-selection-count { font-size: var(--mds-fs-body); font-weight: var(--mds-fw-semibold); font-variant-numeric: tabular-nums; } /* ============================================================================= 5. FILTER BAR (§7) Row 1: controls. Row 2: applied-filter chips (present only when filtered). Search first and growing; every other control fixed width so that choosing a value never reflows its neighbours (Law 5). ============================================================================= */ .mds-filterbar { background: var(--mds-bg-surface); border-bottom: 1px solid var(--mds-border); padding-top: var(--mds-space-3); padding-bottom: var(--mds-space-3); } .mds-filter-row { display: flex; align-items: center; gap: var(--mds-space-3); flex-wrap: wrap; } .mds-filter-search { position: relative; flex: 1 1 280px; min-width: 220px; max-width: 460px; } .mds-filter-search .mds-input { padding-left: 30px; } .mds-filter-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--mds-text-tertiary); pointer-events: none; } .mds-filter-search-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; display: none; align-items: center; justify-content: center; border: 0; border-radius: var(--mds-radius-sm); background: transparent; color: var(--mds-text-tertiary); cursor: pointer; font-size: 12px; } .mds-filter-search-clear:hover { background: var(--mds-bg-hover); color: var(--mds-text-primary); } .mds-filter-search.is-filled .mds-filter-search-clear { display: inline-flex; } /* Fixed-width filter controls (§7.2) */ .mds-filter-control { flex: 0 0 160px; width: 160px; } [data-mds-density="compact"] .mds-filter-control { flex-basis: 140px; width: 140px; } .mds-filter-spacer { flex: 1 1 auto; min-width: 0; } /* VIEW CONTROLS ON THE FILTER ROW ------------------------------- §6 gives content-shaping controls (density, grouping, view switch) their own toolbar band. That band earns its 44px when it carries bulk actions or a view switcher. On a list that has neither — as most master lists do — a whole horizontal band spent on one