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>