@cregis/tokens 1.0.7 → 1.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cregis/tokens",
-  "version": "1.0.7",
+  "version": "1.0.10",
   "description": "Design tokens for frontend projects",
   "type": "module",
   "license": "MIT",

package/src/desktop/color-definition.css

@@ -24,6 +24,7 @@
   --event-focus: color(from var(--eds-base) display-p3 r g b / 0.07);
   --event-focus-brand: color(from var(--eds-brand) display-p3 r g b / 1);
   --event-focus-brand-weaken: color(from var(--eds-brand) display-p3 r g b / 0.2);
+  --event-focus-brand-subtle: color(from var(--eds-brand) display-p3 r g b / 0.12);
 
   --status-disable-base: color(from var(--eds-base) display-p3 r g b / 0.2);
   --status-disable-base-weaken: color(from var(--eds-base) display-p3 r g b / 0.05);
@@ -134,6 +135,17 @@
   --stroke-same-white-secondary: color(from var(--eds-same-white) display-p3 r g b / 0.6);
   --stroke-same-black-primary: color(from var(--eds-same-black) display-p3 r g b / 1);
   --stroke-same-black-secondary: color(from var(--eds-same-black) display-p3 r g b / 0.6);
+
+  --aml-exposure-tone-1: color(display-p3 0.5373 0.7294 0.6039);
+  --aml-exposure-tone-2: color(display-p3 0.5608 0.7451 0.7137);
+  --aml-exposure-tone-3: color(display-p3 0.5725 0.7373 0.7529);
+  --aml-exposure-tone-4: color(display-p3 0.5804 0.7059 0.7608);
+  --aml-exposure-tone-5: color(display-p3 0.5882 0.6824 0.7647);
+  --aml-exposure-tone-6: color(display-p3 0.8078 0.6549 0.5765);
+  --aml-exposure-tone-7: color(display-p3 0.7765 0.5451 0.6275);
+  --aml-exposure-tone-8: color(display-p3 0.7569 0.5294 0.6941);
+  --aml-exposure-tone-9: color(display-p3 0.7373 0.5137 0.7412);
+  --aml-exposure-tone-10: color(display-p3 0.6627 0.502 0.7294);
 }
 
 .dark {
@@ -164,6 +176,17 @@
 
   --stroke-outline-deep: color(from var(--eds-base) display-p3 r g b / 0.2);
   --stroke-outline-subtle: color(from var(--eds-base) display-p3 r g b / 0.1);
+
+  --aml-exposure-tone-1: color(display-p3 0.3529 0.5647 0.4235);
+  --aml-exposure-tone-2: color(display-p3 0.2745 0.5608 0.4667);
+  --aml-exposure-tone-3: color(display-p3 0.2 0.549 0.5137);
+  --aml-exposure-tone-4: color(display-p3 0.1333 0.5373 0.5569);
+  --aml-exposure-tone-5: color(display-p3 0.1059 0.5255 0.5922);
+  --aml-exposure-tone-6: color(display-p3 0.6039 0.4118 0.3137);
+  --aml-exposure-tone-7: color(display-p3 0.6196 0.3922 0.3412);
+  --aml-exposure-tone-8: color(display-p3 0.6235 0.3765 0.3765);
+  --aml-exposure-tone-9: color(display-p3 0.6157 0.3647 0.4157);
+  --aml-exposure-tone-10: color(display-p3 0.5922 0.3608 0.4549);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -195,5 +218,16 @@
 
     --stroke-outline-deep: color(from var(--eds-base) display-p3 r g b / 0.2);
     --stroke-outline-subtle: color(from var(--eds-base) display-p3 r g b / 0.1);
+
+    --aml-exposure-tone-1: color(display-p3 0.3529 0.5647 0.4235);
+    --aml-exposure-tone-2: color(display-p3 0.2745 0.5608 0.4667);
+    --aml-exposure-tone-3: color(display-p3 0.2 0.549 0.5137);
+    --aml-exposure-tone-4: color(display-p3 0.1333 0.5373 0.5569);
+    --aml-exposure-tone-5: color(display-p3 0.1059 0.5255 0.5922);
+    --aml-exposure-tone-6: color(display-p3 0.6039 0.4118 0.3137);
+    --aml-exposure-tone-7: color(display-p3 0.6196 0.3922 0.3412);
+    --aml-exposure-tone-8: color(display-p3 0.6235 0.3765 0.3765);
+    --aml-exposure-tone-9: color(display-p3 0.6157 0.3647 0.4157);
+    --aml-exposure-tone-10: color(display-p3 0.5922 0.3608 0.4549);
   }
 }

package/src/desktop/fragment/index.css

@@ -1,2 +1 @@
 @import "./backdrop.css";
-@import "./blur.css";

package/src/desktop/index.css

@@ -3,3 +3,4 @@
 @import "./size/index.css";
 @import "./typography/index.css";
 @import "./fragment/index.css";
+@import "./motion/index.css";

package/src/desktop/motion/base.css

@@ -0,0 +1,64 @@
+/**
+ * Do not edit directly, this file was auto-generated from Figma tokens.
+ * Motion System — base primitives (duration, easing, physical state).
+ * Source: spec/motion/base.json
+ */
+
+:root, .desktopTokens {
+
+  /* Duration（时长阶梯 · --eds-motion-N） */
+  --eds-motion-0: 0ms;
+  --eds-motion-1: 100ms;
+  --eds-motion-2: 150ms;
+  --eds-motion-3: 200ms;
+  --eds-motion-4: 300ms;
+  --eds-motion-5: 600ms;
+  --eds-motion-6: 500ms;
+  --eds-motion-7: 700ms;
+  --eds-motion-8: 250ms;
+  --eds-motion-9: 350ms;
+  --eds-motion-10: 800ms;
+  --eds-motion-11: 2000ms;
+  --eds-motion-12: 180ms;
+  /* 0 = instant / focus / reduced-motion
+     * 4 = 默认 hover（300ms）
+     * 8 = Toggle / Tab 滑块（250ms）
+     * 12 = Layout Deform 内容 crossfade
+     * 10–11 = Spinner 周期
+     */
+
+  /* Easing（缓动曲线 · --eds-motion-ease-N） */
+  --eds-motion-ease-1: ease-in-out;
+  --eds-motion-ease-2: cubic-bezier(0.2, 0, 0, 1);
+  --eds-motion-ease-3: cubic-bezier(0.4, 0, 1, 1);
+  --eds-motion-ease-4: cubic-bezier(0.4, 0, 0.2, 1);
+  --eds-motion-ease-5: linear;
+  --eds-motion-ease-6: cubic-bezier(0.34, 1.4, 0.64, 1);
+  --eds-motion-ease-7: cubic-bezier(0.34, 1.45, 0.64, 1);
+  --eds-motion-ease-8: cubic-bezier(0.22, 1, 0.36, 1);
+  --eds-motion-ease-9: cubic-bezier(0.16, 1, 0.3, 1);
+  --eds-motion-ease-10: cubic-bezier(0.3, 0, 0.8, 0.15);
+  --eds-motion-ease-11: cubic-bezier(0.12, 0.8, 0.2, 1);
+  --eds-motion-ease-12: cubic-bezier(0.2, 0.8, 0.2, 1);
+  /* ease-1 = 缓入缓出（对称 hover，默认）
+     * ease-4 = Material · ease-5 = 线性（Spinner）
+     * ease-6/7 = 弹性反馈 · ease-8 = 减速渐隐
+     */
+
+  /* Primitive State（物理量 — 无场景语义） */
+  --motion-opacity-hidden: 0;
+  --motion-opacity-visible: 1;
+  --motion-scale-small: 0.95;
+  --motion-scale-flotation-enter: 0.96; /* Flotation 入场 scale */
+  --motion-offset-small: var(--spacing-2); /* 8px · shift */
+  --motion-offset-nudge-y: calc(-1 * var(--spacing-1-5)); /* -6px · nudge（legacy） */
+  --motion-offset-flotation-y: calc(-1 * var(--spacing-2-5)); /* -10px · Flotation 入场 */
+  --motion-offset-page-enter-x: 100%; /* Motion Page Push · 新页从右侧进入 */
+  --motion-offset-page-leave-x: 18%; /* Motion Page Push · 旧页 parallax 后退 */
+  --motion-offset-page-content-enter: calc(var(--spacing-5) + var(--spacing-05)); /* 22px · Motion Page content parallax 进入 */
+  --motion-offset-page-content-leave: var(--spacing-2); /* 8px · Motion Page content parallax 离开 */
+  --motion-opacity-page-enter-from: 0.96; /* Motion Page Push · 新页起始 opacity */
+  --motion-opacity-page-leave-to: 0.94; /* Motion Page Push · 旧页结束 opacity */
+  --motion-offset-layout-deform-y: var(--spacing-2-5); /* 10px · Layout Deform 内容 vertical nudge（Popover crossfade） */
+  --motion-offset-page-content-y-pop: 0; /* Motion Page Pop · 内层 content 纵移；0 = 返回时不上下挪 */
+}

package/src/desktop/motion/index.css

@@ -1 +1,9 @@
-@import "./vars.css";
+/**
+ * Motion System entry
+ * Do not edit directly, this file was auto-generated.
+ */
+
+@import './base.css';
+@import './recipe.css';
+@import './semantic.css';
+@import './utilities.css';

package/src/desktop/motion/recipe.css

@@ -0,0 +1,108 @@
+/**
+ * Do not edit directly, this file was auto-generated from Figma tokens.
+ * Motion System — recipes (duration + easing + property).
+ * Source: spec/motion/recipe.json
+ */
+
+:root, .desktopTokens {
+
+  /* Duration Roles（物理时长角色 → eds-motion-N） */
+  --motion-duration-instant: var(--eds-motion-0); /* Focus / selected / reduced */
+  --motion-duration-micro: var(--eds-motion-1); /* Checkbox / toggle */
+  --motion-duration-fade: var(--eds-motion-2); /* Opacity / 虚线 */
+  --motion-duration-enter: var(--eds-motion-3); /* 浮层进入 */
+  --motion-duration-float: var(--eds-motion-4); /* 微浮动 / hover 反馈 */
+  --motion-duration-hover: var(--eds-motion-4); /* Hover paint（is-paint / is-paint-fade） */
+  --motion-duration-hover-asym: var(--eds-motion-5); /* 600ms · is-asym 入场（仅 motion-recipe-hover-asym） */
+  --motion-duration-shift: var(--eds-motion-4); /* Layout / Skid */
+  --motion-duration-emphasis: var(--eds-motion-5); /* 强调 / 大面板 */
+  --motion-duration-page: 460ms;  /* Motion Page Push · 默认 page 时长 */
+  --motion-duration-page-pop: 400ms; /* Motion Page Pop */
+  --motion-duration-page-content: 420ms; /* Motion Page content parallax · Push */
+  --motion-duration-page-content-pop: 360ms; /* Motion Page content parallax · Pop */
+  --motion-duration-control: var(--eds-motion-8); /* Toggle / Tab 滑块 */
+  --motion-duration-feedback: var(--eds-motion-9); /* EndFeedback 圆环 */
+  --motion-duration-scroll-fade: var(--eds-motion-6); /* Nav 滚动遮罩 */
+  --motion-duration-spin: var(--eds-motion-10); /* Button spinner */
+  --motion-duration-spin-slow: var(--eds-motion-11); /* DataList spinner */
+  --motion-duration-layout-deform: var(--eds-motion-9); /* 350ms · Layout Deform shell（height / max-height） */
+  --motion-duration-layout-deform-content: var(--eds-motion-12); /* 180ms · Layout Deform 内容 crossfade */
+  --motion-delay-layout-deform-content-swap: 120ms; /* 内容淡出中途换页（与 shell morph 并行） */
+  --motion-delay-feedback-tick: var(--eds-motion-3); /* EndFeedback 勾号延迟 */
+
+  /* Easing Roles（物理缓动角色 → eds-motion-ease-N） */
+  --motion-easing-standard: var(--eds-motion-ease-1); /* 缓入缓出（默认） */
+  --motion-easing-enter: var(--eds-motion-ease-2); /* 进入 */
+  --motion-easing-exit: var(--eds-motion-ease-3); /* 离开 */
+  --motion-easing-product: var(--eds-motion-ease-4); /* Material */
+  --motion-easing-linear: var(--eds-motion-ease-5); /* Spinner 线性 */
+  --motion-easing-spring: var(--eds-motion-ease-6); /* 弹性反馈（圆环） */
+  --motion-easing-spring-emphasis: var(--eds-motion-ease-7); /* 弹性反馈（勾号） */
+  --motion-easing-decelerate: var(--eds-motion-ease-8); /* 减速渐隐 */
+  --motion-easing-float: var(--eds-motion-ease-8); /* 微浮动 */
+  --motion-easing-page-enter: var(--eds-motion-ease-9); /* Motion Page Push · 新页进入 */
+  --motion-easing-page-leave: var(--eds-motion-ease-10); /* Motion Page Push · 旧页后退 */
+  --motion-easing-page-content: var(--eds-motion-ease-11); /* Motion Page content parallax · Push */
+  --motion-easing-page-pop: var(--eds-motion-ease-12); /* Motion Page Pop */
+
+  /* Property Bundles（属性束 — EDS glue 拼装用） */
+  --motion-property-paint: background-color, color, border-color, box-shadow, opacity, outline-color, outline-offset, fill;
+  --motion-property-geometry: flex, max-width, width, min-width, max-height, transform, left, padding;
+  --motion-property-fade: opacity;
+
+  /* Recipes（duration + easing + property 组合） */
+  --motion-recipe-fade: opacity var(--motion-duration-fade) var(--motion-easing-standard);
+  --motion-recipe-enter: opacity var(--motion-duration-enter) var(--motion-easing-enter), transform var(--motion-duration-enter) var(--motion-easing-enter);
+  --motion-recipe-exit: opacity var(--motion-duration-enter) var(--motion-easing-exit), transform var(--motion-duration-enter) var(--motion-easing-exit);
+  --motion-recipe-nudge: opacity var(--motion-duration-float) var(--motion-easing-float), transform var(--motion-duration-float) var(--motion-easing-float);
+  --motion-recipe-flotation-enter: opacity var(--motion-duration-enter) var(--motion-easing-standard), transform var(--motion-duration-emphasis) var(--motion-easing-spring-emphasis); /* Flotation 非对称入场 · opacity 200ms + transform 400ms spring */
+  --motion-recipe-flotation-exit: opacity var(--motion-duration-enter) var(--motion-easing-exit), transform var(--motion-duration-float) var(--motion-easing-decelerate); /* Flotation 离场 · 无 spring overshoot */
+  --motion-recipe-nudge-opacity: opacity var(--motion-duration-float) var(--motion-easing-float);
+  --motion-recipe-control: transform var(--motion-duration-control) var(--motion-easing-product), width var(--motion-duration-control) var(--motion-easing-product);
+  --motion-recipe-hover: background-color var(--motion-duration-hover) var(--motion-easing-standard), color var(--motion-duration-hover) var(--motion-easing-standard), border-color var(--motion-duration-hover) var(--motion-easing-standard), box-shadow var(--motion-duration-hover) var(--motion-easing-standard), opacity var(--motion-duration-hover) var(--motion-easing-standard), outline-color var(--motion-duration-hover) var(--motion-easing-standard), outline-offset var(--motion-duration-hover) var(--motion-easing-standard);
+  --motion-recipe-hover-asym: background-color var(--motion-duration-hover-asym) var(--motion-easing-exit), color var(--motion-duration-hover-asym) var(--motion-easing-exit), border-color var(--motion-duration-hover-asym) var(--motion-easing-exit), box-shadow var(--motion-duration-hover-asym) var(--motion-easing-exit), opacity var(--motion-duration-hover-asym) var(--motion-easing-exit), outline-color var(--motion-duration-hover-asym) var(--motion-easing-exit), outline-offset var(--motion-duration-hover-asym) var(--motion-easing-exit), fill var(--motion-duration-hover-asym) var(--motion-easing-exit);
+  --motion-recipe-shift: flex var(--motion-duration-shift) var(--motion-easing-standard), max-width var(--motion-duration-shift) var(--motion-easing-standard), width var(--motion-duration-shift) var(--motion-easing-standard), min-width var(--motion-duration-shift) var(--motion-easing-standard), max-height var(--motion-duration-shift) var(--motion-easing-standard), transform var(--motion-duration-shift) var(--motion-easing-standard), left var(--motion-duration-shift) var(--motion-easing-standard), padding var(--motion-duration-shift) var(--motion-easing-standard);
+  --motion-recipe-scroll-fade: opacity var(--motion-duration-scroll-fade) var(--motion-easing-decelerate);
+  --motion-recipe-scroll-fade-background: background var(--motion-duration-scroll-fade) var(--motion-easing-decelerate);
+  --motion-recipe-float: opacity var(--motion-duration-hover) var(--motion-easing-standard), transform var(--motion-duration-hover) var(--motion-easing-standard);
+  --motion-recipe-page-push: opacity var(--motion-duration-page) var(--motion-easing-page-enter), transform var(--motion-duration-page) var(--motion-easing-page-enter); /* Motion Page semantic 默认 · idle / fallback */
+  --motion-recipe-page-enter-active: opacity var(--motion-duration-page) var(--motion-easing-page-enter), transform var(--motion-duration-page) var(--motion-easing-page-enter); /* Motion Page glue · forward enter-active */
+  --motion-recipe-page-leave-active-forward: opacity var(--motion-duration-page) var(--motion-easing-page-leave), transform var(--motion-duration-page) var(--motion-easing-page-leave); /* Motion Page glue · forward leave-active */
+  --motion-recipe-page-enter-active-pop: opacity var(--motion-duration-page-pop) var(--motion-easing-page-pop), transform var(--motion-duration-page-pop) var(--motion-easing-page-pop); /* Motion Page glue · backward enter-active */
+  --motion-recipe-page-leave-active-pop: opacity var(--motion-duration-page-pop) var(--motion-easing-page-pop), transform var(--motion-duration-page-pop) var(--motion-easing-page-pop); /* Motion Page glue · backward leave-active */
+  --motion-recipe-page-content-push: transform var(--motion-duration-page-content) var(--motion-easing-page-content); /* Motion Page glue · content parallax Push */
+  --motion-recipe-page-content-pop: transform var(--motion-duration-page-content-pop) var(--motion-easing-page-pop); /* Motion Page glue · content parallax Pop */
+  --motion-recipe-layout-deform-shell: height var(--motion-duration-layout-deform) var(--motion-easing-float), max-height var(--motion-duration-layout-deform) var(--motion-easing-float), width var(--motion-duration-layout-deform) var(--motion-easing-float), max-width var(--motion-duration-layout-deform) var(--motion-easing-float);
+  --motion-recipe-layout-deform-content: opacity var(--motion-duration-layout-deform-content) ease, transform var(--motion-duration-layout-deform) var(--motion-easing-float);
+
+  /* EDS Internal — shift 方向位移（AnchoredTooltip glue） */
+  --motion-displace-from-bottom: translateY(var(--motion-offset-small));
+  --motion-displace-from-top: translateY(calc(-1 * var(--motion-offset-small)));
+  --motion-displace-from-left: translateX(calc(-1 * var(--motion-offset-small)));
+  --motion-displace-from-right: translateX(var(--motion-offset-small));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root, .desktopTokens {
+    --motion-duration-micro: var(--eds-motion-0);
+    --motion-duration-fade: var(--eds-motion-0);
+    --motion-duration-enter: var(--eds-motion-0);
+    --motion-duration-float: var(--eds-motion-0);
+    --motion-duration-hover: var(--eds-motion-0);
+    --motion-duration-hover-asym: var(--eds-motion-0);
+    --motion-duration-shift: var(--eds-motion-0);
+    --motion-duration-emphasis: var(--eds-motion-0);
+    --motion-duration-page: var(--eds-motion-0);
+    --motion-duration-page-pop: var(--eds-motion-0);
+    --motion-duration-page-content: var(--eds-motion-0);
+    --motion-duration-page-content-pop: var(--eds-motion-0);
+    --motion-duration-control: var(--eds-motion-0);
+    --motion-duration-feedback: var(--eds-motion-0);
+    --motion-duration-scroll-fade: var(--eds-motion-0);
+    --motion-duration-spin: var(--eds-motion-0);
+    --motion-duration-spin-slow: var(--eds-motion-0);
+    --motion-duration-layout-deform: var(--eds-motion-0);
+    --motion-duration-layout-deform-content: var(--eds-motion-0);
+    --motion-delay-feedback-tick: var(--eds-motion-0);
+  }
+}

package/src/desktop/motion/semantic.css

@@ -0,0 +1,162 @@
+/**
+ * Do not edit directly, this file was auto-generated from Figma tokens.
+ * Motion System — semantic scenario classes.
+ * Source: spec/motion/semantic.json
+ * Motion semantic — Ease / Layout / Flotation / Deform / Page (.motion-ease + state · .motion-layout · .motion-flotation · .motion-deform · .motion-page).
+ * Recipes: @eds/desktop-tokens/motion/recipe
+ */
+
+/* ========================================
+   1 · Ease（缓入缓出 · 挂状态 modifier）
+   ======================================== */
+
+/* Ease — 基类（与 .is-paint-fade / .is-paint / .is-enter-only / .is-asym 组合） */
+.motion-ease {
+}
+
+/* a · paint + fade 对称入出 */
+/* eds-hover-tooltip-trigger--focus */
+.motion-ease.is-paint-fade {
+  transition: var(--motion-recipe-hover), var(--motion-recipe-fade);
+}
+
+/* b · paint 对称入出 */
+.motion-ease.is-paint {
+  transition: var(--motion-recipe-hover);
+}
+
+/* c · 仅入场 */
+/* EgMotionHoverEnter · 仅 hover 入场 600ms；mouseleave / focus / active / 点按 无过渡 */
+.motion-ease.is-enter-only {
+  transition: var(--motion-recipe-hover-asym);
+  transition-duration: 0ms;
+}
+
+.motion-ease.is-enter-only:focus,
+.motion-ease.is-enter-only:focus-visible,
+.motion-ease.is-enter-only:active {
+  transition: none;
+}
+
+.motion-ease.is-enter-only:hover:not(:active):not(:focus-visible) {
+  transition-duration: var(--motion-duration-hover-asym);
+  transition-timing-function: var(--motion-easing-enter);
+}
+
+/* d · 悬浮入场（非对称 enter/exit） */
+/* Detail 关闭按钮等 */
+.motion-ease.is-asym {
+  transition: var(--motion-recipe-hover-asym);
+}
+
+.motion-ease.is-asym:hover,
+.motion-ease.is-asym:focus-visible,
+.motion-ease.is-asym:active {
+  transition-timing-function: var(--motion-easing-enter);
+}
+
+/* ========================================
+   2 · Layout（大位移动效）
+   ======================================== */
+
+/* 大位移 · Drawer / Panel 等 */
+/* 默认自 bottom 入场；方向变体由 EDS glue 扩展 */
+.motion-layout {
+  transition: var(--motion-recipe-enter);
+  opacity: var(--motion-opacity-hidden);
+  transform: translateY(var(--motion-offset-small));
+}
+
+.motion-layout.is-active,
+.is-active .motion-layout,
+.glassMicroFloatHostActive .motion-layout,
+.glassMicroFloatHostActive.motion-layout {
+  opacity: var(--motion-opacity-visible);
+  transform: translateY(0);
+}
+
+/* ========================================
+   3 · Flotation（微位移动效 · 浮层类）
+   ======================================== */
+
+/* Tooltip / Popover / Popup glass */
+/* glass 挂 motion-flotation；host 挂 is-active / glassMicroFloatHostActive */
+.motion-flotation {
+  transition: var(--motion-recipe-flotation-enter);
+  opacity: var(--motion-opacity-hidden);
+  transform: translateY(var(--motion-offset-flotation-y)) scale(var(--motion-scale-flotation-enter));
+}
+
+.motion-flotation.is-active,
+.is-active .motion-flotation,
+.glassMicroFloatHostActive .motion-flotation,
+.glassMicroFloatHostActive.motion-flotation {
+  opacity: var(--motion-opacity-visible);
+  transform: translateY(0) scale(1);
+}
+
+/* ========================================
+   4 · Deform（形变）
+   ======================================== */
+
+/* 控件形变 · Tab / Toggle */
+/* 非 enter/leave · 组件自身控制 transform */
+.motion-deform {
+  transition: var(--motion-recipe-control);
+}
+
+/* ========================================
+   5 · Page（页面切换）
+   ======================================== */
+
+/* 页面切换 · macOS Navigation Push / Pop */
+/* Motion Page 体系：`.motion-page-stack` + `data-page-direction` + `.motion-layout-content` */
+/* A→B 带返回的页面切换统一走 glue · `motionPageTransition.css` + `useMotionPageStack` */
+.motion-page {
+  transition: var(--motion-recipe-page-push);
+}
+
+/* ========================================
+   6 · Layout Deform（布局形态 · 浮层容器尺寸 morph）
+   ======================================== */
+
+/* 布局形态 · Tooltip / Popover 多页容器尺寸变化 */
+/* 浮层 shell：固定宽 + overflow hidden；A↔B 宽/高 morph 350ms · ease-8 */
+/* 内层 content 挂 `.motion-layout-content` + `useMotionLayoutContentSwitch` */
+.motion-layout-deform {
+  overflow: hidden;
+  transition: var(--motion-recipe-layout-deform-shell);
+}
+
+/* ========================================
+   7 · Layout Content（同壳内容切换 · crossfade）
+   ======================================== */
+
+/* 内容切换 · Detail Tab / Segmented / Popover 内页 */
+/* 同壳换内容 · translateY(+offset) crossfade；无 shell morph 时单独使用 */
+/* Glue：`.is-exiting` / `.is-entering` + `useMotionLayoutContentSwitch` · 120ms mid-swap */
+/* Layout Deform / Motion Page 内层 content 亦挂本 class */
+.motion-layout-content {
+  transition: var(--motion-recipe-layout-deform-content);
+  opacity: var(--motion-opacity-visible);
+  transform: translateY(0);
+}
+
+/* ========================================
+   Reduced Motion
+   ======================================== */
+
+@media (prefers-reduced-motion: reduce) {
+  .motion-ease.is-paint-fade,
+  .motion-ease.is-paint,
+  .motion-ease.is-enter-only,
+  .motion-ease.is-asym,
+  .motion-layout,
+  .motion-flotation,
+  .motion-deform,
+  .motion-page,
+  .motion-layout-deform,
+  .motion-layout-content {
+    transition: none !important;
+  }
+}

package/src/desktop/motion/utilities.css

@@ -0,0 +1,15 @@
+/**
+ * Do not edit directly, this file was auto-generated from Figma tokens.
+ * Motion System — utility classes.
+ * Source: spec/motion/semantic.json
+ */
+
+/* ========================================
+   Motion Utility Classes
+   ======================================== */
+
+/* None — 无过渡 */
+/* Focus / Selected */
+.motion-none {
+  transition: none;
+}

package/src/desktop/size/blur.css

@@ -1,5 +1,5 @@
 :root {
-  --blur-shallow: var(--scale-20);
-  --blur-deep: var(--scale-12);
+  --blur-shallow: var(--scale-12);
+  --blur-deep: var(--scale-20);
   --blur-subtle: var(--scale-4);
 }

package/src/desktop/size/depth.css

@@ -1,5 +1,5 @@
 :root {
-  --depth-shallow: var(--scale-6);
-  --depth-deep: var(--scale-2);
   --depth-subtle: var(--scale-1-5);
+  --depth-shallow: var(--scale-2);
+  --depth-deep: var(--scale-6);
 }

package/src/mobile/size/depth.css

@@ -1,5 +1,5 @@
 :root {
-  --depth-shallow: var(--scale-6);
-  --depth-deep: var(--scale-2);
   --depth-subtle: var(--scale-1-5);
+  --depth-shallow: var(--scale-2);
+  --depth-deep: var(--scale-6);
 }

package/src/desktop/fragment/blur.css

@@ -1,3 +0,0 @@
-:root {
-  --blur-shallow: 48px;
-}

package/src/desktop/motion/vars.css

@@ -1,3 +0,0 @@
-:root {
-    /* --motion-recipe-hover: ''; */
-}