@morscherlab/mint-sdk 1.2.10 → 1.3.0-beta.10

package/src/styles/components/skeleton.css

@@ -1,49 +1,50 @@
 /* Skeleton Component Styles */
 
 /* ========================================================================
-   Shimmer animation — background-position sweep
+   Breathing animation — opacity 1 ↔ 0.55 over 1.6s (3e)
    ========================================================================
-   Base color sits behind a horizontally-moving lighter band.
-   Spec: 1.6s `background-position` sweep with
-   linear-gradient(90deg, base, light 40%, base 60%).
-   Works for atoms (.sk--*) and for the Skeleton.vue component's
-   `animation='wave'` setting.
+   Theme-independent: it never
+   relies on one surface token being lighter than another (a shimmer band
+   of --bg-secondary reads as a dark stripe in dark mode). Works for atoms
+   (.sk--*) and for the Skeleton.vue component's `animation='wave'` setting.
    ======================================================================== */
 
 .skeleton-wave,
 [class*='sk--'] {
   background-color: var(--bg-tertiary);
-  background-image: linear-gradient(
-    90deg,
-    var(--bg-tertiary) 0%,
-    var(--bg-secondary) 40%,
-    var(--bg-tertiary) 60%
-  );
-  background-size: 200% 100%;
-  background-repeat: no-repeat;
-  animation: mint-skeleton-shimmer 1.6s ease-in-out infinite;
+  animation: mint-skeleton-breathe 1.6s ease-in-out infinite;
 }
 
-@keyframes mint-skeleton-shimmer {
-  0%   { background-position: 100% 0; }
-  100% { background-position: -100% 0; }
+@keyframes mint-skeleton-breathe {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.55; }
 }
 
 @media (prefers-reduced-motion: reduce) {
   .skeleton-wave,
   [class*='sk--'] {
     animation: none;
-    background-image: none;
   }
 }
 
 /* ========================================================================
    Atoms — reusable skeleton shapes consumers can compose for loading layouts
+   Text bars are 8px so a loading line keeps the rhythm of 13/20 text.
    ======================================================================== */
 
-.sk--line       { height: 10px; border-radius: 4px; width: 100%; }
-.sk--line-sm    { height: 8px;  border-radius: 3px; width: 100%; }
-.sk--title      { height: 14px; border-radius: 4px; width: 60%; }
+.sk--line       { height: 8px;  border-radius: var(--radius-sm); width: 100%; }
+.sk--line-sm    { height: 8px;  border-radius: var(--radius-sm); width: 100%; }
+.sk--title      { height: 8px;  border-radius: var(--radius-sm); width: 60%; }
 .sk--avatar     { width: 36px; height: 36px; border-radius: 50%; }
-.sk--btn        { width: 80px; height: 28px; border-radius: 9999px; }
+.sk--btn        { width: 80px; height: 32px; border-radius: var(--radius-md); }
 .sk--pill       { width: 64px; height: 20px; border-radius: 9999px; }
+
+/* ========================================================================
+   Skeleton.vue shapes. Inline width/height from the props override these.
+   ======================================================================== */
+
+.mint-skeleton               { background-color: var(--bg-tertiary); }
+.mint-skeleton--text         { width: 100%; height: 8px; border-radius: var(--radius-sm); }
+.mint-skeleton--circular     { width: 40px; height: 40px; border-radius: 50%; }
+.mint-skeleton--rectangular  { height: 96px; border-radius: 0; }
+.mint-skeleton--rounded      { height: 96px; border-radius: var(--radius-md); }

package/src/styles/components/slider.css

@@ -24,7 +24,7 @@
   left: 0;
   right: 0;
   border-radius: 9999px;
-  background-color: var(--bg-tertiary);
+  background-color: color-mix(in srgb, var(--text-secondary) 22%, var(--bg-tertiary));
 }
 
 .mint-slider__fill {
@@ -49,16 +49,23 @@
   cursor: not-allowed;
 }
 
+/* One thumb for the plain and the colorStops track (1f, 9c). */
 .mint-slider__thumb {
   position: absolute;
   top: 50%;
+  box-sizing: border-box;
   transform: translateX(-50%) translateY(-50%);
   border-radius: 9999px;
-  background-color: var(--bg-secondary);
-  border: 2px solid var(--color-primary);
-  box-shadow: var(--shadow);
+  background-color: #FFFFFF;
+  border: 1px solid color-mix(in srgb, var(--text-secondary) 40%, transparent);
+  box-shadow: var(--shadow-sm);
   pointer-events: none;
-  transition: transform 150ms ease;
+  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
+}
+
+.mint-slider__input:focus-visible ~ .mint-slider__thumb {
+  border-color: var(--color-primary);
+  box-shadow: var(--focus-ring-offset);
 }
 
 .mint-slider__thumb--dragging {
@@ -66,9 +73,68 @@
 }
 
 .mint-slider__value {
-  min-width: 40px;
+  min-width: 2rem;
+  flex-shrink: 0;
   text-align: right;
-  font-size: 14px;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
   font-variant-numeric: tabular-nums;
-  color: var(--text-secondary, #64748B);
+  color: var(--text-secondary-strong);
+}
+
+.mint-slider:focus-within .mint-slider__value:not(.mint-slider__value--success, .mint-slider__value--warning, .mint-slider__value--error) {
+  color: var(--text-primary);
+}
+
+.mint-slider__value--success,
+.mint-slider__value--warning,
+.mint-slider__value--error {
+  min-width: 28px;
+  padding: 0.125rem 0.375rem;
+  border: 1px solid;
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+}
+
+.mint-slider__value--success {
+  background: color-mix(in srgb, var(--mint-success) 15%, transparent);
+  border-color: color-mix(in srgb, var(--mint-success) 30%, transparent);
+  color: var(--mint-success);
+}
+
+.mint-slider__value--warning {
+  background: color-mix(in srgb, var(--mint-warning) 15%, transparent);
+  border-color: color-mix(in srgb, var(--mint-warning) 30%, transparent);
+  color: var(--mint-warning);
+}
+
+.mint-slider__value--error {
+  background: color-mix(in srgb, var(--mint-error) 15%, transparent);
+  border-color: color-mix(in srgb, var(--mint-error) 30%, transparent);
+  color: var(--mint-error);
+}
+
+.mint-slider--labeled {
+  flex-wrap: wrap;
+  row-gap: 0.25rem;
+}
+
+.mint-slider__labels {
+  display: flex;
+  flex-basis: 100%;
+  justify-content: space-between;
+  font-size: 0.6875rem;
+  color: var(--text-secondary);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mint-slider__thumb {
+    transition: none;
+  }
+
+  .mint-slider__thumb--dragging {
+    transform: translateX(-50%) translateY(-50%);
+  }
 }

package/src/styles/components/smart-group.css

@@ -2,22 +2,10 @@
    Smart Group — Full View modal (auto "Field Recipe" + manual cohort modes).
    Ported from the MINT design-system project; all values resolve against the
    SDK token set in styles/variables.css. Fira Sans for UI, Fira Code for
-   sample identifiers (data).
-
-   The curated group palette (--grp-*) is not part of the global token set, so
-   it is defined here scoped to the modal root — this resolves both the CSS
-   references below and the inline `var(--grp-*)` colour bindings in the
-   components, which inherit it via the cascade.
+   sample identifiers (data). Group colors are --mint-sample-1…8 (3a).
    ========================================================================== */
 
 .sg-modal {
-  --grp-1: #6366f1; /* indigo */
-  --grp-2: #0ea5a4; /* teal   */
-  --grp-3: #f59e0b; /* amber  */
-  --grp-4: #f43f5e; /* rose   */
-  --grp-5: #8b5cf6; /* violet */
-  --grp-qc: #94a3b8; /* slate — QC stays neutral */
-
   position: relative;
   width: 100%;
   height: 100%;
@@ -25,7 +13,7 @@
   flex-direction: column;
   background: var(--bg-secondary);
   color: var(--text-primary);
-  font-family: 'Fira Sans', system-ui, sans-serif;
+  font-family: var(--font-sans);
   border-radius: var(--radius-lg);
   border: 1px solid var(--border-color);
   box-shadow: var(--shadow-lg);
@@ -158,15 +146,15 @@
 }
 .sg-field__name { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); }
 .sg-field__role {
-  font-size: 0.625rem; font-weight: 600; text-transform: uppercase;
-  letter-spacing: 0.04em; color: var(--text-muted);
+  font-size: 0.6875rem; font-weight: 600;
+  color: var(--text-secondary);
   padding: 0.0625rem 0.375rem; border-radius: 9999px;
   background: var(--bg-tertiary); margin-left: 0.5rem;
 }
 .sg-field__role--rep { color: var(--mint-warning); background: var(--mint-warning-bg); }
 .sg-field__vals {
   grid-column: 1 / 2;
-  font-family: 'Fira Code', monospace; font-size: 0.75rem;
+  font-family: var(--font-mono); font-size: 0.75rem;
   color: var(--text-muted);
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
@@ -193,8 +181,8 @@
    ========================================================================== */
 .sg-preview__head {
   display: flex; align-items: center; gap: 0.5rem;
-  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
-  letter-spacing: 0.05em; color: var(--text-secondary);
+  font-size: 0.6875rem; font-weight: 600;
+  color: var(--text-secondary);
 }
 .sg-preview__count {
   margin-left: auto; font-size: 0.6875rem; font-weight: 600;
@@ -209,12 +197,13 @@
 }
 .sg-group:hover { background: var(--bg-hover); }
 .sg-dot {
+  box-sizing: border-box;
   width: 0.6875rem; height: 0.6875rem; border-radius: 50%;
   flex-shrink: 0; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
 }
 .sg-group__name {
   flex: 1; min-width: 0;
-  font-family: 'Fira Code', monospace; font-size: 0.8125rem; font-weight: 500;
+  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500;
   color: var(--text-primary);
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
@@ -237,8 +226,8 @@
   display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;
 }
 .sg-qc__title {
-  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
-  letter-spacing: 0.05em; color: var(--text-muted);
+  font-size: 0.6875rem; font-weight: 600;
+  color: var(--text-secondary);
 }
 .sg-qc__route {
   margin-left: auto;
@@ -256,7 +245,7 @@
   display: inline-flex; align-items: center; gap: 0.375rem;
   padding: 0.25rem 0.5rem; border-radius: var(--radius);
   background: var(--bg-tertiary);
-  font-family: 'Fira Code', monospace; font-size: 0.75rem;
+  font-family: var(--font-mono); font-size: 0.75rem;
   color: var(--text-secondary);
 }
 .sg-qc__chip .sg-dot { width: 0.5rem; height: 0.5rem; }
@@ -280,7 +269,7 @@
   padding: 0.3125rem 0.5rem; border-radius: var(--radius); white-space: nowrap;
   transition: background 0.15s ease, color 0.15s ease;
 }
-.sg-foot__link:hover { background: var(--color-primary-soft); color: var(--color-primary-hover); }
+.sg-foot__link:hover { background: var(--color-primary-soft); color: var(--_ink-primary); }
 .sg-btn {
   font: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer;
   padding: 0.5rem 1rem; border-radius: var(--radius-md);
@@ -315,8 +304,8 @@
   display: flex; align-items: center; gap: 0.25rem;
 }
 .sg-field__layer {
-  font-size: 0.625rem; font-weight: 600; text-transform: uppercase;
-  letter-spacing: 0.04em; color: var(--color-primary);
+  font-size: 0.6875rem; font-weight: 600;
+  color: var(--color-primary);
   padding: 0.0625rem 0.375rem; border-radius: 9999px;
   background: var(--color-primary-soft);
   margin-right: auto;
@@ -348,7 +337,7 @@
 }
 .fr-summary--mute .sg-summary__icon { color: var(--text-muted); }
 .sg-summary code {
-  font-family: 'Fira Code', monospace; font-size: 0.78em;
+  font-family: var(--font-mono); font-size: 0.78em;
   background: rgba(0, 0, 0, 0.06); padding: 0 0.25rem; border-radius: 3px;
 }
 html.dark .sg-summary code { background: rgba(255, 255, 255, 0.1); }
@@ -451,7 +440,6 @@ html.dark .sg-summary code { background: rgba(255, 255, 255, 0.1); }
 .mg2-check {
   display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer;
   font-size: 0.75rem; font-weight: 600; color: var(--text-secondary);
-  text-transform: uppercase; letter-spacing: 0.04em;
 }
 .mg2-check input { width: 0.9375rem; height: 0.9375rem; accent-color: var(--color-primary); cursor: pointer; }
 .mg2-selbar__n {
@@ -480,7 +468,7 @@ html.dark .sg-summary code { background: rgba(255, 255, 255, 0.1); }
 }
 .mg2-row__name {
   flex: 1; min-width: 0;
-  font-family: 'Fira Code', monospace; font-size: 0.8125rem;
+  font-family: var(--font-mono); font-size: 0.8125rem;
   color: var(--text-primary);
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
@@ -508,8 +496,8 @@ html.dark .sg-summary code { background: rgba(255, 255, 255, 0.1); }
 }
 .mg2-cohorts__head { display: flex; align-items: baseline; gap: 0.5rem; }
 .mg2-cohorts__t {
-  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
-  letter-spacing: 0.05em; color: var(--text-secondary);
+  font-size: 0.6875rem; font-weight: 600;
+  color: var(--text-secondary);
 }
 .mg2-cohorts__n {
   margin-left: auto; font-size: 0.75rem; color: var(--text-muted);
@@ -530,7 +518,7 @@ html.dark .sg-summary code { background: rgba(255, 255, 255, 0.1); }
 }
 .mg2-progress__fill {
   height: 100%; border-radius: 9999px;
-  background: linear-gradient(90deg, var(--grp-2), var(--color-primary));
+  background: var(--color-primary);
   transition: width 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
 }
 
@@ -559,7 +547,7 @@ html.dark .sg-summary code { background: rgba(255, 255, 255, 0.1); }
   border-top: 1px solid var(--border-light);
   font-size: 0.75rem; color: var(--text-secondary);
 }
-.mg2-sub__name { flex: 1; font-family: 'Fira Code', monospace; }
+.mg2-sub__name { flex: 1; font-family: var(--font-mono); }
 .mg2-sub__n { color: var(--text-muted); font-variant-numeric: tabular-nums; }
 .mg2-sub2 {
   display: flex; align-items: center; gap: 0.5rem;
@@ -567,7 +555,7 @@ html.dark .sg-summary code { background: rgba(255, 255, 255, 0.1); }
   border-top: 1px solid var(--border-light);
   font-size: 0.6875rem; color: var(--text-muted);
 }
-.mg2-sub2__name { flex: 1; font-family: 'Fira Code', monospace; }
+.mg2-sub2__name { flex: 1; font-family: var(--font-mono); }
 .mg2-sub2__name::before { content: '└ '; color: var(--border-color); }
 .mg2-sub2__n { font-variant-numeric: tabular-nums; }
 
@@ -582,8 +570,8 @@ html.dark .sg-summary code { background: rgba(255, 255, 255, 0.1); }
 .mg2-unassigned--on { border-style: solid; border-color: var(--color-primary); background: var(--color-primary-soft); }
 .mg2-unassigned b { color: var(--text-primary); font-weight: 600; }
 .mg2-unassigned__act {
-  margin-left: auto; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
-  letter-spacing: 0.04em; color: var(--color-primary);
+  margin-left: auto; font-size: 0.6875rem; font-weight: 600;
+  color: var(--color-primary);
 }
 
 /* ───────── contextual assignment bar ───────── */
@@ -613,8 +601,8 @@ html.dark .sg-summary code { background: rgba(255, 255, 255, 0.1); }
 .mg2-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
 .mg2-field--grow { flex: 1 1 7rem; }
 .mg2-field__l {
-  font-size: 0.625rem; font-weight: 600; text-transform: uppercase;
-  letter-spacing: 0.04em; color: var(--text-muted);
+  font-size: 0.75rem; font-weight: 600;
+  color: var(--text-secondary);
 }
 .mg2-combo {
   position: relative; display: flex; align-items: center; gap: 0.4375rem;
@@ -695,7 +683,7 @@ html.dark .sg-summary code { background: rgba(255, 255, 255, 0.1); }
   gap: 0.5rem; pointer-events: none;
   border: 2px dashed var(--color-primary); border-radius: var(--radius-md);
   background: var(--color-primary-soft);
-  color: var(--color-primary-hover); font-size: 0.8125rem; font-weight: 600;
+  color: var(--_ink-primary); font-size: 0.8125rem; font-weight: 600;
 }
 .fr-loading {
   position: absolute; inset: 0; z-index: 3;

package/src/styles/components/status-indicator.css

@@ -41,7 +41,7 @@
 }
 
 .mint-status__label {
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   color: var(--text-primary);
 }
 

package/src/styles/components/step-wizard.css

@@ -7,36 +7,41 @@
   min-height: 0;
 }
 
-/* Progress indicator */
+/* Dark --border-light equals --bg-card; row and band hairlines need --border-color there. */
+:where(html.dark) .mint-wizard {
+  --border-light: var(--border-color);
+}
+
+/* Progress indicator — one hue (2c): done = primary fill + check,
+   current = primary ring + number, upcoming = strong control border. */
 .mint-wizard__progress {
   flex-shrink: 0;
 }
 
 .mint-wizard__steps-indicator {
   display: flex;
-  align-items: flex-start;
-  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
 }
 
 .mint-wizard__step-connector {
   flex: 1;
-  height: 2px;
+  min-width: 0.75rem;
+  height: 1px;
   background-color: var(--border-color);
-  margin-top: 1rem;
-  transition: background-color 0.2s ease;
+  transition: background-color 150ms ease;
 }
 
 .mint-wizard__step-connector--completed {
-  background-color: var(--mint-success);
+  background-color: var(--color-primary);
 }
 
 .mint-wizard__step-indicator {
   display: flex;
-  flex-direction: column;
+  flex-shrink: 0;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.375rem;
   cursor: pointer;
-  min-width: 4rem;
 }
 
 .mint-wizard__step-indicator--disabled {
@@ -45,59 +50,70 @@
 }
 
 .mint-wizard__step-dot {
-  width: 2rem;
-  height: 2rem;
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
   border-radius: 9999px;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 0.75rem;
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
   font-weight: 600;
-  border: 2px solid var(--border-color);
-  background-color: var(--bg-secondary);
-  color: var(--text-muted);
-  transition: all 0.2s ease;
+  background-color: var(--bg-card);
+  color: var(--text-secondary);
+  box-shadow: inset 0 0 0 1.5px var(--_control-border-strong);
+  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
+}
+
+.mint-wizard__step-dot svg {
+  width: 0.6875rem;
+  height: 0.6875rem;
 }
 
 /* Size variants for dot */
 .mint-wizard--sm .mint-wizard__step-dot {
-  width: 1.5rem;
-  height: 1.5rem;
-  font-size: 0.625rem;
+  width: 1.125rem;
+  height: 1.125rem;
 }
 
 .mint-wizard--lg .mint-wizard__step-dot {
-  width: 2.5rem;
-  height: 2.5rem;
-  font-size: 0.875rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 0.75rem;
 }
 
 .mint-wizard__step-indicator--active .mint-wizard__step-dot {
-  border-color: var(--color-primary);
-  background-color: var(--color-primary);
-  color: white;
+  color: var(--_ink-primary);
+  box-shadow: inset 0 0 0 1.5px var(--color-primary);
 }
 
 .mint-wizard__step-indicator--completed .mint-wizard__step-dot {
-  border-color: var(--mint-success);
-  background-color: var(--mint-success);
+  background-color: var(--color-primary);
   color: white;
+  box-shadow: inset 0 0 0 1.5px var(--color-primary);
 }
 
 .mint-wizard__step-label {
-  font-size: 0.75rem;
-  color: var(--text-muted);
-  text-align: center;
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
   white-space: nowrap;
 }
 
 .mint-wizard__step-indicator--active .mint-wizard__step-label {
   color: var(--text-primary);
-  font-weight: 500;
+  font-weight: 600;
 }
 
 .mint-wizard__step-indicator--completed .mint-wizard__step-label {
-  color: var(--text-secondary);
+  color: var(--text-secondary-strong);
+}
+
+/* Narrow widths keep only the current step's label. */
+@media (max-width: 640px) {
+  .mint-wizard__step-indicator:not(.mint-wizard__step-indicator--active) .mint-wizard__step-label {
+    display: none;
+  }
 }
 
 /* Body */
@@ -112,81 +128,28 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding-top: 1rem;
-  border-top: 1px solid var(--border-color);
+  padding-top: 0.875rem;
+  border-top: 1px solid var(--border-light);
   flex-shrink: 0;
 }
 
-.mint-wizard__nav-btn {
-  padding: 0.5rem 1rem;
-  border-radius: var(--radius-md);
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 0.15s ease, color 0.15s ease;
-  border: none;
-}
-
-.mint-wizard__nav-btn:disabled {
-  opacity: var(--mint-disabled-opacity);
-  cursor: not-allowed;
-}
-
-.mint-wizard__nav-btn--cancel {
-  background: transparent;
-  color: var(--text-muted);
-}
-
-.mint-wizard__nav-btn--cancel:hover:not(:disabled) {
-  color: var(--text-primary);
-}
-
-.mint-wizard__nav-btn--back {
-  background-color: var(--bg-tertiary);
-  color: var(--text-primary);
-}
-
-.mint-wizard__nav-btn--back:hover:not(:disabled) {
-  background-color: var(--bg-hover);
-}
-
-.mint-wizard__nav-btn--next {
-  background-color: var(--color-primary);
-  color: white;
-}
-
-.mint-wizard__nav-btn--next:hover:not(:disabled) {
-  background-color: var(--color-primary-hover);
-}
-
-.mint-wizard__nav-btn--finish {
-  background-color: var(--mint-success);
-  color: white;
-}
-
-.mint-wizard__nav-btn--finish:hover:not(:disabled) {
-  opacity: 0.9;
-}
-
-/* Size variants for connector alignment */
-.mint-wizard--sm .mint-wizard__step-connector {
-  margin-top: 0.75rem;
+.mint-wizard__counter {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--text-secondary);
 }
 
-.mint-wizard--lg .mint-wizard__step-connector {
-  margin-top: 1.25rem;
+.mint-wizard__cancel {
+  margin-left: auto;
 }
 
 .mint-wizard--sm .mint-wizard__step-label {
-  font-size: 0.625rem;
-}
-
-.mint-wizard--sm .mint-wizard__nav-btn {
-  padding: 0.375rem 0.75rem;
   font-size: 0.75rem;
 }
 
-.mint-wizard--lg .mint-wizard__nav-btn {
-  padding: 0.625rem 1.25rem;
-  font-size: 1rem;
+@media (prefers-reduced-motion: reduce) {
+  .mint-wizard__step-connector,
+  .mint-wizard__step-dot {
+    transition: none;
+  }
 }

package/src/styles/components/tabs.css

@@ -72,16 +72,12 @@
   background-color: var(--bg-tertiary);
   color: var(--text-secondary);
   font-family: var(--font-mono);
-  font-size: 0.625rem;
+  font-size: 0.6875rem;
   font-weight: 600;
   font-variant-numeric: tabular-nums;
 }
 
 .mint-tab--active .mint-tab__badge {
   background-color: var(--color-primary-soft);
-  color: var(--color-primary-hover);
-}
-
-html.dark .mint-tab--active .mint-tab__badge {
-  color: var(--color-primary);
+  color: var(--_ink-primary);
 }