Widget Components
Reusable widget atoms are defined in tryvio-theme.css
(shopify-app/extensions/tryvio-theme/assets/tryvio-theme.css).
Reuse rule: always use the existing class. If you copy a style a second time, extract a shared class instead. See CLAUDE.md “Reuse, don’t reinvent”.
Related: Widget States · Try-On Pipeline.
Glass panel — .tryvio-modal__panel
Two visual modes depending on context.
| Mode | States | Background | Backdrop | Width | Padding |
|---|---|---|---|---|---|
| A — frosted glass | consent / limit / upload / camera / preview | rgba(255,255,255,.92) | blur(36px) saturate(1.4) | min(500px, 100%) | 1rem |
| B — full-bleed media (“premium”) | result / media | transparent | none | min(560px, …) | 0 |
Box shadow (mode A): 0 2px 0 0 rgba(255,255,255,.5) inset, 0 24px 80px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.04).
Border-radius: 24px. Entrance animation: ttn-panel-in.
Duplication — .tryvio-modal__panel has two top-level definitions in tryvio-theme.css
(lines ~179 and ~1756). Mode B overrides mode A for result/media states.
Close (X) — .tryvio-modal__close
Circle button, 2 rem × 2 rem. Positioned absolute top: .72rem; right: .72rem.
| Property | Default | Result-state override |
|---|---|---|
| Background | rgba(0,0,0,.05) | Solid high-contrast (visible over result images) |
| Color | rgba(0,0,0,.45) | High-contrast |
| Hover scale | 1.08 | same |
The email-capture panel has its own size override (34px × 34px, top: 14px; right: 14px).
Duplication — .tryvio-modal__close has three top-level definitions (~206, ~1413,
~1811) plus the email-capture override (~246). Top candidate for unification into a single
shared class (e.g. .tryvio-x-btn as the CLAUDE.md guideline suggests).
Buttons — .tryvio-modal__btn
Base class shared by all action buttons.
| Property | Value |
|---|---|
| Border-radius | 14px |
| Padding | .72rem 1rem |
| Font size / weight | .84rem / 600 |
| Min-height | 48px |
| Hover transform | translateY(-.5px) |
| Disabled opacity | 0.4 |
Variants
| Class | Background | Color | Notes |
|---|---|---|---|
--primary | #111827 | white | Shadow: 0 8px 24px rgba(0,0,0,.18) |
--ghost | rgba(255,255,255,.72) | rgba(15,23,42,.68) | Used for secondary actions |
--cart | #111827 | white | Lighter shadow than --primary |
Duplication — .tryvio-modal__btn base is defined twice (~1122, ~2067). --cart
is nearly identical to --primary; merge is safe.
Tabs — .tryvio-modal__tabs / .tryvio-modal__tab
Used on the capture screen (Upload / Camera).
| Element | Key values |
|---|---|
.tryvio-modal__tabs track | background: rgba(15,23,42,.05); border-radius: 14px; padding: .2rem; padding-right: 2.9rem |
.tryvio-modal__tab | border-radius: 11px; color: rgba(15,23,42,.42); font-size: .84rem; font-weight: 600; min-height: 38px |
.tryvio-modal__tab--active | background: #ffffff; color: #111827; box-shadow: 0 8px 18px rgba(15,23,42,.08), 0 0 0 1px rgba(15,23,42,.04) |
Duplication — .tryvio-modal__tabs has two top-level definitions (~288, ~1767).
Camera controls
| Class | Size | Color / style | Notes |
|---|---|---|---|
.tryvio-modal__capture | 52px | #ff3b30 fill; 3.5px white ring | Shutter button, iOS-style |
.tryvio-modal__switch | 40px | rgba(0,0,0,.06) | Switch front/back camera |
.tryvio-modal__mirror-toggle | 34px | Active: rgba(0,122,255,.16) bg / #007aff icon | Mirror toggle |
Logo chip — .tryvio-modal__media-brand
Positioned absolute top: 26px; left: 22px. Size: 38px × 38px. border-radius: 14px.
Glass background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.16)), rgba(255,255,255,.12).
backdrop-filter: blur(20px) saturate(1.18). Inset highlight: inset 0 1px 0 rgba(255,255,255,.42).
pointer-events: none.
Asset: tryvio-logo-icon.png (icon only). Full wordmark: tryvio-logo.svg.
Dropzone — .tryvio-modal__dropzone
| Class | State / use |
|---|---|
.tryvio-modal__dropzone | Default empty upload area; dashed border |
.tryvio-modal__dropzone-label | ”Drop photo here or click to browse” |
.tryvio-modal__dropzone-hint | ”JPG, PNG, WebP or iPhone photos · Max 25MB” |
.tryvio-modal__dropzone--dragover | Applied while a file is dragged over the zone |
.tryvio-modal__dropzone--loading | Applied while the selected file is being read |
Loading bar — .tryvio-modal__loading
| Class | Role |
|---|---|
.tryvio-modal__loading | Wrapper (absolute overlay on the panel) |
.tryvio-modal__loading-track | Full-width progress track |
.tryvio-modal__loading-fill | Animated fill; width driven by percent |
.tryvio-modal__loading-text | ”Analyzing your photo…” |
.tryvio-modal__loading-estimate | ”Usually takes 30 to 90 seconds.” |
.tryvio-modal__loading-percent | Numeric percent value |
Known duplications (cleanup targets)
The following classes have multiple conflicting top-level definitions in tryvio-theme.css.
Consolidating them will reduce specificity surprises and simplify future changes.
| Class | Count | Recommended action |
|---|---|---|
.tryvio-modal__close | 3 top-level + email-capture override | Unify into one rule; use data-attribute or modifier for size variants |
.tryvio-modal__panel | 2 | Keep one base definition; use a modifier (e.g. --media) for mode B |
.tryvio-modal__tabs | 2 | Merge into one definition |
.tryvio-modal__btn | 2 | Merge base into one; keep variants as-is |
.tryvio-modal__btn--cart | Duplicates --primary | Extend --primary or alias |
A live visual reference of the components (links the real CSS without a deploy) exists at
shopify-app/playwright-debug/mockups/component-guidelines.html — dev artifact only.