User Interface

## Colors

Since Fuse uses Tailwind, all color related utilities such as `text-red-50` or `bg-indigo-900` are available by default and they can be configured using Tailwind's configuration.

In addition to default Tailwind colors, Fuse also provides utilities that changes depending on the selected theme. These utilities are meant to be used in places where you want to have a theme dependent colors such as buttons, backgrounds or texts.

## Primary, Accent & Warn

Fuse provides Primary, Accent and Warn utilities to go with Angular Material theming. These utilities hold variable colors and they change depending on the selected theme color.

Having these utilities allow you to have dynamic theming throughout your application without hard coding any colors. Each of these utilities also have a complementary `.text-on-XXX` utility to provide a contrasting text color.

Primary
`bg-primary` `text-on-primary`
Accent
`bg-accent` `text-on-accent`
Warn
`bg-warn` `text-on-warn`
Primary 200
`bg-primary-200` `text-on-primary-200`
Accent 300
`bg-accent-300` `text-on-accent-300`
Warn 400
`bg-warn-400` `text-on-warn-400`

You can change the theme from the Settings panel to observe the primary color changing.

These variable colors have different hue values just like a default Tailwind color palette and they are also available for other Tailwind color utilities such as border, ring and etc:

`bg-primary-50`, `text-accent-900`, `text-on-warn-500`, `border-primary`, `ring-warn-600` ...

## Text and Background colors

Fuse also provides set of utilities to have consistent text and background colors throughout your application without hard coding any colors. They also allow working with dark variant of the selected theme.

For example, a text node with a `.text-secondary` class will have a proper lighter color compared to main text color depending on the selected scheme.

Here's the complete list of the available text and background utilities:

`.text-default`
`.text-secondary`
`.text-hint`
`.text-disabled`
`.divider`
`.bg-card`
`.bg-default`
`.bg-dialog`
`.bg-hover`