@sola-air-ui/tokens 1.0.2 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sola-air-ui/tokens",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Design tokens for Sola AIR — spacing, radius, type scale, color, and semantic palette",
   "type": "module",
   "main": "./src/index.js",

package/src/index.js

@@ -94,6 +94,28 @@ export const tokens = {
     high:     { fg: '#dc2626', bg: '#fef2f2' },
     critical: { fg: '#9333ea', bg: '#faf5ff' },
   },
+
+  /**
+   * Stacking order. nav < dropdown < overlay-scrim < modal/sheet (same tier
+   * — mutually exclusive, focused overlays) < toast (always topmost).
+   */
+  zIndex: {
+    nav:      40,
+    dropdown: 100,
+    overlay:  800,
+    modal:    900,
+    sheet:    900,
+    toast:    1000,
+  },
+
+  /** One easing curve, two durations — see tokens.css for the rationale. */
+  motion: {
+    ease: 'cubic-bezier(0.16, 1, 0.3, 1)',
+    duration: {
+      fast: '160ms',
+      base: '240ms',
+    },
+  },
 };
 
 export default tokens;

package/src/tokens.css

@@ -159,6 +159,31 @@
 
   /* ─── Focus ring ────────────────────────────────────────────────────────────*/
   --sola-focus-ring: 0 0 0 3px rgba(16, 185, 129, 0.4);
+
+  /* ─── Z-index scale ─────────────────────────────────────────────────────────
+   * Every stacking-context component in the library should sit on one of
+   * these steps, never a bare magic number. nav < dropdown < overlay-scrim
+   * < modal/sheet (same tier — both are focused, blocking overlays that
+   * shouldn't appear at once) < toast (always topmost, so a confirmation
+   * or error stays visible even while a modal is open).
+   */
+  --sola-z-nav:      40;
+  --sola-z-dropdown: 100;
+  --sola-z-overlay:  800;
+  --sola-z-modal:    900;
+  --sola-z-sheet:    900;
+  --sola-z-toast:    1000;
+
+  /* ─── Motion ─────────────────────────────────────────────────────────────────
+   * One easing curve, two durations. `fast` for micro-interactions (hover,
+   * toggle); `base` for anything that opens/closes a surface (modal, sheet,
+   * dropdown). Components should reference these rather than hardcoding
+   * their own timing — three different curves across a handful of overlay
+   * components is what "inconsistent" looks like in practice.
+   */
+  --sola-ease-standard:  cubic-bezier(0.16, 1, 0.3, 1);
+  --sola-duration-fast:  160ms;
+  --sola-duration-base:  240ms;
 }
 
 /* ─── Dark mode — system default ─────────────────────────────────────────────