Tundra CSS

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.
Though if you are doing that a lot maybe this isn't the system that you need?

Generally the custom properties that are named after the thing 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 add four accent levels.

Generally the best way to think of it is like so:

  1. accent-1 The accent used when elements are in a hover state
  2. accent-2 The standard accent colour
  3. accent-3 The element is active
  4. accent-4 Used occasionally for variations or elements that have a higher contrast range.

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.