Themes API

You can create new themes using the themes.scss API file and manage all settings in the options.scss and utilities.scss API files through your theme map. This approach allows for easy customization and flexibility, enabling you to adapt Punica to meet the specific needs of your project.

By consolidating all configuration settings into a single theme map, you streamline the process of updating or switching between themes without the need for modifying multiple API files.

Structure of a Theme Map
Key	Description
`name`	Name of your theme
`type`	Style of your theme (light or dark)
`typography`	Global typography properties of your theme
font-family font-url font-size font-weight line-height	'' '' '' '' ''
`color`	Global color preferences of your theme
text background primary success warning error dark	'' '' '' '' '' '' ''
`border`	Global border properties of your theme
color width style radius	'' '' '' '' ''
`shadow`	Global shadow properties of your theme
Optional	Description
`classnames`	Used to change/override classnames of a component/element
`components`	Used to change/override properties of a component
`elements`	Used to change/override properties of an element
`utilities`	Used to change/override properties of an utility

In Punica, the default theme map in themes.scss is structured to help you create your own theme. The classnames, components, elements, and utilities keys are fully optional and can be used as needed for your project.

If you've finished creating your theme, simply update the $active-theme variable in the punica.scss starter file with your theme's name and recompile Punica.

In Punica, if you want to override default settings, variables, and class names in the options.scss and utilities.scss API files, you can use the classnames, components, elements, and utilities keys within your theme map. These keys allow you to customize Punica's default settings and recompile it to fit your project's needs.

If you want to change the class names of an element or component through your theme map;

If you want to modify the settings of a component through your theme map;

If you want to modify the settings of an element through your theme map;

If you want to modify the settings of an utility through your theme map;