@sola-air-ui/tokens 1.0.1 → 1.1.0

package/README.md

@@ -0,0 +1,39 @@
+# @sola-air-ui/tokens
+
+Design tokens for [Sola AIR](https://sola-air.dev) — spacing, radius, type scale, color, and semantic palette values, shared across `@sola-air-ui/ui` components so everything renders from one consistent system instead of hardcoded values scattered per component.
+
+## Install
+
+```bash
+npm install @sola-air-ui/tokens
+```
+
+## Usage
+
+**As CSS custom properties** (drop into any stylesheet or `.sola` component):
+
+```css
+@import '@sola-air-ui/tokens/css';
+
+.my-panel {
+  padding: var(--sola-space-lg);
+  border-radius: var(--sola-radius-lg);
+  color: var(--sola-text-primary);
+}
+```
+
+**As JS values** (for computed styles, chart theming, etc.):
+
+```js
+import tokens from '@sola-air-ui/tokens';
+
+console.log(tokens.space.lg, tokens.radius.lg, tokens.color.primary);
+```
+
+## Scoping note for widget/iframe environments
+
+If you're embedding Sola output inside something that auto-scopes CSS to a container (e.g. a CMS widget sandbox), point the token stylesheet's root selector at your actual mount element rather than `:root` — a scoped `:root` selector matches nothing, since `:root` always resolves to `<html>` regardless of nesting.
+
+## License
+
+MIT — see the [repo root](https://github.com/rbm3267/sola-air) for the full license and [changelog](https://github.com/rbm3267/sola-air/blob/main/CHANGELOG.md).

package/package.json

@@ -1,22 +1,22 @@
-{
-  "name": "@sola-air-ui/tokens",
-  "version": "1.0.1",
-  "description": "Design tokens for Sola AIR — spacing, radius, type scale, color, and semantic palette",
-  "type": "module",
-  "main": "./src/index.js",
-  "exports": {
-    ".": "./src/index.js",
-    "./css": "./src/tokens.css"
-  },
-  "keywords": ["sola", "design-tokens", "css-variables", "design-system", "tokens"],
-  "license": "MIT",
-  "homepage": "https://sola-air.dev",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/rbm3267/sola-air"
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  }
-}
+{
+  "name": "@sola-air-ui/tokens",
+  "version": "1.1.0",
+  "description": "Design tokens for Sola AIR — spacing, radius, type scale, color, and semantic palette",
+  "type": "module",
+  "main": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./css": "./src/tokens.css"
+  },
+  "keywords": ["sola", "design-tokens", "css-variables", "design-system", "tokens"],
+  "license": "MIT",
+  "homepage": "https://sola-air.dev",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rbm3267/sola-air"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

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 ─────────────────────────────────────────────