216 feature add cerberusconfig helper

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

@@ -21,7 +21,12 @@ export default function ColorSwatch(props: ColorSwatchProps) {
   const modeValue = useMemo(() => {
     return mode === 'dark' ? '_darkMode' : '_lightMode'
   }, [mode])
-  const color = _cerberusTheme[modeValue]
+  const color = useMemo(() => {
+    if (props.tokenName === 'action-border-focus') {
+      return _cerberusTheme[modeValue]
+    }
+    return `var(--cerberus-${_cerberusTheme[modeValue].replace(/\./g, '-').replace(/[{}]/g, '')})`
+  }, [modeValue, _cerberusTheme, props.tokenName])
 
   const bgColor = {
     backgroundColor: color,

docs/app/preset/colors/components/color-details.tsx

@@ -87,9 +87,7 @@ interface FigmaScope {
   }
 }
 
-interface ColorDetailsProps {}
-
-export default function ColorDetails(props: ColorDetailsProps) {
+export default function ColorDetails() {
   const { mode } = useThemeContext()
   const searchParams = useSearchParams()
   const paramsToken = searchParams.get('token') ?? 'page-backdrop-initial'
@@ -145,12 +143,20 @@ export default function ColorDetails(props: ColorDetailsProps) {
   }, [scope, splitToken])
 
   const userMode = mode === 'dark' ? '_darkMode' : '_lightMode'
-  const tokenValue = token.value._cerberusTheme[userMode]
+  const rawColor = useMemo(() => {
+    return token.value._cerberusTheme[userMode]
+  }, [token.value._cerberusTheme, userMode])
+  const color = useMemo(() => {
+    if (paramsToken === 'action-border-focus') {
+      return rawColor
+    }
+    return `var(--cerberus-${rawColor.replace(/\./g, '-').replace(/[{}]/g, '')})`
+  }, [rawColor, paramsToken])
   const swatchColor = useMemo(
     () => ({
-      backgroundColor: tokenValue,
+      backgroundColor: color,
     }),
-    [tokenValue],
+    [color],
   )
 
   return (

docs/app/preset/conditions/doc.mdx

@@ -13,6 +13,7 @@ Cerberus extends the [built-in conditions](https://panda-css.com/docs/concepts/c
 | Name                | Selector                  |
 | ------------------  | ------------------------- |
 | _cerberusTheme      | `[data-theme=cerberus] &` |
+| _acheronTheme       | `[data-theme=acheron] &` |
 | _lightMode          | `[data-color-mode=light] &, &.light, .light &` |
 | _darkMode           | `[data-color-mode=dark] &, &.dark, .dark &` |
 | _modalOpen          | `&:is([data-modal-open=true])` |

docs/app/react/checkbox/components/live-preview.tsx

@@ -75,7 +75,7 @@ export function CheckboxPreview() {
   const { size, text, id, mixed, ...fieldState } = selectedProps
   const [checked, setChecked] = useState<boolean>(false)
 
-  const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+  const handleChange = useCallback((_: ChangeEvent<HTMLInputElement>) => {
     setChecked((prev) => !prev)
   }, [])
 

docs/app/react/side-nav.ts

@@ -19,6 +19,21 @@ const overviewGroup: CategoriesList = {
     new: ['Loading States'],
   },
 }
+const hooksGroup: CategoriesList = {
+  overview: {
+    name: 'Hooks & Helpers',
+    description: 'React hooks and helper functions for Cerberus',
+    items: [
+      'trap-focus',
+      'use-modal',
+      'use-theme',
+      'use-theme-context',
+      'use-toggle',
+    ],
+    next: [],
+    new: [''],
+  },
+}
 
 function createSideNavData(categories: CategoriesList): NavList {
   const navList: NavList = []
@@ -54,4 +69,5 @@ function getCategoryItemTags(
 export const sideNavData: NavList = [
   ...createSideNavData(overviewGroup),
   ...createSideNavData(categoriesData),
+  ...createSideNavData(hooksGroup),
 ]

packages/panda-preset/src/conditions.ts

@@ -1,6 +1,7 @@
 export const conditions = {
   // themes
   cerberusTheme: '[data-theme=cerberus] &',
+  acheronTheme: '[data-theme=acheron] &',
 
   // modes
   lightMode: '[data-color-mode=light] &, &.light, .light &',

packages/panda-preset/src/index.ts

@@ -1,27 +1,16 @@
 import {
   defineConfig,
   definePreset,
-  defineSemanticTokens,
   type Config,
   type Preset,
 } from '@pandacss/dev'
 import { globalCss } from './globalCss'
 import { conditions } from './conditions'
 import { utilities } from './utilities'
 import { patterns } from './patterns'
-import {
-  actionTokens,
-  dangerTokens,
-  infoTokens,
-  keyframes,
-  pageTokens,
-  secondaryActionTokens,
-  successTokens,
-  textStyles,
-  tokens,
-  warningTokens,
-} from './theme/index'
+import { keyframes, textStyles, tokens } from './theme'
 import { recipes, slotRecipes } from './recipes'
+import { semanticTokens } from './theme/semantic-tokens/config'
 
 /**
  * This module contains the Cerberus preset and configuration options.
@@ -36,6 +25,7 @@ export const cerberusPreset: Preset = definePreset({
   utilities,
   patterns,
 
+  // main theme: cerberus
   theme: {
     extend: {
       keyframes,
@@ -44,19 +34,11 @@ export const cerberusPreset: Preset = definePreset({
       textStyles,
       tokens,
     },
-
-    semanticTokens: defineSemanticTokens({
-      colors: {
-        ...pageTokens,
-        ...actionTokens,
-        ...secondaryActionTokens,
-        ...infoTokens,
-        ...successTokens,
-        ...warningTokens,
-        ...dangerTokens,
-      },
-    }),
+    semanticTokens,
   },
+
+  // additional themes
+  themes: {},
 })
 
 export const cerberusConfig: Config = defineConfig({

packages/panda-preset/src/theme/colors.ts

@@ -0,0 +1,8 @@
+import { formatPrimitiveColors, type PandaColor } from '../tokens'
+
+/**
+ * This module contains the primitive colors used in the main theme.
+ * @module
+ */
+
+export const colors: PandaColor = formatPrimitiveColors()

packages/panda-preset/src/theme/index.ts

@@ -1,3 +1,4 @@
+export * from './colors'
 export * from './keyframes'
 export * from './tokens'
 export * from './textStyles'