Advanced Theming

In the eventuality that you need to provide deeper customization of the theme, you can use the theme function from Panda. This function allows you to provide overrides to the underlying theme configuration that is used by createCoralPreset.

You can retain the createCoralPreset function as above, and then provide a theme function that extends the default theme with your customizations.


// panda.config.ts
import { defineConfig } from '@pandacss/dev';
import { createCoralPreset } from '@krakentech/coral-design';
 
export default defineConfig({
    presets: [
        createCoralPreset({}),
    ],
    theme: {
        extend: {
 
        }
    }
});

Recipes

Coral makes use of the config recipe paradigm within Panda to define styles for components, combined (where relevant) with defineParts . As such, each component has a corresponding recipe that defines its styles, and many of these recipes contain parts that define the different parts of the component that can be styled. For example, the Accordion recipe has, amongst others, parts for the parent wrapper, content wrapper, and expand button. If you want to override the styles for a specific part, you can do so by providing custom styles for that part in that recipe.

For components that have parts, you can use the partsList const to get (and set) the styles for the different parts of the component.


import { defineConfig } from '@pandacss/dev';
import { createCoralPreset, partsList } from '@krakentech/coral-design';
 
export default defineConfig({
    presets: [
        createCoralPreset({}),
    ],
    theme: {
        extend: {
            recipes: {
                StyledAccordion: {
                    base: partsList.accordionParts({
                        expandButton: {
                            backgroundColor: 'red',
                        },
                    }),
                },
            },
        },
    },
});

You will need to refer to the source code of the recipe within the @krakentech/coral-design package to see what parts are available for styling, and refer to the source code of the component itself to understand which part relates to which section. You can find the source code for the components in the @krakentech/coral-atoms package.

The present list of recipes is as follows:


export const recipes = {
    /**
     * Atoms
     */
    StyledAccordion,
    StyledAlert,
    StyledAppDownloadButton,
    StyledAutocomplete,
    StyledBanner,
    StyledBlockquote,
    StyledBreadcrumbs,
    StyledButton,
    StyledCard,
    StyledCardPadding,
    StyledCheckbox,
    StyledChip,
    StyledCircularLoader,
    StyledContainer,
    StyledDatePicker,
    StyledCaptionLabel, 
    StyledCalendar, 
    StyledMonthsOnly, 
    StyledMonthButton, 
    StyledYears, 
    StyledYearButton, 
    StyledDialog,
    StyledDrawer,
    StyledDropdown,
    StyledDropdownMenu,
    StyledError,
    StyledErrorMessage,
    StyledFileInput,
    StyledGrid,
    StyledInputAddon,
    StyledInputGroup,
    StyledInputLabel,
    StyledLinearLoader,
    StyledLink,
    StyledList,
    StyledLogo,
    StyledRadio,
    StyledReview,
    StyledSkeleton,
    StyledSkipToContent,
    StyledSelect,
    StyledSlider,
    StyledStack,
    StyledStepper,
    StyledSwitch,
    StyledTable,
    StyledTextArea,
    StyledTextField,
    StyledToast,
    StyledToggleButton,
    StyledTooltip,
    StyledTypography,
    StyledVisibility,
    /**
     * Molecules
     */
    StyledActionCard,
    StyledAppBanner,
    StyledCardGroup,
    /**
     * Organisms
     */
    StyledCookiePreferences,
    StyledPasswordStrengthBar,
    StyledListContainer,
    StyledHeader,
    StyledLogin,
};

Tokens

You can define custom tokens for your theme. Note that the tokens defined here will only be available in your custom theme via your custom styled-system folder, not via the @krakentech/coral-design namespace.

The styled-system folder is the entry point for Panda functions. You can read the full documentation on Panda’s styled-system to understand how it works in full, but in short it’s where the functions for custom CSS or getting tokens values live.

Also note that these tokens will have different types than those provided by createCoralPreset, so you will need to define them in line with the Tokens that Panda expects.


import { token as coralToken } from '@krakentech/coral-design/tokens';
import { token } from './styled-system/tokens';
 
const defaultColor = coralToken('color.background.base.500');
const customColor = token('color.custom.primary');
 
export default defineConfig({
    presets: [
        createCoralPreset({}),
    ],
    theme: {
        extend: {
            tokens: {
                color: {
                    custom: {
                        primary: 'red'
                    },
                },
            }
        },
    },
});

It is not possible to overset our default tokens here, and you should set the default tokens within createCoralPreset as outlined in the Basic Configuration.

Breakpoints

You can also define custom breakpoints for your theme. Note that the breakpoints defined here will only be available in your custom theme via your custom styled-system folder.

These breakpoints are different from the breakpoints provided by createCoralPreset. Do not use the same breakpoints as those provided by createCoralPreset, as this will cause conflicts. Instead, you should define your own breakpoints that suit your application’s needs.