@webority/theme 0.7.7 → 0.7.9

package/scss/wui/_flow.scss

@@ -5,9 +5,24 @@
 // partials are a split of one stylesheet, not independent modules, so a rule
 // here may be overridden by a later partial. Never reorder the imports.
 
-// Wizard stepper. Two variants of one component:
+// Wizard stepper. Three variants of one component:
 //   .stepper           — compact: numbered circle above a label, line behind.
 //   .stepper-journey   — wide: 40px dot beside a label + title, for a page masthead.
+//   .stepper-icons     — large connected icon badges with a "STEP n" eyebrow.
+//
+// Fully themable through a small set of `--wui-step-*` custom properties — set them on
+// the stepper (or the wizard host, or any ancestor: they inherit), or flip the whole
+// accent with a `.wui-step-tone-*` class. Every colour/size below reads a var with the
+// historical value as the fallback, so an UNSET wizard looks exactly as before while a
+// product can recolour or resize it without overriding a single selector:
+//   --wui-step-accent      solid state colour (active fill, done fill/rail, active eyebrow)
+//   --wui-step-accent-fg   text/icon on the accent fill
+//   --wui-step-soft        soft tint (active ring; the journey/icons "done" badge bg)
+//   --wui-step-soft-fg     text/icon on the soft tint (the "done" badge check)
+//   --wui-step-connector   the incomplete-rail colour
+//   --wui-step-size        compact/vertical badge diameter (default 28px)
+//   --wui-step-badge-size  icons-variant badge diameter (default 56px)
+// The icons variant defaults its accent to success (green); the others to primary.
 // ============================================================================
 .stepper {
     // Full width so the flex:1 steps spread evenly across the container. Without it,
@@ -34,23 +49,23 @@
 .step + .step::before {
     content: "";
     position: absolute;
-    // 13px = half the 28px circle, minus 1 for the 2px line's own height.
-    top: 13px;
-    left: calc(-50% + 18px);
-    right: calc(50% + 18px);
+    // Centred on the badge: half the diameter, minus 1 for the 2px line's own height.
+    top: calc(var(--wui-step-size, 28px) / 2 - 1px);
+    left: calc(-50% + var(--wui-step-size, 28px) / 2 + 4px);
+    right: calc(50% + var(--wui-step-size, 28px) / 2 + 4px);
     height: 2px;
-    background: var(--color-border);
+    background: var(--wui-step-connector, var(--color-border));
     z-index: 0;
 }
 .step.done + .step::before {
-    background: var(--color-primary);
+    background: var(--wui-step-accent, var(--color-primary));
 }
 .step-circle {
     position: relative;
     z-index: 1;
     flex: none;
-    width: 28px;
-    height: 28px;
+    width: var(--wui-step-size, 28px);
+    height: var(--wui-step-size, 28px);
     display: inline-grid;
     place-items: center;
     border: 1.5px solid var(--color-border);
@@ -61,15 +76,15 @@
     color: var(--color-text-subtle);
 }
 .step.active .step-circle {
-    border-color: var(--color-primary);
-    background: var(--color-primary);
-    color: var(--color-on-scrim);
-    box-shadow: 0 0 0 4px var(--color-primary-soft);
+    border-color: var(--wui-step-accent, var(--color-primary));
+    background: var(--wui-step-accent, var(--color-primary));
+    color: var(--wui-step-accent-fg, var(--color-on-scrim));
+    box-shadow: 0 0 0 4px var(--wui-step-soft, var(--color-primary-soft));
 }
 .step.done .step-circle {
-    border-color: var(--color-primary);
-    background: var(--color-primary);
-    color: var(--color-on-scrim);
+    border-color: var(--wui-step-accent, var(--color-primary));
+    background: var(--wui-step-accent, var(--color-primary));
+    color: var(--wui-step-accent-fg, var(--color-on-scrim));
 }
 .step-label {
     max-width: 130px;
@@ -101,12 +116,12 @@ button.step {
 }
 a.step:hover .step-circle,
 button.step:hover .step-circle {
-    box-shadow: 0 0 0 4px var(--color-primary-soft);
+    box-shadow: 0 0 0 4px var(--wui-step-soft, var(--color-primary-soft));
     transform: scale(1.04);
 }
 a.step:hover .step-label,
 button.step:hover .step-label {
-    color: var(--color-primary);
+    color: var(--wui-step-accent, var(--color-primary));
 }
 a.step:focus-visible,
 button.step:focus-visible {
@@ -116,8 +131,8 @@ button.step:focus-visible {
 a.step:focus-visible .step-circle,
 button.step:focus-visible .step-circle {
     box-shadow:
-        0 0 0 4px var(--color-primary-soft),
-        0 0 0 6px var(--color-primary);
+        0 0 0 4px var(--wui-step-soft, var(--color-primary-soft)),
+        0 0 0 6px var(--wui-step-accent, var(--color-primary));
 }
 // A step that failed its stage — a red circle with an alert, so an invalid step
 // reads as wrong at a glance rather than merely "not done".
@@ -173,12 +188,12 @@ button.step:focus-visible .step-circle {
         transform 0.2s ease;
 }
 .stepper-journey .step.done .step-circle {
-    background: var(--color-success-soft);
-    color: var(--color-success-text);
+    background: var(--wui-step-soft, var(--color-success-soft));
+    color: var(--wui-step-soft-fg, var(--color-success-text));
 }
 .stepper-journey .step.active .step-circle {
-    background: var(--color-primary);
-    color: var(--color-on-scrim);
+    background: var(--wui-step-accent, var(--color-primary));
+    color: var(--wui-step-accent-fg, var(--color-on-scrim));
     box-shadow: none;
     transform: scale(1.06);
 }
@@ -199,10 +214,10 @@ button.step:focus-visible .step-circle {
     color: var(--color-text-subtle);
 }
 .stepper-journey .step.done .step-index {
-    color: var(--color-success-text);
+    color: var(--wui-step-soft-fg, var(--color-success-text));
 }
 .stepper-journey .step.active .step-index {
-    color: var(--color-primary);
+    color: var(--wui-step-accent, var(--color-primary));
 }
 .stepper-journey .step.error .step-circle {
     background: var(--color-danger-soft);
@@ -240,7 +255,7 @@ button.step:focus-visible .step-circle {
     background: var(--color-border-strong);
 }
 .stepper-journey .step-line.done {
-    background: var(--color-success);
+    background: var(--wui-step-accent, var(--color-success));
 }
 // Below xl the four label+title pairs no longer fit side by side, so the bar
 // becomes a vertical list and the connectors go away.
@@ -270,7 +285,7 @@ button.step:focus-visible .step-circle {
 // left, the label and its description stacked on the right.
 .stepper-vertical .step {
     display: grid;
-    grid-template-columns: 28px 1fr;
+    grid-template-columns: var(--wui-step-size, 28px) 1fr;
     column-gap: 12px;
     // No gap between the label and its description — they read as one block; the
     // base .step gap of 10px is for the horizontal circle→label spacing.
@@ -307,18 +322,18 @@ button.step:focus-visible .step-circle {
 .stepper-vertical .step:not(:last-child)::after {
     content: "";
     position: absolute;
-    // 13px = half the 28px circle minus 1 for the 2px line's own width.
-    left: 13px;
-    top: 28px;
+    // Half the badge minus 1 for the 2px line's own width; runs from below the circle.
+    left: calc(var(--wui-step-size, 28px) / 2 - 1px);
+    top: var(--wui-step-size, 28px);
     // Reaches through the 18px inter-step gap to meet the next circle's top; keep
     // this in sync with the .stepper-vertical `gap`.
     bottom: -18px;
     width: 2px;
-    background: var(--color-border);
+    background: var(--wui-step-connector, var(--color-border));
     z-index: 0;
 }
 .stepper-vertical .step.done:not(:last-child)::after {
-    background: var(--color-primary);
+    background: var(--wui-step-accent, var(--color-primary));
 }
 // The journey bar stacked vertically reuses its own narrow-width treatment: a plain
 // column with the horizontal connectors dropped (a real vertical rail here would
@@ -332,15 +347,169 @@ button.step:focus-visible .step-circle {
     display: none;
 }
 
+// .stepper-icons — large icon badges joined by a rail, with a "STEP n" eyebrow above
+// each title. Done tints green with a filled connector; active is a solid primary
+// badge; pending is a muted badge. Built for icon-per-step flows — each step sets `icon`
+// (a step with no icon falls back to its number).
+// ----------------------------------------------------------------------------
+.stepper-icons {
+    align-items: flex-start;
+    padding: 8px 8px 0;
+}
+.stepper-icons .step {
+    gap: 6px;
+}
+.stepper-icons .step-circle {
+    width: var(--wui-step-badge-size, 56px);
+    height: var(--wui-step-badge-size, 56px);
+    border: none;
+    background: var(--color-bg-muted);
+    color: var(--color-text-subtle);
+    font-size: 22px;
+    transition:
+        background 0.2s ease,
+        color 0.2s ease,
+        transform 0.2s ease;
+}
+// The icons variant defaults its accent to success (green), so an untoned icons wizard
+// reads green — solid-green active badge, soft-green done badge, green rail. Every colour
+// still routes through the shared --wui-step-* vars, so a tone class or an override recolours it.
+.stepper-icons .step.active .step-circle {
+    background: var(--wui-step-accent, var(--color-success));
+    color: var(--wui-step-accent-fg, var(--color-on-scrim));
+    // The compact variant rings the active circle; here the solid fill carries it, so
+    // drop the ring to match the flat badge look.
+    box-shadow: none;
+}
+.stepper-icons .step.done .step-circle {
+    border: none;
+    background: var(--wui-step-soft, var(--color-success-soft));
+    color: var(--wui-step-soft-fg, var(--color-success-text));
+}
+.stepper-icons .step.error .step-circle {
+    background: var(--color-danger-soft);
+    color: var(--color-danger-text);
+}
+.stepper-icons .step.skipped .step-circle {
+    background: var(--color-bg-muted);
+    border: 1px dashed var(--color-border-strong);
+    color: var(--color-text-muted);
+}
+// The "STEP n" eyebrow sits between the badge and the title, colour-matched to the state.
+.stepper-icons .step-index {
+    margin-top: 4px;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1.2;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--color-text-subtle);
+}
+.stepper-icons .step.active .step-index {
+    color: var(--wui-step-accent, var(--color-success));
+}
+.stepper-icons .step.done .step-index {
+    color: var(--wui-step-soft-fg, var(--color-success-text));
+}
+.stepper-icons .step.error .step-index {
+    color: var(--color-danger-text);
+}
+.stepper-icons .step-label {
+    max-width: 150px;
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--color-text-subtle);
+}
+.stepper-icons .step.active .step-label,
+.stepper-icons .step.done .step-label {
+    color: var(--color-text);
+}
+// The rail: thicker and rounded, recentred on the badge (half the diameter − 2 for the
+// 4px line's own height), and filled with the accent once the step to its left is done.
+.stepper-icons .step + .step::before {
+    top: calc(var(--wui-step-badge-size, 56px) / 2 - 2px);
+    left: calc(-50% + var(--wui-step-badge-size, 56px) / 2 + 8px);
+    right: calc(50% + var(--wui-step-badge-size, 56px) / 2 + 8px);
+    height: 4px;
+    border-radius: 999px;
+    background: var(--wui-step-connector, var(--color-border));
+}
+.stepper-icons .step.done + .step::before {
+    background: var(--wui-step-accent, var(--color-success));
+}
+// The compact hover ring is calibrated to the 28px badge; the 56px icon badge just
+// lifts on hover instead.
+.stepper-icons a.step:hover .step-circle,
+.stepper-icons button.step:hover .step-circle {
+    box-shadow: none;
+    transform: scale(1.04);
+}
+// Below md the six badges no longer fit across, so the icons stepper stacks into a
+// vertical list — the shared .stepper-vertical rules take over from here.
+@include media-breakpoint-down(md) {
+    .stepper-icons.stepper-icons {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 20px;
+    }
+    .stepper-icons.stepper-icons .step {
+        flex-direction: row;
+        align-items: center;
+        gap: 14px;
+        text-align: left;
+    }
+    .stepper-icons.stepper-icons .step + .step::before {
+        content: none;
+    }
+}
+
 @media (prefers-reduced-motion: reduce) {
     a.step:hover .step-circle,
     button.step:hover .step-circle,
-    .stepper-journey .step-circle {
+    .stepper-journey .step-circle,
+    .stepper-icons .step-circle {
         transition: none;
         transform: none;
     }
 }
 
+// Tone presets — flip the whole accent (active fill, done rail, ring, journey/icons
+// done tint) to a semantic ramp in one class. Because custom properties inherit, the
+// class can sit on the stepper itself OR on an ancestor (the wizard host), and an inline
+// `style="--wui-step-accent: …"` on a closer element still wins over it. Placing the
+// class recolours every variant consistently; error steps stay red regardless (semantic).
+// ----------------------------------------------------------------------------
+.wui-step-tone-primary {
+    --wui-step-accent: var(--color-primary);
+    --wui-step-accent-fg: var(--color-on-scrim);
+    --wui-step-soft: var(--color-primary-soft);
+    --wui-step-soft-fg: var(--color-primary);
+}
+.wui-step-tone-success {
+    --wui-step-accent: var(--color-success);
+    --wui-step-accent-fg: var(--color-on-scrim);
+    --wui-step-soft: var(--color-success-soft);
+    --wui-step-soft-fg: var(--color-success-text);
+}
+.wui-step-tone-warning {
+    --wui-step-accent: var(--color-warning);
+    --wui-step-accent-fg: var(--color-on-scrim);
+    --wui-step-soft: var(--color-warning-soft);
+    --wui-step-soft-fg: var(--color-warning-text);
+}
+.wui-step-tone-danger {
+    --wui-step-accent: var(--color-danger);
+    --wui-step-accent-fg: var(--color-on-scrim);
+    --wui-step-soft: var(--color-danger-soft);
+    --wui-step-soft-fg: var(--color-danger-text);
+}
+.wui-step-tone-info {
+    --wui-step-accent: var(--color-info);
+    --wui-step-accent-fg: var(--color-on-scrim);
+    --wui-step-soft: var(--color-info-soft);
+    --wui-step-soft-fg: var(--color-info-text);
+}
+
 // ============================================================================
 // Pricing card. A tier's name, price, pitch, feature list and CTA.
 //
@@ -616,4 +785,51 @@ button.step:focus-visible .step-circle {
     .form-actions-sticky {
         transition: none;
     }
+}
+
+// ============================================================================
+// AppWizard (<wui-wizard>) — stepper header + one visible step panel + a sticky
+// Back/Skip/Next/Finish footer. Composes .stepper and .form-actions above.
+// ============================================================================
+wui-wizard {
+    display: block;
+}
+// Custom elements don't inherit the UA `[hidden] { display: none }` once we give the
+// tag its own `display`, so the inactive panels need it stated explicitly.
+wui-wizard-step {
+    display: block;
+}
+wui-wizard-step[hidden] {
+    display: none;
+}
+.wizard-stepper {
+    margin-bottom: 24px;
+}
+// A skipped step reads as "passed over", not "achieved": a dashed, muted circle so it
+// is visibly distinct from a ticked (done) step.
+.step.skipped .step-circle {
+    background: var(--color-bg-muted);
+    border: 1px dashed var(--color-border-strong);
+    color: var(--color-text-muted);
+}
+.wizard-panel {
+    // A resting min-height so the footer doesn't jump as steps of different length
+    // swap in; content taller than this simply grows the panel.
+    min-height: 96px;
+}
+.wizard-footer {
+    // The sticky Back/Skip/Next/Finish bar — pinned to the bottom of a scrolling flow
+    // so the actions (and the Skip on an optional step) are always in reach.
+    position: sticky;
+    bottom: 0;
+    margin-top: 24px;
+    padding: 16px 0;
+    border-top: 1px solid var(--color-border);
+    background: var(--color-surface);
+    z-index: 1;
+}
+.wizard-footer-actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
 }

package/scss/wui/_media.scss

@@ -127,7 +127,7 @@
     padding: 0 4px;
     border-radius: 999px;
     background: var(--color-danger);
-    color: #fff;
+    color: var(--wui-bg-light);
     font-size: 10px;
     font-weight: 700;
     line-height: 1;