7102e297d1
# Panda CSS example This example contains a simple implementation of [Panda CSS](https://panda-css.com/). It contains styling for a link made in four different approaches supported by Panda CSS. Refer to the [documentation](https://panda-css.com/docs) for when to use - and how to combine - the different approaches to suit your needs. ## Link examples - [Atomic Recipe (CVA)](https://panda-css.com/docs/concepts/recipes#atomic-recipe-or-cva) Create multi-variant atomic styles with a type-safe runtime API. - [Atomic Style](https://panda-css.com/docs/concepts/writing-styles#atomic-styles) Type-safe reusable atoms with small CSS footprint. - [Config Recipe](https://panda-css.com/docs/concepts/recipes#config-recipe) Resuable recipes extracted and generated just-in-time. - [Text Styles](https://panda-css.com/docs/theming/text-styles#defining-text-styles) Global text styles for consistent and legible typography. ## Preview Preview the example live on [https://example-panda-css.vercel.app/](https://example-panda-css.vercel.app/) ## Motivation Panda CSS is a CSS-in-JS framework, that support the new era of server components and the rise of the app-directory in Next.js. It is a performant, type-safe, developer friendly framework, which uses modern CSS features. It is heavily inspired by existing frameworks, such as Chakra UI, Vanilla Extract, Stitches and Tailwind. More on [why you should choose Panda CSS](https://panda-css.com/docs/overview/why-panda)
87 lines
1.7 KiB
TypeScript
87 lines
1.7 KiB
TypeScript
import {
|
|
defineConfig,
|
|
defineGlobalStyles,
|
|
defineRecipe,
|
|
defineTextStyles,
|
|
} from '@pandacss/dev'
|
|
|
|
// https://panda-css.com/docs/theming/text-styles#defining-text-styles
|
|
export const textStyles = defineTextStyles({
|
|
link: {
|
|
description: 'The classic link text style - used in demo links',
|
|
value: {
|
|
fontSize: 'lg',
|
|
fontFamily: 'inter',
|
|
},
|
|
},
|
|
})
|
|
|
|
// https://panda-css.com/docs/concepts/recipes#config-recipe
|
|
export const linkRecipe = defineRecipe({
|
|
className: 'link',
|
|
description: 'The styles for the link component',
|
|
base: {
|
|
color: {
|
|
_default: 'gray.800',
|
|
_osDark: 'gray.100',
|
|
},
|
|
fontFamily: 'inter',
|
|
},
|
|
variants: {
|
|
size: {
|
|
sm: { fontSize: 'sm' },
|
|
lg: { fontSize: 'lg' },
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'lg',
|
|
},
|
|
})
|
|
|
|
// https://panda-css.com/docs/concepts/writing-styles#global-styles
|
|
const globalCss = defineGlobalStyles({
|
|
html: {
|
|
bg: {
|
|
_default: 'white',
|
|
_osDark: 'black',
|
|
},
|
|
'& .icon': {
|
|
ml: 2,
|
|
fontSize: 'lg',
|
|
fontWeight: 700,
|
|
},
|
|
},
|
|
})
|
|
|
|
// https://panda-css.com/docs/references/config
|
|
export default defineConfig({
|
|
// Whether to use css reset
|
|
preflight: true,
|
|
|
|
// Where to look for your css declarations
|
|
include: ['./app/**/*.{js,jsx,ts,tsx}'],
|
|
|
|
// Files to exclude
|
|
exclude: [],
|
|
|
|
// Useful for theme customization
|
|
theme: {
|
|
extend: {
|
|
tokens: {
|
|
fonts: {
|
|
inter: { value: 'var(--font-inter)' },
|
|
},
|
|
},
|
|
recipes: {
|
|
link: linkRecipe,
|
|
},
|
|
textStyles,
|
|
},
|
|
},
|
|
|
|
// The output directory for your css system
|
|
outdir: 'styled-system',
|
|
|
|
// Global styles
|
|
globalCss,
|
|
})
|