# Components

CivicTheme UI kit contains a large number of variables that modify all areas of the theme.

Variables allow for modification of:

* Theme and component specific colors
* Typography including `line-height`, `font-size`, `font-weight` and which fonts are used
* Spacing
* Grid system

Variables set within the CivicTheme UI kit have a corresponding variable with the `!default` flag that indicates conditional assignment to a variable — it assigns a value only if the variable was previously undefined or `null`. This allows consumer themes to override any variable's value without needing to change CivicTheme UI kit SASS.

Copy and paste variables as needed into your child theme, modify their values, and remove the `!default` flag. If a variable has already been assigned in your child theme, then it won’t be re-assigned by the default values in CivicTheme UI Kit.

#### Maps

Some of the variables, such as a list of breakpoints or list of colours, are implemented as SASS maps: this allows you to override and/or extend the value list. It also provides a safe mechanism to prevent breakages in case tomorrow CivicTheme introduces a change to a list of values, the solution in hand will support that.

### Where are the variables located

Variables are split into 2 files:

* `_variables.base.scss` - base variables that are used to calculate other variables' values.
* `_variables.components.scss` - variables that control the look of components.

These are split into 2 files to allow changing base variables without the need to provide component variables in custom themes (e.g., to override primary colour in child theme and have it propagate to components).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.civictheme.io/development/uikit/variables.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.