Dreamy UI comes with a preset for pandaCSS, which provides tokens, patterns, recipes and utilities that are required for components to be styled. Color values should be only hex, rgb or hsl values.
createDreamyPreset function accepts the object argument with following types:
interface LightDarkColor {
light: string;
dark: string;
}
interface PresetOptions {
/**
* The background color for your app.
*/
backgrounds: LightDarkColor;
/**
* Fonts for body, heading and mono. If heading font is not provided, it will use body font for headings.
*/
fonts: {
body: string;
heading: string;
mono: string;
};
/**
* Primary color for your app.
* @default "{ light: '#000000', dark: '#ffffff' }"
*/
primaryColor: string | LightDarkColor;
/**
* Secondary color for your app.
* @default "{ light: '#000000', dark: '#ffffff' }"
*/
secondaryColor: string | LightDarkColor;
/**
* Border radius for your app.
* @default "md"
*/
rounded: BorderRadius;
/**
* Color for the primary button. It depends on the `primaryColor` option.
* @default Dream will automatically resolve contrast to match the `primaryColor` option.
*/
buttonPrimaryTextColor: string | LightDarkColor;
/**
* Color for the secondary button. It depends on the `secondaryColor` option.
* @default Dream will automatically resolve contrast to match the `secondaryColor` option.
*/
buttonSecondaryTextColor: string | LightDarkColor;
}Here's a preset configuration of Dreamy UI Docs:
// > panda.config.ts <
import createDreamyPreset, { dreamyPlugin, parts } from "@dreamy-ui/panda-preset";
import { defineConfig } from "@pandacss/dev";
export default defineConfig({
...
presets: [
createDreamyPreset({
backgrounds: {
light: "#FFF"
dark: "#080808",
},
fonts: {
body: "Geist",
heading: "Manrope"
},
primaryColor: "#6056aa",
secondaryColor: "#d193bb",
rounded: "md"
})
],
plugins: [dreamyPlugin]
});In other words, that's how default preset args look like:
// > panda.config.ts <
import createDreamyPreset, { dreamyPlugin, parts } from "@dreamy-ui/panda-preset";
import { defineConfig } from "@pandacss/dev";
export default defineConfig({
...
presets: [
createDreamyPreset({
backgrounds: {
light: "#fff",
dark: "#0D0D0E"
},
fonts: {
body: "sans-serif",
heading: "sans-serif",
mono: "monospace"
},
primaryColor: {
light: "#000000",
dark: "#ffffff"
},
secondaryColor: {
light: "#000000",
dark: "#ffffff"
},
rounded: "md"
})
],
plugins: [dreamyPlugin]
});