graycoreio/daffodil

<h1>Variables</h1>
<p>Daffodil's CSS custom properties can be used for fast and easy design and development. We provide common, functional CSS variables that can be used to quickly style elements without the need to create theme files.</p>

<h2>CSS Custom Properties</h2>
<p>Our custom properties are prefixed with <code>daff-</code> to avoid conflicts with third party variables.</p>
<table>
    <thead>
        <tr>
            <th>Token</th>
            <th>Light theme default value</th>
            <th>Dark theme default value</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>--daff-theme-rgb</td>
            <td>255, 255, 255</td>
            <td>26, 26, 26</td> 
        </tr>
        <tr>
            <td>--daff-theme-contrast-rgb</td>
            <td>7, 7, 7</td>
            <td>255, 255, 255</td>
        </tr>
        <tr>
            <td>--daff-theme</td>
            <td>#FFFFFF</td>
            <td>#1A1A1A</td>
        </tr>
        <tr>
            <td>--daff-theme-contrast</td>
            <td>#070707</td>
            <td>#FFFFFF</td>
        </tr>
        <tr>
            <td>--daff-theme-primary</td>
            <td>#1F66FF</td>
            <td>#548FFF</td>
        </tr>
        <tr>
            <td>--daff-theme-secondary</td>
            <td>#6A57FF</td>
            <td>#8B82FF</td>
        </tr>
        <tr>
            <td>--daff-theme-tertiary</td>
            <td>#00835F</td>
            <td>#1FA67C</td>
        </tr>
        <tr>
            <td>--daff-theme-warn</td>
            <td>#B36200</td>
            <td>#B36200</td>
        </tr>
        <tr>
            <td>--daff-theme-success</td>
            <td>#00852E</td>
            <td>#00852E</td>
        </tr>
        <tr>
            <td>--daff-theme-critical</td>
            <td>#EC0019</td>
            <td>#EC0019</td>
        </tr>
        <tr>
            <td>--daff-theme-white</td>
            <td>#FFFFFF</td>
            <td>#FFFFFF</td>
        </tr>
        <tr>
            <td>--daff-theme-black</td>
            <td>#070707</td>
            <td>#070707</td>
        </tr>
        <tr>
            <td>--daff-theme-gray</td>
            <td>#767676</td>
            <td>#949494</td>
        </tr>
        <tr>
            <td>--daff-base-bg</td>
            <td>#FFFFFF</td>
            <td>#1A1A1A</td>
        </tr>
        <tr>
            <td>--daff-base-text</td>
            <td>#070707</td>
            <td>#FFFFFF</td>
        </tr>
    </tbody>
</table>

<blockquote>These values are based on <code>&#64;daffodil/design</code>'s default theme and will be different if decide to customize your own theme.</blockquote>