# Eleventheye consumer proof — historical checkpoints This document records the original pilot and the dated September 2026 integration checkpoint. Version numbers, pending work, and validation results below describe those checkpoints, not the current portfolio installation or release status. For current ASUI behavior, use the [theme contract](./phase2-contract.md) and component guides. Final published-package verification is tracked in [issue #94](https://github.com/Andrey11/asui/issues/94). The first project theme is owned by the portfolio, with a matching example in ASUI Storybook. It is not exported by the library. The portfolio imports the theming APIs from `@eleventheye/asui`. The inventory and initial review notes below record the pilot; the completion section records its final state. ## Initial pilot inventory (historical) Sources are relative to `/Users/andrey/Development/portfolio`: | Source | Existing use | Preview treatment | | ---------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | | `src/index.scss` | Dark #12232e surface, #50b0e4 secondary action, #b2e3ff highlights, #c5eeff text, Barlow Condensed | Project palette and font; CSS-variable fallbacks use these values | | `src/scss/variables.module.scss` | 4px spacing scale | 8/16/24px button padding | | `src/scenes/contact/ContactForm.tsx` | Raised Send submit, secondary background, trailing send/progress icon | Native ASButton submit with a decorative trailing ASUI icon | | `src/scenes/project/subscenes/editproject/EditProject.tsx` | Back, Save, disabled/dirty/saving states | Primary and secondary button examples, disabled and loading states | | `src/components/dialogs/user/LoginDialog.tsx` and its SCSS | Compact account actions with weight 300 | Small quiet buttons with weight 300 | | `src/scss/mixins.module.scss` action-button mixins | Project page primary/secondary actions shown in the supplied reference | 44px medium height, 1.12rem type, weight 600, 8px corners, light text, #4ea9da primary fill, translucent secondary fill/border | Active icon-button usage also exists in the editor and inbox. It needs its own semantics review before replacing native RMWC icon buttons with ASIconButton's ASTappable path. Older resume/person actions remain outside this first migration. ## Initial review decisions (historical) The supplied project-page screenshot supersedes the initial RMWC-based draft. The preview now follows the shared primaryActionButton/secondaryActionButton mixins: mixed-case labels, light foregrounds, 8px corners, and 44px minimum height. These remain preview changes, not portfolio replacements: - Primary fill is #4ea9da with #fdfdfd text, matching the reference. - Secondary fill is rgb(2 18 28 / 40%), with #f4fbff text and a subtle rgb(244 251 255 / 20%) outline. Quiet account actions remain a separate draft. - Medium uses the existing action mixin geometry. Small (36px) and Large (52px) are proposed companion sizes. - The reference row uses two flexible columns and stacks on narrow screens. Navigation specimens are inert buttons for visual review; real portfolio actions must retain their Link/anchor semantics. - The mixin uses a border; ASUI currently uses an outline, so edge geometry differs slightly. The reference-row hover lift is preview CSS, while colors, typography, radius, and sizing are theme settings. - ASUI icons stand in for Material glyphs; icon selection is not finalized. - Loading uses the native ASButton's centered indicator and disabled surface. A compact spinner is configured through the loader theme; native buttons currently use its Small size for every button size. - The editor's repeating dirty-state glow is not copied. Decide how to present unsaved changes, including reduced-motion behavior, during actual integration. The preview now includes single-line ASTextField controls at all sizes, disabled and invalid fields, and distinct outer hover/focus glows. Floating labels remain outside this checkpoint. Opt-in multiline fields now include a themed character counter; see [Multiline text fields](./multiline-text-fields.md). Other component families are not yet consumer-approved. ## Ownership and cleanup `src/stories/eleventheye/eleventheyeTheme.ts` contains the serializable input, built theme, and secondary/quiet overrides. It has no RMWC dependency. The `--eleventheye-*` variables are proposed consumer-owned names, with working fallbacks so the example renders without app CSS. The preview stylesheet owns layout only; button appearance lives in the theme. For the first portfolio migration, add project-owned color variables alongside the existing `--mdc-*` variables. Only the ASUI theme uses the new palette; consolidation and temporary aliases can wait. Keep existing SCSS spacing tokens and preserve layout rules. Remove `.mdc-*` selectors only as their corresponding controls are replaced; do not bulk-delete shared styles. Revisit the editor's disabled icon overrides and dirty-state animation as separate, visible cleanup opportunities. ## Preview and verification Storybook: **ASUI THEMES → Eleventheye → Gallery and Interactions**. The contact fixture submits only to local React state. It sends no network request and writes no portfolio data. The local form now uses ASTextField with an ordinary associated label. - Production compilation, 38 regression tests, and the Storybook TypeScript check pass. - The initial browser review covered the desktop button gallery and local form submission. The revised buttons and focused fields were visually inspected in Chrome. - The updated story passes its interaction checks in Chrome and Safari, covering local submission, loading, focus persistence, blur, and disabled-field shadow suppression. Real pointer hover and keyboard focus were visually compared in Chrome; the 320px layout was checked there too. Safari rendering was inspected. - Comparing against the running portfolio and user visual approval remain before consumer integration. The portfolio development server was unavailable during source extraction. Browser-native autofill and OS reduced-motion settings were not exercised in this checkpoint. The packed consumer integration has since been completed; see the completion section below. ## Field appearance The source is portfolio's `BaseInputField.module.scss`, `$fieldBg`, and the z3/z7 elevation overrides in `src/index.scss`. Hover/focus shadow values are copied into project-owned CSS-variable fallbacks. The transparent inner input removes the nested-box appearance. Both new outer-shadow theme slots default to `none` for existing themes. Focus takes precedence over hover and persists after pointer exit; disabled fields suppress both effects. An invalid input keeps the existing ASUI inner invalid border. No floating label behavior is introduced. The project-owned `--eleventheye-*` palette now lives in the portfolio alongside existing MDC variables. The original integration included an explicitly authorized contact-form test; this historical record does not authorize additional submissions. The multiline preview covers line breaks, controlled reset, native maxLength enforcement, disabled textarea behavior, and the counter color. ## Completed portfolio pilot The contact page and portal panel now use the packed library for native buttons, single-line fields, and multiline fields. Andrey confirmed Safari rendering, autofill readability, and a complete submission delivered by email with all contact details. Shared project sizes are now 34/44/54px; buttons stay stationary on hover and brighten with a soft glow. These project choices do not change ASUI defaults. The example above reflects the final project theme. Pilot fixes now live in ASUI: autofill interaction precedence, clear-action accessible naming, icon-field spacing slots, and ordinary outline offset. The portfolio has removed the associated internal selectors. Its theme remains project-owned, as do labels, Material icon typography, and form layout. ## Published consumer checkpoint — 17 September 2026 The portfolio now has published ASUI ^2.17.0 installed. Buttons, button-styled links, text fields, multiline fields, and the remaining category select were migrated. Account dialogs now use ASModal and native ASUI buttons through the project-owned BaseDialog adapter. Andrey verified login behavior and mobile appearance; focus, action dispatch, and dismissal behavior currently live in that adapter, not ASModal. This does not establish a complete ASModal accessibility or semantic-theme contract. The dormant resume/CRM UI has been archived and removed from the portfolio. Redux, persistence, supporting models/APIs, and Firebase remain intact. The remaining RMWC surface is standalone icons, typography, switches, notifications, and the provider. All LocalIconButton usages in the inbox and project editor have been replaced locally on `19-asui-icon-buttons`, using native ASIconButton through a project-owned Material Symbols adapter. That work remains uncommitted. Its production build, TypeScript check, and 52 tests pass; lint has no errors and 50 existing warnings. Browser/Safari acceptance remains pending. ASUI glyph rendering is committed separately as `b1127e6`, awaiting release. Once published, portfolio can use ASIcon glyph mode inside its adapters and replace the RMWC implementation of standalone LocalIcon without recreating its Google icons. Font loading and icon selection remain application-owned. NFL Stats consumer proof is also complete, using ASUI 2.15.0 and project-owned chart defaults while preserving explicit team colors. Its mobile layout and recovery/synchronization remain separate application work. A portfolio-only workaround currently hides the empty email clear action because ASUI 2.16.0 renders it regardless of value. Earlier statements about removing all field-internal selectors describe the original pilot checkpoint, not this later workaround. Generalizing clear-action visibility remains follow-up library work. These checkpoints do not claim every ASUI component is fully decoupled.