omniai-web/src/styles/pages/local-theme-parity.css

/* Local preview theme parity: scoped to ecommerce/template pages, colors and border tones only. */

.product-clone-page[data-tool="clone"] {
  background: var(--bg-base);
  color: var(--fg-body);
}

.product-clone-page[data-tool="clone"] > .product-clone-shell,
.product-clone-page[data-tool="clone"] .clone-ai-preview {
  background: var(--bg-base);
}

.product-clone-page[data-tool="clone"] .product-clone-panel,
.product-clone-page[data-tool="clone"] .clone-ai-panel::-webkit-scrollbar-track {
  background: var(--bg-panel);
}

.product-clone-page[data-tool="clone"] .product-clone-panel,
.product-clone-page[data-tool="clone"] :is(
  .clone-ai-logo,
  .clone-ai-card,
  .clone-ai-platform-spec,
  .clone-ai-count-panel,
  .clone-ai-replicate-panel,
  .clone-ai-module-panel,
  .clone-ai-model-panel,
  .clone-ai-video-panel,
  .clone-ai-empty-state .anticon,
  .clone-ai-main-result,
  .clone-ai-result-grid button,
  .clone-ai-input-wrapper
) {
  border-color: var(--border-weak);
}

.product-clone-page[data-tool="clone"] :is(
  .clone-ai-logo,
  .clone-ai-card,
  .clone-ai-platform-spec,
  .clone-ai-count-panel,
  .clone-ai-replicate-panel,
  .clone-ai-module-panel,
  .clone-ai-model-panel,
  .clone-ai-video-panel,
  .clone-ai-empty-state .anticon,
  .clone-ai-main-result,
  .clone-ai-result-grid button,
  .clone-ai-input-wrapper
) {
  background: var(--bg-panel);
}

.product-clone-page[data-tool="clone"] :is(
  .clone-ai-logo em,
  .clone-ai-upload-zone,
  .clone-ai-upload-icon,
  .clone-ai-uploaded-file,
  .clone-ai-tag-group button,
  .clone-ai-basic-select > button,
  .clone-ai-basic-select__menu,
  .clone-ai-basic-select__menu button,
  .clone-ai-replicate-tabs button,
  .clone-ai-replicate-upload,
  .clone-ai-replicate-link input,
  .clone-ai-replicate-levels button,
  .clone-ai-count-row,
  .clone-ai-count-stepper button,
  .clone-ai-module-list button,
  .clone-ai-model-tabs button,
  .clone-ai-model-scene-grid button,
  .clone-ai-model-select,
  .clone-ai-model-select > button,
  .clone-ai-model-select__menu,
  .clone-ai-model-select__menu button,
  .clone-ai-video-options button,
  .clone-ai-video-smart,
  .clone-ai-video-smart i,
  .clone-ai-send-button
) {
  border-color: var(--border-subtle);
  background: var(--bg-inset);
  color: var(--fg-muted);
}

.product-clone-page[data-tool="clone"] :is(
  .clone-ai-upload-zone:hover,
  .clone-ai-upload-zone.is-dragging,
  .clone-ai-tag-group button:hover,
  .clone-ai-basic-select > button:hover,
  .clone-ai-basic-select > button.is-open,
  .clone-ai-basic-select__menu button:hover,
  .clone-ai-basic-select__menu button.is-active,
  .clone-ai-replicate-tabs button:hover,
  .clone-ai-replicate-upload:hover,
  .clone-ai-replicate-levels button:hover,
  .clone-ai-count-stepper button:hover:not(:disabled),
  .clone-ai-module-list button:hover,
  .clone-ai-model-tabs button:hover,
  .clone-ai-model-scene-grid button:hover,
  .clone-ai-model-select > button:hover,
  .clone-ai-model-select > button.is-open,
  .clone-ai-model-select__menu button:hover,
  .clone-ai-model-select__menu button.is-active,
  .clone-ai-video-options button:hover,
  .clone-ai-video-smart:hover,
  .clone-ai-send-button:hover:not(:disabled),
  .clone-ai-main-result:hover,
  .clone-ai-result-grid button:hover
) {
  border-color: var(--border-default);
  background: var(--bg-hover);
  color: var(--fg-body);
}

.product-clone-page[data-tool="clone"] :is(
  .clone-ai-logo em.is-ready,
  .clone-ai-tag-group button.is-active,
  .clone-ai-basic-select__menu button.is-active,
  .clone-ai-replicate-tabs button.is-active,
  .clone-ai-replicate-levels button.is-active,
  .clone-ai-module-list button.is-active,
  .clone-ai-model-tabs button.is-active,
  .clone-ai-model-scene-grid button.is-active,
  .clone-ai-model-select__menu button.is-active,
  .clone-ai-video-options button.is-active,
  .clone-ai-video-smart.is-on
) {
  border-color: rgba(var(--accent-rgb), 0.42);
  background: var(--accent-muted);
  color: var(--accent);
}

.product-clone-page[data-tool="clone"] :is(
  .clone-ai-logo strong,
  .clone-ai-card h2,
  .clone-ai-platform-spec strong,
  .clone-ai-basic-select > button strong,
  .clone-ai-model-select > button strong,
  .clone-ai-preview-header strong,
  .clone-ai-empty-state strong,
  .clone-ai-input-wrapper textarea
) {
  color: var(--fg-body);
}

.product-clone-page[data-tool="clone"] :is(
  .clone-ai-logo em,
  .clone-ai-card h2 .anticon,
  .clone-ai-upload-title,
  .clone-ai-upload-hint,
  .clone-ai-settings-label,
  .clone-ai-basic-select > button span,
  .clone-ai-model-select > button span,
  .clone-ai-preview-header span,
  .clone-ai-empty-state,
  .clone-ai-empty-state span,
  .clone-ai-char-count,
  .clone-ai-input-wrapper textarea::placeholder
) {
  color: var(--fg-muted);
}

.product-clone-page[data-tool="clone"] :is(
  .clone-ai-logo__mark,
  .clone-ai-upload-zone strong,
  .clone-ai-generate,
  .clone-ai-send-button
) {
  background: var(--accent);
  color: var(--dg-button-text, #061014);
}

.product-clone-page[data-tool="clone"] :is(
  .clone-ai-logo strong span,
  .clone-ai-upload-icon,
  .clone-ai-preview-header b,
  .clone-ai-video-smart.is-on i::after
) {
  color: var(--accent);
}

.product-clone-page[data-tool="clone"] :is(
  .clone-ai-generate:disabled,
  .clone-ai-send-button:disabled
) {
  background: var(--bg-inset);
  color: var(--fg-soft);
}

.product-clone-page[data-tool="clone"] .clone-ai-flow-arrow {
  background: var(--accent);
}

.product-clone-page[data-tool="clone"] .clone-ai-video-smart.is-on i {
  border-color: rgba(var(--accent-rgb), 0.42);
  background: var(--accent-muted);
}

.product-clone-page[data-tool="clone"] .clone-ai-settings-toggle {
  border-color: var(--border-default);
  background: var(--bg-panel);
  color: var(--fg-muted);
}

.product-clone-page[data-tool="clone"] .clone-ai-settings-toggle:hover,
.product-clone-page[data-tool="clone"] .clone-ai-settings-toggle:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.42);
  background: var(--bg-hover);
  color: var(--accent);
}

.size-template-workbench {
  --size-green: var(--accent);
  --size-cyan: var(--accent);
  --size-violet: var(--accent);
  --size-amber: var(--accent);
}

.size-template-workbench .product-clone-panel,
.size-template-workbench :is(
  .size-template-upload-card,
  .size-template-generate-card,
  .size-template-platform-dialog,
  .size-template-main-frame,
  .size-template-spec-grid,
  .size-template-preview-note,
  .size-template-empty-state__image
) {
  border-color: var(--border-weak);
  background: var(--bg-panel);
  color: var(--fg-body);
}

.size-template-workbench :is(.size-template-detail-card span, .size-template-check-list span) {
  border-color: var(--border-subtle);
  background: var(--bg-inset);
  color: var(--fg-muted);
}

.size-template-workbench :is(
  .size-template-upload-card h2,
  .size-template-generate-card h2,
  .size-template-main-frame span,
  .size-template-spec-grid b,
  .size-template-preview-note > div:first-child
) {
  color: var(--fg-body);
}

.size-template-workbench :is(.size-template-platform-dialog button, .size-template-preview-note p) {
  color: var(--fg-muted);
}

.size-template-workbench :is(
  .size-template-static-field.is-clickable > button:hover,
  .size-template-static-field.is-clickable > button[aria-expanded="true"],
  .size-template-platform-dialog button:hover,
  .size-template-platform-dialog button.is-active
) {
  border-color: var(--border-default);
  background: var(--bg-hover);
  color: var(--fg-body);
}

.size-template-workbench :is(
  .size-template-preview-note > div:first-child .anticon,
  .size-template-check-list .anticon
) {
  color: var(--accent);
}

.web-shell[data-ui-theme="dark-green"] .omni-commerce-page {
  --commerce-accent: var(--accent);
  --commerce-accent-strong: var(--accent);
  --commerce-accent-rgb: var(--accent-rgb);
  --commerce-ink: var(--fg-body);
  --commerce-muted: var(--fg-muted);
  --commerce-line: var(--border-subtle);
  --commerce-panel: var(--bg-panel);
  --commerce-soft: var(--bg-inset);
  background: var(--bg-base);
  color: var(--fg-body);
}

.web-shell[data-ui-theme="dark-green"] .omni-commerce-page :is(
  .omni-commerce-panel,
  .omni-commerce-band,
  .omni-commerce-flow-head,
  .omni-commerce-template,
  .omni-commerce-project
) {
  border-color: var(--border-weak);
  background: var(--bg-panel);
  color: var(--fg-body);
}

.web-shell[data-ui-theme="dark-green"] .omni-commerce-page :is(
  .omni-commerce-ghost-action,
  .omni-commerce-text-button,
  .omni-commerce-segmented button,
  .omni-commerce-ratio-grid button,
  .omni-commerce-filter button,
  .omni-commerce-flow-head button,
  .omni-commerce-template em,
  .omni-commerce-search,
  .omni-commerce-project__delete
) {
  border-color: var(--border-subtle);
  background: var(--bg-inset);
  color: var(--fg-muted);
}

.web-shell[data-ui-theme="dark-green"] .omni-commerce-page :is(
  .omni-commerce-ghost-action:hover,
  .omni-commerce-text-button:hover,
  .omni-commerce-segmented button:hover,
  .omni-commerce-ratio-grid button:hover,
  .omni-commerce-filter button:hover,
  .omni-commerce-flow-head button:hover,
  .omni-commerce-template__select:hover em,
  .omni-commerce-project__delete:hover
) {
  border-color: var(--border-default);
  background: var(--bg-hover);
  color: var(--fg-body);
}

.web-shell[data-ui-theme="dark-green"] .omni-commerce-page :is(
  .omni-commerce-segmented button.is-active,
  .omni-commerce-ratio-grid button.is-active,
  .omni-commerce-filter button.is-active,
  .omni-commerce-step-head > span,
  .omni-commerce-template span
) {
  border-color: rgba(var(--accent-rgb), 0.42);
  background: var(--accent-muted);
  color: var(--accent);
}

.web-shell[data-ui-theme="dark-green"] .omni-commerce-page :is(
  .omni-commerce-section-head h2,
  .omni-commerce-template strong,
  .omni-commerce-project strong,
  .omni-commerce-search input
) {
  color: var(--fg-body);
}

.web-shell[data-ui-theme="dark-green"] .omni-commerce-page :is(
  .omni-commerce-section-head span,
  .omni-commerce-template p,
  .omni-commerce-project span,
  .omni-commerce-search,
  .omni-commerce-search input::placeholder
) {
  color: var(--fg-muted);
}

.web-shell[data-ui-theme="dark-green"] .omni-commerce-page .omni-commerce-section-head .anticon {
  color: var(--accent);
}

.web-shell[data-ui-theme="dark-green"] .ecommerce-template-apple-card {
  border: 1px solid var(--border-weak);
  background: var(--bg-panel);
  color: var(--fg-body);
}

.web-shell[data-ui-theme="dark-green"] .ecommerce-template-apple-card:hover,
.web-shell[data-ui-theme="dark-green"] .ecommerce-template-apple-card.is-active {
  border-color: rgba(var(--accent-rgb), 0.42);
  background: var(--bg-panel);
}