Customisation

I've tried to make this pretty easy to customise to get how you want with minimal fuss. For the most part things that should be considered customisable are using CSS custom properties, though you can always override whatever properties you want.
If you have any troubles or encounter difficulties trying to make changes or adjustments feel free to open an issue on Github.

Generally the custom properties are named after the property that they are supposed to be setting so that it is easy to guess what you need to change. There are a few of exceptions for this though mostly around the padding of elements which goes for --padding-x and --padding-y rather than --padding-inline and --padding-block, but maybe I'll change that in the future.

Accent colours

There are classes to applying the accent colour to whatever element you want, eg. red, blue, green, etc. These all set the accent-color property as well as adding accent variables for each level.

You could apply this can apply this class at a parent level eg. apply it to the body and all your buttons and inputs would have that colour, but you can still override that by applying a different colour class to an individual element.

The accent variables are generally used in the following way on interactive elements:

accent-4 The standard accent colour for that element, might be the text or the background.
accent-3 The accent used when elements are being viewed (either by focus or hover).
accent-2 The element is being activated or interactive with.
accent-9 Contrast colour with the main accent, usually on whatever the accent colour isn't.

Though there might be some slight variation based on the type of element and how it's interacted with.
There is more information about this in the project Readme.