@zmzai/theme 0.8.3 → 0.8.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zmzai/theme",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "private": false,
   "type": "module",
   "description": "zmzai 全品牌设计系统 — Radix UI + framer-motion + Tailwind v4 + MiSans",
@@ -60,6 +60,12 @@
     "README.md",
     "LICENSE"
   ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json --noEmit",
+    "typecheck": "tsc --noEmit",
+    "playground": "vite playground --port 5174",
+    "prepublishOnly": "pnpm typecheck"
+  },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -99,9 +105,5 @@
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^2.5.0"
   },
-  "scripts": {
-    "build": "tsc -p tsconfig.json --noEmit",
-    "typecheck": "tsc --noEmit",
-    "playground": "vite playground --port 5174"
-  }
-}
+  "packageManager": "pnpm@10.34.5+sha512.a4ee05f2f73658255bd6a89859c065a45c28a57daefae2c893a168ee2b73168c37b91e83e57ea67654ad03f03031746430e8bce38e362e042605fb8abc80192e"
+}

package/src/components/app-shell/AppShell.tsx

@@ -143,7 +143,7 @@ export function AppShell({
       {/* 移动端抽屉 */}
       {drawerOpen ? (
         <div className="fixed inset-0 z-40 lg:hidden" role="presentation">
-          <div className="absolute inset-0 bg-black/30" onClick={() => setDrawerOpen(false)} />
+          <div className="absolute inset-0 bg-ink/40" onClick={() => setDrawerOpen(false)} />
           <nav className="absolute inset-y-0 left-0 flex w-64 flex-col gap-5 overflow-y-auto border-r border-line bg-bg px-3 py-4">
             {brandBlock}
             <SidebarSections sections={sections} pathname={pathname} link={Link} onNavigate={() => setDrawerOpen(false)} />

package/src/components/app-shell/CommandPalette.tsx

@@ -79,7 +79,7 @@ export function CommandPalette({ open, onClose, items, placeholder = "搜索页
   };
 
   return (
-    <div className="fixed inset-0 z-50 flex items-start justify-center bg-black/30 px-4 pt-[12vh]" onClick={onClose} role="presentation">
+    <div className="fixed inset-0 z-50 flex items-start justify-center bg-ink/40 px-4 pt-[12vh]" onClick={onClose} role="presentation">
       <div
         className="w-full max-w-xl overflow-hidden rounded-xl border border-line bg-bg shadow-lg"
         onClick={(event) => event.stopPropagation()}

package/src/components/badge/Badge.tsx

@@ -11,6 +11,7 @@ export const badgeVariants = cva(
       variant: {
         solid: "bg-ink text-bg",
         outline: "border border-line text-ink-2",
+        live: "border border-live/30 bg-live/10 text-live",
         success: "border border-success/30 bg-success/10 text-success",
         warning: "border border-warning/30 bg-warning/10 text-warning",
         danger: "border border-danger/30 bg-danger/10 text-danger",
@@ -26,7 +27,7 @@ export const badgeVariants = cva(
 );
 
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
-  variant?: "solid" | "outline" | "success" | "warning" | "danger" | "accent";
+  variant?: "solid" | "outline" | "live" | "success" | "warning" | "danger" | "accent";
   size?: "sm" | "md";
 }
 

package/src/components/button/Button.tsx

@@ -17,7 +17,7 @@ export interface ButtonProps
  * Button — primary interactive element.
  *
  * - Uses framer-motion for hover/active micro-interactions
- * - Pill radius on all variants
+ * - Sharp radius (rounded-sm, 3px) on all variants
  * - `loading` prop shows a spinner and disables
  *
  * @example

package/src/components/button/button.styles.ts

@@ -26,14 +26,14 @@ export const buttonVariants = cva(
     variants: {
       variant: {
         primary:
-          // 反色按钮：bg-ink 上用 bg 色作文字（浅色=白、深色=黑），硬编码 text-white 在深色主题下不可读
-          "bg-ink text-bg hover:shadow-md active:scale-[0.98]",
+          // 反色按钮：交互结构挂 accent（v0.8.4 收敛，与 ink 值同），文字用 accent-ink 而非硬编码 text-white
+          "bg-accent text-accent-ink hover:shadow-md active:scale-[0.98]",
         secondary:
           "border border-line text-ink hover:border-ink hover:bg-surface-2 active:scale-[0.98]",
         ghost:
           "text-ink-2 hover:bg-surface-2 hover:text-ink active:scale-[0.98]",
         danger:
-          "bg-danger text-white hover:shadow-md active:scale-[0.98]",
+          "bg-danger text-accent-ink hover:shadow-md active:scale-[0.98]",
       },
       size: {
         sm: "h-8 px-4 text-xs",

package/src/components/card/card.styles.ts

@@ -14,7 +14,7 @@ export const cardVariants = cva(
       variant: {
         default: "border-line",
         interactive:
-          "border-line hover:border-ink hover:-translate-y-0.5 hover:shadow-[0_8px_24px_rgba(0,0,0,0.08)] cursor-pointer",
+          "border-line hover:border-ink hover:-translate-y-0.5 hover:shadow-lg cursor-pointer",
         surface: "bg-surface border-line",
       },
       padding: {

package/src/components/dialog/Dialog.tsx

@@ -44,7 +44,7 @@ export function DialogContent({ children, className }: DialogContentProps) {
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
           transition={{ duration: 0.2 }}
-          className="fixed inset-0 z-50 bg-black/40 backdrop-blur-sm"
+          className="fixed inset-0 z-50 bg-ink/40 backdrop-blur-sm"
         />
       </DialogPrimitive.Overlay>
       <DialogPrimitive.Content asChild>

package/src/components/diff-view/diff-view.css

@@ -3,7 +3,7 @@
 .diff-summary { display: flex; justify-content: space-between; gap: 0.75rem; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-muted); }
 .diff-summary-stats { display: inline-flex; gap: 0.5rem; }
 .diff-add-count { color: var(--color-success); font-style: normal; }
-.diff-del-count { color: #b03a28; font-style: normal; }
+.diff-del-count { color: var(--color-danger); font-style: normal; }
 .diff-file { border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); overflow: hidden; }
 .diff-file-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--color-line); background: var(--color-surface-strong); }
 .diff-file-path { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--color-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -14,9 +14,9 @@
 .diff-text { padding-left: 0.5rem; white-space: pre-wrap; overflow-wrap: anywhere; }
 .diff-line.hunk { background: color-mix(in oklab, var(--color-accent-ink) 82%, var(--color-accent)); color: var(--color-accent-strong); }
 .diff-line.add { background: color-mix(in oklab, var(--color-success) 16%, var(--color-surface)); color: var(--color-ink); }
-.diff-line.remove { background: color-mix(in oklab, #b03a28 14%, var(--color-surface)); color: var(--color-ink); }
+.diff-line.remove { background: color-mix(in oklab, var(--color-danger) 14%, var(--color-surface)); color: var(--color-ink); }
 .diff-line.meta { color: var(--color-muted); background: var(--color-surface); }
 .diff-line.context { color: var(--color-muted); background: var(--color-surface); }
 .diff-line.add .diff-gutter { color: var(--color-success); }
-.diff-line.remove .diff-gutter { color: #b03a28; }
+.diff-line.remove .diff-gutter { color: var(--color-danger); }
 .diff-preview { max-height: min(48dvh, 34rem); margin: 0; overflow: auto; padding: 0.75rem; border: 1px solid var(--color-line); background: var(--color-ink); color: var(--color-paper); font-family: var(--font-mono); font-size: 0.65625rem; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }

package/src/components/landing/landing.css

@@ -301,7 +301,7 @@
 }
 
 .why-card.dark .why-card-icon {
-  border-color: oklch(1 0 0 / 0.2);
+  border-color: color-mix(in oklab, var(--color-bg) 20%, transparent);
 }
 
 /* ── Integration chips ── */
@@ -425,6 +425,5 @@
 .nav-shell.floating .site-nav {
   border-radius: var(--radius-pill);
   border-color: transparent;
-  box-shadow: 0 8px 32px -8px oklch(0.15 0.010 30 / 0.18),
-              0 1px 3px oklch(0.15 0.010 30 / 0.06);
+  box-shadow: var(--shadow-lg);
 }

package/src/components/layout-grid/LayoutGrid.tsx

@@ -78,7 +78,7 @@ export function LayoutGrid({ items, className }: LayoutGridProps) {
             <motion.div
               layoutId={`layout-card-${activeItem.id}`}
               onClick={(e) => e.stopPropagation()}
-              className="relative max-h-[85vh] w-full max-w-2xl overflow-y-auto rounded-xl border border-line bg-bg p-6 shadow-2xl"
+              className="relative max-h-[85vh] w-full max-w-2xl overflow-y-auto rounded-xl border border-line bg-bg p-6 shadow-xl"
             >
               {/* Close button */}
               <button

package/src/components/magnetic-button/MagneticButton.tsx

@@ -25,7 +25,7 @@ export interface MagneticButtonProps
  * layout shift.
  *
  * @example
- * <MagneticButton className="rounded-full bg-ink px-6 py-3 text-white">
+ * <MagneticButton className="rounded-full bg-ink px-6 py-3 text-accent-ink">
  *   立即开始
  * </MagneticButton>
  */
@@ -68,7 +68,7 @@ export function MagneticButton({
       onMouseLeave={handleMouseLeave}
       style={{ x: springX, y: springY }}
       className={cn(
-        "relative inline-flex cursor-pointer items-center justify-center rounded-full bg-ink px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-ink/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg disabled:cursor-not-allowed disabled:opacity-50",
+        "relative inline-flex cursor-pointer items-center justify-center rounded-full bg-ink px-6 py-3 text-sm font-medium text-accent-ink transition-colors hover:bg-ink/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}

package/src/components/model-selector/model-selector.css

@@ -8,11 +8,11 @@
   height: 2.25rem;
   padding: 0 0.75rem;
   border-radius: var(--radius-sm, 2px);
-  border: 1px solid var(--color-line, oklch(0.85 0.02 80));
-  background: var(--color-bg, oklch(0.97 0.01 80));
+  border: 1px solid var(--color-line);
+  background: var(--color-bg);
   font-size: 0.875rem;
   font-weight: 500;
-  color: var(--color-ink, oklch(0.2 0.02 80));
+  color: var(--color-ink);
   cursor: pointer;
   outline: none;
   transition: border-color 0.15s ease;
@@ -20,15 +20,15 @@
 }
 
 .ms-trigger:hover {
-  border-color: oklch(0.4 0.02 80 / 0.4);
+  border-color: var(--color-ink-3);
 }
 
 .ms-trigger:focus-visible {
-  border-color: var(--color-ink, oklch(0.2 0.02 80));
+  border-color: var(--color-ink);
 }
 
 .ms-trigger-placeholder {
-  color: var(--color-ink-3, oklch(0.6 0.02 80));
+  color: var(--color-ink-3);
 }
 
 .ms-trigger-chevron {
@@ -46,8 +46,8 @@
   max-height: 28rem;
   overflow-y: auto;
   border-radius: var(--radius-sm, 2px);
-  border: 1px solid var(--color-line, oklch(0.85 0.02 80));
-  background: var(--color-bg, oklch(0.97 0.01 80));
+  border: 1px solid var(--color-line);
+  background: var(--color-bg);
   box-shadow: var(--shadow-xl);
   padding: 0.25rem;
 }
@@ -62,7 +62,7 @@
   align-items: center;
   gap: 0.5rem;
   padding: 0.5rem 0.5rem 0.25rem;
-  border-bottom: 1px solid var(--color-line, oklch(0.85 0.02 80));
+  border-bottom: 1px solid var(--color-line);
   margin-bottom: 0.25rem;
 }
 
@@ -70,20 +70,20 @@
   flex: 1;
   height: 1.75rem;
   padding: 0 0.5rem;
-  border: 1px solid var(--color-line, oklch(0.85 0.02 80));
+  border: 1px solid var(--color-line);
   border-radius: var(--radius-sm, 2px);
-  background: var(--color-bg, oklch(0.97 0.01 80));
+  background: var(--color-bg);
   font-size: 0.8125rem;
-  color: var(--color-ink, oklch(0.2 0.02 80));
+  color: var(--color-ink);
   outline: none;
 }
 
 .ms-search-input::placeholder {
-  color: var(--color-ink-3, oklch(0.6 0.02 80));
+  color: var(--color-ink-3);
 }
 
 .ms-search-input:focus {
-  border-color: var(--color-ink, oklch(0.2 0.02 80));
+  border-color: var(--color-ink);
 }
 
 /* Featured section */
@@ -109,12 +109,12 @@
 
 .ms-featured-item:hover,
 .ms-featured-item:focus-visible {
-  background: var(--color-surface-2, oklch(0.93 0.01 80));
+  background: var(--color-surface-2);
   outline: none;
 }
 
 .ms-featured-item.ms-selected {
-  background: var(--color-surface-2, oklch(0.93 0.01 80));
+  background: var(--color-surface-2);
 }
 
 .ms-featured-icon {
@@ -132,14 +132,14 @@
 .ms-featured-name {
   font-size: 0.875rem;
   font-weight: 500;
-  color: var(--color-ink, oklch(0.2 0.02 80));
+  color: var(--color-ink);
   line-height: 1.3;
 }
 
 .ms-featured-desc {
   margin-top: 0.125rem;
   font-size: 0.75rem;
-  color: var(--color-ink-2, oklch(0.5 0.02 80));
+  color: var(--color-ink-2);
   line-height: 1.3;
 }
 
@@ -153,7 +153,7 @@
 .ms-separator {
   margin: 0.375rem 0.5rem;
   height: 1px;
-  background: var(--color-line, oklch(0.85 0.02 80));
+  background: var(--color-line);
 }
 
 /* Channel group */
@@ -173,15 +173,15 @@
   font: inherit;
   font-size: 0.8125rem;
   font-weight: 500;
-  color: var(--color-ink-2, oklch(0.5 0.02 80));
+  color: var(--color-ink-2);
   border-radius: var(--radius-sm, 2px);
   transition: background 0.1s ease, color 0.1s ease;
 }
 
 .ms-channel-trigger:hover,
 .ms-channel-trigger:focus-visible {
-  background: var(--color-surface-2, oklch(0.93 0.01 80));
-  color: var(--color-ink, oklch(0.2 0.02 80));
+  background: var(--color-surface-2);
+  color: var(--color-ink);
   outline: none;
 }
 
@@ -203,7 +203,7 @@
 
 .ms-channel-count {
   font-size: 0.6875rem;
-  color: var(--color-ink-3, oklch(0.6 0.02 80));
+  color: var(--color-ink-3);
   font-weight: 400;
 }
 
@@ -222,7 +222,7 @@
   cursor: pointer;
   font: inherit;
   font-size: 0.8125rem;
-  color: var(--color-ink-2, oklch(0.5 0.02 80));
+  color: var(--color-ink-2);
   border-radius: var(--radius-sm, 2px);
   transition: background 0.1s ease;
   width: 100%;
@@ -231,13 +231,13 @@
 
 .ms-model-item:hover,
 .ms-model-item:focus-visible {
-  background: var(--color-surface-2, oklch(0.93 0.01 80));
-  color: var(--color-ink, oklch(0.2 0.02 80));
+  background: var(--color-surface-2);
+  color: var(--color-ink);
   outline: none;
 }
 
 .ms-model-item.ms-selected {
-  color: var(--color-ink, oklch(0.2 0.02 80));
+  color: var(--color-ink);
   font-weight: 500;
 }
 
@@ -262,7 +262,7 @@
 
 .ms-model-meta {
   font-size: 0.6875rem;
-  color: var(--color-ink-3, oklch(0.6 0.02 80));
+  color: var(--color-ink-3);
   font-weight: 400;
   flex-shrink: 0;
 }
@@ -272,5 +272,5 @@
   padding: 1.5rem 1rem;
   text-align: center;
   font-size: 0.8125rem;
-  color: var(--color-ink-3, oklch(0.6 0.02 80));
+  color: var(--color-ink-3);
 }

package/src/components/moving-border/MovingBorder.tsx

@@ -21,7 +21,7 @@ export interface MovingBorderProps {
  *
  * Uses CSS `@property --angle` for a smooth rotating light beam around
  * the border. Based on Aceternity's Moving Border, adapted to zmzai's
- * blue accent. Only the border moves — inner content stays static.
+ * brand accent (ink since v0.8.3). Only the border moves — inner content stays static.
  *
  * @example
  * <MovingBorder duration={5}>

package/src/components/multi-step-loader/MultiStepLoader.tsx

@@ -49,7 +49,7 @@ export function MultiStepLoader({
                   transition={{ type: "spring", stiffness: 400, damping: 25 }}
                   className="flex h-5 w-5 items-center justify-center rounded-full bg-ink"
                 >
-                  <svg className="h-3 w-3 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
+                  <svg className="h-3 w-3 text-bg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
                     <polyline points="20 6 9 17 4 12" />
                   </svg>
                 </motion.div>

package/src/components/notch/Notch.tsx

@@ -33,7 +33,7 @@ export function Notch({ children, visible = false, className, ...props }: NotchP
             exit={{ y: -60, opacity: 0 }}
             transition={{ duration: 0.35, ease: [0.16, 1, 0.3, 1] }}
             className={cn(
-              "pointer-events-auto flex items-center gap-2 rounded-full border border-line bg-ink px-4 py-2 text-sm text-white shadow-lg",
+              "pointer-events-auto flex items-center gap-2 rounded-full border border-line bg-ink px-4 py-2 text-sm text-accent-ink shadow-lg",
               className
             )}
             {...props}

package/src/components/sticky-banner/StickyBanner.tsx

@@ -16,8 +16,8 @@ export interface StickyBannerProps extends HTMLAttributes<HTMLDivElement> {
 
 const variantStyles: Record<BannerVariant, string> = {
   info: "bg-surface text-ink border-line",
-  warning: "bg-ink text-bg border-ink",
-  danger: "bg-bg text-ink border-ink border-2",
+  warning: "border-warning bg-warning-tint text-warning",
+  danger: "border-danger bg-danger-tint text-danger",
 };
 
 /**

package/src/components/timeline/Timeline.tsx

@@ -73,7 +73,7 @@ function TimelineItemRow({ item, isLast }: { item: TimelineItem; isLast: boolean
       <div className="relative z-10 flex-shrink-0 pt-0.5">
         {status === "done" && (
           <div className="flex h-3.5 w-3.5 items-center justify-center rounded-full bg-ink">
-            <svg className="h-2 w-2 text-white" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2.5">
+            <svg className="h-2 w-2 text-bg" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2.5">
               <polyline points="10 3 5 8 2 5" />
             </svg>
           </div>

package/src/components/tool-card/ToolCard.tsx

@@ -33,7 +33,7 @@ export function ToolCard({ call, sessionIdle = false }: { call: ToolCall; sessio
         <span className="tool-card-glyph" aria-hidden><Icon name={state.status === "completed" ? "check" : interrupted || state.status === "error" ? "cross" : "chevron-down"} size={12} /></span>
         <span className="tool-card-label">{title}</span>
         {(state.status === "error" || interrupted) && <Badge variant="danger" size="sm">失败</Badge>}
-        {running && !interrupted && <Badge variant="warning" size="sm">运行中</Badge>}
+        {running && !interrupted && <Badge variant="live" size="sm">运行中</Badge>}
         {toolDuration(call) && <span className="tool-card-duration">{toolDuration(call)}</span>}
         <Icon name="chevron-down" size={12} className={isOpen ? "tool-card-chevron open" : "tool-card-chevron"} />
       </button>

package/src/components/tooltip/Tooltip.tsx

@@ -36,7 +36,7 @@ export function Tooltip({ children, content, side = "top", className }: TooltipP
           side={side}
           sideOffset={6}
           className={cn(
-            "z-50 rounded-lg bg-ink px-2.5 py-1.5 text-xs font-medium text-white shadow-md",
+            "z-50 rounded-lg bg-ink px-2.5 py-1.5 text-xs font-medium text-accent-ink shadow-md",
             "data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95",
             "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
             className

package/src/tokens/theme.css

@@ -16,7 +16,8 @@
  *   v0.1.x    黑白 Monochrome
  *   v0.2~0.5  暖纸 + 印章红
  *   v0.6.x    纯白 + 荧光绿（accent 一色包打天下，装饰过载 → 观感 demo）
- *   v0.7.0    纯白 + 墨黑结构 + 绿色语义（现行）
+ *   v0.8.x    纯白 + 墨黑结构 + 绿色语义
+ *   v0.8.3    品牌色全墨 Monochrome（现行）
  */
 
 @theme {
@@ -46,7 +47,7 @@
   --color-accent-ink:       oklch(1 0 0);
   --color-accent-strong:    oklch(0.09 0.004 265);
   --color-accent-tint:      oklch(0.968 0.002 265);
-  --color-accent-readable:  var(--color-accent);
+  --color-accent-readable:  var(--color-accent);        /* deprecated（v0.6 荧光绿遗迹），新代码直接用 accent */
 
   /* ══════════════════════════════════════════════════════
      3. Brand — 品牌资产专用（v0.8.3 起为全墨 Monochrome）
@@ -65,6 +66,7 @@
      对照：v0.6 的荧光绿在白底只有 1.8:1，21 处 text-accent 全部不达标。
      ══════════════════════════════════════════════════════ */
   --color-live:          oklch(0.499 0.17 145);      /* 运行中 / 活跃 · 5.55:1 */
+  --color-live-tint:     oklch(0.955 0.045 145);     /* live 浅底（badge/提示条，与 success-tint 同构） */
   --color-success:       oklch(0.499 0.13 145);      /* 成功 · 5.70:1 */
   --color-success-tint:  oklch(0.955 0.035 145);
   --color-warning:       oklch(0.499 0.12 75);       /* 告警 · 6.14:1 */
@@ -121,14 +123,15 @@
   /* ══════════════════════════════════════════════════════
      9. Motion
      ══════════════════════════════════════════════════════ */
-  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
-  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);  /* landing/各站用；v0.8.4 起由包提供 */
+  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
 
   /* ══════════════════════════════════════════════════════
      10. Backward-compat aliases
      v1 token 名 → v0.7 值，让既有 267 个 class 无需改动。
      ══════════════════════════════════════════════════════ */
-  --color-paper:          var(--color-bg);
+  --color-paper:          var(--color-bg);            /* deprecated（v1 遗迹），新代码用 --color-bg */
   --color-muted:          var(--color-ink-2);
   --color-surface-strong: var(--color-surface-2);
   --animate-dur-fast:     150ms;