/* ============================================================================= EKM Portal — shared UI primitives (opt-in, namespaced) UI/UX PR 5 + follow-up + PR 6 + PR 9 + PR 10 + PR 11 ----------------------------------------------------------------------------- Direction: "Elegant Inset" — restrained, professional, subtly dimensional. Every rule in this file is scoped to the .eui- namespace: selectors start with .eui- (optionally under html[data-dark]); the two token blocks (:root and html[data-dark]) declare ONLY --eui-* custom properties. Nothing here targets button, input, .btn*, .modal or any other existing class, so the file has zero effect on the portal until a class below is applied explicitly. Tokens: surfaces/ink come from the runtime theme contract (--c-*) so every preset and dark mode work automatically; radius / type / motion / focus come from the canonical tokens in index.html :root; danger uses the --status-danger triad plus the light/dark-safe --status-danger-ink text tokens (UI/UX PR 1). Primary is the approved Warm Bronze / Taupe direction and is intentionally independent of --c-accent (see the token block below). ============================================================================= */ /* ---- tokens: primary (Warm Bronze / Taupe) -------------------------------------- Derived, not copied, from the mockup: hue kept from the portal gold family (--wf-gold #c9a86c / Modern EKM #D6B06B ≈ 35–39°), saturation eased to ~30% (understated, never orange/metallic), lightness set so the paper ink used by textOn() (#F5F3EF) clears WCAG AA 4.5:1 on the default AND hover face. Light face vs. every light theme background ≥ 5:1 (component contrast ≥ 3:1). Dark surfaces get a lighter bronze face with textOn() ink (#1A1A1A), the same ink/paper flip the portal already applies to accent buttons in dark mode. UI/UX PR 9 — surface treatment. The primary face is no longer one flat colour: applyTheme() writes the employee's accent family onto the root as --eui-primary-face-start / -mid / -end three vertical stops (top → bottom) --eui-primary-face-band / -low PR 11: optional highlight band (18%) and lower body (78%) stops — Premium metals author them; other families get the interpolated points so they render unchanged --eui-primary-border hairline (explicit per family) --eui-primary-highlight / -depth alpha of the inset top light / bottom line --eui-primary-edge PR 11: alpha of the reflected light just above the bottom line --eui-primary-lift / -sink alpha of the hover (white) / pressed (black) veil The values below are Warm Bronze (the default family) so the shell paints correctly before the runtime runs. The veils are inset box-shadows (already in the motion contract) so hover/pressed still ease over --motion-fast and disabled / focus-visible keep winning by specificity exactly as before. */ :root{ --eui-primary-bg:#715A3D; --eui-primary-fg:#F5F3EF; --eui-primary-face-start:#7B6242; --eui-primary-face-mid:#715A3D; --eui-primary-face-end:#5D4A32; --eui-primary-face-band:#785F40; --eui-primary-face-low:#665137; --eui-primary-border:#5A4831; --eui-primary-highlight:.20; --eui-primary-depth:.12; --eui-primary-edge:0; --eui-primary-lift:.05; --eui-primary-sink:.10; --eui-primary-face:linear-gradient(180deg, var(--eui-primary-face-start, var(--eui-primary-bg)) 0%, var(--eui-primary-face-band, var(--eui-primary-face-start, var(--eui-primary-bg))) 18%, var(--eui-primary-face-mid, var(--eui-primary-bg)) 52%, var(--eui-primary-face-low, var(--eui-primary-face-end, var(--eui-primary-bg))) 78%, var(--eui-primary-face-end, var(--eui-primary-bg)) 100%); } html[data-dark]{ --eui-primary-bg:#B79466; --eui-primary-fg:#1A1A1A; --eui-primary-face-start:#C1A37B; --eui-primary-face-mid:#B79466; --eui-primary-face-end:#B48F5F; --eui-primary-face-band:#BE9E74; --eui-primary-face-low:#B59162; --eui-primary-border:#846B49; --eui-primary-highlight:.16; --eui-primary-depth:.30; --eui-primary-edge:0; --eui-primary-lift:.08; --eui-primary-sink:.08; } /* ---- base: the shared system owns every dimension and type property -------------- Explicit on purpose (not inherited) so a host container's button rules or the UA control font can never skew a .eui-btn: font family/size/weight, line-height, control height, horizontal padding (vertical centring comes from flex + min-height), radius, margin and appearance are all set here. */ .eui-btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2,0.5rem); box-sizing:border-box;margin:0;min-height:var(--pds-btn-height-md,36px);height:auto; padding:0 var(--space-4,1rem); border:1px solid transparent;border-radius:var(--radius-control,8px); font-family:var(--font-ui,'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif); font-size:var(--type-body-sm,0.8125rem);font-weight:500;line-height:1.2;letter-spacing:0; text-transform:none;text-align:center;text-decoration:none;white-space:nowrap;vertical-align:middle; cursor:pointer;user-select:none;-webkit-appearance:none;appearance:none; transition:background-color var(--motion-fast,120ms) var(--motion-ease,ease), border-color var(--motion-fast,120ms) var(--motion-ease,ease), box-shadow var(--motion-fast,120ms) var(--motion-ease,ease), color var(--motion-fast,120ms) var(--motion-ease,ease); } .eui-btn--sm{min-height:var(--pds-btn-height-sm,32px);padding:0 var(--space-3,0.75rem);font-size:var(--type-caption,0.75rem)} /* Keyboard focus: same ring contract as the rest of the portal (never removed). */ .eui-btn:focus-visible{ outline:none; box-shadow:var(--focus-ring,0 0 0 2px var(--c-bg,#fff),0 0 0 4px var(--c-accent,#9c9a93)); } /* ---- primary: family face, gentle inset depth ------------------------------------ background = the three-stop face over the flat token (fallback); the box-shadow stack is [top highlight, bottom depth line, full-face veil, drop]. The veil is transparent at rest, white (--eui-primary-lift) on hover, black (--eui-primary-sink) when pressed — a tonal shift of the *same* face, never a second colour. */ .eui-btn--primary{ background:var(--eui-primary-face,var(--eui-primary-bg,#715A3D)); background-color:var(--eui-primary-bg,#715A3D); color:var(--eui-primary-fg,#F5F3EF); border-color:var(--eui-primary-border,#5A4831); box-shadow:inset 0 1px 0 0 rgba(255,255,255,var(--eui-primary-highlight,.14)), inset 0 -1px 0 0 rgba(0,0,0,var(--eui-primary-depth,.12)), inset 0 -2px 0 0 rgba(255,255,255,var(--eui-primary-edge,0)), inset 0 0 0 999px rgba(255,255,255,0), 0 1px 1px rgba(0,0,0,.08); } .eui-btn--primary:hover{ box-shadow:inset 0 1px 0 0 rgba(255,255,255,var(--eui-primary-highlight,.14)), inset 0 -1px 0 0 rgba(0,0,0,var(--eui-primary-depth,.12)), inset 0 -2px 0 0 rgba(255,255,255,var(--eui-primary-edge,0)), inset 0 0 0 999px rgba(255,255,255,var(--eui-primary-lift,.08)), 0 1px 1px rgba(0,0,0,.08); } .eui-btn--primary:active{ box-shadow:inset 0 2px 3px rgba(0,0,0,.22), inset 0 -2px 0 0 rgba(255,255,255,var(--eui-primary-edge,0)), inset 0 0 0 999px rgba(0,0,0,var(--eui-primary-sink,.10)); } /* ---- secondary: quiet surface, hairline border ------------------------------- */ .eui-btn--secondary{ background:var(--c-box,rgba(127,127,127,.06));color:var(--c-ink,#1C1814); border-color:var(--c-box-border,rgba(127,127,127,.35)); box-shadow:inset 0 1px 0 0 rgba(255,255,255,.45),0 1px 1px rgba(0,0,0,.05); } .eui-btn--secondary:hover{background:color-mix(in srgb, var(--c-box,#fff) 92%, var(--c-ink,#000))} .eui-btn--secondary:active{ background:color-mix(in srgb, var(--c-box,#fff) 86%, var(--c-ink,#000)); box-shadow:inset 0 2px 3px rgba(0,0,0,.12); } /* ---- danger: tinted, clearly separate, never neon ----------------------------- */ .eui-btn--danger{ /* text is darkened 25% toward black so it clears 4.5:1 over the tint on every light theme (the bare ink token was tuned for plain surfaces) */ background:var(--status-danger-bg,rgba(192,73,47,.12));color:color-mix(in srgb, var(--status-danger-ink,#AC412A) 75%, rgba(0,0,0,1)); border-color:var(--status-danger-border,rgba(192,73,47,.28)); box-shadow:inset 0 1px 0 0 rgba(255,255,255,.35),0 1px 1px rgba(0,0,0,.05); } .eui-btn--danger:hover{background:color-mix(in srgb, var(--status-danger,#C0492F) 16%, transparent)} .eui-btn--danger:active{ background:color-mix(in srgb, var(--status-danger,#C0492F) 20%, transparent); box-shadow:inset 0 2px 3px rgba(0,0,0,.12); } /* ---- ghost: text-only, surfaces on hover ------------------------------------- */ .eui-btn--ghost{background:transparent;color:var(--c-ink,#1C1814);border-color:transparent;box-shadow:none} .eui-btn--ghost:hover{background:var(--c-box,rgba(127,127,127,.08));border-color:var(--c-box-border,transparent)} .eui-btn--ghost:active{background:color-mix(in srgb, var(--c-ink,#000) 10%, transparent)} /* ---- disabled: flat, muted, no depth — not opacity-only --------------------- */ .eui-btn:disabled,.eui-btn[aria-disabled="true"]{ background:var(--c-box,rgba(127,127,127,.06));color:var(--c-muted,#5A5248); border-color:var(--c-box-border,rgba(127,127,127,.35));border-style:dashed; box-shadow:none;cursor:not-allowed;pointer-events:none; } /* ---- dark surfaces: softer highlights, deeper insets -------------------------- */ html[data-dark] .eui-btn--primary{ box-shadow:inset 0 1px 0 0 rgba(255,255,255,var(--eui-primary-highlight,.12)), inset 0 -1px 0 0 rgba(0,0,0,var(--eui-primary-depth,.22)), inset 0 -2px 0 0 rgba(255,255,255,var(--eui-primary-edge,0)), inset 0 0 0 999px rgba(255,255,255,0), 0 1px 2px rgba(0,0,0,.35); } html[data-dark] .eui-btn--primary:hover{ box-shadow:inset 0 1px 0 0 rgba(255,255,255,var(--eui-primary-highlight,.12)), inset 0 -1px 0 0 rgba(0,0,0,var(--eui-primary-depth,.22)), inset 0 -2px 0 0 rgba(255,255,255,var(--eui-primary-edge,0)), inset 0 0 0 999px rgba(255,255,255,var(--eui-primary-lift,.08)), 0 1px 2px rgba(0,0,0,.35); } html[data-dark] .eui-btn--primary:active{ box-shadow:inset 0 2px 4px rgba(0,0,0,.40), inset 0 -2px 0 0 rgba(255,255,255,var(--eui-primary-edge,0)), inset 0 0 0 999px rgba(0,0,0,var(--eui-primary-sink,.10)); } html[data-dark] .eui-btn--secondary{box-shadow:inset 0 1px 0 0 rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.35)} html[data-dark] .eui-btn--secondary:hover{background:color-mix(in srgb, var(--c-box,#171A20) 88%, rgba(255,255,255,1))} html[data-dark] .eui-btn--secondary:active{background:color-mix(in srgb, var(--c-box,#171A20) 80%, rgba(255,255,255,1));box-shadow:inset 0 2px 4px rgba(0,0,0,.45)} html[data-dark] .eui-btn--danger{ color:color-mix(in srgb, var(--status-danger-ink,#DB7F6B) 75%, rgba(255,255,255,1)); background:color-mix(in srgb, var(--status-danger,#C0492F) 18%, transparent); border-color:color-mix(in srgb, var(--status-danger,#C0492F) 45%, transparent); box-shadow:inset 0 1px 0 0 rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.35); } html[data-dark] .eui-btn--danger:hover{background:color-mix(in srgb, var(--status-danger,#C0492F) 24%, transparent)} html[data-dark] .eui-btn--danger:active{background:color-mix(in srgb, var(--status-danger,#C0492F) 30%, transparent);box-shadow:inset 0 2px 4px rgba(0,0,0,.45)} /* disabled must win over the dark-surface variant rules above (same specificity tier) */ html[data-dark] .eui-btn:disabled,html[data-dark] .eui-btn[aria-disabled="true"]{ background:var(--c-box,#171A20);color:var(--c-muted,#858B96);border-color:var(--c-box-border,rgba(255,255,255,.12));box-shadow:none; } html[data-dark] .eui-btn--ghost:hover{background:color-mix(in srgb, var(--c-ink,#fff) 8%, transparent)} html[data-dark] .eui-btn--ghost:active{background:color-mix(in srgb, var(--c-ink,#fff) 14%, transparent)} /* ---- accent family swatches (Settings → Appearance, UI/UX PR 6) ---------------- Compact radio-style chips: two-tone preview (light face | dark face — since UI/UX PR 9 each half is the family's treated primary face, set inline by renderAccentFamilySection), the family name, and an explicit selected state. Same tokens and focus ring as the buttons above; no pills, no animation. */ .eui-swatch-row{display:flex;flex-wrap:wrap;gap:var(--space-2,0.5rem)} /* UI/UX PR 8: three labelled rows (Classic / Professional / Premium) keep 13 swatches scannable */ .eui-swatch-group{margin-top:var(--space-3,0.75rem)} .eui-swatch-group:first-child{margin-top:0} .eui-swatch-group__label{display:block;margin:0 0 6px;font-family:var(--font-ui,'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif);font-size:var(--type-eyebrow,0.6875rem);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted,#5A5248)} .eui-swatch{ display:inline-flex;align-items:center;gap:10px;box-sizing:border-box;margin:0; min-height:var(--pds-btn-height-md,36px);padding:0 var(--space-3,0.75rem) 0 6px; border:1px solid var(--c-box-border,rgba(127,127,127,.35));border-radius:var(--radius-control,8px); background:var(--c-box,rgba(127,127,127,.06));color:var(--c-ink,#1C1814); font-family:var(--font-ui,'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif); font-size:var(--type-body-sm,0.8125rem);font-weight:500;line-height:1.2;letter-spacing:0;text-align:left; cursor:pointer;user-select:none;-webkit-appearance:none;appearance:none; transition:border-color var(--motion-fast,120ms) var(--motion-ease,ease),box-shadow var(--motion-fast,120ms) var(--motion-ease,ease); } .eui-swatch:hover{border-color:color-mix(in srgb, var(--c-ink,#000) 35%, var(--c-box-border,#ccc))} .eui-swatch:focus-visible{outline:none;box-shadow:var(--focus-ring,0 0 0 2px var(--c-bg,#fff),0 0 0 4px var(--c-accent,#9c9a93))} .eui-swatch[aria-checked="true"]{border-color:var(--c-ink,#1C1814);box-shadow:inset 0 0 0 1px var(--c-ink,#1C1814)} .eui-swatch__chip{display:inline-flex;overflow:hidden;width:24px;height:24px;flex:0 0 auto;border-radius:calc(var(--radius-control,8px) - 2px);border:1px solid rgba(0,0,0,.18)} .eui-swatch__half{flex:1 1 0;display:block} .eui-swatch__check{display:none;color:var(--c-ink,#1C1814);font-size:var(--type-caption,0.75rem)} .eui-swatch[aria-checked="true"] .eui-swatch__check{display:inline} html[data-dark] .eui-swatch__chip{border-color:rgba(255,255,255,.18)} html[data-dark] .eui-swatch[aria-checked="true"]{border-color:var(--c-ink,#F5F3EE);box-shadow:inset 0 0 0 1px var(--c-ink,#F5F3EE)} /* ---- status badge (UI/UX PR 10) --------------------------------------------------- Shared, opt-in semantic status primitive. Meaning is carried by the visible label; colour is a fixed semantic cue that never derives from the employee accent family: --success approved / complete green (--status-success-*) --pending awaiting / needs attention amber (--status-warning-*) --danger denied / failed red (--status-danger-*) --neutral cancelled / inactive gray (--status-muted-*) --info informational blue (--status-info-*) Compact, modest radius, subtle 12% tint, hairline 28% border, no icon, no shadow, no gradient. Text = the PR 1 text-safe ink pulled 20% toward black (light) / 15% toward white (dark) so it clears WCAG AA 4.5:1 over the tint on every theme surface (the bare ink was tuned for plain surfaces). Nothing here targets .badge / .chip / .pill. */ .eui-status{ display:inline-flex;align-items:center;gap:4px;box-sizing:border-box;margin:0; min-height:20px;padding:0 7px; border:1px solid var(--c-box-border,rgba(127,127,127,.35));border-radius:calc(var(--radius-control,8px) - 3px); background:var(--c-box,rgba(127,127,127,.06));color:var(--c-ink,#1C1814); font-family:var(--font-ui,'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif); font-size:var(--type-caption,0.75rem);font-weight:600;line-height:1.2;letter-spacing:.01em; text-transform:none;white-space:nowrap;vertical-align:middle; } .eui-status--success{background:var(--status-success-bg,rgba(59,145,104,.12));border-color:var(--status-success-border,rgba(59,145,104,.28));color:color-mix(in srgb, var(--status-success-ink,#2E7051) 80%, rgba(0,0,0,1))} .eui-status--pending{background:var(--status-warning-bg,rgba(217,163,74,.12));border-color:var(--status-warning-border,rgba(217,163,74,.28));color:color-mix(in srgb, var(--status-warning-ink,#855D1C) 80%, rgba(0,0,0,1))} .eui-status--danger{background:var(--status-danger-bg,rgba(192,73,47,.12));border-color:var(--status-danger-border,rgba(192,73,47,.28));color:color-mix(in srgb, var(--status-danger-ink,#AC412A) 80%, rgba(0,0,0,1))} .eui-status--neutral{background:var(--status-muted-bg,rgba(154,150,142,.12));border-color:color-mix(in srgb, var(--status-muted,#9A968E) 28%, transparent);color:color-mix(in srgb, var(--status-muted-ink,#68645D) 80%, rgba(0,0,0,1))} .eui-status--info{background:var(--status-info-bg,rgba(93,135,216,.12));border-color:var(--status-info-border,rgba(93,135,216,.28));color:color-mix(in srgb, var(--status-info-ink,#2E60BF) 80%, rgba(0,0,0,1))} /* dark surfaces: the same tints and borders; text = the dark-safe ink pulled toward white */ html[data-dark] .eui-status--success{color:color-mix(in srgb, var(--status-success-ink,#45A979) 85%, rgba(255,255,255,1))} html[data-dark] .eui-status--pending{color:color-mix(in srgb, var(--status-warning-ink,#D9A34A) 85%, rgba(255,255,255,1))} html[data-dark] .eui-status--danger{color:color-mix(in srgb, var(--status-danger-ink,#DB7F6B) 85%, rgba(255,255,255,1))} html[data-dark] .eui-status--neutral{color:color-mix(in srgb, var(--status-muted-ink,#9B978F) 85%, rgba(255,255,255,1))} html[data-dark] .eui-status--info{color:color-mix(in srgb, var(--status-info-ink,#7498DD) 85%, rgba(255,255,255,1))} /* ---- drawer (UI/UX PR 13b) ------------------------------------------------------- Shared right-side panel: scrim + panel + head / scrollable body / fixed foot. Generic chrome only — hosts render their own body and footer controls (with .eui-btn). Widths: desktop min(560px,44vw) → ≤1024 min(520px,60vw) → ≤720 a full-screen sheet. Surfaces and ink come from the runtime theme contract, so light / dark / every accent family work without a family-specific rule. Focus, trap, Escape and focus restoration live in js/ekm-ui-drawer.js. */ .eui-drawer-overlay{position:fixed;inset:0;z-index:205;display:flex;justify-content:flex-end;background:rgba(28,24,20,.28);opacity:0;transition:opacity 160ms ease} .eui-drawer-overlay.is-open{opacity:1} html[data-dark] .eui-drawer-overlay{background:rgba(0,0,0,.55)} .eui-drawer{position:relative;width:min(560px,44vw);min-width:360px;max-width:100vw;height:100%;display:flex;flex-direction:column;min-height:0;background:var(--surface-card,var(--c-box));color:var(--c-ink);border-left:0.5px solid var(--stroke-subtle,var(--c-box-border));box-shadow:-12px 0 40px rgba(0,0,0,.16);outline:none;transform:translateX(24px);transition:transform 160ms ease;font-family:var(--font-ui,inherit)} .eui-drawer-overlay.is-open .eui-drawer{transform:none} .eui-drawer__head{flex-shrink:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-1,.25rem) var(--space-3,.75rem);align-items:start;padding:var(--space-5,1.25rem) var(--space-6,1.5rem) var(--space-4,1rem);border-bottom:0.5px solid var(--c-box-border)} .eui-drawer__eyebrow{grid-column:1;font-size:var(--type-eyebrow,0.6875rem);font-weight:600;letter-spacing:var(--type-eyebrow-tracking,.12em);text-transform:uppercase;color:var(--c-muted)} .eui-drawer__title{grid-column:1;margin:0;font-family:var(--font-display);font-weight:var(--font-weight-display,400);font-size:clamp(1.25rem,1.6vw,1.5rem);line-height:1.2;letter-spacing:.01em;color:var(--hp-head,var(--c-ink));overflow-wrap:anywhere} .eui-drawer__sub{grid-column:1;font-size:var(--type-caption,0.75rem);color:var(--c-muted2,var(--c-muted));line-height:1.45} .eui-drawer__close{grid-column:2;grid-row:1 / span 3;align-self:start;appearance:none;width:32px;height:32px;padding:0;border-radius:var(--radius-control,8px);border:0.5px solid transparent;background:transparent;color:var(--c-muted);font-size:1.25rem;line-height:1;cursor:pointer;font-family:inherit} .eui-drawer__close:hover{background:var(--c-bg);color:var(--c-ink);border-color:var(--c-box-border)} .eui-drawer__close:focus-visible{outline:none;box-shadow:var(--focus-ring)} .eui-drawer__body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:var(--space-5,1.25rem) var(--space-6,1.5rem);-webkit-overflow-scrolling:touch} .eui-drawer__foot{flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:var(--space-2,.5rem);padding:var(--space-4,1rem) var(--space-6,1.5rem);border-top:0.5px solid var(--c-box-border);background:var(--surface-card,var(--c-box))} .eui-drawer__foot-aside{margin-right:auto;display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2,.5rem)} @media (max-width:1024px){.eui-drawer{width:min(520px,60vw);min-width:320px}} @media (max-width:720px){.eui-drawer-overlay{justify-content:stretch}.eui-drawer{width:100vw;min-width:0;border-left:0;box-shadow:none;transform:translateY(16px)}.eui-drawer-overlay.is-open .eui-drawer{transform:none}.eui-drawer__head{padding:var(--space-4,1rem) var(--space-4,1rem) var(--space-3,.75rem)}.eui-drawer__body{padding:var(--space-4,1rem)}.eui-drawer__foot{padding:var(--space-3,.75rem) var(--space-4,1rem) calc(var(--space-3,.75rem) + env(safe-area-inset-bottom,0px))}} @media (prefers-reduced-motion:reduce){.eui-drawer-overlay,.eui-drawer{transition:none}}