<script>
import { Themer } from '@thetinkerinc/colibri';
import theme from './theme.js';

import '@thetinkerinc/colibri/styles/all.css';
</script>

<Themer {theme}>
	<slot />
</Themer>

Colibri gives you the flexibility to build off of any of our themes to changes the overall appearance of your app, as well as inject arbitrary styling into components. Head to the theme editor to edit theme wide variables and see how they look as you make changes. For more fine grained control, Colibri also gives you the ability to add styling on the component level. On the component documentation pages you'll find a styling section with two tabs: variables and properties. Variables are an easy way to update certain aspects of a component's style without having to know about the structure of the component or add your own styling rules. The variables listed in the component documentation page are specific to that component. Often though, the variables will override more general variables which can be found in the theme editor . These general variables will apply to multiple components. Generally, it is recommended to use variables if possible to achieve your desired effect. When variables aren't enough, you can also add arbitrary classes and inline styles to the individual parts of a component. In the properties tab you'll find the breakdown of sections and the ability to add classes and CSS rules to each one.

On the component documentation pages, as you're editing the variables and properties, you'll see that there is a style object that dynamically update as you type. The values you enter are saved as you navigate, and will be part of your custom theme file if you choose to download and apply it. However this object can also be passed as a prop to individual components, which will override any theme styling and give you the ability to do targeted styling. The documentation pages show examples of how to integrate style objects.

Colibri styling is compatible with TailwindCSS, and any other CSS utility framework you use. This documentation site has Tailwind Playground installed which lets you experiment with arbitrary Tailwind classes on the component documentation pages. The only consideration to make when using a utility CSS library is to load the styles after you load Colibri's to make sure you have the right precedence. This is usually as simple as importing your app's styling after importing Colibri's all.css file.

<script>
import '@thetinkerinc/colibri/styles/all.css';
import '../lib/styles/all.css';
</script>