/*! * evident-bootstrap.css — part of Evident, the Cortex design language. * The Bootstrap adapter — load AFTER bootstrap.min.css and evident.css. * * TRANSITIONAL ARTIFACT — SCAFFOLDING, EXPECTED TO BE DELETED. * This adapter exists only to render existing Bootstrap markup as Evident. * It is deleted when the last consumer that links it drops that link and * loads evident.css alone. Nothing may be added here that is not a --bs-* * remap or a documented selector restyle, so its removal can never remove an * Evident behaviour. Deleting it does oblige the last consumer to migrate its * .btn / .card markup to Evident's own .ev-key classes — that cost is real * and was accepted deliberately. Full condition: src/adapter-bootstrap.css. * * Do not edit this file directly — it is generated by build.sh from src/. * Edit the partials under src/ and re-run ./build.sh. * Provenance is the Git commit containing these bytes; consumers record that * commit in .evident-version and use it for cache-busting. * https://evident.sb.cortex.gigahost.dk/ */ /* ===== src/adapter-bootstrap.css ===== */ /* ========================================================================== Evident — the Bootstrap adapter ========================================================================== THIS FILE IS THE HALF THAT MAKES A BOOTSTRAP CONSUMER'S EXISTING MARKUP RENDER AS EVIDENT WITHOUT TOUCHING THE MARKUP. It is loaded ALONGSIDE and AFTER bootstrap.min.css. THE ADAPTER RULE (cortex-m0ss4k9, cortex-lndxpt3): Evident owns the values. The adapter PRIMARILY maps ONE-DIRECTIONALLY onto Bootstrap's own `--bs-*` custom-property API, re-pointing Bootstrap's variables at Evident tokens so Bootstrap's own rules render Evident. Where Bootstrap exposes no variable for required material or geometry, the documented token-based selector restyles below supply that layer. The genuine selector restyles below (`.card { border: 0 }`, the `.rounded-white` / `.rounded-light` scope primitives, the `.btn` shadow stacks, and `.dropdown-item` row relief/current marks) are the deliberate, documented exceptions — the treatments that cannot be expressed purely as a `--bs-*` remap because Bootstrap has no variable for them. Every one is token-based; none introduces a colour literal. END-OF-LIFE — THIS FILE IS SCAFFOLDING (cortex-fifzkjn) ---------------------------------------------------------------------- THIS ARTIFACT IS TRANSITIONAL AND IS EXPECTED TO BE DELETED. It is not permanent architecture. It exists for exactly one reason: to spare a consumer that already ships Bootstrap markup the cost of rewriting that markup before it can render as Evident. `dist/evident.css` is the permanent library; this file is the ramp onto it. THE DELETION CONDITION: this file is removed when the last consumer that links `evident-bootstrap.css` drops that link and loads `evident.css` alone. Deleting it must never require a decision — only a check that the set of such consumers is empty. CURRENT CONSUMERS ARE LIVE GRAPH STATE, NOT DOCUMENTATION. Query the live graph and consumer repositories before deletion; never infer that the set is empty from this artifact. `gigahost/controlcenter` has linked this adapter since commit 544e50b9, but that concrete example is not an authoritative enumeration. `gigahost/nete` links both Evident artifacts in its application and authentication shells as of commit 9420652, so it is a normal Evident consumer and belongs in that live set until those links are removed. The deletion condition above is the rule. WHAT KEEPS THE DELETION CHEAP: nothing may be added to this file that is not a `--bs-* ` remap or one of the documented selector-restyle exceptions named above. Hold that line and removing this file can never remove an Evident behaviour — every value it carries is already stated in `dist/evident.css`, and it only re-points Bootstrap at them. Break it and this file quietly becomes load-bearing, at which point deletion stops being a deletion and turns into archaeology. That is the failure mode this marker exists to prevent. WHAT THE DELETION STILL COSTS — SAY IT OUT LOUD: it is NOT free, and it is not a one-line `link` removal. Evident's public vocabulary is `.ev-key--* ` (settled on cortex-q29li00, option (a): converging on Bootstrap's own single-dash names was considered and DECLINED), while this adapter targets Bootstrap's own `.btn` / `.card` / `.accordion` selectors. So the last consumer to drop this file must also migrate its markup to the `.ev-*` classes. That translation cost was accepted knowingly when the vocabulary was settled; it is not an oversight to be discovered later. The mechanical form of that migration — the 60 exact selector overlaps and their dispositions — is in `docs/controlcenter-cascade-conflicts.md`. There is deliberately no deprecation alias to soften the switch; see README § "Removing a name" and the policy at cortex-qairdc1. LOAD ORDER MATTERS: the var-remap majority is order-independent, but the selector restyles are not — this file must come after bootstrap.min.css. Extracted verbatim (values only; comments condensed) from the verified CC port: tokens.css button scale, layout-base.css accordions, layout-controls.css buttons, layout-surfaces.css planes, layout-theme.css dark mirror. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Bootstrap's GLOBAL --bs-* API, re-pointed at Evident tokens. THIS SECTION IS THE ONE THAT ANSWERS "IT LOOKS TOO DIFFERENT" (cortex-wp0qzvk). Until it was written the adapter declared exactly ONE global remap (--bs-font-monospace) and did all its work in scoped component rules, so every surface those rules did not name kept Bootstrap's own defaults: system-ui type, a #fff page on #212529 ink, #0d6efd primary, #dee2e6 rules. Measured on the v3 station before this section existed, a real Bootstrap page through the adapter failed 24 of 24 fidelity checks on BOTH benches — and the majority of those failures were not a component drawn wrongly, they were Bootstrap simply showing through. A component-by-component adapter cannot fix that class; the global API has to be re-pointed. WHY THE SELECTOR IS NOT PLAIN `:root`, AND THIS IS LOAD-BEARING. A custom property containing var() is substituted at COMPUTED-VALUE TIME on the element that declares it, and the RESULT inherits. So `:root { --bs-body-bg: var(--ev-metal-hi) }` resolves --ev-metal-hi against :root — the LIGHT value — and every descendant inherits that resolved light colour, including one inside a `[data-bs-theme="dark"]` subtree. The dark mirror would silently never apply. Re-declaring on the theme-carrying elements makes each theme scope recompute the whole block against its own token values, so a page that themes on and a page that themes a SUBTREE (a common consumer case, and the way the v3 station stands both benches side by side) both resolve correctly. This is exactly why the scoped component rules in sections 2-8 need no dark restatement — they are declared ON the component, which is already inside the theme scope, so their var() lookups resolve there. Only :root-level declarations have this hazard. -------------------------------------------------------------------------- */ :root, :is([data-ev-theme], [data-bs-theme]) { /* Type — Invariant L5: IBM Plex Sans everywhere, Mono for machine values. */ --bs-font-sans-serif: var(--ev-font-sans); --bs-font-monospace: var(--ev-font-mono); --bs-body-font-family: var(--ev-font-sans); --bs-body-font-size: var(--ev-text-body); --bs-body-line-height: var(--ev-leading-body); --bs-body-font-weight: var(--ev-weight-regular); /* Ground and ink. --ev-bg is the page CANVAS (the graphite bench the whole billet is cut from), not --ev-metal-hi (a raised molded face) — the exact distinction cortex-r3qtun9 had to restore natively. */ --bs-body-bg: var(--ev-bg); --bs-body-color: var(--ev-ink); --bs-emphasis-color: var(--ev-ink); --bs-heading-color: var(--ev-ink); --bs-secondary-color: var(--ev-ink-dim); --bs-tertiary-color: var(--ev-ink-faint); --bs-secondary-bg: var(--ev-floor-n1); --bs-tertiary-bg: var(--ev-floor-n1); /* The one accent. Bootstrap spends `primary` on links, checked controls, progress and every .{text,bg,border}-primary utility, so leaving it at #0d6efd puts a SECOND hue on the page — the thing Invariant L4 forbids outright. The -rgb triple is required as well: Bootstrap's utilities read `rgba(var(--bs-primary-rgb), var(--bs-bg-opacity))` and would otherwise stay blue even with --bs-primary remapped. */ --bs-primary: var(--ev-accent); --bs-primary-rgb: var(--ev-accent-rgb); --bs-primary-text-emphasis: var(--ev-accent-text); --bs-primary-border-subtle: var(--ev-accent-edge); --bs-link-color: var(--ev-accent-text); /* The TRIPLE is the one that actually paints: Bootstrap resolves `a { color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)) }`, so pointing only --bs-link-color at the ink step leaves links on the FACE accent — 1.43:1 on the canvas. Measured on the v3 station: light links came out #2bb3f3 with --bs-link-color already remapped. */ --bs-link-color-rgb: var(--ev-accent-text-rgb); --bs-link-hover-color: var(--ev-accent-text); /* Status faces. Evident's four semantic colours are the sanctioned hue exception (components/badge.css); they are muted anodised stock rather than Bootstrap's saturated web palette, so a consumer's existing .text-bg-danger reads as Evident material instead of a toast. */ --bs-danger: var(--ev-danger); --bs-danger-rgb: var(--ev-danger-rgb); --bs-success: var(--ev-success); --bs-success-rgb: var(--ev-success-rgb); --bs-warning: var(--ev-warning); --bs-warning-rgb: var(--ev-warning-rgb); --bs-info: var(--ev-info); --bs-info-rgb: var(--ev-info-rgb); /* Rules and radii. Bootstrap draws boundaries as 1px borders where Evident draws them as achromatic scribe lines; remapping the colour is what keeps a consumer's un-restyled border from reading as a drawn outline. */ --bs-border-color: var(--ev-rule); --bs-border-color-translucent: var(--ev-rule); --bs-border-radius-sm: var(--ev-radius-sm); --bs-border-radius: var(--ev-radius-md); --bs-border-radius-lg: var(--ev-radius-lg); --bs-border-radius-xl: var(--ev-radius-lg); --bs-border-radius-pill: var(--ev-radius-pill); /* Focus is the accent RING and nothing else (see section 3). */ --bs-focus-ring-color: var(--ev-accent-edge); --bs-focus-ring-width: 2px; --bs-focus-ring-opacity: 1; /* Bootstrap's default code ink is #d63384, a pink outside Evident's licensed channels. Machine values keep Bootstrap's own monospace treatment; only their ink is re-pointed at Evident's existing brand ink channel. Measured on the grounds the consumer harness actually renders: light #064466 is 6.26:1 on --ev-bg #c9c9c9 and 8.77:1 on --ev-metal-hi #ececec; dark #2bb3f3 is 7.95:1 on --ev-bg #111111 and 6.29:1 on --ev-metal-hi #272727. All clear the 4.5:1 text floor. (cortex-nxdcnkg) */ --bs-code-color: var(--ev-accent-text); --bs-highlight-bg: var(--ev-wash); } /* PRIMARY HAS TWO JOBS; THESE TWO UTILITIES ARE THE INK JOB. Bootstrap deliberately derives text-primary and link-primary from the primary FACE triple. Evident cannot move --bs-primary-rgb without also moving .bg-primary, .border-primary, and .btn-primary off their material face, so intercept only the two ink utilities. Preserve Bootstrap's opacity variables and match its !important contract. (cortex-j8p4nro) */ .text-primary { color: rgba(var(--ev-accent-text-rgb), var(--bs-text-opacity)) !important; } .link-primary { color: rgba(var(--ev-accent-text-rgb), var(--bs-link-opacity, 1)) !important; } /* SUBTREE THEMING NEEDS THE INK RE-APPLIED, NOT JUST RE-DECLARED. Bootstrap applies `color: var(--bs-body-color)` exactly once, on `body`; its own `[data-bs-theme]` blocks only redeclare variables. So a page that themes a SUBTREE gets the right variables inside that subtree and the wrong INK, inherited from a body that computed its colour in the other theme. This is Bootstrap's behaviour rather than adapter drift, but a consumer meets it as "the dark panel has black text" either way, so the adapter closes it: one declaration on the theme-carrying element, which every descendant inherits and every component is free to override. Measured on the v3 station — the dark bench resolved --ev-ink #ebebeb and still painted #1f1f1f. */ :is([data-ev-theme], [data-bs-theme]) { color: var(--ev-ink); } /* THE PAGE'S HOIST AND BOOTSTRAP'S POSITIONING UTILITIES TIE, AND THE HOIST WON. --------------------------------------------------------------------------- `.ev-pinstripe > *` (components/pinstripe.css) gives every direct child `position: relative; z-index: 1` so a page's own content sits above the ::before/::after atmosphere layers. That selector is (0,1,0). So is `.fixed-top`. A tie is settled by source order, this file loads after bootstrap.min.css, and the hoist therefore took `position` away from every Bootstrap-positioned direct child of a pinstripe page — silently, because a bar that has stopped being fixed still renders, just in the flow. Nete's app bar was the reported instance: it measured `position: relative` at top 88px, sitting below the strip of padding its shell had reserved for a fixed bar (cortex-oh0w9jt). (0,2,0) settles it on specificity alone, in both directions and regardless of which sheet lands later. No `!important`: the argument is between two ordinary authored rules, and importance would only move it to a level where the next rule along cannot answer at all. WHY THE PINSTRIPE RULE IS NOT SIMPLY NARROWED — the repair a future reader reaches for first, and the one to refuse. `z-index` does not apply to a static box, so the `position: relative` there is precisely what makes the `z-index: 1` beside it mean anything. Delete it, or exclude the positioned utilities from it, and every ORDINARY child of a pinstripe page drops behind the atmosphere layers: one silent defect traded for another, and the second is the common case. The hoist is right; it was only ever missing this exception. POSITION ONLY. `z-index` ties at the same (0,1,0), so a hoisted `.fixed-top` still resolves to 1 rather than Bootstrap's 1030, leaving Bootstrap's own 1000-1055 band able to paint over fixed chrome. That is real, measured, and recorded on cortex-jqumrk8, which owns the stacking scale — a literal invented here would be a second scale competing with it. The family is the one the pinned Bootstrap 5.3.8 actually ships, read out of demos/vendor/bootstrap/bootstrap.min.css rather than assumed: `fixed` has no responsive variants, `sticky` has ten, and each of those is gated by its own min-width. Mirroring them ungated would make a bar sticky at widths Bootstrap never intended, so each is answered inside the matching query. `-webkit-sticky` is deliberately not re-shipped: this restores a property that was taken away, it does not re-declare Bootstrap's prefixed value for an engine era none of our targets are in. This does not make the file load-bearing (see END-OF-LIFE above). Every selector here names a Bootstrap class, so the last consumer to drop this sheet has by definition already migrated off `.fixed-top` and has nothing left for these rules to answer. (cortex-qdg7ose) */ .ev-pinstripe > .fixed-top, .ev-pinstripe > .fixed-bottom { position: fixed; } .ev-pinstripe > .sticky-top, .ev-pinstripe > .sticky-bottom { position: sticky; } @media (min-width: 576px) { .ev-pinstripe > .sticky-sm-top, .ev-pinstripe > .sticky-sm-bottom { position: sticky; } } @media (min-width: 768px) { .ev-pinstripe > .sticky-md-top, .ev-pinstripe > .sticky-md-bottom { position: sticky; } } @media (min-width: 992px) { .ev-pinstripe > .sticky-lg-top, .ev-pinstripe > .sticky-lg-bottom { position: sticky; } } @media (min-width: 1200px) { .ev-pinstripe > .sticky-xl-top, .ev-pinstripe > .sticky-xl-bottom { position: sticky; } } @media (min-width: 1400px) { .ev-pinstripe > .sticky-xxl-top, .ev-pinstripe > .sticky-xxl-bottom { position: sticky; } } /* -------------------------------------------------------------------------- 2. Accordions — expand on the same clean molded surface, no nested tint. (layout-base.css) -------------------------------------------------------------------------- */ .accordion { --bs-accordion-bg: var(--ev-metal-hi); --bs-accordion-active-bg: var(--ev-metal-hi); --bs-accordion-active-color: var(--ev-ink); --bs-accordion-btn-bg: var(--ev-metal-hi); --bs-accordion-btn-color: var(--ev-ink); --bs-accordion-btn-focus-border-color: var(--ev-accent-edge); --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem var(--ev-accent-edge); --bs-accordion-border-color: var(--ev-rule); } .accordion-item, .accordion-button, .accordion-collapse, .accordion-body { background-color: var(--ev-metal-hi); } /* ALLOWLISTED exception to axial light (Invariant L1): Bootstrap's own idiom for the open accordion's bottom DIVIDER — a border rendered as a shadow so it does not consume layout height. A 0-blur 0-spread line is a rule, not a cast shadow. (layout-base.css) */ .accordion-button:not(.collapsed) { color: var(--ev-ink); background-color: var(--ev-metal-hi); box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--ev-rule); } /* Bootstrap's fixed light/dark SVG chevrons are also selected through `[data-bs-theme=dark] .accordion-button::after`, so they cross a nested light boundary. The adapter owns accordion paint already; form the same disclosure mark from two inked edges so it resolves on the button's local theme carrier instead of from the outer page selector. */ .accordion-button::after { width: 0.65rem; height: 0.65rem; background-image: none; border-right: 2px solid var(--ev-ink); border-bottom: 2px solid var(--ev-ink); transform: rotate(45deg); } .accordion-button:not(.collapsed)::after { background-image: none; transform: rotate(-135deg); } /* -------------------------------------------------------------------------- 3. Button size scale — five steps mapped onto --bs-btn-* so size stays ORTHOGONAL to colour. (layout-controls.css) -------------------------------------------------------------------------- */ .btn { --ev-key-lift-scale: 1; /* Same cast body as the native key, composed on the button for the same cascade reason: --ev-key-lift-scale is per-button state, so a body layer built at :root would resolve against a scale that scope does not have and collapse every box-shadow naming it to `none` (cortex-mz9m49a). The size rules below re-declare the scale on this same element. */ --ev-key-body-arrise: inset 0 0 0 calc(1px * var(--ev-key-lift-scale)) var(--ev-key-body-arrise-ink); --ev-key-body-wall: inset 0 0 calc(3px * var(--ev-key-lift-scale)) var(--ev-key-body-wall-ink); --ev-key-body-roll: inset 0 0 calc(9px * var(--ev-key-lift-scale)) var(--ev-key-body-roll-ink); --bs-btn-padding-y: var(--ev-btn-pad-y-md); --bs-btn-padding-x: var(--ev-btn-pad-x-md); --bs-btn-font-size: var(--ev-btn-font-md); --bs-btn-border-radius: var(--ev-btn-radius-md); --bs-btn-focus-box-shadow: none; height: var(--ev-btn-height-md); display: inline-flex; align-items: center; justify-content: center; line-height: 1; transition: var(--ev-transition-fast); } .btn-xs, .btn-group-xs > .btn { --ev-key-lift-scale: 0.7901234568; --bs-btn-padding-y: var(--ev-btn-pad-y-xs); --bs-btn-padding-x: var(--ev-btn-pad-x-xs); --bs-btn-font-size: var(--ev-btn-font-xs); --bs-btn-border-radius: var(--ev-btn-radius-xs); height: var(--ev-btn-height-xs); } .btn-sm, .btn-group-sm > .btn { --ev-key-lift-scale: 0.8888888889; --bs-btn-padding-y: var(--ev-btn-pad-y-sm); --bs-btn-padding-x: var(--ev-btn-pad-x-sm); --bs-btn-font-size: var(--ev-btn-font-sm); --bs-btn-border-radius: var(--ev-btn-radius-sm); height: var(--ev-btn-height-sm); } .btn-lg, .btn-group-lg > .btn { --ev-key-lift-scale: 1.125; --bs-btn-padding-y: var(--ev-btn-pad-y-lg); --bs-btn-padding-x: var(--ev-btn-pad-x-lg); --bs-btn-font-size: var(--ev-btn-font-lg); --bs-btn-border-radius: var(--ev-btn-radius-lg); height: var(--ev-btn-height-lg); } .btn-xl, .btn-group-xl > .btn { --ev-key-lift-scale: 1.265625; --bs-btn-padding-y: var(--ev-btn-pad-y-xl); --bs-btn-padding-x: var(--ev-btn-pad-x-xl); --bs-btn-font-size: var(--ev-btn-font-xl); --bs-btn-border-radius: var(--ev-btn-radius-xl); height: var(--ev-btn-height-xl); } .btn.btn-auto-height { height: auto; } .btn:hover { transition: none; } /* KEYBOARD FOCUS — the accent ring, and nothing else. --------------------------------------------------------------------------- Invariant 4 reserves focus to the ring precisely so it never has to borrow the depth or the finish channel: a focused key must not move its floor or change its polish, because those already mean pressed and live. The ring was not in conflict with the language here — it was simply absent. Drawn with `outline`, NEVER with box-shadow. Bootstrap draws its focus ring in box-shadow, and so does every Evident press state, so a ring there silently neuters the pressed-key cut stack — the collision cortex-mn5hkp8 had to fix. `outline` is a separate property on a separate paint, so the two channels cannot fight. This is also why `--bs-btn-focus-box-shadow: none` above stays: that line is correct on its own terms and is NOT what removed focus. What removed focus was the second half of the old one-liner here, `outline: none !important`, with nothing put back. 2px accent at +2px offset is the constant the native .ev-key already sets (components/keys.css), so a Bootstrap consumer and a native consumer focus identically rather than drifting apart. :focus-visible only, so a mouse click leaves no ring behind. The suppression is NARROWED rather than deleted: :focus-visible is a subset of :focus, so an un-narrowed `outline: none !important` beats the ring at the same origin and nothing paints at all. Narrowing is what makes the rule below reachable — verify by tabbing, not by reading the diff. (cortex-7nnzvrk) */ .btn:focus:not(:focus-visible), .btn:active:not(:focus-visible) { outline: none !important; } .btn:focus-visible { outline: 2px solid var(--ev-accent-edge); outline-offset: 2px; } /* A BUTTED group is a seat in a track, so its ring turns INSIDE — the same inversion .ev-rail__item and .ev-segmented__seg make for the same reason. Bootstrap laps grouped keys with a negative margin, so an outside ring would be overlapped by the next key along. The selection-carrying .btn-group is a different object and keeps its own, more specific ring in section 7. The z-index is belt-and-braces, not load-bearing, and it does NOT always apply: inside a .rounded-white card, `.rounded-white .btn:not(.btn-link)` (section 4) sets z-index 1 at the SAME specificity (0,3,0) and lands later in this file, so it wins and the focused key stays at 1. Measured on the live render, the ring is still complete on all four sides in that case — a -2px inset ring sits inside its own border box and the sibling lap is only 1px, so there is nothing for a neighbour to cover. Left in because it does raise the key outside a card; not tightened, because tightening buys no pixel. */ .btn-group > .btn:focus-visible, .btn-group-vertical > .btn:focus-visible { outline-offset: -2px; z-index: 4; } /* THE PRIMARY KEY — a lit surface, DARK ink. Depth is blurred stacks with no line (no rim trap). Hover stays lit (finish carries liveness); press travels down. (layout-controls.css) */ .btn-primary { --bs-btn-color: var(--ev-accent-ink); --bs-btn-bg: var(--ev-accent); --bs-btn-border-color: transparent; --bs-btn-hover-color: var(--ev-accent-ink); --bs-btn-hover-bg: var(--ev-accent); --bs-btn-hover-border-color: transparent; --bs-btn-active-color: var(--ev-accent-ink); --bs-btn-active-bg: var(--ev-accent-press); --bs-btn-active-border-color: transparent; --bs-btn-disabled-color: var(--ev-accent-ink); --bs-btn-disabled-bg: var(--ev-accent); --bs-btn-disabled-border-color: transparent; --bs-btn-border-width: 0; font-weight: 500; background-image: var(--ev-key-crown); box-shadow: var(--ev-key-body-arrise), var(--ev-key-body-wall), var(--ev-key-body-roll), var(--ev-acc-shoulder-1), var(--ev-acc-shoulder-2), var(--ev-contact-1); } .btn-primary:hover { box-shadow: var(--ev-key-body-arrise), var(--ev-key-body-wall), var(--ev-key-body-roll), var(--ev-acc-shoulder-1), var(--ev-acc-shoulder-2), var(--ev-contact-2), var(--ev-ambient-1); } .btn-primary:active { background-image: none; box-shadow: var(--ev-r3-line), var(--ev-r3-lip), var(--ev-r3-wall); } /* Colour-only variants keep their identity in ink + rim, no coloured face. The two channels take DIFFERENT accent tokens, and that is deliberate: the label is ink and takes --ev-accent-text (the accent a luminance step down, so it clears AA on a light ground — --ev-accent is a face value at 1.43:1 on the canvas), while the rim is a UI BOUNDARY and takes --ev-accent-edge so it clears its independent 3:1 floor. Both are the same accent hue walked down in light; in dark both resolve to the face accent. (cortex-8jhd90a, cortex-ne36f8j) */ .btn-outline-primary { --bs-btn-color: var(--ev-accent-text); --bs-btn-bg: transparent; --bs-btn-border-color: var(--ev-accent-edge); --bs-btn-hover-color: var(--ev-accent-ink); --bs-btn-hover-bg: var(--ev-accent); --bs-btn-hover-border-color: var(--ev-accent-edge); --bs-btn-active-color: var(--ev-accent-ink); --bs-btn-active-bg: var(--ev-accent-press); --bs-btn-active-border-color: transparent; --bs-btn-disabled-color: var(--ev-accent-text); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--ev-accent-edge); color: var(--ev-accent-text); border: 1px solid var(--ev-accent-edge); border-radius: var(--ev-radius-pill); font-weight: 600; background-color: transparent; } .btn-outline-primary:hover { background-color: var(--ev-accent); border-color: var(--ev-accent-edge); color: var(--ev-accent-ink); } .btn-outline-primary:is(:active, .active, .show) { box-shadow: var(--ev-r3-line), var(--ev-r3-lip), var(--ev-r3-wall); } .btn-outline-primary:is(:disabled, .disabled) { opacity: 0.65; } /* THE NEUTRAL KEY — the .ev-key default, for the variants a consumer reaches for when it just wants a button. One production consumer's workhorse is .btn-outline-secondary and Bootstrap's own neutral fill is .btn-secondary; both are the same object in Evident (a raised cast key on land: metal-hi face, flat ink, contact + ambient falloff, NO rim line). Bootstrap paints them #6c757d-on-white and #6c757d-outline respectively, which is why an un-restyled consumer page read as Bootstrap wearing Evident's buttons. .btn-light / .btn-dark join them: both name a NEUTRAL key in Bootstrap's vocabulary, and Evident has exactly one neutral key — the material decides its value per theme, so a consumer does not choose light or dark by class. Weight is 600, matching .ev-key. (.btn-primary stays 500 because .ev-key--primary is 500 — the lit face carries the emphasis, not the ink.) Depth is deliberately NOT restated per variant: these rules set the face and the ink through --bs-btn-*, and the one box-shadow below is the same stack components/keys.css declares. */ .btn { --bs-btn-font-weight: var(--ev-weight-semibold); } .btn-secondary, .btn-outline-secondary, .btn-light, .btn-dark { --bs-btn-bg: var(--ev-metal-hi); --bs-btn-color: var(--ev-ink); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--ev-metal-hi); --bs-btn-hover-color: var(--ev-ink); --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: var(--ev-metal-hi); --bs-btn-active-color: var(--ev-ink); --bs-btn-active-border-color: transparent; --bs-btn-disabled-bg: var(--ev-metal-hi); --bs-btn-disabled-color: var(--ev-ink); --bs-btn-disabled-border-color: transparent; /* border:0, not a transparent border. A native .ev-key has no border box at all; a transparent 1px one still eats 2px of width and height, so the Bootstrap key measured 2px larger than the key it mirrors. */ --bs-btn-border-width: 0; background-image: var(--ev-key-crown); box-shadow: var(--ev-key-body-arrise), var(--ev-key-body-wall), var(--ev-key-body-roll), var(--ev-contact-1), var(--ev-ambient-1); } .btn-secondary:hover, .btn-outline-secondary:hover, .btn-light:hover, .btn-dark:hover { box-shadow: var(--ev-key-body-arrise), var(--ev-key-body-wall), var(--ev-key-body-roll), var(--ev-contact-2), var(--ev-ambient-2); } /* A press is a real geometric event: the key travels DOWN into the panel it sits on, so the outer falloff is dropped for the cut stack — .ev-key:active, restated. No translateY (that would depict a downward light on an axial face). */ .btn-secondary:active, .btn-outline-secondary:active, .btn-light:active, .btn-dark:active { background-image: none; box-shadow: var(--ev-r3-line), var(--ev-r3-lip), var(--ev-r3-wall); } /* DANGER KEY COMPATIBILITY — .btn-danger mirrors .ev-key--danger. It is transitional adapter vocabulary, not a second doctrine: consumers migrate to `.ev-key.ev-key--danger` and add the canonical aria-hidden trash glyph plus destructive wording (or a specific aria-label when icon-only). CSS cannot manufacture that required semantic markup. Rest is neutral; danger ink/burr appear only during hover, focus and press. */ .btn-danger { --bs-btn-bg: var(--ev-metal-hi); --bs-btn-color: var(--ev-ink); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--ev-metal-hi); --bs-btn-hover-color: var(--ev-danger-action-ink); --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: var(--ev-metal-hi); --bs-btn-active-color: var(--ev-danger-action-ink); --bs-btn-active-border-color: transparent; --bs-btn-disabled-bg: var(--ev-metal-hi); --bs-btn-disabled-color: var(--ev-ink); --bs-btn-disabled-border-color: transparent; --bs-btn-border-width: 0; background-image: var(--ev-key-crown); box-shadow: var(--ev-key-body-arrise), var(--ev-key-body-wall), var(--ev-key-body-roll), var(--ev-contact-1), var(--ev-ambient-1); } .btn-danger:not(:disabled):not(.disabled):is(:hover, :focus-visible) { box-shadow: var(--ev-key-body-arrise), var(--ev-key-body-wall), var(--ev-key-body-roll), var(--ev-contact-2), var(--ev-ambient-2), 0 0 0 1px var(--ev-danger-action-burr); } .btn-danger:focus-visible { outline-color: var(--ev-danger-action-ink); } .btn-danger:not(:disabled):not(.disabled):active { background-image: none; box-shadow: var(--ev-r3-line), var(--ev-r3-lip), var(--ev-r3-wall); } /* Success/warning/info remain semantic-faced status actions. Danger is not in this family: destructive intent is durable glyph + wording, not red stock. */ .btn-success { --bs-btn-bg: var(--ev-success); --bs-btn-color: var(--ev-success-fg); --bs-btn-hover-bg: var(--ev-success); --bs-btn-hover-color: var(--ev-success-fg); } .btn-warning { --bs-btn-bg: var(--ev-warning); --bs-btn-color: var(--ev-warning-fg); --bs-btn-hover-bg: var(--ev-warning); --bs-btn-hover-color: var(--ev-warning-fg); } .btn-info { --bs-btn-bg: var(--ev-info); --bs-btn-color: var(--ev-info-fg); --bs-btn-hover-bg: var(--ev-info); --bs-btn-hover-color: var(--ev-info-fg); } .btn-success, .btn-warning, .btn-info { --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-border-color: transparent; --bs-btn-border-width: 0; box-shadow: var(--ev-contact-1), var(--ev-ambient-1); } /* These three buttons are status-coloured faces. Defend only ordinary nested typography; danger is intentionally absent because its face is neutral. */ :is(.btn-success, .btn-warning, .btn-info) :where(p, small, h1, h2, h3, h4, h5, h6) { color: inherit; } /* THE GHOST KEY — .ev-key--ghost: a link-like key with no cast face, so no falloff. Ink only, and accent ink on hover. Bootstrap's .btn-link is the same object and is currently painted --bs-link-color at weight 400. */ .btn-link { --bs-btn-color: var(--ev-ink-dim); --bs-btn-hover-color: var(--ev-accent-text); --bs-btn-active-color: var(--ev-accent-text); --bs-btn-font-weight: var(--ev-weight-medium); background: transparent; box-shadow: none; text-decoration: none; } .btn-link:hover, .btn-link:active { background: transparent; box-shadow: none; } /* -------------------------------------------------------------------------- 4. The molded plane — .rounded-white. Opaque material, not glass; the rim carries separation. (layout-surfaces.css) -------------------------------------------------------------------------- */ .rounded-white { /* Descendant pockets are cut from this raised face, so expose its theme-aware floor instead of falling through to the ordinary metal ladder. Framework-neutral .ev-molded / .ev-card now publish the SAME token, so this adapter host and the native raised hosts render one face — the adapter is not carrying a treatment the core lacks. Value and rendering here are unchanged; only the token's name lost its `-white-` when its scope stopped being Bootstrap-only. (cortex-arivo8b) */ --ev-direct-carve-floor: var(--ev-raised-carve-floor); background: var(--ev-metal-hi); border-radius: var(--ev-radius-md); box-shadow: var(--ev-shoulder-lite), var(--ev-shoulder-1), var(--ev-contact-1), var(--ev-ambient-1); transition: var(--ev-transition-fast); } .card { border: 0; } .card.rounded-white.card-clickable:hover, a.card.rounded-white:hover { box-shadow: var(--ev-shoulder-lite), var(--ev-shoulder-2), var(--ev-contact-2), var(--ev-ambient-2); transition: none; } .card.rounded-white:hover { box-shadow: var(--ev-shoulder-lite), var(--ev-shoulder-1), var(--ev-contact-1), var(--ev-ambient-1); } /* Keys on a molded (raised) face — a raised key on raised material. */ .rounded-white .btn:not(.btn-link):not(.btn-danger) { position: relative; z-index: 1; box-shadow: var(--ev-contact-1), var(--ev-ambient-1); } .rounded-white .btn:not(.btn-link):not(.btn-danger):hover { box-shadow: var(--ev-contact-2), var(--ev-ambient-2); } .rounded-white .btn:not(.btn-link):not(.btn-danger):active { box-shadow: var(--ev-r3-line), var(--ev-r3-lip), var(--ev-r3-wall); } .rounded-white .btn-group .btn:not(.btn-link):not(.btn-danger), .rounded-white .btn-group .btn:not(.btn-link):not(.btn-danger):hover, .rounded-white .btn-group .btn:not(.btn-link):not(.btn-danger):active { box-shadow: none; } .rounded-white .btn-group { box-shadow: var(--ev-contact-1), var(--ev-ambient-1); border-radius: var(--bs-border-radius); } /* -------------------------------------------------------------------------- 5. The machined plane — .rounded-light. Rank-1 carve; floor on n2 with n1 held in reserve one rung below. (layout-surfaces.css) -------------------------------------------------------------------------- */ .rounded-light { background-color: var(--ev-direct-carve-floor, var(--ev-floor-n2)); border-radius: var(--ev-radius-md); box-shadow: var(--ev-r1-line), var(--ev-r1-lip), var(--ev-r1-wall), var(--ev-r1-rim); position: relative; } .rounded-light::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(var(--ev-fillet-size) var(--ev-fillet-size) at 0% 0%, var(--ev-fillet-light), transparent 72%), radial-gradient(var(--ev-fillet-size) var(--ev-fillet-size) at 100% 0%, var(--ev-fillet-light), transparent 72%), radial-gradient(var(--ev-fillet-size) var(--ev-fillet-size) at 0% 100%, var(--ev-fillet-light), transparent 72%), radial-gradient(var(--ev-fillet-size) var(--ev-fillet-size) at 100% 100%, var(--ev-fillet-light), transparent 72%); } .rounded-light > * { position: relative; z-index: 1; } .rounded-light::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(125% 125% at 50% 50%, var(--ev-lum-mid) 0%, transparent 52%, transparent 80%, var(--ev-lum-lo) 100%); } .rounded-light :is(h1, h2, h3, h4) { text-shadow: none; color: var(--ev-ink); } /* Form controls in a carve — pockets one rung below the panel. */ .rounded-light .form-control, .rounded-light .form-select, .rounded-light .form-check-input { background-color: var(--ev-direct-carve-floor, var(--ev-floor-n1)); border: 0; color: var(--ev-ink); box-shadow: var(--ev-r2-line), var(--ev-r2-lip), var(--ev-r2-wall), var(--ev-r2-rim); } .rounded-light .form-check-input:checked { background-color: var(--ev-accent); } /* Badges in a carve — cut one rung DARKER than the floor, rank-2 shading. */ .rounded-light .badge { background-color: var(--ev-direct-carve-floor, var(--ev-floor-n1)); box-shadow: var(--ev-r2-line), var(--ev-r2-lip); } /* Buttons in a carve render as DETENTS, never raised keys. The border/color resets are load-bearing (they cancel Bootstrap's variant paint). */ .rounded-light .btn:not(.btn-link):not(.btn-danger) { background-color: var(--ev-direct-carve-floor, var(--ev-floor-n1)); background-image: none; border: 0; color: var(--ev-ink); --bs-btn-bg: var(--ev-direct-carve-floor, var(--ev-floor-n1)); --bs-btn-color: var(--ev-ink); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--ev-direct-carve-floor, var(--ev-floor-n1)); --bs-btn-hover-color: var(--ev-ink); --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: var(--ev-direct-carve-floor, var(--ev-floor-n1)); --bs-btn-active-color: var(--ev-ink); --bs-btn-active-border-color: transparent; box-shadow: var(--ev-r3-line), var(--ev-r3-lip), var(--ev-r3-wall); } .rounded-light .btn:not(.btn-link):not(.btn-danger):hover { box-shadow: var(--ev-r2-line), var(--ev-r3-lip), var(--ev-r3-wall); } .rounded-light .btn:not(.btn-link):not(.btn-danger):active { box-shadow: var(--ev-r2-line), var(--ev-r2-lip), var(--ev-r2-wall); } /* Tables on a carve floor — transparent bg, achromatic scribe rules. A column heading names the data beneath it; it is label ink, not another data row. Keep that hierarchy on the shared dim rung in both themes and on both table names the adapter owns. The body deliberately keeps Bootstrap's contextual --bs-table-color at full ink. (cortex-b17cpcs) */ .rounded-light .table, .rounded-light .data-table { background: transparent; box-shadow: none; border-radius: 0; --bs-table-bg: transparent; } .rounded-light .table thead th, .rounded-light .data-table thead th { background: transparent; border-bottom-color: var(--ev-rule-strong); color: var(--ev-ink-dim); } .rounded-light .table tbody td, .rounded-light .table tbody th, .rounded-light .data-table tbody td, .rounded-light .data-table tbody th { border-bottom-color: var(--ev-rule); } .rounded-light .table.table-hover tbody tr:hover td, .rounded-light .table.table-hover tbody tr:hover th, .rounded-light .data-table.table-hover tbody tr:hover td, .rounded-light .data-table.table-hover tbody tr:hover th { background-color: var(--ev-wash); } /* -------------------------------------------------------------------------- 6. The component surface OUTSIDE a plane scope. (cortex-wp0qzvk) Sections 4 and 5 restyle components only INSIDE `.rounded-white` / `.rounded-light`. That was the shape of the production port this adapter was extracted from, where every surface sits in one plane or the other. It is not the shape of Bootstrap: a consumer writes ``, ``, `