ionbase-ui 0.3.0 → 0.4.0

package/dist/styles/button.css

@@ -89,10 +89,34 @@
   border-style: solid;
   border-width: var(--border-width-default);
   border-radius: var(--radius-md);
+
+  /*
+   * `base` + `ease-out`, from the shared motion ladder in motion.css.
+   *
+   * This was `150ms cubic-bezier(0.4, 0, 0.2, 1)`, hardcoded here and in eleven
+   * other stylesheets. Both halves were wrong for a state change: 150ms is
+   * short enough to read as a jump rather than a change, and that curve is
+   * symmetric — its slow tail means a colour appears to arrive late and then
+   * snap. `ease-out` leaves immediately and decelerates in, so the same change
+   * reads as settling.
+   */
   transition:
-    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    background-color var(--ion-duration-base) var(--ion-ease-out),
+    border-color var(--ion-duration-base) var(--ion-ease-out),
+    box-shadow var(--ion-duration-base) var(--ion-ease-out);
+}
+
+/*
+ * Press drops to `fast`.
+ *
+ * A press must resolve while the pointer is still down or the feedback reads as
+ * lag rather than as a press — it is the one interaction the user is actively
+ * waiting on. Release still returns at `base`, because the rule only overrides
+ * the duration while the pressed state holds.
+ */
+.ion-button:active,
+.ion-button[data-pressed='true'] {
+  transition-duration: var(--ion-duration-fast);
 }
 
 /* Size modifiers — radius, border-width and font-weight are size-invariant. */
@@ -204,12 +228,12 @@
 
 @media (hover: hover) {
   .ion-button--primary-neutral:hover {
-    background-color: var(--surface-inverse);
+    background-color: var(--surface-inverse-subtle);
   }
 }
 
 .ion-button--primary-neutral[data-hovered='true'] {
-  background-color: var(--surface-inverse);
+  background-color: var(--surface-inverse-subtle);
 }
 
 .ion-button--primary-neutral:active,
@@ -229,16 +253,20 @@
   border-color: var(--border-strong);
 }
 
+/*
+ * The border does NOT move on hover — Figma binds `border/strong` on Default,
+ * Hover and Focus alike, and only steps to `border/stronger` on Pressed. The
+ * hover step was previously reproduced here and is a difference the current
+ * design does not draw.
+ */
 @media (hover: hover) {
   .ion-button--secondary:hover {
     background-color: var(--surface-page);
-    border-color: var(--border-stronger);
   }
 }
 
 .ion-button--secondary[data-hovered='true'] {
   background-color: var(--surface-page);
-  border-color: var(--border-stronger);
 }
 
 .ion-button--secondary:active,
@@ -246,6 +274,7 @@
   --ion-button-elevation: var(--ion-button-pressed);
 
   background-color: var(--surface-muted);
+  border-color: var(--border-stronger);
 }
 
 /* Tertiary Variant — intentionally flat; a ghost button has no surface to raise. */

package/dist/styles/checkbox.css

@@ -124,8 +124,8 @@
     (var(--ion-checkbox-line-height) - var(--ion-checkbox-size)) / 2
   );
   transition:
-    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    background-color var(--ion-duration-base) var(--ion-ease-out),
+    border-color var(--ion-duration-base) var(--ion-ease-out);
 }
 
 .ion-checkbox__mark {

package/dist/styles/input.css

@@ -63,8 +63,8 @@
   font-size: var(--ion-input-font-size);
   line-height: var(--ion-input-line-height);
   transition:
-    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    border-color var(--ion-duration-base) var(--ion-ease-out),
+    background-color var(--ion-duration-base) var(--ion-ease-out);
 }
 
 /*

package/dist/styles/menu.css

@@ -54,7 +54,7 @@
   width: 100%;
   cursor: pointer;
   user-select: none;
-  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: background-color var(--ion-duration-base) var(--ion-ease-out);
 }
 
 .ion-menu__icon,

package/dist/styles/nav-item.css

@@ -37,7 +37,7 @@
   text-decoration: none;
   cursor: pointer;
   user-select: none;
-  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: color var(--ion-duration-base) var(--ion-ease-out);
 }
 
 .ion-nav-item__icon,
@@ -47,7 +47,7 @@
   justify-content: center;
   flex-shrink: 0;
   color: var(--icon-tertiary);
-  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: color var(--ion-duration-base) var(--ion-ease-out);
 }
 
 .ion-nav-item__icon svg,

package/dist/styles/radio.css

@@ -96,8 +96,8 @@
   /* Centred on the label's first line — see checkbox.css. */
   margin-top: calc((var(--ion-radio-line-height) - var(--ion-radio-size)) / 2);
   transition:
-    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    background-color var(--ion-duration-base) var(--ion-ease-out),
+    border-color var(--ion-duration-base) var(--ion-ease-out);
 }
 
 .ion-radio__dot {

package/dist/styles/scroll-progress.css

@@ -29,8 +29,10 @@
  *
  * REVEAL TRANSITION IS DELIBERATELY PLAIN
  *
- * Opacity and an 8px slide, the same 150ms/cubic-bezier(0.4,0,0.2,1) language
- * every hover state in the system already uses. The deeper choreography this
+ * Opacity and an 8px slide on the shared motion ladder — `--ion-duration-base`
+ * and `--ion-ease-out`, the same language every hover state in the system
+ * already uses. It reads as a reveal rather than travel, so it stays on `base`
+ * rather than taking the `slow` rung. The deeper choreography this
  * component could eventually justify — a staggered reveal per row, easing
  * that matches the rail's own scale — is future work, tracked in
  * docs/motion-system.md, not invented here ahead of that decision.
@@ -62,7 +64,7 @@
   font-family: var(--font-family-sans);
   font-size: var(--type-body-sm);
   line-height: var(--type-body-sm-line-height);
-  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: color var(--ion-duration-base) var(--ion-ease-out);
 }
 
 .ion-scroll-progress__rail {
@@ -76,7 +78,7 @@
   width: var(--spacing-32);
   height: var(--border-width-thick);
   background-color: var(--border-strong);
-  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: background-color var(--ion-duration-base) var(--ion-ease-out);
 }
 
 .ion-scroll-progress__tick--active {
@@ -118,9 +120,9 @@
   pointer-events: none;
   transform: translateY(-50%) translateX(-4px);
   transition:
-    opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
-    transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
-    visibility 150ms;
+    opacity var(--ion-duration-base) var(--ion-ease-out),
+    transform var(--ion-duration-base) var(--ion-ease-out),
+    visibility var(--ion-duration-base);
 }
 
 .ion-scroll-progress__panel[data-open='true'] {
@@ -145,8 +147,8 @@
   text-align: left;
   cursor: pointer;
   transition:
-    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    background-color var(--ion-duration-base) var(--ion-ease-out),
+    border-color var(--ion-duration-base) var(--ion-ease-out);
 }
 
 @media (hover: hover) {

package/dist/styles/select.css

@@ -47,8 +47,8 @@
   font-size: var(--ion-select-font-size);
   line-height: var(--ion-select-line-height);
   transition:
-    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    border-color var(--ion-duration-base) var(--ion-ease-out),
+    background-color var(--ion-duration-base) var(--ion-ease-out);
 }
 
 /* Small shares Medium's padding — see input.css. */

package/dist/styles/table.css

@@ -107,7 +107,7 @@
 
 .ion-table tr {
   background-color: var(--surface-default);
-  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: background-color var(--ion-duration-base) var(--ion-ease-out);
 }
 
 .ion-table tbody tr {

package/dist/styles/tabs.css

@@ -80,9 +80,9 @@
   cursor: pointer;
   user-select: none;
   transition:
-    color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    color var(--ion-duration-base) var(--ion-ease-out),
+    background-color var(--ion-duration-base) var(--ion-ease-out),
+    border-color var(--ion-duration-base) var(--ion-ease-out);
 }
 
 .ion-tabs__item--sm {

package/dist/styles/toggle.css

@@ -115,8 +115,8 @@
     (var(--ion-toggle-line-height) - var(--ion-toggle-track-h)) / 2
   );
   transition:
-    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    background-color var(--ion-duration-base) var(--ion-ease-out),
+    border-color var(--ion-duration-base) var(--ion-ease-out);
 }
 
 .ion-toggle__thumb {
@@ -127,7 +127,14 @@
 
   /* Cast, not bevelled — and the same in both states, so it is unconditional. */
   box-shadow: var(--ion-shadow-shadow-xs);
-  transition: margin 150ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  /*
+   * `ease-in-out`, not the `ease-out` every colour change uses. The knob is the
+   * one thing in the system that travels the same path in both directions, so
+   * a symmetric curve is what makes on and off feel like the same gesture
+   * reversed. Everything else enters a state and stays there.
+   */
+  transition: margin var(--ion-duration-base) var(--ion-ease-in-out);
 }
 
 .ion-toggle__label {

package/dist/styles/tokens/base.css

@@ -288,7 +288,7 @@
   --surface-raised: #ffffff;
   --surface-overlay: #ffffff;
   --surface-scrim: rgba(0, 0, 0, 0.4);
-  --surface-inverse: #131923;
+  --surface-inverse: #1d2735;
   --surface-inverse-subtle: #384252;
   --surface-disabled: #f0f2f4;
   --surface-placeholder: #dde0e4;

package/dist/styles/tokens/elevation.css

@@ -34,25 +34,25 @@
     0px 8px 8px -4px rgb(0 0 0 / 4%);
 
   --ion-shadow-raised-lifted-xs:
-    inset 0px -2px 1px 0px rgb(0 0 0 / 40%),
+    inset 0px -2px 1px 0px rgb(0 0 0 / 25%),
     inset 0px 2px 1px 0px rgb(255 255 255 / 20%),
     0px 1px 1px 0px rgb(7 10 13 / 6%),
     0px 1px 2px 0px rgb(7 10 13 / 4%);
 
   --ion-shadow-raised-lifted-sm:
-    inset 0px -3px 1px 0px rgb(0 0 0 / 30%),
+    inset 0px -3px 1px 0px rgb(0 0 0 / 25%),
     inset 0px 3px 1px 0px rgb(255 255 255 / 20%),
     0px 1px 2px 0px rgb(7 10 13 / 8%),
     0px 2px 4px 0px rgb(7 10 13 / 5%);
 
   --ion-shadow-raised-lifted-lg:
-    inset 0px -4px 2px 0px rgb(0 0 0 / 40%),
+    inset 0px -4px 2px 0px rgb(0 0 0 / 25%),
     inset 0px 4px 2px 0px rgb(255 255 255 / 20%),
     0px 1px 1px 0px rgb(7 10 13 / 32%),
     0px 1px 2px 0px rgb(7 10 13 / 16%);
 
   --ion-shadow-raised-lifted-xl:
-    inset 0px -6px 2px 0px rgb(0 0 0 / 35%),
+    inset 0px -6px 2px 0px rgb(0 0 0 / 25%),
     inset 0px 6px 2px 0px rgb(255 255 255 / 20%),
     0px 1px 2px 0px rgb(7 10 13 / 30%),
     0px 2px 4px 0px rgb(7 10 13 / 14%);
@@ -74,19 +74,19 @@
     0px 2px 6px 0px rgb(7 10 13 / 20%);
 
   --ion-shadow-raised-flush-xs:
-    inset 0px -2px 1px 0px rgb(0 0 0 / 40%),
+    inset 0px -2px 1px 0px rgb(0 0 0 / 25%),
     inset 0px 2px 1px 0px rgb(255 255 255 / 20%);
 
   --ion-shadow-raised-flush-sm:
-    inset 0px -3px 1px 0px rgb(0 0 0 / 30%),
+    inset 0px -3px 1px 0px rgb(0 0 0 / 25%),
     inset 0px 3px 1px 0px rgb(255 255 255 / 20%);
 
   --ion-shadow-raised-flush-lg:
-    inset 0px -4px 2px 0px rgb(0 0 0 / 40%),
+    inset 0px -4px 2px 0px rgb(0 0 0 / 25%),
     inset 0px 4px 2px 0px rgb(255 255 255 / 20%);
 
   --ion-shadow-raised-flush-xl:
-    inset 0px -6px 2px 0px rgb(0 0 0 / 35%),
+    inset 0px -6px 2px 0px rgb(0 0 0 / 25%),
     inset 0px 6px 2px 0px rgb(255 255 255 / 20%);
 
   --ion-shadow-inset-lifted-xs:

package/dist/styles/tokens/index.css

@@ -4,3 +4,4 @@
 @import "./breakpoint-mobile.css";
 @import "./typography.css";
 @import "./elevation.css";
+@import "./motion.css";

package/dist/styles/tokens/motion.css

@@ -0,0 +1,51 @@
+/**
+ * Generated from motion.json. Do not edit.
+ * Regenerate with `pnpm --filter @ionbase-ui/tokens build`.
+ *
+ * Source: motion.json (repo-owned — NOT a Figma export)
+ *
+ * These are NOT tokens. Figma expresses motion as prototype reactions rather
+ * than variables, so there is nothing for them to alias; the values are
+ * committed and generated instead. The `--ion-` prefix marks that, the same
+ * way it does for `--ion-shadow-*`.
+ *
+ * A LADDER, NOT RECIPES. Pick a rung per component. There is deliberately no
+ * `--ion-duration-hover`: that is indexed by usage, so it needs a new name
+ * per usage pattern.
+ *
+ * Reduced motion is handled globally in the package's index.css, not here —
+ * one block covering every `ion-*` rule, rather than a media query per value.
+ */
+
+:root {
+  /* Press and release. Must resolve before the finger leaves the button, or */
+  /* the feedback reads as lag rather than as a press. */
+  --ion-duration-fast: 120ms;
+
+  /* The default for any state colour change — hover, focus, selection, */
+  /* validation. Replaces a hardcoded 150ms that read as abrupt. */
+  --ion-duration-base: 200ms;
+
+  /* Anything that travels or changes size: panels, overlays, disclosure. */
+  /* Distance needs time; a colour does not. */
+  --ion-duration-slow: 320ms;
+
+  /* The default. Leaves immediately and decelerates into the end state, so */
+  /* the change reads as settling. Correct for anything entering a state and */
+  /* staying there. */
+  --ion-ease-out: cubic-bezier(0.2, 0, 0, 1);
+
+  /* Accelerates and arrives at full velocity. Only for things leaving — */
+  /* dismissing an overlay, collapsing a panel. On a state a user is entering */
+  /* it reads as a snap. */
+  --ion-ease-in: cubic-bezier(0.4, 0, 1, 1);
+
+  /* Symmetric, for two-way travel where the same element moves back and */
+  /* forth — the Toggle knob. This is the curve every stylesheet used for */
+  /* everything, which is why state changes felt jerky. */
+  --ion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Continuous progress only, where easing would misreport position. Never */
+  /* for interaction. */
+  --ion-ease-linear: linear;
+}

package/dist/tokens/index.d.ts

@@ -1093,7 +1093,7 @@ export declare const tokenValues: {
         readonly Dark: "{alpha.black-60}";
     };
     readonly "surface/inverse": {
-        readonly Light: "{neutral.900}";
+        readonly Light: "{neutral.800}";
         readonly Dark: "{base.white}";
     };
     readonly "surface/inverse-subtle": {

package/dist/tokens/index.js

@@ -698,7 +698,7 @@ export const tokenValues = {
         "Dark": "{alpha.black-60}"
     },
     "surface/inverse": {
-        "Light": "{neutral.900}",
+        "Light": "{neutral.800}",
         "Dark": "{base.white}"
     },
     "surface/inverse-subtle": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ionbase-ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "IonBase Design System — accessible React components, styles and design tokens in one package",
   "license": "MIT",
   "type": "module",