Concepts

Tokens

To get the value of a token, you can use the token function. This function allows you to access the design tokens defined in the theme.


import { token } from '@krakentech/coral-design/tokens';
 
const color = token('color.background.base.500');

CSS

You can create custom CSS using the css function from Panda. This function allows you to define styles that can be applied to components or elements.


import { css } from '@krakentech/coral-design/css';
 
const customStyles = css({
    backgroundColor: 'red'
});
 
<div className={customStyles}>
    Custom Styled Div
</div>

styled

If you prefer the styled API, you can use the styled function from Panda. This function allows you to create styled components with custom styles.


import { styled } from '@krakentech/coral-design/jsx';
 
const Button = ({ children }) => (
  <styled.button bg="blue.500" color="white" py="2" px="4" rounded="md">
    {children}
  </styled.button>
)