Custom Properties

View Source

WARNING: All CSS Custom Properties are considered unstable and subject to change before v1.0.

In supporting Components and for the global theme, you can use CSS Custom Properties to alter the look and feel of the Framework.

Via Style

You can customize the Custom Properties via inline styles as shown below.

<script>
    import {Button} from "@kahi-ui/framework";
</script>

<Button style="--button-padding-y:5;">
    I was customized via style!
</Button>

Via Classes

You can also use CSS classes to customize them as well.

<script>
    import {Button} from "@kahi-ui/framework";
</script>

<Button class="custom-properties-class">
    I was customized via a class!
</Button>

<style>
    :global(.custom-properties-class) {
        --button-padding-y: 5;
    }
</style>

Via Global Stylesheet

IMPORTANT: Make sure to declare your customized Custom Properties after you have loaded the Framework + Theme stylesheets. Otherwise they will be ignored.

You can finally use global stylesheets to keep all your customizations in one spot.

<html>
    <head>
        <link
            rel="stylesheet"
            href="/path/to/kahi-ui.framework.css"
        />

        <link
            rel="stylesheet"
            href="/path/to/kahi-ui.theme.default.css"
        />

        <style>
            :root {
                --button-padding-y: 5;
            }
        </style>
    </head>

    <body>
        ...
    </body>
</html>