@nswds/tokens 3.6.0 → 3.8.0

package/README.md

@@ -4,7 +4,7 @@
 [![npm version](https://img.shields.io/npm/v/%40nswds%2Ftokens)](https://www.npmjs.com/package/@nswds/tokens)
 
 Design tokens for the NSW Design System — colour, spacing, typography, radius,
-breakpoints, borders, and shadows — plus related brand assets.
+breakpoints, borders, shadows, motion, and z-index — plus related brand assets.
 
 The published package ships:
 
@@ -23,6 +23,8 @@ The published package ships:
 - **Spacing** (4px-grid rem scale), **radius**, **breakpoints**, **border widths**,
   **shadows** (elevation ramp + inset rings), and **typography** (font stacks, sizes,
   weights, line-heights, tracking) — with semantic typography styles (`heading-1`…`code`)
+- **Motion** (durations + cubic-bezier easings) and **z-index** scale — DRAFT, pending
+  design review
 - DTCG 2025.10-compliant raw token JSON under `@nswds/tokens/tokens/*`
 - Tailwind CSS v4 `@theme` files for every category
 - Root JS API for consuming token collections directly
@@ -93,6 +95,23 @@ Each category publishes per-format files named by layer:
 The same values are available as SCSS/LESS variables and JS/JSON modules, e.g.
 `@nswds/tokens/js/radius/global.js` exports `radius = { none: '0px', sm: '4px', … }`.
 
+> ⚠️ **Motion and z-index values are DRAFT** pending design review — the scales (and the
+> mapping of names to numbers) may change before they are confirmed. They are published so
+> the wiring is in place; treat the specific values as provisional.
+
+```css
+@import '@nswds/tokens/css/motion/global.css'; /* --duration-* + --easing-*      */
+@import '@nswds/tokens/css/z-index/global.css'; /* --z-index-base … --z-index-tooltip */
+
+.drawer {
+  transition: transform var(--duration-base) var(--easing-decelerate);
+  z-index: var(--z-index-modal);
+}
+```
+
+`duration.*` are CSS times (`150ms`), `easing.*` are `cubic-bezier(…)` timing functions,
+and `z-index.*` are plain integers.
+
 ### 4. Typography
 
 ```css
@@ -182,6 +201,8 @@ categories carry direct values (one import each):
 | `tailwind/typography/global.css`             | `--font-*`, `--text-*`, `--font-weight-*`, `--leading-*`, `--tracking-*` | `font-sans`, `text-16`, `leading-base`, …                     |
 | `tailwind/shadow/global.css`                 | `--shadow-*`, `--inset-shadow-*`                                         | `shadow-md`, `inset-shadow-thin`, …                           |
 | `tailwind/border/global.css`                 | `--border-width-*` (plain vars; no native namespace)                     | arbitrary values: `border-[length:var(--border-width-thick)]` |
+| `tailwind/motion/global.css`                 | `--ease-*` (native); `--duration-*` (plain vars)                         | `ease-standard`; `duration-[var(--duration-fast)]`            |
+| `tailwind/z-index/global.css`                | `--z-index-*` (plain vars; no native namespace)                          | arbitrary values: `z-[var(--z-index-modal)]`                  |
 
 ```css
 @import 'tailwindcss';

package/dist/css/motion/global.css

@@ -0,0 +1,8 @@
+:root {
+  --duration-fast: 150ms; /** Fast — quick feedback on small elements (hovers, toggles, focus rings). DRAFT pending design review. */
+  --duration-base: 250ms; /** Base — the default duration for most UI transitions. DRAFT pending design review. */
+  --duration-slow: 400ms; /** Slow — larger surfaces entering or leaving (modals, drawers, sheets). DRAFT pending design review. */
+  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1); /** Standard ease-in-out — the default curve for elements moving within the viewport. DRAFT pending design review. */
+  --easing-decelerate: cubic-bezier(0, 0, 0.2, 1); /** Decelerate (ease-out) — elements entering the screen, fast then settling. DRAFT pending design review. */
+  --easing-accelerate: cubic-bezier(0.4, 0, 1, 1); /** Accelerate (ease-in) — elements leaving the screen, building speed as they exit. DRAFT pending design review. */
+}

package/dist/css/z-index/global.css

@@ -0,0 +1,10 @@
+:root {
+  --z-index-base: 0; /** Base stacking level (0) — default in-flow content. DRAFT pending design review. */
+  --z-index-dropdown: 1000; /** Dropdown menus and select popups. DRAFT pending design review. */
+  --z-index-sticky: 1100; /** Sticky elements that pin on scroll (headers, toolbars). DRAFT pending design review. */
+  --z-index-overlay: 1200; /** Full-screen overlay scrims sitting behind modal content. DRAFT pending design review. */
+  --z-index-modal: 1300; /** Modal dialogs and side sheets. DRAFT pending design review. */
+  --z-index-popover: 1400; /** Popovers anchored to a trigger, above modals. DRAFT pending design review. */
+  --z-index-toast: 1500; /** Toast and snackbar notifications. DRAFT pending design review. */
+  --z-index-tooltip: 1600; /** Tooltips — the top-most interactive layer. DRAFT pending design review. */
+}