diff --git a/docs/app/preset/colors/[name]/components/color-details.tsx b/docs/app/preset/colors/[name]/components/color-details.tsx
index c609609..2e217e5 100644
--- a/docs/app/preset/colors/[name]/components/color-details.tsx
+++ b/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(() => {
diff --git a/docs/app/preset/colors/[name]/components/usage-example.tsx b/docs/app/preset/colors/[name]/components/usage-example.tsx
index f358458..1fca78b 100644
--- a/docs/app/preset/colors/[name]/components/usage-example.tsx
+++ b/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 (
-
- Page Heading
-
+
+ Page Heading
+
+
-
+ className={css({
+ rounded: 'md',
+ w: 'full',
+ ...highlightedStyles,
+ })}
+ >
+
+
This is an example of a field message.
@@ -202,6 +218,22 @@ export default function UsageExample(props: UsageExampleProps) {
+
+
)
}
diff --git a/docs/app/preset/colors/components/AvatarSwatch.tsx b/docs/app/preset/colors/components/AvatarSwatch.tsx
index 7744ba8..13d5114 100644
--- a/docs/app/preset/colors/components/AvatarSwatch.tsx
+++ b/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(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 (