ionbase-ui 0.2.0 → 0.4.0

package/dist/styles/tabs.css

@@ -9,9 +9,13 @@
  * variables rather than restating five declarations, and the icon rule needs no
  * per-size override.
  *
- * Only the horizontal orientation is implemented. Figma also defines vertical;
- * the track modifier is named `--horizontal` so vertical is additive rather
- * than a rename.
+ * Vertical is STRUCTURAL ONLY. `--vertical` stacks the track and stretches the
+ * items, which is what the word means and needs no design input. Its
+ * decoration does: the underline rule is a `border-bottom` and the pill track's
+ * padding is written for the horizontal axis, and which edge the underline
+ * moves to is Figma's call, not this file's. Until that is specified, a
+ * vertical track is correctly stacked, correctly navigable and correctly
+ * announced, but wears the horizontal type styling.
  */
 
 /* Track */
@@ -23,6 +27,11 @@
   padding: 0;
 }
 
+.ion-tabs__track--vertical {
+  flex-direction: column;
+  align-items: stretch;
+}
+
 .ion-tabs__track--underline.ion-tabs__track--horizontal {
   display: inline-flex;
   gap: var(--spacing-4);
@@ -71,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/dist/tokens-js.d.ts

@@ -0,0 +1,12 @@
+/**
+ * JS token values as `var(--…)` string references.
+ *
+ * Prefer this subpath over the main barrel so importing a component does not
+ * pull ~48KB of token JSON into bundlers that do not tree-shake:
+ *
+ *   import { semantic, tokens } from 'ionbase-ui/tokens-js';
+ *
+ * CSS custom properties stay at `ionbase-ui/tokens` / `ionbase-ui/styles`.
+ */
+export * from './tokens/index.js';
+//# sourceMappingURL=tokens-js.d.ts.map

package/dist/tokens-js.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens-js.d.ts","sourceRoot":"","sources":["../src/tokens-js.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,cAAc,mBAAmB,CAAC"}

package/dist/tokens-js.js

@@ -0,0 +1,12 @@
+/**
+ * JS token values as `var(--…)` string references.
+ *
+ * Prefer this subpath over the main barrel so importing a component does not
+ * pull ~48KB of token JSON into bundlers that do not tree-shake:
+ *
+ *   import { semantic, tokens } from 'ionbase-ui/tokens-js';
+ *
+ * CSS custom properties stay at `ionbase-ui/tokens` / `ionbase-ui/styles`.
+ */
+export * from './tokens/index.js';
+//# sourceMappingURL=tokens-js.js.map

package/dist/tokens-js.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens-js.js","sourceRoot":"","sources":["../src/tokens-js.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,cAAc,mBAAmB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ionbase-ui",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "IonBase Design System — accessible React components, styles and design tokens in one package",
   "license": "MIT",
   "type": "module",
@@ -14,7 +14,11 @@
     "./styles": "./dist/styles/index.css",
     "./styles/*": "./dist/styles/*",
     "./tokens": "./dist/styles/tokens/index.css",
-    "./tokens/*": "./dist/styles/tokens/*"
+    "./tokens/*": "./dist/styles/tokens/*",
+    "./tokens-js": {
+      "types": "./dist/tokens-js.d.ts",
+      "default": "./dist/tokens-js.js"
+    }
   },
   "keywords": [
     "design-system",
@@ -46,7 +50,7 @@
   },
   "scripts": {
     "dev": "tsc --watch",
-    "build": "node scripts/sync-tokens.mjs && tsc --build --force && node scripts/copy-css.mjs",
+    "build": "node scripts/sync-tokens.mjs && tsc --build --force && node scripts/copy-css.mjs && node scripts/verify-client-boundaries.mjs",
     "typecheck": "tsc --noEmit",
     "lint": "eslint . && stylelint \"src/styles/*.css\"",
     "format": "prettier --check .",