Split motion packs from accessibility overrides

packages/tokens/src/index.ts

@@ -18,10 +18,50 @@ export const themeDetails = {
   }
 } as const satisfies Record<ThemeName, { label: string; note: string }>;
 
-export const motionModeNames = ["system", "reduced"] as const;
-export type MotionModeName = (typeof motionModeNames)[number];
+export const motionPackNames = ["calm", "snappy", "spring"] as const;
+export type MotionPackName = (typeof motionPackNames)[number];
 
-export const defaultMotionMode: MotionModeName = "system";
+export const defaultMotionPack: MotionPackName = "calm";
+
+export const motionPackDetails = {
+  calm: {
+    label: "Calm",
+    note: "Editorial default with restrained lift and steady transitions"
+  },
+  snappy: {
+    label: "Snappy",
+    note: "Shorter durations, tighter distances, and more direct response"
+  },
+  spring: {
+    label: "Spring",
+    note: "More elastic easing, wider movement, and livelier feedback"
+  }
+} as const satisfies Record<MotionPackName, { label: string; note: string }>;
+
+export const motionAccessibilityNames = ["system", "full", "reduced"] as const;
+export type MotionAccessibilityName = (typeof motionAccessibilityNames)[number];
+
+export const defaultMotionAccessibility: MotionAccessibilityName = "system";
+
+export const motionAccessibilityDetails = {
+  system: {
+    label: "System",
+    note: "Follow the operating system reduced-motion preference"
+  },
+  full: {
+    label: "Full",
+    note: "Always show the selected motion pack, even if the OS prefers reduced motion"
+  },
+  reduced: {
+    label: "Reduced",
+    note: "Always collapse durations, distances, and animated feedback"
+  }
+} as const satisfies Record<MotionAccessibilityName, { label: string; note: string }>;
+
+export const motionModeNames = motionAccessibilityNames;
+export type MotionModeName = MotionAccessibilityName;
+
+export const defaultMotionMode: MotionModeName = defaultMotionAccessibility;
 
 export const motionScale = {
   instant: "var(--dur-instant)",
@@ -150,6 +190,16 @@ function getTargetElement(root?: HTMLElement) {
   return document.documentElement;
 }
 
+export function setMotionPack(pack: MotionPackName, root?: HTMLElement) {
+  const target = getTargetElement(root);
+
+  if (!target) {
+    return;
+  }
+
+  target.dataset.motionPack = pack;
+}
+
 export function setTheme(theme: ThemeName, root?: HTMLElement) {
   const target = getTargetElement(root);
 
@@ -160,7 +210,10 @@ export function setTheme(theme: ThemeName, root?: HTMLElement) {
   target.dataset.theme = theme;
 }
 
-export function setMotionMode(mode: MotionModeName, root?: HTMLElement) {
+export function setMotionAccessibility(
+  mode: MotionAccessibilityName,
+  root?: HTMLElement
+) {
   const target = getTargetElement(root);
 
   if (!target) {
@@ -174,3 +227,7 @@ export function setMotionMode(mode: MotionModeName, root?: HTMLElement) {
 
   target.dataset.motion = mode;
 }
+
+export function setMotionMode(mode: MotionModeName, root?: HTMLElement) {
+  setMotionAccessibility(mode, root);
+}