> For the complete documentation index, see [llms.txt](https://theming.breeze.rip/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://theming.breeze.rip/ui-themables.md).

# UI Themables

#### default

| Key              |               Default Value | Description |
| ---------------- | --------------------------: | ----------- |
| accent           |                \[13,98,225] |             |
| corner-radius    |                          25 |             |
| border-thickness |                           2 |             |
| text-primary     |              \[245,245,245] |             |
| text-secondary   |              \[192,192,192] |             |
| text-tertiary    |              \[128,128,128] |             |
| layer-zero       |             \[17,17,17,248] |             |
| layer-one        |             \[30,30,30,150] |             |
| layer-two        |             \[40,40,40,150] |             |
| hovered          | default.layer-one::brighter |             |

#### icon

| Key                |               Default Value | Description |
| ------------------ | --------------------------: | ----------- |
| color              |      default.text-secondary |             |
| color-hovered      |        default.text-primary |             |
| color-disabled     |       default.text-tertiary |             |
| background         |           default.layer-one |             |
| background-hovered | default.layer-one::brighter |             |

#### tooltip

| Key           |        Default Value | Description |
| ------------- | -------------------: | ----------- |
| background    |       default.accent |             |
| text          | default.text-primary |             |
| corner-radius |                    5 |             |

#### textbox

| Key              |                Default Value | Description |
| ---------------- | ---------------------------: | ----------- |
| corner-radius    | default.corner-radius::div;2 |             |
| border           |            default.layer-one |             |
| border-thickness |                            3 |             |
| text-placeholder |        default.text-tertiary |             |
| text             |       default.text-secondary |             |
| selection        |              \[89,89,89,230] |             |

#### button

| Key                 |                Default Value | Description |
| ------------------- | ---------------------------: | ----------- |
| corner-radius       | default.corner-radius::div;2 |             |
| background          |               default.accent |             |
| background-hovered  |    button.background::darker |             |
| background-disabled |            default.layer-two |             |
| text                |         default.text-primary |             |
| text-disabled       |        default.text-tertiary |             |

#### tag

| Key                 |          Default Value | Description |
| ------------------- | ---------------------: | ----------- |
| text                |   default.text-primary |             |
| text-hovered        |  default.text-tertiary |             |
| text-selected       | default.text-secondary |             |
| background          |      default.layer-one |             |
| background-selected |      button.background |             |
| border-thickness    |                      2 |             |
| border              | default.accent::darker |             |
| border-hovered      |         default.accent |             |
| corner-radius       |                    7.0 |             |

#### toast

| Key              |                             Default Value | Description |
| ---------------- | ----------------------------------------: | ----------- |
| background       | default.layer-zero::brighter;2::alpha;245 |             |
| text             |                      default.text-primary |             |
| corner-radius    |              default.corner-radius::div;2 |             |
| border           |                            default.accent |             |
| border-thickness |                                         3 |             |
| title-text       |                      default.text-primary |             |
| message          |                    default.text-secondary |             |

#### panel

| Key                 |            Default Value | Description                                |
| ------------------- | -----------------------: | ------------------------------------------ |
| corner-radius       |    default.corner-radius |                                            |
| background          |       default.layer-zero |                                            |
| menu                |       default.layer-zero |                                            |
| border              |          \[37,37,37,200] |                                            |
| border-thickness    | default.border-thickness |                                            |
| separator           |          \[37,37,37,200] |                                            |
| separator-thickness | default.border-thickness |                                            |
| background-img      |                          | [Background images](/background-images.md) |

#### branding

| Key               |          Default Value | Description |
| ----------------- | ---------------------: | ----------- |
| custom-color      |                  false |             |
| logo-color        |           \[0,180,255] |             |
| client-name       |                 Breeze |             |
| client-name-color |   default.text-primary |             |
| version           |                      % |             |
| version-color     | default.text-secondary |             |

#### user-info

| Key                |                   Default Value | Description |
| ------------------ | ------------------------------: | ----------- |
| background         |               default.layer-one |             |
| corner-radius      | default.corner-radius::mul;0.75 |             |
| icon-bar           |               default.layer-two |             |
| text               |          default.text-secondary |             |
| icon-color         |                      icon.color |             |
| icon-color-hovered |              icon.color-hovered |             |

#### tab

| Key           |         Default Value | Description |
| ------------- | --------------------: | ----------- |
| corner-radius |  button.corner-radius |             |
| selected      |     button.background |             |
| text          | default.text-tertiary |             |
| text-hovered  |  default.text-primary |             |
| text-selected |  default.text-primary |             |

#### drawer

| Key              |                 Default Value | Description |
| ---------------- | ----------------------------: | ----------- |
| border           |                default.accent |             |
| border-thickness |                           2.0 |             |
| background       | default.layer-zero::alpha;245 |             |
| hovered          |    panel.background::brighter |             |
| corner-radius    |  default.corner-radius::div;2 |             |

#### module

| Key                     |          Default Value | Description |
| ----------------------- | ---------------------: | ----------- |
| background              |      default.layer-one |             |
| background-hovered      |        default.hovered |             |
| text                    | default.text-secondary |             |
| text-hovered            |   default.text-primary |             |
| description             |  default.text-tertiary |             |
| description-hovered     | default.text-secondary |             |
| corner-radius           |  default.corner-radius |             |
| edit-background         |        default.hovered |             |
| edit-background-hovered |      default.layer-two |             |
| favourite               |             icon.color |             |
| favourite-hovered       |     icon.color-hovered |             |
| favourite-toggled       |         default.accent |             |
| enabled-background      |        default.hovered |             |
| enabled                 |         default.accent |             |
| tick                    |   default.text-primary |             |

#### settings

| Key            | Default Value | Description |
| -------------- | ------------: | ----------- |
| rounded-design |          true |             |

#### setting-group-panel

| Key           |         Default Value | Description |
| ------------- | --------------------: | ----------- |
| corner-radius | default.corner-radius |             |
| background    |     default.layer-one |             |
| text          |  default.text-primary |             |

#### slider

| Key                    |            Default Value | Description |
| ---------------------- | -----------------------: | ----------- |
| rounded-design         |  settings.rounded-design |             |
| bar                    |           default.accent |             |
| bar-hovered            | default.accent::brighter |             |
| bar-background         |        default.layer-one |             |
| bar-background-hovered |          default.hovered |             |
| knob                   |     default.text-primary |             |

#### switch-button

| Key               |                  Default Value | Description |
| ----------------- | -----------------------------: | ----------- |
| background        |              default.layer-one |             |
| background-hover  |                default.hovered |             |
| corner-radius     |           button.corner-radius |             |
| selected          |              button.background |             |
| hovered           | switch-button.selected::darker |             |
| text-selected     |           default.text-primary |             |
| text-not-selected |          default.text-tertiary |             |

#### keybind

| Key                |         Default Value | Description |
| ------------------ | --------------------: | ----------- |
| bound              |  default.text-primary |             |
| none               | default.text-tertiary |             |
| corner-radius      |  button.corner-radius |             |
| background         |     default.layer-one |             |
| background-hovered |       default.hovered |             |
| binding            |        default.accent |             |

#### boolean

| Key            |           Default Value | Description |
| -------------- | ----------------------: | ----------- |
| rounded-design | settings.rounded-design |             |
| true           |          default.accent |             |
| false          |       default.layer-two |             |
| knob           |    default.text-primary |             |

#### cloud

| Key             |                 Default Value | Description |
| --------------- | ----------------------------: | ----------- |
| corner-radius   |  default.corner-radius::div;2 |             |
| profile-picture |                   \[64,64,64] |             |
| star            |                default.accent |             |
| star-background | default.layer-two::brighter;5 |             |