@nsaa/tokens 0.0.0-stage → 0.1.0-alpha.1

package/src/effects.json

@@ -0,0 +1,73 @@
+{
+  "$description": "Shadows (Interfere structure), spacing, motion (Nsaa feel spec) and sound.",
+  "shadow": {
+    "default": {
+      "$note": "shadcn shadow-xs (#81). The old Interfere hairline stack is gone; borders carry the edge.",
+      "light": "0 1px 2px 0 {@shadow-default-2}",
+      "dark": "0 1px 2px 0 {@shadow-default-2}"
+    },
+    "large": {
+      "light": "0 0 0 0.5px {@shadow-large-ring}, 0 2px 3px -2px {@shadow-large-1}, 0 3px 12px -4px {@shadow-large-2}, 0 4px 16px -8px {@shadow-large-3}",
+      "dark": "0 0 0 1px {@shadow-large-ring}, 0 2px 3px -2px {@shadow-large-1}, 0 3px 8px -2px {@shadow-large-2}, 0 4px 12px -4px {@shadow-large-3}"
+    },
+    "extra-large": {
+      "light": "inset 0 0 0 0.5px {@shadow-xl-inset}, 0 0 0 0.5px {@shadow-xl-ring}, 0 8px 40px 0 #0000000D, 0 12px 32px -16px #00000026",
+      "dark": "inset 0 0 0 0.5px {@shadow-xl-inset}, 0 0 0 0.5px {@shadow-xl-ring}, 0 8px 40px 0 #0000000D, 0 12px 32px -16px #00000026"
+    },
+    "border": { "light": "0 0 0 1px {@shadow-border}", "dark": "0 0 0 1px {@shadow-border}" },
+    "inset": { "light": "inset 0 0 0 0.5px {@shadow-inset-hairline}", "dark": "inset 0 0 0 0.5px {@shadow-inset-hairline}" },
+    "focus": { "light": "0 0 0 2px {@page}, 0 0 0 4px {@brand-border-focus}", "dark": "0 0 0 2px {@page}, 0 0 0 4px {@brand-border-focus}" },
+    "sm": { "$note": "Tailwind v4 shadow-sm as shadcn uses it (active Tabs trigger); same in both modes (#99)", "light": "0 1px 3px 0 #0000001A, 0 1px 2px -1px #0000001A", "dark": "0 1px 3px 0 #0000001A, 0 1px 2px -1px #0000001A" },
+    "md": { "$note": "Tailwind v4 shadow-md as shadcn uses it (Popover, Select, Combobox); same in both modes (#95)", "light": "0 4px 6px -1px #0000001A, 0 2px 4px -2px #0000001A", "dark": "0 4px 6px -1px #0000001A, 0 2px 4px -2px #0000001A" },
+    "lg": { "$note": "Tailwind v4 shadow-lg as shadcn uses it (Toast); same in both modes (#95)", "light": "0 10px 15px -3px #0000001A, 0 4px 6px -4px #0000001A", "dark": "0 10px 15px -3px #0000001A, 0 4px 6px -4px #0000001A" }
+  },
+  "spacing": { "base": 4, "steps": [0, 0.5, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24] },
+  "motion": {
+    "$source": "nsaa-feel.md (Rare UI feel, Emil Kowalski and Jakub Krehel rules)",
+    "duration": { "instant": 0, "press": 150, "tooltip": 125, "tooltip-exit": 100, "exit": 100, "char": 120, "fast": 150, "base": 200, "slow": 250, "drawer": 300, "chunk": 300, "marketing": 400, "marketing-slow": 500, "spin": 800, "caret": 1250, "feedback-hold": 1500 },
+    "ease": {
+      "out": "cubic-bezier(0.23, 1, 0.32, 1)",
+      "in-out": "cubic-bezier(0.77, 0, 0.175, 1)",
+      "drawer": "cubic-bezier(0.32, 0.72, 0, 1)",
+      "crossfade": "cubic-bezier(0.26, 0.08, 0.25, 1)",
+      "icon": "cubic-bezier(0.2, 0, 0, 1)",
+      "hover": "ease",
+      "linear": "linear"
+    },
+    "spring": {
+      "settle": { "type": "spring", "stiffness": 200, "damping": 28, "mass": 1 },
+      "snap": { "type": "spring", "stiffness": 500, "damping": 34, "mass": 1 },
+      "caret": { "type": "spring", "stiffness": 500, "damping": 40, "mass": 1 },
+      "momentum": { "type": "spring", "duration": 0.4, "bounce": 0.2 },
+      "sheet": { "type": "spring", "duration": 0.3, "bounce": 0.2, "$note": "Apple sheet: damping fraction 0.8 (#109)" },
+      "icon": { "type": "spring", "duration": 0.3, "bounce": 0 }
+    },
+    "scale": { "press": 0.97, "enter": 0.95, "icon-from": 0.25, "check-from": 0.8, "radio-from": 0.5, "char-from": 0.9, "held": 1.1 },
+    "distance": { "chunk": 12, "toast": "100%", "shake": 4 },
+    "blur": { "chunk": 4, "crossfade": 2, "icon": 4, "max": 20 },
+    "stagger": { "list": 50, "list-min": 30, "list-max": 80, "chunk": 100 },
+    "gesture": { "hysteresis": 10, "dismiss-velocity": 0.11, "rubber-band": 0.55, "momentum-decay": 0.998, "momentum-decay-snappy": 0.99 },
+    "drawer-height": { "per-px": 500, "min": 0.15, "max": 0.27 },
+    "reduced": { "$note": "prefers-reduced-motion: movement, scale, blur and springs become an opacity cross-fade of this duration.", "fade": 150 },
+    "loader": { "$note": "Loaders (#113): defaults from loading.dev 0.3.6 SPINNER_MOTION (MIT, Jakub Krehel), pinned 755235b. Size scale matches icon sizes; delay and minimum display stop flashes. Text loaders (shimmer-text … terminal): Loading UI (MIT, Bartosz Zagrodzki) defaults, pinned d78e09e.", "size": { "xs": 12, "sm": 14, "md": 16, "lg": 20, "xl": 24 }, "delay": 150, "min-display": 500, "duration": { "arc": 800, "atom": 1000, "blocks": 1300, "bouncing-dots": 500, "cascade": 1500, "circular-dots": 800, "classic": 1200, "classic-v2": 800, "clock": 1200, "comet": 700, "compass": 500, "dual": 1000, "eclipse": 1200, "flip": 1200, "gather": 1600, "leap": 1800, "linear-dots": 900, "loading": 1000, "morph": 1200, "orbit": 750, "pulse": 1200, "radar": 1500, "ring": 800, "ripple": 1200, "slide": 2400, "snake": 1400, "swirl": 1200, "trace": 1200, "wave": 900, "shimmer-text": 2000, "shimmer-wave": 1000, "text-dots": 1400, "typing": 1000, "analyzing-image": 2500, "terminal": 1000 } }
+  },
+  "sound": {
+    "$note": "On by default (decision #30): plays only after a user action, never on load; quiet; one remembered global mute; silent under prefers-reduced-motion; apps can turn the default off. Cue values are UISFX 0.4.0 cue names (MIT code, CC0 audio), checked against its CUES export; feel is a UISFX pack name (decision #57).",
+    "enabled": true, "volume": 0.35, "feel": "zen", "library": "uisfx", "libraryVersion": "0.4.0",
+    "cue": {
+      "input.press": "press",
+      "input.toggle-on": "toggle-on",
+      "input.toggle-off": "toggle-off",
+      "selection.select": "select",
+      "navigation.open": "open",
+      "navigation.close": "close",
+      "movement.snap": "snap",
+      "movement.drop": "drop",
+      "feedback.success": "success",
+      "feedback.warning": "warning",
+      "feedback.error": "error",
+      "commerce.payment": "purchase",
+      "progress.loop": "loading"
+    }
+  }
+}