experiment: consume css custom property tokens

package.json

@@ -46,10 +46,10 @@
     "@spark-ui/tailwind-plugins": "latest",
     "@spark-ui/textarea": "latest",
     "@spark-ui/theme-utils": "latest",
-    "@spark-ui/visually-hidden": "latest",
     "@spark-ui/use-combined-state": "latest",
-    "@spark-ui/use-mounted-state": "latest",
     "@spark-ui/use-merge-refs": "latest",
+    "@spark-ui/use-mounted-state": "latest",
+    "@spark-ui/visually-hidden": "latest",
     "@tanem/react-nprogress": "^5.0.48",
     "@types/node": "20.5.7",
     "@types/react": "18.2.21",

src/components/Shared/CustomProperties.tsx

@@ -0,0 +1,32 @@
+import { useState } from 'react'
+import { cx } from 'class-variance-authority'
+import { Kbd } from '@spark-ui/kbd'
+import { Input } from '@spark-ui/input'
+
+import { useCustomProperties } from '@/hooks/useCustomProperties'
+
+export const CustomProperties = ({ className }: { className?: string }) => {
+  const [customProperties, { set }] = useCustomProperties()
+  const [a, setA] = useState<{ [value: string]: string }>({ [1]: 'a' })
+
+  const generateHandleChange = tokenName => event => set(tokenName, event.target.value)
+  return (
+    <div className={cx('flex w-full flex-col gap-md', className)}>
+      {Object.entries(customProperties)
+        // .filter(([tokenName]) => tokenName === '--colors-basic')
+        .map(([tokenName, tokenValue]) => {
+          return (
+            <div key={tokenName} className="flex items-center">
+              <Kbd>{tokenName}</Kbd>:{' '}
+              <Input
+                className="grow"
+                value={tokenValue}
+                aria-label={tokenName}
+                onChange={generateHandleChange(tokenName)}
+              />
+            </div>
+          )
+        })}
+    </div>
+  )
+}

src/hooks/useCustomProperties.ts

@@ -0,0 +1,74 @@
+import { useEffect, useState, useRef, useReducer } from 'react'
+import { CSSGlobalVariables } from '../utils/CSSGlobalVariables'
+
+import { useMountedState } from '@spark-ui/use-mounted-state'
+
+const initialState = {}
+
+interface Actions {
+  data?: { [argument: string]: string }
+  type?: 'UPDATE'
+}
+function reducer(state: { [argument: string]: string }, { data, type }: Actions = {}) {
+  switch (type) {
+    case 'UPDATE':
+      debugger
+      return { ...state, ...data }
+    default:
+      return state
+  }
+}
+export const useCustomProperties = (
+  {
+    filter,
+    autoprefix,
+    normalize,
+  }: {
+    filter?: string | undefined
+    autoprefix?: boolean | undefined
+    normalize?: ((name: string) => string) | undefined
+  } = {},
+  callback: (customProperties: { [key: string]: string }) => void = () => {},
+) => {
+  const isMounted = useMountedState()
+
+
+  const [tokens, dispatch] = useReducer(reducer, initialState)
+  const { current: initialTokens } = useRef<{ [key: string]: string }>(tokens)
+  const variables = useRef(tokens)
+  const updateTokens = variables => {
+    debugger
+    callback(variables)
+  }
+
+  const update = newData => {
+    return dispatch({ data: newData, type: 'UPDATE' })
+  }
+
+  useEffect(() => {
+    if (isMounted()) {
+      variables.current = new CSSGlobalVariables({
+        filter,
+        autoprefix,
+        normalize,
+        callback: updateTokens,
+      })
+      update(variables.current)
+    }
+  }, [])
+  return [
+    tokens,
+    {
+      set: (tokenName: string, tokenValue: string) => {
+        variables.current[tokenName] = tokenValue
+        update({ ...(tokenName && { [tokenName]: tokenValue }) })
+      },
+      get: (tokenName: string) => tokens[tokenName],
+      reset: (tokenName?: string) => {
+        update({
+          ...(tokenName ? { [tokenName]: initialTokens[tokenName] } : { ...initialTokens }),
+        })
+      },
+    },
+  ]
+}

src/pages/design/[category]/[[...slug]]/index.tsx

@@ -9,6 +9,7 @@ import { ComponentMenu } from '@/components/Shared/ComponentMenu'
 import { allDocs, Doc } from 'contentlayer/generated'
 import { cx } from 'class-variance-authority'
 import { LayoutNav } from '@/components/Layout/LayoutNav'
+import { CustomProperties } from '@/components/Shared/CustomProperties'
 
 interface ThemeProps {
   categories: {
@@ -27,7 +28,9 @@ const ThemePage = ({ categories }: ThemeProps) => {
           <LayoutNav categories={categories} />
         </LayoutSideNav>
 
-        <main className="flex w-full flex-row">content</main>
+        <main className="flex w-full flex-row">
+          <CustomProperties />
+        </main>
       </LayoutContainer>
     </>
   )