docs: update usage example

docs/app/preset/colors/[name]/components/color-details.tsx

@@ -112,10 +112,10 @@ export default function ColorDetails(props: ColorDetailsProps) {
 
     const result = sortedToken.reduce((acc, curr) => {
       // @ts-ignore - we know this is a valid key
-      return acc[curr]
+      return acc && acc[curr]
     }, semanticColors) as unknown as FigmaScope
 
-    return result.$extensions['com.figma'].scopes ?? []
+    return result?.$extensions['com.figma'].scopes ?? []
   }, [splitToken])
 
   const formattedToken = useMemo(() => {

docs/app/preset/colors/[name]/components/usage-example.tsx

@@ -1,3 +1,4 @@
+import { zIndex } from '@cerberus-design/panda-preset'
 import {
   Button,
   Field,
@@ -10,14 +11,16 @@ import {
   Tabs,
   Tag,
 } from '@cerberus-design/react'
-import { css } from '@cerberus/styled-system/css'
+import { css, cx } from '@cerberus/styled-system/css'
 import { hstack, vstack } from '@cerberus/styled-system/patterns'
 
 const highlightedStyles = {
+  position: 'relative',
   _highlighted: {
     outline: '4px solid',
     outlineColor: 'success.border.initial',
     outlineOffset: '2',
+    zIndex: 'overlay',
   },
 }
 
@@ -27,10 +30,12 @@ interface UsageExampleProps {
 
 export default function UsageExample(props: UsageExampleProps) {
   const isPageSurface = props.token.includes('page-surface')
+  const isBackdrop = props.token.includes('page-backdrop')
+  const isText = props.token.includes('page-text')
 
   return (
     <div
-      {...(isPageSurface && {
+      {...((isPageSurface || isBackdrop) && {
         'data-highlighted': true,
       })}
       className={css({
@@ -41,19 +46,24 @@ export default function UsageExample(props: UsageExampleProps) {
         ...highlightedStyles,
       })}
     >
-      <p
-        {...(props.token.includes('page-text') && {
+      <div
+        {...(isText && {
           'data-highlighted': true,
         })}
         className={css({
-          pb: '2',
           rounded: 'md',
-          textStyle: 'h3',
           ...highlightedStyles,
         })}
       >
-        Page Heading
-      </p>
+        <p
+          className={css({
+            pb: '2',
+            textStyle: 'h3',
+          })}
+        >
+          Page Heading
+        </p>
+      </div>
 
       <div
         className={hstack({
@@ -98,8 +108,8 @@ export default function UsageExample(props: UsageExampleProps) {
         <Field>
           <Label
             className={css({
-              ...highlightedStyles,
               rounded: 'md',
+              ...highlightedStyles,
             })}
             {...(props.token.includes('page-text') && {
               'data-highlighted': true,
@@ -108,17 +118,23 @@ export default function UsageExample(props: UsageExampleProps) {
           >
             Label
           </Label>
-          <Input
-            describedBy="help:example"
-            className={css({
-              ...highlightedStyles,
-            })}
+          <div
             {...(props.token.includes('page-border') && {
               'data-highlighted': true,
             })}
-            id="example"
-            placeholder="Placeholder"
-          />
+            className={css({
+              rounded: 'md',
+              w: 'full',
+              ...highlightedStyles,
+            })}
+          >
+            <Input
+              describedBy="help:example"
+              className={css(highlightedStyles)}
+              id="example"
+              placeholder="Placeholder"
+            />
+          </div>
           <FieldMessage id="help:example">
             This is an example of a field message.
           </FieldMessage>
@@ -202,6 +218,22 @@ export default function UsageExample(props: UsageExampleProps) {
           </TabPanel>
         </Tabs>
       </div>
+
+      <div
+        className={css({
+          bgColor: 'page.backdrop.initial',
+          backdropFilter: 'blur(4px)',
+          backdropBlur: 'sm',
+          bottom: '0',
+          left: '0',
+          position: 'absolute',
+          rounded: 'xl',
+          top: '0',
+          transition: 'all 150ms ease-in-out',
+          right: '0',
+          zIndex: 'decorator',
+        })}
+      />
     </div>
   )
 }

docs/app/preset/colors/components/AvatarSwatch.tsx

@@ -2,79 +2,11 @@
 
 import { useThemeContext } from '@cerberus-design/react'
 import type { SemanticToken, Sentiment } from '@cerberus-design/panda-preset'
-import { useEffect, useMemo, useState } from 'react'
-import { css } from '@cerberus/styled-system/css'
+import { useMemo, useState } from 'react'
 import { circle } from '@cerberus/styled-system/patterns'
 import Link from 'next/link'
 import { useSearchParams } from 'next/navigation'
 
-// We have to use !important to override the .MDX styles
-
-const paletteTextStyles = css({
-  textAlign: 'center',
-
-  _pagePalette: {
-    color: 'page.text.initial !important',
-    '&[data-has-white="true"]': {
-      color: 'page.text.inverse !important',
-    },
-  },
-  _actionPalette: {
-    color: 'action.text.initial !important',
-    '&[data-has-white="true"]': {
-      color: 'action.bg.100.initial !important',
-    },
-    '&[data-mode="light"]': {
-      color: 'action.text.inverse !important',
-      '&[data-has-white="true"]': {
-        color: 'action.text.initial !important',
-      },
-    },
-  },
-  _secondaryActionPalette: {
-    color: 'secondaryAction.text.initial !important',
-    '&[data-has-white="true"]': {
-      color: 'secondaryAction.bg.initial !important',
-    },
-    '&[data-mode="light"]': {
-      color: 'secondaryAction.text.inverse !important',
-      '&[data-has-white="true"]': {
-        color: 'secondaryAction.bg.initial !important',
-      },
-    },
-  },
-  _infoPalette: {
-    color: 'info.text.initial !important',
-    '&[data-has-white="true"]': {
-      color: 'info.surface.100 !important',
-    },
-  },
-  _successPalette: {
-    color: 'success.text.initial !important',
-    '&[data-has-white="true"]': {
-      color: 'success.text.inverse !important',
-    },
-  },
-  _warningPalette: {
-    color: 'warning.text.initial !important',
-    '&[data-has-white="true"]': {
-      color: 'white !important',
-    },
-    _darkMode: {
-      color: 'white !important',
-      '&[data-has-white="true"]': {
-        color: 'warning.text.initial !important',
-      },
-    },
-  },
-  _dangerPalette: {
-    color: 'danger.text.initial !important',
-    '&[data-has-white="true"]': {
-      color: 'danger.text.inverse !important',
-    },
-  },
-})
-
 interface ColorSwatchProps {
   token: SemanticToken
   tokenName: string
@@ -84,7 +16,6 @@ interface ColorSwatchProps {
 export default function ColorSwatch(props: ColorSwatchProps) {
   const { _cerberusTheme } = props.token.value
   const { mode } = useThemeContext()
-  const [copied, setCopied] = useState<boolean>(false)
   const searchParams = useSearchParams()
 
   const modeValue = useMemo(() => {
@@ -96,15 +27,6 @@ export default function ColorSwatch(props: ColorSwatchProps) {
     backgroundColor: color,
   }
 
-  useEffect(() => {
-    if (copied) {
-      const timeout = setTimeout(() => {
-        setCopied(false)
-      }, 2000)
-      return () => clearTimeout(timeout)
-    }
-  }, [copied])
-
   return (
     <Link
       aria-current={
@@ -114,10 +36,6 @@ export default function ColorSwatch(props: ColorSwatchProps) {
       className={circle({
         border: '1px solid',
         size: '12',
-        _currentPage: {
-          border: '3px solid',
-          borderColor: 'action.navigation.visited',
-        },
         _pagePalette: {
           borderColor: 'page.border.initial',
         },
@@ -139,8 +57,9 @@ export default function ColorSwatch(props: ColorSwatchProps) {
         _dangerPalette: {
           borderColor: 'danger.border.initial',
         },
-        _motionSafe: {
-          _hover: {},
+        _currentPage: {
+          border: '3px solid',
+          borderColor: 'action.navigation.visited !important',
         },
       })}
       href={`/preset/colors?token=${props.tokenName}`}