Composables
useXCards
Returns the deep-merged design token configuration for all XCard components — colors, fonts, radius, spacing, defaults, and brand.
useXCards
Reads appConfig.x.cards and deep-merges it over built-in defaults using defu. Returns the full XCardsConfig object consumed by every XCard* component. Use it in your own components or pages to read design tokens and stay in sync with the layer's configuration.
Usage
const config = useXCards()
// Examples
config.colors.primary // "cream"
config.defaults.filter // "cinematic"
config.fonts.serif // "'Playfair Display', ..."
config.brand.appName // "My Brand"
config.spacing.baseUnit // 4
Returns
| Key | Type | Description |
|---|---|---|
colors.primary | string | Primary color name (default: "cream"). |
colors.neutral | string | Neutral color name (default: "olive"). |
colors.accents | object | Accent hex values: { gold, goldHover, blue, green }. |
fonts.sans | string | Sans-serif font stack. |
fonts.serif | string | Serif font stack (Playfair Display). |
fonts.display | string | Display font stack. |
fonts.googleFontsUrl | string | Google Fonts URL injected into <head>. |
radius.card | string | Border radius for card components. |
radius.panel | string | Border radius for panel components. |
spacing.baseUnit | number | 4px grid base unit in pixels (default: 4). |
defaults.filter | string | Default image filter: "cinematic", "moody", "golden", "cool", "dramatic", or "none". |
defaults.overlay | string | Default overlay style applied to media cards. |
defaults.mediaAspectRatio | string | Default aspect ratio for media cards. |
defaults.productAspectRatio | string | Default aspect ratio for product cards. |
brand.appName | string | App name used in component titles. |
brand.logoIcon | string | Iconify icon class for the logo. |
AI Context
composable: useXCards
package: "@xenterprises/nuxt-x-cards"
use-when: >
Reading design tokens at runtime inside a custom component that should
stay aligned with the nuxt-x-cards configuration. All built-in XCard*
components call this internally to source their colors, fonts, radius,
spacing, and defaults. Consumer overrides in app.config.ts under x.cards
are automatically reflected here via defu deep-merge — no manual syncing
needed. Use config.defaults.filter to read the configured image filter
default, or config.colors.accents.gold to read the accent gold value.