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

package/src/styles/components/dose-calculator.css

@@ -51,102 +51,13 @@
   padding: 1rem;
 }
 
-/* Field */
-.mint-dose-calculator__field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-}
-
-.mint-dose-calculator__field-label {
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.mint-dose-calculator__field-row {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.mint-dose-calculator__field-row > * {
-  flex: 1;
-}
-
-/* Input styles */
-.mint-dose-calculator__input {
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  font-size: 0.875rem;
-  color: var(--text-primary);
-  background-color: var(--bg-tertiary);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius);
-  outline: none;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
-  -webkit-appearance: textfield;
-  -moz-appearance: textfield;
-  appearance: textfield;
-}
-
-.mint-dose-calculator__input::-webkit-outer-spin-button,
-.mint-dose-calculator__input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.mint-dose-calculator__input:focus-visible {
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
-}
-
-.mint-dose-calculator__input::placeholder {
-  color: var(--text-muted);
-}
-
-/* Select styles */
-.mint-dose-calculator__select {
-  width: 100%;
-  padding: 0.5rem 2rem 0.5rem 0.75rem;
-  font-size: 0.875rem;
-  color: var(--text-primary);
-  background-color: var(--bg-tertiary);
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
-  background-position: right 0.5rem center;
-  background-repeat: no-repeat;
-  background-size: 1.25rem 1.25rem;
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius);
-  appearance: none;
-  cursor: pointer;
-  outline: none;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+/* Row fields: labels in a fixed column, controls fill the rest. Layout only (6c). */
+.mint-dose-calculator__form > .mint-form-field--row > .mint-form-field__label-row {
+  flex: 0 0 7rem;
 }
 
-.mint-dose-calculator__select:focus-visible {
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
-}
-
-/* Unit suffix inline */
-.mint-dose-calculator__input-wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-.mint-dose-calculator__input-wrapper .mint-dose-calculator__input {
-  padding-right: 2.5rem;
-}
-
-.mint-dose-calculator__unit-suffix {
-  position: absolute;
-  right: 0.75rem;
-  font-size: 0.75rem;
-  color: var(--text-muted);
-  pointer-events: none;
+.mint-dose-calculator__form > .mint-form-field--row > .mint-form-field__control {
+  flex: 1 1 0;
 }
 
 /* Divider */
@@ -165,11 +76,9 @@
 }
 
 .mint-dose-calculator__result-title {
-  font-size: 0.625rem;
+  font-size: 0.75rem;
   font-weight: 600;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
+  color: var(--text-secondary);
   margin-bottom: 0.75rem;
 }
 
@@ -212,11 +121,9 @@
 }
 
 .mint-dose-calculator__preview-title {
-  font-size: 0.625rem;
+  font-size: 0.75rem;
   font-weight: 600;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
+  color: var(--text-secondary);
   margin-bottom: 0.5rem;
 }
 
@@ -250,39 +157,6 @@
   color: var(--text-muted);
 }
 
-/* Apply button */
-.mint-dose-calculator__apply-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  width: 100%;
-  padding: 0.625rem 1rem;
-  margin-top: 1rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: white;
-  background-color: var(--color-primary);
-  border: none;
-  border-radius: var(--radius);
-  cursor: pointer;
-  transition: background-color 0.15s ease;
-}
-
-.mint-dose-calculator__apply-btn:hover:not(:disabled) {
-  background-color: var(--color-primary-hover);
-}
-
-.mint-dose-calculator__apply-btn:disabled {
-  opacity: var(--mint-disabled-opacity);
-  cursor: not-allowed;
-}
-
-.mint-dose-calculator__apply-btn svg {
-  width: 1rem;
-  height: 1rem;
-}
-
 /* Molecular weight input */
 .mint-dose-calculator__mw-section {
   padding: 0.75rem 1rem;

package/src/styles/components/empty-state.css

@@ -35,28 +35,28 @@
   padding: 1rem 1.25rem;
 }
 
-/* Icon wrapper — illustrated: 72px tile with gradient */
+/* Icon wrapper — illustrated: 40px neutral tile (2g). Semantic color survives
+   only in the warning / error variants. */
 .mint-empty-state--illustrated .mint-empty-state__icon-wrapper {
-  width: 72px;
-  height: 72px;
-  margin-bottom: 1rem;
-  border-radius: var(--radius-lg);
+  width: 40px;
+  height: 40px;
+  margin-bottom: 0.625rem;
+  border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }
 
-/* Gradient fill from primary-soft → info-bg for the illustrated primary default */
-.mint-empty-state--illustrated .mint-empty-state__icon-wrapper--primary {
-  background: linear-gradient(135deg, var(--color-primary-soft), var(--mint-info-bg));
+.mint-empty-state__icon-wrapper--primary,
+.mint-empty-state__icon-wrapper--cta,
+.mint-empty-state__icon-wrapper--success,
+.mint-empty-state__icon-wrapper--muted {
+  background: var(--bg-tertiary);
 }
 
-.mint-empty-state--illustrated .mint-empty-state__icon-wrapper--cta     { background: color-mix(in srgb, var(--color-cta) 10%, transparent); }
-.mint-empty-state--illustrated .mint-empty-state__icon-wrapper--success { background: var(--mint-success-bg); }
-.mint-empty-state--illustrated .mint-empty-state__icon-wrapper--warning { background: var(--mint-warning-bg); }
-.mint-empty-state--illustrated .mint-empty-state__icon-wrapper--error   { background: var(--mint-error-bg); }
-.mint-empty-state--illustrated .mint-empty-state__icon-wrapper--muted   { background: var(--bg-tertiary); }
+.mint-empty-state__icon-wrapper--warning { background: var(--mint-warning-bg); }
+.mint-empty-state__icon-wrapper--error   { background: var(--mint-error-bg); }
 
 /* Inline: 44x44 icon box (left-aligned) */
 .mint-empty-state--inline .mint-empty-state__icon-wrapper {
@@ -67,28 +67,18 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  background: var(--color-primary-soft);
 }
 
-.mint-empty-state--inline .mint-empty-state__icon-wrapper--cta     { background: color-mix(in srgb, var(--color-cta) 10%, transparent); }
-.mint-empty-state--inline .mint-empty-state__icon-wrapper--success { background: var(--mint-success-bg); }
-.mint-empty-state--inline .mint-empty-state__icon-wrapper--warning { background: var(--mint-warning-bg); }
-.mint-empty-state--inline .mint-empty-state__icon-wrapper--error   { background: var(--mint-error-bg); }
-.mint-empty-state--inline .mint-empty-state__icon-wrapper--muted   { background: var(--bg-tertiary); }
-
 /* Icon sizes */
-.mint-empty-state--sm .mint-empty-state__icon { width: 32px; height: 32px; }
-.mint-empty-state--md .mint-empty-state__icon { width: 40px; height: 40px; }
-.mint-empty-state--lg .mint-empty-state__icon { width: 48px; height: 48px; }
-.mint-empty-state--inline .mint-empty-state__icon { width: 22px; height: 22px; }
+.mint-empty-state__icon { width: 20px; height: 20px; stroke-width: 1.7; }
 
 /* Icon colors */
-.mint-empty-state__icon--primary { color: var(--color-primary); }
-.mint-empty-state__icon--cta     { color: var(--color-cta); }
-.mint-empty-state__icon--success { color: var(--mint-success); }
+.mint-empty-state__icon--primary,
+.mint-empty-state__icon--cta,
+.mint-empty-state__icon--success,
+.mint-empty-state__icon--muted   { color: var(--text-secondary); }
 .mint-empty-state__icon--warning { color: var(--mint-warning); }
 .mint-empty-state__icon--error   { color: var(--mint-error); }
-.mint-empty-state__icon--muted   { color: var(--text-muted); }
 
 /* Body wrapper — in inline this is the flex-grow region */
 .mint-empty-state--inline .mint-empty-state__body {
@@ -101,13 +91,13 @@
   font-weight: 600;
   color: var(--text-primary);
   margin-top: 0 !important;
-  margin-bottom: 0.25rem !important;
+  margin-bottom: 0.125rem !important;
   padding: 0 !important;
 }
 
-.mint-empty-state--sm .mint-empty-state__title { font-size: 0.875rem; }
-.mint-empty-state--md .mint-empty-state__title { font-size: 1rem; }
-.mint-empty-state--lg .mint-empty-state__title { font-size: 1.125rem; }
+.mint-empty-state--sm .mint-empty-state__title { font-size: 0.8125rem; }
+.mint-empty-state--md .mint-empty-state__title { font-size: 0.875rem; }
+.mint-empty-state--lg .mint-empty-state__title { font-size: 1rem; }
 .mint-empty-state--inline .mint-empty-state__title { font-size: 0.875rem; }
 
 /* Description */
@@ -125,9 +115,10 @@
   color: var(--text-muted);
 }
 
-/* Action */
-.mint-empty-state--illustrated .mint-empty-state__action {
-  margin-top: 1rem;
+/* Action — slotted content sits in a block so a child's own larger top margin collapses into this one. */
+.mint-empty-state--illustrated .mint-empty-state__action,
+.mint-empty-state--illustrated .mint-empty-state__content {
+  margin-top: 0.625rem;
 }
 
 .mint-empty-state--inline .mint-empty-state__action {

package/src/styles/components/experiment-code-badge.css

@@ -1,7 +1,7 @@
 .mint-exp-code {
   display: inline-flex;
   align-items: center;
-  font-family: 'Fira Code', monospace;
+  font-family: var(--font-mono);
   font-weight: 600;
   background: var(--bg-tertiary);
   color: var(--text-secondary);

package/src/styles/components/experiment-popover.css

@@ -1,4 +1,4 @@
-/* ExperimentPopover — aligned with refresh design (AppPluginSwitcher / AppTopBar page selector) */
+/* ExperimentPopover — aligned with refresh design (AppTopBar page selector) */
 
 /* Container */
 .mint-experiment-popover {
@@ -25,7 +25,7 @@
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
-  height: 2.375rem;
+  height: var(--form-height-sm);
   padding: 0 0.75rem;
   border: 1px solid var(--border-color);
   background: var(--bg-card);
@@ -63,7 +63,7 @@
   transition-duration: 0.05s;
 }
 
-/* Active (panel open) — ring treatment, same language as PluginSwitcher/page selector */
+/* Active (panel open) — ring treatment, same language as the page selector */
 .mint-experiment-popover__trigger--active {
   border-color: var(--color-primary);
   box-shadow: 0 0 0 3px var(--color-primary-soft);
@@ -145,15 +145,7 @@
   height: 0.625rem;
   border-radius: var(--radius-sm);
   background-color: var(--bg-tertiary);
-  background-image: linear-gradient(
-    90deg,
-    var(--bg-tertiary) 0%,
-    var(--bg-hover) 40%,
-    var(--bg-tertiary) 60%
-  );
-  background-size: 200% 100%;
-  background-repeat: no-repeat;
-  animation: mint-experiment-popover-shimmer 1.6s ease-in-out infinite;
+  animation: mint-skeleton-breathe 1.6s ease-in-out infinite; /* 3e breathe, keyframes in skeleton.css */
 }
 
 .mint-experiment-popover__trigger-chevron {
@@ -175,38 +167,21 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 2.375rem;
-  height: 2.375rem;
+  width: var(--form-height-sm);
+  height: var(--form-height-sm);
   border: 1px solid var(--color-primary);
   border-left: 1px solid rgba(255, 255, 255, 0.25);
   background-color: var(--color-primary);
-  background-image: linear-gradient(
-    to bottom,
-    rgba(255, 255, 255, 0.12),
-    rgba(255, 255, 255, 0)
-  );
   border-top-right-radius: var(--radius-md);
   border-bottom-right-radius: var(--radius-md);
   color: white;
   cursor: pointer;
   flex-shrink: 0;
   box-sizing: border-box;
-  transform: translateY(0);
   transition:
     background-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
     border-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    box-shadow 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    transform 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    opacity 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    background-image 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
-}
-
-/* Save trigger: press-to-flat (gradient cleared) */
-.mint-experiment-popover__save-trigger:active:not(:disabled):not(.mint-experiment-popover__save-trigger--disabled) {
-  transform: translateY(0);
-  box-shadow: none;
-  background-image: none;
-  transition-duration: 0.05s;
+    opacity 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
 }
 
 .mint-experiment-popover__save-trigger--disabled {
@@ -219,10 +194,10 @@
   pointer-events: none;
 }
 
-/* Success state: green surface + keep the catch-of-light */
+/* Success state: green surface */
 .mint-experiment-popover__save-trigger--success {
-  background-color: var(--mint-success, #10b981);
-  border-color: var(--mint-success, #10b981);
+  background-color: var(--mint-success);
+  border-color: var(--mint-success);
   border-left-color: rgba(255, 255, 255, 0.3);
 }
 
@@ -240,26 +215,8 @@
   animation: mint-experiment-popover-spin 0.6s linear infinite;
 }
 
-/* ─── Split unit cohesion ─── */
-/* When split has both halves, hovering either half lifts BOTH together so the
-   visually attached unit moves as one object. Color changes stay per-half so
-   "which action is hot" is still readable. */
-.mint-experiment-popover__split--with-save:hover
-  > .mint-experiment-popover__trigger:not(.mint-experiment-popover__trigger--active),
-.mint-experiment-popover__split--with-save:hover
-  > .mint-experiment-popover__save-trigger:not(:disabled):not(.mint-experiment-popover__save-trigger--disabled) {
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-sm);
-}
-
-.mint-experiment-popover__split--with-save:active
-  > .mint-experiment-popover__trigger:not(.mint-experiment-popover__trigger--active),
-.mint-experiment-popover__split--with-save:active
-  > .mint-experiment-popover__save-trigger:not(:disabled):not(.mint-experiment-popover__save-trigger--disabled) {
-  transform: translateY(0);
-  box-shadow: none;
-  transition-duration: 0.05s;
-}
+/* ─── Split unit ─── */
+/* No lift: the save half is flat like every filled control (3g, per 1d). */
 
 /* Per-half color-on-hover (only when the SPECIFIC half is being pointed at) */
 .mint-experiment-popover__split--with-save
@@ -276,14 +233,8 @@
 
 .mint-experiment-popover__split--with-save
   .mint-experiment-popover__save-trigger--success:hover:not(:disabled) {
-  background-color: var(--mint-success-hover, #059669);
-  border-color: var(--mint-success-hover, #059669);
-}
-
-/* Flatten the gradient on active save press */
-.mint-experiment-popover__split--with-save:active
-  > .mint-experiment-popover__save-trigger:not(:disabled):not(.mint-experiment-popover__save-trigger--disabled) {
-  background-image: none;
+  background-color: var(--mint-success-hover);
+  border-color: var(--mint-success-hover);
 }
 
 /* ─── Popover panel ─── */
@@ -400,7 +351,7 @@
 .mint-experiment-popover__card-code {
   align-self: flex-start;
   font-family: var(--font-mono, 'Fira Code', monospace);
-  font-size: 0.625rem;
+  font-size: 0.6875rem;
   font-weight: 600;
   letter-spacing: 0.02em;
   color: var(--color-primary);
@@ -453,15 +404,7 @@
   height: 0.625rem;
   border-radius: var(--radius-sm);
   background-color: var(--bg-hover);
-  background-image: linear-gradient(
-    90deg,
-    var(--bg-hover) 0%,
-    var(--bg-secondary) 40%,
-    var(--bg-hover) 60%
-  );
-  background-size: 200% 100%;
-  background-repeat: no-repeat;
-  animation: mint-experiment-popover-shimmer 1.6s ease-in-out infinite;
+  animation: mint-skeleton-breathe 1.6s ease-in-out infinite; /* 3e breathe, keyframes in skeleton.css */
 }
 
 .mint-experiment-popover__skeleton-line--code {
@@ -527,11 +470,6 @@
   to { transform: rotate(360deg); }
 }
 
-@keyframes mint-experiment-popover-shimmer {
-  0%   { background-position: 100% 0; }
-  100% { background-position: -100% 0; }
-}
-
 /* Respect motion preferences */
 @media (prefers-reduced-motion: reduce) {
   .mint-experiment-popover__trigger,
@@ -541,12 +479,8 @@
     transition-duration: 0.15s;
     transition-timing-function: ease;
   }
-  .mint-experiment-popover__split--with-save:hover > *,
-  .mint-experiment-popover__split--with-save:active > *,
   .mint-experiment-popover__trigger:hover,
   .mint-experiment-popover__trigger:active,
-  .mint-experiment-popover__save-trigger:hover,
-  .mint-experiment-popover__save-trigger:active,
   .mint-experiment-popover__select-btn:hover,
   .mint-experiment-popover__select-btn:active {
     transform: none;
@@ -558,6 +492,5 @@
   .mint-experiment-popover__trigger-skeleton,
   .mint-experiment-popover__skeleton-line {
     animation: none;
-    background-image: none;
   }
 }