/* * Plugin-owned `--winery-c7-*` variable bridge to SDK-rendered surfaces. * * Why this file exists: Bible Part 7 §7.9 forbids THEMES from targeting * SDK-owned `.c7-*` classes (volatile, no upstream contract). The plugin's * integration layer is structurally different — it pins SDK behavior, * monitors drift via CI, and can absorb the volatility on themes' behalf. * Each rule here defines a stable `--winery-c7-*` surface for themes and * maps it to an SDK class target the plugin watches in * tests/integration/fixtures/sdk-drift-watchlist.json. * * Pattern codified in docs/contract.md § Integration-layer pattern (v0.5.0). * Brief: docs/briefs/2026-05-15-sdk-class-targeting-variable-bridge.md. * * Class targets verified against SDK bundle.d5004f235ad919a4384f.js.gz * (loader + SDK CSS + entry + lazy chunks) on 2026-05-21. The brief draft cited speculative * selectors (`c7-primary-button`, `c7-input`, etc.) that do not exist in * the current bundle — verified taxonomy is the BEM-style `c7-btn--*`, * `c7-form__field`, `c7-user-nav__*` family used below. */ :root { /* * F-2 button typography. * * Default-source decision (per brief Settled decisions § 3 — hybrid): * font-family inherits upstream `--c7-font-family` so themes overriding * the SDK typography variable also affect button typography; the * tracking + transform knobs have no upstream analog so hardcode neutral * defaults that preserve the SDK's "do nothing" baseline. * * Bridges to SDK class targets: `.c7-btn`, `.c7-btn--primary`, * `.c7-btn--alt` (verified in bundle). */ --winery-c7-button-font-family: var( --c7-font-family ); --winery-c7-button-letter-spacing: normal; --winery-c7-button-text-transform: none; /* * F-2 primary-button box model (login-form bridge group 4). * * Default-source: the current SDK-resolved primary-button values are * literal `46px`, `11px 20px`, and `none`. Exposing those same values * keeps the unset state inert while letting themes control the primary CTA * without targeting the volatile SDK class. Box-model styling is now * intentionally bridged for the primary CTA; the F-7 modal-confirm carve- * out remains limited to destructive color styling inside SDK modals. */ --winery-c7-button-min-height: 46px; --winery-c7-button-padding: 11px 20px; --winery-c7-button-box-shadow: none; /* * F-3 form field text color. * * Default-source: inherits upstream `--c7-body-text-color` (1:1 mapping * — body-text-color is the natural carrier for input text). * * Bridges to SDK class target: `.c7-form__field` descendants (input, * textarea, select — bare elements; SDK has no `c7-input` class). */ --winery-c7-field-text-color: var( --c7-body-text-color ); /* * F-L1 login-form label typography (login-form bridge group 1). * * Default-source: family and color inherit the SDK's upstream variables; * the authored label rule uses literal `15px` at commerce7.css:1207 but * does not author a weight, so `inherit` preserves the current cascade. * Transform and tracking have no SDK variable and use the current neutral * values. Bridges to verified SDK target `label.c7-required`. */ --winery-c7-label-font-family: var( --c7-font-family ); --winery-c7-label-font-size: 15px; --winery-c7-label-font-weight: inherit; --winery-c7-label-text-transform: none; --winery-c7-label-letter-spacing: normal; --winery-c7-label-color: var( --c7-body-text-color ); /* * F-L2 login-form field spacing (login-form bridge group 2). * * Default-source: the SDK spaces block-display fields with a literal * `20px` field margin, not form `gap`; its authored label-to-input carrier * is `padding-bottom: 5px` at commerce7.css:1203-1210. Matching those values * keeps both bridges inert until a theme opts into different spacing. * Bridges to `.c7-form__field` and its labels; `.c7-form--login` is * runtime-applied but is not the spacing carrier. */ --winery-c7-field-group-gap: 20px; --winery-c7-field-label-gap: 5px; /* * F-3 form-field box model (login-form bridge group 3). * * Default-source: `0` is the CSS initial min-height because the SDK does * not author that property; the SDK does author `11px 10px` padding. * Matching both values keeps the unset state inert. */ --winery-c7-field-min-height: 0; --winery-c7-field-padding: 11px 10px; /* * F-L5 login-form password-options row (login-form bridge group 5). * * Default-source: the standalone row resolves to right alignment and zero * top margin; when it immediately follows `.c7-form__field`, the SDK * authors `-10px`. Separate variables preserve both inert states while * keeping either composition theme-reachable. */ --winery-c7-password-options-align: right; --winery-c7-password-options-margin-top: 0; --winery-c7-password-options-margin-top-adjacent: -10px; /* * F-5 profile-nav active-tab underline color (v0.5.2). * * Default mirrors SDK's source cascade chain: commerce7.css:2649-2651 * declares `.c7-account__menu .c7-active a { border-bottom-color: * var(--c7-field-option-selected-color); }` and commerce7.css:39 defines * `--c7-field-option-selected-color: var(--c7-primary-color)` at :root. * The bridge therefore preserves the SDK's default-state visual by * construction — operators not overriding `--winery-c7-tab-underline-color` * see whatever the SDK paints. Themes override the variable to take * control of the underline color independent of any other --c7-* variable. * * Why this default (not `currentColor`): the SDK's link text color in * this nav resolves to `var(--c7-body-text-color)` (commerce7.css:2628), * which differs from the SDK's underline source on consumers that don't * align both — `currentColor` would have regressed default-state visual * for any operator without a body-text-color override. Mirroring the * SDK source cascade chain is regression-proof at unset state. * * Origin: rhinory-new v0.5.0 consumption brief (theme commits 73f247b + * 80d10e9) empirically confirmed via two independent Chrome MCP cascade * probes (single-variable + 20-variable batch + 21st `--c7-header-text-color` * follow-up) that no upstream `--c7-*` variable cascade reaches the * active-tab anchor's `border-bottom-color` from `:root` on the * theme-rendered site. The bridge's variable-read from `:root` is what * restores theme control over the underline color — the bridge variable * is freely overridable from any theme scope including `:root`, which * the upstream SDK variable empirically wasn't. * * The bridge rule below uses `!important` as defense-in-depth, not as a * load-bearing override for current SDK state. Bridge CSS enqueues after * SDK CSS via the `commerce7-sdk-css` $deps chain (see Settled decision * Q1 + `Winery_Commerce7_Frontend::register_and_enqueue_bridge()`), so at * current SDK specificity the bridge wins by cascade order alone. The * `!important` preserves the override against future SDK changes: added * specificity, rule moved to a later cascade position, or scope under a * new layer. The variable default mirrors the SDK source chain so unset * state is regression-safe regardless of any of these future changes. * * Bridges to SDK class target (composite): `.c7-account__menu` (nav * scope) + `.c7-active` (active-tab marker). Both watched in * sdk-drift-watchlist.json. */ --winery-c7-tab-underline-color: var( --c7-field-option-selected-color ); /* * F-7 destructive action color family. * * Default-source: bg inherits upstream `--c7-error` (1:1 — destructive * affordance maps to error coloring); hover hardcodes a `color-mix` * darken so themes get sensible hover behavior without needing to * compute it; text-color hardcoded white (overrideable). * * Bridges to SDK class target: `.c7-account-details__delete-account` * (Delete Account button). v0.5.6 F-E intentionally removed the account * dropdown Log out class from this destructive bridge because Log out is * reversible, not destructive; theme-side debt from the 2026-05-17 * cross-project handoff can therefore drop its `!important` override. * Modal confirmation buttons (`.c7-modal--*-delete-confirm`) remain * intentionally excluded from this destructive color bridge to avoid * modal color clashes; their `.c7-btn--primary` box model now follows * F-2, whose defaults preserve the SDK's current modal composition. */ --winery-c7-destructive-bg: var( --c7-error ); --winery-c7-destructive-bg-hover: color-mix( in srgb, var( --c7-error ) 85%, black ); --winery-c7-destructive-text-color: #fff; /* * F-8 cart-item action color (Remove + similar secondary actions). * * Default-source: inherits upstream `--c7-alt-text-color` (muted by * default — preserves SDK's default treatment). * * Bridges to SDK class target: `.c7-side-cart .c7-link` (verified * stable selector — the side-cart wrapper scopes the generic `.c7-link` * class to cart-context links). No dedicated "cart-item-remove" class * exists in the SDK bundle; the cart item taxonomy is the `.c7-order-item` * family with no remove-specific child class. This compromise targets * the real SDK classes that exist; if future SDK releases add a more * specific selector, the watchlist will surface the change. */ --winery-c7-cart-item-action-color: var( --c7-alt-text-color ); /* * F-G1 cart-count corner-overlay positioning (Tier 2, formerly Gap 1). * * Default-source: all four hardcoded to the SDK's inline-pill default * (no positioning offset). Themes override these to compose a * corner-overlay treatment: `position: absolute; top: 0; right: 0; * translate: 50% -50%`. * * Bridges to SDK class target: `.c7-user-nav__cart__count` (verified in * chunk 908 — current-bundle stable; carried over from the original * 2026-05-15 nav-icon-contract-gaps brief). */ --winery-c7-cart-count-position: static; --winery-c7-cart-count-top: auto; --winery-c7-cart-count-right: auto; --winery-c7-cart-count-translate: none; /* * F-D cart-count appearance (v0.5.6). * * Default-source: mirrors Commerce7's source rule for * `.c7-user-nav__cart__count` in commerce7.css:2494-2512, with the * inherited font family carried through the SDK's `--c7-font-family` * contract. The `margin` variable expands the SDK's margin-left default * into a full shorthand so themes can zero it when composing F-G1's * translate-only corner overlay. The `box-shadow` variable is exposed * because rhinory-new's reserve halo is load-bearing for badge * legibility against both ivory-rule and acacia-border nav contexts. * CC pass-1 surfaced that the base `!important` box-shadow otherwise * suppresses the SDK hover halo at commerce7.css:2514-2515; the paired * hover variable restores that SDK affordance under the same discipline * because CSS Cascade L4 gives author-important declarations priority * over the SDK's author-normal hover selector regardless of specificity. * * Bridges to SDK class target: `.c7-user-nav__cart__count` (same * watched target as F-G1). This replaces the theme's depth-3 structural * last-child selector with the v0.5.0 integration-layer pattern: * plugin owns SDK-class targeting; themes override `--winery-c7-*`. */ --winery-c7-cart-count-bg: var( --c7-cart-count-bg ); --winery-c7-cart-count-text-color: var( --c7-cart-count-text-color ); --winery-c7-cart-count-font-family: var( --c7-font-family ); --winery-c7-cart-count-font-size: 13px; --winery-c7-cart-count-height: 20px; --winery-c7-cart-count-min-width: 20px; --winery-c7-cart-count-padding: 0 5px; --winery-c7-cart-count-border-radius: 20px; --winery-c7-cart-count-box-shadow: 0 0 0 0 var( --c7-cart-count-bg-focus ); --winery-c7-cart-count-box-shadow-hover: 0 0 0 2px var( --c7-cart-count-bg-focus ); --winery-c7-cart-count-margin: 0 0 0 -3px; } /* F-2 button typography → `.c7-btn` and its variants. */ .c7-btn, .c7-btn--alt { font-family: var( --winery-c7-button-font-family ); letter-spacing: var( --winery-c7-button-letter-spacing ); text-transform: var( --winery-c7-button-text-transform ); } /* F-2 primary-button box model (v0.75.0). */ .c7-btn--primary { min-height: var( --winery-c7-button-min-height ); padding: var( --winery-c7-button-padding ); box-shadow: var( --winery-c7-button-box-shadow ); } /* F-L1 login-form label typography → verified required-label target. */ label.c7-required { color: var( --winery-c7-label-color ) !important; font-family: var( --winery-c7-label-font-family ) !important; font-size: var( --winery-c7-label-font-size ) !important; font-weight: var( --winery-c7-label-font-weight ) !important; letter-spacing: var( --winery-c7-label-letter-spacing ) !important; text-transform: var( --winery-c7-label-text-transform ) !important; } /* F-L2 field spacing → SDK spacing carriers, not inert form `gap`. */ .c7-form__field { margin-bottom: var( --winery-c7-field-group-gap ); } /* * F-L2 label-to-input gap. Mirrors the SDK's own label exclusion list * (commerce7.css:1203-1210 excludes .c7-radio / .c7-checkbox / * .duet-date__mobile-heading) so the bridge does not add padding the SDK * deliberately withholds from checkbox/radio labels and the date-picker * heading (MED-4). `legend` is the group-title carrier for radio/checkbox * fieldsets and shares the SDK's padding-bottom:5px, so it is bridged * alongside `label` to keep the gap consistent across field types (LOW-3). * Default 5px matches the SDK, so unset state is inert on every carrier. */ .c7-form__field label:not( .c7-radio, .c7-checkbox, .duet-date__mobile-heading ), .c7-form__field legend { padding-bottom: var( --winery-c7-field-label-gap ) !important; } /* * F-3 form field text → bare fields. The input-only box model stays * separate so select keeps the SDK's extra right padding for its chevron. */ .c7-form__field input, .c7-form__field textarea, .c7-form__field select { color: var( --winery-c7-field-text-color ); } /* * F-3 input box model. The SDK's attribute-qualified input family outranks * this stable class target, so these declarations use `!important`; themes * still compose through variables. */ .c7-form__field input { min-height: var( --winery-c7-field-min-height ) !important; padding: var( --winery-c7-field-padding ) !important; } /* F-L5 password-options positioning → verified login-row target. */ .c7-account-login__password-options { margin-top: var( --winery-c7-password-options-margin-top ); text-align: var( --winery-c7-password-options-align ); } .c7-form__field + .c7-account-login__password-options { margin-top: var( --winery-c7-password-options-margin-top-adjacent ); } /* * F-5 profile-nav active-tab underline → `.c7-account__menu .c7-active a`. * `!important` is defense-in-depth, not load-bearing for current SDK state: * bridge CSS enqueues after SDK CSS via `$deps` so wins by cascade order at * current SDK specificity; `!important` preserves the override against * future SDK changes (added specificity, moved cascade position, new layer * scoping). The cascade-fails empirical finding on themed consumers * (rhinory-new v0.5.0 consumption brief) explains why themes need the * bridge's `:root`-readable variable in the first place; it's independent * of the override-mechanism choice for current SDK state. Full rationale * in the F-5 variable why-comment above. Pattern reference: docs/contract.md * § Integration-layer pattern (v0.5.0). */ .c7-account__menu .c7-active a { border-bottom-color: var( --winery-c7-tab-underline-color ) !important; } /* * F-7 destructive action color → Delete Account only. The 2026-05-17 * theme cross-project handoff narrowed this bridge because Log out is * reversible, not destructive; it should inherit the SDK dropdown-link * styling so the paired theme can drop its `!important` volatile-class * override from the account-dropdown brand-alignment follow-up * (rhinory-new commit `40797db`). */ .c7-account-details__delete-account { background-color: var( --winery-c7-destructive-bg ); color: var( --winery-c7-destructive-text-color ); } .c7-account-details__delete-account:hover, .c7-account-details__delete-account:focus { background-color: var( --winery-c7-destructive-bg-hover ); color: var( --winery-c7-destructive-text-color ); } /* F-8 cart-item action color → side-cart link affordances (Remove + similar). */ .c7-side-cart .c7-link { color: var( --winery-c7-cart-item-action-color ); } /* F-G1 cart-count overlay positioning → `.c7-user-nav__cart__count` badge. */ .c7-user-nav__cart__count { position: var( --winery-c7-cart-count-position ); top: var( --winery-c7-cart-count-top ); right: var( --winery-c7-cart-count-right ); translate: var( --winery-c7-cart-count-translate ); background-color: var( --winery-c7-cart-count-bg ) !important; color: var( --winery-c7-cart-count-text-color ) !important; font-family: var( --winery-c7-cart-count-font-family ) !important; font-size: var( --winery-c7-cart-count-font-size ) !important; height: var( --winery-c7-cart-count-height ) !important; min-width: var( --winery-c7-cart-count-min-width ) !important; padding: var( --winery-c7-cart-count-padding ) !important; border-radius: var( --winery-c7-cart-count-border-radius ) !important; box-shadow: var( --winery-c7-cart-count-box-shadow ) !important; margin: var( --winery-c7-cart-count-margin ) !important; } .c7-user-nav__cart > .c7-link:hover .c7-user-nav__cart__count { box-shadow: var( --winery-c7-cart-count-box-shadow-hover ) !important; }