@prolibu-suite/cobalt-form 0.1.0 → 0.2.0

package/dist/collection/components/co-form-wizard/co-form-wizard.css

@@ -0,0 +1,363 @@
+:host {
+  display: block;
+  font-family: var(--co-font-family-primary, sans-serif);
+}
+
+/* The wizard is a stack of cards: title-block, optional stepper, and the
+ * active page card. Mirrors the layered structure from the builder's
+ * Designer (title card → page card → fields) so the two views feel
+ * coherent. */
+.co-form-wizard {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: var(--co-spacing-2xl, 24px);
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-lg, 16px);
+}
+
+/* When a background (color or image) is set, the cards "float" with a
+ * heavier drop shadow and no border so the bg can breathe around them. */
+.co-form-wizard[data-has-bg] {
+  padding: var(--co-spacing-3xl, 32px) var(--co-spacing-2xl, 24px);
+  background-repeat: no-repeat;
+}
+
+/* ── Title block — its own card. Honors theme.header.* overrides. ───── */
+.co-form-wizard__title-block {
+  background: var(--co-form-header-bg, var(--co-semantic-surface-page, #fff));
+  border: 1px solid var(--co-semantic-border-default, rgba(17, 24, 39, 0.08));
+  border-radius: var(--co-border-radius-lg, 16px);
+  padding: var(--co-spacing-2xl, 24px) var(--co-spacing-3xl, 28px);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  min-height: var(--co-form-header-height, auto);
+}
+
+/* When `show header = off`, hide the title block entirely. */
+.co-form-wizard[data-hide-header] .co-form-wizard__title-block {
+  display: none;
+}
+
+/* Compact density — tighter gaps between cards and inside them. */
+.co-form-wizard[data-density="compact"] .co-form-wizard {
+  gap: var(--co-spacing-sm, 8px);
+}
+
+.co-form-wizard[data-density="compact"] .co-form-wizard__title-block {
+  padding: var(--co-spacing-lg, 16px) var(--co-spacing-xl, 20px);
+}
+
+.co-form-wizard[data-density="compact"] .co-form-wizard__page-head,
+.co-form-wizard[data-density="compact"] .co-form-wizard__nav {
+  padding-top: var(--co-spacing-sm, 8px);
+  padding-bottom: var(--co-spacing-sm, 8px);
+}
+
+.co-form-wizard__title {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+  color: var(--co-semantic-text-default, #111827);
+}
+
+.co-form-wizard__title-desc {
+  margin: 6px 0 0;
+  font-size: var(--co-font-size-14, 14px);
+  color: var(--co-semantic-text-secondary, #6b7280);
+}
+
+/* ── Stepper — floats between cards, no card chrome ─────────────────── */
+.co-form-wizard__stepper {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-sm, 8px);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  flex-wrap: wrap;
+}
+
+.co-form-wizard__step {
+  display: flex;
+  align-items: center;
+  color: var(--co-semantic-text-secondary, #6b7280);
+  font-size: var(--co-font-size-12, 12px);
+}
+
+.co-form-wizard__step-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--co-spacing-xs, 4px);
+  padding: 4px 6px;
+  border: 0;
+  background: transparent;
+  border-radius: var(--co-border-radius-xxs, 4px);
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+.co-form-wizard__step-btn:hover {
+  background: var(--co-semantic-surface-hover, #f3f4f6);
+  color: var(--co-semantic-text-default, #111827);
+}
+
+.co-form-wizard__step-num {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--co-border-radius-full, 9999px);
+  background: var(--co-semantic-surface-hover, #f3f4f6);
+  font-weight: 600;
+}
+
+.co-form-wizard__step.is-active .co-form-wizard__step-num {
+  background: var(--co-color-primary-azul, #2563eb);
+  color: white;
+}
+
+.co-form-wizard__step.is-done .co-form-wizard__step-num {
+  background: var(--co-color-primary-verde, #02a270);
+  color: white;
+}
+
+.co-form-wizard__step.is-active {
+  color: var(--co-semantic-text-default, #111827);
+  font-weight: 600;
+}
+
+/* ── Page card — wraps page header + form + nav ─────────────────────── */
+.co-form-wizard__page-card {
+  background: var(--co-semantic-surface-page, #fff);
+  border: 1px solid var(--co-semantic-border-default, rgba(17, 24, 39, 0.08));
+  border-radius: var(--co-border-radius-lg, 16px);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.co-form-wizard__page-head {
+  padding: var(--co-spacing-xl, 20px) var(--co-spacing-2xl, 24px);
+  border-bottom: 1px solid var(--co-semantic-border-default, rgba(17, 24, 39, 0.08));
+  background: var(--co-semantic-surface-hover, #f9fafb);
+}
+
+.co-form-wizard__page-pill {
+  display: inline-flex;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  color: var(--co-color-primary-azul, #2563eb);
+  background: color-mix(in srgb, var(--co-color-primary-azul) 10%, transparent);
+  padding: 3px 8px;
+  border-radius: var(--co-border-radius-full, 9999px);
+  margin-bottom: 6px;
+}
+
+.co-form-wizard__page-title {
+  margin: 0;
+  font-size: var(--co-font-size-18, 18px);
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+  color: var(--co-semantic-text-default, #111827);
+}
+
+.co-form-wizard__page-desc {
+  margin: 4px 0 0;
+  font-size: var(--co-font-size-13, 13px);
+  color: var(--co-semantic-text-secondary, #6b7280);
+}
+
+/* Inner <co-form> sits in the page card body with its own padding. */
+.co-form-wizard__page-card > co-form {
+  display: block;
+  padding: var(--co-spacing-xl, 20px) var(--co-spacing-2xl, 24px);
+}
+
+/* ── Nav (Anterior / Siguiente / Enviar) ────────────────────────────── */
+.co-form-wizard__nav {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--co-spacing-sm, 8px);
+  padding: var(--co-spacing-md, 12px) var(--co-spacing-2xl, 24px);
+  border-top: 1px solid var(--co-semantic-border-default, rgba(17, 24, 39, 0.08));
+  background: var(--co-semantic-surface-hover, #f9fafb);
+}
+
+.co-form-wizard__empty {
+  padding: var(--co-spacing-lg, 16px);
+  text-align: center;
+  color: var(--co-semantic-text-secondary, #6b7280);
+}
+
+/* ── Score panel (quiz mode) ────────────────────────────────────────── */
+.co-form-wizard__score {
+  text-align: center;
+  padding: var(--co-spacing-2xl, 24px);
+  background: var(--co-semantic-surface-page, #fff);
+  border: 1px solid var(--co-semantic-border-default, rgba(17, 24, 39, 0.08));
+  border-radius: var(--co-border-radius-lg, 16px);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+.co-form-wizard__score-title {
+  margin: 0;
+  font-size: var(--co-font-size-18, 18px);
+}
+
+.co-form-wizard__score-num {
+  font-size: 48px;
+  font-weight: 600;
+  color: var(--co-color-primary-azul, #2563eb);
+  margin: var(--co-spacing-md, 12px) 0;
+}
+
+.co-form-wizard__score-pct {
+  font-size: var(--co-font-size-16, 16px);
+  color: var(--co-semantic-text-secondary, #6b7280);
+  margin-left: var(--co-spacing-sm, 8px);
+}
+
+.co-form-wizard__score-pass {
+  display: inline-block;
+  padding: var(--co-spacing-xs, 4px) var(--co-spacing-md, 12px);
+  border-radius: var(--co-border-radius-full, 9999px);
+  font-weight: 600;
+  margin-bottom: var(--co-spacing-md, 12px);
+}
+
+.co-form-wizard__score-pass.is-pass {
+  background: var(--co-color-status-success, #0a7724);
+  color: white;
+}
+
+.co-form-wizard__score-pass.is-fail {
+  background: var(--co-color-status-error, #aa2e1b);
+  color: white;
+}
+
+.co-form-wizard__score-feedback {
+  text-align: left;
+  list-style: disc;
+  padding-left: var(--co-spacing-2xl, 24px);
+  color: var(--co-semantic-text-default, #111827);
+}
+
+/* ── With background image / color: heavier shadow, no border ───────── */
+.co-form-wizard[data-has-bg] .co-form-wizard__title-block,
+.co-form-wizard[data-has-bg] .co-form-wizard__page-card,
+.co-form-wizard[data-has-bg] .co-form-wizard__score {
+  border: 0;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+}
+
+/* ── Dark mode ───────────────────────────────────────────────────────
+ * Re-bind the semantic surface tokens at this scope so EVERY descendant
+ * (cards, inputs, buttons) inherits a coherent dark palette. Inputs use
+ * `--co-semantic-surface-secondary` for their background — we set it to
+ * the same value as the card surface so inputs read as "part of the
+ * card" with their border (--co-semantic-border-subtle) doing the
+ * delineation work. Cobalt's global dark tokens (loaded via
+ * cobalt-tokens/css/dark) would put inputs on a different darker shade
+ * than the card; that mismatch was producing the "almost black box on
+ * dark gray card" effect.
+ */
+.co-form-wizard[data-theme="dark"] {
+  --co-semantic-surface-page: #1a1f2b;
+  --co-semantic-surface-secondary: #1a1f2b;
+  --co-semantic-surface-primary: #ffffff;
+  --co-semantic-surface-muted: #2a3142;
+  --co-semantic-surface-hover: rgba(255, 255, 255, 0.06);
+  --co-semantic-surface-disabled: rgba(255, 255, 255, 0.04);
+  --co-semantic-text-default: #f9fafb;
+  --co-semantic-text-secondary: #9ca3af;
+  --co-semantic-text-muted: #6b7280;
+  --co-semantic-text-disabled: #4b5563;
+  --co-semantic-border-default: rgba(255, 255, 255, 0.12);
+  --co-semantic-border-subtle: rgba(255, 255, 255, 0.14);
+  --co-semantic-border-strong: rgba(255, 255, 255, 0.25);
+  --co-semantic-border-focus: rgba(255, 255, 255, 0.25);
+  --co-semantic-border-focus-ring: rgba(255, 255, 255, 0.1);
+  color: #f9fafb;
+}
+
+.co-form-wizard[data-theme="dark"] .co-form-wizard__page-card,
+.co-form-wizard[data-theme="dark"] .co-form-wizard__score {
+  background: var(--co-semantic-surface-page);
+  border-color: var(--co-semantic-border-default);
+  color: #f9fafb;
+}
+
+/* Title block honors the header bg override (set when the user picks a
+ * color in Theme → Header) BEFORE falling back to the dark card surface. */
+.co-form-wizard[data-theme="dark"] .co-form-wizard__title-block {
+  background: var(--co-form-header-bg, var(--co-semantic-surface-page));
+  border-color: var(--co-semantic-border-default);
+  color: #f9fafb;
+}
+
+.co-form-wizard[data-theme="dark"] .co-form-wizard__title,
+.co-form-wizard[data-theme="dark"] .co-form-wizard__page-title {
+  color: #f9fafb;
+}
+
+.co-form-wizard[data-theme="dark"] .co-form-wizard__title-desc,
+.co-form-wizard[data-theme="dark"] .co-form-wizard__page-desc {
+  color: #9ca3af;
+}
+
+.co-form-wizard[data-theme="dark"] .co-form-wizard__page-head,
+.co-form-wizard[data-theme="dark"] .co-form-wizard__nav {
+  background: rgba(255, 255, 255, 0.03);
+  border-color: var(--co-semantic-border-default);
+}
+
+.co-form-wizard[data-theme="dark"] .co-form-wizard__step-num {
+  background: rgba(255, 255, 255, 0.1);
+  color: #f9fafb;
+}
+
+.co-form-wizard[data-theme="dark"][data-has-bg] .co-form-wizard__title-block,
+.co-form-wizard[data-theme="dark"][data-has-bg] .co-form-wizard__page-card,
+.co-form-wizard[data-theme="dark"][data-has-bg] .co-form-wizard__score {
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+}
+
+/* ── "Without panels" appearance ────────────────────────────────────── *
+ * Strips all card chrome so the form lives directly on the canvas bg.
+ */
+.co-form-wizard[data-appearance="flat"] .co-form-wizard__title-block,
+.co-form-wizard[data-appearance="flat"] .co-form-wizard__page-card {
+  background: transparent !important;
+  border: 0 !important;
+  box-shadow: none !important;
+  padding: 0 !important;
+}
+
+.co-form-wizard[data-appearance="flat"] .co-form-wizard__page-head {
+  background: transparent !important;
+  border-bottom: 0 !important;
+  padding: 0 0 var(--co-spacing-md, 12px) 0 !important;
+}
+
+.co-form-wizard[data-appearance="flat"] .co-form-wizard__nav {
+  background: transparent !important;
+  border-top: 0 !important;
+  padding: var(--co-spacing-md, 12px) 0 0 !important;
+}
+
+.co-form-wizard[data-appearance="flat"] .co-form-wizard__page-card > co-form {
+  padding: 0 !important;
+}
+
+/* In flat + dark, just keep the text colors readable. */
+.co-form-wizard[data-appearance="flat"][data-theme="dark"] .co-form-wizard__title-block,
+.co-form-wizard[data-appearance="flat"][data-theme="dark"] .co-form-wizard__page-card {
+  color: #f9fafb;
+}