sparkdesign 0.3.1 → 0.3.3

package/cli/registry/chat/user-question/index.tsx

@@ -1,21 +1,21 @@
-import { memo, useCallback, forwardRef } from 'react'
-import type { ReactNode } from 'react'
-import { cn } from '@/lib/utils'
-import { motion } from 'framer-motion'
-import { Chat3Line, ArrowUpLine, ArrowDownSLine, SparklingLine } from '../../basic/icons-inline'
+import { forwardRef } from 'react'
 import {
-  DEFAULT_LABELS,
-  NO_PREFERENCE_VALUE,
-  type UserQuestionProps,
-  type UserQuestionHandle,
-  type UserQuestionItem,
+  UserQuestionRootProvider,
+  useUserQuestionContext,
+  type UserQuestionRootProps,
+} from './context'
+import {
+  UserQuestionHeader,
+  UserQuestionCard,
+  UserQuestionCards,
+  UserQuestionFooter,
+  UserQuestionDefaultLayout,
+} from './compound'
+import type {
+  UserQuestionProps,
+  UserQuestionHandle,
 } from './types'
-import { useUserQuestionState } from './useUserQuestionState'
 import { useUserQuestionKeyboard } from './useUserQuestionKeyboard'
-import { UserQuestionHeader } from './UserQuestionHeader'
-import { UserQuestionCard } from './UserQuestionCard'
-import { UserQuestionFooter } from './UserQuestionFooter'
-import { Scrollbar } from '../../basic/scrollbar'
 
 export type {
   UserQuestionOption,
@@ -25,316 +25,71 @@ export type {
   UserQuestionHandle,
 } from './types'
 export { DEFAULT_LABELS, NO_PREFERENCE_VALUE } from './types'
-export { UserQuestionHeader } from './UserQuestionHeader'
-export { UserQuestionCard } from './UserQuestionCard'
-export { UserQuestionFooter } from './UserQuestionFooter'
-
-const defaultChat4Icon: ReactNode = (
-  <Chat3Line className="w-4 h-4 shrink-0 text-text-tertiary" />
-)
-const defaultArrowUpSIcon = <ArrowUpLine />
-const defaultArrowDownSIcon = <ArrowDownSLine />
-const defaultSparklingIcon = <SparklingLine className="w-4 h-4 mr-1" />
-
-export const UserQuestion = memo(
-  forwardRef<UserQuestionHandle, UserQuestionProps>(function UserQuestion(
-    {
-      questions,
-      resetKey,
-      onAnswer,
-      onSkip,
-      hasCustomText = false,
-      labels: labelsProp,
-      chat4Icon = defaultChat4Icon,
-      arrowUpSIcon = defaultArrowUpSIcon,
-      arrowDownSIcon = defaultArrowDownSIcon,
-      sparklingIcon = defaultSparklingIcon,
-    }: UserQuestionProps,
-    ref
-  ) {
-    const labels = { ...DEFAULT_LABELS, ...labelsProp }
-    const state = useUserQuestionState({ questions, resetKey, ref, onAnswer })
-
-    const {
-      currentQuestionIndex,
-      setCurrentQuestionIndex,
-      answers,
-      setAnswers,
-      customInputs,
-      setCustomInputs,
-      focusedOptionIndex,
-      setFocusedOptionIndex,
-      isSubmitting,
-      setIsSubmitting,
-      maxQuestionHeight,
-      scrollContainerRef,
-      questionRefs,
-      shouldScrollToQuestionRef,
-      customInputRefs,
-      getSelectedOptionIndex,
-    } = state
-
-    const currentQuestion = questions[currentQuestionIndex]
-    const currentOptions = currentQuestion?.options || []
-    const allQuestionsAnswered = questions.every(
-      (q) =>
-        (answers[q.question] || []).length > 0 ||
-        (customInputs[q.question]?.trim() || '').length > 0
-    )
-    const currentQuestionHasAnswer =
-      (answers[currentQuestion?.question] || []).length > 0 ||
-      (customInputs[currentQuestion?.question]?.trim() || '').length > 0
 
-    const handleOptionClick = useCallback(
-      (questionText: string, optionLabel: string, questionIndex: number) => {
-        const question = questions[questionIndex]
-        const allowMultiple = question?.multiSelect ?? false
-        const isLastQuestion = questionIndex === questions.length - 1
-        const currentAnswers = answers[questionText] || []
-        const isDeselecting = currentAnswers.includes(optionLabel)
-
-        setAnswers((prev) => {
-          const cur = prev[questionText] || []
-          if (allowMultiple) {
-            if (cur.includes(optionLabel)) {
-              return { ...prev, [questionText]: cur.filter((l) => l !== optionLabel) }
-            }
-            return { ...prev, [questionText]: [...cur, optionLabel] }
-          }
-          if (cur.includes(optionLabel)) return { ...prev, [questionText]: [] }
-          return { ...prev, [questionText]: [optionLabel] }
-        })
+// ===== UserQuestion 复合组件类型 =====
+
+export interface UserQuestionCompound {
+  Root: React.ForwardRefExoticComponent<UserQuestionRootProps & React.RefAttributes<UserQuestionHandle>>
+  Header: typeof UserQuestionHeader
+  Card: typeof UserQuestionCard
+  Cards: typeof UserQuestionCards
+  Footer: typeof UserQuestionFooter
+  DefaultLayout: typeof UserQuestionDefaultLayout
+}
+
+// ===== 内部键盘处理组件 =====
+
+function KeyboardHandler() {
+  const ctx = useUserQuestionContext()
+  useUserQuestionKeyboard({
+    isSubmitting: ctx.isSubmitting,
+    currentQuestion: ctx.currentQuestion,
+    currentOptions: ctx.currentOptions,
+    currentQuestionIndex: ctx.currentQuestionIndex,
+    questions: ctx.questions,
+    focusedOptionIndex: ctx.focusedOptionIndex,
+    setFocusedOptionIndex: ctx.setFocusedOptionIndex,
+    currentQuestionHasAnswer: ctx.currentQuestionHasAnswer,
+    getSelectedOptionIndex: ctx.getSelectedOptionIndex,
+    setShouldScrollToQuestion: ctx.setShouldScrollToQuestion,
+    setCurrentQuestionIndex: ctx.setCurrentQuestionIndex,
+    handleOptionClick: ctx.handleOptionClick,
+    handleContinue: ctx.handleContinue,
+  })
+  return null
+}
 
-        if (!allowMultiple) {
-          setCustomInputs((prev) => ({ ...prev, [questionText]: '' }))
-        }
+// ===== UserQuestion 便捷组件 =====
 
-        const shouldAutoNext =
-          !allowMultiple && !isLastQuestion && !isDeselecting
-        if (shouldAutoNext) {
-          setTimeout(() => {
-            const nextIndex = questionIndex + 1
-            shouldScrollToQuestionRef.current = true
-            setCurrentQuestionIndex(nextIndex)
-            setFocusedOptionIndex(getSelectedOptionIndex(nextIndex))
-          }, 150)
-        }
-      },
-      [
-        questions,
-        answers,
-        setAnswers,
-        setCustomInputs,
-        setCurrentQuestionIndex,
-        setFocusedOptionIndex,
-        getSelectedOptionIndex,
-        shouldScrollToQuestionRef,
-      ]
+const UserQuestionBase = forwardRef<UserQuestionHandle, UserQuestionProps>(
+  function UserQuestion(props, ref) {
+    return (
+      <UserQuestionRootProvider ref={ref} {...props}>
+        <KeyboardHandler />
+        <UserQuestionDefaultLayout />
+      </UserQuestionRootProvider>
     )
+  }
+)
 
-    const handlePrevious = useCallback(() => {
-      if (currentQuestionIndex > 0) {
-        const prevIndex = currentQuestionIndex - 1
-        shouldScrollToQuestionRef.current = true
-        setCurrentQuestionIndex(prevIndex)
-        setFocusedOptionIndex(getSelectedOptionIndex(prevIndex))
-      }
-    }, [currentQuestionIndex, setCurrentQuestionIndex, setFocusedOptionIndex, getSelectedOptionIndex, shouldScrollToQuestionRef])
-
-    const handleNext = useCallback(() => {
-      if (currentQuestionIndex < questions.length - 1) {
-        const nextIndex = currentQuestionIndex + 1
-        shouldScrollToQuestionRef.current = true
-        setCurrentQuestionIndex(nextIndex)
-        setFocusedOptionIndex(getSelectedOptionIndex(nextIndex))
-      }
-    }, [currentQuestionIndex, questions.length, setCurrentQuestionIndex, setFocusedOptionIndex, getSelectedOptionIndex, shouldScrollToQuestionRef])
+UserQuestionBase.displayName = 'UserQuestion'
 
-    const handleContinue = useCallback(() => {
-      if (isSubmitting) return
-      if (allQuestionsAnswered) {
-        setIsSubmitting(true)
-        const formatted: Record<string, string> = {}
-        for (const q of questions) {
-          const selected = answers[q.question] || []
-          const custom = customInputs[q.question]?.trim()
-          const parts: string[] = []
-          if (selected.length > 0) parts.push(...selected)
-          if (custom) parts.push(custom)
-          formatted[q.question] = parts.join(', ')
-        }
-        onAnswer(formatted)
-      } else {
-        const isUnanswered = (q: UserQuestionItem) =>
-          (answers[q.question] || []).length === 0 &&
-          (customInputs[q.question]?.trim() || '').length === 0
-        const len = questions.length
-        let nextUnansweredIndex = -1
-        for (let i = 1; i < len; i++) {
-          const idx = (currentQuestionIndex + i) % len
-          if (isUnanswered(questions[idx])) {
-            nextUnansweredIndex = idx
-            break
-          }
-        }
-        if (nextUnansweredIndex >= 0) {
-          shouldScrollToQuestionRef.current = true
-          setCurrentQuestionIndex(nextUnansweredIndex)
-          setFocusedOptionIndex(getSelectedOptionIndex(nextUnansweredIndex))
-        }
-      }
-    }, [
-      isSubmitting,
-      allQuestionsAnswered,
-      questions,
-      answers,
-      customInputs,
-      currentQuestionIndex,
-      onAnswer,
-      setIsSubmitting,
-      setCurrentQuestionIndex,
-      setFocusedOptionIndex,
-      getSelectedOptionIndex,
-      shouldScrollToQuestionRef,
-    ])
+// ===== 挂载复合组件 =====
 
-    const handleSkipWithGuard = useCallback(() => {
-      if (isSubmitting) return
-      setIsSubmitting(true)
-      const finalAnswers: Record<string, string> = {}
-      for (const q of questions) {
-        const selected = answers[q.question] || []
-        const custom = customInputs[q.question]?.trim()
-        const hasAnswer = selected.length > 0 || !!custom
-        if (hasAnswer) {
-          const parts: string[] = []
-          if (selected.length > 0) parts.push(...selected)
-          if (custom) parts.push(custom)
-          finalAnswers[q.question] = parts.join(', ')
-        } else {
-          finalAnswers[q.question] = NO_PREFERENCE_VALUE
-        }
-      }
-      onAnswer(finalAnswers)
-      onSkip()
-    }, [isSubmitting, questions, answers, customInputs, onAnswer, onSkip, setIsSubmitting])
+type UserQuestionBaseType = React.ForwardRefExoticComponent<UserQuestionProps & React.RefAttributes<UserQuestionHandle>> & Partial<UserQuestionCompound>
 
-    const handleRecommend = useCallback(() => {
-      if (isSubmitting) return
-      const recommended: Record<string, string[]> = {}
-      for (const q of questions) {
-        const first = q.options?.[0]
-        if (first) recommended[q.question] = [first.label]
-      }
-      setAnswers(recommended)
-      setCustomInputs({})
-      shouldScrollToQuestionRef.current = true
-      setCurrentQuestionIndex(questions.length - 1)
-      setFocusedOptionIndex(0)
-      setTimeout(() => {
-        if (scrollContainerRef.current) {
-          scrollContainerRef.current.scrollTo({
-            top: scrollContainerRef.current.scrollHeight,
-            behavior: 'smooth',
-          })
-        }
-      }, 50)
-    }, [
-      isSubmitting,
-      questions,
-      setAnswers,
-      setCustomInputs,
-      setCurrentQuestionIndex,
-      setFocusedOptionIndex,
-      shouldScrollToQuestionRef,
-      scrollContainerRef,
-    ])
+const UserQuestionWithSlots = UserQuestionBase as UserQuestionBaseType
 
-    useUserQuestionKeyboard({
-      isSubmitting,
-      currentQuestion,
-      currentOptions,
-      currentQuestionIndex,
-      questions,
-      focusedOptionIndex,
-      setFocusedOptionIndex,
-      currentQuestionHasAnswer,
-      getSelectedOptionIndex,
-      shouldScrollToQuestionRef,
-      setCurrentQuestionIndex,
-      handleOptionClick,
-      handleContinue,
-    })
+UserQuestionWithSlots.Root = UserQuestionRootProvider
+UserQuestionWithSlots.Header = UserQuestionHeader
+UserQuestionWithSlots.Card = UserQuestionCard
+UserQuestionWithSlots.Cards = UserQuestionCards
+UserQuestionWithSlots.Footer = UserQuestionFooter
+UserQuestionWithSlots.DefaultLayout = UserQuestionDefaultLayout
 
-    if (questions.length === 0) return null
+export const UserQuestion = UserQuestionWithSlots as React.ForwardRefExoticComponent<UserQuestionProps & React.RefAttributes<UserQuestionHandle>> &
+  UserQuestionCompound
 
-    return (
-      <motion.div
-        initial={{ opacity: 0, y: 8 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
-        className={cn(
-          'border rounded-t-xl border-b-0 border-border border-border-tertiary bg-bg-base overflow-hidden pt-2 pb-2'
-        )}
-      >
-        <UserQuestionHeader
-          currentQuestion={currentQuestion}
-          questionsLength={questions.length}
-          labels={labels}
-          chat4Icon={chat4Icon}
-          arrowUpSIcon={arrowUpSIcon}
-          arrowDownSIcon={arrowDownSIcon}
-          currentQuestionIndex={currentQuestionIndex}
-          onPrevious={handlePrevious}
-          onNext={handleNext}
-        />
-        <Scrollbar
-          ref={scrollContainerRef}
-          scrollbarVisibility="auto"
-          maxHeight={maxQuestionHeight ? maxQuestionHeight : undefined}
-          className="scroll-smooth"
-        >
-          <div className="space-y-4 px-3">
-            {questions.map((question, qIndex) => (
-              <UserQuestionCard
-                key={question.question}
-                question={question}
-                qIndex={qIndex}
-                labels={labels}
-                answers={answers}
-                customInputs={customInputs}
-                focusedOptionIndex={focusedOptionIndex}
-                isCurrentQuestion={qIndex === currentQuestionIndex}
-                isSubmitting={isSubmitting}
-                allQuestionsAnswered={allQuestionsAnswered}
-                questionsLength={questions.length}
-                questionRefs={questionRefs}
-                customInputRefs={customInputRefs}
-                setCurrentQuestionIndex={setCurrentQuestionIndex}
-                setFocusedOptionIndex={setFocusedOptionIndex}
-                setAnswers={setAnswers}
-                setCustomInputs={setCustomInputs}
-                getSelectedOptionIndex={getSelectedOptionIndex}
-                shouldScrollToQuestionRef={shouldScrollToQuestionRef}
-                onOptionClick={handleOptionClick}
-                onContinue={handleContinue}
-              />
-            ))}
-          </div>
-        </Scrollbar>
-        <UserQuestionFooter
-          labels={labels}
-          sparklingIcon={sparklingIcon}
-          isSubmitting={isSubmitting}
-          hasCustomText={hasCustomText}
-          allQuestionsAnswered={allQuestionsAnswered}
-          onRecommend={handleRecommend}
-          onSkip={handleSkipWithGuard}
-          onContinue={handleContinue}
-        />
-      </motion.div>
-    )
-  })
-)
+// ===== 导出 Context 和其他工具 =====
 
-UserQuestion.displayName = 'UserQuestion'
+export { useUserQuestionContext, UserQuestionDefaultLayout }

package/cli/registry/chat/user-question/useUserQuestionKeyboard.ts

@@ -1,5 +1,4 @@
 import { useEffect } from 'react'
-import type { MutableRefObject } from 'react'
 import type { UserQuestionItem, UserQuestionOption } from './types'
 
 export interface UseUserQuestionKeyboardProps {
@@ -12,7 +11,7 @@ export interface UseUserQuestionKeyboardProps {
   setFocusedOptionIndex: (n: number) => void
   currentQuestionHasAnswer: boolean
   getSelectedOptionIndex: (i: number) => number
-  shouldScrollToQuestionRef: MutableRefObject<boolean>
+  setShouldScrollToQuestion: (v: boolean) => void
   setCurrentQuestionIndex: (i: number) => void
   handleOptionClick: (questionText: string, optionLabel: string, questionIndex: number) => void
   handleContinue: () => void
@@ -36,7 +35,7 @@ export function useUserQuestionKeyboard({
   setFocusedOptionIndex,
   currentQuestionHasAnswer,
   getSelectedOptionIndex,
-  shouldScrollToQuestionRef,
+  setShouldScrollToQuestion,
   setCurrentQuestionIndex,
   handleOptionClick,
   handleContinue,
@@ -49,7 +48,7 @@ export function useUserQuestionKeyboard({
           setFocusedOptionIndex(focusedOptionIndex + 1)
         } else if (currentQuestionIndex < questions.length - 1) {
           const nextIndex = currentQuestionIndex + 1
-          shouldScrollToQuestionRef.current = true
+          setShouldScrollToQuestion(true)
           setCurrentQuestionIndex(nextIndex)
           setFocusedOptionIndex(getSelectedOptionIndex(nextIndex))
         }
@@ -60,7 +59,7 @@ export function useUserQuestionKeyboard({
           setFocusedOptionIndex(focusedOptionIndex - 1)
         } else if (currentQuestionIndex > 0) {
           const prevIndex = currentQuestionIndex - 1
-          shouldScrollToQuestionRef.current = true
+          setShouldScrollToQuestion(true)
           setCurrentQuestionIndex(prevIndex)
           setFocusedOptionIndex(getSelectedOptionIndex(prevIndex))
         }
@@ -122,6 +121,6 @@ export function useUserQuestionKeyboard({
     setCurrentQuestionIndex,
     handleOptionClick,
     handleContinue,
-    shouldScrollToQuestionRef,
+    setShouldScrollToQuestion,
   ])
 }

package/cli/registry/tokens/index.css

@@ -0,0 +1,31 @@
+/* ============================================
+ * Token 系统统一入口 (CLI 分发版)
+ *
+ * 引入方式：
+ * 1. 全量引入（默认）: @import "qoder-tokens.css";
+ * 2. 按需引入: 
+ *    @import "./scale/index.css";       // 布局风格
+ *    @import "./themes/light-qoder.css"; // 亮色主题
+ *    @import "./themes/dark-qoder.css";  // 暗色主题
+ *
+ * 自定义主题：
+ * @import "./scale/index.css";
+ * @import "./my-custom-theme.css";  // 定义 [data-theme="xxx"] { --token-color-*: ... }
+ *
+ * 自定义布局配置：
+ * @import "./scale/config.css";
+ * @import "./scale/computed.css";
+ * :root { --config-radius-default: 10px; }   // 覆盖配置
+ * ============================================ */
+
+/* 布局风格 Token (data-style: neutral | compact | soft | sharp | dense) */
+@import "./scale.css";
+
+/* 内置主题 (data-theme) */
+@import "./themes/light-qoder.css";
+@import "./themes/dark-qoder.css";
+@import "./themes/light-parchment.css";
+@import "./themes/dark-parchment.css";
+
+/* 滚动条工具样式 */
+@import "./scrollbar-utility.css";

package/cli/registry/tokens/scale/computed.css

@@ -0,0 +1,103 @@
+/* ============================================
+ * Scale Computed - 应用配置，产出实际变量
+ *
+ * 此文件将 --config-* 映射到 --spacing-* / --radius-* / --font-size-*
+ * 组件和样式使用这些实际变量，不直接使用 --config-*
+ * ============================================ */
+
+:root,
+[data-style="neutral"] {
+  /* ============================================
+     Spacing (从配置映射)
+     ============================================ */
+  --spacing: var(--config-spacing-1);
+  --spacing-0: var(--config-spacing-0);
+  --spacing-px: var(--config-spacing-px);
+  --spacing-0\.5: var(--config-spacing-0\.5);
+  --spacing-1: var(--config-spacing-1);
+  --spacing-1\.5: var(--config-spacing-1\.5);
+  --spacing-2: var(--config-spacing-2);
+  --spacing-2\.5: var(--config-spacing-2\.5);
+  --spacing-3: var(--config-spacing-3);
+  --spacing-3\.5: var(--config-spacing-3\.5);
+  --spacing-4: var(--config-spacing-4);
+  --spacing-5: var(--config-spacing-5);
+  --spacing-6: var(--config-spacing-6);
+  --spacing-7: var(--config-spacing-7);
+  --spacing-8: var(--config-spacing-8);
+  --spacing-9: var(--config-spacing-9);
+  --spacing-10: var(--config-spacing-10);
+  --spacing-11: var(--config-spacing-11);
+  --spacing-12: var(--config-spacing-12);
+  --spacing-14: var(--config-spacing-14);
+  --spacing-16: var(--config-spacing-16);
+  --spacing-20: var(--config-spacing-20);
+  --spacing-24: var(--config-spacing-24);
+  --spacing-28: var(--config-spacing-28);
+  --spacing-32: var(--config-spacing-32);
+  --spacing-36: var(--config-spacing-36);
+  --spacing-40: var(--config-spacing-40);
+  --spacing-44: var(--config-spacing-44);
+  --spacing-48: var(--config-spacing-48);
+  --spacing-52: var(--config-spacing-52);
+  --spacing-56: var(--config-spacing-56);
+  --spacing-60: var(--config-spacing-60);
+  --spacing-64: var(--config-spacing-64);
+  --spacing-72: var(--config-spacing-72);
+  --spacing-80: var(--config-spacing-80);
+  --spacing-96: var(--config-spacing-96);
+
+  /* ============================================
+     Radius (从配置映射)
+     ============================================ */
+  --radius-none: var(--config-radius-none);
+  --radius-sm: var(--config-radius-sm);
+  --radius-DEFAULT: var(--config-radius-default);
+  --radius-md: var(--config-radius-md);
+  --radius-lg: var(--config-radius-lg);
+  --radius-xl: var(--config-radius-xl);
+  --radius-2xl: var(--config-radius-2xl);
+  --radius-3xl: var(--config-radius-3xl);
+  --radius-full: var(--config-radius-full);
+  --radius: var(--radius-DEFAULT);
+
+  /* ============================================
+     Font Size (从配置映射)
+     ============================================ */
+  --font-size-xs: var(--config-font-size-xs);
+  --font-size-xs--line-height: var(--config-font-size-xs-lh);
+  --font-size-sm: var(--config-font-size-sm);
+  --font-size-sm--line-height: var(--config-font-size-sm-lh);
+  --font-size-base: var(--config-font-size-base);
+  --font-size-base--line-height: var(--config-font-size-base-lh);
+  --font-size-lg: var(--config-font-size-lg);
+  --font-size-lg--line-height: var(--config-font-size-lg-lh);
+  --font-size-xl: var(--config-font-size-xl);
+  --font-size-xl--line-height: var(--config-font-size-xl-lh);
+  --font-size-2xl: var(--config-font-size-2xl);
+  --font-size-2xl--line-height: var(--config-font-size-2xl-lh);
+  --font-size-3xl: var(--config-font-size-3xl);
+  --font-size-3xl--line-height: var(--config-font-size-3xl-lh);
+  --font-size-4xl: var(--config-font-size-4xl);
+  --font-size-4xl--line-height: var(--config-font-size-4xl-lh);
+  --font-size-5xl: var(--config-font-size-5xl);
+  --font-size-5xl--line-height: var(--config-font-size-5xl-lh);
+  --font-size-6xl: var(--config-font-size-6xl);
+  --font-size-6xl--line-height: var(--config-font-size-6xl-lh);
+  --font-size-7xl: var(--config-font-size-7xl);
+  --font-size-7xl--line-height: var(--config-font-size-7xl-lh);
+  --font-size-8xl: var(--config-font-size-8xl);
+  --font-size-8xl--line-height: var(--config-font-size-8xl-lh);
+  --font-size-9xl: var(--config-font-size-9xl);
+  --font-size-9xl--line-height: var(--config-font-size-9xl-lh);
+
+  /* ============================================
+     Motion (从配置映射)
+     ============================================ */
+  --motion-duration-fast: var(--config-motion-duration-fast);
+  --motion-duration-base: var(--config-motion-duration-base);
+  --motion-duration-slow: var(--config-motion-duration-slow);
+  --motion-ease-standard: var(--config-motion-ease-standard);
+  --motion-ease-emphasized: var(--config-motion-ease-emphasized);
+  --motion-ease-out: var(--config-motion-ease-out);
+}